/* 答案框、旅行主題、分區地圖、路線、住宿主題與常見問題 */
.answer {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:38px;
  align-items:center;
  margin-top:36px;
  padding:34px 38px;
  background:#fffdfa;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
}

.answer-eyebrow {
  font-size:12px;
  letter-spacing:.26em;
  color:var(--orange-text);
  margin-bottom:6px;
}

.answer h2 {
  font-size:28px;
  line-height:1.4;
}

.answer-lead {
  font-size:15.5px;
  line-height:1.95;
  margin-top:12px;
  color:#3f5d66;
}

.answer-lead strong {
  color:var(--ink);
  font-weight:600;
}

.answer-zones {
  list-style:none;
  margin:0;
  padding:0;
}

.answer-zones li+li {
  border-top:1px solid #eeebe2;
}

.answer-zones a {
  display:grid;
  grid-template-columns:13.5em 1fr;
  grid-template-areas:"name hint" "towns hint";
  column-gap:18px;
  align-items:center;
  padding:12px 0;
}

.answer-zones b {
  grid-area:name;
  font:700 16.5px/1.5 var(--serif);
  letter-spacing:.04em;
  transition:color .2s;
}

.answer-zones b::before {
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:9px;
  border-radius:50%;
  background:var(--region);
  vertical-align:middle;
  transform:translateY(-1px);
}

.answer-zones small {
  grid-area:towns;
  padding-left:17px;
  font-size:12.5px;
  color:var(--muted);
}

.answer-zones span {
  grid-area:hint;
  font-size:14px;
  line-height:1.8;
  color:#5b7074;
}

.answer-zones a:hover b {
  color:var(--region);
}

.experience-section {
  display:grid;
  grid-template-columns:210px 1fr;
  gap:24px;
  align-items:center;
  padding-block:calc(var(--section-gap)*.75);
}

.experience-intro h2 {
  font-size:27px;
  line-height:1.4;
}

.experience-intro p {
  font-size:13.5px;
  color:var(--muted);
  margin-top:8px;
}

.experiences {
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:15px;
}

.experience {
  padding:0;
  text-align:center;
}

.experience img {
  aspect-ratio:1;
  width:min(84px,100%);
  height:auto;
  border-radius:50%;
  margin:0 auto 10px;
  transition:transform .25s;
  outline:4px solid #f3eee4;
  outline-offset:2px;
}

.experience:hover img {
  transform:translateY(-5px);
}

.experience strong {
  display:block;
  font-family:var(--serif);
  font-size:15.5px;
}

.experience small {
  display:block;
  color:var(--muted);
  font-size:12.5px;
  margin-top:1px;
}

.section-heading {
  display:flex;
  gap:18px;
  align-items:baseline;
  margin-bottom:26px;
  flex-wrap:wrap;
}

.section-heading h2 {
  font-size:31px;
  line-height:1.4;
  position:relative;
}

.section-heading h2 i {
  display:inline-block;
  width:8px;
  height:25px;
  margin-right:13px;
  border-left:3px solid var(--orange);
  border-radius:50%;
  transform:rotate(-22deg);
  vertical-align:middle;
}

.section-heading p {
  font-size:14.5px;
  color:var(--muted);
  letter-spacing:.02em;
}

.section-heading>a {
  margin-left:auto;
  font-size:13.5px;
  color:#2d6975;
  border-bottom:1px solid #8aafb6;
}

