@charset "utf-8";
/* ============================================================
   THE RAUM PENTHOUSE - style_resp.css (반응형)
   ============================================================ */

/* hamburger (mobile only) */
.tr-nav-toggle{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;gap:6px;cursor:pointer}
.tr-nav-toggle span{display:block;height:2px;background:#fff;transition:.3s}
.tr-nav-toggle.on span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.tr-nav-toggle.on span:nth-child(2){opacity:0}
.tr-nav-toggle.on span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ===== ~1400px ===== */
@media (max-width:1400px){
  .tr-gnb{gap:40px}
  .tr-gnb a{font-size:20px}
  .tr-hero .cap .eng{font-size:109px}
  .tr-hero .cap .tit{font-size:52px;letter-spacing:9px}
}

/* ===== ~1100px (tablet) ===== */
@media (max-width:1100px){
  .tr-inner{padding:0}
  #tr-header{height:80px}
  #tr-header .tr-inner{padding:0 18px}
  #tr-header.scrolled{height:70px}
  .tr-logo img{max-width:220px;max-height:40px}
  #tr-header.scrolled .tr-logo img{max-width:200px;max-height:36px}
  .tr-logo .l1{font-size:28px;letter-spacing:3px}
  .tr-logo .l2{font-size:13px;letter-spacing:4px}
  .tr-util .tel{font-size:30px}
  .tr-util .fav{display:none}
  /* mobile nav */
  .tr-nav-toggle{display:flex}
  .tr-gnb{position:fixed;top:0;left:auto;right:-100%;transform:none;width:66%;max-width:320px;height:100vh;background:var(--maroon);
    flex-direction:column;gap:0;padding:100px 30px 30px;transition:right .4s ease;box-shadow:-10px 0 40px rgba(0,0,0,.3)}
  .tr-gnb.on{right:0}
  .tr-gnb a{font-size:18px;width:100%;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.15)}
  .tr-gnb a::after{display:none}
  .tr-navmask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;display:none}
  .tr-navmask.on{display:block}

  .tr-hero .cap .eng{font-size:83px}
  .tr-hero .cap .sub{font-size:22px}
  .tr-hero .cap .tit{font-size:42px;letter-spacing:6px}
  .tr-hero .cap .tit small{font-size:31px}
  .tr-hero .arw{width:44px;height:44px;font-size:21px}
  .tr-hero .arw.prev{left:16px}.tr-hero .arw.next{right:16px}

  .loc-cols{flex-direction:column;gap:22px}
  .unit-slide{flex-direction:column;gap:26px}
  .unit-arw.prev{left:0}.unit-arw.next{right:0}
  .sec-site,.sec-loc{padding-bottom:70px}
}

