/* legacy.css — 今のサイトの部品(エリアガイド・周辺イベント・天気・食事どころ・特商法)を v2 で描くための最小限の CSS。
 * 2026-10-30 段階5の残り。規則は ../../assets/css/style.css から該当クラスだけ機械的に抜いた
 * (抜き出し = scratchpad の extract.py・クラス一覧は今の dist の <main> 内から)。
 * 色は今のサイトの変数名のまま書き、.o-legacy の中だけでナターシャの配色へ読み替える。 */
.o-legacy{--green:var(--fukamidori);--green-deep:var(--fukamidori);--green-wash:rgba(38,55,43,.08);--green-wash-2:rgba(38,55,43,.03);
  --ink:var(--fukamidori);--ink-sub:#5b6a5e;--line:var(--kawaishi);--wash:var(--washi);--measure:780px}
.o-legacy img{max-width:100%;height:auto}
.o-legacy table{border-collapse:collapse;width:100%}
.o-legacy th,.o-legacy td{border-bottom:1px solid var(--kawaishi);padding:.6em .8em;text-align:left;vertical-align:top}
.o-legacy a{color:var(--kakishibu)}
.shots-track{display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 12px) / 3);   
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 6px;}
.shots .shots-track > picture{display: block; min-width: 0; scroll-snap-align: start;}
.shots .shots-track img{width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  scroll-snap-align: start;}
.stay-card .card-note{margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--ink);}
.fig{margin: 30px 0;}
.fig img{width: 100%; height: auto; display: block;}
.fig figcaption{margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--ink-sub);}
.fig-narrow{max-width: 420px;}
@media (max-width: 640px){
  .shots-track{grid-auto-columns: 78%;}
  .shots .shots-track img{height: 200px;}
}
.table-wrap{overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0 32px;}
.table-wrap > table{margin: 0; min-width: 460px;}
.event-list{list-style: none;
  margin: 18px 0 34px;
  padding: 0;
  border-top: 1px solid var(--line);}
.event-list li{display: flex;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);}
.event-list time{flex: 0 0 92px;
  font-size: 13.5px;
  color: var(--ink-sub);
  padding-top: 2px;}
.event-body{min-width: 0;}
.event-kind{display: inline-block;
  margin-right: 10px;
  padding: 1px 10px;
  font-size: 11.5px;
  color: var(--green-deep);
  border: 1px solid var(--green);
  border-radius: 999px;
  vertical-align: 2px;}
.event-title{font-weight: 700;}
.event-note{margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-sub);}
.event-year{margin-bottom: 4px;}
@media (max-width: 640px){
  .event-list li{flex-direction: column; gap: 4px;}
  .event-list time{flex-basis: auto;}
}
.weather-grid{display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 26px 0 30px;}
.weather-card{min-width: 0;  
  border: 1px solid var(--line);
  background: var(--white);
  padding: 18px 18px 14px;}
.weather-card h2{margin: 0 0 2px; font-size: 17px;}
.weather-card .weather-loc{margin: 0 0 12px; font-size: 12.5px; color: var(--ink-sub);}
.weather-days{display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;}
.weather-status{margin: 8px 0; font-size: 13.5px; color: var(--ink-sub);}
.weather-credit{font-size: 12px; color: var(--ink-sub);}
.ae-teaser{background: var(--green-wash); border-radius: 10px; padding: 18px 18px 8px; margin: 8px 0 28px;}
.ae-teaser-list{list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr));}
.ae-teaser-list li{margin: 0;}
.ae-teaser-list a{display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 14px; background: var(--white);
  border-radius: 8px; border: 1px solid var(--line); color: var(--ink); text-decoration: none;}