.explore-section {
  padding:calc(var(--section-gap)*.85) 0 calc(var(--section-gap)*.7);
  background:linear-gradient(145deg,#e7ecdf70,#f6f1e8 55%,#e4f0f080);
  border-block:1px solid #eeebe2;
}

.explore-grid {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(195px,.7fr) minmax(0,1.2fr);
  grid-template-rows:repeat(3,auto);
  gap:18px 14px;
  position:relative;
}

.region {
  background:#fffefaec;
  border:1px solid #fff;
  border-radius:var(--radius-l);
  padding:24px 22px;
  position:relative;
  transition:box-shadow .25s;
}

.region:target {
  box-shadow:0 0 0 3px var(--region);
}

.region-heading h3 {
  font-size:27px;
  color:var(--region);
  line-height:1.35;
  margin-bottom:5px;
}

.region-heading p {
  font-size:13.5px;
  color:var(--muted);
  max-width:22em;
}

.region-valley {
  grid-column:1;
  grid-row:1;
}

.region-city {
  grid-column:1;
  grid-row:2;
}

.region-islands {
  grid-column:1;
  grid-row:3;
}

.region-coast {
  grid-column:3;
  grid-row:1 / 2;
}

.region-south {
  grid-column:3;
  grid-row:2 / 4;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.region .towns {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}

.region-valley .towns {
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
}

.region-city,.region-islands {
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:15px;
  align-items:center;
}

.region-city .towns,.region-islands .towns {
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0;
}

.region-south .towns {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 12px;
}

.town {
  min-width:0;
  position:relative;
}

.town a {
  display:block;
}

.town img {
  height:104px;
  border-radius:var(--radius-s);
  transition:filter .2s;
}

.town a:hover img {
  filter:brightness(1.09);
}

.town a:hover strong {
  color:var(--region);
}

.town strong {
  display:block;
  font-size:15px;
  font-family:var(--serif);
  margin-top:8px;
  line-height:1.4;
  transition:color .2s;
}

.town small {
  display:block;
  font-size:12px;
  color:var(--muted);
}

.save {
  position:absolute;
  right:4px;
  top:4px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#fffefbe8;
  font-size:18px;
  line-height:1;
  box-shadow:0 1px 4px #0001;
  color:#774334;
}

.save:after {
  content:"";
  position:absolute;
  inset:-9px;
}

.save[aria-pressed=true] {
  color:#cf5539;
}

.region-south .town img {
  height:112px;
}

.map {
  grid-column:2;
  grid-row:1/4;
  align-self:center;
  margin:-12px -8px 0;
  position:relative;
}

.map svg {
  width:100%;
  height:auto;
  max-height:540px;
  display:block;
}

.map svg a:hover path {
  filter:brightness(1.12);
}

.map figcaption {
  text-align:center;
  font-size:13.5px;
  margin-top:8px;
  color:#4d7578;
}

.map figcaption small {
  font-size:12px;
  color:var(--muted);
}

.all-towns {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px 20px;
  flex-wrap:wrap;
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid #dbe0d8;
  font-size:13.5px;
}

.all-towns strong {
  font-size:14px;
}

.all-towns a:hover {
  color:var(--orange);
  text-decoration:underline;
}

.route-section {
  padding-block:var(--section-gap) 0;
}

.route-landscape {
  height:190px;
  border-radius:var(--radius-l) var(--radius-l) 0 0;
  background:linear-gradient(0deg,#fcfaf5,transparent 45%),url('../images/fields.jpg?v=20261022') center 60%/cover;
  position:relative;
}

.route-title {
  position:absolute;
  right:32px;
  top:16px;
  font:italic 30px Georgia,serif;
  color:white;
  text-shadow:0 2px 6px #143a39;
}

.route-tabs {
  display:flex;
  justify-content:center;
  gap:8px;
  margin:4px 0 26px;
}

.route-tabs button {
  padding:9px 22px;
  border:1px solid #dddcd2;
  border-radius:20px;
  font-size:14px;
  transition:border-color .2s,background .2s,color .2s;
}

.route-tabs button:hover {
  border-color:var(--ink);
}

.route-tabs button i {
  font-style:normal;
}

.route-tabs button[aria-selected=true] {
  background:var(--ink);
  color:white;
  border-color:var(--ink);
}

.route-stops {
  display:flex;
  justify-content:space-around;
  position:relative;
  padding-top:10px;
}

.route-stops:before {
  content:"";
  position:absolute;
  height:2px;
  background:linear-gradient(90deg,#5a8c77,#64a8b2);
  left:8%;
  right:8%;
  top:18px;
}

.route-stop {
  position:relative;
  text-align:center;
  flex:1;
  padding:0 10px;
}

.route-stop:before {
  content:"";
  display:block;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--paper);
  border:2px solid #d2905c;
  margin:2px auto 9px;
}

.route-stop strong {
  display:block;
  font-family:var(--serif);
  font-size:17.5px;
}

.route-stop small {
  color:var(--muted);
  font-size:13px;
}

.route-stop:hover strong {
  color:var(--orange);
}

.route-help {
  text-align:center;
  color:var(--muted);
  font-size:12.5px;
  margin-top:20px;
}

.theme-section {
  padding-block:var(--section-gap) 0;
}

.themes {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.theme {
  height:230px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:var(--radius-m);
  color:#fff;
}

.theme>img {
  height:100%;
  position:absolute;
  z-index:-2;
  transition:transform .4s;
}

.theme:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 25%,#082b32d9);
  z-index:-1;
}

.theme:hover img {
  transform:scale(1.06);
}

.theme>div {
  position:absolute;
  bottom:16px;
  left:16px;
  right:14px;
}

.theme h3 {
  font-size:22px;
  white-space:nowrap;
}

.theme p {
  font-size:13px;
  margin-top:5px;
  line-height:1.5;
}

.theme p span {
  float:right;
  font-size:16px;
}

.first-time {
  padding-block:var(--section-gap) 0;
}

.choices {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.choices>a {
  padding:26px 24px;
  position:relative;
  isolation:isolate;
  min-height:204px;
  border-radius:var(--radius-m);
  overflow:hidden;
  background:#f1edde;
  transition:box-shadow .25s,transform .25s;
}

.choices>a:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#f8f3e8 8%,#f8f3e8dc 48%,#f8f3e829),var(--photo) center/cover;
  z-index:-1;
}

.choices>a:hover {
  box-shadow:var(--shadow-soft);
  transform:translateY(-2px);
}

.choices h3 {
  font-size:21px;
}

.choices p {
  font-size:14px;
  margin-top:8px;
}

.choices span {
  display:block;
  font-size:13px;
  color:#526969;
  margin-top:7px;
}

.choices b {
  display:block;
  font-size:14px;
  margin-top:16px;
  font-weight:600;
}

.choices>a:hover b {
  text-decoration:underline;
}

.faq-section {
  padding-block:var(--section-gap);
}

.faq-layout {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:24px;
}

.faq-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px;
  align-content:start;
}

.faq-list details {
  border-bottom:1px solid #dfdfd5;
  background:#fffdfa;
}

.faq-list summary {
  display:flex;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  padding:16px 18px;
  font-size:15px;
  font-weight:600;
  list-style:none;
  transition:color .2s;
}

.faq-list summary:hover {
  color:var(--orange-text);
}

.faq-list summary::-webkit-details-marker {
  display:none;
}

.faq-list summary span {
  font-weight:400;
  font-size:18px;
  line-height:1.2;
  transition:transform .2s;
}

.faq-list details[open] summary {
  color:var(--orange-text);
}

.faq-list details[open] summary span {
  transform:rotate(45deg);
}

.faq-list details p {
  padding:0 18px 18px;
  font-size:14px;
  color:#5b7074;
  line-height:1.9;
}

.closing {
  min-height:200px;
  background:linear-gradient(90deg,#fff9e6f2,#fff9e6bd 48%,transparent 90%),url('../images/coast.jpg?v=20261022') center/cover;
  border-radius:var(--radius-m);
  padding:23px 27px;
}

.closing p {
  font:italic 23px/1.7 var(--serif);
  letter-spacing:.09em;
}

.choice-valley {
  --photo:url('../images/fields.jpg?v=20261022');
}

.choice-coast {
  --photo:url('../images/coast.jpg?v=20261022');
}

.choice-islands {
  --photo:url('../images/island.jpg?v=20261022');
}

/* 分區比較表 */
.compare-section {
  padding-block:var(--section-gap) 0;
}

.compare {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fffdfa;
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  overflow:hidden;
  font-size:14px;
  line-height:1.8;
  text-align:left;
}

.compare thead th {
  padding:13px 22px;
  font-size:12.5px;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--muted);
  background:#f8f3e8;
  white-space:nowrap;
}

.compare tbody th,.compare td {
  padding:16px 22px;
  border-top:1px solid #eeebe2;
  vertical-align:top;
}

.compare tbody th {
  width:20%;
  font-weight:400;
}

.compare tbody th a {
  display:block;
  font:700 16.5px/1.5 var(--serif);
  letter-spacing:.04em;
  transition:color .2s;
}

.compare tbody th a::before {
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:9px;
  border-radius:50%;
  background:var(--region);
  vertical-align:middle;
  transform:translateY(-1px);
}

.compare tbody th a:hover {
  color:var(--region);
}

.compare tbody th small {
  display:block;
  padding-left:17px;
  font-size:12.5px;
  color:var(--muted);
}

.compare td {
  color:#4c666c;
}

.compare-note {
  margin-top:12px;
  font-size:12.5px;
  color:var(--muted);
}

/* 速覽 */
.facts-section {
  padding-block:var(--section-gap) 0;
}

.facts {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:34px;
  border-top:1px solid #dfdfd5;
}

.facts li {
  display:grid;
  grid-template-columns:5.2em 1fr;
  gap:14px;
  padding:15px 4px;
  border-bottom:1px solid #dfdfd5;
  font-size:14.5px;
  line-height:1.85;
}

.facts li:last-child:nth-child(odd) {
  grid-column:1/-1;
}

.facts b {
  font:700 15px/1.75 var(--serif);
  letter-spacing:.06em;
  color:var(--orange-text);
}

.facts span {
  color:#4c666c;
}

/* ── 換個方式找台東民宿（sections/more-sites.php，2026-10-22） ──
   桌機（2026-10-27 起）：分區整排五張照片卡；下排活動照片卡、國旅卡優惠、住法三欄 */
.more-sites {
  padding-block:var(--section-gap) 0;
}

.sites-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.sites-group {
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
  padding:20px 22px;
}

.sites-group h3 {
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--sans);
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink);
  margin-bottom:12px;
}