/* ===== ~768px (mobile) ===== */
@media (max-width:768px){
  .tr-logo img{max-width:185px;max-height:36px}
  #tr-header.scrolled .tr-logo img{max-width:170px}
  .tr-sec-head{padding:70px 18px 34px}
  .tr-sec-head .ko{font-size:34px}
  .tr-sec-head .en{font-size:21px;letter-spacing:4px}
  .tr-sec-head .desc{font-size:18px}
  .life-head{padding:70px 18px 40px}
  .life-head .ko{font-size:33px}
  .life-head .en{font-size:21px}

  .tr-hero{min-height:560px}
  .tr-hero .cap .eng{font-size:59px;letter-spacing:3px}
  .tr-hero .cap .sub{font-size:19px;margin-top:14px}
  .tr-hero .cap .tit{font-size:32px;letter-spacing:4px}
  .tr-hero .cap .tit small{font-size:24px}
  .tr-scroll{bottom:122px}

  .tr-mainimg{min-height:44vh}
  .tr-mainimg .ph.empty{min-height:44vh;font-size:15px}
  .tr-mainimg .over .ko{font-size:35px;letter-spacing:3px}
  .tr-mainimg .over .en{font-size:21px;letter-spacing:4px}

  .site-map .ph.empty,.life-img .ph.empty{min-height:300px}
  .loc-col{padding:32px 24px}
  .loc-col .en{font-size:22px;letter-spacing:3px}
  .loc-col .ko{font-size:22px;margin:5px 0 18px}
  .loc-col ul li{font-size:16px;padding:10px 0 10px 18px}
  .unit-plan .ph.empty{min-height:320px}
  .unit-dots{gap:8px;margin-bottom:30px}
  .unit-dots b{width:auto;padding:0 15px;height:40px;line-height:38px;font-size:15px}
  .unit-info .ui-num{font-size:74px}
  .unit-info .ui-ty{font-size:16px}
  .unit-info .ui-hgt{font-size:14px}
  .unit-info .ui-r{padding:14px 2px}
  .unit-info .ui-r .l{font-size:15px}
  .unit-info .ui-r .v{font-size:19px}
  .unit-info .ui-r .v .py{font-size:14px}
  .unit-info .ui-tot{padding:15px 18px}
  .unit-info .ui-tot .l{font-size:15px}
  .unit-info .ui-tot .v{font-size:20px}
  .unit-info .note{font-size:13px}

  .loc-wrap{flex-direction:column;gap:26px}
  .loc-text,.loc-media{flex:1 1 100%;width:100%}
  .loc-text .tel a{font-size:42px}
  .loc-media .ph.empty{min-height:300px}

  .cust-form{padding:26px 20px}
  .cust-row{flex-direction:column;gap:0}
  .cust-head .ko{font-size:32px}
  .sec-customer{padding:66px 16px 80px}
  /* 개인정보취급방침 · 동의함 · 동의안함 한 줄 유지 */
  .cust-agree{gap:14px;font-size:16px;flex-wrap:nowrap;white-space:nowrap}
  .cust-agree .lbl{flex:0 0 auto}
  .cust-agree label{gap:5px;white-space:nowrap;flex:0 0 auto}

  .ft-top{gap:22px}
  #tr-footer{padding:44px 18px 120px}

  /* fixed bar mobile (플로팅 카드) */
  #tr-fixbar{padding:0 10px 10px}
  #tr-fixbar .fx-inner{padding:10px 12px 10px 18px;gap:10px}
  #tr-fixbar .fx-ghost{display:none}
  #tr-fixbar .fx-info .l{font-size:13px}
  #tr-fixbar .fx-info .n{font-size:27px}
  #tr-fixbar .fx-cta{height:48px;padding:0 20px;font-size:18px}
  #tr-top{bottom:86px;right:16px;width:46px;height:46px}
}