.ae-teaser-list a:hover{border-color: var(--green);}
.ae-date{font-size: 0.82rem; font-weight: 700; color: var(--green-deep);}
.ae-name{font-weight: 700; line-height: 1.5;}
.ae-meta{display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.78rem; color: var(--ink-sub);}
.ae-badge{display: inline-block; font-size: 0.72rem; padding: 1px 8px; border-radius: 99px; background: var(--wash); border: 1px solid var(--line); color: var(--ink-sub);}
.ae-badge.now{background: var(--green); border-color: var(--green); color: #fff;}
.ae-more{margin: 12px 0 8px; text-align: right; font-size: 0.9rem;}
.ae-empty{margin: 0 0 10px; color: var(--ink-sub);}
.ae-notice{background: #fff8e6; border: 1px solid #f0d68a; border-radius: 8px; padding: 12px 14px; font-size: 0.9rem;}
.ae-month-title{margin-top: 36px;}
.ae-card{border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin: 14px 0; background: var(--white);}
.ae-card-date{display: flex; flex-wrap: wrap; gap: 8px; align-items: center;}
.ae-time{font-size: 0.8rem; color: var(--ink-sub);}
.ae-card-name{margin: 6px 0 2px; font-size: 1.1rem;}
.ae-place{margin: 0 0 8px; font-size: 0.88rem; color: var(--ink-sub);}
.ae-tags{display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;}
.ae-tag{font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; background: var(--wash); border: 1px solid var(--line);}
.ae-tag.rec{color: var(--green-deep); border-color: var(--green); background: var(--green-wash-2);}
.ae-tag.intl{background: var(--green-wash); border-color: transparent;}
.ae-body p{margin: 0 0 8px;}
.ae-access,.ae-note{font-size: 0.85rem; color: var(--ink-sub); margin: 6px 0;}
.ae-official{margin: 10px 0 0; font-size: 0.9rem;}
.ae-generated{font-size: 0.8rem; color: var(--ink-sub); margin-top: 24px;}
@media (max-width: 640px){
  .ae-teaser{padding: 14px 12px 4px;}
  .ae-teaser-list{grid-template-columns: 1fr;}
}
.ae-teaser [hidden],.ae-card[hidden],.ae-card [hidden],.ae-month[hidden]{display: none !important;}
.content .ae-teaser .ae-teaser-list{padding: 0; margin: 0;}
.content .ae-teaser .ae-teaser-list li::marker{content: none;}
.todo-cards{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 32px;}
.todo-card{position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; color: var(--ink); text-decoration: none;}
.content a.todo-card{text-decoration: none; border-bottom: 1px solid var(--line);}
.todo-card:hover{border-color: var(--green);}
.todo-card img,.todo-card picture img{width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin: 0;}
.todo-no{position: absolute; top: 10px; left: 10px; width: 32px; height: 32px; border-radius: 50%; background: var(--green);
  color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;}
.todo-card h3{margin: 14px 16px 6px; font-size: 1.05rem; line-height: 1.5;}
.todo-card p{margin: 0 16px 10px; font-size: 0.9rem; line-height: 1.7; color: var(--ink-sub);}
.todo-more{margin: auto 16px 14px; font-size: 0.85rem; color: var(--green-deep); font-weight: 700;}
@media (max-width: 760px){
  .todo-cards{grid-template-columns: 1fr;}
}
.food-lead{background: var(--green-wash); border-radius: 10px; padding: 22px 24px; margin: 0 0 40px; max-width: none;}
.content .food-lead p{margin: 0 0 0.6em; max-width: var(--measure);}
.content .food-lead p:last-child{margin-bottom: 0;}
.food-cards{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; margin: 8px 0 32px;}
.food-card{min-width: 0; scroll-margin-top: 90px;}
.food-photos{display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 6px;}
.food-photos::-webkit-scrollbar{display: none;}
.food-photos > picture{display: block; min-width: 0; scroll-snap-align: start;}
.food-card .food-photos img{width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; margin: 0; scroll-snap-align: start;}
.food-dots{display: flex; justify-content: center; gap: 4px; min-height: 12px; margin: 10px 0 14px;}
.food-dots button{width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer;}
.food-dots button[aria-current="true"]{background: var(--ink);}
.content .food-card h3{margin: 0; font-size: 1.3rem; font-weight: 500; line-height: 1.4;}
.content .food-card .food-en{margin: 2px 0 10px; font-size: 0.82rem; color: var(--ink-sub);}
.content .food-card .food-genre{margin: 0 0 8px;}
.content ul.food-info{list-style: none; padding: 0; margin: 0;}
.content ul.food-info li{display: flex; align-items: center; gap: 8px; margin: 0 0 6px; line-height: 1.5;}
.content ul.food-info li::marker{content: none;}
.food-info svg{flex: 0 0 auto; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--ink); fill: #fff;}
.food-checked{font-size: 0.85rem; color: var(--ink-sub);}
@media (max-width: 900px){
  .food-cards{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 640px){
  .food-cards{grid-template-columns: 1fr;}
  .food-lead{padding: 18px 16px;}
}
.todo-cards.todo-cards-4{grid-template-columns: repeat(2, minmax(0, 1fr));}
@media (max-width: 760px){
  .todo-cards.todo-cards-4{grid-template-columns: 1fr;}
}
.food-photos > img.food-more{display: block; min-width: 0; scroll-snap-align: start; background: var(--wash);}
.content .food-card .food-desc{margin: 0 0 12px; font-size: 0.92rem; line-height: 1.8; color: var(--ink);}
.ae-teaser-list a{flex-direction: row; align-items: center; gap: 12px;}
.ae-text{display: flex; flex-direction: column; gap: 4px; min-width: 0;}
.ae-thumb{position: relative; flex: 0 0 76px; width: 76px; height: 76px; border-radius: 6px; overflow: hidden; background: var(--green-wash);}
.ae-thumb img,.ae-card-thumb img{width: 100%; height: 100%; object-fit: cover; display: block; margin: 0;}
.ae-thumb picture,.ae-card-thumb picture{display: block; width: 100%; height: 100%;}
.ae-thumb-icon{display: flex; align-items: center; justify-content: center; font-size: 2rem;}
.ae-card{display: grid; grid-template-columns: 1fr 160px; column-gap: 18px;}
.ae-card > *{grid-column: 1;}
.ae-card > .ae-card-thumb{grid-column: 2; grid-row: 1 / span 6; position: relative; width: 160px; height: 160px; border-radius: 8px; overflow: hidden; background: var(--green-wash); align-self: start;}
.ae-card-thumb.ae-thumb-icon{font-size: 3.4rem;}
.ae-imgnote{position: absolute; right: 4px; bottom: 4px; font-size: 0.62rem; line-height: 1.3; padding: 1px 5px; border-radius: 3px; background: rgba(27, 38, 49, 0.62); color: #fff;}
@media (max-width: 640px){
  .ae-card{grid-template-columns: 1fr 96px; column-gap: 12px;}
  .ae-card > .ae-card-thumb{width: 96px; height: 96px;}
  .ae-thumb{flex-basis: 64px; width: 64px; height: 64px;}
}
@media (max-width: 640px){
  .ae-card > .ae-card-thumb{grid-row: 1 / span 3;}
  .ae-card > .ae-tags, .ae-card > .ae-body, .ae-card > .ae-access, .ae-card > .ae-note, .ae-card > .ae-official{grid-column: 1 / -1;}
}