.sites-group h3 svg {
  width:22px;
  height:22px;
  color:var(--orange-deep);
  flex:none;
}

.sites-zone {
  grid-column:1/-1;
}

.sites-tiles {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}

.sites-tiles a {
  display:block;
  border-radius:var(--radius-s);
  transition:transform .25s;
}

.sites-tiles img {
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:var(--radius-s);
  display:block;
}

.sites-tiles b {
  display:block;
  margin-top:10px;
  font-size:16px;
  color:var(--ink);
}

.sites-tiles span {
  display:block;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin-top:3px;
}

.sites-tiles a:hover {
  transform:translateY(-2px);
}

.sites-tiles a:hover b,.sites-list a:hover b {
  text-decoration:underline;
  text-underline-offset:.2em;
}

/* 活動照片卡 */
.sites-event {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:0;
  min-height:280px;
  color:#fff;
  display:flex;
  align-items:flex-end;
  border:0;
}

.sites-event>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  transition:transform .4s;
}

.sites-event:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 20%,#082b32e6);
  z-index:-1;
}

.sites-event:hover>img {
  transform:scale(1.05);
}

.sites-event>div {
  padding:18px 20px;
}

.sites-event h3 {
  color:#ffe2d6;
  margin-bottom:6px;
  font-size:13px;
}

