/* QR Code 區底色（左欄） */
.qr-col {
  display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.8vh, 16px); text-align: center;
  background: #eafaf0;
  border-radius: 16px;
  padding: clamp(14px, 2.6vh, 26px) clamp(12px, 2vw, 24px);
}
.qr-top {
  font-size: clamp(12px, 1.9vh, 14px); font-weight: 800; color: #04782f;
  background: #fff; border-radius: 10px; padding: 6px 14px; line-height: 1.55; overflow-wrap: anywhere;
}
.qr-bot {
  font-size: clamp(12px, 1.9vh, 14px); font-weight: 800; color: #fff;
  background: #d23b2e; border-radius: 10px; padding: 6px 14px; line-height: 1.55; overflow-wrap: anywhere;
}
.qrs {display: flex; gap: 3cm; justify-content: center;}
.qr-box {width: clamp(92px, 24vh, 136px);}
.qr-box img {width: 100%; border-radius: 10px; border: 1px solid #e6eaf0;}
.qr-box .t {margin-top: 7px; font-size: clamp(12px, 1.8vh, 14px); font-weight: 700; color: #1a2b3c;}
.qr-box .s {font-size: clamp(11px, 1.6vh, 12.5px); color: #7a8a99; margin-top: 1px;}
.qr-link {
  display: inline-block; margin-top: 6px; font-size: clamp(11.5px, 1.7vh, 13px); font-weight: 800;
  background: #ff9800; color: #111; text-decoration: none;
  padding: 3px 12px; border-radius: 999px;
}
.qr-link:hover {background: #fb8c00; color: #000;}

/* 各 breakpoint */
@media (orientation: portrait) and (min-width: 660px) {
  .qr-top, .qr-bot {font-size: 17px; padding: 9px 22px; border-radius: 12px;}
  .qr-col {gap: 20px;}
  .qrs {gap: clamp(40px, 4vw, 72px);}
  .qr-box {width: clamp(150px, 15vw, 190px);}
  .qr-box .t {font-size: 16px; margin-top: 9px;}
  .qr-box .s {font-size: 14px;}
  .qr-link {font-size: 15px; padding: 5px 16px; margin-top: 8px;}
}
@media (min-width: 1024px) {
  .qr-col {gap: 24px;}
  .qr-top, .qr-bot {font-size: clamp(16px, 1.2vw, 20px); padding: 11px 24px; border-radius: 13px;}
  .qrs {gap: clamp(48px, 4.5vw, 90px);}
  .qr-box {width: clamp(150px, 12vw, 215px);}
  .qr-box .t {font-size: clamp(16px, 1.1vw, 19px); margin-top: 11px;}
  .qr-box .s {font-size: clamp(14px, .95vw, 17px); margin-top: 3px;}
  .qr-link {font-size: clamp(14px, 1vw, 17px); padding: 6px 18px; margin-top: 10px;}
}
@media (min-width: 1600px) {
  .qr-top, .qr-bot {font-size: 21px; padding: 13px 28px;}
  .qrs {gap: 96px;}
  .qr-box {width: 250px;}
  .qr-box .t {font-size: 21px;}
  .qr-box .s {font-size: 18px;}
  .qr-link {font-size: 19px; padding: 8px 22px;}
}
@media (max-width: 640px), (orientation: landscape) and (max-width: 940px) {
  .qr-col {margin-top: 6px;}
  .qrs {gap: clamp(8px, 3vw, 20px);}
  .qr-box {width: min(min(34vw, 170px), 100%);}
}