/* 原宿Today v2 — 3d article / shop detail. Variables only (see tokens.css).
   Source: docs/claude/design/static/ht.css "3d single / shop" + ≤767px. */

.ht-article { padding-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.ht-article.is-single-col { grid-template-columns: minmax(0, 1fr); max-width: 800px; } /* v2 データなし（原宿ガイド） */
.ht-article-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ht-article-head { display: flex; flex-direction: column; gap: 8px; }
.ht-article-head h1 { margin: 0; font-family: var(--ht-font-jp); font-weight: 900; font-size: var(--ht-fs-title); line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.ht-article-dates { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ht-ink-3); }

/* gallery + :target lightbox (no JS) */
.ht-gallery { display: flex; flex-direction: column; gap: 8px; }
.ht-figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ht-figure figcaption { font-size: 12px; color: var(--ht-ink-3); }
.ht-figure .ht-photo { display: block; aspect-ratio: 4 / 3; }
.ht-gallery-main { aspect-ratio: 2 / 1; border-radius: var(--ht-r-img); }
.ht-figure.ht-gallery-main { aspect-ratio: auto; }
.ht-figure.ht-gallery-main .ht-photo { aspect-ratio: 2 / 1; border-radius: var(--ht-r-img); }
.ht-gallery-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ht-gallery-thumbs .ht-ph { aspect-ratio: 4 / 3; }
.ht-gallery details summary { cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; color: var(--ht-green-700); padding: 10px 20px; border-radius: var(--ht-r-pill); box-shadow: inset 0 0 0 1.5px var(--ht-green); display: inline-flex; align-items: center; min-height: 44px; }
.ht-gallery details summary::-webkit-details-marker { display: none; }
.ht-gallery details[open] summary { margin-bottom: 8px; }
.ht-lightbox { display: none; }
.ht-lightbox:target { display: flex; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; padding: 24px; background: var(--ht-overlay); cursor: zoom-out; }
.ht-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--ht-r-img); }

.ht-article-body { font-size: 15px; line-height: 1.7; text-wrap: pretty; display: flex; flex-direction: column; gap: 1em; overflow-wrap: anywhere; }
.ht-article-body > * { margin: 0; }

/* recommendation */
.ht-reco { background: var(--ht-green-100); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; color: var(--ht-green-700); }
.ht-reco-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ht-reco-badge { display: inline-flex; align-items: baseline; gap: 4px; background: var(--ht-green); color: var(--ht-white); border-radius: var(--ht-r-pill); padding: 2px 10px; font-size: 13px; font-weight: 700; }
.ht-reco-badge .ht-num { font-size: 15px; }
.ht-reco p { margin: 0; color: var(--ht-ink); font-size: 15px; line-height: 1.6; }

/* blocks / facts / map */
.ht-block { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.ht-block > h2 { margin: 0; font-family: var(--ht-font-jp); font-weight: 900; font-size: 20px; }
.ht-facts { background: var(--ht-mist); border-radius: 12px; padding: 0 16px; margin: 0; }
.ht-facts > div,
.ht-facts details > div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 8px 0; font-size: 15px; line-height: 1.5; }
.ht-facts > div + div,
.ht-facts details > div { border-top: 1px solid var(--ht-line); }
.ht-facts dt { font-weight: 700; color: var(--ht-ink-3); }
.ht-facts dd { margin: 0; overflow-wrap: anywhere; }
.ht-facts summary { cursor: pointer; list-style: none; border-top: 1px solid var(--ht-line); padding: 10px 0; font-size: 14px; font-weight: 700; color: var(--ht-green-700); }
.ht-facts summary::-webkit-details-marker { display: none; }
.ht-facts details[open] summary .ht-when-closed,
.ht-facts details:not([open]) summary .ht-when-open { display: none; }
.ht-map { aspect-ratio: 5 / 2; border-radius: 12px; overflow: hidden; background: var(--ht-mist); }
.ht-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* relations */
.ht-relations ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ht-relations a,
.ht-relations-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--ht-mist); border-radius: 12px; padding: 8px 14px; color: var(--ht-ink); }
.ht-theme .ht-relations a { color: var(--ht-ink); }
.ht-theme .ht-relations a:hover { background: var(--ht-green-100); }
.ht-relations small { font-size: 12px; color: var(--ht-ink-3); }

