
:root{
  --discover-ink:#513631;
  --discover-wine:#9b3f5c;
  --discover-wine-dark:#7f304a;
  --discover-muted:#7f6a62;
  --discover-line:#eadfd8;
  --discover-soft:#fbf7f3;
  --discover-beige:#f4ece5;
  --discover-paper:#fff;
  --discover-shadow:0 12px 32px rgba(81,54,49,.07);
}

.discover-page{
  margin:0;
  color:var(--discover-ink);
  background:#fff;
  font-family:"Noto Sans JP",sans-serif;
  font-size:14px;
  line-height:1.8;
  overflow-x:clip;
}
.discover-page *{box-sizing:border-box}
.discover-page a{color:inherit;text-decoration:none}
.discover-page img{display:block;width:100%}
.discover-page .wrap{width:min(96%,1000px);margin-inline:auto}

/* Header — identical visual language to Online */
.discover-page .discover-hero__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 50%;
}
.discover-page .discover-hero__copy{max-width:590px}
.discover-page .hero-post-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  min-height: 36px;
  padding: 7px 13px;

  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;

  box-shadow: 0 5px 18px rgba(25,12,8,.10);
  backdrop-filter: blur(4px);
}
.discover-page .hero-post-link:hover,
.discover-page .hero-post-link:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.90);
}
.discover-page .hero-post-link span{font-size:15px}

/* Search */
.discover-page .feed-tools{
  padding:42px 0 10px;
  background:#fff;
}
.discover-page .feed-tools__heading{margin-bottom:16px}
.discover-page .feed-tools__heading .eyebrow{
  margin:0 0 5px;
  color:var(--discover-wine);
  font-size:10px;
  font-weight:600;
  letter-spacing:.2em;
}
.discover-page .feed-tools__heading h2{
  margin:0;
  font-family:"Noto Serif JP",serif;
  font-size:28px;
  font-weight:500;
  line-height:1.45;
}
.discover-page .search-panel{
  display:grid;
  grid-template-columns:1.45fr .85fr .85fr auto;
  gap:12px;
  padding:20px;
  background:linear-gradient(145deg,#fff 0%,#fffaf7 100%);
  border:1px solid var(--discover-line);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(81,54,49,.055);
}
.discover-page .search-panel label{display:grid;gap:7px}
.discover-page .search-panel label span{
  color:var(--discover-muted);
  font-size:12px;
  font-weight:600;
}
.discover-page .search-panel input,
.discover-page .search-panel select{
  width:100%;
  min-height:44px;
  padding:0 13px;
  color:var(--discover-ink);
  background:#fff;
  border:1px solid var(--discover-line);
  border-radius:11px;
  outline:none;
}
.discover-page .search-panel input:focus,
.discover-page .search-panel select:focus{
  border-color:rgba(155,63,92,.5);
  box-shadow:0 0 0 3px rgba(155,63,92,.07);
}
.discover-page .search-panel>button{
  align-self:end;
  min-height:44px;
  padding:0 18px;
  color:var(--discover-wine);
  font-size:12px;
  font-weight:600;
  background:#fff;
  border:1px solid rgba(155,63,92,.28);
  border-radius:999px;
  cursor:pointer;
}
.discover-page .tag-row{margin-top:12px}
.discover-page .tag-row__label{
  display:block;
  margin-bottom:6px;
  color:var(--discover-muted);
  font-size:11px;
}
.discover-page .quick-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.discover-page .quick-tags button{
  padding:5px 11px;
  color:#785f57;
  font-size:10px;
  background:#fff8f4;
  border:1px solid var(--discover-line);
  border-radius:999px;
  cursor:pointer;
}

/* Feed */
.discover-page .discover-list{
  width:min(96%,1200px);
  margin-inline:auto;
  padding:34px 0 74px;
}
.discover-page .list-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}
.discover-page .list-heading .eyebrow{
  margin:0 0 5px;
  color:var(--discover-wine);
  font-size:10px;
  font-weight:600;
  letter-spacing:.2em;
}
.discover-page .list-heading h2{
  margin:0;
  font-family:"Noto Serif JP",serif;
  font-size:30px;
  font-weight:500;
  line-height:1.45;
}
.discover-page .list-heading p:not(.eyebrow){
  margin:5px 0 0;
  color:var(--discover-muted);
  font-size:12px;
}
.discover-page .list-heading select{
  width:145px;
  height:38px;
  padding:0 11px;
  color:var(--discover-ink);
  background:#fff;
  border:1px solid var(--discover-line);
  border-radius:999px;
  font-size:12px;
}