.sites-event h3 svg {
  color:#ffd2bf;
}

.sites-event b {
  display:block;
  font-size:19px;
  line-height:1.4;
}

.sites-event span {
  display:block;
  font-size:13px;
  line-height:1.65;
  margin-top:6px;
  color:#e8f0ee;
}

.sites-event em {
  display:inline-block;
  font-style:normal;
  font-size:13.5px;
  font-weight:600;
  margin-top:10px;
  border-bottom:1px solid #ffffff80;
}

/* 國旅卡優惠、住法：文字清單 */
.sites-list {
  grid-column:auto;
}

/* 分區卡上的地區標籤（舊鐵道區、台東火車站…） */
.sites-tag {
  display:inline-block;
  margin-top:5px;
  font-style:normal;
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:var(--orange-text);
  background:#fbe9e2;
  border-radius:999px;
  padding:4px 9px;
}

.sites-list a {
  display:block;
  padding:11px 0;
  border-top:1px solid var(--line-soft);
}

.sites-list a:first-of-type {
  border-top:0;
  padding-top:2px;
}

.sites-list b {
  display:block;
  font-size:16px;
  color:var(--ink);
}

.sites-list b:after {
  content:" ↗";
  color:var(--orange-text);
  font-size:13px;
}

.sites-list span {
  display:block;
  font-size:13.5px;
  line-height:1.65;
  color:var(--muted);
  margin-top:2px;
}

@media (max-width:1000px) {
  .sites-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .sites-tiles {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .sites-zone {
    grid-column:1/-1;
  }
  .sites-event,.sites-list {
    grid-column:auto;
  }
}

@media (max-width:640px) {
  .sites-grid {
    grid-template-columns:1fr;
    gap:12px;
  }
  .sites-group {
    padding:16px;
  }
  /* 手機：五個分區網站改成清單（左小圖、右文字），比兩欄照片卡省一半高度 */
  .sites-tiles {
    grid-template-columns:1fr;
    gap:10px;
  }
  .sites-tiles a {
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    grid-template-rows:auto auto 1fr;
    column-gap:12px;
    align-items:start;
  }
  .sites-tiles img {
    grid-row:1/4;
    aspect-ratio:4/3;
  }
  .sites-tiles b {
    margin-top:0;
  }
  .sites-tiles .sites-tag {
    justify-self:start;
    margin-top:4px;
  }
  .sites-tiles b {
    font-size:13.5px;
    margin-top:7px;
  }
  .sites-tiles span {
    font-size:12.5px;
    margin-top:4px;
  }
  .sites-event {
    min-height:220px;
  }
}