/*
[레이어] L4 설정
[역할]   휴대폰(640px 이하) 배치 — 컴퓨터 규칙은 그대로 두고 이 파일에서 폭 좁을 때만 덮어쓴다. 글자·사진이 겹치지 않게, 한 손으로 누르기 좋게
[입력]   기본.css·홈.css·시술.css·투어.css·예약.css 다음에 읽는다
[출력]   손님 5화면(홈·시술·투어·예약 시작·예약) 공통
*/
@media (max-width: 640px) {
  /* 공통 */
  .wrap{padding-left:20px;padding-right:20px}
  .nav{padding:12px 16px;gap:8px}.nav .logo{font-size:15px;letter-spacing:.14em}.nav .logo i{font-size:12px;margin-left:4px}
  .nav .lang{margin-left:8px;font-size:10px;gap:2px}.nav .wa{display:none}.nav .pill{padding:8px 14px;font-size:12px}
  .nav .links{gap:8px}.nav .links a:not(.pill){display:none}.nav .logo{white-space:nowrap;padding:8px 0;margin:-8px 0}.bk .lnk,.lookup .lnk{display:inline-block;padding:8px 4px;margin:-8px -4px}   /* 손가락으로 누를 높이(≥32px) */
  h2.t,.tour-p h1,.tour-p h2,.th h1,.bk .side h1{word-break:keep-all}
  .eyebrow{font-size:10px}
  /* 첫판 */
  .hero .in{padding:0 20px 120px}
  .hero h1{font-size:clamp(60px,21vw,92px);line-height:.9;margin:0 0 12px -2px}.hero h1 i{font-size:.46em;margin-top:6px}
  .hero .corner{font-size:9px;letter-spacing:.16em;line-height:1.5;max-width:85%}
  .hero .corner.tl{left:20px;top:64px}.hero .corner.tr{left:20px;right:auto;top:auto;bottom:auto;margin-top:0;position:absolute;top:100px;text-align:left;color:#E6D8D6}
  .hero .bottom{display:block;padding-top:14px}.hero .bottom p{font-size:14px;line-height:1.6;max-width:none}
  .hero .rails{display:none}
  .next.float{left:12px;right:12px;bottom:12px;padding:10px 10px 10px 16px;gap:10px}.next.float small{font-size:9px;letter-spacing:.14em}.next.float b{font-size:13px;line-height:1.3}.next.float .cta{padding:10px 8px 10px 14px;font-size:13px}
  /* 소개·숫자 */
  .about{display:block}.about .big{font-size:clamp(26px,7.5vw,36px)}.about .nums{grid-template-columns:1fr;gap:14px;margin-top:22px}
  .marquee{font-size:12px}
  /* 신뢰 */
  .trust .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.trust .facts div{padding:14px;min-width:0}.trust .facts b{font-size:22px;white-space:normal}.trust .facts span{font-size:11.5px}   /* 영어 큰 글자(Certified abroad)가 한 줄 고정이라 작은 폰(360px)에서 칸을 밀던 것 */
  .trust .strips{grid-template-columns:1fr}.trust figure img{width:120px;height:86px}.trust figcaption{font-size:10.5px;max-width:120px}
  /* 시술 이력 띠 */
  .works .card{width:200px}.works .card .slot{height:250px}
  /* 영상 */
  .video .grid{grid-template-columns:1fr 1fr;gap:10px}
  /* 과정 */
  .process .steps{grid-template-columns:1fr;gap:16px}
  /* 오너 */
  .owner{display:flex;flex-direction:column;justify-content:center;padding:72px 20px 48px;gap:0}.owner .pic{width:190px;max-width:60%;margin:0 auto 26px;justify-self:center}.owner .slot{max-height:none}.owner .txt{padding:0}.owner .txt p.q{font-size:clamp(20px,6vw,26px);margin-bottom:22px}
  /* 시술 종목 */
  .menu .head{flex-direction:column;align-items:flex-start;gap:14px}.menu .head .cta{align-self:flex-start;max-width:100%}   /* 제목 옆 단추가 영어(긴 글)에서 화면 밖으로 나가던 것 */
  .menu .cats{grid-template-columns:1fr;gap:12px}
  /* 투어 띠 */
  .tour .tour-in{padding:60px 20px 24px;max-width:100%}.tour .chips{gap:8px}.tour .chip{padding:10px 14px;font-size:13px;max-width:100%}.tour .ctas{flex-direction:column;align-items:stretch;width:100%}.tour .ctas .cta{justify-content:space-between}.tour footer{padding:22px 20px 18px}.tour footer .big{font-size:30px}
  html,body{overflow-x:hidden}
  .screen{min-height:auto;padding-top:56px;padding-bottom:56px}.hero.screen{min-height:100dvh;padding:0}
  /* 시술 페이지 */
  .jump{gap:8px}.jump a{padding:8px 12px;font-size:12px}.tx{display:block}.tx .pic{max-width:100%;margin-bottom:16px}.tx dl{grid-template-columns:1fr}
  /* 투어 페이지 */
  .tour-p header{padding-top:90px}
  .tc .th{grid-template-columns:1fr;gap:8px;padding:16px}.tc .th .nm b{font-size:26px}.tc .sum .row{grid-template-columns:1fr;gap:2px;font-size:13px}.tc .sum dt{font-size:10px}
  .tc .left{justify-self:start}.tc .tog{justify-self:end;margin-top:-30px}.tc .sum .st{display:none}
  .tc .tb{padding:6px 16px 18px}.tc dl{grid-template-columns:1fr;gap:10px}.tc .drow{gap:6px}.tc .d{min-width:62px;padding:6px 8px}.tc .d b{font-size:15px}
  .calbox{padding:10px 8px 8px;border-radius:14px}.calnav .mh{font-size:18px}.cells{gap:3px;grid-template-columns:repeat(7,minmax(0,1fr))}.cell{min-height:52px;padding:4px;border-radius:8px;min-width:0;overflow:hidden}.ev b,.ev small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell .n{font-size:10px}.ev{font-size:9px;padding:3px 4px;border-radius:5px}.ev b{font-size:9.5px}.ev small{display:none}.wd span{font-size:9px}
  .legend{gap:6px}.legend .lg{font-size:10px;padding:4px 8px}
  /* 예약 시작 */
  .gate{padding:90px 16px 40px}.gbox{padding:24px 18px;border-radius:20px}
  /* 예약 */
  .bk,.bk.wrap{padding:84px 16px 90px;gap:22px;grid-template-columns:minmax(0,1fr)}.bk .side,.bk .main{min-width:0;max-width:100%}.bk .stepper{overflow-x:auto;-webkit-overflow-scrolling:touch}.bk .side h1{font-size:34px;margin-bottom:8px}
  .bk .stepper{display:flex;gap:4px;overflow-x:auto;padding-bottom:6px}.bk .stepper div{flex:none;font-size:11px;padding:6px 8px;border-radius:999px;border:1px solid var(--line)}.bk .stepper div .n{width:16px;height:16px;font-size:10px;margin-right:4px}.bk .stepper div:not(.on){font-size:0;padding:6px}.bk .stepper div:not(.on) .n{margin:0}
  .bk .sum{margin-top:12px;padding:12px 14px;font-size:12.5px}.bk .sum b{font-size:13px;margin-bottom:6px}.bk .sum div{padding:4px 0}
  .bk .block{padding-top:26px}.bk .main h2.t{font-size:clamp(24px,7vw,30px)}
  .bk .city{padding:14px 14px;gap:10px}.bk .city .c b{font-size:20px}.bk .city .left{font-size:12px;text-align:right}
  .bk .item{grid-template-columns:22px 1fr;padding:14px}.bk #step3 .item{grid-template-columns:22px 1fr auto}.bk .item .sb{display:none}.bk #step3 .item .pr{font-size:13px}
  .bk .tzrow{flex-direction:column;align-items:flex-start;gap:8px}.bk .days{gap:6px}.bk .day{min-width:70px;padding:8px}.bk .slots{grid-template-columns:1fr 1fr;gap:8px}.bk .slot-t{padding:10px}
  .bk .f2{grid-template-columns:100px 1fr;gap:8px}.bk .q{flex-direction:column;align-items:flex-start;gap:6px}
  .bk .sum2{grid-template-columns:1fr 1fr;gap:10px}.bk .bno b{font-size:clamp(26px,8vw,36px)}
  .bk .dep{padding:14px}.bk .dep .amt b{font-size:24px}.bk .dep .bank div{flex-direction:column;align-items:flex-start;gap:2px}.bk .dep .bank div span:last-child{text-align:left;font-size:12px}
  .bk .depstep{font-size:20px}.bk .ctas{flex-direction:column;align-items:stretch}.bk .ctas .cta,.bk .dep .cta{justify-content:space-between;white-space:normal;text-align:left;min-width:0;max-width:100%}.bk .done{padding:22px 18px}
  footer{padding:36px 20px 24px}footer .row{flex-direction:column;align-items:flex-start;gap:18px}footer .big{font-size:min(34px,8.5vw);white-space:nowrap;max-width:100%}footer .big i{margin-left:6px}footer .links{flex-wrap:wrap;gap:8px 18px;font-size:13px}footer .links a{white-space:nowrap}footer .fine{flex-direction:column;gap:4px;white-space:normal;margin-top:22px}
}