@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Serif+JP:wght@500;700&family=Poppins:wght@600;700;800&display=swap");

:root {
  --ivory: #fff8ec;
  --ivory-deep: #f8ead3;
  --paper: rgba(255, 253, 244, 0.86);
  --line: rgba(111, 82, 45, 0.16);
  --text: #403226;
  --muted: #75695f;
  --teal: #5a3e2b;
  --teal-soft: #7a5a42;
  --coral: #b8643f;
  --mango: #c9963f;
  --green: #5f7f4a;
  --shadow: 0 14px 34px rgba(103, 73, 35, 0.12);
  /* Typography (B: culture travel magazine) */
  --font-latin: "DM Serif Display", "Noto Serif JP", Georgia, serif;
  --font-heading: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-body: "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, sans-serif;
}

/* Editorial cover treatment for the BALI NOTE home page. */
.site-header {
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
  padding: 8px 0 16px;
  border-bottom: 1px solid rgba(31, 39, 35, 0.2);
}

.brand-main {
  color: #2b211a;
  font-family: var(--font-latin);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: none;
}

.brand-by {
  color: #b8643f;
  margin: 5px 0 0 2px;
  font-size: 12px;
  letter-spacing: 0;
}

.tagline {
  margin-top: 0;
  color: #5f6964;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.14em;
}

.tagline::after {
  display: none;
}

.top-nav {
  justify-content: end;
  grid-template-columns: repeat(7, auto);
  gap: 22px;
}

.top-nav a {
  display: block;
  padding: 5px 0;
  border-radius: 0;
  color: #2b211a;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.top-nav a:hover {
  background: transparent;
  color: #b8643f;
}

.top-nav img,
.top-nav small {
  display: none;
}

.editorial-hero {
  display: block;
  min-height: clamp(520px, 72vh, 720px);
  margin: 0;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(43, 33, 26, 0.78) 0%, rgba(43, 33, 26, 0.42) 45%, rgba(43, 33, 26, 0.06) 75%),
    url("assets/bali-tiles.jpg");
  background-size: cover, 400% 300%;
  background-position: center, 66.666% 0%;
  border-radius: 2px;
  color: #fff;
  position: relative;
}

.editorial-hero .hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(660px, 62%);
  min-height: inherit;
  padding: 54px 5.5% 64px;
}

.editorial-hero .hero-kicker {
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.editorial-hero h1 {
  color: #fff;
  font-family: var(--font-latin);
  font-size: clamp(68px, 8vw, 126px);
  font-weight: 400;
  line-height: 0.85;
  text-shadow: none;
}

.editorial-hero .hero-japanese {
  max-width: none;
  margin: 28px 0 18px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.55;
}

.editorial-hero .hero-intro {
  max-width: 460px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
}

.editorial-hero .hero-actions {
  margin: 0;
}

.editorial-hero .button {
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.editorial-hero .button:hover {
  background: #fff;
  color: #1c2924;
}

.hero-edition {
  position: absolute;
  right: 24px;
  bottom: 20px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  writing-mode: vertical-rl;
}

.area-strip {
  margin-top: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: #fff;
}

@media (max-width: 1023px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
  }

  .tagline,
  .top-nav {
    display: none;
  }

  .editorial-hero .hero-copy {
    width: min(720px, 82%);
  }
}

@media (max-width: 767px) {
  .page-shell {
    padding: 14px 14px 28px;
  }

  .site-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .brand-main {
    font-size: 24px;
  }

  .auth-mini {
    min-width: 0;
  }

  .editorial-hero {
    min-height: min(72vh, 620px);
    background-image:
      linear-gradient(180deg, rgba(43, 33, 26, 0.2) 0%, rgba(43, 33, 26, 0.72) 78%),
      url("assets/bali-tiles.jpg");
    background-position: center, 66.666% 0%;
  }

  .editorial-hero .hero-copy {
    justify-content: flex-end;
    width: 100%;
    padding: 42px 24px 42px;
  }

  .editorial-hero h1 {
    font-size: clamp(52px, 18vw, 78px);
  }

  .editorial-hero .hero-kicker {
    margin-bottom: 18px;
  }

  .editorial-hero .hero-japanese {
    margin: 20px 0 12px;
    font-size: 18px;
  }

  .editorial-hero .hero-intro {
    font-size: 12px;
  }

  .hero-edition {
    display: none;
  }
}

/* Match secondary home sections to the Journal type scale. */
.page-shell .question-panel .section-head h2,
.page-shell .map-panel .section-head h2,
.page-shell .plan-panel .section-head h2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
}

.page-shell .question-panel .section-head h2::before,
.page-shell .map-panel .section-head h2::before,
.page-shell .plan-panel .section-head h2::before {
  margin-bottom: 10px;
  font-size: 12px;
}

.page-shell .question-panel .section-head p,
.page-shell .map-panel .section-head p {
  font-size: 15px;
  line-height: 1.75;
}

.page-shell .question-panel .section-head > a,
.page-shell .map-panel .button,
.page-shell .plan-panel .section-head > a {
  font-size: 13px;
}

.page-shell .question-list b {
  font-size: 20px;
}

.page-shell .question-list p {
  font-size: 14px;
}

.page-shell .question-list footer {
  font-size: 12px;
}

.page-shell .map-legend span {
  font-size: 13px;
}

.page-shell .note-grid-main .note-card p {
  font-size: 15px;
}

.page-shell .area-name {
  font-size: 12px;
}

@media (max-width: 767px) {
  .page-shell .question-panel .section-head h2,
  .page-shell .map-panel .section-head h2,
  .page-shell .plan-panel .section-head h2 {
    font-size: 34px;
  }
}



* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 0 8%, rgba(90, 62, 43, 0.1), transparent 30%),
    radial-gradient(circle at 94% 0, rgba(95, 127, 74, 0.12), transparent 28%),
    linear-gradient(180deg, #fffaf0 0%, var(--ivory) 48%, #f5fbf9 100%);
  letter-spacing: 0.03em;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-shell {
  max-width: 1500px;
  margin: 0 auto;
  padding: 26px 42px 40px;
  position: relative;
  overflow: hidden;
}

.site-header,
main {
  position: relative;
  z-index: 1;
}

.site-header {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: start;
  gap: 18px;
  margin-bottom: 14px;
}

.brand {
  display: inline-grid;
  gap: 0;
  line-height: 0.95;
}

.brand-main {
  color: var(--teal);
  font-family: var(--font-latin);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.9);
  position: relative;
}

.brand-by {
  color: var(--coral);
  font-size: 17px;
  font-weight: 700;
  margin-left: 86px;
  margin-top: 5px;
}

.tagline {
  margin: 8px 0 0;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}

.tagline::after {
  content: "";
  display: block;
  width: 132px;
  height: 12px;
  border-bottom: 2px solid var(--mango);
  border-radius: 50%;
  transform: rotate(-4deg);
}

.top-nav {
  display: grid;
  grid-template-columns: repeat(7, minmax(68px, 1fr));
  gap: 10px;
}

.top-nav a {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #261d16;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 3px 4px 6px;
  border-radius: 8px;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.top-nav a:hover {
  background: rgba(255, 253, 244, 0.68);
  transform: translateY(-1px);
}

.top-nav img {
  width: 31px;
  height: 31px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.9));
}

.top-nav small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.menu-button {
  display: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 24px;
}

.auth-mini {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 118px;
  padding-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.auth-mini span {
  color: var(--teal);
}

.auth-mini a,
.auth-mini button {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(90, 62, 43, 0.17);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.78);
  color: var(--teal);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.hero {
  display: grid;
  grid-template-columns: minmax(470px, 0.9fr) minmax(680px, 1.25fr);
  gap: 0;
  align-items: start;
  min-height: 500px;
  margin-top: 0;
  position: relative;
}

.hero-copy {
  position: relative;
  display: grid;
  align-content: start;
  padding: 350px 0 12px;
  z-index: 2;
}

.hero-title-backdrop {
  position: absolute;
  left: -86px;
  top: -52px;
  width: min(650px, 44vw);
  max-width: 650px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.96;
  mix-blend-mode: multiply;
}

.hero-title-backdrop img {
  display: block;
  width: 100%;
  height: auto;
}

h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(62px, 7.2vw, 122px);
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 0 3px 0 rgba(255, 253, 244, 0.9);
}

.hero-title-image {
  width: min(580px, 100%);
  line-height: 0;
  transform: rotate(-0.8deg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(79, 57, 29, 0.12);
}

.hero-title-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

h1 span {
  display: block;
  width: fit-content;
}

.find {
  color: var(--teal);
  transform: rotate(-3deg);
}

.save {
  color: var(--coral);
  margin-left: 86px;
  transform: rotate(-5deg);
}

.connect {
  color: var(--green);
  margin-left: 150px;
  transform: rotate(2.5deg);
}



.hero-copy p {
  max-width: 520px;
  margin: 0 0 16px 8px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.78;
}

.hero-actions,
.section-head,
.area-strip,
.tags {
  display: flex;
  align-items: center;
}

.hero-actions {
  gap: 12px;
  flex-wrap: wrap;
  margin-left: 8px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 30px;
  border-radius: 2px;
  color: white;
  font-weight: 700;
  box-shadow: none;
}

.button.coral {
  background: var(--coral);
}

.button.mango {
  background: var(--mango);
}

.button.teal {
  background: var(--teal);
}

.button.small {
  min-height: 36px;
  padding: 0 22px;
  font-size: 13px;
}

.hero-collage {
  display: block;
  position: relative;
  min-height: 500px;
  margin-left: -74px;
  margin-top: 12px;
  z-index: 2;
}

.photo {
  background-image: url("assets/bali-tiles.jpg");
  background-size: 400% 300%;
  background-repeat: no-repeat;
  display: block;
  overflow: hidden;
}

.tile-1 { background-position: 0% 0%; }
.tile-2 { background-position: 33.333% 0%; }
.tile-3 { background-position: 66.666% 0%; }
.tile-4 { background-position: 100% 0%; }
.tile-5 { background-position: 0% 50%; }
.tile-6 { background-position: 33.333% 50%; }
.tile-7 { background-position: 66.666% 50%; }
.tile-8 { background-position: 100% 50%; }
.tile-9 { background-position: 0% 100%; }
.tile-10 { background-position: 33.333% 100%; }
.tile-11 { background-position: 66.666% 100%; }
.tile-12 { background-position: 100% 100%; }

figure.photo {
  margin: 0;
  border: 6px solid #fffdf8;
  border-radius: 3px;
  box-shadow: 0 10px 24px rgba(94, 67, 34, 0.09);
  position: absolute;
}

figure.photo figcaption {
  position: absolute;
  left: 14px;
  bottom: 10px;
  padding: 5px 10px;
  background: rgba(255, 253, 248, 0.9);
  color: #5b3c1d;
  border-radius: 1px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  transform: none;
}

.large {
  left: 2%;
  top: 22px;
  width: 45%;
  height: 342px;
  transform: rotate(-2.5deg);
  z-index: 1;
}

.wide {
  left: 41%;
  top: -2px;
  width: 37%;
  height: 198px;
  transform: rotate(2deg);
  z-index: 2;
}

.tall {
  right: 0;
  top: 54px;
  width: 31%;
  height: 280px;
  transform: rotate(3deg);
  z-index: 3;
}

.hero-collage .tile-4 {
  left: 42%;
  top: 214px;
  width: 37%;
  height: 238px;
  transform: rotate(-1.5deg);
  z-index: 4;
}


.area-strip {
  gap: 14px;
  margin: 22px 0 14px;
  padding: 11px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(104, 81, 40, 0.08);
}

.strip-title {
  min-width: 150px;
  color: var(--teal);
  font-weight: 700;
}

.strip-title span {
  color: var(--green);
  font-size: 24px;
  margin-right: 6px;
}

.area-scroll {
  display: flex;
  gap: 8px;
  overflow: visible;
  scrollbar-width: none;
  flex: 1;
  flex-wrap: wrap;
}

.area-pill {
  min-width: 104px;
  height: 45px;
  display: inline-grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 1px;
  padding: 7px 14px;
  border-radius: 999px;
  color: white;
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
}

.area-pill small {
  display: block;
  font-size: 12px;
}

.teal { background: var(--teal); }
.green { background: var(--green); }
.coral-pill { background: var(--coral); }
.mango-pill { background: var(--mango); }
.all-area {
  background: linear-gradient(135deg, var(--teal), var(--teal-soft));
}

.other-area {
  background: linear-gradient(135deg, #75695f, #a77d45);
}

@media (min-width: 768px) {
  .area-strip {
    gap: 18px;
    padding: 14px 0;
    border: 0;
    border-top: 1px solid rgba(64, 50, 38, 0.13);
    border-bottom: 1px solid rgba(64, 50, 38, 0.13);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .strip-title {
    min-width: auto;
    color: #5a3e2b;
    font-size: 16px;
    font-weight: 700;
  }

  .strip-title span {
    color: #5f7f4a;
    font-size: 18px;
    margin-right: 6px;
  }

  .area-scroll {
    gap: 8px;
  }

  .area-pill,
  .teal,
  .green,
  .coral-pill,
  .mango-pill,
  .all-area,
  .other-area {
    min-width: 0;
    height: auto;
    padding: 7px 11px;
    border: 1px solid rgba(64, 50, 38, 0.12);
    border-radius: 2px;
    background: rgba(255, 253, 248, 0.58);
    color: #4c423b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
  }

  .all-area {
    background: #5f7f4a;
    border-color: #5f7f4a;
    color: white;
  }

  .area-pill small {
    color: inherit;
    opacity: 0.74;
    font-size: 12px;
    font-weight: 500;
  }
}

.all-link {
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdfa;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.15fr 1.15fr 1fr;
  gap: 14px;
}

.dashboard-grid > *,
.section-head > div {
  min-width: 0;
}

.panel {
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 9px 22px rgba(94, 67, 34, 0.07);
}

.section-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-head h2,
.hashtag-band h2,
.guide-panel h2 {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}

.section-head h2 span {
  color: var(--mango);
  margin-right: 6px;
  font-size: 22px;
}

.section-head a,
.text-link {
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
}

.section-links {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.section-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.category-grid a {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.category-grid .photo {
  width: 100%;
  aspect-ratio: 1.25;
  border-radius: 7px;
  margin-bottom: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.text-link {
  display: block;
  text-align: center;
  margin-top: 12px;
}

.map-card {
  height: 210px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 24%, rgba(90, 62, 43, 0.14), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(95, 127, 74, 0.12), transparent 24%),
    linear-gradient(135deg, #efe3d3 0%, #f7fbf5 38%, #fff8ec 100%);
  border: 1px solid rgba(90, 62, 43, 0.12);
}

.map-island {
  position: absolute;
  inset: 0;
  background: url("assets/bali-watercolor-map.png") center / cover no-repeat;
  filter: saturate(1.03);
}

.map-wave {
  position: absolute;
  height: 12px;
  width: 96px;
  border-top: 3px solid rgba(90, 62, 43, 0.32);
  border-radius: 50%;
}

.wave-a {
  left: 5%;
  bottom: 24%;
}

.wave-b {
  right: 7%;
  top: 27%;
}

.pin {
  position: absolute;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 10%;
  transform: translate(-50%, -100%) rotate(-45deg);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  border: 2px solid white;
  box-shadow: 0 5px 12px rgba(64, 50, 38, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pin span {
  transform: rotate(45deg);
  font-size: 15px;
}

.pin:hover {
  transform: translate(-50%, -100%) rotate(-45deg) scale(1.1);
  box-shadow: 0 8px 18px rgba(64, 50, 38, 0.3);
}

.p1 { left: 37%; top: 63%; background: var(--mango); }
.p2 { left: 49%; top: 57%; background: var(--coral); }
.p3 { left: 55%; top: 39%; background: var(--green); }
.p4 { left: 57%; top: 78%; background: var(--teal); }
.p5 { left: 78%; top: 55%; background: var(--teal-soft); }

.area-name {
  position: absolute;
  color: rgba(64, 50, 38, 0.75);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.n1 { left: 20%; top: 60%; }
.n2 { left: 49%; top: 26%; }
.n3 { right: 12%; top: 50%; }
.n4 { right: 34%; bottom: 12%; }

.map-legend {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255, 253, 244, 0.84);
  border: 1px solid rgba(111, 82, 45, 0.12);
  backdrop-filter: blur(8px);
}

.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.map-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.lg-cafe { background: var(--mango); }
.lg-food { background: var(--coral); }
.lg-spa { background: var(--green); }
.lg-hotel { background: var(--teal); }

.map-panel .button {
  margin: 10px auto 0;
  display: flex;
  width: fit-content;
}

.notes-panel {
  grid-column: span 1;
}

.note-hub {
  grid-column: span 4;
  overflow: hidden;
  padding: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(201, 150, 63, 0.12), transparent 28%),
    radial-gradient(circle at 100% 8%, rgba(90, 62, 43, 0.11), transparent 28%),
    var(--paper);
}

.note-hub-head {
  align-items: flex-start;
}

.note-hub-head h2 {
  font-size: 20px;
}

.note-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 13px;
}

.note-filters a {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(111, 82, 45, 0.13);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.note-filters .active {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
}

.note-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.note-grid-main {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.note-card {
  min-width: 0;
  overflow: hidden;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  position: relative;
}

.note-card h3 {
  margin: 9px 0 5px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.42;
  font-weight: 700;
}

.note-state {
  position: absolute;
  z-index: 1;
  top: 9px;
  right: 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.92);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 5px 14px rgba(91, 60, 29, 0.12);
}

.note-state::before {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: white;
  font-size: 12px;
  line-height: 1;
}

.note-state.visited {
  color: var(--green);
}

.note-state.visited::before {
  content: "✓";
  background: var(--green);
}

.note-state.sns {
  color: var(--coral);
}

.note-state.sns::before {
  content: "✎";
  background: var(--coral);
}

.user {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
}

.user span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: #ffe4d7;
  border-radius: 50%;
  color: var(--coral);
}

.note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 7px;
}

.note-tags span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(90, 62, 43, 0.1);
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.note-card .photo {
  aspect-ratio: 2 / 3;
  border-radius: 7px;
}

.note-card .uploaded-photo {
  background-size: cover;
  background-position: center;
}

.note-photo-link {
  display: block;
  color: inherit;
}

.note-card .uploaded-photo {
  background-size: cover;
  background-position: center;
}

.note-card p {
  margin: 7px 0 5px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.note-card footer {
  color: var(--muted);
  font-size: 12px;
}

.note-more {
  display: inline-flex;
  width: fit-content;
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

@media (min-width: 1024px) {
  .note-hub {
    padding: 32px;
    border-radius: 16px;
    background:
      radial-gradient(circle at 0 0, rgba(201, 150, 63, 0.1), transparent 30%),
      radial-gradient(circle at 100% 8%, rgba(95, 127, 74, 0.1), transparent 28%),
      rgba(255, 253, 244, 0.9);
  }

  .note-hub-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    margin-bottom: 18px;
  }

  .note-hub-head h2 {
    max-width: 767px;
    font-size: clamp(28px, 2.7vw, 38px);
    line-height: 1.32;
    letter-spacing: 0;
  }

  .note-hub-head h2 span {
    font-size: 26px;
  }

  .note-hub-head p {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 500;
  }

  .note-hub .section-links {
    align-self: end;
    padding-bottom: 5px;
  }

  .note-filters {
    justify-content: center;
    gap: 12px;
    margin: 4px auto 24px;
  }

  .note-filters a {
    padding: 9px 15px;
    border-color: rgba(111, 82, 45, 0.1);
    background: rgba(255, 248, 232, 0.78);
    color: #6f5d4d;
    font-size: 13px;
    box-shadow: none;
  }

  .note-filters .active {
    background: rgba(90, 62, 43, 0.13);
    border-color: rgba(90, 62, 43, 0.18);
    color: var(--teal);
  }

  .note-grid-main {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }

  .note-grid-main .note-card {
    display: grid;
    align-content: start;
    padding: 12px;
    border-color: rgba(111, 82, 45, 0.1);
    border-radius: 14px;
    background: rgba(255, 253, 248, 0.78);
    box-shadow: 0 10px 24px rgba(94, 67, 34, 0.055);
  }

  .note-grid-main .note-card:nth-child(1) {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
    padding: 14px;
  }

  .note-grid-main .note-card:nth-child(2),
  .note-grid-main .note-card:nth-child(3) {
    grid-column: 4 / span 3;
    grid-template-columns: minmax(180px, 42%) minmax(0, 1fr);
    grid-template-areas:
      "photo user"
      "photo tags"
      "photo title"
      "photo text"
      "photo foot";
    column-gap: 16px;
    align-items: start;
  }

  .note-grid-main .note-card:nth-child(n + 4) {
    grid-column: span 2;
  }

  .note-grid-main .note-card:nth-child(2) .note-photo-link,
  .note-grid-main .note-card:nth-child(3) .note-photo-link {
    grid-area: photo;
  }

  .note-grid-main .note-card:nth-child(2) .user,
  .note-grid-main .note-card:nth-child(3) .user {
    grid-area: user;
  }

  .note-grid-main .note-card:nth-child(2) .note-tags,
  .note-grid-main .note-card:nth-child(3) .note-tags {
    grid-area: tags;
  }

  .note-grid-main .note-card:nth-child(2) h3,
  .note-grid-main .note-card:nth-child(3) h3 {
    grid-area: title;
  }

  .note-grid-main .note-card:nth-child(2) p,
  .note-grid-main .note-card:nth-child(3) p {
    grid-area: text;
  }

  .note-grid-main .note-card:nth-child(2) footer,
  .note-grid-main .note-card:nth-child(3) footer {
    grid-area: foot;
  }

  .note-grid-main .note-card .photo {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }

  .note-grid-main .note-card:nth-child(1) .photo {
    aspect-ratio: 1.22;
  }

  .note-grid-main .note-card:nth-child(2) .photo,
  .note-grid-main .note-card:nth-child(3) .photo {
    height: 100%;
    min-height: 190px;
    aspect-ratio: auto;
  }

  .note-grid-main .note-card:nth-child(1) h3 {
    margin-top: 14px;
    font-size: 27px;
    line-height: 1.32;
  }

  .note-grid-main .note-card:nth-child(2) h3,
  .note-grid-main .note-card:nth-child(3) h3 {
    margin-top: 6px;
    font-size: 20px;
  }

  .note-grid-main .note-card:nth-child(n + 4) h3 {
    font-size: 18px;
  }

  .note-grid-main .note-card:nth-child(1) p {
    -webkit-line-clamp: 3;
    font-size: 16px;
    font-weight: 500;
  }

  .note-grid-main .note-card p {
    font-weight: 500;
  }

  .note-grid-main .note-state {
    top: 14px;
    right: 14px;
    padding: 4px 8px;
    background: rgba(255, 253, 248, 0.82);
    font-size: 12px;
    box-shadow: none;
  }

  .note-grid-main .note-state::before {
    width: 12px;
    height: 12px;
    font-size: 12px;
  }

  .note-grid-main .user {
    color: var(--muted);
    opacity: 0.82;
  }

  .note-grid-main .note-tags {
    margin: 4px 0 6px;
  }

  .note-grid-main .note-tags span {
    background: rgba(90, 62, 43, 0.08);
    color: var(--teal);
  }
}

.watch-panel,
.guide-panel {
  grid-column: span 1;
}

.question-panel,
.map-panel {
  grid-column: span 2;
}

.question-panel {
  background:
    radial-gradient(circle at 100% 0, rgba(201, 150, 63, 0.13), transparent 30%),
    var(--paper);
}

.question-list {
  display: grid;
  gap: 9px;
}

.question-list article {
  padding: 11px;
  border: 1px solid rgba(111, 82, 45, 0.13);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.82);
}

.question-list b {
  display: block;
  font-size: 14px;
  line-height: 1.45;
}

.question-list p {
  margin: 6px 0 9px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

.question-list footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.question-list strong {
  color: var(--coral);
}

.spot-list,
.visited-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.spot-list li,
.visited-list li {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 50px;
  font-size: 13px;
  border-bottom: 1px solid rgba(111, 82, 45, 0.11);
  padding-bottom: 7px;
}

.spot-list .photo,
.visited-list .photo {
  width: 58px;
  height: 43px;
  border-radius: 6px;
}

.spot-list b,
.spot-list small,
.visited-list small,
.visited-list b {
  display: block;
}

.spot-list small,
.visited-list small,
.visited-list b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.spot-list button {
  border: 0;
  background: transparent;
  color: var(--mango);
  font-size: 21px;
}

.plan-panel {
  grid-column: span 3;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.plan-grid article {
  position: relative;
  min-width: 0;
}

.plan-grid .photo {
  aspect-ratio: 1.7;
  border-radius: 8px;
}

.plan-grid span {
  position: absolute;
  top: 7px;
  left: 7px;
  background: #fff7d9;
  color: var(--coral);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
}

.plan-grid b {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
}

.visited-panel {
  grid-column: span 2;
}

.visited-list li {
  grid-template-columns: 58px 1fr 88px auto;
}

.guide-panel {
  background: linear-gradient(135deg, #fff7ed 0%, #ffede4 100%);
  position: relative;
  overflow: hidden;
}

.guide-panel h2 {
  color: var(--coral);
  text-align: center;
  margin-bottom: 12px;
}

.guide-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.guide-icons a {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-height: 76px;
  color: var(--teal);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 7px;
  font-weight: 700;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.guide-icons a:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 16px rgba(91, 60, 29, 0.1);
}

.guide-icons img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.guide-icons span {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}

.guide-panel .button {
  margin: 12px auto 0;
  display: flex;
  width: fit-content;
}

.ig-found-section {
  margin-top: 14px;
  padding: 17px;
  background:
    radial-gradient(circle at 8% 0, rgba(201, 150, 63, 0.13), transparent 30%),
    radial-gradient(circle at 100% 20%, rgba(90, 62, 43, 0.12), transparent 28%),
    var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 9px 22px rgba(94, 67, 34, 0.07);
}

.ig-found-section .section-head {
  margin-bottom: 12px;
}

.ig-found-section h2 {
  margin: 0;
  font-size: 18px;
}

.ig-found-section h2 span {
  color: var(--coral);
  margin-right: 7px;
}

.ig-found-section p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.ig-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ig-card {
  display: grid;
  grid-template-columns: 138px 1fr;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid rgba(111, 82, 45, 0.13);
  border-radius: 8px;
}

.ig-card .photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
}

.ig-card-body {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
}

.ig-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.ig-meta b {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(201, 150, 63, 0.14);
  color: var(--mango);
  font-size: 12px;
}

.ig-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.ig-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.ig-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.ig-link {
  color: var(--coral);
  font-size: 12px;
  font-weight: 700;
}

.ig-actions button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(201, 150, 63, 0.35);
  border-radius: 50%;
  background: #fffdf8;
  color: var(--mango);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.hashtag-band {
  margin-top: 14px;
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, rgba(221, 247, 244, 0.92), rgba(247, 253, 250, 0.9));
  border-radius: 8px;
  border: 1px solid rgba(90, 62, 43, 0.12);
}

.hashtag-band h2 {
  color: var(--teal);
  margin-bottom: 9px;
}

.tags {
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.tags a {
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.photo-row {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
}

.photo-row .photo {
  aspect-ratio: 1.35;
  border-radius: 6px;
}

.notes-page main {
  display: grid;
  gap: 14px;
}

.notes-search-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
  align-items: end;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0, rgba(90, 62, 43, 0.12), transparent 32%),
    var(--paper);
  box-shadow: var(--shadow);
}

.page-kicker {
  margin: 0 0 7px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.notes-search-hero h1 {
  margin: 0;
  color: var(--teal);
  font-family: var(--font-heading);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.notes-search-hero p:not(.page-kicker) {
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.search-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.search-box input {
  min-width: 0;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 17px;
  background: #fffdf8;
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.search-panel {
  display: grid;
  gap: 13px;
}

.filter-group {
  display: grid;
  gap: 7px;
}

.filter-group b {
  color: var(--text);
  font-size: 13px;
}

.search-results {
  grid-column: auto;
}

.post-page main {
  display: grid;
  gap: 14px;
}

.post-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  gap: 18px;
  align-items: end;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 0, rgba(201, 150, 63, 0.14), transparent 30%),
    radial-gradient(circle at 0 100%, rgba(90, 62, 43, 0.11), transparent 28%),
    var(--paper);
  box-shadow: var(--shadow);
}

.post-hero h1 {
  margin: 0;
  color: var(--teal);
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.post-hero p:not(.page-kicker) {
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.75;
}

.post-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-flow li {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 82px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid rgba(111, 82, 45, 0.12);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.post-flow span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal);
  color: white;
}

.post-form {
  display: grid;
  gap: 14px;
}

.form-panel,
.confirm-panel,
.complete-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 9px 22px rgba(94, 67, 34, 0.07);
}

.form-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.form-head > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(201, 150, 63, 0.16);
  color: var(--mango);
  font-size: 13px;
  font-weight: 700;
}

.form-head h2 {
  margin: 0;
  font-size: 18px;
}

.form-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.choice-card {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 4px 10px;
  align-items: center;
  min-height: 84px;
  padding: 13px;
  border: 1px solid rgba(111, 82, 45, 0.14);
  border-radius: 8px;
  background: #fffdf8;
  cursor: pointer;
}

.choice-card input {
  grid-row: span 2;
  accent-color: var(--teal);
}

.choice-card span {
  color: var(--teal);
  font-size: 16px;
  font-weight: 700;
}

.choice-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.wide-field {
  grid-column: 1 / -1;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(111, 82, 45, 0.2);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.form-grid input,
.form-grid select {
  height: 46px;
  padding: 0 13px;
}

.form-grid textarea {
  resize: vertical;
  min-height: 132px;
  padding: 12px 13px;
  line-height: 1.6;
}

.upload-box {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 150px;
  padding: 18px;
  border: 2px dashed rgba(90, 62, 43, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0, rgba(90, 62, 43, 0.08), transparent 30%),
    #fffdf8;
  text-align: center;
  cursor: pointer;
}

.upload-box input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.upload-box span {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--teal);
  color: white;
  font-weight: 700;
}

.upload-box small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.photo-preview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.photo-preview p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.photo-preview figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(111, 82, 45, 0.13);
  border-radius: 8px;
  background: #fffdf8;
  position: relative;
}

.photo-preview figure button {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.92);
  color: var(--coral);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(91, 60, 29, 0.16);
}

.photo-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.photo-preview figcaption {
  padding: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.rule-panel {
  background:
    radial-gradient(circle at 100% 0, rgba(244, 94, 85, 0.09), transparent 28%),
    var(--paper);
}

.rule-list {
  display: grid;
  gap: 9px;
}

.rule-list label {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: start;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.82);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}

.rule-list input {
  margin-top: 3px;
  accent-color: var(--coral);
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.centered-actions {
  justify-content: center;
}

.button.ghost {
  background: #fffdf8;
  color: var(--teal);
  border: 1px solid rgba(90, 62, 43, 0.2);
  box-shadow: none;
}

.confirm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr);
  gap: 14px;
}

.confirm-summary dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.confirm-summary div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #fffdf8;
  border: 1px solid rgba(111, 82, 45, 0.12);
}

.confirm-summary dt,
.confirm-summary dd {
  margin: 0;
  min-width: 0;
}

.confirm-summary dt {
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.confirm-summary dd {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.attention-box {
  padding: 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff7df, #fff1e8);
  border: 1px solid rgba(201, 150, 63, 0.18);
}

.attention-box h3 {
  margin: 0 0 10px;
  color: var(--coral);
  font-size: 15px;
}

.attention-box ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.complete-panel {
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(90, 62, 43, 0.12), transparent 34%),
    var(--paper);
}

.complete-panel h2 {
  margin: 0 0 8px;
  color: var(--teal);
  font-size: 24px;
}

.complete-panel p {
  max-width: 620px;
  margin: 0 auto 16px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

.admin-counter {
  display: grid;
  place-items: center;
  min-height: 118px;
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.86);
  border: 1px solid rgba(111, 82, 45, 0.12);
}

.admin-counter span {
  color: var(--coral);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
}

.admin-counter small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--teal);
  font-weight: 700;
  cursor: pointer;
}

.admin-request-list {
  display: grid;
  gap: 12px;
}

.empty-note {
  margin: 0;
  padding: 18px;
  border-radius: 8px;
  background: #fffdf8;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

.admin-request-card {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(111, 82, 45, 0.13);
  border-radius: 8px;
  background: #fffdf8;
}

.admin-request-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.admin-request-head .note-state {
  position: static;
  margin-bottom: 8px;
}

.admin-request-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.admin-request-head p,
.admin-memo {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.admin-request-head b {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(201, 150, 63, 0.15);
  color: var(--mango);
  font-size: 12px;
}

.admin-request-head b.approved {
  background: rgba(95, 127, 74, 0.13);
  color: var(--green);
}

.admin-request-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-request-card dl div {
  min-width: 0;
  padding: 9px;
  border-radius: 8px;
  background: rgba(90, 62, 43, 0.06);
}

.admin-request-card dt,
.admin-request-card dd {
  margin: 0;
  min-width: 0;
}

.admin-request-card dt {
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.admin-request-card dd {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-actions button {
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid rgba(90, 62, 43, 0.18);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--teal);
  font-weight: 700;
  cursor: pointer;
}

.admin-hero {
  align-items: center;
}

.admin-status-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 8px;
}

.admin-status-summary div {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.86);
  border: 1px solid rgba(111, 82, 45, 0.12);
}

.admin-status-summary span {
  color: var(--coral);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.admin-status-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-workspace {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.admin-list-panel,
.admin-detail-panel {
  min-height: 520px;
}

.admin-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  margin-bottom: 12px;
}

.admin-tabs button {
  min-height: 38px;
  border: 1px solid rgba(111, 82, 45, 0.14);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.admin-tabs button.active {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
}

.admin-search {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.admin-search input {
  width: 100%;
  height: 42px;
  border: 1px solid rgba(111, 82, 45, 0.2);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  padding: 0 12px;
}

.admin-request-list.compact {
  max-height: 680px;
  overflow: auto;
  padding-right: 3px;
}

.admin-list-item {
  display: grid;
  gap: 5px;
  width: 100%;
  margin-bottom: 9px;
  padding: 12px;
  border: 1px solid rgba(111, 82, 45, 0.13);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-list-item.active {
  border-color: rgba(90, 62, 43, 0.45);
  box-shadow: 0 0 0 3px rgba(90, 62, 43, 0.08);
}

.admin-list-item b {
  font-size: 15px;
  line-height: 1.35;
}

.admin-list-item small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.admin-list-status {
  display: inline-flex;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(201, 150, 63, 0.15);
  color: var(--mango);
  font-size: 12px;
  font-weight: 700;
}

.admin-list-status.approved {
  background: rgba(95, 127, 74, 0.13);
  color: var(--green);
}

.admin-list-status.private {
  background: rgba(117, 105, 95, 0.13);
  color: var(--muted);
}

.danger-text {
  margin-top: 10px;
  color: var(--coral);
}

.admin-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.admin-detail-head .note-state {
  position: static;
  margin-bottom: 8px;
}

.admin-detail-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.35;
}

.admin-detail-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
}

.admin-photo-strip {
  display: grid;
  gap: 8px;
  align-content: start;
}

.admin-photo-strip img,
.admin-photo-empty {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  background: #fffdf8;
  border: 1px solid rgba(111, 82, 45, 0.12);
}

.admin-photo-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 700;
}

.admin-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.admin-edit-form label {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.admin-edit-form input,
.admin-edit-form select,
.admin-edit-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(111, 82, 45, 0.2);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.admin-edit-form input,
.admin-edit-form select {
  height: 42px;
  padding: 0 12px;
}

.admin-edit-form textarea {
  resize: vertical;
  padding: 10px 12px;
  line-height: 1.6;
}

.admin-title-field textarea {
  min-height: 72px;
}

.admin-review-box {
  margin-top: 14px;
  padding: 13px;
  border-radius: 8px;
  background: rgba(201, 150, 63, 0.08);
  border: 1px solid rgba(201, 150, 63, 0.16);
}

.admin-review-box h3 {
  margin: 0 0 8px;
  color: var(--mango);
  font-size: 16px;
}

.admin-review-box ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.sticky-actions {
  position: sticky;
  bottom: 10px;
  margin-top: 14px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(111, 82, 45, 0.12);
  backdrop-filter: blur(10px);
}

.detail-page main {
  display: grid;
  gap: 14px;
}

.detail-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0, rgba(90, 62, 43, 0.12), transparent 30%),
    var(--paper);
  box-shadow: var(--shadow);
}

.detail-hero h1 {
  margin: 0;
  color: var(--teal);
  font-family: var(--font-heading);
  max-width: 34em;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.detail-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.detail-tags span {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(90, 62, 43, 0.1);
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.favorite-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(244, 94, 85, 0.24);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--coral);
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 9px 20px rgba(94, 67, 34, 0.08);
  cursor: pointer;
}

.favorite-button.active {
  background: var(--coral);
  color: white;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
}

.detail-main,
.detail-side {
  display: grid;
  align-content: start;
  gap: 14px;
}

.detail-gallery {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.detail-photo-item {
  flex: 0 0 min(330px, 76vw);
  width: min(330px, 76vw);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 8px solid #fffdf8;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: var(--shadow);
  cursor: zoom-in;
  scroll-snap-align: start;
}

.detail-photo-item img,
.detail-photo-item .photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.detail-photo-item .photo {
  background-size: cover;
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(31, 24, 18, 0.78);
}

.photo-lightbox[hidden] {
  display: none;
}

.photo-lightbox img {
  display: block;
  max-width: min(1120px, 94vw);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #fffdf8;
  color: var(--text);
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
}

.detail-comments {
  display: grid;
  gap: 10px;
}

.detail-comments article {
  padding: 12px;
  border: 1px solid rgba(111, 82, 45, 0.13);
  border-radius: 8px;
  background: #fffdf8;
}

.detail-comments b,
.detail-comments small {
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.detail-comments em {
  display: inline-flex;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(201, 150, 63, 0.14);
  color: var(--mango);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.detail-comments p {
  margin: 7px 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.75;
  white-space: pre-wrap;
}

.comment-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(111, 82, 45, 0.13);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0, rgba(201, 150, 63, 0.12), transparent 28%),
    #fffdf8;
}

.comment-form h3 {
  margin: 0;
  color: var(--teal);
  font-size: 16px;
}

.login-user-note {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.comment-choice {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.comment-choice label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid rgba(111, 82, 45, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.comment-choice input {
  accent-color: var(--teal);
}

.comment-fields {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 9px;
}

.comment-fields.single-field {
  grid-template-columns: 1fr;
}

.comment-fields input,
.comment-fields textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(111, 82, 45, 0.2);
  border-radius: 8px;
  background: white;
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.comment-fields input {
  height: 42px;
  padding: 0 12px;
}

.comment-fields textarea {
  resize: vertical;
  min-height: 84px;
  padding: 10px 12px;
  line-height: 1.55;
}

.login-required-box {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 6px 0 0;
}

.login-required-box.large {
  margin-top: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0, rgba(90, 62, 43, 0.1), transparent 30%),
    var(--paper);
  box-shadow: var(--shadow);
}

.login-required-box.large h2 {
  margin: 0;
  color: var(--teal);
  font-size: 22px;
}

.login-required-box h3 {
  margin: 0;
  color: var(--teal);
  font-size: 16px;
}

.login-required-box p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.login-required-box .button {
  box-shadow: none;
}

.login-form {
  display: grid;
  gap: 13px;
  max-width: 620px;
}

.login-form label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.login-form input {
  width: 100%;
  height: 46px;
  border: 1px solid rgba(111, 82, 45, 0.2);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  padding: 0 13px;
}

.login-form .rule-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: start;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.82);
}

.login-form .rule-check input {
  width: auto;
  height: auto;
  margin-top: 4px;
  accent-color: var(--coral);
}

.member-rules {
  padding: 13px;
  border-radius: 8px;
  background: rgba(90, 62, 43, 0.06);
  border: 1px solid rgba(90, 62, 43, 0.12);
}

.member-rules h2 {
  margin: 0 0 8px;
  color: var(--teal);
  font-size: 16px;
}

.member-rules ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.form-message {
  min-height: 1.4em;
  margin: 0;
  color: var(--coral);
  font-size: 13px;
  font-weight: 700;
}

.auth-switch-link {
  text-align: left;
  margin-top: 0;
}

.member-panel {
  background:
    radial-gradient(circle at 0 0, rgba(95, 127, 74, 0.1), transparent 28%),
    var(--paper);
}

.detail-side h2 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 17px;
}

.detail-info {
  display: grid;
  gap: 8px;
  margin: 0;
}

.detail-info div {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(111, 82, 45, 0.11);
}

.detail-info dt,
.detail-info dd {
  margin: 0;
}

.detail-info dt {
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.detail-info dd {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}

.mini-map {
  display: grid;
  place-items: center;
  min-height: 190px;
  margin-bottom: 12px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 45% 45%, rgba(95, 127, 74, 0.22), transparent 28%),
    url("assets/bali-watercolor-map.png") center / cover no-repeat;
  border: 1px solid rgba(90, 62, 43, 0.12);
  overflow: hidden;
}

.mini-map span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--coral);
  color: white;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(64, 50, 38, 0.22);
}