/* ===== ~480px (small) ===== */
@media (max-width:480px){
  .tr-logo img{max-width:150px}
  #tr-header.scrolled .tr-logo img{max-width:140px}
  .tr-logo .l1{font-size:24px}
  .tr-util .tel{font-size:24px}
  .tr-gnb{padding:88px 26px 30px}
  .tr-gnb a{font-size:16px;padding:15px 0}
  /* hero */
  .tr-hero .cap .eng{font-size:42px}
  .tr-hero .cap .sub{font-size:16px}
  .tr-hero .cap .tit{font-size:23px}
  .tr-hero .cap .tit small{font-size:19px}
  /* section heads */
  .tr-sec-head{padding:56px 18px 28px}
  .tr-sec-head .ko{font-size:24px}
  .tr-sec-head .en{font-size:15px;letter-spacing:3px}
  .tr-sec-head .desc{font-size:15px}
  .life-head .ko{font-size:23px}
  .life-head .en{font-size:15px}
  .tr-mainimg .over .ko{font-size:28px}
  .tr-mainimg .over .en{font-size:16px}
  /* directions */
  .loc-text .addr{font-size:18px}
  .loc-text .addr b{font-size:13px}
  .loc-text .tel a{font-size:34px}
  .loc-text .tel b{font-size:12px}
  .loc-notes li{font-size:13px}
  .loc-text .btns a{font-size:14px;padding:11px 20px}
  /* unit */
  .unit-dots b{padding:0 12px;height:36px;line-height:34px;font-size:13px}
  .unit-info .ui-num{font-size:56px}
  .unit-info .ui-ty{font-size:14px}
  .unit-info .ui-hgt{font-size:13px}
  .unit-info .ui-r{padding:13px 2px}
  .unit-info .ui-r .l{font-size:14px}
  .unit-info .ui-r .v{font-size:16px}
  .unit-info .ui-r .v .py{font-size:12px}
  .unit-info .ui-tot .l{font-size:14px}
  .unit-info .ui-tot .v{font-size:18px}
  .unit-info .note{font-size:12px}
  /* customer form */
  .cust-head .ko{font-size:26px}
  .cust-head .en{font-size:15px}
  .cust-form input,.cust-form select,.cust-form textarea{font-size:15px}
  .cust-agree{gap:10px;font-size:14px}
  /* footer */
  .ft-logo{font-size:22px}
  .ft-meta{font-size:15px}
  .ft-notes{font-size:13px}
  /* directions cols */
  .loc-col{padding:26px 20px}
  .loc-col .en{font-size:19px}
  .loc-col .ko{font-size:20px}
  .loc-col ul li{font-size:15px;padding:9px 0 9px 16px}
}

/* ===== ~400px : 초소형 헤더/하단바 정리 ===== */
@media (max-width:400px){
  /* header */
  #tr-header{height:64px}
  #tr-header.scrolled{height:60px}
  #tr-header .tr-inner{padding:0 14px}
  .tr-logo img{max-width:132px;max-height:34px}
  #tr-header.scrolled .tr-logo img{max-width:124px;max-height:32px}
  .tr-util{gap:10px}
  .tr-util .tel{font-size:22px;white-space:nowrap}
  .tr-nav-toggle{width:34px;height:34px}
  /* fixbar */
  #tr-fixbar{padding:0 8px 8px}
  #tr-fixbar .fx-inner{padding:9px 10px 9px 14px;gap:8px}
  #tr-fixbar .fx-info{gap:9px}
  #tr-fixbar .fx-info .fx-ic{width:40px;height:40px;flex:0 0 40px}
  #tr-fixbar .fx-info .l{font-size:11px;letter-spacing:.5px}
  #tr-fixbar .fx-info .n{font-size:23px;white-space:nowrap}
  #tr-fixbar .fx-cta{height:46px;padding:0 15px;font-size:16px;gap:6px;white-space:nowrap;flex:0 0 auto}
  #tr-top{bottom:82px;right:12px;width:42px;height:42px}
  .tr-scroll{bottom:112px}
  .unit-dots{gap:6px}
  .unit-dots b{padding:0 10px;height:33px;line-height:31px;font-size:12px}
  /* typography step-down */
  .tr-hero .cap .eng{font-size:38px}
  .tr-hero .cap .tit{font-size:21px}
  .tr-sec-head .ko{font-size:22px}
  .tr-sec-head .en{font-size:14px}
  .tr-sec-head .desc{font-size:14px}
  .life-head .ko{font-size:21px}
  .loc-text .addr{font-size:17px}
  .loc-text .tel a{font-size:30px}
  .cust-head .ko{font-size:23px}
  .ft-logo{font-size:20px}
  .unit-info .ui-num{font-size:52px}
  .loc-col .en{font-size:17px}
  .loc-col .ko{font-size:18px}
  .loc-col ul li{font-size:14px}
}

/* ===== ~360px ===== */
@media (max-width:360px){
  .tr-logo img{max-width:124px}
  .tr-util .tel{font-size:20px}
  #tr-fixbar .fx-inner{padding:8px 9px 8px 13px;gap:8px}
  #tr-fixbar .fx-info{gap:8px}
  #tr-fixbar .fx-info .fx-ic{width:38px;height:38px;flex:0 0 38px}
  #tr-fixbar .fx-info .n{font-size:22px}
  #tr-fixbar .fx-cta{padding:0 13px;font-size:15px}
  .cust-agree{gap:7px;font-size:13px}
}

