@charset "UTF-8";
.phone-wrap{
  margin: auto 3rem;
}
.plan-header{
  margin-top: 5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.plan-header h1{
  font-size: 2.5rem;
  font-family: "Cormorant Infant", serif;
  color: #998675;
}
.plan-header h2{
  color: #998675;
}
/* ===== 平面圖 ===== */
.unit-plan{
  margin: 2rem 1.5rem;
}
.plan-frame{
  position: relative;
  margin: .5rem auto;
}

.plan-base{
  width: 100%;
  display: block;
}

.plan-hotspots{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* === 平面圖互動（polygon 專用最終版） === */
.unit { cursor: pointer; }
.unit text { pointer-events: none; }

/* 命中區：透明填色也算命中 */
.unit polygon{
  fill: rgba(154,135,116,0);
  pointer-events: all;
  transition: fill .25s ease;
}

/* 桌機 hover：變色 */
.unit:hover polygon{
  fill: rgba(154,135,116,.18);
}

/* 手機點下去回饋（推薦） */
.unit:active polygon{
  fill: rgba(154,135,116,.22);
}

/* 手機：指定戶型呼吸（加 .hint 就會動） */
@media (pointer: coarse) {
  .unit.hint polygon{
    animation: hintPulse 2s ease-in-out infinite;
  }
}

@keyframes hintPulse{
  0%, 100% { fill: rgba(154,135,116,0); }
  50%      { fill: rgba(154,135,116,.18); }
}












/* ===== 保護文字+指北針 ===== */
.protect-text{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  align-items: center;
}
.compass img{
  width: 30px;
}

/* ------------------------------------------------- */

/* 平板專用樣式 */
  @media (min-width: 768px) and (max-width: 1023px){
   .phone-wrap{/* 畫面留白區域 */
    margin: 3rem 6.5rem;
    transition: width 0.35s ease;
  }
   .plan-header h1{ /* 改3~7F的文字大小 */
    font-size: 4rem;
  }
  .unit-plan{/* 平面圖大小 */
  margin: 1.5rem 5rem;
  }
  .compass img{/* 指北針大小 */
   width: 40px;
  }
  .protect-text{
    margin-bottom: 5rem;
  }
 } 

 /* ------------------------------------------------- */

  /* 桌機小螢幕（含 iPad 橫向）優化樣式 */
  @media (min-width: 1024px) and (max-width: 1279px) {
    .phone-wrap{/* 畫面留白區域 */
     margin: 0;
    }
    .row-wrap{

    width: min(900px, calc(100% - 10rem));
     margin: 2rem auto;
     transition: width 0.35s ease;
    }
    /* ===== 表頭 ===== */
    .plan-hero{
      width: 100%;
      height: 10rem;
      overflow: hidden;
    }
    .plan-hero img{
      width: 100%;
      object-fit:cover;      /* 等比例填滿 */
      object-position:bottom;/* 貼齊底部 */
    }
    /* ===== 標題 ===== */
    .plan-header h1{
      font-size: 3.5rem;
    }

    /* ===== 平面圖 ===== */
    .unit-plan{
      width: 55%;
      margin: 1rem auto;
    }
  }
  /* ------------------------------------------------- */

  /* 一般桌機 */
    @media (min-width: 1280px) and (max-width: 1599px){
    .phone-wrap{/* 畫面留白區域 */
      margin: 0;
    }
    .row-wrap{
      width: min(1200px, calc(100% - 10rem));
      margin: 2rem auto;
      transition: width 0.35s ease;
    }
    /* ===== 表頭 ===== */
    .plan-hero{
      width: 100%;
      height: 12rem;
      overflow: hidden;
    }
    .plan-hero img{
      width: 100%;
      object-fit:cover;      /* 等比例填滿 */
      object-position:bottom;/* 貼齊底部 */
    }
    /* ===== 標題 ===== */
    .plan-header h1{
      font-size: 3.5rem;
    }

    /* ===== 平面圖 ===== */
    .unit-plan{
      width: 55%;
      max-width: 800px;
      margin: 1rem auto;
    }
  }

  /* ------------------------------------------------- */

  /* 大螢幕專用樣式 */
  @media (min-width: 1600px) {
    .phone-wrap{/* 畫面留白區域 */
     margin: 0;
    }
    .row-wrap{
      width: min(1280px, calc(100% - 15rem));
      margin: 2rem auto;
      transition: width 0.35s ease;
    }
    /* ===== 表頭 ===== */
    .plan-hero{
      width: 100%;
      height: 12rem;
      overflow: hidden;
    }
    .plan-hero img{
      width: 100%;
      object-fit:cover;      /* 等比例填滿 */
      object-position:bottom;/* 貼齊底部 */
    }
    /* ===== 標題 ===== */
    .plan-header h1{
      font-size: 3.5rem;
    }

    /* ===== 平面圖 ===== */
    .unit-plan{
      width: 55%;
      max-width: 800px;
      margin: 1rem auto;
    }
  }