.map-detail-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.detail-external {
  text-align: left;
  margin-top: 0;
}

@media (max-width: 1120px) {
  .page-shell {
    padding: 20px;
  }

  .site-header {
    grid-template-columns: auto 1fr auto;
  }

  .tagline {
    display: none;
  }

  .top-nav {
    grid-template-columns: repeat(4, 1fr);
  }

  .auth-mini {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 0;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
  }

  .hero-title-backdrop {
    position: relative;
    left: auto;
    top: auto;
    width: min(640px, 100%);
    margin: 0 auto -24px;
  }

  .hero-copy {
    padding-top: 0;
  }

  .hero-collage {
    min-height: 320px;
  }

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

  .notes-panel,
  .guide-panel {
    grid-column: span 1;
  }

  .note-hub,
  .question-panel,
  .map-panel,
  .plan-panel {
    grid-column: span 2;
  }

  .note-grid-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .notes-search-hero {
    grid-template-columns: 1fr;
  }

  .post-hero {
    grid-template-columns: 1fr;
  }

  .confirm-layout {
    grid-template-columns: 1fr;
  }

  .admin-workspace,
  .admin-detail-grid {
    grid-template-columns: 1fr;
  }

  .admin-request-list.compact {
    max-height: none;
  }

  .admin-photo-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body {
    background:
      radial-gradient(circle at 100% 4%, rgba(95, 127, 74, 0.1), transparent 28%),
      linear-gradient(180deg, #fffaf0 0%, #fff8ec 58%, #f5fbf9 100%);
  }

  .page-shell {
    padding: 13px;
    max-width: 430px;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 4;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    margin: -4px -4px 12px;
    padding: 10px 10px 9px;
    background: rgba(255, 250, 240, 0.88);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 8px 8px;
  }

  .menu-button {
    display: block;
    order: -1;
  }

  .brand {
    justify-self: center;
  }

  .brand-main {
    font-size: 30px;
  }

  .brand-by {
    margin: 1px 0 0;
    text-align: center;
    font-size: 12px;
  }

  .top-nav {
    display: none;
  }

  .auth-mini {
    display: none;
  }

  .hero {
    min-height: 0;
    gap: 14px;
  }

  .hero-copy {
    padding: 2px 0;
  }

  h1 {
    font-size: 48px;
    line-height: 0.98;
  }

  .hero-title-image {
    width: 100%;
    transform: none;
    box-shadow: 0 10px 24px rgba(79, 57, 29, 0.1);
  }

  .save {
    margin-left: 42px;
  }

  .connect {
    margin-left: 86px;
  }

  .hero-copy p {
    font-size: 14px;
    line-height: 1.7;
    margin: 12px 2px 12px;
  }

  .hero-actions {
    display: grid;
    gap: 9px;
    margin-left: 0;
  }

  .button {
    min-height: 43px;
    width: 100%;
    padding: 0 18px;
    font-size: 14px;
  }

  .hero-collage {
    min-height: 250px;
  }

  .large {
    left: 0;
    top: 4px;
    width: 58%;
    height: 180px;
  }

  .wide {
    left: 54%;
    top: 0;
    width: 45%;
    height: 106px;
  }

  .tall {
    right: 0;
    top: 98px;
    width: 43%;
    height: 142px;
  }

  .hero-collage .tile-4 {
    left: 16%;
    top: 156px;
    width: 45%;
    height: 88px;
  }

  figure.photo {
    border-width: 5px;
  }

  figure.photo figcaption {
    display: none;
  }

  .area-strip {
    display: block;
    padding: 12px;
  }

  .strip-title {
    margin-bottom: 10px;
  }

  .area-scroll {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
  }

  .area-pill {
    min-width: 0;
    width: 100%;
    height: 45px;
    padding: 7px 10px;
  }

  .all-link {
    display: none;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .note-hub,
  .question-panel,
  .map-panel,
  .plan-panel,
  .guide-panel {
    grid-column: auto;
  }

  .panel,
  .hashtag-band {
    padding: 12px;
  }

  .category-grid {
    grid-template-columns: repeat(4, minmax(66px, 1fr));
    overflow-x: auto;
  }

  .map-card {
    height: 185px;
  }

  .map-legend {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    border-radius: 8px;
  }

  .pin {
    width: 31px;
    height: 31px;
  }

  .note-grid,
  .note-grid-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }

  .note-card {
    padding: 7px;
  }

  .note-state {
    top: 8px;
    right: 8px;
    padding: 4px 7px;
    font-size: 12px;
  }

  .note-state::before {
    width: 13px;
    height: 13px;
    font-size: 12px;
  }

  .note-card .photo {
    aspect-ratio: 2 / 3;
  }

  .user {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 5px;
    font-size: 12px;
  }

  .user span {
    width: 22px;
    height: 22px;
  }

  .note-tags {
    gap: 3px;
  }

  .note-tags span {
    padding: 3px 6px;
    font-size: 12px;
  }

  .note-filters {
    gap: 7px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .note-filters a {
    white-space: nowrap;
  }

  .hide-mobile {
    display: none;
  }

  .plan-panel,
  .visited-panel {
    grid-column: auto;
  }

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

  .visited-list li {
    grid-template-columns: 52px 1fr auto;
  }

  .visited-list b {
    display: none;
  }

  .guide-icons {
    grid-template-columns: repeat(3, 1fr);
  }

  .ig-card-grid {
    grid-template-columns: 1fr;
  }

  .ig-card {
    grid-template-columns: 104px 1fr;
  }

  .ig-found-section .section-head {
    align-items: flex-start;
  }

  .photo-row {
    grid-template-columns: repeat(5, 1fr);
  }

  .notes-search-hero {
    padding: 14px;
  }

  .search-box {
    grid-template-columns: 1fr;
  }

  .section-head,
  .section-links {
    align-items: flex-start;
  }

  .section-links {
    justify-content: flex-start;
  }

  .post-hero {
    padding: 14px;
  }

  .post-flow {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-panel,
  .confirm-panel,
  .complete-panel {
    padding: 13px;
  }

  .form-head {
    gap: 9px;
  }

  .choice-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .wide-field {
    grid-column: auto;
  }

  .photo-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .confirm-summary div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .form-actions {
    display: grid;
  }

  .admin-request-head,
  .admin-actions {
    display: grid;
  }

  .admin-request-card dl {
    grid-template-columns: 1fr;
  }

  .admin-status-summary,
  .admin-tabs,
  .admin-edit-form,
  .admin-photo-strip {
    grid-template-columns: 1fr;
  }

  .sticky-actions {
    border-radius: 8px;
  }

  .detail-hero,
  .detail-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .detail-actions {
    justify-content: flex-start;
  }

  .detail-photo-item {
    flex-basis: min(285px, 82vw);
    width: min(285px, 82vw);
    border-width: 5px;
  }

  .comment-fields {
    grid-template-columns: 1fr;
  }
}




@media (max-width: 767px) {
  .site-header::after {
    content: "";
  }

  .hero-title-backdrop {
    margin: 0 -12px -16px;
    width: calc(100% + 24px);
  }
}

@media (min-width: 1024px) {
  .note-grid-main {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .note-grid-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .note-grid-main .note-card {
    border-radius: 12px;
  }
}

@media (max-width: 767px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .note-hub {
    grid-column: auto;
  }

  .note-hub-head h2 {
    font-size: 23px;
    line-height: 1.38;
  }

  .note-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .note-grid-main {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .note-card {
    border-radius: 12px;
  }

  .note-card h3 {
    font-size: 17px;
  }
}

@media (min-width: 1024px) {
  .note-grid-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .note-hub {
    padding: 30px 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .note-hub-head {
    padding: 0 8px;
  }

  .note-grid-main .note-card,
  .note-grid-main .note-card:nth-child(1),
  .note-grid-main .note-card:nth-child(2),
  .note-grid-main .note-card:nth-child(3),
  .note-grid-main .note-card:nth-child(n + 4) {
    grid-column: auto;
    grid-row: auto;
    display: grid;
    grid-template-columns: minmax(230px, 40%) minmax(0, 1fr);
    grid-template-areas:
      "photo user"
      "photo tags"
      "photo title"
      "photo text"
      "photo more"
      "photo foot";
    column-gap: 22px;
    align-items: start;
    min-height: 206px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .note-grid-main .note-card:nth-child(1) {
    grid-column: 1 / -1;
    grid-template-columns: minmax(360px, 42%) minmax(0, 1fr);
    min-height: 252px;
    padding: 0;
  }

  .note-grid-main .note-photo-link {
    grid-area: photo;
    height: 100%;
  }

  .note-grid-main .user {
    grid-area: user;
    margin: 2px 0 8px;
    color: var(--muted);
    opacity: 0.72;
  }

  .note-grid-main .note-tags {
    grid-area: tags;
    margin: 0 0 10px;
  }

  .note-grid-main .note-card h3 {
    grid-area: title;
    max-width: 17em;
    margin: 0 0 7px;
    font-size: 20px;
    line-height: 1.38;
  }

  .note-grid-main .note-card:nth-child(1) h3 {
    max-width: 19em;
    font-size: clamp(24px, 1.9vw, 30px);
    line-height: 1.34;
  }

  .note-grid-main .note-card p {
    grid-area: text;
    max-width: 34em;
    margin: 0;
    color: #5f5148;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.62;
    -webkit-line-clamp: 2;
  }

  .note-grid-main .note-card:nth-child(1) p {
    max-width: 38em;
    font-size: 15px;
    -webkit-line-clamp: 2;
  }

  .note-grid-main .note-more {
    grid-area: more;
    margin-top: 10px;
  }

  .note-grid-main .note-card footer {
    grid-area: foot;
    align-self: end;
    margin-top: 10px;
    color: rgba(117, 105, 95, 0.72);
  }

  .note-grid-main .note-card .photo,
  .note-grid-main .note-card:nth-child(1) .photo,
  .note-grid-main .note-card:nth-child(2) .photo,
  .note-grid-main .note-card:nth-child(3) .photo {
    width: 100%;
    height: 100%;
    min-height: 176px;
    aspect-ratio: auto;
    border-radius: 4px;
  }

  .note-grid-main .note-card:nth-child(1) .photo {
    min-height: 218px;
  }

  .note-grid-main .note-state {
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    background: rgba(255, 253, 248, 0.76);
    color: rgba(64, 50, 38, 0.72);
    font-size: 12px;
    box-shadow: none;
  }

  .note-grid-main .note-state.visited,
  .note-grid-main .note-state.sns {
    color: rgba(64, 50, 38, 0.72);
  }

  .note-grid-main .note-state::before {
    width: 12px;
    height: 12px;
    font-size: 12px;
  }
}

@media (min-width: 1024px) {
  .note-hub {
    font-family: var(--font-body);
  }

  .note-hub-head {
    border-bottom: 1px solid rgba(64, 50, 38, 0.18);
    padding-bottom: 22px;
  }

  .note-hub-head h2 {
    color: #26352f;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
  }

  .note-hub-head h2 span {
    display: inline;
  }

  .note-hub-head p {
    color: #746a60;
    font-weight: 400;
  }

  .note-filters {
    justify-content: flex-start;
    gap: 9px;
    margin: 18px 0 24px;
  }

  .note-filters a {
    border-radius: 2px;
    border: 1px solid rgba(64, 50, 38, 0.14);
    background: rgba(255, 253, 248, 0.58);
    color: #5f5a54;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
  }

  .note-filters .active {
    background: #5f7f4a;
    border-color: #5f7f4a;
    color: white;
  }

  .note-grid-main {
    gap: 24px 28px;
  }

  .note-grid-main .note-card,
  .note-grid-main .note-card:nth-child(1),
  .note-grid-main .note-card:nth-child(2),
  .note-grid-main .note-card:nth-child(3),
  .note-grid-main .note-card:nth-child(n + 4) {
    grid-template-columns: minmax(210px, 37%) minmax(0, 1fr);
    column-gap: 20px;
    min-height: 188px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(64, 50, 38, 0.13);
  }

  .note-grid-main .note-card:nth-child(1) {
    grid-template-columns: minmax(340px, 41%) minmax(0, 1fr);
    min-height: 230px;
    padding-bottom: 26px;
  }

  .note-grid-main .note-card .photo,
  .note-grid-main .note-card:nth-child(1) .photo,
  .note-grid-main .note-card:nth-child(2) .photo,
  .note-grid-main .note-card:nth-child(3) .photo {
    min-height: 158px;
    border-radius: 0;
  }

  .note-grid-main .note-card:nth-child(1) .photo {
    min-height: 214px;
  }

  .note-grid-main .note-state {
    position: absolute;
    top: 0;
    right: 0;
    justify-self: start;
    width: fit-content;
    margin: 0;
    padding: 3px 7px;
    border-radius: 2px;
    background: #eef4ea;
    color: #5f7f4a;
    font-size: 12px;
    font-weight: 700;
  }

  .note-grid-main .note-state::before {
    display: none;
  }

  .note-grid-main .note-tags {
    grid-area: tags;
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 0 0 9px;
  }

  .note-grid-main .note-tags span {
    padding: 3px 7px;
    border-radius: 2px;
    background: rgba(90, 62, 43, 0.08);
    color: #5a3e2b;
    font-size: 12px;
    font-weight: 700;
  }

  .note-grid-main .note-card h3 {
    color: #332b25;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.48;
  }

  .note-grid-main .note-card:nth-child(1) h3 {
    font-size: clamp(23px, 1.7vw, 28px);
  }

  .note-grid-main .note-card p {
    color: #655d56;
    font-size: 14px;
    font-weight: 400;
  }

  .note-grid-main .user {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.62;
  }

  .note-grid-main .user span {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    background: rgba(244, 94, 85, 0.12);
    font-size: 12px;
  }

  .note-more {
    color: #5a3e2b;
    font-size: 12px;
    font-weight: 700;
  }

  .note-grid-main .note-card footer {
    color: rgba(64, 50, 38, 0.45);
    font-size: 12px;
  }
}

@media (min-width: 1024px) {
  .note-hub-head h2 {
    font-size: 20px;
    line-height: 1.4;
  }

  .note-hub-head h2 span {
    display: inline;
  }
}

@media (min-width: 1024px) {
  .question-panel,
  .map-panel,
  .plan-panel,
  .guide-panel,
  .hashtag-band {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 24px 0 8px;
  }

  .question-panel,
  .map-panel,
  .plan-panel,
  .guide-panel {
    border-top: 1px solid rgba(64, 50, 38, 0.14);
  }

  .question-panel .section-head,
  .map-panel .section-head,
  .plan-panel .section-head {
    margin-bottom: 16px;
  }

  .section-head h2,
  .hashtag-band h2,
  .guide-panel h2 {
    color: #26352f;
    font-size: 20px;
    font-weight: 700;
  }

  .section-head h2 span {
    color: #5f7f4a;
    font-size: 18px;
  }

  .section-head p {
    color: #746a60;
    font-size: 14px;
    font-weight: 400;
  }

  .section-head a,
  .text-link {
    color: #5a3e2b;
    font-size: 12px;
    font-weight: 700;
  }

  .question-list {
    gap: 0;
  }

  .question-list article {
    padding: 16px 0;
    border: 0;
    border-top: 1px solid rgba(64, 50, 38, 0.11);
    border-radius: 0;
    background: transparent;
  }

  .question-list article:first-child {
    border-top: 0;
  }

  .question-list b {
    color: #332b25;
    font-size: 17px;
    font-weight: 700;
  }

  .question-list p {
    color: #655d56;
    font-size: 14px;
    font-weight: 400;
  }

  .question-list footer {
    color: #5a3e2b;
    font-size: 12px;
  }

  .map-card {
    border-radius: 0;
    border: 0;
    height: 238px;
    box-shadow: none;
  }

  .map-panel .button {
    margin: 12px 0 0;
    border-radius: 2px;
    box-shadow: none;
  }

  .plan-grid {
    gap: 22px;
  }

  .plan-grid .photo {
    border-radius: 0;
  }

  .plan-grid span {
    top: 8px;
    left: 8px;
    border-radius: 2px;
    background: rgba(255, 253, 248, 0.86);
    color: #5f7f4a;
    font-size: 12px;
  }

  .plan-grid b {
    color: #332b25;
    font-size: 14px;
    font-weight: 700;
  }

  .guide-panel {
    background: transparent;
  }

  .guide-panel h2 {
    color: #26352f;
    text-align: left;
    margin-bottom: 16px;
  }

  .guide-icons {
    gap: 0;
    border-top: 1px solid rgba(64, 50, 38, 0.11);
    border-left: 1px solid rgba(64, 50, 38, 0.11);
  }

  .guide-icons a {
    min-height: 86px;
    border: 0;
    border-right: 1px solid rgba(64, 50, 38, 0.11);
    border-bottom: 1px solid rgba(64, 50, 38, 0.11);
    border-radius: 0;
    background: rgba(255, 253, 248, 0.42);
    color: #5a3e2b;
  }

  .guide-icons a:hover {
    transform: none;
    background: rgba(255, 253, 248, 0.72);
    box-shadow: none;
  }

  .guide-icons span {
    color: #4c423b;
    font-weight: 700;
  }

  .guide-panel .button {
    margin: 14px 0 0;
    border-radius: 2px;
    box-shadow: none;
  }

  .hashtag-band {
    margin-top: 22px;
    border-top: 1px solid rgba(64, 50, 38, 0.14);
  }

  .hashtag-band h2 {
    color: #5a3e2b;
  }

  .tags a {
    border-radius: 2px;
    background: rgba(255, 253, 248, 0.58);
    border: 1px solid rgba(64, 50, 38, 0.12);
    color: #5f5a54;
    font-size: 12px;
    font-weight: 500;
  }

  .photo-row {
    gap: 10px;
  }

  .photo-row .photo {
    border-radius: 0;
  }
}

/* Home cover overrides must remain last in the cascade. */
.page-shell .site-header {
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
  padding: 8px 0 16px;
  border-bottom: 1px solid rgba(31, 39, 35, 0.2);
}

.page-shell .brand-main {
  color: #2b211a;
  font-family: var(--font-latin);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: none;
}

.page-shell .brand-by {
  color: #b8643f;
  margin: 5px 0 0 2px;
  font-size: 12px;
}

.page-shell .tagline {
  margin-top: 0;
  color: #5f6964;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.14em;
}

.page-shell .tagline::after,
.page-shell .top-nav img,
.page-shell .top-nav small {
  display: none;
}

.page-shell .top-nav {
  justify-content: end;
  grid-template-columns: repeat(6, auto);
  gap: 22px;
}

.page-shell .top-nav a {
  display: block;
  padding: 5px 0;
  border-radius: 0;
  color: #2b211a;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.page-shell .editorial-hero {
  display: block;
  min-height: clamp(520px, 72vh, 720px);
  margin: 0;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(43, 33, 26, 0.74) 0%, rgba(43, 33, 26, 0.34) 44%, rgba(43, 33, 26, 0.02) 76%),
    url("assets/bali-tiles.jpg");
  background-size: cover, cover;
  background-position: center, center;
  border-radius: 2px;
  color: #fff;
  position: relative;
}

.page-shell .editorial-hero .hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(660px, 62%);
  min-height: inherit;
  padding: 54px 5.5% 64px;
}

.page-shell .editorial-hero .hero-kicker {
  max-width: none;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.page-shell .editorial-hero h1 {
  color: #fff;
  font-family: var(--font-latin);
  font-size: clamp(68px, 8vw, 126px);
  font-weight: 400;
  line-height: 0.85;
  text-shadow: none;
}

.page-shell .editorial-hero .hero-japanese {
  max-width: none;
  margin: 28px 0 18px;
  color: #fff;
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.55;
}

.page-shell .editorial-hero .hero-intro {
  max-width: 460px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
}

.page-shell .editorial-hero .hero-actions {
  margin: 0;
}

.page-shell .editorial-hero .button {
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.page-shell .hero-edition {
  position: absolute;
  right: 24px;
  bottom: 20px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  writing-mode: vertical-rl;
  letter-spacing: 0.14em;
}

.page-shell .area-strip {
  margin-top: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: #fff;
}

@media (max-width: 1023px) {
  .page-shell .site-header {
    grid-template-columns: auto 1fr auto;
  }

  .page-shell .tagline,
  .page-shell .top-nav {
    display: none;
  }

  .page-shell .editorial-hero .hero-copy {
    width: min(720px, 82%);
  }
}

@media (max-width: 767px) {
  .page-shell {
    padding: 14px 14px 28px;
  }

  .page-shell .editorial-hero {
    min-height: min(72vh, 620px);
    background-image:
      linear-gradient(180deg, rgba(43, 33, 26, 0.08) 0%, rgba(43, 33, 26, 0.78) 82%),
      url("assets/bali-tiles.jpg");
    background-size: cover, cover;
    background-position: center, center;
  }

  .page-shell .editorial-hero .hero-copy {
    justify-content: flex-end;
    width: 100%;
    padding: 42px 24px;
  }

  .page-shell .editorial-hero h1 {
    font-size: clamp(52px, 18vw, 78px);
  }

  .page-shell .editorial-hero .hero-kicker {
    margin-bottom: 18px;
  }

  .page-shell .editorial-hero .hero-japanese {
    margin: 20px 0 12px;
    font-size: 18px;
  }

  .page-shell .editorial-hero .hero-intro {
    font-size: 12px;
  }

  .page-shell .hero-edition {
    display: none;
  }
}

/* Editorial area index and journal grid. */
.page-shell .area-strip {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin: 0 0 56px;
  padding: 18px 0 20px;
  border-top: 0;
  border-bottom: 1px solid #2b211a;
  background: transparent;
}

.page-shell .strip-title {
  display: grid;
  min-width: 0;
  gap: 4px;
  color: #2b211a;
  line-height: 1.15;
}

.page-shell .strip-title span {
  margin: 0;
  color: #b8643f;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.page-shell .strip-title b {
  font-size: 12px;
  font-weight: 500;
}

.page-shell .area-scroll {
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
}

.page-shell .area-pill,
.page-shell .teal,
.page-shell .green,
.page-shell .coral-pill,
.page-shell .mango-pill,
.page-shell .all-area,
.page-shell .other-area {
  min-width: max-content;
  height: auto;
  padding: 3px 16px;
  border: 0;
  border-right: 1px solid rgba(58, 42, 31, 0.24);
  border-radius: 0;
  background: transparent;
  color: #2b211a;
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.04em;
}

.page-shell .area-pill:first-child {
  padding-left: 0;
  color: #b8643f;
}

.page-shell .area-pill:last-child {
  border-right: 0;
}

.page-shell .area-pill:hover {
  color: #b8643f;
}

.page-shell .area-pill small {
  color: #75807b;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.page-shell .note-hub {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-shell .note-hub-head {
  align-items: end;
  margin-bottom: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid #2b211a;
}

.page-shell .section-kicker {
  margin: 0 0 8px;
  color: #b8643f;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.page-shell .note-hub-head h2 {
  color: #2b211a;
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
}

.page-shell .note-hub .section-links a {
  color: #2b211a;
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-shell .note-filters {
  justify-content: flex-start;
  gap: 20px;
  margin: 0 0 32px;
  padding-bottom: 12px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(58, 42, 31, 0.16);
}

.page-shell .note-filters a,
.page-shell .note-filters .active {
  min-width: max-content;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #67716d;
  font-size: 12px;
  font-weight: 500;
}

.page-shell .note-filters .active {
  border-bottom-color: #b8643f;
  color: #b8643f;
}

.page-shell .note-grid-main {
  gap: 28px 20px;
}

.page-shell .note-grid-main .note-card {
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid rgba(58, 42, 31, 0.2);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-shell .note-grid-main .note-card .photo {
  border-radius: 0;
}

.page-shell .note-grid-main .note-card:nth-child(1) {
  padding: 0 20px 24px 0;
  border-right: 1px solid rgba(58, 42, 31, 0.2);
}

.page-shell .note-grid-main .note-card h3 {
  color: #2b211a;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.page-shell .note-grid-main .note-card:nth-child(1) h3 {
  font-size: clamp(26px, 2.5vw, 38px);
}

.page-shell .note-grid-main .note-card p {
  color: #606965;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
}

.page-shell .note-grid-main .user {
  margin: 10px 0 6px;
  color: #7a837f;
  font-size: 12px;
  font-weight: 500;
}

.page-shell .note-grid-main .user span {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: #2b211a;
  color: #fff;
  font-family: var(--font-latin);
}

.page-shell .note-grid-main .note-tags span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #b8643f;
  font-size: 12px;
  font-weight: 500;
}

.page-shell .note-grid-main .note-tags span + span::before {
  content: "/";
  margin-right: 4px;
  color: #9da4a1;
}

.page-shell .note-grid-main .note-state {
  top: 8px;
  right: 8px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.9);
  color: #2b211a;
  font-size: 12px;
}

.page-shell .note-grid-main .note-state::before {
  display: none;
}

.page-shell .note-grid-main .note-more {
  color: #2b211a;
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-shell .note-grid-main .note-card footer {
  margin-top: 10px;
  color: #89918e;
  font-size: 12px;
}

@media (max-width: 1023px) {
  .page-shell .area-strip {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 42px;
  }

  .page-shell .note-grid-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-shell .note-grid-main .note-card,
  .page-shell .note-grid-main .note-card:nth-child(1),
  .page-shell .note-grid-main .note-card:nth-child(2),
  .page-shell .note-grid-main .note-card:nth-child(3),
  .page-shell .note-grid-main .note-card:nth-child(n + 4) {
    grid-column: span 1;
    grid-row: auto;
    display: block;
    padding-right: 0;
    border-right: 0;
  }

  .page-shell .note-grid-main .note-card:nth-child(1) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .page-shell .area-strip {
    margin-bottom: 34px;
    padding: 14px 0 16px;
  }

  .page-shell .note-hub-head {
    display: grid;
    align-items: start;
  }

  .page-shell .note-hub-head h2 {
    font-size: 34px;
  }

  .page-shell .note-grid-main {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .page-shell .note-grid-main .note-card:nth-child(1) {
    grid-column: span 1;
  }
}

/* Readable metadata sizing on field-note pages. */
.detail-page .detail-kicker {
  color: #9a4f30;
  font-size: 12px;
}

.detail-page .detail-tags span {
  color: #4f5c56;
  font-size: 12px;
  line-height: 1.5;
}

.detail-page .detail-main > .panel .section-head h2::before,
.detail-page .detail-side h2::before {
  font-size: 12px;
}

.detail-page .detail-info dt {
  color: #5d6964;
  font-size: 12px;
  line-height: 1.5;
}

.detail-page .detail-info dd {
  font-size: 13px;
}

.detail-page .detail-comments b,
.detail-page .detail-comments small,
.detail-page .detail-comments em {
  font-size: 12px;
}

.detail-page .login-user-note,
.detail-page .map-detail-panel p {
  font-size: 12px;
  font-weight: 500;
}

/* Readable type scale across the editorial home page. */
.page-shell .tagline {
  font-size: 13px;
}

.page-shell .top-nav a {
  font-size: 13px;
}

.page-shell .auth-mini,
.page-shell .auth-mini a,
.page-shell .auth-mini button {
  font-size: 12px;
}

.page-shell .editorial-hero .hero-kicker {
  font-size: 12px;
}

.page-shell .editorial-hero .hero-intro {
  font-size: 16px;
}

.page-shell .editorial-hero .button {
  font-size: 13px;
}

.page-shell .hero-edition {
  font-size: 12px;
}

.page-shell .strip-title span,
.page-shell .section-kicker {
  font-size: 12px;
}

.page-shell .strip-title b {
  font-size: 13px;
}

.page-shell .area-pill,
.page-shell .teal,
.page-shell .green,
.page-shell .coral-pill,
.page-shell .mango-pill,
.page-shell .all-area,
.page-shell .other-area {
  font-size: 15px;
}

.page-shell .area-pill small {
  font-size: 12px;
}

.page-shell .note-hub .section-links a,
.page-shell .note-filters a,
.page-shell .note-filters .active {
  font-size: 12px;
}

.page-shell .note-grid-main .user,
.page-shell .note-grid-main .note-state,
.page-shell .note-grid-main .note-tags span,
.page-shell .note-grid-main .note-more,
.page-shell .note-grid-main .note-card footer {
  font-size: 12px;
}

.page-shell .dashboard-grid > .panel:not(.note-hub) .section-head h2::before,
.page-shell .question-panel .section-head h2::before,
.page-shell .map-panel .section-head h2::before,
.page-shell .plan-panel .section-head h2::before {
  font-size: 12px;
}

.page-shell .dashboard-grid > .panel:not(.note-hub) .section-head p {
  font-size: 14px;
}

.page-shell .dashboard-grid > .panel:not(.note-hub) .section-head > a,
.page-shell .map-panel .button {
  font-size: 12px;
}

.page-shell .question-list p {
  font-size: 13px;
}

.page-shell .question-list footer,
.page-shell .plan-grid article span {
  font-size: 12px;
}

.page-shell .map-legend span,
.page-shell .tags a {
  font-size: 12px;
}

@media (max-width: 767px) {
  .page-shell .editorial-hero .hero-intro {
    font-size: 14px;
  }

  .page-shell .area-pill,
  .page-shell .teal,
  .page-shell .green,
  .page-shell .coral-pill,
  .page-shell .mango-pill,
  .page-shell .all-area,
  .page-shell .other-area {
    font-size: 14px;
  }
}

/* Editorial treatment for the remaining home sections. */
.page-shell .dashboard-grid {
  gap: 64px 28px;
}

.page-shell .dashboard-grid > .panel:not(.note-hub) {
  padding: 28px 0 0;
  border: 0;
  border-top: 1px solid #2b211a;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-shell .dashboard-grid > .panel:not(.note-hub) .section-head {
  align-items: flex-end;
  margin-bottom: 26px;
}

.page-shell .dashboard-grid > .panel:not(.note-hub) .section-head h2,
.page-shell .guide-panel h2 {
  color: #2b211a;
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.page-shell .dashboard-grid > .panel:not(.note-hub) .section-head h2::before,
.page-shell .guide-panel h2::before {
  display: block;
  margin-bottom: 9px;
  color: #b8643f;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.page-shell .question-panel .section-head h2::before {
  content: "TRAVEL DESK / QUESTIONS";
}

.page-shell .map-panel .section-head h2::before {
  content: "BALI NOTE / MAP";
}

.page-shell .plan-panel .section-head h2::before {
  content: "TRIP IDEAS / ITINERARIES";
}

.page-shell .guide-panel h2::before {
  content: "THE BALI HANDBOOK";
}

.page-shell .dashboard-grid > .panel:not(.note-hub) .section-head h2 span {
  display: none;
}

.page-shell .dashboard-grid > .panel:not(.note-hub) .section-head p {
  max-width: 520px;
  margin-top: 12px;
  color: #68726e;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
}

.page-shell .dashboard-grid > .panel:not(.note-hub) .section-head > a {
  color: #2b211a;
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-shell .question-list {
  gap: 0;
  border-top: 1px solid rgba(58, 42, 31, 0.18);
}

.page-shell .question-list article {
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid rgba(58, 42, 31, 0.18);
  border-radius: 0;
  background: transparent;
}

.page-shell .question-list b {
  color: #2b211a;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
}

.page-shell .question-list p {
  color: #68726e;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.75;
}

.page-shell .question-list footer {
  color: #8a928f;
  font-size: 12px;
  font-weight: 500;
}

.page-shell .question-list strong {
  color: #b8643f;
  font-weight: 500;
}

.page-shell .map-card {
  height: 330px;
  border: 1px solid rgba(58, 42, 31, 0.18);
  border-radius: 0;
  background: #e8efeb;
}

.page-shell .map-legend {
  left: 16px;
  right: auto;
  bottom: 14px;
  justify-content: flex-start;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.9);
}

.page-shell .map-panel .button {
  margin: 14px 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2b211a;
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-shell .plan-panel {
  grid-column: span 4;
}

.page-shell .plan-grid {
  gap: 22px;
}

.page-shell .plan-grid article {
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid rgba(58, 42, 31, 0.2);
  border-radius: 0;
  background: transparent;
}

.page-shell .plan-grid article .photo {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

.page-shell .plan-grid article span {
  display: block;
  margin: 12px 0 6px;
  color: #b8643f;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.page-shell .plan-grid article b {
  color: #2b211a;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
}

.page-shell .guide-panel {
  grid-column: span 4;
  padding: 34px 36px 38px !important;
  border: 0 !important;
  background: #1f3029 !important;
  color: #fff;
}

.page-shell .guide-panel h2 {
  margin-bottom: 28px;
  color: #fff;
}

.page-shell .guide-panel h2::before {
  color: #c98262;
}

.page-shell .guide-icons {
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.page-shell .guide-icons a {
  justify-content: start;
  min-height: 88px;
  padding: 16px 18px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
}

.page-shell .guide-icons a:nth-child(3n) {
  border-right: 0;
}

.page-shell .guide-icons img {
  filter: brightness(0) invert(1);
  opacity: 0.84;
}

.page-shell .hashtag-band {
  margin-top: 64px;
  padding: 28px 0 8px;
  border-top: 1px solid #2b211a;
  border-radius: 0;
  background: transparent;
}

.page-shell .hashtag-band h2 {
  color: #2b211a;
  font-family: var(--font-latin);
  font-size: 22px;
  font-weight: 400;
}

.page-shell .tags a {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #68726e;
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-shell .photo-row {
  margin-top: 42px;
  gap: 2px;
}

.page-shell .photo-row .photo {
  border-radius: 0;
}

@media (max-width: 1023px) {
  .page-shell .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 24px;
  }

  .page-shell .note-hub,
  .page-shell .plan-panel,
  .page-shell .guide-panel {
    grid-column: 1 / -1;
  }

  .page-shell .question-panel,
  .page-shell .map-panel {
    grid-column: span 1;
  }
}

@media (max-width: 767px) {
  .page-shell .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .page-shell .dashboard-grid > .panel,
  .page-shell .question-panel,
  .page-shell .map-panel,
  .page-shell .plan-panel,
  .page-shell .guide-panel {
    grid-column: 1;
  }

  .page-shell .map-card {
    height: 280px;
  }

  .page-shell .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-shell .guide-panel {
    padding: 28px 20px 24px !important;
  }

  .page-shell .guide-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-shell .guide-icons a,
  .page-shell .guide-icons a:nth-child(3n) {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
  }

  .page-shell .guide-icons a:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 480px) {
  .page-shell .plan-grid {
    grid-template-columns: 1fr;
  }
}

/* Editorial field-note layout. */
.detail-page {
  background: #f6f5f0;
  color: #2b211a;
}

.detail-page main {
  gap: 42px;
}

.detail-page .detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  padding: 54px 0 30px;
  border: 0;
  border-top: 1px solid #2b211a;
  border-bottom: 1px solid #2b211a;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.detail-page .detail-kicker {
  margin: 0 0 18px;
  color: #b8643f;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.detail-page .detail-hero h1 {
  max-width: 19em;
  color: #2b211a;
  font-family: var(--font-heading);
  font-size: clamp(38px, 5.5vw, 76px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.03em;
}

.detail-page .detail-tags {
  margin-top: 22px;
  gap: 0;
}

.detail-page .detail-tags span {
  padding: 0 12px;
  border-right: 1px solid rgba(58, 42, 31, 0.28);
  border-radius: 0;
  background: transparent;
  color: #68726e;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
}

.detail-page .detail-tags span:first-child {
  padding-left: 0;
}

.detail-page .detail-tags span:last-child {
  border-right: 0;
}

.detail-page .favorite-button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #b8643f;
  border-radius: 0;
  background: transparent;
  color: #b8643f;
  font-size: 14px;
  box-shadow: none;
}

.detail-page .detail-actions .button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(58, 42, 31, 0.38);
  border-radius: 0;
  background: transparent;
  color: #2b211a;
  font-size: 12px;
  box-shadow: none;
}

.detail-page .detail-layout {
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 56px;
}

.detail-page .detail-main,
.detail-page .detail-side {
  gap: 42px;
}

.detail-page .detail-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  overflow: visible;
  padding: 0;
}

.detail-page .detail-photo-item {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #e7e7e2;
  box-shadow: none;
}

.detail-page .detail-photo-item:first-child {
  grid-column: 1 / -1;
}

.detail-page .detail-photo-item img,
.detail-page .detail-photo-item .photo {
  aspect-ratio: 4 / 3;
}

.detail-page .detail-photo-item:first-child img,
.detail-page .detail-photo-item:first-child .photo {
  aspect-ratio: 16 / 9;
}

.detail-page .detail-main > .panel,
.detail-page .detail-side > .panel {
  padding: 26px 0 0;
  border: 0;
  border-top: 1px solid #2b211a;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.detail-page .detail-main > .panel .section-head {
  margin-bottom: 24px;
}

.detail-page .detail-main > .panel .section-head h2,
.detail-page .detail-side h2 {
  color: #2b211a;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.detail-page .detail-main > .panel .section-head h2 span {
  display: none;
}

.detail-page .detail-main > .panel .section-head h2::before,
.detail-page .detail-side h2::before {
  display: block;
  margin-bottom: 8px;
  color: #b8643f;
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.detail-page .detail-main > .panel .section-head h2::before {
  content: "READER NOTES";
}

.detail-page .detail-side > .panel:first-child h2::before {
  content: "PLACE INFORMATION";
}

.detail-page .map-detail-panel h2::before {
  content: "LOCATION";
}

.detail-page .detail-main > .panel .section-head p {
  color: #68726e;
  font-size: 12px;
  font-weight: 400;
}

.detail-page .detail-comments {
  gap: 0;
  border-top: 1px solid rgba(58, 42, 31, 0.18);
}

.detail-page .detail-comments article {
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid rgba(58, 42, 31, 0.18);
  border-radius: 0;
  background: transparent;
}

.detail-page .detail-comments b,
.detail-page .detail-comments small {
  color: #68726e;
  font-size: 12px;
  font-weight: 500;
}

.detail-page .detail-comments em {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #b8643f;
  font-size: 12px;
  font-weight: 500;
}

.detail-page .detail-comments p {
  color: #2b211a;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.9;
}

.detail-page .comment-form {
  margin-top: 34px;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid rgba(58, 42, 31, 0.24);
  border-radius: 0;
  background: transparent;
}

.detail-page .comment-form h3,
.detail-page .login-required-box h3 {
  color: #2b211a;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.detail-page .comment-choice label {
  border: 1px solid rgba(58, 42, 31, 0.24);
  border-radius: 0;
  background: transparent;
  color: #52605a;
  font-size: 12px;
  font-weight: 500;
}

.detail-page .comment-fields textarea {
  border: 1px solid rgba(58, 42, 31, 0.28);
  border-radius: 0;
  background: transparent;
  font-weight: 400;
}

.detail-page .comment-form .button,
.detail-page .login-required-box .button,
.detail-page .map-detail-panel .button {
  width: fit-content;
  min-height: 42px;
  border: 1px solid #2b211a;
  border-radius: 0;
  background: transparent;
  color: #2b211a;
  font-size: 12px;
  box-shadow: none;
}

.detail-page .detail-info {
  gap: 0;
  border-top: 1px solid rgba(58, 42, 31, 0.18);
}

.detail-page .detail-info div {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(58, 42, 31, 0.18);
}

.detail-page .detail-info dt {
  color: #8a928f;
  font-size: 12px;
  font-weight: 500;
}

.detail-page .detail-info dd {
  color: #2b211a;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
}

.detail-page .mini-map {
  min-height: 230px;
  border: 0;
  border-radius: 0;
}

.detail-page .mini-map span {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: #b8643f;
  box-shadow: none;
}

@media (max-width: 900px) {
  .detail-page .detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-page .detail-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

@media (max-width: 700px) {
  .detail-page .detail-hero {
    grid-template-columns: 1fr;
    padding: 36px 0 24px;
  }

  .detail-page .detail-hero h1 {
    font-size: clamp(34px, 11vw, 52px);
  }

  .detail-page .detail-actions {
    justify-content: flex-start;
  }

  .detail-page .detail-layout {
    gap: 42px;
  }

  .detail-page .detail-gallery {
    grid-template-columns: 1fr;
  }

  .detail-page .detail-photo-item:first-child {
    grid-column: 1;
  }

  .detail-page .detail-photo-item img,
  .detail-page .detail-photo-item .photo,
  .detail-page .detail-photo-item:first-child img,
  .detail-page .detail-photo-item:first-child .photo {
    aspect-ratio: 4 / 3;
  }

  .detail-page .detail-side {
    grid-template-columns: 1fr;
  }
}

/* Compact field-note refinement. */
.detail-page main {
  gap: 28px;
}

.detail-page .detail-hero {
  gap: 24px;
  padding: 30px 0 22px;
}

.detail-page .detail-kicker {
  margin-bottom: 11px;
  font-size: 12px;
}

.detail-page .detail-hero h1 {
  max-width: 26em;
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.1vw, 44px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.03em;
}

.detail-page .detail-tags {
  margin-top: 14px;
}

.detail-page .detail-layout {
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 38px;
}

.detail-page .detail-main,
.detail-page .detail-side {
  gap: 30px;
}

.detail-page .detail-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  max-width: 920px;
}

.detail-page .detail-photo-item:first-child {
  grid-column: auto;
}

.detail-page .detail-photo-item img,
.detail-page .detail-photo-item .photo,
.detail-page .detail-photo-item:first-child img,
.detail-page .detail-photo-item:first-child .photo {
  aspect-ratio: 4 / 3;
}

.detail-page .detail-main > .panel,
.detail-page .detail-side > .panel {
  padding-top: 20px;
}

.detail-page .detail-main > .panel .section-head h2,
.detail-page .detail-side h2 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.detail-page .detail-comments p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
}

.detail-page .detail-info dd {
  font-family: var(--font-body);
  font-size: 12px;
}

.detail-page .mini-map {
  min-height: 180px;
}

@media (max-width: 1000px) {
  .detail-page .detail-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .detail-page .detail-hero {
    padding: 24px 0 18px;
  }

  .detail-page .detail-hero h1 {
    font-size: clamp(24px, 7vw, 34px);
  }

  .detail-page .detail-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .detail-page .detail-gallery {
    grid-template-columns: 1fr;
  }
}

/* Constrained editorial canvas. */
.page-shell {
  width: 100%;
  max-width: 1240px;
  padding: 24px 32px 48px;
}

.detail-page .page-shell {
  max-width: 1160px;
}

@media (max-width: 900px) {
  .page-shell,
  .detail-page .page-shell {
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (max-width: 600px) {
  .page-shell,
  .detail-page .page-shell {
    padding: 14px 14px 32px;
  }
}

/* Final home typography alignment; keep this block last. */
.page-shell .note-grid-main .note-card p,
.page-shell .question-panel .section-head p,
.page-shell .map-panel .section-head p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
}

.page-shell .note-grid-main .note-card p {
  font-size: 13px;
}

.page-shell .question-panel .section-head p,
.page-shell .map-panel .section-head p {
  color: #4f5c56;
  font-size: 16px;
}

/* Refined Journal heading scale. */
.page-shell .note-hub-head h2 {
  font-size: clamp(28px, 3vw, 40px);
}

.page-shell .note-grid-main .note-card:nth-child(1) h3 {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.4;
}

.page-shell .note-grid-main .note-card:nth-child(2) h3,
.page-shell .note-grid-main .note-card:nth-child(3) h3 {
  font-size: 18px;
}

.page-shell .note-grid-main .note-card:nth-child(n + 4) h3 {
  font-size: 17px;
}

/* =========================================================
   FIX: 詳細ページのモバイル1カラム対応(2026-07-11 追加)
   ========================================================= */
@media (max-width: 767px) {
  .detail-page .detail-layout {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .detail-page .detail-main,
  .detail-page .detail-side {
    gap: 30px !important;
  }

  .detail-page .detail-gallery {
    gap: 4px !important;
  }

  .detail-page .detail-gallery .detail-photo-item:first-child {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   FIX: トップページ「みんなのノート」の写真サイズ調整(2026-07-11 追加)
   ・写真の縦横比を2:3(縦長)→4:3(ブログ写真に合う横長)へ
   ・スマホではマガジンレイアウトをやめ、1枚目のみ全幅+2列カードに
   ========================================================= */
.note-card .photo {
  aspect-ratio: 4 / 3;
}

@media (max-width: 767px) {
  .note-grid-main {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .note-grid-main .note-card {
    grid-column: auto !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    align-content: start !important;
    padding: 10px !important;
  }

  /* マガジン用のエリア割り当てを全解除 */
  .note-grid-main .note-card .note-photo-link,
  .note-grid-main .note-card .user,
  .note-grid-main .note-card .note-tags,
  .note-grid-main .note-card h3,
  .note-grid-main .note-card p,
  .note-grid-main .note-card footer {
    grid-area: auto !important;
  }

  /* 1枚目だけ横幅いっぱいの特集カード */
  .note-grid-main .note-card:nth-child(1) {
    grid-column: 1 / -1 !important;
  }

  .note-grid-main .note-card .photo {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 10px !important;
  }

  .note-grid-main .note-card:nth-child(1) .photo {
    aspect-ratio: 16 / 9 !important;
  }

  .note-grid-main .note-card h3 {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin: 8px 0 4px !important;
  }

  .note-grid-main .note-card:nth-child(1) h3 {
    font-size: 19px !important;
  }

  .note-grid-main .note-card p {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }
}

/* =========================================================
   FIX: 読みやすさ・モバイル入力の仕上げ(2026-07-11 追加)
   ========================================================= */

/* ヒーローの紹介文: モバイルで12pxは小さすぎるため引き上げ */
@media (max-width: 767px) {
  .editorial-hero .hero-intro {
    font-size: 14px;
    line-height: 1.8;
  }

  /* iPhoneで入力欄タップ時に画面が自動ズームされるのを防ぐ
     (16px未満の入力欄で発動するiOSの仕様対策) */
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .search-box input,
  .comment-form textarea {
    font-size: 16px;
  }
}

/* 本文系テキストの下限を確保(全幅共通) */
.detail-comments p {
  font-size: 14px;
  line-height: 1.85;
}

.detail-info dd {
  font-size: 14px;
}

/* hidden属性を確実に効かせる(display指定より優先) */
[hidden] {
  display: none !important;
}

/* 未承認ノートの詳細ページに出す案内 */
.review-banner {
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid rgba(201, 150, 63, 0.45);
  border-radius: 8px;
  background: rgba(201, 150, 63, 0.12);
  color: #7a5200;
  font-size: 14px;
  line-height: 1.7;
}


/* =========================================================
   HERO A: 目次型 (2026-10-13)
   写真タイル + ジャンルキャプション / タイトルは生成りパネル
   ========================================================= */
.page-shell .editorial-hero.hero-index {
  display: grid;
  grid-template-columns: minmax(300px, 1.1fr) 3fr;
  gap: 6px;
  min-height: 0;
  background: none;
  color: var(--text);
  overflow: visible;
}

.page-shell .editorial-hero.hero-index .hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  align-self: stretch;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 40px 28px 30px;
  background: #fffdf6;
  border: 1px solid var(--line);
}

.page-shell .editorial-hero.hero-index .hero-kicker {
  margin: 0 0 22px;
  color: var(--coral);
}

.page-shell .editorial-hero.hero-index h1 {
  color: #2b211a;
  font-size: clamp(56px, 6vw, 96px);
}

.page-shell .editorial-hero.hero-index .hero-japanese {
  margin: 24px 0 12px;
  color: #2b211a;
  font-size: clamp(18px, 1.7vw, 24px);
}

.page-shell .editorial-hero.hero-index .hero-intro {
  max-width: none;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 14px;
}

.page-shell .editorial-hero.hero-index .button {
  border-color: #2b211a;
  color: #2b211a;
}

.page-shell .editorial-hero.hero-index .button:hover {
  background: #2b211a;
  color: #fff;
}

.page-shell .editorial-hero.hero-index .hero-edition {
  position: static;
  margin: auto 0 0;
  padding-top: 28px;
  color: var(--muted);
  writing-mode: horizontal-tb;
}

.page-shell .hero-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 14.5vw, 205px);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-shell .hero-tiles a {
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
}

.page-shell .hero-tiles img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.page-shell .hero-tiles a:hover img {
  transform: scale(1.05);
}

.page-shell .hero-tiles a::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

.page-shell .tile-cap {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  color: #fff;
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

@media (max-width: 1023px) {
  .page-shell .editorial-hero.hero-index {
    grid-template-columns: 1fr;
  }

  .page-shell .editorial-hero.hero-index .hero-copy {
    width: auto;
    padding: 32px 28px;
  }

  .page-shell .hero-tiles {
    grid-auto-rows: 22vw;
  }
}

@media (max-width: 767px) {
  .page-shell .editorial-hero.hero-index {
    background: none;
  }

  .page-shell .editorial-hero.hero-index .hero-copy {
    width: auto;
    padding: 28px 22px;
  }

  .page-shell .editorial-hero.hero-index h1 {
    font-size: clamp(52px, 16vw, 72px);
  }

  .page-shell .editorial-hero.hero-index .hero-edition {
    display: none;
  }

  .page-shell .hero-tiles {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 30vw;
    gap: 4px;
  }

  .page-shell .tile-cap {
    left: 8px;
    bottom: 7px;
    font-size: 12px;
    letter-spacing: 0.06em;
  }
}

/* HERO A: こげ茶の1枚パネル (2026-10-13) */
.page-shell .editorial-hero.hero-index {
  --hero-brown: #3a2a1f;
  --hero-cream: #f8efe2;
  padding: 8px;
  gap: 8px;
  background: var(--hero-brown);
  border-radius: 2px;
}

.page-shell .editorial-hero.hero-index .hero-copy {
  padding: 40px 30px 30px 34px;
  background: transparent;
  border: 0;
}

.page-shell .editorial-hero.hero-index .hero-kicker {
  color: #e2a27a;
}

.page-shell .editorial-hero.hero-index h1,
.page-shell .editorial-hero.hero-index .hero-japanese {
  color: var(--hero-cream);
}

.page-shell .editorial-hero.hero-index .hero-intro {
  color: rgba(248, 239, 226, 0.72);
}

.page-shell .editorial-hero.hero-index .button {
  border-color: rgba(248, 239, 226, 0.75);
  background: transparent;
  color: var(--hero-cream);
}

.page-shell .editorial-hero.hero-index .button:hover {
  background: var(--hero-cream);
  color: var(--hero-brown);
}

.page-shell .editorial-hero.hero-index .hero-edition {
  color: rgba(248, 239, 226, 0.55);
}

.page-shell .editorial-hero.hero-index .hero-tiles {
  gap: 8px;
}

@media (max-width: 767px) {
  .page-shell .editorial-hero.hero-index {
    padding: 5px;
    gap: 5px;
    background: var(--hero-brown);
  }

  .page-shell .editorial-hero.hero-index .hero-copy {
    padding: 28px 20px 24px;
  }

  .page-shell .editorial-hero.hero-index .hero-tiles {
    gap: 5px;
  }
}

/* 写真の間の線をクリーム色に */
.page-shell .editorial-hero.hero-index .hero-tiles {
  background: var(--hero-cream);
  gap: 4px;
}

@media (max-width: 767px) {
  .page-shell .editorial-hero.hero-index .hero-tiles {
    gap: 3px;
  }
}

/* 外側のこげ茶の縁を太く */
.page-shell .editorial-hero.hero-index {
  padding: 16px;
}

@media (max-width: 767px) {
  .page-shell .editorial-hero.hero-index {
    padding: 10px;
  }
}

.page-shell .editorial-hero.hero-index .hero-copy {
  padding: 40px 20px 30px 30px;
}

.page-shell .editorial-hero.hero-index .hero-japanese {
  font-size: clamp(18px, 1.55vw, 22px);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .page-shell .editorial-hero.hero-index .hero-copy {
    padding: 28px 20px 24px;
  }
}

/* エリア帯をヒーローの額縁につなげる (2026-10-13) */
.page-shell .area-strip {
  margin-top: 0;
  padding: 18px 28px 20px;
  background: #f8efe2;
  border: 0;
  border-bottom: 3px solid #3a2a1f;
}

.page-shell .strip-title {
  color: #3a2a1f;
}

.page-shell .strip-title span {
  color: #b8643f;
}

.page-shell .area-pill,
.page-shell .area-strip .teal,
.page-shell .area-strip .green,
.page-shell .area-strip .coral-pill,
.page-shell .area-strip .mango-pill,
.page-shell .area-strip .all-area,
.page-shell .area-strip .other-area {
  color: #3a2a1f;
  border-right-color: rgba(58, 42, 31, 0.22);
}

.page-shell .area-pill:first-child,
.page-shell .area-pill:hover {
  color: #b8643f;
}

.page-shell .area-pill small {
  color: #8a7663;
}

@media (max-width: 767px) {
  .page-shell .area-strip {
    padding: 16px 18px 18px;
  }
}

.page-shell .area-strip {
  box-shadow: none;
}

@media (max-width: 767px) {
  .page-shell .area-scroll .area-pill:nth-child(even) {
    border-right: 0;
  }
}

/* 背景を白っぽく、エリア帯を砂色に (2026-10-13) */
body {
  background: #fdfbf7;
}

.page-shell .area-strip {
  background: #eee1cd;
}

.page-shell .area-pill small {
  color: #7a6655;
}

/* ボタン：エリア用 .teal の打ち消しから復旧（こげ茶の塗りボタン） */
.page-shell .button.teal:not(.small) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  border: 1px solid #3a2a1f;
  border-radius: 2px;
  background: #3a2a1f;
  color: #f8efe2;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.page-shell .button.teal:not(.small):hover {
  background: #b8643f;
  border-color: #b8643f;
}

/* =========================================================
   みんなのノート：雑誌風レイアウト (2026-10-13)
   1枚目=大特集 / 2・3枚目=右の縦並び / 4枚目以降=3列
   ========================================================= */
/* ラベル・アイコン・メタ情報（全幅共通） */
.page-shell .note-grid-main .note-state {
  position: static;
  padding: 0;
  background: none;
  color: #8a7663;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.page-shell .note-grid-main .user span {
  display: none;
}

.page-shell .note-grid-main .user {
  margin: 0;
  color: #8a7663;
  opacity: 1;
}

.page-shell .note-grid-main .user::before {
  content: "by ";
}

@media (min-width: 768px) {
  .page-shell .note-grid-main {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 44px 32px;
  }

  .page-shell .note-grid-main .note-card,
  .page-shell .note-grid-main .note-card:nth-child(1),
  .page-shell .note-grid-main .note-card:nth-child(2),
  .page-shell .note-grid-main .note-card:nth-child(3),
  .page-shell .note-grid-main .note-card:nth-child(n + 4) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: none;
    grid-template-areas:
      "photo photo"
      "tags state"
      "title title"
      "text text"
      "more more"
      "user footer";
    align-content: start;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    position: relative;
  }

  .page-shell .note-grid-main .note-card > .note-photo-link { grid-area: photo; display: block; margin-bottom: 14px; }
  .page-shell .note-grid-main .note-card > .note-tags { grid-area: tags; margin: 0; }
  .page-shell .note-grid-main .note-card > .note-state { grid-area: state; align-self: center; }
  .page-shell .note-grid-main .note-card > h3 { grid-area: title; margin: 8px 0 6px; }
  .page-shell .note-grid-main .note-card > p { grid-area: text; margin: 0; }
  .page-shell .note-grid-main .note-card > .note-more { grid-area: more; justify-self: start; margin-top: 10px; }
  .page-shell .note-grid-main .note-card > .user { grid-area: user; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(58, 42, 31, 0.14); }
  .page-shell .note-grid-main .note-card > footer { grid-area: footer; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(58, 42, 31, 0.14); text-align: right; }

  .page-shell .note-grid-main .note-card .photo,
  .page-shell .note-grid-main .note-card:nth-child(n) .photo {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    transition: transform 0.6s ease;
  }

  .page-shell .note-grid-main .note-photo-link {
    overflow: hidden;
  }

  .page-shell .note-grid-main .note-photo-link:hover .photo {
    transform: scale(1.04);
  }

  .page-shell .note-grid-main .note-card > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* 1枚目：大特集 */
  .page-shell .note-grid-main .note-card:nth-child(1) {
    grid-column: 1 / 5;
    grid-row: 1 / 3;
  }

  .page-shell .note-grid-main .note-card:nth-child(1) .photo {
    aspect-ratio: 3 / 2;
  }

  .page-shell .note-grid-main .note-card:nth-child(1) > h3 {
    margin: 12px 0 10px;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.4;
  }

  .page-shell .note-grid-main .note-card:nth-child(1) > p {
    font-size: 15px;
    -webkit-line-clamp: 3;
  }

  /* 2・3枚目：右の縦並び */
  .page-shell .note-grid-main .note-card:nth-child(2),
  .page-shell .note-grid-main .note-card:nth-child(3) {
    grid-column: 5 / 7;
  }

  .page-shell .note-grid-main .note-card:nth-child(2) .photo,
  .page-shell .note-grid-main .note-card:nth-child(3) .photo {
    aspect-ratio: 16 / 10;
  }

  .page-shell .note-grid-main .note-card:nth-child(2) > h3,
  .page-shell .note-grid-main .note-card:nth-child(3) > h3,
  .page-shell .note-grid-main .note-card:nth-child(n + 4) > h3 {
    font-size: 18px;
    line-height: 1.5;
  }

  .page-shell .note-grid-main .note-card:nth-child(2) > p,
  .page-shell .note-grid-main .note-card:nth-child(3) > p {
    display: none;
  }

  /* 4枚目以降：3列 */
  .page-shell .note-grid-main .note-card:nth-child(n + 4) {
    grid-column: span 2;
    grid-row: auto;
  }

  .page-shell .note-grid-main .note-card:nth-child(4) {
    padding-top: 40px;
    border-top: 1px solid rgba(58, 42, 31, 0.25);
  }

  .page-shell .note-grid-main .note-card:nth-child(5),
  .page-shell .note-grid-main .note-card:nth-child(6) {
    padding-top: 40px;
    border-top: 1px solid rgba(58, 42, 31, 0.25);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .page-shell .note-grid-main .note-card:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .page-shell .note-grid-main .note-card:nth-child(2),
  .page-shell .note-grid-main .note-card:nth-child(3),
  .page-shell .note-grid-main .note-card:nth-child(n + 4) {
    grid-column: span 3;
  }

  .page-shell .note-grid-main .note-card:nth-child(n + 4) {
    padding-top: 0;
    border-top: 0;
  }
}

@media (min-width: 768px) {
  .page-shell .note-grid-main .note-card,
  .page-shell .note-grid-main .note-card:nth-child(n) {
    column-gap: 0;
  }

  .page-shell .note-grid-main .note-card > .note-state {
    justify-self: end;
    margin: 0;
  }

  .page-shell .note-grid-main .note-card > .user {
    display: block;
  }

  .page-shell .note-grid-main .note-card > footer {
    padding-left: 12px;
  }
}

.page-shell .note-grid-main .note-state {
  background: none !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .page-shell .note-grid-main .note-card > .note-photo-link { order: 1; margin-bottom: 8px; }
  .page-shell .note-grid-main .note-card > .note-tags { order: 2; }
  .page-shell .note-grid-main .note-card > h3 { order: 3; }
  .page-shell .note-grid-main .note-card > p { order: 4; }
  .page-shell .note-grid-main .note-card > .note-more { order: 5; }
  .page-shell .note-grid-main .note-card > .user { order: 6; margin-top: 6px; }
  .page-shell .note-grid-main .note-card > footer { order: 7; }
  .page-shell .note-grid-main .note-card > .note-state { display: none !important; }
}

@media (max-width: 767px) {
  .page-shell .note-grid-main .note-card .photo { border-radius: 0 !important; }
  .page-shell .note-grid-main .note-card > .user { display: block; }
}

/* =========================================================
   フッター：こげ茶の帯 (2026-10-13)
   ========================================================= */
.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px 48px;
  margin-top: 80px;
  padding: 48px 44px 28px;
  background: #3a2a1f;
  color: #f8efe2;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.footer-logo {
  font-family: var(--font-latin);
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.footer-by {
  margin: 6px 0 0;
  color: #e2a27a;
  font-family: var(--font-latin);
  font-size: 13px;
  letter-spacing: 0.14em;
}

.footer-tagline {
  margin: 18px 0 0;
  color: rgba(248, 239, 226, 0.72);
  font-size: 14px;
  line-height: 1.8;
}

.footer-nav {
  display: flex;
  gap: 56px;
}

.footer-nav div {
  display: grid;
  align-content: start;
  gap: 10px;
}

.footer-head {
  margin: 0 0 4px;
  color: #e2a27a;
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.footer-nav a {
  color: rgba(248, 239, 226, 0.86);
  font-size: 14px;
}

.footer-nav a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-copy {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(248, 239, 226, 0.18);
  color: rgba(248, 239, 226, 0.5);
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  .site-footer {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 56px;
    padding: 36px 22px 22px;
  }

  .footer-logo {
    font-size: 32px;
  }

  .footer-nav {
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .page-shell .hashtag-band {
    padding: 22px 0 0;
    border: 0;
    border-top: 1px solid #2b211a;
    background: transparent;
    box-shadow: none;
  }
}

/* 特集カードの写真を小さめに・右列とのバランス調整 (2026-10-18) */
@media (min-width: 1024px) {
  .page-shell .note-grid-main .note-card:nth-child(1) .photo {
    aspect-ratio: 16 / 10;
    max-height: 440px;
  }

  .page-shell .note-grid-main .note-card:nth-child(2) .photo,
  .page-shell .note-grid-main .note-card:nth-child(3) .photo {
    aspect-ratio: 16 / 9;
    max-height: 210px;
  }

  .page-shell .note-grid-main .note-card:nth-child(2) > .note-more,
  .page-shell .note-grid-main .note-card:nth-child(3) > .note-more {
    display: none;
  }
}


/* =========================================================
   LeaLea風リニューアル (2026-10-18)
   白・ゴシック・紺/淡黄。旧デザインは _backup_20261018/ に保存
   ========================================================= */
:root {
  --font-latin: "Poppins", "Noto Sans JP", sans-serif;
  --font-heading: "Noto Sans JP", "Yu Gothic", sans-serif;
  --navy: #1d3557; --navy-dark: #132640; --sun: #fbf5d9; --ink: #222; --sub: #666; --gray: #f4f4f2;
}
html, body { overflow-x: clip; }
body { background: #fff !important; color: var(--ink); }
.page-shell { --inner: max(24px, calc(50vw - 588px)); overflow: visible !important; padding-bottom: 0 !important; }
.page-shell main, .page-shell.home .dashboard-grid, .page-shell .note-hub { overflow: visible !important; }
.page-shell.home .editorial-hero.hero-index, .page-shell.home .area-strip, .page-shell .join-band, .page-shell .question-panel, .page-shell .theme-mosaic, .site-footer {
  width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}

/* ヘッダー：ロゴ中央 */
.page-shell .site-header { display: grid !important; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". brand auth" "nav nav nav"; align-items: center; row-gap: 14px; padding: 6px 0 14px !important; border-bottom: 0 !important; }
.page-shell .brand { grid-area: brand; text-align: center; }
.page-shell .brand-main { font-family: "Poppins", sans-serif !important; font-weight: 800 !important; font-size: 30px !important; letter-spacing: -0.01em !important; color: var(--ink) !important; }
.page-shell .brand-by { color: var(--navy) !important; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .1em; }
.page-shell .tagline { display: none !important; }
.page-shell .auth-mini { grid-area: auth; justify-self: end; }
.page-shell .auth-mini a, .page-shell .auth-mini button { border-radius: 999px !important; border-color: #ddd !important; color: var(--ink) !important; background: #fff !important; }
.page-shell .top-nav { grid-area: nav; justify-content: center !important; gap: 36px !important; padding-top: 12px; border-top: 1px solid #eee; }
.page-shell .top-nav a { font-family: "Poppins", sans-serif !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .06em !important; color: var(--ink) !important; }

/* 表紙：写真1枚＋中央ロゴ */
.page-shell.home .editorial-hero.hero-index { display: flex !important; align-items: center; justify-content: center; min-height: clamp(460px, 72vh, 680px) !important; padding: 0 !important; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35)), url("assets/hero/dsc04876.jpg") center 60% / cover !important; border-radius: 0 !important; }
.page-shell.home .editorial-hero.hero-index .hero-copy { align-items: center; text-align: center; background: none !important; border: 0 !important; padding: 24px !important; width: auto !important; }
.page-shell.home .editorial-hero.hero-index .hero-kicker { color: #fff !important; font-family: var(--font-heading) !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: .12em !important; margin-bottom: 10px !important; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.page-shell.home .editorial-hero.hero-index h1 { font-family: "Poppins", sans-serif !important; font-weight: 800 !important; font-size: clamp(64px, 10vw, 160px) !important; letter-spacing: -0.02em !important; line-height: 1 !important; color: #fff !important; text-shadow: 0 4px 24px rgba(0,0,0,.25); }
.page-shell.home .editorial-hero.hero-index h1 br { display: none; }
.page-shell.home .editorial-hero.hero-index .hero-japanese { font-family: var(--font-heading) !important; font-weight: 700 !important; color: #fff !important; font-size: clamp(18px, 1.8vw, 24px) !important; white-space: normal !important; margin: 18px 0 26px !important; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.page-shell.home .editorial-hero.hero-index .hero-japanese br, .page-shell.home .editorial-hero.hero-index .hero-intro, .page-shell.home .editorial-hero.hero-index .hero-edition { display: none !important; }
.page-shell.home .editorial-hero.hero-index .button { border-radius: 999px !important; background: #fff !important; color: var(--ink) !important; border: 0 !important; padding: 0 34px !important; min-height: 50px; font-weight: 700 !important; }

/* エリア */
.page-shell.home .area-strip { display: block !important; padding: 26px var(--inner) 30px !important; margin-bottom: 90px !important; background: #fff !important; border: 0 !important; border-bottom: 1px solid #eee !important; text-align: center; }
.page-shell.home .strip-title { display: block !important; margin-bottom: 14px; color: var(--ink) !important; }
.page-shell.home .strip-title span { display: block; color: var(--navy) !important; font-family: "Poppins", sans-serif !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: .14em !important; }
.page-shell.home .strip-title b { font-size: 13px !important; color: var(--sub); }
.page-shell.home .area-scroll { justify-content: center; flex-wrap: wrap !important; gap: 10px !important; }
.page-shell.home .area-pill, .page-shell.home .area-strip .teal, .page-shell.home .area-strip .green, .page-shell.home .area-strip .coral-pill, .page-shell.home .area-strip .mango-pill, .page-shell.home .area-strip .all-area, .page-shell.home .area-strip .other-area {
  padding: 9px 20px !important; border: 1px solid #ddd !important; border-radius: 999px !important; background: #fff !important; color: var(--ink) !important; font-family: "Poppins", sans-serif !important; font-weight: 600 !important; font-size: 14px !important; text-align: center !important;
}
.page-shell.home .area-pill:first-child { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; }
.page-shell.home .area-pill small { display: none !important; }

/* セクション見出し：中央・英字大 */
.page-shell.home .dashboard-grid { display: block; }
.page-shell.home .dashboard-grid > .panel { margin: 0 0 100px; }
.page-shell.home .section-head { display: block !important; text-align: center; border: 0 !important; padding: 0 !important; margin-bottom: 36px !important; }
.page-shell.home .section-kicker { margin: 0 !important; color: var(--ink) !important; font-family: "Poppins", sans-serif !important; font-weight: 800 !important; font-size: clamp(30px, 3vw, 42px) !important; letter-spacing: .02em !important; }
.page-shell.home .section-head h2 { margin: 6px 0 0 !important; font-family: var(--font-heading) !important; font-weight: 700 !important; font-size: 14px !important; color: var(--sub) !important; letter-spacing: .1em !important; }
.page-shell.home .section-head h2 span, .page-shell.home .dashboard-grid > .panel:not(.note-hub) .section-head h2::before { display: none !important; content: none !important; }
.page-shell.home .section-head p:not(.section-kicker) { color: var(--sub) !important; font-size: 14px !important; margin-top: 12px !important; }
.page-shell.home .section-links { justify-content: center; margin-top: 14px; display: none !important; }
.page-shell.home .note-filters { justify-content: center !important; border: 0 !important; gap: 8px !important; margin-bottom: 32px !important; }
.page-shell.home .note-filters a { padding: 7px 16px !important; border-radius: 999px; background: var(--gray); color: var(--ink) !important; font-weight: 700; font-size: 13px !important; border: 0 !important; }
.page-shell.home .note-filters a.active { background: var(--ink); color: #fff !important; }

/* ノート：3列カード（写真＋グレーの箱） */
.page-shell .note-grid-main { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 28px !important; overflow: visible !important; }
.page-shell .note-grid-main .note-card, .page-shell .note-grid-main .note-card:nth-child(n) {
  display: flex !important; flex-direction: column; grid-column: auto !important; grid-row: auto !important; padding: 0 !important; border: 0 !important; background: var(--gray) !important;
}
.page-shell.home .note-grid-main .note-card:nth-child(n+7) { display: none !important; }
.page-shell .note-grid-main .note-card > .note-photo-link { order: 1; margin: 0 !important; }
.page-shell .note-grid-main .note-card:nth-child(n) .photo { aspect-ratio: 16 / 10 !important; max-height: none !important; }
.page-shell .note-grid-main .note-card > h3 { order: 2; margin: 16px 18px 12px !important; font-family: var(--font-heading) !important; font-weight: 700 !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--ink) !important; letter-spacing: .02em !important; }
.page-shell .note-grid-main .note-card > .note-tags { order: 3; margin: auto 18px 0 !important; display: flex; gap: 10px; align-items: center; }
.page-shell .note-grid-main .note-tags span { color: var(--sub) !important; font-size: 12px !important; font-weight: 500 !important; }
.page-shell .note-grid-main .note-tags span + span::before { content: none !important; }
.page-shell .note-grid-main .note-tags span:last-child { order: -1; padding: 3px 10px !important; background: var(--ink) !important; color: #fff !important; font-weight: 700 !important; }
.page-shell .note-grid-main .note-card > footer { order: 4; margin: 10px 18px 16px !important; padding: 0 !important; border: 0 !important; text-align: left !important; color: #999 !important; }
.page-shell .note-grid-main .note-card > p, .page-shell .note-grid-main .note-card > .note-more, .page-shell .note-grid-main .note-card > .user, .page-shell .note-grid-main .note-card > .note-state { display: none !important; }
.page-shell.home .more-row { margin-top: 40px; text-align: center; }
.page-shell.home .more-btn { display: inline-block; padding: 15px 56px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 700; }

/* 12のテーマ：写真モザイク＋中央の大きな文字 */
.page-shell .theme-mosaic { position: relative; margin-bottom: 0 !important; }
.page-shell .theme-tiles { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(150px, 15vw, 260px); gap: 0; margin: 0; padding: 0; list-style: none; }
.page-shell .theme-tiles a { display: block; position: relative; height: 100%; overflow: hidden; }
.page-shell .theme-tiles img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.page-shell .theme-tiles a:hover img { transform: scale(1.06); }
.page-shell .theme-tiles .tile-cap { position: absolute; left: 12px; bottom: 10px; z-index: 2; color: #fff; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.page-shell .theme-copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; background: rgba(15, 25, 40, .45); pointer-events: none; }
.page-shell .theme-copy p { margin: 0; font-weight: 700; font-size: 18px; letter-spacing: .1em; }
.page-shell .theme-copy h2 { margin: 6px 0 14px; font-family: var(--font-heading); font-weight: 900; font-size: clamp(44px, 5.5vw, 76px); letter-spacing: .04em; color: #fff; }
.page-shell .theme-copy span { font-size: 15px; line-height: 1.9; font-weight: 500; }

/* 参加の帯：紺 */
.page-shell .join-band { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px 64px; margin-bottom: 100px !important; padding: 80px var(--inner) 56px; background: var(--navy); color: #fff; }
.page-shell .join-band .section-kicker { font-size: 14px !important; color: var(--sun) !important; letter-spacing: .14em !important; }
.page-shell .join-band h2 { margin: 12px 0 16px; font-family: var(--font-heading); font-weight: 900; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.5; color: #fff; }
.page-shell .join-copy > p:not(.section-kicker) { margin: 0; color: rgba(255,255,255,.8); font-size: 15px; line-height: 1.9; }
.page-shell .join-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.page-shell .join-btn { padding: 16px 40px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 14px; font-weight: 700; }
.page-shell .join-link { color: #fff; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.page-shell .join-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; align-self: center; }
.page-shell .join-steps li { display: grid; grid-template-columns: 64px 1fr; padding: 18px 22px; border-radius: 10px; background: rgba(255,255,255,.08); }
.page-shell .join-steps b { grid-row: 1 / 3; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 28px; color: var(--sun); line-height: 1.1; }
.page-shell .join-steps span { font-weight: 700; font-size: 16px; }
.page-shell .join-steps small { color: rgba(255,255,255,.65); font-size: 13px; }
.page-shell .join-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 10px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); font-size: 13px; align-items: center; }
.page-shell .join-tags span { color: var(--sun); font-weight: 700; margin-right: 8px; }
.page-shell .join-tags a { padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; }

/* 地図 */
.page-shell .map-panel { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: center; }
.page-shell .map-panel .map-card { min-height: 520px; border-radius: 12px; overflow: hidden; text-align: left; }
.page-shell .map-panel > .button.small { display: inline-block !important; margin-top: 28px !important; padding: 15px 56px !important; border: 1px solid var(--ink) !important; border-radius: 999px !important; color: var(--ink) !important; text-decoration: none !important; font-weight: 700 !important; background: #fff !important; }

/* Q&A：淡い黄色 */
.page-shell.home .dashboard-grid > .question-panel { margin-bottom: 0 !important; padding: 88px var(--inner) 96px !important; border: 0 !important; background: var(--sun) !important; box-shadow: none !important; }
.page-shell .question-panel .section-head > a { display: inline-block; margin-top: 16px; color: var(--ink) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; font-size: 13px; }
.page-shell .question-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.page-shell .question-list article { position: relative; padding: 26px 28px 22px 84px !important; border: 0 !important; border-radius: 12px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.05); }
.page-shell .question-list article::before { content: "Q"; position: absolute; left: 26px; top: 22px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px; }
.page-shell .question-list b { font-family: var(--font-heading) !important; font-weight: 700 !important; font-size: 17px !important; color: var(--ink) !important; }
.page-shell .question-list footer strong { color: var(--navy) !important; }

/* フッター：濃紺 */
.site-footer { margin-top: 0 !important; padding: 60px var(--inner) 28px !important; background: var(--navy-dark) !important; }
.footer-logo { font-family: "Poppins", sans-serif !important; font-weight: 800; font-size: 34px !important; }
.footer-by, .footer-head { color: var(--sun) !important; font-family: "Poppins", sans-serif !important; font-weight: 600; }
.footer-copy { font-family: "Poppins", sans-serif !important; }

@media (max-width: 767px) {
  .page-shell .site-header { grid-template-columns: auto 1fr auto; grid-template-areas: "menu brand auth"; }
  .page-shell.home .editorial-hero.hero-index { min-height: 70vh !important; }
  .page-shell .note-grid-main { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .page-shell .note-grid-main .note-card > h3 { margin: 10px 10px 8px !important; font-size: 14px !important; }
  .page-shell .note-grid-main .note-card > .note-tags, .page-shell .note-grid-main .note-card > footer { margin-left: 10px !important; margin-right: 10px !important; }
  .page-shell .theme-tiles { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 33vw; }
  .page-shell .theme-tiles .tile-cap { display: none; }
  .page-shell .join-band, .page-shell .question-list { grid-template-columns: 1fr; }
  .page-shell .join-band { padding: 56px 22px 40px; }
  .page-shell .join-actions { flex-direction: column; align-items: flex-start; }
  .page-shell .map-panel .map-card { min-height: 260px; }
  .page-shell.home .dashboard-grid > .question-panel { padding: 64px 22px 72px !important; }
  .page-shell.home .area-pill { padding: 7px 14px !important; font-size: 13px !important; }
}
.page-shell .note-grid-main .note-card > .note-photo-link { display: block !important; width: 100% !important; }
.page-shell .note-grid-main .note-card .photo { display: block !important; width: 100% !important; }
.page-shell.home .section-head > div { width: 100%; text-align: center; }
.page-shell .note-grid-main .note-card > footer { align-self: flex-start; }
.page-shell.home .section-head > div { display: block !important; }
.page-shell.home .section-head > div > * { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: none !important; }
.page-shell.home .section-head > div > h2 { display: block !important; }
.page-shell .question-panel .section-head > a { display: table !important; margin: 14px auto 0 !important; }
@media (min-width: 768px) {
  .page-shell .theme-tiles li:nth-child(6n+3) .tile-cap, .page-shell .theme-tiles li:nth-child(6n+4) .tile-cap { display: none; }
}

/* 表紙：斜めコラージュ×3がふわっと切り替わる */
.page-shell.home .editorial-hero.hero-index { position: relative; overflow: hidden; background: #111 !important; }
.hero-slides { position: absolute; inset: 0; }
.hero-slides .slide { position: absolute; inset: 0; opacity: 0; animation: heroFade 18s infinite; }
.hero-slides .s2 { animation-delay: 6s; }
.hero-slides .s3 { animation-delay: 12s; }
.hero-slides .slide span { position: absolute; inset: 0; overflow: hidden; }
.hero-slides .slide i { position: absolute; inset: 0; background-size: cover; background-position: center; animation: heroZoom 18s infinite; }
.hero-slides .s2 i { animation-delay: 6s; }
.hero-slides .s3 i { animation-delay: 12s; }
.hero-slides .p1 { clip-path: polygon(0 0, 31% 0, 24.5% 50%, 0 50%); }
.hero-slides .p2 { clip-path: polygon(0 50%, 24.5% 50%, 18% 100%, 0 100%); }
.hero-slides .p3 { clip-path: polygon(31% 0, 82% 0, 70% 100%, 18% 100%); }
.hero-slides .p4 { clip-path: polygon(82% 0, 100% 0, 100% 50%, 76% 50%); }
.hero-slides .p5 { clip-path: polygon(76% 50%, 100% 50%, 100% 100%, 70% 100%); }
.hero-slides .mirror .p1 { clip-path: polygon(100% 0, 69% 0, 75.5% 50%, 100% 50%); }
.hero-slides .mirror .p2 { clip-path: polygon(100% 50%, 75.5% 50%, 82% 100%, 100% 100%); }
.hero-slides .mirror .p3 { clip-path: polygon(69% 0, 18% 0, 30% 100%, 82% 100%); }
.hero-slides .mirror .p4 { clip-path: polygon(18% 0, 0 0, 0 50%, 24% 50%); }
.hero-slides .mirror .p5 { clip-path: polygon(24% 50%, 0 50%, 0 100%, 30% 100%); }
.hero-slides .slide i { left: var(--l, 0); right: var(--r, 0); }
.hero-slides .p1 i, .hero-slides .p2 i { right: 62%; } .hero-slides .p4 i, .hero-slides .p5 i { left: 62%; } .hero-slides .p3 i { left: 14%; right: 14%; }
.hero-slides .mirror .p1 i, .hero-slides .mirror .p2 i { left: 62%; right: 0; } .hero-slides .mirror .p4 i, .hero-slides .mirror .p5 i { right: 62%; left: 0; }
.hero-slides::after { content: ""; position: absolute; inset: 0; background: rgba(15, 20, 30, .38); }
@keyframes heroFade { 0% { opacity: 0; } 6% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
@keyframes heroZoom { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1.06); } }
.page-shell.home .editorial-hero.hero-index .hero-copy { position: relative; z-index: 2; }
.page-shell.home .editorial-hero.hero-index .button { background: rgba(255,255,255,.18) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.7) !important; backdrop-filter: blur(4px); border-radius: 4px !important; min-width: 360px; }
@media (prefers-reduced-motion: reduce) { .hero-slides .slide, .hero-slides .slide i { animation: none; } .hero-slides .s1 { opacity: 1; } }
@media (max-width: 767px) {
  .hero-slides .slide .p1 { clip-path: polygon(0 0, 60% 0, 48% 42%, 0 42%); }
  .hero-slides .slide .p2 { clip-path: polygon(0 42%, 48% 42%, 32% 100%, 0 100%); }
  .hero-slides .slide .p3 { clip-path: polygon(60% 0, 100% 0, 100% 58%, 32% 100%, 48% 42%); }
  .hero-slides .slide .p4 { display: none; }
  .hero-slides .slide .p5 { clip-path: polygon(100% 58%, 100% 100%, 32% 100%); }
  .hero-slides .slide i { left: 0 !important; right: 0 !important; }
  .page-shell.home .editorial-hero.hero-index .button { min-width: 0; }
}
@media (max-width: 767px) {
  .page-shell.home .editorial-hero.hero-index .hero-kicker { font-size: 13px !important; letter-spacing: .06em !important; }
}


/* 下層ページ：新デザインの色・ボタンに合わせる */
.page-shell .button.coral, .page-shell .button.teal:not(.small), .page-shell .search-box button, .page-shell .notes-search-hero button {
  background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; border-radius: 999px !important;
}
.page-shell .button.teal:not(.small):hover, .page-shell .button.coral:hover { background: var(--navy-dark) !important; }
.page-shell .button.ghost { border-radius: 999px !important; border-color: #ccc !important; color: var(--ink) !important; background: #fff !important; }
.page-shell .notes-search-hero, .page-shell .post-hero, .page-shell .search-panel, .page-shell .form-panel, .page-shell .detail-hero, .auth-card {
  background: #fff !important; background-image: none !important; border: 1px solid #e6e6e6 !important; box-shadow: none !important; border-radius: 12px !important;
}
.page-shell .notes-search-hero h1, .page-shell .post-hero h1, .page-shell .detail-hero h1 {
  color: var(--ink) !important; font-family: var(--font-heading) !important; font-weight: 900 !important; letter-spacing: .02em !important;
}
.page-shell .page-kicker, .page-shell .notes-search-hero .page-kicker { color: var(--navy) !important; font-family: "Poppins", sans-serif !important; font-weight: 700 !important; letter-spacing: .14em !important; }
.page-shell .search-box input, .page-shell .form-grid input, .page-shell .form-grid select, .page-shell .form-grid textarea { border-radius: 8px !important; border-color: #ddd !important; background: #fff !important; }
.page-shell .filter-group a, .page-shell .search-panel a { border-radius: 999px; }
.page-shell .filter-group a.active, .page-shell .search-panel a.active { background: var(--navy) !important; color: #fff !important; }
.page-shell .post-flow span, .page-shell .post-flow b, .page-shell .post-flow i { background-color: var(--navy) !important; }
.page-shell .filter-group a { display: inline-block; padding: 7px 16px !important; margin: 0 6px 8px 0; background: var(--gray) !important; color: var(--ink) !important; font-size: 13px !important; font-weight: 700 !important; border: 0 !important; text-decoration: none !important; }
.page-shell .filter-group a.active { background: var(--navy) !important; color: #fff !important; }
.page-shell .search-results .section-head h2::before, .page-shell .search-results .section-head h2 span { display: none !important; content: none !important; }

/* =========================================================
   縦の余白・行間を詰める (2026-10-18)
   ========================================================= */
/* ヘッダー */
.page-shell .site-header { padding: 2px 0 8px !important; margin-bottom: 0 !important; row-gap: 8px !important; }
.page-shell .top-nav { padding-top: 8px !important; }

/* 表紙 */
.page-shell.home .editorial-hero.hero-index { min-height: clamp(380px, 56vh, 520px) !important; }
.page-shell.home .editorial-hero.hero-index .hero-japanese { margin: 12px 0 18px !important; }

/* エリア帯 */
.page-shell.home .area-strip { padding: 16px var(--inner) 18px !important; margin-bottom: 56px !important; }
.page-shell.home .strip-title { margin-bottom: 10px !important; }

/* セクション間 */
.page-shell.home .dashboard-grid > .panel { margin-bottom: 64px !important; }
.page-shell.home .section-head { margin-bottom: 22px !important; }
.page-shell.home .section-head h2 { margin-top: 2px !important; }
.page-shell.home .section-head p:not(.section-kicker) { margin-top: 6px !important; }
.page-shell.home .section-links { margin-top: 8px !important; }
.page-shell.home .note-filters { margin-bottom: 20px !important; }

/* ノートカード */
.page-shell .note-grid-main { gap: 20px !important; }
.page-shell .note-grid-main .note-card > h3 { margin: 12px 16px 8px !important; line-height: 1.5 !important; }
.page-shell .note-grid-main .note-card > .note-tags { margin: auto 16px 0 !important; }
.page-shell .note-grid-main .note-card > footer { margin: 6px 16px 12px !important; }
.page-shell .note-grid-main .note-card:nth-child(n) .photo { aspect-ratio: 16 / 9 !important; }
.page-shell.home .more-row { margin-top: 24px !important; }
.page-shell.home .more-btn { padding: 12px 48px !important; }

/* 12のテーマ */
.page-shell .theme-tiles { grid-auto-rows: clamp(120px, 11vw, 190px) !important; }
.page-shell .theme-copy h2 { margin: 2px 0 8px !important; }
.page-shell .theme-copy span { line-height: 1.7 !important; }

/* 投稿の呼びかけ */
.page-shell .join-band { padding: 48px var(--inner) 36px !important; margin-bottom: 64px !important; gap: 20px 56px !important; }
.page-shell .join-band h2 { margin: 6px 0 10px !important; line-height: 1.45 !important; }
.page-shell .join-copy > p:not(.section-kicker) { line-height: 1.75 !important; }
.page-shell .join-actions { margin-top: 20px !important; }
.page-shell .join-steps { gap: 10px !important; }
.page-shell .join-steps li { padding: 12px 18px !important; }
.page-shell .join-tags { padding-top: 16px !important; }

/* 地図 */
.page-shell .map-panel .map-card { min-height: 420px !important; }
.page-shell .map-panel > .button.small { margin-top: 18px !important; padding: 12px 48px !important; }

/* Q&A */
.page-shell.home .dashboard-grid > .question-panel { padding: 52px var(--inner) 56px !important; }
.page-shell .question-panel .section-head > a { margin-top: 8px !important; }
.page-shell .question-list { gap: 16px !important; }
.page-shell .question-list article { padding: 20px 24px 16px 78px !important; }
.page-shell .question-list article::before { top: 18px !important; }

/* フッター */
.site-footer { padding: 40px var(--inner) 20px !important; gap: 24px 48px !important; }
.footer-tagline { margin-top: 12px !important; }
.footer-nav div { gap: 6px !important; }
.footer-copy { padding-top: 14px !important; margin-top: 0 !important; }

/* 本文の行間（全体） */
.page-shell p { line-height: 1.75; }

@media (max-width: 767px) {
  .page-shell.home .editorial-hero.hero-index { min-height: 58vh !important; }
  .page-shell.home .area-strip { padding: 14px 16px 16px !important; margin-bottom: 40px !important; }
  .page-shell.home .area-scroll { gap: 6px !important; }
  .page-shell.home .area-pill { padding: 6px 10px !important; }
  .page-shell.home .dashboard-grid > .panel { margin-bottom: 44px !important; }
  .page-shell .note-grid-main { gap: 10px !important; }
  .page-shell .note-grid-main .note-card > h3 { margin: 8px 10px 6px !important; font-size: 14px !important; }
  .page-shell .note-grid-main .note-card > .note-tags { margin: auto 10px 0 !important; }
  .page-shell .note-grid-main .note-card > footer { margin: 4px 10px 10px !important; }
  .page-shell .theme-tiles { grid-auto-rows: 26vw !important; }
  .page-shell .join-band { padding: 36px 18px 28px !important; margin-bottom: 44px !important; }
  .page-shell .map-panel .map-card { min-height: 220px !important; }
  .page-shell.home .dashboard-grid > .question-panel { padding: 40px 16px 44px !important; }
  .page-shell .question-list article { padding: 16px 16px 14px 64px !important; }
  .page-shell .question-list article::before { left: 16px !important; top: 16px !important; }
  .site-footer { padding: 32px 18px 18px !important; gap: 18px !important; }
}
@media (max-width: 767px) {
  .page-shell.home .area-scroll { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .page-shell.home .area-scroll .area-pill { flex: 0 0 auto; width: auto !important; height: auto !important; min-width: 0 !important; }
  .page-shell.home .theme-tiles { grid-template-columns: repeat(4, 1fr) !important; grid-auto-rows: 22vw !important; }
}
@media (max-width: 767px) {
  .page-shell.home .note-filters { justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .page-shell.home .note-filters a { flex: 0 0 auto; }
}

/* =========================================================
   ヘッダー1行（ロゴ左・メニュー右）＋表紙の高さを戻す (2026-10-18)
   ========================================================= */
@media (min-width: 1024px) {
  .page-shell .site-header {
    display: flex !important; align-items: center !important; gap: 40px !important;
    padding: 14px 0 !important; margin-bottom: 0 !important; border-bottom: 0 !important;
  }
  .page-shell .brand { order: 1; flex: 0 0 auto; text-align: left !important; display: flex; flex-direction: column; align-items: flex-start; }
  .page-shell .brand-main { font-size: 26px !important; line-height: 1 !important; }
  .page-shell .brand-by { margin-top: 3px; }
  .page-shell .top-nav { order: 2; flex: 1 1 auto; display: flex !important; justify-content: flex-start !important; gap: 30px !important; padding-top: 0 !important; border-top: 0 !important; }
  .page-shell .auth-mini { order: 3; margin-left: auto; }
}
.page-shell.home .editorial-hero.hero-index { min-height: clamp(520px, 76vh, 760px) !important; }
@media (max-width: 767px) {
  .page-shell.home .editorial-hero.hero-index { min-height: 72vh !important; }
}
@media (max-width: 1023px) {
  .page-shell .site-header { display: flex !important; align-items: center !important; justify-content: space-between !important; }
  .page-shell .brand { order: 1; text-align: left !important; display: flex; flex-direction: column; align-items: flex-start; }
  .page-shell .menu-button { order: 3; }
}
@media (max-width: 1023px) {
  .page-shell .site-header > .brand { order: -1 !important; margin: 0 auto 0 0 !important; grid-area: auto !important; }
  .page-shell .site-header > .menu-button { order: 9 !important; margin-left: 12px; }
}
@media (max-width: 1023px) {
  .page-shell .site-header { padding-left: 14px !important; padding-right: 10px !important; }
}

/* セクション見出し：英字と日本語を詰め、リンクは右端へ (2026-10-18) */
.page-shell.home .section-head { position: relative; margin-bottom: 16px !important; }
.page-shell.home .section-kicker { line-height: 1.05 !important; }
.page-shell.home .section-head h2 { margin-top: 4px !important; line-height: 1.4 !important; }
.page-shell.home .section-head p:not(.section-kicker) { margin-top: 4px !important; }
.page-shell.home .section-head .section-links,
.page-shell.home .question-panel .section-head > a {
  position: absolute; right: 0; bottom: 2px; display: flex !important; gap: 18px; margin: 0 !important;
}
.page-shell.home .note-filters { margin-bottom: 18px !important; }
@media (max-width: 767px) {
  .page-shell.home .section-head .section-links,
  .page-shell.home .question-panel .section-head > a {
    position: static; justify-content: center; margin-top: 8px !important; display: flex !important;
  }
  .page-shell.home .question-panel .section-head > a { display: table !important; margin: 8px auto 0 !important; }
}
@media (min-width: 768px) {
  .page-shell.home .section-head .section-links { left: auto !important; width: auto !important; justify-content: flex-end !important; }
  .page-shell.home .section-head .section-links a { margin: 0 !important; }
}
@media (max-width: 767px) {
  .page-shell.home .section-head .section-links { justify-content: center !important; gap: 20px !important; width: auto !important; }
  .page-shell.home .section-head .section-links a { margin: 0 !important; }
}

/* =========================================================
   ノート一覧ページ リニューアル (2026-10-18)
   ========================================================= */
.notes-page main { padding-top: 8px; }

/* 見出し＋検索：1つの帯 */
.notes-page .notes-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin: 0 0 18px; padding: 22px 0 18px; border-bottom: 1px solid #eee;
}
.notes-page .notes-head .section-kicker { margin: 0; color: var(--navy) !important; font-family: "Poppins", sans-serif !important; font-weight: 800 !important; font-size: 14px !important; letter-spacing: .16em !important; line-height: 1.2; }
.notes-page .notes-head h1 { margin: 4px 0 0; font-family: var(--font-heading); font-weight: 900; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; color: var(--ink); letter-spacing: .02em; }
.notes-page .notes-search { display: flex; gap: 8px; width: min(460px, 100%); margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.notes-page .notes-search input[type="search"] { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid #ddd !important; border-radius: 999px !important; background: #fff; font-size: 14px; }
.notes-page .notes-search button { height: 44px; padding: 0 26px !important; min-height: 0 !important; }

/* 絞り込み */
.notes-page .notes-filter { display: grid; gap: 10px; margin: 0 0 22px; padding: 16px 20px; border-radius: 12px; background: var(--gray); }
.notes-page .filter-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; }
.notes-page .filter-row > b { font-size: 13px; font-weight: 700; color: var(--sub); }
.notes-page .chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.notes-page .chip-row a {
  display: inline-block; padding: 6px 14px; border: 1px solid #ddd; border-radius: 999px; background: #fff;
  color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.4; text-decoration: none; cursor: pointer;
}
.notes-page .chip-row a:hover { border-color: var(--navy); }
.notes-page .chip-row a.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.notes-page .chip-row[data-param="area"] a { font-family: "Poppins", var(--font-heading); font-weight: 600; }

/* 件数・条件・並べ替え */
.notes-page .notes-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.notes-page .notes-count { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.notes-page #results-summary { margin: 0; font-size: 14px; color: var(--sub); }
.notes-page #results-summary b { margin-right: 2px; font-family: "Poppins", sans-serif; font-size: 22px; color: var(--ink); }
.notes-page .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.notes-page .active-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 12px; border-radius: 999px; background: #e8edf5; color: var(--navy); font-size: 12px; font-weight: 700; text-decoration: none; }
.notes-page .active-chip::after { content: "✕"; font-size: 10px; }
.notes-page .clear-all { color: var(--sub); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.notes-page .notes-sort { display: flex; flex: 0 0 auto; border: 1px solid #ddd; border-radius: 999px; overflow: hidden; }
.notes-page .notes-sort a { padding: 6px 16px; color: var(--sub); font-size: 13px; font-weight: 700; text-decoration: none; }
.notes-page .notes-sort a.active { background: var(--ink); color: #fff; }

/* カード */
.notes-page .note-grid-main { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; }
.notes-page .note-grid-main .note-card { display: flex !important; flex-direction: column; }
.notes-page .note-photo-link { position: relative; display: block; overflow: hidden; }
.notes-page .note-grid-main .note-card:nth-child(n) .photo { aspect-ratio: 4 / 3 !important; transition: transform .5s; }
.notes-page .note-photo-link:hover .photo { transform: scale(1.04); }
.notes-page .card-status { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 11px; font-weight: 700; }
.notes-page .card-status.visited { background: var(--navy); color: #fff; }
.notes-page .note-grid-main .note-card > h3 { order: 2; }
.notes-page .note-grid-main .note-card > h3 a { color: inherit; text-decoration: none; }
.notes-page .note-grid-main .note-card > .note-tags { order: 3; }
.notes-page .note-grid-main .note-card > footer { order: 4; display: flex !important; justify-content: space-between; gap: 8px; align-self: stretch !important; font-size: 12px; color: #888 !important; }
.notes-page .card-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-page .card-stats { flex: 0 0 auto; }

/* もっと見る・投稿導線 */
.notes-page .more-row { margin: 28px 0 0; text-align: center; }
.notes-page .more-btn { display: inline-block; padding: 12px 48px; border: 1px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.notes-page .more-btn:hover { background: var(--ink); color: #fff; }
.notes-page .notes-post-link { margin: 36px 0 48px; padding: 18px; border-radius: 12px; background: var(--sun); text-align: center; font-size: 14px; color: var(--ink); }
.notes-page .notes-post-link a { margin-left: 8px; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .notes-page .note-grid-main { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  .notes-page .notes-head { display: block; padding: 14px 0 14px; margin-bottom: 12px; }
  .notes-page .notes-search { width: 100%; margin-top: 12px; }
  .notes-page .notes-search button { padding: 0 18px !important; }
  .notes-page .notes-filter { margin: 0 -14px 16px; padding: 12px 0 12px 14px; border-radius: 0; gap: 8px; }
  .notes-page .filter-row { grid-template-columns: 1fr; gap: 6px; }
  .notes-page .filter-row > b { font-size: 12px; }
  .notes-page .chip-row { flex-wrap: nowrap; overflow-x: auto; padding-right: 14px; scrollbar-width: none; }
  .notes-page .chip-row::-webkit-scrollbar { display: none; }
  .notes-page .chip-row a { flex: 0 0 auto; padding: 6px 12px; }
  .notes-page .notes-toolbar { align-items: flex-start; }
  .notes-page .notes-sort a { padding: 5px 12px; font-size: 12px; }
  .notes-page .note-grid-main { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .notes-page .card-status { left: 6px; top: 6px; font-size: 10px; padding: 2px 8px; }
  .notes-page .note-grid-main .note-card > footer { flex-direction: column; gap: 2px; }
  .notes-page .notes-post-link { margin: 28px 0 36px; }
  .notes-page .notes-post-link a { display: inline-block; margin: 6px 0 0; }
}
.notes-page .notes-search { display: flex !important; grid-template-columns: none !important; flex-direction: row !important; }
.notes-page .notes-search input[type="search"] { display: block !important; flex: 1 1 auto !important; width: auto !important; }
.notes-page .notes-search button { flex: 0 0 auto !important; width: auto !important; }

/* =========================================================
   ノート詳細ページ リニューアル (2026-10-18)
   ========================================================= */
.detail-page #detail-root { padding-bottom: 72px; }
.detail-page .nd-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 8px; font-size: 13px; color: #999; }
.detail-page .nd-crumbs a { color: var(--navy); font-weight: 700; text-decoration: none; }
.detail-page .nd-crumbs a:hover { text-decoration: underline; }

.detail-page .nd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 0 18px; margin-bottom: 22px; border-bottom: 1px solid #eee; }
.detail-page .nd-head h1 { margin: 0; font-family: var(--font-heading); font-weight: 900; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.35; letter-spacing: .02em; color: var(--ink); }
.detail-page .nd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--sub); }
.detail-page .nd-status { padding: 3px 12px; border-radius: 999px; background: #fff; border: 1px solid #ccc; color: var(--ink); font-size: 12px; font-weight: 700; }
.detail-page .nd-status.visited { background: var(--navy); border-color: var(--navy); color: #fff; }
.detail-page .nd-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.detail-page .nd-fav, .detail-page .nd-back { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.detail-page .nd-fav { color: #d6455d; }
.detail-page .nd-fav.active { background: #d6455d; border-color: #d6455d; color: #fff; }

.detail-page .nd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "top side" "comments side"; gap: 0 40px; align-items: start; }
.detail-page .nd-top { grid-area: top; }
.detail-page .nd-side { grid-area: side; display: grid; gap: 20px; position: sticky; top: 16px; }
.detail-page .nd-comments { grid-area: comments; }

/* 写真：1枚目大＋サムネイル */
.detail-page .nd-gallery { display: grid; gap: 6px; }
.detail-page .nd-gallery.multi { grid-template-columns: repeat(4, 1fr); }
.detail-page .nd-gallery .detail-photo-item { display: block; width: 100%; padding: 0; border: 0; background: #eee; cursor: zoom-in; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 0 !important; }
.detail-page .nd-gallery .detail-photo-item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.detail-page .nd-gallery .detail-photo-item img, .detail-page .nd-gallery .detail-photo-item .photo { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.detail-page .nd-gallery .detail-photo-item:hover img { transform: scale(1.03); }
.detail-page .nd-photo-count { margin: 6px 0 0; font-size: 12px; color: #999; }

/* 本文 */
.detail-page .nd-body { margin: 22px 0 36px; }
.detail-page .nd-body p { margin: 0 0 1em; font-size: 16px; line-height: 1.9; color: var(--ink); }

/* 右カラム */
.detail-page .nd-box { padding: 20px; border-radius: 12px; background: var(--gray); }
.detail-page .nd-label { margin: 0; color: var(--navy); font-family: "Poppins", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .16em; }
.detail-page .nd-box h2 { margin: 4px 0 12px; font-family: var(--font-heading); font-weight: 900; font-size: 18px; line-height: 1.4; color: var(--ink); }
.detail-page .nd-info { margin: 0; }
.detail-page .nd-info div { display: grid; grid-template-columns: 80px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid #e2e2e2; font-size: 13px; }
.detail-page .nd-info dt { color: #888; }
.detail-page .nd-info dd { margin: 0; color: var(--ink); font-weight: 500; }
.detail-page .nd-info a { color: var(--navy); font-weight: 700; }
.detail-page .nd-map { display: block; width: 100%; height: 200px; margin-top: 12px; border: 0; border-radius: 8px; }
.detail-page .nd-links { display: grid; gap: 8px; margin-top: 14px; }
.detail-page .nd-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; border: 1px solid #ccc; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.detail-page .nd-btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.detail-page .nd-btn:hover { opacity: .88; }

/* この場所のほかのノート */
.detail-page .nd-mini-list { display: grid; gap: 10px; }
.detail-page .nd-mini { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.detail-page .nd-mini-photo { width: 64px; height: 64px; border-radius: 6px; background: #ddd center / cover; }
.detail-page .nd-mini b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.5; color: var(--ink); }
.detail-page .nd-mini small { display: block; margin-top: 2px; font-size: 11px; color: #888; }
.detail-page .nd-mini:hover b { text-decoration: underline; }

/* コメント */
.detail-page .nd-comments { padding-top: 28px; border-top: 1px solid #eee; }
.detail-page .nd-comments > h2 { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 900; font-size: 20px; color: var(--ink); }
.detail-page .nd-comments > h2 span { margin-left: 4px; font-family: "Poppins", sans-serif; color: var(--navy); }
.detail-page .detail-comments { display: grid; gap: 10px; margin: 0 0 20px; }
.detail-page .detail-comments article { padding: 14px 18px !important; border: 0 !important; border-radius: 10px; background: var(--gray); }
.detail-page .detail-comments article b { font-size: 13px; color: var(--ink); }
.detail-page .detail-comments article em { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #fff; color: var(--navy) !important; font-style: normal; font-size: 11px; font-weight: 700; }
.detail-page .detail-comments article p { margin: 6px 0 4px !important; font-family: var(--font-body) !important; font-size: 14px !important; line-height: 1.75 !important; color: var(--ink); }
.detail-page .detail-comments article small { font-size: 11px; color: #999; }
.detail-page .nd-empty { margin: 0; padding: 16px; border-radius: 10px; background: var(--gray); color: var(--sub); font-size: 14px; }
.detail-page .comment-form { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.detail-page .comment-form h3 { margin: 0 0 4px !important; font-family: var(--font-heading) !important; font-weight: 700 !important; font-size: 16px !important; color: var(--ink) !important; }
.detail-page .login-user-note { margin: 0 0 10px; font-size: 12px; color: #888; }
.detail-page .comment-choice { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.detail-page .comment-choice label { position: relative; display: inline-flex; padding: 6px 14px !important; border: 1px solid #ddd !important; border-radius: 999px !important; background: #fff !important; font-size: 13px; font-weight: 700; cursor: pointer; }
.detail-page .comment-choice input { position: absolute; opacity: 0; pointer-events: none; }
.detail-page .comment-choice label:has(input:checked) { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff; }
.detail-page .comment-form textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 1px solid #ddd !important; border-radius: 10px !important; background: #fff; font: inherit; font-size: 15px; }
.detail-page .comment-form .nd-btn { margin-top: 10px; }
.detail-page .login-required-box { padding: 22px !important; border: 0 !important; border-radius: 12px; background: var(--sun) !important; text-align: center; }
.detail-page .login-required-box h3 { margin: 0 0 4px; font-family: var(--font-heading) !important; font-size: 17px !important; color: var(--ink) !important; }
.detail-page .login-required-box p { margin: 0 0 12px; font-size: 13px; color: var(--sub); }

/* 同じエリアのノート */
.detail-page .nd-related { margin-top: 56px; padding-top: 28px; border-top: 1px solid #eee; }
.detail-page .nd-related-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.detail-page .nd-related-head h2 { margin: 0; font-family: var(--font-heading); font-weight: 900; font-size: 20px; color: var(--ink); }
.detail-page .nd-related-head a { color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.detail-page .nd-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.detail-page .nd-card { display: block; color: inherit; text-decoration: none; }
.detail-page .nd-card-photo { position: relative; display: block; aspect-ratio: 4 / 3; background: #ddd center / cover; }
.detail-page .nd-card-photo i { position: absolute; left: 8px; top: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); font-style: normal; font-size: 10px; font-weight: 700; }
.detail-page .nd-card-photo i.visited { background: var(--navy); color: #fff; }
.detail-page .nd-card b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.detail-page .nd-card small { display: block; margin-top: 2px; font-size: 12px; color: #888; }
.detail-page .nd-card:hover b { text-decoration: underline; }

@media (max-width: 900px) {
  .detail-page .nd-layout { display: flex; flex-direction: column; gap: 0; }
  .detail-page .nd-side { position: static; width: 100%; margin-bottom: 28px; }
  .detail-page .nd-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .detail-page #detail-root { padding-bottom: 48px; }
  .detail-page .nd-head { display: block; padding-bottom: 14px; margin-bottom: 14px; }
  .detail-page .nd-actions { margin-top: 12px; }
  .detail-page .nd-fav, .detail-page .nd-back { height: 36px; padding: 0 14px; font-size: 13px; }
  /* 写真は横スワイプ */
  .detail-page .nd-gallery.multi { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 4px; margin: 0 -14px; padding: 0 14px; scrollbar-width: none; }
  .detail-page .nd-gallery.multi::-webkit-scrollbar { display: none; }
  .detail-page .nd-gallery.multi .detail-photo-item, .detail-page .nd-gallery.multi .detail-photo-item:first-child { flex: 0 0 86%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
  .detail-page .nd-photo-count { margin-top: 4px; }
  .detail-page .nd-body { margin: 16px 0 24px; }
  .detail-page .nd-body p { font-size: 15px; line-height: 1.85; }
  .detail-page .nd-box { padding: 16px; }
  .detail-page .nd-related { margin-top: 36px; }
}
.detail-page .nd-gallery.multi { grid-template-columns: repeat(var(--thumbs, 4), minmax(0, 1fr)); }
.detail-page .comment-form .nd-btn { width: auto !important; padding: 0 32px; }
.detail-page .nd-gallery.multi .detail-photo-item:not(:first-child) { aspect-ratio: 4 / 3; }

/* 詳細ページ：写真ビューア（◀▶・サムネイル） (2026-10-18) */
.detail-page .nd-gallery { display: block !important; margin: 0; }
.detail-page .nd-viewer { position: relative; background: #111; aspect-ratio: 16 / 10; overflow: hidden; }
.detail-page .nd-main { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #111; cursor: zoom-in; }
.detail-page .nd-main img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-page .nd-sample { cursor: default; }
.detail-page .nd-nav, .nd-lightbox .nd-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; padding: 0 0 4px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.88); color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: background .2s, transform .2s;
}
.detail-page .nd-nav:hover, .nd-lightbox .nd-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.detail-page .nd-nav.prev, .nd-lightbox .nd-nav.prev { left: 14px; }
.detail-page .nd-nav.next, .nd-lightbox .nd-nav.next { right: 14px; }
.detail-page .nd-counter { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; }
.detail-page .nd-thumbs { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; scrollbar-width: thin; }
.detail-page .nd-thumb { flex: 0 0 calc((100% - 30px) / 6); aspect-ratio: 4 / 3; padding: 0; border: 0; background: #eee; cursor: pointer; opacity: .55; outline: 2px solid transparent; outline-offset: -2px; transition: opacity .2s; }
.detail-page .nd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-page .nd-thumb:hover { opacity: .85; }
.detail-page .nd-thumb.active { opacity: 1; outline-color: var(--navy); }
/* 拡大表示 */
.nd-lightbox .nd-counter.lb { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.15); color: #fff; font-family: "Poppins", sans-serif; font-size: 13px; }
.nd-lightbox .nd-nav { position: fixed; }
@media (max-width: 767px) {
  .detail-page .nd-viewer { margin: 0 -14px; aspect-ratio: 4 / 3; }
  .detail-page .nd-nav { width: 38px; height: 38px; font-size: 24px; }
  .detail-page .nd-nav.prev { left: 8px; } .detail-page .nd-nav.next { right: 8px; }
  .detail-page .nd-thumbs { margin: 6px -14px 0; padding: 0 14px; scrollbar-width: none; }
  .detail-page .nd-thumb { flex-basis: 22%; }
  .nd-lightbox .nd-nav { width: 40px; height: 40px; font-size: 26px; }
  .nd-lightbox .nd-nav.prev { left: 8px; } .nd-lightbox .nd-nav.next { right: 8px; }
}
.nd-lightbox .nd-counter.lb { width: auto !important; max-width: none !important; right: auto !important; top: auto !important; height: auto !important; }

/* =========================================================
   WATCH LIST（みんなの気になるリスト） (2026-10-18)
   ========================================================= */
.watch-page main { padding-bottom: 64px; }
.wl-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 8px 0 28px; padding: 28px 32px; border-radius: 14px; background: var(--sun); }
.wl-kicker { margin: 0; color: var(--navy); font-family: "Poppins", sans-serif; font-weight: 800; font-size: 14px; letter-spacing: .16em; }
.wl-hero h1 { margin: 4px 0 8px; font-family: var(--font-heading); font-weight: 900; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.25; color: var(--ink); }
.wl-lead { margin: 0; font-size: 14px; line-height: 1.75; color: var(--sub); }
.wl-share { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 48px; padding: 0 26px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.wl-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* ランキング */
.wl-ranking { margin: 0 0 36px; }
.wl-ranking h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-family: var(--font-heading); font-weight: 900; font-size: 20px; color: var(--ink); }
.wl-ranking h2 span { color: var(--navy); font-family: "Poppins", sans-serif; font-size: 13px; letter-spacing: .16em; }
.wl-rank-list { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wl-rank.first { grid-row: 1 / 3; }
.wl-rank a { position: relative; display: block; height: 100%; min-height: 150px; overflow: hidden; border-radius: 10px; color: #fff; text-decoration: none; }
.wl-rank.first a { min-height: 312px; }
.wl-rank-photo { position: absolute; inset: 0; background: #ccc center / cover; transition: transform .5s; }
.wl-rank a:hover .wl-rank-photo { transform: scale(1.05); }
.wl-rank a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%); }
.wl-rank-no { position: absolute; left: 12px; top: 10px; z-index: 1; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 34px; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.wl-rank.first .wl-rank-no { font-size: 56px; }
.wl-rank-text { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; }
.wl-rank-text b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.45; }
.wl-rank.first .wl-rank-text b { font-size: 22px; }
.wl-rank-text small { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; opacity: .92; }
.wl-rank-text small svg { width: 12px; height: 12px; fill: currentColor; }

/* 一覧 */
.wl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.watch-page .chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.watch-page .chip-row a { padding: 6px 14px; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.watch-page .chip-row a.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.watch-page .notes-sort { display: flex; flex: 0 0 auto; border: 1px solid #ddd; border-radius: 999px; overflow: hidden; }
.watch-page .notes-sort a { padding: 6px 16px; color: var(--sub); font-size: 13px; font-weight: 700; text-decoration: none; }
.watch-page .notes-sort a.active { background: var(--ink); color: #fff; }
.wl-summary { margin: 0 0 14px; font-size: 14px; color: var(--sub); }
.wl-summary b { margin-right: 2px; font-family: "Poppins", sans-serif; font-size: 22px; color: var(--ink); }
.wl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wl-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #eee; border-radius: 12px; background: #fff; }
.wl-photo { position: relative; display: block; aspect-ratio: 4 / 3; background: #ddd center / cover; }
.wl-src { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--ink); font-size: 11px; font-weight: 700; }
.wl-src.ig { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); color: #fff; }
.wl-src.tt { background: #111; color: #fff; }
.wl-src.yt { background: #e00; color: #fff; }
.wl-body { flex: 1; padding: 12px 14px 4px; }
.wl-meta { display: flex; gap: 8px; margin: 0 0 4px; font-size: 12px; color: #888; }
.wl-meta span::before { content: "・"; margin-right: 6px; }
.wl-body h3 { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 1.5; }
.wl-body h3 a { color: var(--ink); text-decoration: none; }
.wl-body h3 a:hover { text-decoration: underline; }
.wl-reason { position: relative; margin: 0 0 8px; padding: 8px 10px 8px 26px; border-radius: 8px; background: var(--gray); font-size: 13px; line-height: 1.6; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.wl-reason::before { content: "“"; position: absolute; left: 8px; top: 2px; font-family: Georgia, serif; font-size: 24px; color: var(--navy); }
.wl-by { margin: 0; font-size: 12px; color: #999; }
.wl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 12px; }
.wl-bookmark { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--navy); border-radius: 999px; background: #fff; color: var(--navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s; }
.wl-bookmark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.wl-bookmark b { font-family: "Poppins", sans-serif; }
.wl-bookmark.on { background: var(--navy); color: #fff; }
.wl-bookmark.on svg { fill: currentColor; }
.wl-report { font-size: 12px; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; }
.wl-report:hover { text-decoration: underline; }
.wl-report.none { font-weight: 500; color: #aaa; }
.watch-page .more-row { margin: 28px 0 0; text-align: center; }
.watch-page .more-btn { padding: 12px 48px; border: 1px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

/* 使い方 */
.wl-how { margin-top: 56px; padding: 32px; border-radius: 14px; background: var(--gray); }
.wl-how h2 { margin: 0 0 18px; text-align: center; font-family: var(--font-heading); font-weight: 900; font-size: 20px; color: var(--ink); }
.wl-how ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.wl-how li { padding: 18px; border-radius: 10px; background: #fff; }
.wl-how b { display: block; color: var(--navy); font-family: "Poppins", sans-serif; font-weight: 800; font-size: 22px; }
.wl-how span { display: block; margin: 2px 0 4px; font-weight: 700; font-size: 15px; color: var(--ink); }
.wl-how small { font-size: 13px; line-height: 1.6; color: var(--sub); }

@media (max-width: 1100px) { .wl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .wl-hero { display: block; margin: 4px -14px 22px; padding: 22px 18px; border-radius: 0; }
  .wl-share { margin-top: 16px; width: 100%; justify-content: center; }
  .wl-rank-list { display: flex; overflow-x: auto; gap: 8px; margin: 0 -14px; padding: 0 14px; scrollbar-width: none; }
  .wl-rank, .wl-rank.first { flex: 0 0 62%; }
  .wl-rank a, .wl-rank.first a { min-height: 180px; }
  .wl-rank.first .wl-rank-no { font-size: 40px; }
  .wl-rank.first .wl-rank-text b { font-size: 16px; }
  .wl-toolbar { flex-direction: column; align-items: stretch; }
  .watch-page .chip-row { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 0 14px; scrollbar-width: none; }
  .watch-page .chip-row a { flex: 0 0 auto; }
  .watch-page .notes-sort { align-self: flex-end; }
  .wl-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wl-body { padding: 10px 10px 2px; }
  .wl-body h3 { font-size: 14px; }
  .wl-reason { -webkit-line-clamp: 2; font-size: 12px; padding: 6px 8px 6px 22px; }
  .wl-foot { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px 10px; }
  .wl-bookmark { justify-content: center; }
  .wl-how { margin: 40px -14px 0; padding: 24px 16px; border-radius: 0; }
  .wl-how ol { grid-template-columns: 1fr; }
}
.wl-bookmark { white-space: nowrap; flex: 0 0 auto; }
.wl-foot { flex-wrap: wrap; }
.wl-report { flex: 1 1 auto; text-align: right; }
.watch-page main { display: block !important; min-width: 0; }
.watch-page main > section { min-width: 0; }
@media (max-width: 767px) {
  .wl-foot { flex-direction: column !important; align-items: stretch !important; }
  .wl-report { text-align: center; }
}

/* 詳細ページ：SNSで発見（気になるボタン・埋め込み） */
.detail-page .nd-bookmark { color: var(--navy); border-color: var(--navy); }
.detail-page .nd-bookmark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.detail-page .nd-bookmark.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.detail-page .nd-bookmark.active svg { fill: currentColor; }
.detail-page .nd-embed { margin: 0 0 36px; padding: 20px; border-radius: 12px; background: var(--gray); }
.detail-page .nd-embed h2 { margin: 4px 0 14px; font-family: var(--font-heading); font-weight: 900; font-size: 18px; color: var(--ink); }
.detail-page .nd-embed .instagram-media, .detail-page .nd-embed .tiktok-embed { margin: 0 auto 14px !important; max-width: 540px !important; min-width: 0 !important; width: 100% !important; }
.detail-page .nd-embed blockquote:not([class*="rendered"]) { padding: 16px; border-radius: 8px; background: #fff; text-align: center; }
.detail-page .nd-yt { position: relative; aspect-ratio: 16 / 9; margin-bottom: 14px; }
.detail-page .nd-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.detail-page .nd-embed .nd-btn { display: flex; }
.detail-page .nd-embed-note { margin: 8px 0 0; font-size: 12px; color: #999; text-align: center; }

/* 写真のないSNSノート：見本写真の代わりにSNSの表示 (2026-10-18) */
.sns-ph {
  display: flex !important; align-items: center; justify-content: center;
  background-image: linear-gradient(135deg, #f09433 0%, #e6683c 30%, #dc2743 55%, #bc1888 100%) !important;
  background-size: cover !important; background-position: center !important;
  color: #fff; text-align: center;
}
.sns-ph.tt { background-image: linear-gradient(135deg, #111 0%, #2b2b2b 100%) !important; }
.sns-ph.yt { background-image: linear-gradient(135deg, #ff3b3b 0%, #c40000 100%) !important; }
.sns-ph.x { background-image: linear-gradient(135deg, #222 0%, #000 100%) !important; }
.sns-ph.web { background-image: linear-gradient(135deg, #2c4a73 0%, #1d3557 100%) !important; }
.sns-ph-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; pointer-events: none; }
.sns-ph-inner svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sns-ph.tt .sns-ph-inner svg, .sns-ph.yt .sns-ph-inner svg { width: 38px; height: 38px; }
.sns-ph-inner b { font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.sns-ph-inner small { font-size: 11px; opacity: .85; }
.note-card .photo.sns-ph, .wl-photo.sns-ph { position: relative; }
.wl-rank-photo.sns-ph .sns-ph-inner { transform: translateY(-18px); }
.wl-rank:not(.first) .wl-rank-photo.sns-ph .sns-ph-inner svg { width: 26px; height: 26px; }
.wl-rank:not(.first) .wl-rank-photo.sns-ph .sns-ph-inner small { display: none; }
.nd-card-photo.sns-ph .sns-ph-inner small { display: none; }
.detail-page .nd-embed-top { margin: 0 0 22px; }
.detail-page .nd-embed-top .nd-viewer { aspect-ratio: 16 / 9; border-radius: 8px; margin-bottom: 14px; }
@media (max-width: 767px) {
  .sns-ph-inner svg { width: 26px; height: 26px; }
  .sns-ph-inner b { font-size: 12px; }
  .sns-ph-inner small { display: none; }
  .detail-page .nd-embed-top .nd-viewer { margin: 0 0 12px; }
}

/* SNSで発見のカード：中央に縦長の埋め込み (2026-10-18) */
[data-sns-url] { overflow: hidden; }
[data-sns-url]:not(.wl-rank-photo) { position: relative; }
[data-sns-url].sns-loaded:not(.sns-thumb-img) { background-image: radial-gradient(ellipse at center, #2a2a2a 0%, #0d0d0d 75%) !important; }
[data-sns-url].sns-loaded .sns-ph-inner { display: none; }
.sns-frame { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); overflow: hidden; background: #000; pointer-events: none; box-shadow: 0 0 24px rgba(0,0,0,.45); }
.sns-frame.tall { aspect-ratio: 9 / 16; }
.sns-frame.post { aspect-ratio: 4 / 5; }
.sns-frame iframe { position: absolute; top: 0; left: 0; height: 1100px; border: 0; transform-origin: 0 0; pointer-events: none; }
.sns-frame iframe[data-w="326"] { width: 326px; }
.sns-frame iframe[data-w="325"] { width: 325px; }
.sns-ph.sns-thumb-img, .photo.sns-ph.sns-thumb-img { background-image: var(--sns-thumb), linear-gradient(135deg, #ff3b3b 0%, #c40000 100%) !important; background-size: cover !important; background-position: center !important; }
.sns-thumb-img .sns-ph-inner { display: none; }
/* ラベルは埋め込みより手前に */
.note-photo-link .card-status, .wl-src, .wl-rank-no, .wl-rank-text { z-index: 3; }

/* 埋め込みの投稿者名を隠さないよう、ラベルは下へ */
.wl-photo.sns-loaded .wl-src { top: auto; bottom: 10px; }
.note-photo-link:has(.sns-loaded) .card-status { top: auto; bottom: 10px; }
.wl-rank:has(.sns-loaded) .wl-rank-no { top: auto; bottom: 64px; }

/* Instagramの埋め込み:投稿者名+写真/動画の部分だけを見せる(下の白い部分は切る) */
.sns-frame.post { aspect-ratio: 326 / 462; }

/* SNSカードの左右：黒→カードと同じ薄いグレー、投稿に薄い影 */
[data-sns-url].sns-loaded:not(.sns-thumb-img) { background-image: none !important; background-color: #ecebe6 !important; }
.sns-frame { background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .16); }
.wl-rank:has(.sns-loaded) a::after { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%); }

/* 詳細ページ：Instagramは投稿者名＋写真/動画だけ（下の♡・コメント欄は切る） */
.detail-page .nd-ig { position: relative; width: min(100%, 400px); aspect-ratio: 400 / 556; margin: 0 auto 14px; overflow: hidden; border: 1px solid #e3e3e3; border-radius: 8px; background: #fff; }
.detail-page .nd-ig iframe { position: absolute; top: 0; left: 0; width: 400px; height: 1200px; border: 0; transform-origin: 0 0; }


/* =========================================================
   カテゴリー見直し：8つのテーマ＋TIPS (2026-10-18)
   ========================================================= */
.page-shell.home .theme-tiles { grid-template-columns: repeat(4, 1fr) !important; grid-auto-rows: clamp(150px, 14vw, 230px) !important; }
.page-shell.home .theme-tiles li .tile-cap { display: flex !important; flex-direction: column; gap: 2px; left: 14px; bottom: 12px; font-size: 14px; }
.page-shell.home .theme-tiles .tile-cap small { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .04em; opacity: .9; }
/* 中央の大きな文字と重なる列は見出しを上へ */
/* PC：8つすべてにテーマ名。上段の真ん中2枚は中央の文字と重ならないよう上側に */
@media (min-width: 768px) {
  .page-shell.home .theme-tiles li:nth-child(2) .tile-cap,
  .page-shell.home .theme-tiles li:nth-child(3) .tile-cap { top: 12px; bottom: auto; }
}
/* TIPS の帯 */
.page-shell .tips-band { display: flex; align-items: center; gap: 18px; margin: 0 0 64px; padding: 18px var(--inner); width: 100vw; margin-left: calc(50% - 50vw) !important; background: #f4f4f2; color: var(--ink); text-decoration: none; }
.page-shell .tips-band:hover { background: #ecebe6; }
.page-shell .tips-label { flex: 0 0 auto; padding: 6px 14px; border-radius: 999px; background: var(--navy); color: #fff; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .12em; }
.page-shell .tips-text { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.page-shell .tips-text b { font-family: var(--font-heading); font-weight: 900; font-size: 17px; }
.page-shell .tips-text small { font-size: 13px; color: var(--sub); }
.page-shell .tips-arrow { flex: 0 0 auto; font-size: 20px; font-weight: 700; color: var(--navy); }
.page-shell.home .join-band { margin-top: 0 !important; }
/* ノート一覧：TIPS ボタンは少し離して置く */
.notes-page .chip-row a.chip-tips { margin-left: 10px; border-style: dashed; }
.notes-page .chip-row a.chip-tips.active { border-style: solid; }
@media (max-width: 767px) {
  .page-shell.home .theme-tiles { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 34vw !important; }
  .page-shell.home .theme-tiles li .tile-cap { display: flex !important; font-size: 12px; left: 10px; bottom: 8px; }
  .page-shell.home .theme-copy { position: static; padding: 20px 16px; background: var(--navy); }
  .page-shell.home .theme-mosaic { display: flex; flex-direction: column-reverse; }
  .page-shell .tips-band { padding: 14px 16px; gap: 12px; margin-bottom: 44px; }
  .page-shell .tips-text b { font-size: 15px; }
  .page-shell .tips-text small { font-size: 12px; }
}

/* マイページ：気になるリスト (2026-10-18) */
#my-bookmarks-panel .form-head > span { display: grid; place-items: center; color: var(--navy); }
.mybm-tools { margin: 4px 0 12px; }
.mybm-tools .chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mybm-tools .chip-row a { padding: 5px 12px; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; }
.mybm-tools .chip-row a.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.mybm-list { display: grid; gap: 8px; }
.mybm-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--gray, #f4f4f2); }
.mybm-main { min-width: 0; color: var(--ink); text-decoration: none; }
.mybm-main b { display: block; font-size: 14px; line-height: 1.5; }
.mybm-main small { display: block; margin-top: 2px; font-size: 12px; color: #888; }
.mybm-main:hover b { text-decoration: underline; }
.mybm-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.mybm-report { font-size: 12px; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; }
.mybm-report.none { font-weight: 500; color: #aaa; }
.mybm-map { padding: 4px 10px; border: 1px solid #ccc; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink); text-decoration: none; }
.mybm-remove { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--navy); border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.mybm-remove svg { width: 12px; height: 12px; fill: currentColor; }
.mybm-remove:hover { background: #fff; color: var(--navy); }
.mybm-remove:hover svg { fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 767px) {
  .mybm-item { flex-direction: column; align-items: stretch; }
  .mybm-side { justify-content: space-between; }
}

/* マイページ：さがす / シェアする / アカウント を別枠に (2026-10-18) */
.my-page-main { display: block !important; max-width: 1080px; margin: 0 auto; padding: 24px 0 64px !important; }
.my-hero { margin: 0 0 20px; }
.my-kicker { margin: 0; color: var(--navy); font-family: "Poppins", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .14em; }
.my-hero h1 { margin: 4px 0 4px; font-family: var(--font-heading); font-weight: 900; font-size: clamp(26px, 2.6vw, 34px); color: var(--ink); }
.my-hello { margin: 0; color: var(--sub, #666); font-size: 14px; }
.my-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-bottom: 20px; }
.my-page-main .auth-card { width: auto !important; max-width: none !important; margin: 0 !important; }
.my-page-main .my-col .form-head h2, .my-page-main .my-account .form-head h2 { margin: 2px 0 4px; }
#my-bookmarks-panel { border-top: 4px solid var(--navy) !important; }
#my-notes-panel { border-top: 4px solid #c9963f !important; }
#my-notes-panel .my-kicker { color: #a5762a; }
.my-account { max-width: 520px !important; }
.my-account .my-kicker { color: #888; }
.my-page-main .mynote-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; background: var(--gray, #f4f4f2); }
@media (max-width: 860px) {
  .my-columns { grid-template-columns: 1fr; }
  .my-page-main { padding: 16px 0 48px !important; }
}
.my-page-main { text-align: left !important; }
.my-hero { text-align: left; }
.my-account { max-width: none !important; }
.my-account [data-profile] { max-width: 520px; }
.my-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid var(--navy); }
.my-btn.primary { background: var(--navy); color: #fff; }
.my-btn.ghost { background: #fff; color: #a33; border-color: #e0bcbc; }
.my-btn.ghost:hover { background: #fbeeee; }
.mynote-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.my-logout { background: #fff !important; color: var(--ink) !important; border: 1px solid #ccc !important; }
.my-page-main .my-hero { width: 100% !important; max-width: none !important; margin: 0 0 20px !important; text-align: left !important; }
.my-more { display: block; width: 100%; margin: 4px 0 0; padding: 9px; border: 1px dashed #ccc; border-radius: 10px; background: #fff; color: var(--navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.my-more:hover { background: #f7f7f5; }
.my-count { margin-left: 4px; font-family: "Poppins", sans-serif; font-size: .8em; color: var(--navy); }
.mybm-item[hidden], .mynote-item[hidden] { display: none !important; }
/* ===== マイページ:装飾を減らしたシンプル版 ===== */
.my-page-main .my-hero { padding-bottom: 14px !important; border-bottom: 1px solid #ddd; margin-bottom: 28px !important; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.my-page-main .my-hero h1 { margin: 0; font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); }
.my-page-main .my-hello { font-size: 14px; color: #777; }
.my-page-main .my-col, .my-page-main .my-account { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.my-page-main #my-bookmarks-panel, .my-page-main #my-notes-panel { border-top: 0 !important; }
.my-columns { gap: 48px; margin-bottom: 44px; }
.my-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px solid var(--ink); }
.my-sec-head h2 { margin: 0 !important; font-size: 18px; font-weight: 700; color: var(--ink); }
.my-sec-head a { font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; }
.my-sec-head a:hover { text-decoration: underline; }
.my-count { margin-left: 6px; font-family: inherit; font-size: 14px; font-weight: 500; color: #999; }
.my-page-main .mynote-item, .mybm-item { margin: 0 !important; padding: 14px 0 !important; border-radius: 0 !important; background: transparent !important; border-bottom: 1px solid #e6e6e6; }
.mybm-list { gap: 0; }
.my-page-main .mynote-item b, .my-page-main .mynote-info strong { font-weight: 700; }
.my-btn { height: auto; padding: 4px 2px; border: 0 !important; border-radius: 0; background: none !important; font-size: 13px; }
.my-btn.primary { color: var(--navy) !important; }
.my-btn.ghost { color: #b04040 !important; }
.my-btn:hover { text-decoration: underline; background: none !important; }
.mynote-actions { gap: 14px; }
.mybm-map { padding: 0; border: 0; color: var(--navy); }
.mybm-remove { padding: 0; border: 0; background: none; color: #999; font-weight: 500; }
.mybm-remove:hover { background: none; color: var(--ink); text-decoration: underline; }
.mybm-remove svg { display: none; }
.my-more { margin: 0; padding: 12px 0; border: 0; border-radius: 0; background: none; text-align: center; color: var(--navy); }
.my-more:hover { background: none; text-decoration: underline; }
.my-page-main .field-note { padding: 14px 0; }
.my-account .my-sec-head { max-width: 520px; }
.my-page-main { box-sizing: border-box; width: 100%; padding-left: 20px !important; padding-right: 20px !important; }
.my-page-main > .my-columns, .my-page-main > .my-account { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; justify-self: stretch !important; }
.my-account > * { max-width: 520px; }
.my-account .auth-message:empty { display: none; }
/* ===== フォーム系ページ:装飾を減らしたシンプル版(マイページと統一) ===== */
.page-shell .form-panel:not(.my-col):not(.my-account), .page-shell .auth-card:not(.my-col):not(.my-account) { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.page-shell .form-panel + .form-panel { margin-top: 40px !important; }
.page-shell .form-head > span { display: none !important; }
.page-shell .form-head { display: block !important; padding: 0 0 10px !important; margin: 0 0 18px !important; border-bottom: 2px solid var(--ink) !important; }
.page-shell .form-head h2 { margin: 0 !important; font-size: 18px !important; font-weight: 700 !important; color: var(--ink) !important; font-family: inherit !important; }
.page-shell .form-head p { margin: 6px 0 0 !important; font-size: 13px !important; color: #777 !important; }
.page-shell .member-panel .form-head { border-bottom: 1px solid #ddd !important; }
.page-shell .member-panel .form-head h2 { font-size: 15px !important; }
.auth-page-main:not(.my-page-main) .auth-card { width: min(440px, 100%) !important; }
.page-shell .confirm-panel .section-head h2 > span { display: none; }
/* 投稿ページ:箱・クリーム地を減らす */
.page-shell .post-hero { padding: 8px 0 16px !important; border: 0 !important; border-bottom: 1px solid #ddd !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin-bottom: 28px !important; }
.page-shell .post-hero h1 { font-size: clamp(22px, 2.2vw, 28px) !important; font-weight: 700 !important; }
.page-shell .post-flow { display: flex !important; flex-wrap: wrap; gap: 0 !important; align-self: end; margin: 0; padding: 0; list-style: none; }
.page-shell .post-flow li { display: inline-flex !important; align-items: center; gap: 0 !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-size: 13px !important; color: #777 !important; font-weight: 500 !important; flex-direction: row !important; }
.page-shell .post-flow li span { display: none !important; }
.page-shell .post-flow li + li::before { content: "→"; margin: 0 8px; color: #bbb; }
.page-shell .post-flow li:first-child { color: var(--ink) !important; font-weight: 700 !important; }
.page-shell .member-panel { margin-bottom: 8px !important; }
.page-shell .member-panel .form-head { margin-bottom: 0 !important; }
.page-shell .choice-card { background: #fff !important; border: 1px solid #ddd !important; border-radius: 8px !important; box-shadow: none !important; }
.page-shell .choice-card:has(input:checked) { border-color: var(--navy) !important; box-shadow: inset 0 0 0 1px var(--navy) !important; }
.page-shell .upload-box { background: #fff !important; border: 1px dashed #ccc !important; border-radius: 8px !important; }
.page-shell .upload-box span { background: var(--navy) !important; color: #fff !important; }
.page-shell .rule-list label { background: none !important; border: 0 !important; border-bottom: 1px solid #eee !important; border-radius: 0 !important; padding: 12px 0 !important; }
.page-shell .post-form { padding-bottom: 56px !important; }
.page-shell .confirm-panel, .page-shell .complete-panel { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.page-shell .attention-box { background: #f7f7f5 !important; border: 0 !important; border-radius: 8px !important; }
.page-shell .rule-panel { margin-bottom: 56px !important; }
/* 一覧ページの見出しもマイページとそろえる */
.page-shell .wl-hero { padding: 8px 0 16px !important; border: 0 !important; border-bottom: 1px solid #ddd !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.page-shell .wl-hero h1, .page-shell .notes-head h1 { font-size: clamp(22px, 2.2vw, 28px) !important; font-weight: 700 !important; }
.page-shell .wl-ranking h2, .page-shell .wl-how h2 { font-size: 18px !important; font-weight: 700 !important; }
/* 管理画面リンク(管理者のときだけ表示) */
.page-shell .auth-mini a.auth-admin { color: var(--navy) !important; border: 1px solid var(--navy) !important; background: #fff !important; }
/* ABOUTページ */
.about-main { box-sizing: border-box; max-width: 760px; margin: 0 auto; padding: 24px 20px 72px !important; display: block !important; }
.about-hero { padding-bottom: 20px; margin-bottom: 36px; border-bottom: 1px solid #ddd; }
.about-hero h1 { margin: 0 0 12px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; color: var(--ink); }
.about-hero p { margin: 0; font-size: 15px; line-height: 1.9; color: #444; }
.about-sec { margin-bottom: 40px; }
.about-sec h2 { margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font-size: 18px; font-weight: 700; color: var(--ink); }
.about-sec p { margin: 14px 0 0; font-size: 14px; line-height: 1.9; color: #444; }
.about-list { display: grid; grid-template-columns: 9em 1fr; margin: 0; }
.about-list dt, .about-list dd { margin: 0; padding: 14px 0; border-bottom: 1px solid #e6e6e6; font-size: 14px; line-height: 1.8; }
.about-list dt { font-weight: 700; color: var(--ink); }
.about-list dd { color: #444; }
.about-list a, .about-sec p a { color: var(--navy); font-weight: 700; }
.about-rules { margin: 0; padding: 0; list-style: none; }
.about-rules li { padding: 12px 0 12px 1.2em; border-bottom: 1px solid #e6e6e6; font-size: 14px; line-height: 1.8; color: #444; text-indent: -1.2em; }
.about-rules li::before { content: "・"; }
.about-cta { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .about-list { grid-template-columns: 1fr; }
  .about-list dt { padding-bottom: 0; border-bottom: 0; }
  .about-list dd { padding-top: 4px; }
}
/* ヘッダーメニューを日本語に */
.page-shell .site-header .top-nav a { font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .02em !important; text-transform: none !important; white-space: nowrap; }
.page-shell .site-header .top-nav a[aria-current="page"] { color: var(--navy) !important; }
@media (min-width: 1024px) {
  .page-shell .site-header .top-nav { gap: 24px !important; }
  .page-shell .site-header .auth-mini > span { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .page-shell .site-header .top-nav { gap: 18px !important; }
  .page-shell .site-header .top-nav a { font-size: 13px !important; }
  .page-shell .site-header .auth-mini { display: none !important; }
  .page-shell .site-header > .menu-button { display: block !important; order: 9 !important; margin-left: auto; }
}
/* ===== ノート詳細:装飾を減らしたシンプル版 ===== */
.detail-page .nd-head h1 { font-weight: 700 !important; }
.detail-page .nd-box, .detail-page .nd-embed { padding: 0 !important; border-radius: 0 !important; background: transparent !important; }
.detail-page .nd-box + .nd-box { margin-top: 36px; }
.detail-page .nd-box h2, .detail-page .nd-embed h2, .detail-page .nd-comments h2, .detail-page .nd-related-head h2 { margin: 0 0 4px !important; padding-bottom: 10px; border-bottom: 2px solid var(--ink) !important; font-family: inherit !important; font-weight: 700 !important; font-size: 18px !important; line-height: 1.4; color: var(--ink); }
.detail-page .nd-related-head { align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 16px !important; }
.detail-page .nd-related-head h2 { border-bottom: 0 !important; padding-bottom: 0; margin: 0 !important; }
.detail-page .nd-related-head a { font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: none; }
.detail-page .nd-related { border-top: 0 !important; }
.detail-page .nd-comments h2 #comment-count { margin-left: 4px; font-size: 14px; font-weight: 500; color: #999; }
.detail-page .nd-comments h2 { border-top: 0 !important; }
.detail-page .detail-comments { gap: 0 !important; }
.detail-page .detail-comments article { margin: 0 !important; padding: 14px 0 !important; border: 0 !important; border-bottom: 1px solid #e6e6e6 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.detail-page .detail-comments article em { background: none !important; border: 1px solid #ddd !important; color: #666 !important; }
.detail-page .nd-empty { padding: 14px 0 !important; border-radius: 0 !important; background: transparent !important; border-bottom: 1px solid #e6e6e6; }
.detail-page .nd-mini-list { margin-top: 4px; }
.detail-page .nd-mini { padding: 12px 0 !important; border-bottom: 1px solid #e6e6e6; }
.detail-page .nd-mini-photo { border-radius: 4px !important; }
.detail-page .nd-top { border-bottom: 0 !important; }
.detail-page .detail-comments { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
/* スマホのヘッダー:クリーム地をやめて白に */
@media (max-width: 1023px) {
  .page-shell .site-header { background: rgba(255,255,255,.96) !important; border-radius: 0 !important; border-bottom: 1px solid #eee !important; }
}
/* フッターの見出しを日本語に・スマホでは2列 */
.page-shell .footer-head { font-family: inherit !important; letter-spacing: .04em !important; font-size: 12px !important; }
@media (max-width: 600px) {
  .page-shell .footer-nav { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px 20px !important; }
  .page-shell .footer-nav a { word-break: keep-all; }
}
/* ノート一覧の絞り込み欄:グレーの箱をやめて線で区切る */
.notes-page .notes-filter { gap: 0 !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.notes-page .notes-filter .filter-row { padding: 12px 0; }
.notes-page .notes-filter .filter-row + .filter-row { border-top: 1px solid #eee; }
.notes-page .notes-filter .filter-row > b { color: #777; font-weight: 700; }
@media (max-width: 767px) {
  .notes-page .notes-filter { margin: 0 0 16px !important; }
  .notes-page .notes-filter .filter-row { padding: 10px 0; }
}
.notes-page .notes-filter { border-top: 0 !important; margin-top: -8px !important; }
/* Q&A:英字をやめて日本語の見出しを大きく */
.page-shell.home #questions .section-head h2 { margin: 0 !important; font-family: inherit !important; font-size: clamp(26px, 2.6vw, 34px) !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--ink) !important; }
/* ===== 地図ページ ===== */
.map-main { box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: 16px 20px 56px !important; display: block !important; }
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #ddd; }
.map-head h1 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; color: var(--ink); }
.map-locate { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.map-locate svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.map-locate.loading { opacity: .6; cursor: wait; }
.map-locate.on { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.map-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.map-chips::-webkit-scrollbar { display: none; }
.map-chips a { flex: 0 0 auto; padding: 6px 14px; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.map-chips a.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; height: min(72vh, 720px); }
.map-canvas { height: 100%; border-radius: 8px; background: #eef1f2; z-index: 0; }
.map-side { display: flex; flex-direction: column; min-height: 0; }
.map-summary { margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font-size: 14px; font-weight: 700; color: var(--ink); }
.map-list { flex: 1; overflow-y: auto; }
.map-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid #e6e6e6; color: var(--ink); text-decoration: none; }
.map-item:hover, .map-item.active { background: #f7f7f5; }
.map-item-img { flex: 0 0 56px; height: 56px; border-radius: 4px; background: #e9e9e6 center / cover no-repeat; }
.map-item-text { flex: 1; min-width: 0; }
.map-item-text b { display: block; font-size: 14px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.map-item-text small { display: block; margin-top: 2px; font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-item-dist { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--navy); }
.map-pin { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); box-sizing: border-box; transition: transform .15s; }
.map-pin.sns { background: #c9963f; }
.map-pin.active, .leaflet-marker-icon:hover .map-pin { transform: scale(1.25); }
.map-here { display: block; width: 18px; height: 18px; border-radius: 50%; background: #2a7de1; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(42,125,225,.25); box-sizing: border-box; }
.map-pop { display: block; color: var(--ink); text-decoration: none; font-family: "Noto Sans JP", sans-serif; }
.map-pop-img { display: block; height: 110px; margin: -2px 0 8px; border-radius: 4px; background: #eee center / cover no-repeat; }
.map-pop b { display: block; font-size: 14px; line-height: 1.45; }
.map-pop small { display: block; margin-top: 2px; font-size: 12px; color: #888; }
.map-pop em { display: block; margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--navy); }
.map-page .leaflet-popup-content { margin: 12px; }
.map-page .leaflet-popup-content-wrapper { border-radius: 8px; }
@media (max-width: 860px) {
  .map-layout { grid-template-columns: 1fr; height: auto; gap: 14px; }
  .map-canvas { height: 58vh; }
  .map-list { overflow: visible; }
  .map-locate { width: 100%; justify-content: center; }
  .map-main { padding: 12px 14px 48px !important; }
}
.admin-hint { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; color: #888; line-height: 1.5; }
.map-page .leaflet-container a.map-pop { color: var(--ink); }
.map-item[hidden] { display: none !important; }
.map-more { display: block; width: 100%; padding: 12px 0; border: 0; background: none; color: var(--navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
/* ノート詳細:近くのノート */
.detail-page .nd-nearby-note { font-size: 12px; color: #888; }
.detail-page .nd-nearby + .nd-related { margin-top: 0; }
/* カードの店名 */
.page-shell .note-spot { display: flex; align-items: center; gap: 4px; margin: 4px 0 6px; font-size: 13px; font-weight: 500; color: #555; line-height: 1.4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.page-shell .note-spot svg { flex: 0 0 13px; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.page-shell .note-spot[hidden] { display: none; }
.page-shell .note-card > p.note-spot:not([hidden]) { display: flex !important; order: 2; margin: -4px 16px 8px !important; padding: 0 !important; }
/* トップ:読み込み中のカード */
.page-shell .note-card.note-skeleton { pointer-events: none; }
.note-skeleton .sk-photo { display: block; aspect-ratio: 4 / 3; background: #ecebe8; }
.note-skeleton .sk-line { display: block; height: 14px; margin: 14px 16px 0; border-radius: 4px; background: #ecebe8; }
.note-skeleton .sk-line.short { width: 50%; margin-bottom: 18px; }
.note-skeleton .sk-photo, .note-skeleton .sk-line { animation: sk-pulse 1.2s ease-in-out infinite alternate; }
@keyframes sk-pulse { from { opacity: 1; } to { opacity: .55; } }
.page-shell .note-grid-message { grid-column: 1 / -1; margin: 0; padding: 32px 0; text-align: center; color: #777; font-size: 14px; }
.page-shell .note-card.note-skeleton > .sk-photo { display: block !important; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.page-shell .note-card.note-skeleton > .sk-line { display: block !important; }
/* ===== トップ:サイトの説明の帯 ===== */
.concept-band { max-width: 1176px; margin: 0 auto; padding: 28px 20px 8px; box-sizing: border-box; }
.concept-lead { margin: 0 0 18px; text-align: center; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.concept-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; }
.concept-steps li { padding: 16px 20px; text-align: center; }
.concept-steps li + li { border-left: 1px solid #e3e3e3; }
.concept-steps b { display: block; font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: .06em; }
.concept-steps span { display: block; margin-top: 4px; font-size: 13px; color: #666; line-height: 1.6; }
.page-shell.home .area-strip { border-top: 0 !important; }
/* ===== トップ:みんなが気になっている場所 ===== */
.watch-pick { max-width: 1176px; margin: 8px auto 56px; padding: 0 20px; box-sizing: border-box; }
.watch-pick[hidden] { display: none !important; }
.watch-pick-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 18px; }
.watch-pick-item { display: block; color: var(--ink); text-decoration: none; }
.watch-pick-photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #e9e9e6 center / cover no-repeat; }
.watch-pick-photo i { position: absolute; left: 10px; top: 6px; z-index: 2; font-family: "Poppins", sans-serif; font-style: normal; font-weight: 800; font-size: 40px; line-height: 1; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.watch-pick-text { display: block; padding-top: 10px; }
.watch-pick-text b { display: block; font-size: 15px; line-height: 1.5; }
.watch-pick-text small { display: block; margin-top: 2px; font-size: 12px; color: #888; }
.watch-pick-text em { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 700; color: #a5762a; }
.watch-pick-text em svg { width: 12px; height: 12px; fill: currentColor; }
.watch-pick-item:hover b { text-decoration: underline; }
/* ===== トップ:新着ノート 1段目2件・2〜3段目3件ずつ、カード白地 ===== */
.page-shell.home .note-grid-main { grid-template-columns: repeat(6, 1fr) !important; }
.page-shell.home .note-grid-main .note-card { grid-column: span 2 !important; background: #fff !important; box-shadow: none !important; }
.page-shell.home .note-grid-main .note-card:nth-child(-n+2) { grid-column: span 3 !important; }
.page-shell.home .note-grid-main .note-card:nth-child(-n+2) .photo { height: 300px !important; }
.page-shell.home .note-grid-main .note-card:nth-child(-n+2) h3 { font-size: 18px !important; }
.page-shell.home .note-grid-main .note-card:not(.note-skeleton):nth-child(n+7):nth-child(-n+8) { display: flex !important; }
.page-shell.home .note-grid-main .note-skeleton:nth-child(n+7):nth-child(-n+8) { display: block !important; }
.page-shell.home .note-grid-main .note-card:nth-child(n+9) { display: none !important; }
@media (max-width: 767px) {
  .concept-steps { grid-template-columns: 1fr; }
  .concept-steps li { padding: 12px 8px; }
  .concept-steps li + li { border-left: 0; border-top: 1px solid #eee; }
  .concept-lead { font-size: 14px; word-break: keep-all; overflow-wrap: anywhere; }
  .watch-pick-list { grid-template-columns: 1fr; gap: 14px; }
  .watch-pick-item { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
  .watch-pick-text { padding-top: 0; }
  .page-shell.home .note-grid-main { grid-template-columns: repeat(2, 1fr) !important; }
  .page-shell.home .note-grid-main .note-card, .page-shell.home .note-grid-main .note-card:nth-child(-n+2) { grid-column: span 1 !important; }
  .page-shell.home .note-grid-main .note-card:nth-child(-n+2) .photo { height: auto !important; }
  .page-shell.home .note-grid-main .note-card:nth-child(-n+2) h3 { font-size: inherit !important; }
  .page-shell.home .note-grid-main .note-card:nth-child(n+7),
  .page-shell.home .note-grid-main .note-card:not(.note-skeleton):nth-child(n+7):nth-child(-n+8),
  .page-shell.home .note-grid-main .note-skeleton:nth-child(n+7):nth-child(-n+8) { display: none !important; }
}
/* ===== トップ:投稿の誘いの帯をフッターと区別(淡い黄色) ===== */
.page-shell .join-band { background: var(--sun) !important; color: var(--ink) !important; }
.page-shell .join-band h2 { color: var(--ink) !important; }
.page-shell .join-copy > p, .page-shell .join-band p { color: #555 !important; }
.page-shell .join-btn { background: var(--navy) !important; color: #fff !important; }
.page-shell .join-link { color: var(--navy) !important; }
.page-shell .join-steps li { background: #fff !important; }
.page-shell .join-steps b { color: var(--navy) !important; }
.page-shell .join-steps span { color: var(--ink) !important; }
.page-shell .join-steps small { color: #777 !important; }
/* ===== トップ:新着ノートの絞り込みを「タブ」の形に(上のエリアのボタンと区別) ===== */
.page-shell.home .note-filters { gap: 4px 22px !important; border-bottom: 1px solid #e3e3e3 !important; padding-bottom: 0 !important; }
.page-shell.home .note-filters a { padding: 8px 2px 10px !important; border-radius: 0 !important; background: none !important; color: #777 !important; font-weight: 700; border-bottom: 2px solid transparent !important; margin-bottom: -1px; }
.page-shell.home .note-filters a:hover { color: var(--ink) !important; }
.page-shell.home .note-filters a.active { background: none !important; color: var(--ink) !important; border-bottom-color: var(--ink) !important; }
/* 投稿の誘いの見出しを軽く */
.page-shell .join-band h2 { font-family: inherit !important; font-weight: 700 !important; font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.6 !important; letter-spacing: .02em; }
/* カードのタイトルを途中で折り返さない(幅の上限を外す) */
.page-shell .note-card h3 { max-width: none !important; }
/* コメント数のアイコン(絵文字だとWindowsで紫色になるため線のアイコンに) */
.ico-cmt { width: 12px; height: 12px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
/* 利用規約・プライバシーポリシー */
.legal-main .about-sec p + p { margin-top: 10px; }
.legal-ph { padding: 1px 4px; background: #fff3c4; color: #8a5a00; font-weight: 700; }
.legal-date { margin-top: 24px !important; font-size: 12px !important; color: #999 !important; }
.auth-agree { margin: 4px 0 12px; font-size: 12px; color: #777; line-height: 1.7; text-align: center; }
.auth-agree a { color: var(--navy); font-weight: 700; }
/* ===== ヘッダーの「ノートを書く」 ===== */
.page-shell .site-header > .nav-post { order: 3; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--navy); color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.page-shell .site-header > .nav-post svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.page-shell .site-header > .nav-post:hover { background: var(--navy-dark); }
.page-shell .site-header > .auth-mini { order: 4; margin-left: 12px !important; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .page-shell .site-header > .menu-button { margin-left: 10px !important; }
}
@media (max-width: 1023px) {
  .page-shell .site-header > .nav-post { display: none !important; }
}
/* ===== トップ:ヒーローの2つのボタン ===== */
.page-shell.home .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.page-shell.home .hero-actions .hero-post { background: #fff !important; color: var(--navy) !important; border: 1px solid #fff !important; }
.page-shell.home .hero-actions .hero-post:hover { background: rgba(255,255,255,.9) !important; }
/* ===== トップのカード:投稿タイプと投稿者名を表示 ===== */
.page-shell.home .note-photo-link { position: relative; display: block; overflow: hidden; }
.page-shell.home .note-photo-link .card-status { position: absolute; left: 10px; top: 10px; z-index: 3; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 11px; font-weight: 700; }
.page-shell.home .note-photo-link .card-status.visited { background: var(--navy); color: #fff; }
.page-shell.home .note-grid-main .note-card > footer { display: flex !important; justify-content: space-between; gap: 8px; }
.page-shell.home .note-grid-main .card-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #666; font-weight: 500; }
.page-shell.home .note-grid-main .card-stats { flex: 0 0 auto; }
.page-shell.home .editorial-hero .hero-actions a.button.hero-post { background: #fff !important; color: var(--navy) !important; border-color: #fff !important; }
.page-shell.home .note-grid-main .note-card > footer { justify-content: space-between !important; align-self: stretch !important; }
.page-shell .rule-note { margin: 4px 0 0; padding: 12px 0; font-size: 13px; color: #666; line-height: 1.7; }
/* ===== お店・サービスとの関係のラベル ===== */
.rel-badge { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid #c9963f; border-radius: 3px; background: #fff; color: #8a6420; font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.rel-badge.pr { border-color: #999; color: #555; }
.note-tags .rel-badge { margin-left: 2px; }
/* ===== 投稿フォーム:「詳しく書く」 ===== */
.page-shell .post-more { margin-top: 40px !important; border-top: 2px solid var(--ink) !important; border-bottom: 1px solid #ddd !important; }
.page-shell .post-more > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 0; cursor: pointer; list-style: none; }
.page-shell .post-more > summary::-webkit-details-marker { display: none; }
.page-shell .post-more > summary::before { content: "＋"; font-weight: 700; color: var(--navy); }
.page-shell .post-more[open] > summary::before { content: "－"; }
.post-more-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.post-more-sub { font-size: 13px; color: #777; }
.page-shell .post-more[open] > .form-grid { padding-bottom: 20px; }
.note-tags .rel-badge { order: 9 !important; background: #fff !important; color: #8a6420 !important; border: 1px solid #c9963f !important; padding: 1px 8px !important; }
.note-tags .rel-badge.pr { color: #555 !important; border-color: #999 !important; }
/* トップ:SNS埋め込みが読み込まれたカードのラベルが縦に伸びないように(上下両方に位置指定されていた) */
.page-shell.home .note-photo-link .card-status { bottom: auto; height: auto; }
.page-shell.home .note-photo-link:has(.sns-loaded) .card-status { top: auto; bottom: 10px; }
/* ===== 投稿タイプ「お店・サービスから」(金茶) ===== */
.notes-page .card-status.shop, .page-shell.home .note-photo-link .card-status.shop,
.detail-page .nd-card-photo i.shop { background: #c9963f !important; color: #fff !important; }
.detail-page .nd-status.shop { background: #c9963f; border-color: #c9963f; color: #fff; }
.note-state.shop { background: #c9963f !important; color: #fff !important; }
.page-shell .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 767px) { .page-shell .choice-grid { grid-template-columns: 1fr !important; } }
.post-shop-note { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid #c9963f; background: #fbf5d9; font-size: 13px; color: #555; line-height: 1.7; }
.post-shop-note[hidden], .relation-field[hidden] { display: none !important; }
/* =========================================================
   トップページ 再構成(2026-10-21)
   ========================================================= */
/* ① メイン写真:少しコンパクトに */
.page-shell.home .editorial-hero.hero-index { min-height: clamp(400px, 58vh, 580px) !important; }
.page-shell.home .editorial-hero.hero-index h1 { font-size: clamp(56px, 8vw, 112px) !important; }
@media (max-width: 767px) { .page-shell.home .editorial-hero.hero-index { min-height: 56vh !important; } }
html { scroll-behavior: smooth; }
#search { scroll-margin-top: 80px; }

/* ② 探す:検索 → エリア → テーマ */
.find-band { max-width: 1176px; margin: 0 auto; padding: 32px 20px 12px; box-sizing: border-box; }
.find-search { display: flex; gap: 8px; max-width: 640px; margin: 0 auto 24px; }
.find-search input { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 1px solid #ccc; border-radius: 999px; font: inherit; font-size: 15px; background: #fff; }
.find-search input:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.find-search button { flex: 0 0 auto; height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.find-row { margin-bottom: 22px; }
.find-label { margin: 0 0 10px !important; font-size: 14px !important; font-weight: 700 !important; color: #666 !important; text-align: left; font-family: inherit !important; }
.page-shell.home .find-band .area-scroll { display: flex; flex-wrap: wrap; justify-content: flex-start !important; gap: 8px !important; }
.page-shell.home .find-band .area-pill { display: inline-flex !important; align-items: baseline; gap: 5px; padding: 7px 14px !important; border: 1px solid #ddd !important; border-radius: 999px !important; background: #fff !important; color: var(--ink) !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none; }
.page-shell.home .find-band .area-pill small { display: inline !important; font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 600; color: #999; }
.page-shell.home .find-band .area-pill.all-area { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; }
.page-shell.home .find-band .area-pill:hover { border-color: var(--navy) !important; }
.theme-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.theme-buttons a { position: relative; display: block; height: 96px; overflow: hidden; border-radius: 6px; background: var(--navy); text-decoration: none; }
.theme-buttons img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.theme-buttons a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.55)); }
.theme-buttons span { position: absolute; left: 12px; bottom: 10px; z-index: 2; color: #fff; font-size: 15px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.theme-buttons a:hover img { transform: scale(1.05); }
.theme-buttons .theme-all a { display: flex; align-items: center; justify-content: center; background: #f4f4f2; border: 1px solid #e3e3e3; }
.theme-buttons .theme-all a::after { display: none; }
.theme-buttons .theme-all span { position: static; color: var(--navy); text-shadow: none; font-size: 14px; }
@media (max-width: 767px) {
  .find-band { padding: 20px 16px 4px; }
  .find-search button { padding: 0 18px; }
  .page-shell.home .find-band .area-scroll { flex-wrap: nowrap !important; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .page-shell.home .find-band .area-pill { flex: 0 0 auto; }
  .theme-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .theme-buttons a { height: 64px; }
  .theme-buttons span { font-size: 14px; left: 10px; bottom: 8px; }
}

/* ③ みんなの行ってきた:同じ大きさで3列×2段 */
.page-shell.home .note-hub-head h2 { margin: 0 !important; font-family: inherit !important; font-size: clamp(24px, 2.4vw, 30px) !important; font-weight: 700 !important; color: var(--ink) !important; }
.page-shell.home .note-hub-head p { margin: 4px 0 0 !important; font-size: 13px !important; color: #777 !important; }
.page-shell.home .note-hub-head { text-align: left !important; display: flex !important; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 20px !important; }
.page-shell.home .note-grid-main { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.page-shell.home .note-grid-main .note-card, .page-shell.home .note-grid-main .note-card:nth-child(-n+2) { grid-column: auto !important; }
.page-shell.home .note-grid-main .note-card:nth-child(-n+2) .photo { height: auto !important; }
.page-shell.home .note-grid-main .note-card .photo { aspect-ratio: 4 / 3 !important; height: auto !important; }
.page-shell.home .note-grid-main .note-card:nth-child(-n+2) h3 { font-size: inherit !important; }
.page-shell.home .note-grid-main .note-card:not(.note-skeleton):nth-child(n+7) { display: none !important; }
.page-shell.home .note-grid-main .note-card h3 a { color: inherit; text-decoration: none; }
.page-shell.home .note-grid-main .note-card h3 a:hover { text-decoration: underline; }
.card-date { margin-left: 8px; font-style: normal; color: #999; }
@media (max-width: 767px) {
  .page-shell.home .note-grid-main { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .page-shell.home .note-hub-head { flex-direction: row !important; }
  .card-date { display: block; margin: 2px 0 0; }
}

/* ④ みんなの気になる(SNSで見つけたバリ):縦型カードを横に並べる */
.sns-corner, .shop-corner { max-width: 1176px; margin: 8px auto 56px; padding: 0 20px; box-sizing: border-box; }
.sns-corner[hidden], .shop-corner[hidden] { display: none !important; }
.sns-corner .section-head, .shop-corner .section-head { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 18px; }
.sns-corner .section-head h2, .shop-corner .section-head h2 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; color: var(--ink); font-family: inherit; }
.sns-corner .section-head p, .shop-corner .section-head p { margin: 4px 0 0; font-size: 13px; color: #777; }
.sns-corner .section-links a, .shop-corner .section-links a { font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: none; }
.sns-list { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.sns-card { scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid #e6e6e6; border-radius: 8px; overflow: hidden; background: #fff; }
.sns-card-media { position: relative; display: block; aspect-ratio: 3 / 4; background: #ecebe6 center / cover no-repeat; }
.sns-card-media.sns-ph { display: flex; align-items: center; justify-content: center; }
.sns-card-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 14px; flex: 1; }
.sns-card-spot { font-size: 15px; line-height: 1.4; color: var(--ink); }
.sns-card-why { margin: 0; font-size: 13px; line-height: 1.6; color: #444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sns-card-meta, .sns-card-origin, .sns-card-via { font-size: 11px; color: #888; line-height: 1.5; }
.sns-card-via.pick { color: #a5762a; font-weight: 700; }
.sns-card-links { display: flex; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid #eee; }
.sns-card-links a { font-size: 12px; font-weight: 700; color: var(--navy); text-decoration: none; }
.sns-card-links a:hover { text-decoration: underline; }
.sns-share { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: none; }
.sns-share:hover { text-decoration: underline; }
/* 1〜2件のときはコンパクトに(写真を左、文字を右) */
.sns-list.is-compact { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
.sns-list.is-compact .sns-card { flex-direction: row; }
.sns-list.is-compact .sns-card-media { flex: 0 0 120px; aspect-ratio: auto; min-height: 160px; }
@media (max-width: 767px) {
  .sns-corner, .shop-corner { padding: 0 16px; }
  .sns-list { grid-auto-columns: 62%; margin: 0 -16px; padding: 0 16px 8px; }
  .sns-list.is-compact { grid-template-columns: 1fr; margin: 0; padding: 0; }
}

/* ⑥ お店・サービスから */
.shop-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shop-list.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-card { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid #e6e6e6; border-radius: 8px; color: var(--ink); text-decoration: none; background: #fff; }
.shop-card:hover { border-color: #c9963f; }
.shop-card-photo { flex: 0 0 88px; height: 88px; border-radius: 6px; background: #ecebe6 center / cover no-repeat; }
.shop-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-card-body b { font-size: 14px; }
.shop-card-body span { font-size: 13px; color: #444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-card-body small { font-size: 11px; color: #888; }
@media (max-width: 767px) { .shop-list, .shop-list.is-compact { grid-template-columns: 1fr; } }

/* ⑦ 参加案内:入口を2つ */
.page-shell .join-band { display: block !important; text-align: center; }
.page-shell .join-band .join-copy { max-width: 720px; margin: 0 auto; }
.page-shell .join-band .join-actions { justify-content: center; flex-wrap: wrap; gap: 12px !important; }
.page-shell .join-band .join-btn.ghost { background: #fff !important; color: var(--navy) !important; border: 1px solid var(--navy) !important; }
.page-shell .join-band .join-link { display: inline-block; margin-top: 14px; }

/* トップ再構成 微調整(2026-10-21b) */
.sns-list.is-compact .sns-ph-inner b { font-size: 12px; white-space: nowrap; }
.sns-list.is-compact .sns-ph-inner small { display: none; }
.page-shell.home .note-hub-head .section-links a { white-space: nowrap; }
@media (max-width: 767px) {
  .page-shell.home .note-grid-main .note-card footer { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 6px; }
  .page-shell.home .note-grid-main .card-user { display: contents !important; }
  .page-shell.home .note-grid-main .card-date { display: block !important; grid-column: 1 / -1; order: 3; margin: 2px 0 0 !important; white-space: nowrap; }
  .page-shell.home .note-hub-head { flex-wrap: wrap; }
  .page-shell.home .note-hub-head .section-links { margin-left: auto; text-align: right; justify-content: flex-end; }
}
/* SNSコーナー:公式埋め込みを表示(2026-10-21d) */
.sns-card-media.sns-loaded:not(.sns-thumb-img) { background: #ecebe6 !important; }
.sns-list.is-compact .sns-card-media .sns-frame { box-shadow: none; }
/* トップ:1行タイトルのとき写真の下に空きができないように(2026-10-21g) */
.page-shell.home .note-grid-main .note-photo-link { height: auto !important; flex: 0 0 auto; }
.page-shell.home .note-grid-main .note-card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* トップ「みんなの行ってきた」:全部 行ってきた なのでラベルを出さない(2026-10-21h) */
.page-shell.home #notes .card-status.visited { display: none !important; }
/* トップ画像:各写真が自分の枠の範囲だけに広がるようにして、見せたい部分を調整しやすく(2026-10-21i) */
@media (min-width: 768px) {
  .hero-slides .slide .p1 i { top: 0; bottom: 50%; left: 0; right: 69%; }
  .hero-slides .slide .p2 i { top: 50%; bottom: 0; left: 0; right: 75.5%; }
  .hero-slides .slide .p4 i { top: 0; bottom: 50%; left: 76%; right: 0; }
  .hero-slides .slide .p5 i { top: 50%; bottom: 0; left: 70%; right: 0; }
  .hero-slides .mirror .p1 i { top: 0; bottom: 50%; left: 69%; right: 0; }
  .hero-slides .mirror .p2 i { top: 50%; bottom: 0; left: 75.5%; right: 0; }
  .hero-slides .mirror .p4 i { top: 0; bottom: 50%; left: 0; right: 76%; }
  .hero-slides .mirror .p5 i { top: 50%; bottom: 0; left: 0; right: 70%; }
}
/* 投稿フォーム:SNS投稿のシェアと「どうやって伝えるか」(2026-10-22) */
.share-ask { margin: 0 0 18px; padding: 16px 18px; background: var(--sun, #fbf5d9); border-radius: 8px; }
.share-ask-q { margin: 0 0 10px; font-weight: 700; font-size: 15px; color: #222; }
.share-ask-row { display: flex; flex-wrap: wrap; gap: 10px; }
.share-ask-btn { appearance: none; padding: 10px 18px; border: 1px solid #ccc; border-radius: 999px; background: #fff; color: #222; font: inherit; font-weight: 700; cursor: pointer; }
.share-ask-btn.on { background: var(--navy, #1d3557); border-color: var(--navy, #1d3557); color: #fff; }
.share-ask-sub { margin-top: 14px; }
.media-choice { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eee; }
.media-choice[hidden] { display: none; }
.media-choice-q { margin: 0 0 10px; font-weight: 700; font-size: 15px; color: #222; }
.media-choice-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.media-choice-row label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; }
.own-sns-field > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.own-sns-field[hidden], .sns-author-field[hidden] { display: none !important; }
.page-shell .own-sns-field > span { display: flex !important; align-items: center; gap: 10px; font-weight: 700; }
.page-shell .own-sns-field input[type="checkbox"] { width: 20px !important; height: 20px !important; min-height: 0 !important; flex: 0 0 auto; margin: 0 !important; padding: 0 !important; }
/* 投稿フォーム:カード写真の表示位置(2026-10-22) */
.focus-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eee; }
.focus-box[hidden], .focus-range[hidden] { display: none !important; }
.focus-title { margin: 0 0 8px; font-weight: 700; font-size: 14px; color: #222; }
.focus-frame { width: min(360px, 100%); aspect-ratio: 4 / 3; background: #eee center / cover no-repeat; border-radius: 4px; }
.page-shell .focus-range { display: block; margin-top: 12px; max-width: 360px; font-weight: 700; }
.focus-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.focus-row small { font-weight: 500; color: #666; }
.page-shell .focus-row input[type="range"] { flex: 1; min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; accent-color: var(--navy, #1d3557); }
/* カードのラベル(行ってきた / SNSで発見など)は、いつも写真の左下にそろえる(2026-10-23)
   SNSの埋め込みは上にアカウント名が出るため、上に置くと重なる */
.note-photo-link .card-status,
.notes-page .note-photo-link .card-status,
.page-shell.home .note-photo-link .card-status { top: auto !important; bottom: 10px !important; }
.notes-page .note-photo-link { height: auto !important; flex: 0 0 auto; }
@media (max-width: 767px) {
  .note-photo-link .card-status,
  .notes-page .note-photo-link .card-status { bottom: 6px !important; }
}
/* タイトルはカードで2行まで(2026-10-23) */
.notes-page .note-card h3, .page-shell .note-grid .note-card h3 { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.title-count { font-weight: 700; color: #666; }
.title-count.over { color: #c0392b; }
.title-count.ok { color: #2e7d4f; }
.title-count.over { color: #b26a00; }
/* 「ログインが必要です」の箱:古い装飾(.large の傾き)を外して、ほかのページと同じシンプルな形に(2026-10-24) */
.login-required-box.large { position: static !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; max-width: 640px; transform: none !important; z-index: auto !important; padding: 28px !important; border: 1px solid #ddd !important; border-radius: 8px !important; background: #fff !important; box-shadow: none !important; }
.login-required-box.large h2 { color: var(--ink, #222) !important; font-size: 20px !important; }
.login-required-box.large p { color: #555 !important; font-size: 15px !important; font-weight: 500 !important; }
.login-required-box.large .form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.login-required-box.large .button { min-height: 0 !important; padding: 12px 26px !important; font-size: 15px !important; border-radius: 999px !important; }
.login-required-box.large .button.teal { background: #fff !important; color: var(--navy, #1d3557) !important; border: 1px solid var(--navy, #1d3557) !important; }
.login-required-page { padding-bottom: 72px; }
/* トップ「みんなの行ってきた」の下のボタン(2026-10-24) */
.page-shell.home .notes-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin-top: 34px; }
.page-shell.home .notes-more-btn { display: inline-block; padding: 14px 34px; border-radius: 999px; background: var(--navy, #1d3557); color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none; }
.page-shell.home .notes-more-btn:hover { background: var(--navy-dark, #132640); }
.page-shell.home .notes-more-sub { color: var(--navy, #1d3557) !important; font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) { .page-shell.home .notes-more { flex-direction: column; margin-top: 26px; } .page-shell.home .notes-more-btn { width: 100%; text-align: center; box-sizing: border-box; } }

/* スマホのトップ画像:3枚・2枚・3枚の組み合わせ(2026-10-24) */
@media (max-width: 767px) {
  .hero-slides .slide .p4, .hero-slides .slide .p5 { display: none !important; }
  .hero-slides .slide i { top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; }
  /* 3枚:左上・左下・右(1・3枚目のパターン) */
  .hero-slides .slide .p1 { clip-path: polygon(0 0, 62% 0, 50% 50%, 0 50%) !important; }
  .hero-slides .slide .p2 { clip-path: polygon(0 50%, 50% 50%, 38% 100%, 0 100%) !important; }
  .hero-slides .slide .p3 { clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%) !important; }
  .hero-slides .slide .p1 i { bottom: 50% !important; right: 38% !important; }
  .hero-slides .slide .p2 i { top: 50% !important; right: 50% !important; }
  .hero-slides .slide .p3 i { left: 38% !important; }
  /* 2枚:左・右(2枚目のパターン) */
  .hero-slides .slide.s2 .p2 { display: none !important; }
  .hero-slides .slide.s2 .p1 { clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%) !important; }
  .hero-slides .slide.s2 .p1 i { bottom: 0 !important; right: 38% !important; }
}

/* スマホ:カードのエリア名はいつもジャンルの下の行に(2026-10-24) */
@media (max-width: 767px) {
  .page-shell .note-grid-main .note-tags { display: flex !important; flex-wrap: wrap !important; }
  .page-shell .note-grid-main .note-tags span:not(:last-child):not(.rel-badge) { flex: 0 0 100% !important; order: 1 !important; margin: 4px 0 0 !important; padding: 0 !important; }
}

/* 投稿フォーム:Google Map と緯度経度の説明(2026-10-24) */
.map-help-btn { appearance: none; border: 0; background: none; padding: 0; margin-left: 4px; color: var(--navy, #1d3557); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.map-help { padding: 18px 20px; border-radius: 8px; background: var(--sun, #fbf5d9); font-size: 14px; line-height: 1.7; color: #333; }
.map-help[hidden], .map-help-sec[hidden] { display: none !important; }
.map-help b { font-size: 15px; }
.map-help p { margin: 10px 0 2px; }
.map-help ol { margin: 0 0 4px; padding-left: 1.4em; }
.map-help code { padding: 1px 5px; border-radius: 4px; background: #fff; font-size: 13px; }
.mh-dev { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--navy, #1d3557); color: #fff; font-size: 12px; font-weight: 700; }
.mh-note { color: #666; font-size: 13px; }
.map-help-close { appearance: none; margin-top: 10px; padding: 6px 16px; border: 1px solid #ccc; border-radius: 999px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.rule-note { margin: 10px 0 0 !important; color: #666 !important; }
.rule-note a { color: var(--navy, #1d3557); text-decoration: underline; }
/* この場所の印象(2026-10-24) */
.recommend-field[hidden] { display: none !important; }
.rec-caution { display: inline-block; padding: 1px 10px; border-radius: 4px; background: #fdecea; color: #b03a2e; font-weight: 700; }

/* 体験・情報(2026-10-24) */
.page-shell .choice-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 767px) { .page-shell .choice-grid:has(> :nth-child(4)) { grid-template-columns: 1fr !important; } }
.card-status.info, .nd-status.info, .note-state.info { background: #2f6f5e !important; color: #fff !important; }
.photo.info-tile { display: flex !important; align-items: center; justify-content: center; background: #eef3f0 !important; background-image: none !important; text-align: center; }
.info-tile-inner { display: grid; gap: 6px; padding: 0 12px; }
.info-tile-inner small { color: #2f6f5e; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.info-tile-inner b { color: #1f3d35; font-size: 18px; font-weight: 700; }
.page-shell .info-band { margin: 0 0 64px; }
.page-shell .info-band .tips-band { margin-bottom: 0 !important; }
.page-shell .info-list { list-style: none; margin: 0 auto; padding: 6px 0 0; max-width: 1180px; }
.page-shell .info-list[hidden] { display: none; }
.page-shell .info-list li { border-bottom: 1px solid #eee; }
.page-shell .info-list a { display: flex; align-items: baseline; gap: 14px; padding: 14px 4px; color: var(--ink, #222); text-decoration: none; }
.page-shell .info-list a:hover .info-title { text-decoration: underline; }
.page-shell .info-theme { flex: 0 0 auto; padding: 2px 10px; border-radius: 4px; background: #eef3f0; color: #2f6f5e; font-size: 12px; font-weight: 700; }
.page-shell .info-title { flex: 1 1 auto; font-weight: 700; font-size: 15px; }
.page-shell .info-list small { flex: 0 0 auto; color: #999; font-size: 12px; }
@media (max-width: 767px) {
  .page-shell .info-band { margin-bottom: 44px; }
  .page-shell .info-list a { flex-wrap: wrap; gap: 4px 10px; padding: 12px 2px; }
  .page-shell .info-title { flex-basis: 100%; order: 2; font-size: 14px; }
}
.nd-info-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 6px; background: #f4f4f2; color: #555; font-size: 12.5px; line-height: 1.7; }
.photo.info-tile { position: relative; }
.info-tile-inner { position: absolute; inset: 0; display: grid !important; place-items: center; padding: 0 12px; }
.info-tile-inner b { font-size: 20px; }
@media (max-width: 767px) { .info-tile-inner b { font-size: 15px; } }

/* ヘッダー:ログイン中(管理画面・マイページ・ログアウト)でもボタンが重ならないように(2026-10-24)
   詳細ページだけページ幅が狭く、ヘッダーに入りきらなかったので、ほかのページと同じ幅にそろえる */
.detail-page .page-shell { max-width: 1240px !important; }
.page-shell .site-header > .auth-mini, .page-shell .site-header > .nav-post { flex-shrink: 0 !important; }
.notes-page .filter-row[hidden], .filter-row[hidden] { display: none !important; }
#theme-row a[hidden] { display: none !important; }
/* 詳細ページ:紹介文(リード)(2026-10-24) */
.detail-page .nd-body .nd-lead { margin: 0 0 1.4em; padding: 0 0 1.2em; border-bottom: 1px solid #e6e6e6; font-size: 17px; font-weight: 700; line-height: 1.85; color: var(--ink); }
@media (max-width: 767px) { .detail-page .nd-body .nd-lead { font-size: 15.5px; } }
.page-shell .sns-help-btn { display: inline-block !important; justify-self: start; align-self: start; width: auto !important; margin: 6px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; color: var(--navy, #1d3557) !important; font-size: 12px !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* 投稿フォーム:未入力の欄に色を付ける(2026-10-24) */
.page-shell .post-form input.is-invalid, .page-shell .post-form select.is-invalid, .page-shell .post-form textarea.is-invalid { border-color: #c0392b !important; background: #fdf3f2 !important; box-shadow: 0 0 0 2px rgba(192, 57, 43, .15) !important; }
.page-shell .post-form label.is-invalid { color: #c0392b !important; }
.page-shell .post-form .rule-list label.is-invalid { color: #c0392b !important; font-weight: 700; }
.page-shell .post-form .choice-grid.is-invalid { outline: 2px solid #c0392b; }
.form-error { margin: 14px 0 0; padding: 10px 14px; border-radius: 6px; background: #fdecea; color: #b03a2e; font-size: 14px; font-weight: 700; line-height: 1.6; }
.form-error[hidden] { display: none !important; }

/* 同じ場所のノート(2026-10-24) */
.nd-newer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 20px; padding: 12px 16px; border-radius: 8px; background: var(--sun, #fbf5d9); color: #5a4a1a; font-size: 14px; line-height: 1.7; }
.nd-newer[hidden] { display: none !important; }
.nd-newer a { flex: 0 0 auto; color: var(--navy, #1d3557); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.admin-same-place { padding: 12px 14px; border-radius: 8px; background: var(--sun, #fbf5d9); font-size: 13px; line-height: 1.7; }
.admin-same-place ul { margin: 6px 0; padding-left: 1.2em; }
.admin-same-place p { margin: 6px 0 0; }
.admin-use-name { appearance: none; margin: 2px 4px 2px 0; padding: 3px 10px; border: 1px solid var(--navy, #1d3557); border-radius: 999px; background: #fff; color: var(--navy, #1d3557); font: inherit; font-size: 12px; cursor: pointer; }

/* トップ「みんなの行ってきた」:1段目(1・2枚目)だけ文字が大きかった古い設定を打ち消して、6枚とも同じ大きさに(2026-10-24) */
.page-shell.home .note-grid-main .note-card:nth-child(n) h3, .page-shell.home .note-grid-main .note-card:nth-child(n) h3 a { font-size: 16px !important; line-height: 1.5 !important; }
.page-shell.home .note-grid-main .note-card:nth-child(n) .note-spot { font-size: 13px !important; }
@media (max-width: 767px) {
  .page-shell.home .note-grid-main .note-card:nth-child(n) h3, .page-shell.home .note-grid-main .note-card:nth-child(n) h3 a { font-size: 14px !important; }
  .page-shell.home .note-grid-main .note-card:nth-child(n) .note-spot { font-size: 12.5px !important; }
}