/* Masonry */
.discover-page .discover-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  gap:18px;
}
.discover-page .discover-card{
  display:block;
  width:100%;
  margin:0;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--discover-line);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(81,54,49,.055);
  break-inside:avoid;
}
.discover-page .discover-card:hover{
  border-color:rgba(155,63,92,.20);
  box-shadow:0 9px 25px rgba(81,54,49,.06);
}
.discover-page .card-image{
  position:relative;
  overflow:hidden;
  background:#f6f1ed;
}
.discover-page .card-image--tall{height:320px}
.discover-page .card-image--medium{height:265px}
.discover-page .card-image--short{height:220px}
.discover-page .card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.discover-page .new-label{
  position:absolute;
  top:10px;
  left:10px;
  padding:4px 8px;
  color:#fff;
  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
  background:var(--discover-wine);
  border-radius:999px;
}
.discover-page .like-button{
  position:absolute;
  top:10px;
  right:10px;
  display:grid;
  grid-template-columns:18px 12px;
  align-items:center;
  justify-content:center;
  column-gap:2px;
  width:42px;
  height:42px;
  padding:0;
  color:var(--discover-wine);
  background:rgba(255,255,255,.94);
  border:1px solid rgba(234,223,216,.85);
  border-radius:50%;
  box-shadow:0 5px 14px rgba(81,54,49,.08);
  cursor:pointer;
}
.discover-page .like-heart{font-size:17px;line-height:1;text-align:center}
.discover-page .like-count{font-size:11px;line-height:1;text-align:center}
.discover-page .card-body{padding:15px 16px 16px}
.discover-page .card-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--discover-muted);
  font-size:11px;
}
.discover-page .card-location{
  color:var(--discover-wine);
  font-weight:600;
}
.discover-page .card-location::before{
  content:"📍";
  margin-right:3px;
}
.discover-page .store-name{
  margin:8px 0 0;
  color:var(--discover-ink);
  font-size:13px;
  font-weight:500;
  line-height:1.55;
}
.discover-page .tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:9px 0 0;
}
.discover-page .tags span{
  padding:2px 7px;
  color:#785f57;
  font-size:9px;
  background:#fff8f4;
  border:1px solid var(--discover-line);
  border-radius:999px;
}
.discover-page .comment {
  display: -webkit-box;
  margin: 11px 0 13px;
  overflow: hidden;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.discover-page .card-image--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:260px;
  background:#f8f4f0;
}
.discover-page .no-image-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  color:var(--discover-wine);
  text-align:center;
}
.discover-page .no-image-logo{
  width:72px;
  height:72px;
  margin-bottom:12px;
  object-fit:contain;
  opacity:.65;
}
.discover-page .no-image-content p{
  margin:0;
  font-family:"Noto Serif JP",serif;
  font-size:13px;
  letter-spacing:.18em;
}
.discover-page .load-more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:170px;
  min-height:38px;
  margin:30px auto 0;
  color:var(--discover-wine);
  font-size:11px;
  font-weight:600;
  background:#fff;
  border:1px solid rgba(155,63,92,.30);
  border-radius:999px;
  cursor:pointer;
}
.discover-page .load-more[hidden] {
  display: none;
}
.discover-page .empty-message{
  padding:60px 20px;
  color:var(--discover-muted);
  text-align:center;
  background:var(--discover-soft);
  border-radius:16px;
}
.discover-hero__inner {
  position: relative;
}
.discover-hero .hero-post-link {
  position: absolute;
  right: 20px;
  bottom: 20px;
  margin: 0;
}
.discover-page .feed-tools > .wrap {
  width: min(96%, 1200px);
  max-width: none;
  margin-inline: auto;
}
.owner-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.delete-post-button {
  padding: 0 0 3px;
  color: #9a8179;
  font-size: 10px;
  font-family: inherit;

  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;

  cursor: pointer;
}
.delete-post-button:hover,
.delete-post-button:focus-visible {
  color: var(--wine);
  border-bottom-color: currentColor;
}
.delete-post-button:disabled {
  cursor: default;
  opacity: .5;
}

@media(max-width:900px){
  .discover-page .discover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .discover-page .search-panel{grid-template-columns:1fr 1fr}
  .discover-page .search-panel>button{grid-column:1/-1}
}

