/* RC29：頭城線上走讀模組。獨立 UI，不污染 landing-v03 主樣式 */
.toucheng-walk{
  padding:108px 24px;
  background:
    radial-gradient(circle at 80% 10%, rgba(217,171,98,.18), transparent 32%),
    linear-gradient(180deg,#fffaf2 0%,#f1e5d2 100%);
  color:#4d3524;
}

.tw-container{max-width:1180px;margin:0 auto;}
.tw-intro{max-width:760px;margin:0 auto 46px;text-align:center;}
.tw-label{color:#b88746;font-size:13px;letter-spacing:.24em;font-weight:700;}
.tw-intro h2{margin:16px 0 18px;font-size:clamp(34px,4.6vw,58px);line-height:1.18;}
.tw-intro p{margin:0;color:#6c5542;font-size:18px;line-height:2;}
.tw-card{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px;align-items:stretch;}
.tw-map{display:grid;gap:12px;}
.tw-stop{width:100%;min-height:86px;padding:18px 20px;border:1px solid rgba(126,94,57,.16);border-radius:24px;background:rgba(255,255,255,.62);text-align:left;color:#4d3524;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;}
.tw-stop:hover,.tw-stop.is-active{transform:translateY(-2px);background:#fff;box-shadow:0 18px 46px rgba(72,48,28,.10);}
.tw-stop small{display:block;margin-bottom:8px;color:#b88746;font-size:12px;letter-spacing:.18em;}
.tw-stop strong{font-size:22px;}
.tw-reader{min-height:520px;padding:34px;border-radius:34px;background:rgba(255,255,255,.76);border:1px solid rgba(126,94,57,.16);box-shadow:0 28px 70px rgba(72,48,28,.12);}
.tw-progress{display:flex;align-items:center;gap:14px;margin-bottom:42px;}
.tw-progress span{flex:0 0 auto;color:#80664d;font-size:14px;}
.tw-progress div{flex:1;height:8px;border-radius:999px;background:rgba(126,94,57,.15);overflow:hidden;}
.tw-progress i{display:block;width:20%;height:100%;border-radius:999px;background:linear-gradient(90deg,#b88746,#e3be78);transition:width .35s ease;}
.tw-content > span,.tw-complete > span{display:block;margin-bottom:16px;color:#b88746;font-size:13px;letter-spacing:.22em;font-weight:700;}
.tw-content h3,.tw-complete h3{margin:0 0 22px;font-size:clamp(34px,4vw,54px);line-height:1.18;}
.tw-content p,.tw-complete p{max-width:760px;margin:0;color:#5f4a38;font-size:19px;line-height:2.05;}
.tw-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.tw-actions a,.tw-actions button,.tw-complete button{min-height:48px;padding:0 22px;border-radius:999px;border:1px solid rgba(126,94,57,.22);display:inline-flex;align-items:center;justify-content:center;color:#4d3524;background:#fffaf2;text-decoration:none;cursor:pointer;}
.tw-actions button,.tw-complete button{background:#4d3524;color:#fffaf2;}
.tw-complete{padding:40px;border-radius:28px;background:#4d3524;color:#fffaf2;text-align:center;}
.tw-complete h3{color:#fffaf2;}
.tw-complete p{margin:0 auto 24px;color:#eadfce;}

@media(max-width:860px){
  .tw-card{grid-template-columns:1fr;}
  .tw-map{display:flex;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;}
  .tw-stop{flex:0 0 240px;}
}
@media(max-width:640px){
  .toucheng-walk{padding:76px 18px 96px;}
  .tw-intro{text-align:left;margin-bottom:30px;}
  .tw-intro h2{font-size:32px;}
  .tw-intro p,.tw-content p,.tw-complete p{font-size:16px;line-height:1.9;}
  .tw-reader{min-height:auto;padding:26px;border-radius:28px;}
  .tw-progress{margin-bottom:28px;}
  .tw-content h3,.tw-complete h3{font-size:34px;}
  .tw-actions{flex-direction:column;}
  .tw-actions a,.tw-actions button{width:100%;}
}


/* RC32：走讀證書姓名對話框 */
.tw-name-dialog{
  padding:40px;
  border-radius:28px;
  background:#fffaf2;
  border:1px solid rgba(126,94,57,.18);
  box-shadow:0 24px 64px rgba(72,48,28,.12);
  text-align:center;
}

.tw-name-dialog > span{
  display:block;
  margin-bottom:16px;
  color:#b88746;
  font-size:13px;
  letter-spacing:.22em;
  font-weight:700;
}

.tw-name-dialog h3{
  margin:0 0 18px;
  font-size:clamp(30px,3.6vw,46px);
  line-height:1.2;
}

.tw-name-dialog p{
  max-width:640px;
  margin:0 auto 26px;
  color:#6c5542;
  font-size:17px;
  line-height:1.85;
}

.tw-name-form{
  display:flex;
  gap:12px;
  justify-content:center;
}

.tw-name-form input{
  min-height:50px;
  min-width:280px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(126,94,57,.24);
  background:#fff;
  color:#4d3524;
  font:inherit;
}

.tw-name-form button{
  min-height:50px;
  padding:0 24px;
  border:0;
  border-radius:999px;
  background:#4d3524;
  color:#fffaf2;
  font:inherit;
  cursor:pointer;
}

.tw-certificate-name{
  max-width:520px;
  margin:0 auto 20px;
  padding:16px 20px;
  border-radius:18px;
  background:rgba(255,250,242,.12);
  color:#eadfce;
}

.tw-certificate-name strong{
  color:#fffaf2;
  font-size:22px;
}

@media(max-width:640px){
  .tw-name-dialog{
    padding:28px 22px;
  }

  .tw-name-dialog p{
    font-size:16px;
  }

  .tw-name-form{
    flex-direction:column;
  }

  .tw-name-form input,
  .tw-name-form button{
    width:100%;
    min-width:0;
  }
}


/* RC33：探索護照收藏介面 */
.tw-passport{
  padding:0;
  background:transparent;
}

.tw-passport-cover{
  position:relative;
  overflow:hidden;
  max-width:820px;
  margin:0 auto;
  padding:46px;
  border-radius:34px;
  background:
    radial-gradient(circle at 85% 12%, rgba(227,190,120,.32), transparent 26%),
    linear-gradient(135deg,#533622 0%,#3b281d 56%,#2c1f17 100%);
  color:#fffaf2;
  box-shadow:0 34px 88px rgba(72,48,28,.26);
  border:1px solid rgba(227,190,120,.22);
}

.tw-passport-cover::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(227,190,120,.28);
  border-radius:26px;
  pointer-events:none;
}

.tw-passport-cover::after{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  right:-130px;
  bottom:-140px;
  border-radius:50%;
  background:rgba(255,250,242,.06);
  pointer-events:none;
}

.tw-passport-top{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin-bottom:34px;
  color:#e3be78;
  letter-spacing:.18em;
  font-weight:700;
}

.tw-passport-top span{
  font-size:14px;
}

.tw-passport-top b{
  font-size:12px;
}

.tw-passport-mark{
  position:relative;
  z-index:1;
  width:86px;
  height:86px;
  margin:0 auto 28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(227,190,120,.72);
  color:#e3be78;
  font-size:44px;
  font-weight:700;
}

.tw-passport-title{
  position:relative;
  z-index:1;
  text-align:center;
}

.tw-passport-title span{
  display:block;
  color:#e3be78;
  font-size:13px;
  letter-spacing:.26em;
  font-weight:700;
  margin-bottom:14px;
}

.tw-passport-title h3{
  margin:0;
  color:#fffaf2;
  font-size:clamp(42px,5.2vw,72px);
  line-height:1.12;
  letter-spacing:.03em;
}

.tw-passport-title p{
  margin:18px auto 0;
  max-width:560px;
  color:#eadfce;
  font-size:18px;
  line-height:1.8;
}

.tw-passport-traveler{
  position:relative;
  z-index:1;
  margin:34px auto 24px;
  max-width:560px;
  padding:20px 24px;
  border-radius:24px;
  background:rgba(255,250,242,.12);
  border:1px solid rgba(255,250,242,.10);
  text-align:center;
}

.tw-passport-traveler small{
  display:block;
  margin-bottom:8px;
  color:#e3be78;
  letter-spacing:.16em;
}

.tw-passport-traveler strong{
  display:block;
  color:#fffaf2;
  font-size:30px;
}

.tw-passport-stamps{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin:28px 0;
}

.tw-passport-stamps div{
  min-height:92px;
  border-radius:22px;
  background:rgba(255,250,242,.10);
  border:1px dashed rgba(227,190,120,.38);
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
}

.tw-passport-stamps span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e3be78;
  color:#352419;
  font-weight:800;
}

.tw-passport-stamps b{
  color:#fffaf2;
  font-size:14px;
}

.tw-passport-meta{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:26px 0;
}

.tw-passport-meta div{
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,250,242,.10);
}

.tw-passport-meta small{
  display:block;
  margin-bottom:8px;
  color:#d7c3aa;
}

.tw-passport-meta strong{
  color:#fffaf2;
}

.tw-passport-gift{
  position:relative;
  z-index:1;
  margin-top:24px;
  padding:18px 20px;
  border-radius:20px;
  background:#fffaf2;
  color:#4d3524;
  text-align:center;
  font-weight:700;
}

.tw-passport-cover button{
  position:relative;
  z-index:1;
  margin:24px auto 0;
  min-height:46px;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(227,190,120,.40);
  background:transparent;
  color:#fffaf2;
  cursor:pointer;
}

@media(max-width:760px){
  .tw-passport-cover{
    padding:36px 24px;
    border-radius:28px;
  }

  .tw-passport-top{
    flex-direction:column;
    gap:8px;
    margin-bottom:26px;
  }

  .tw-passport-mark{
    width:72px;
    height:72px;
    font-size:36px;
  }

  .tw-passport-stamps{
    grid-template-columns:repeat(2,1fr);
  }

  .tw-passport-meta{
    grid-template-columns:1fr;
  }

  .tw-passport-title h3{
    font-size:42px;
  }
}


/* RC34：走讀護照自媒體分享 */
.tw-passport-share{
  position:relative;
  z-index:1;
  margin:24px 0 0;
  padding:18px;
  border-radius:20px;
  background:rgba(255,250,242,.08);
  border:1px solid rgba(227,190,120,.18);
  text-align:center;
}

.tw-passport-share > span{
  display:block;
  margin-bottom:14px;
  color:#e3be78;
  font-size:13px;
  letter-spacing:.18em;
  font-weight:700;
}

.tw-passport-share div{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.tw-passport-share a,
.tw-passport-share button{
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(227,190,120,.32);
  background:rgba(255,250,242,.12);
  color:#fffaf2;
  text-decoration:none;
  font:inherit;
  cursor:pointer;
}

.tw-passport-share a:hover,
.tw-passport-share button:hover{
  background:#e3be78;
  color:#352419;
}

@media(max-width:640px){
  .tw-passport-share div{
    flex-direction:column;
  }

  .tw-passport-share a,
  .tw-passport-share button{
    width:100%;
  }
}