/* ===== ~340px : 최소 폭(320) 대응 ===== */
@media (max-width:340px){
  .tr-logo img{max-width:112px}
  #tr-header.scrolled .tr-logo img{max-width:106px}
  .tr-util{gap:8px}
  .tr-util .tel{font-size:19px}
  .tr-nav-toggle{width:30px;height:30px}
  #tr-fixbar .fx-inner{padding:8px 8px 8px 11px;gap:6px}
  #tr-fixbar .fx-info{gap:7px}
  #tr-fixbar .fx-info .fx-ic{width:34px;height:34px;flex:0 0 34px}
  #tr-fixbar .fx-info .l{font-size:10px}
  #tr-fixbar .fx-info .n{font-size:20px}
  #tr-fixbar .fx-cta{height:42px;padding:0 11px;font-size:14px}
  .unit-dots b{padding:0 8px;font-size:11px;letter-spacing:0}
  .tr-hero .cap .eng{font-size:34px}
  .tr-hero .cap .tit{font-size:19px}
  .tr-sec-head .ko{font-size:20px}
  .life-head .ko{font-size:20px}
  .loc-text .tel a{font-size:28px}
  .cust-head .ko{font-size:21px}
  .unit-info .ui-num{font-size:48px}
}

/* ===== 서브페이지 반응형 ===== */
@media (max-width:1100px){
  /* 모바일 GNB: 드롭다운을 아코디언으로 */
  .tr-gnb .m{flex-direction:column;align-items:flex-start;width:100%}
  .tr-gnb .m>a{width:100%;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.15);font-size:22px}
  .tr-gnb .m>a::after{display:none}
  .tr-gnb .sub{position:static;transform:none;opacity:1;visibility:visible;background:rgba(0,0,0,.18);
    box-shadow:none;border-top:0;margin:0;padding:0;min-width:0;width:100%;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .tr-gnb .m.open .sub{max-height:500px}
  .tr-gnb .sub li a{text-align:left;padding:14px 18px;color:#f0dede}
  .tr-gnb .m>a .caret{display:inline-block;margin-left:auto;transition:.3s}
  .tr-gnb .m.open>a .caret{transform:rotate(180deg)}
}
@media (max-width:768px){
  .tr-subvisual{height:34vh;min-height:250px}
  .tr-subvisual .ko{font-size:35px;letter-spacing:2px}
  .tr-subvisual .en{font-size:21px;letter-spacing:5px}
  .sub-intro{padding:54px 18px 30px}
  .sub-intro .tt{font-size:30px}
  .ov-table dl{flex-direction:column}
  .ov-table dt{width:100%;padding:12px 16px}
  .ov-table dd{padding:12px 16px}
  .unit-tabs a{padding:9px 16px;font-size:18px}
  .plan-wrap .ph.empty{min-height:320px}
  .tr-subwrap{padding:10px 0 70px}
}


/* 서브페이지(참고 동일) 반응형 */
@media (max-width:1100px){
  #tr-header.solid{height:70px}
  .tr-subtop{margin-top:70px;height:110px}
  .tr-subtabs a{font-size:17px;padding:16px 6px}
}
@media (max-width:768px){
  .tr-subtabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tr-subtabs .in{min-width:560px}
  .tr-subimg{padding:34px 12px 20px}
  .tr-subimg .ph.empty{min-height:340px}
  .cust2{padding:44px 16px 70px}
  .cust2 .tt{font-size:33px}
  .cust2 .row{flex-direction:column}
  .cust2 .row .lb{width:100%;padding:12px 16px}
  .cust2 .row .fd{padding:12px 16px;flex-wrap:wrap}
}