/* =========================================================
   휴대폰·태블릿 전용 보정 (메뉴는 1024px 이하, 나머지는 768px 이하 — 컴퓨터 화면은 그대로)
   ========================================================= */

/* 모든 화면 공통: 한글 단어 중간에서 줄이 끊기지 않게, 제목은 줄 길이를 고르게 */
body{word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,h4,.sec-title,.sp-title{text-wrap:balance}
p,li,.d{text-wrap:pretty}

/* 모바일 메뉴 버튼·패널은 컴퓨터에서 숨김 */
.m-burger,.m-nav{display:none}

@media (max-width:1024px){
  /* ---- 헤더 + 햄버거 메뉴 ---- */
  .mega{display:none!important}
  .m-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-right:-8px;padding:0 10px;border:0;background:none;cursor:pointer;position:relative;z-index:1001}
  .m-burger i{display:block;height:2px;border-radius:2px;background:#191f28;transition:transform .3s,opacity .3s}
  .m-open .m-burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .m-open .m-burger i:nth-child(2){opacity:0}
  .m-open .m-burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .m-nav{display:block;position:fixed;inset:72px 0 0 0;z-index:1000;background:#fff;overflow-y:auto;padding:8px 20px 40px;transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),visibility .35s}
  .m-open .m-nav{transform:none;visibility:visible}
  .m-open{overflow:hidden}
  .m-grp{border-bottom:1px solid #eee}
  .m-grp>button,.m-grp>a{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 2px;border:0;background:none;font:inherit;font-size:17px;font-weight:700;color:#191f28;text-align:left;cursor:pointer}
  .m-grp>button::after{content:"";width:8px;height:8px;border-right:2px solid #999;border-bottom:2px solid #999;transform:rotate(45deg) translateY(-3px);transition:transform .3s}
  .m-grp.open>button::after{transform:rotate(-135deg) translateY(-3px)}
  .m-grp ul{list-style:none;margin:0;padding:0 0 14px;display:none}
  .m-grp.open ul{display:block}
  .m-grp li a{display:block;padding:9px 4px;font-size:15px;color:#555}
  .m-grp li a:active{color:var(--mint)}
  .m-call{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:28px;padding:16px;border-radius:14px;background:var(--mint);color:#fff;font-size:17px;font-weight:700}
}

@media (max-width:768px){
  header#hd{height:60px}
  .hd{height:60px;gap:0;justify-content:space-between}
  .hd-cta{display:none}
  .hd .logo{flex:0 0 auto}
  .logo img{height:32px!important;width:auto}
  .m-nav{inset:60px 0 0 0}
  html{-webkit-text-size-adjust:100%}
  body{font-size:15px}
  .wrap{width:auto;padding-left:20px;padding-right:20px}

  /* ---- 오른쪽 아래 상담 버튼: 작게 ---- */
  .fab{right:12px;bottom:14px;gap:8px}
  .fab-btn{width:42px;height:42px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
  .fab-btn svg{width:22px;height:22px}
  .fab-tip{display:none}

  /* ---- 공통 제목·여백 ---- */
  .eyebrow{font-size:15px;margin-bottom:6px}
  .sec-title{font-size:22px;line-height:1.4}
  .sec-desc{font-size:14px;margin-top:12px}
  .sp-tag{font-size:12px}
  .sp-title{font-size:24px}
  .sp-sec{padding:64px 0}
  .btn{padding:12px 22px;font-size:14px}

  /* ---- 메인: 첫 화면 ---- */
  .hero{height:78svh;min-height:520px;padding:68px 12px 12px}
  .hero-in{border-radius:20px}
  .hero-txt{left:22px;right:22px;max-width:none}
  .hero-txt .badge{font-size:12px;margin-bottom:10px}
  .hero-txt h1,.hero-txt .h1{font-size:22px;line-height:1.4;word-break:keep-all}
  .hero-txt p{font-size:13px;margin-top:12px;word-break:keep-all}
  .hero-txt .btn{padding:10px 18px;font-size:13px}
  .hero-txt p br{display:none}
  .hero-txt .btn{margin-top:22px}
  .hero-ctrl{left:22px;bottom:22px;font-size:13px}

  /* 메인: HAODESIGN 인트로 */
  .hz{--r:2.15vw!important}
  .hz-btn{border-width:2px}
  /* HAODESIGN 인트로 사진 7장: 모두 화면 안에 (제목 위아래로 배치, 잘림 없음) */
  .hz-img.n1{top:calc(9 * var(--r))!important;left:16%!important;width:calc(10 * var(--r))!important}
  .hz-img.n5{top:calc(4 * var(--r))!important;left:66%!important;width:calc(19 * var(--r))!important}
  .hz-img.n3{top:calc(26 * var(--r))!important;left:30%!important;width:calc(10 * var(--r))!important}
  .hz-img.n7{top:calc(28 * var(--r))!important;left:84%!important;width:calc(9 * var(--r))!important}
  .hz-img.n2{top:calc(62 * var(--r))!important;left:28%!important;width:calc(19 * var(--r))!important}
  .hz-img.n4{top:calc(64 * var(--r))!important;left:76%!important;width:calc(10 * var(--r))!important}
  .hz-img.n6{top:calc(80 * var(--r))!important;left:70%!important;width:calc(9 * var(--r))!important}


  /* 메인: 디자이너 소개 */
  .doctor .big{font-size:34px;top:40px}
  .doc-inner{padding-top:84px}
  .doc-frame{max-width:190px;height:260px}
  .doc-kicker{font-size:15px!important}
  .doc-side h3{font-size:20px!important;white-space:normal;word-break:keep-all}
  .doc-side.right{font-size:14px!important}

  /* 메인: ONE STOP 숫자 */
  .onestop{padding:64px 0 40px}

  /* 메인: 서비스 7종 */
  .clinics{padding:64px 0 56px}
  .svc-blocks{gap:56px}
  .svc{gap:18px}
  .svc-copy{flex:none}
  .svc-media{border-radius:18px}
  .svc-kicker{font-size:15px}
  .svc-title{font-size:20px!important}
  .svc-desc{font-size:13.5px!important}
  .svc-cta{padding:9px 16px!important;font-size:12.5px!important}
  .svc-cta svg{width:18px!important;height:18px!important}
  .svc-media{aspect-ratio:16/9}

  /* 메인·서브: FAQ */
  .faqs{padding:56px 0 64px}
  .fq-q{font-size:14.5px;padding:14px 16px;line-height:1.45}
  .fq-pl{width:46px;height:46px}
  .fq-a p{font-size:14px;padding:14px 16px}

  /* 견적 문의 */
  .quote{padding:56px 0}
  .qt-title{font-size:26px}
  .qt-desc{font-size:14.5px}

  /* ---- 서브 페이지 머리 ---- */
  .sp-hero{padding:96px 0 40px}
  .sp-hero h1{font-size:34px}
  .sp-hero .lead{font-size:14.5px;word-break:keep-all}
  .ctabs a{padding:10px 24px;font-size:14px}

  /* 서비스 페이지: 표지 */
  .svc-cover2{padding:96px 0 40px}
  .sc-in{width:auto;padding:0 20px}
  .sc-head{font-size:30px!important}
  .sc-bar{height:40px;margin:22px 0}
  .sc-tag{font-size:22px!important}
  .sc-kw{margin-top:22px;font-size:15px}
  .sc-desc{font-size:14.5px}
  .sc-desc br{display:none}
  .svc-desc br{display:none}
  .sc-gal{margin-top:28px}
  .sc-gal li{padding:0 6px;margin-bottom:18px}
  .sc-gal li:nth-child(2n){top:40px}
  .sc-card{padding-top:0}
  .sc-img{border-radius:14px}
  .sc-cap{font-size:13px}

  /* 서비스 페이지: 진행 과정 카드 */
  .pscroll{padding:56px 0}
  .ps-title{font-size:26px}
  .ps-card{width:66vw;padding:24px;border-radius:20px}
  .ps-no{font-size:38px!important}
  .ps-tit{font-size:20px;margin-top:12px}
  .ps-desc{font-size:13.5px}

  /* 서비스 페이지: 작업 사례 카드 */
  .wfan .wf-slide{margin-top:28px;gap:10px}
  .wf-cap b{font-size:13px}
  .wfan .more{margin-top:32px}

  /* 서비스 페이지: 서비스 소개 */
  .bxs{padding:56px 0}
  .bx-in{width:auto;padding:0 20px;gap:10px}
  .bx-title{font-size:24px}
  .bx-title::before{width:40px;height:4px;margin-bottom:16px}
  .bx-item{padding:22px 0}
  .bx-no{font-size:36px;margin-bottom:10px}
  .bx-lead{font-size:19px}
  .bx-item p{font-size:14.5px;margin-top:12px}
  .bx-tags span{font-size:12.5px;padding:6px 12px}

  /* 포트폴리오 */
  .ftabs{display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:8px;margin:0 -20px;padding:0 20px 6px;scrollbar-width:none}
  .ftabs::-webkit-scrollbar{display:none}
  .ftabs button{flex:0 0 auto;padding:9px 16px;font-size:13.5px}
  .wgrid,.wgrid.all{gap:14px 10px}
  .wc .m{border-radius:12px}
  .wc h4{font-size:14px;margin-top:10px}
  .wc span{font-size:12px}

  /* 칼럼 */
  .cgrid{grid-template-columns:1fr!important;gap:16px}
  .cc .m{aspect-ratio:16/9!important;height:auto!important}
  .cc .b{padding:18px 18px 20px!important}
  .cc h3{font-size:16.5px!important;line-height:1.45}
  .cc p{font-size:13.5px!important}


  /* 회사소개: 머리 문구, '하오 DESIGN은 다릅니다' */
  .sp-hero--vid h1{font-size:26px;line-height:1.4;word-break:keep-all}
  .hw-sticky{padding-top:64px}
  .hw-right{width:100%}
  .hw-cap{font-size:13px;margin-bottom:16px}
  .hw-menu{gap:12px}
  .hw-menu button{font-size:14.5px}
  .hw-menu li.on button{font-size:20px}
  .hw-pic{width:min(300px,80vw)}
  .hw-texts{min-height:200px;padding:0 4px}
  .hw-t .en{font-size:14px}
  .hw-t h3{font-size:23px}
  .hw-t .d{margin-top:12px;font-size:14.5px;word-break:keep-all}
  .hw-mq span{font-size:72px;color:rgba(255,255,255,.4)}
  /* 아래쪽 흰색 번짐을 줄여 흐르는 글자가 보이게 */
  .hw-bg::after{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 6%,rgba(255,255,255,0) 100%)}
  .hw-bgs::after{height:36px}
  .hw-mq{-webkit-mask-image:none;mask-image:none;padding-bottom:28px}
  /* 위쪽 물결 낮게 */
  .hw-wave{top:-3vh;height:17vh;filter:blur(8px)}

  /* 회사소개 */
  .fp-title{font-size:21px}
  .fp-desc p,.fp-quote{font-size:14.5px}
  .fp-num{font-size:52px!important}

  /* 푸터 */
  footer{padding-bottom:80px}

  /* ---- v2: 더 작게 + 휴대폰용 효과 ---- */
  body{padding-bottom:0!important}
  /* 메인: 선택 이유 카드 → 옆으로 넘기는 카드 */
  .dv-list{flex-direction:row!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:24px -20px 0;padding:0 20px 8px;scrollbar-width:none}
  .dv-list::-webkit-scrollbar{display:none}
  .dv,.dv.on{flex:0 0 78%!important;scroll-snap-align:start;border-radius:20px}
  .dv-o{padding:24px 22px!important;gap:18px!important}
  .dv-o .dv-icon{width:40px!important;height:40px!important}
  .dv-o .no{font-size:15px}
  .dv-o h3{font-size:18.5px!important;margin-top:6px}
  .dv-o .tags{margin-top:16px;gap:6px}
  .dv-o .tags span{padding:6px 11px;font-size:11.5px}
  .m-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
  .m-dots i{width:6px;height:6px;border-radius:3px;background:#e5d8d4;transition:width .3s,background .3s}
  .m-dots i.on{width:18px;background:var(--mint)}
  /* 메인: 숫자 */
  .os-title{font-size:24px!important}
  .os-num{font-size:40px!important}
  .os-desc{font-size:13.5px!important}

  /* 회사소개: 약속 원 3개 → 옆으로 넘기는 원 */
  .ab-orbit-title{font-size:21px;word-break:keep-all}
  .ab-orbit{flex-direction:row!important;justify-content:flex-start!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;margin:24px -20px 0!important;padding:4px 20px 8px!important;scrollbar-width:none}
  .ab-orbit::-webkit-scrollbar{display:none}
  .ab-orb{width:240px!important;flex:0 0 240px!important;scroll-snap-align:center;padding:20px}
  .ab-orb-ic{width:48px}
  .ab-orb h3{font-size:19px}
  .ab-orb .sub{font-size:13px}
  .ab-orb p:not(.sub){font-size:12px;margin-top:8px;line-height:1.6}
  .ab-orbit-foot{font-size:21px;margin-top:28px;word-break:keep-all}
  /* 회사소개: '무엇이 다를까요' 원 — 스크롤하면 커짐 (mobile.js) */
  .hwi-sticky{padding:56px 0!important}
  .hwi-circle{width:68vw!important;will-change:transform}
  .hwi-txt{font-size:20px!important}

  /* 서비스 표지 사진 */
  .sc-head{font-size:26px!important}
  .sc-tag{font-size:19px!important}
  .sc-cap{font-size:12px;margin-top:6px}
  .sc-gal li{margin-bottom:12px}

  /* 휴대폰 공통 등장 효과 (mobile.js가 붙임) */
  .m-rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}
  .m-rv.m-in{opacity:1;transform:none}
}