@media(max-width:700px){
  .discover-hero .hero-post-link {
    right: 14px;
    bottom: 14px;
    min-height: 32px;
    padding: 6px 11px;
    font-size: 10px;
  }
  .discover-page{font-size:13px}
  .discover-page .wrap{width:calc(100% - 28px)}
  .discover-page .feed-tools{padding:30px 0 4px}
  .discover-page .feed-tools__heading{margin-bottom:12px}
  .discover-page .feed-tools__heading h2{font-size:23px}
  .discover-page .search-panel{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:13px;
    border-radius:15px;
    box-shadow:none;
  }
  .discover-page .search-panel label:first-child{grid-column:1/-1}
  .discover-page .search-panel>button{
    grid-column:1/-1;
    justify-self:end;
    width:auto;
    min-height:34px;
    padding:6px 13px;
    font-size:10px;
  }
  .discover-page .search-panel label span{font-size:10px}
  .discover-page .search-panel input,
  .discover-page .search-panel select{
    min-height:40px;
    font-size:11px;
  }
  .discover-page .quick-tags{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:3px;
    scrollbar-width:none;
  }
  .discover-page .quick-tags::-webkit-scrollbar{display:none}
  .discover-page .quick-tags button{flex:0 0 auto}

  .discover-page .discover-list{
    width:calc(100% - 28px);
    padding:24px 0 54px;
  }
  .discover-page .list-heading{
    align-items:flex-end;
    flex-direction:row;
    gap:10px;
    margin-bottom:14px;
  }
  .discover-page .list-heading h2{font-size:23px}
  .discover-page .list-heading select{
    width:108px;
    height:34px;
    font-size:10px;
  }
  .discover-page .discover-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .discover-page .discover-card{
    min-width:0;
    border-radius:15px;
    box-shadow:0 7px 20px rgba(75,45,35,.055);
  }
  .discover-page .card-image--tall{height:230px}
  .discover-page .card-image--medium{height:190px}
  .discover-page .card-image--short{height:155px}
  .discover-page .card-body{padding:10px}
  .discover-page .card-meta{font-size:9px}
  .discover-page .store-name{margin-top:6px;font-size:11px}
  .discover-page .tags{margin-top:6px}
  .discover-page .tags span{padding:2px 5px;font-size:8px}
  .discover-page .comment{
    display:-webkit-box;
    margin:8px 0 9px;
    overflow:hidden;
    font-size:11px;
    line-height:1.55;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }
  .discover-page .like-button{
    top:8px;
    right:8px;
    width:36px;
    height:36px;
  }
  .discover-page .new-label{top:8px;left:8px;font-size:7px}
  .discover-page .card-image--empty{min-height:190px}
  .discover-page .no-image-logo{width:54px;height:54px}
  .discover-page .feed-tools > .wrap {
  width: calc(100% - 28px);
  }
}

/* =========================================================
   Discover post detail modal
========================================================= */

.post-detail-dialog {
  width: min(92vw, 480px);
  max-height: 90vh;
  padding: 0;
  overflow: hidden;

  background: #fff;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(81, 54, 49, .22);
}

.post-detail-dialog::backdrop {
  background: rgba(35, 20, 17, .48);
  backdrop-filter: blur(3px);
}

.post-detail {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow-y: auto;
}

.post-detail__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;
  padding: 0;

  color: var(--discover-ink);
  font-size: 22px;
  line-height: 1;

  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(234, 223, 216, .9);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(81, 54, 49, .08);

  cursor: pointer;
}

.post-detail__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f7f1ec;
}

.post-detail__body {
  min-width: 0;
  padding: 20px 22px 22px;
  overflow: visible;
}

.post-detail__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  color: var(--discover-muted);
  font-size: 11px;
}

.post-detail__meta span:first-child {
  color: var(--discover-wine);
  font-weight: 600;
}

.post-detail__store {
  margin: 14px 0 0;
  color: var(--discover-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.post-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.post-detail__tags span {
  padding: 3px 8px;
  color: #785f57;
  font-size: 10px;
  background: #fff8f4;
  border: 1px solid var(--discover-line);
  border-radius: 999px;
}

.post-detail__comment {
  margin: 18px 0 0;
  color: var(--discover-ink);
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.post-detail__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-top: 22px;
  padding-top: 14px;

  border-top: 1px solid var(--discover-line);
}

.post-detail__footer strong {
  color: var(--discover-wine);
  font-size: 16px;
}

.post-detail__footer > span {
  margin-left: auto;
  color: var(--discover-muted);
  font-size: 11px;
}

@media (max-width: 700px) {
  .post-detail-dialog {
    width: calc(100vw - 32px);
    max-width: 430px;
    max-height: 90vh;
    border-radius: 18px;
  }

  .post-detail {
    display: block;
    max-height: 90vh;
    overflow-y: auto;
  }

  .post-detail__image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .post-detail__body {
    padding: 18px 16px 20px;
    overflow: visible;
  }

  .post-detail__close {
    top: 9px;
    right: 9px;
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  .post-detail__meta {
    font-size: 10px;
  }

  .post-detail__store {
    margin-top: 10px;
    font-size: 13px;
  }

  .post-detail__tags {
    margin-top: 9px;
  }

  .post-detail__tags span {
    padding: 2px 6px;
    font-size: 9px;
  }

  .post-detail__comment {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.8;
  }

  .post-detail__footer {
    margin-top: 18px;
    padding-top: 11px;
  }

  .post-detail__footer strong {
    font-size: 14px;
  }

  .post-detail__footer > span {
    font-size: 10px;
  }
}