/* visits */
.ht-visits { display: flex; flex-direction: column; gap: 8px; }
.ht-visit { background: var(--ht-mist); border-radius: 12px; padding: 0 16px; scroll-margin-top: var(--ht-header-h); }
.ht-visit summary { cursor: pointer; list-style: none; padding: 10px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ht-visit summary::-webkit-details-marker { display: none; }
.ht-visit summary b { font-family: var(--ht-font-jp); font-size: 16px; }
.ht-visit summary .ht-num { font-size: 15px; }
.ht-visit-kind { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: var(--ht-r-pill); }
.ht-visit-kind.is-full { background: var(--ht-green); color: var(--ht-white); }
.ht-visit-kind.is-reference { background: var(--ht-white); color: var(--ht-ink-2); box-shadow: inset 0 0 0 1.5px var(--ht-line); }
.ht-visit-body { padding: 0 0 14px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.ht-visit-body p,
.ht-visit-text > * { margin: 0; }
.ht-visit-meta { font-size: 13px; color: var(--ht-ink-3); }
.ht-visit-body .ht-figure .ht-photo { aspect-ratio: 1; }

/* sources / share */
.ht-sources { font-size: 12px; line-height: 1.6; color: var(--ht-ink-3); }
.ht-sources b { color: var(--ht-ink-2); }
.ht-sources ul { list-style: none; margin: 0; padding: 0; }
.ht-theme .ht-sources a { color: var(--ht-ink-3); text-decoration: underline; overflow-wrap: anywhere; }
.ht-share { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ht-share-label { font-size: 13px; font-weight: 700; color: var(--ht-ink-3); margin-right: 8px; }
.ht-share button { font-family: inherit; border: 0; cursor: pointer; }
.ht-theme .ht-share .is-copied { background: var(--ht-green-100); }
.ht-theme .ht-share .is-copy-error { box-shadow: inset 0 0 0 1.5px var(--ht-ink-3); color: var(--ht-ink-2); }

/* right column */
.ht-aside { display: flex; flex-direction: column; gap: 10px; position: sticky; top: var(--ht-header-h); }
.ht-summary { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; border-radius: 16px; }
.ht-summary-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.ht-summary .ht-tag { background: var(--ht-white); }
.ht-summary .ht-tag-live { color: var(--ht-green-700); }
.ht-summary .ht-tag-tomorrow { color: var(--ht-sky); }
.ht-summary .ht-tag-final { background: var(--ht-pink); color: var(--ht-white); }
.ht-summary .ht-tag-oneday { background: var(--ht-pink-100); color: var(--ht-pink-700); }
.ht-summary-period { display: flex; flex-direction: column; gap: 6px; }
.ht-summary-period .ht-num { font-size: 34px; line-height: 1; }
.ht-summary-period small { font-size: 14px; color: var(--ht-green-50); }
.ht-summary dl { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; margin: 0; }
.ht-summary dl > div { display: grid; grid-template-columns: 56px 1fr; gap: 8px; }
.ht-summary dl.is-wide > div { grid-template-columns: 72px 1fr; }
.ht-summary dt { color: var(--ht-green-200); }
.ht-summary dd { margin: 0; overflow-wrap: anywhere; }
.ht-summary-actions { display: flex; flex-direction: column; gap: 8px; }
.ht-aside-guide { background: var(--ht-sky-100); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.ht-theme .ht-aside-guide { color: var(--ht-sky-900); }
.ht-theme .ht-aside-guide:hover { color: var(--ht-sky-900); box-shadow: inset 0 0 0 2px var(--ht-sky); }
.ht-aside-guide .ht-num { font-size: 13px; color: var(--ht-sky); }
.ht-aside-guide b { font-family: var(--ht-font-jp); font-size: 16px; }

.ht-actionbar { display: none; }

@media (max-width: 767px) {
	.ht-article { padding-top: 8px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.ht-article:not(.is-single-col) .ht-article-main { display: contents; }
	.ht-article:not(.is-single-col) .ht-article-head { order: 1; }
	.ht-aside { order: 2; position: static; display: contents; }
	.ht-aside .ht-summary { order: 2; }
	.ht-article:not(.is-single-col) .ht-article-main > :not(.ht-article-head) { order: 3; }
	.ht-aside-guide { order: 4; }
	.ht-summary { padding: 14px; gap: 10px; }
	.ht-summary-period .ht-num { font-size: 28px; }
	.ht-summary-actions { display: none; }
	.ht-gallery-main,
	.ht-figure.ht-gallery-main .ht-photo { aspect-ratio: 16 / 10; }
	.ht-gallery-thumbs { gap: 8px; }
	.ht-article-body { font-size: 15px; line-height: 1.7; }
	.ht-reco { padding: 10px 12px; }
	.ht-block { padding-top: 4px; gap: 8px; }
	.ht-block > h2 { font-size: 18px; }
	.ht-facts { padding: 0 12px; border-radius: 12px; }
	.ht-facts > div,
	.ht-facts details > div { grid-template-columns: 72px 1fr; gap: 10px; padding: 8px 0; font-size: 14px; }
	.ht-facts dt { font-size: 13px; }
	.ht-facts summary { padding: 12px 0; }
	.ht-map { aspect-ratio: 16 / 10; border-radius: 12px; }
	.ht-visit { padding: 0 12px; }
	.ht-main:has(.ht-actionbar) { padding-bottom: 96px; }
	.ht-actionbar { display: flex; gap: 8px; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 30; padding: 8px; border-radius: var(--ht-r-pill); background: var(--ht-glass-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--ht-shadow-header); }
	.ht-actionbar .ht-btn { flex: 1; padding: 13px 10px; font-size: 14px; min-height: 44px; }
	.ht-share .ht-btn { min-height: 44px; }
	.ht-theme .ht-sources a { display: inline-block; min-height: 44px; padding: 10px 0; }
}

/* feature tags under the date line / caution line (2.01.0 / 1.1.0); chip look is list.css .ht-ftag */
.ht-article-ftags { display: flex; flex-direction: column; gap: 6px; }
.ht-article-ftags h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ht-ink-3); }
.ht-theme .ht-article-ftags .ht-ftag { padding: 6px 14px; font-size: 13px; color: var(--ht-ink-2); }
.ht-theme .ht-article-ftags a.ht-ftag:hover { border-color: var(--ht-ink-3); color: var(--ht-ink); }