/* 原宿Today v2 — 3g 原宿ガイド (posts built with the ht/guide-spot pattern). Variables only (see tokens.css).
   Source: docs/claude/design/static/ht.css "3g guide" + ≤767px. The body markup comes from inc/guide.php. */

.ht-guide { padding-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; }
.ht-guide-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.ht-guide-hero { aspect-ratio: 1398 / 361; border-radius: var(--ht-r-panel); }

/* body: lead paragraphs, quick nav and spots as written in the editor */
.ht-guide-body { display: flex; flex-direction: column; gap: 26px; min-width: 0; overflow-wrap: anywhere; }
.ht-guide-body > * { margin: 0; }
.ht-guide-body > p { font-size: 16px; line-height: 1.8; text-wrap: pretty; }
.ht-guide-body > p + p { margin-top: calc(1em - 26px); }
.ht-guide-body > .ht-spot + .ht-spot { margin-top: -6px; } /* spots sit 20px apart */

.ht-quicknav { padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.ht-quicknav b { font-family: var(--ht-font-jp); font-weight: 900; font-size: 17px; color: var(--ht-sky-900); }

.ht-spot { background: var(--ht-mist); border-radius: var(--ht-r-panel); padding: 26px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: calc(var(--ht-header-h) + 12px); }
.ht-spot > * { margin: 0; }
.ht-spot-head { display: flex; align-items: center; gap: 12px; }
.ht-spot-no { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--ht-green); color: var(--ht-white); display: flex; align-items: center; justify-content: center; font-family: var(--ht-font-num); font-size: 24px; }
.ht-spot-head h2 { margin: 0; font-family: var(--ht-font-jp); font-weight: 900; font-size: 22px; line-height: 1.4; min-width: 0; }
.ht-spot-head small { display: block; font-size: 13px; font-weight: 700; color: var(--ht-ink-3); }
.ht-spot-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ht-spot-photos .ht-photo { aspect-ratio: 4 / 3; }
.ht-spot-photo { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ht-spot-photo figcaption { font-size: 13px; color: var(--ht-ink-3); }
.ht-spot p { font-size: 17px; line-height: 1.75; text-wrap: pretty; }
.ht-spot .ht-facts { background: var(--ht-white); padding: 4px 20px; }
.ht-spot .ht-facts > div { grid-template-columns: 96px 1fr; padding: 12px 0; font-size: 15px; gap: 12px; }
.ht-spot .ht-facts > .is-nolabel { grid-template-columns: minmax(0, 1fr); }
.ht-stars { color: var(--ht-green); letter-spacing: .1em; font-size: 16px; }
.ht-spot-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* TOC (PC only, sticky) */
.ht-toc { position: sticky; top: var(--ht-header-h); display: flex; flex-direction: column; gap: 10px; }
.ht-toc > b { font-family: var(--ht-font-jp); font-weight: 900; font-size: 17px; padding: 0 4px; }
.ht-toc ol { list-style: none; margin: 0; padding: 8px; background: var(--ht-mist); border-radius: var(--ht-r-card); display: flex; flex-direction: column; gap: 2px; }
.ht-theme .ht-toc ol a { display: grid; grid-template-columns: 28px 1fr; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: var(--ht-r-img); color: var(--ht-ink); font-size: 14px; font-weight: 700; line-height: 1.5; }
.ht-theme .ht-toc ol a:hover { background: var(--ht-white); color: var(--ht-green-700); }
.ht-toc .ht-num { font-size: 15px; color: var(--ht-green); }
.ht-toc small { grid-column: 2; font-size: 12px; font-weight: 400; color: var(--ht-ink-3); }

@media (max-width: 767px) {
	.ht-guide { padding-top: 12px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.ht-guide-main,
	.ht-guide-body { gap: 20px; }
	.ht-guide-hero { aspect-ratio: 2 / 1; }
	.ht-guide-body > p { font-size: 15px; line-height: 1.8; }
	.ht-guide-body > p + p { margin-top: calc(1em - 20px); }
	.ht-guide-body > .ht-spot + .ht-spot { margin-top: 0; }
	.ht-quicknav { padding: 16px; position: sticky; top: var(--ht-header-h); z-index: 10; }
	.ht-quicknav .ht-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
	.ht-quicknav .ht-chips::-webkit-scrollbar { display: none; }
	.ht-spot { padding: 16px 12px; gap: 12px; scroll-margin-top: calc(var(--ht-header-h) + 168px); }
	.ht-spot-no { width: 44px; height: 44px; font-size: 19px; }
	.ht-spot-head h2 { font-size: 18px; }
	.ht-spot-photos { gap: 8px; }
	.ht-spot p { font-size: 16px; }
	.ht-spot .ht-facts { padding: 2px 12px; }
	.ht-spot .ht-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
	.ht-spot-actions .ht-btn { flex: 1; min-height: 44px; }
	.ht-toc { display: none; }
}