/*!
 * seoulin-home / トップページ CSS
 * 必ず .si-home 配下にスコープする。裸のグローバルセレクタ（body/h2/a単体等）は書かない。
 * 仕様書: docs/seoulin-top-visual-spec.md の数値どおりに実装。
 */

/* =========================================================================
 * 0. トークン（.si-home に定義。:root は使わない）
 * ========================================================================= */
.si-home {
	--si-bg: #FDF8F3;
	--si-card: #FFFFFF;
	--si-text: #2B2B2B;
	--si-muted: #6E6560;
	--si-terra: #C96B52;
	--si-terra-d: #A9553F;
	--si-terra-w: #FBEFEA;
	--si-navy: #2B3A4A;
	--si-sage: #7C9A82;
	--si-gold: #D9A441;
	--si-line: rgba(43, 43, 43, .10);
	--si-shadow: 0 1px 2px rgba(43, 43, 43, .04), 0 10px 30px rgba(43, 43, 43, .05);
	--si-radius-card: 16px;
	--si-radius-photo: 14px;
	--si-radius-pill: 999px;

	/* レイアウト用トークン（モバイルを既定値、breakpointで上書き） */
	--si-max: 1160px;
	--si-pad: 16px;
	--si-sec-gap: 44px;
	--si-head-gap: 16px;
	--si-card-gap: 12px;

	display: block;
	background: var(--si-bg);
	color: var(--si-text);
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

@media (min-width: 600px) {
	.si-home {
		--si-pad: 24px;
		--si-sec-gap: 56px;
		--si-head-gap: 20px;
		--si-card-gap: 16px;
	}
}

@media (min-width: 960px) {
	.si-home {
		--si-pad: 24px;
		--si-sec-gap: 72px;
		--si-head-gap: 24px;
		--si-card-gap: 20px;
	}
}

/* =========================================================================
 * 1. リセット（.si-home 配下のみ）
 * ========================================================================= */
.si-home,
.si-home *,
.si-home *::before,
.si-home *::after {
	box-sizing: border-box;
}
.si-home img,
.si-home svg {
	max-width: 100%;
	display: block;
}
.si-home a {
	color: inherit;
	text-decoration: none;
}
.si-home ul,
.si-home ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
.si-home button {
	font-family: inherit;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
}
.si-home input,
.si-home select {
	font-family: inherit;
	font-size: 16px; /* iOSズーム防止 */
}
.si-home p {
	margin: 0;
}

.si-home .si-inner {
	max-width: var(--si-max);
	margin-inline: auto;
	padding-inline: var(--si-pad);
	min-width: 0;
}

/* 見出し(h2)のSWELL装飾打ち消し */
.si-home h2 {
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	color: var(--si-text);
	margin: 0;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	text-align: left;
}
.si-home h2::before,
.si-home h2::after {
	content: none !important;
	display: none !important;
}

/* =========================================================================
 * 2. 汎用パーツ
 * ========================================================================= */

/* プレースホルダー（画像未設定時の無地面） */
.si-home .si-ph {
	background: var(--si-terra-w);
}

/* ボタン
 * 🚨 このサイトはヘッダーのCustom HTMLウィジェット（#si-seoulin-v2、記事本文の装飾用に
 * サイト全体へ出ている）が同じ `.sih-btn` というクラス名を使っており、
 * `color:#fff !important` 等を強制してくる（実機で確認済み・2026-08-20）。
 * 素の詳細度では勝てないため、色/背景/枠線などボタンの見た目を決める値は
 * こちらも !important を付けて確実に上書きする。box-shadow / margin / max-width /
 * text-align も向こう側の指定が漏れてこないよう、ここで明示的に打ち消す。
 */
.si-home .sih-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	border-radius: var(--si-radius-pill);
	padding: 0 24px;
	height: 44px;
	margin: 0;
	max-width: none;
	text-align: center;
	white-space: nowrap;
	box-shadow: none;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
}
.si-home .sih-btn--primary {
	background: var(--si-terra);
	color: #fff !important;
	height: 48px;
	padding: 0 32px;
	box-shadow: 0 3px 0 var(--si-terra-d);
}
.si-home .sih-btn--primary:hover {
	background: var(--si-terra-d);
	color: #fff !important;
	transform: translateY(1px);
	box-shadow: 0 2px 0 var(--si-terra-d);
}
.si-home .sih-btn--outline {
	background: transparent !important;
	color: var(--si-terra) !important;
	border: 1px solid var(--si-line);
}
.si-home .sih-btn--outline:hover {
	border-color: var(--si-terra);
	color: var(--si-terra-d) !important;
}
.si-home .sih-btn--sm {
	height: 36px;
	padding: 0 16px;
	font-size: 12px;
}
.si-home .sih-btn--block {
	display: flex;
	width: 100%;
	max-width: none;
}

/* セクション共通 */
.si-home .si-sec {
	margin-top: var(--si-sec-gap);
}
.si-home .si-sec--today {
	margin-top: -24px;
	position: relative;
	z-index: 2;
}
/* 「今日の韓国」白パネル。ヒーローに食い込むのはこのパネル自身（背景・角丸ごと）で、
   中の見出しやリンクが直接ヒーロー写真の上に乗ることは無い。 */
.si-home .si-today__frame {
	background: var(--si-card);
	border-radius: var(--si-radius-card);
	box-shadow: var(--si-shadow);
	/* 上のパディングは .si-sec--today の margin-top:-24px より必ず大きくする
	   （でないと見出しが数pxだけヒーロー写真に再びかぶる）。 */
	padding: 32px 16px 20px;
}
@media (min-width: 600px) {
	.si-home .si-today__frame {
		padding: 36px 24px 28px;
	}
}
@media (min-width: 960px) {
	.si-home .si-today__frame {
		padding: 32px;
	}
}
.si-home .si-sec__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 12px;
	row-gap: 4px;
	margin-bottom: var(--si-head-gap);
}
.si-home .si-sec__title {
	font-size: 19px;
	flex: 0 0 auto;
}
@media (min-width: 960px) {
	.si-home .si-sec__title {
		font-size: 24px;
	}
}
.si-home .si-sec__lead {
	display: none;
	font-size: 13px;
	color: var(--si-muted);
}
@media (min-width: 960px) {
	.si-home .si-sec__lead {
		display: inline-block;
	}
}
.si-home .si-sec__more {
	display: none;
	font-size: 13px;
	color: var(--si-terra);
	margin-left: auto;
}
@media (min-width: 960px) {
	.si-home .si-sec__more {
		display: inline-flex;
	}
}
.si-home .si-sec__more-sp {
	margin-top: 16px;
}
@media (min-width: 960px) {
	.si-home .si-sec__more-sp {
		display: none;
	}
}

/* カード共通の見た目トーン */
.si-home .si-card__label {
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: var(--si-text);
	margin-bottom: 8px;
}
.si-home .si-card__time {
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 10px;
	color: var(--si-muted);
	margin-top: 2px;
}
.si-home .si-card__pre {
	font-size: 12px;
	color: var(--si-muted);
	margin-bottom: 2px;
}
.si-home .si-card__value {
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.si-home .si-card__num {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-size: 26px;
	color: var(--si-terra);
}
.si-home .si-card__unit {
	font-size: 14px;
	color: var(--si-text);
}
.si-home .si-card__delta {
	font-size: 11px;
	margin-top: 4px;
}
.si-home .si-card__delta--up {
	color: var(--si-sage);
}
.si-home .si-card__delta--down {
	color: var(--si-terra);
}
.si-home .si-card__note {
	font-size: 10px;
	color: var(--si-muted);
	margin-top: 8px;
	line-height: 1.6;
}
.si-home .si-card__note--stale {
	color: var(--si-terra-d);
}
.si-home .si-card__note a {
	color: var(--si-terra);
	text-decoration: underline;
}
.si-home .si-card__title {
	font-size: 14px;
	font-weight: 700;
	font-family: 'Zen Maru Gothic', sans-serif;
	color: var(--si-text);
}
.si-home .si-card__sub {
	font-size: 11px;
	color: var(--si-muted);
	margin-top: 2px;
}

/* =========================================================================
 * 3. Hero
 * ========================================================================= */
.si-home .si-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: 340px;
}
@media (min-width: 960px) {
	.si-home .si-hero {
		min-height: clamp(380px, 38vw, 460px);
	}
}
.si-home .si-hero__media,
.si-home .si-hero__media--ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.si-home .si-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}
.si-home .si-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(253, 248, 243, .92) 0%, rgba(253, 248, 243, .72) 42%, rgba(253, 248, 243, 0) 68%);
}
.si-home .si-hero__inner {
	position: relative;
	z-index: 2;
	text-align: left;
	width: 100%;
}
.si-home .si-hero__kicker {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--si-terra);
	margin: 0 0 10px;
}
@media (min-width: 960px) {
	.si-home .si-hero__kicker {
		font-size: 12px;
	}
}
.si-home .si-hero__title {
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.45;
	color: var(--si-text);
	margin: 0 0 14px;
}
@media (min-width: 960px) {
	.si-home .si-hero__title {
		font-size: clamp(28px, 3.4vw, 44px);
	}
}
.si-home .si-hero__lead {
	font-size: 13px;
	line-height: 1.9;
	color: var(--si-text);
	opacity: .85;
	margin: 0 0 24px;
	max-width: 34em;
}
@media (min-width: 960px) {
	.si-home .si-hero__lead {
		font-size: 14px;
	}
}

/* =========================================================================
 * 4. 今日の韓国
 * ========================================================================= */
.si-home .si-pr-note {
	font-size: 12px;
	color: var(--si-muted);
	margin: 0 0 20px;
}

/* SP専用ショートカット */
.si-home .si-today__shortcuts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}
.si-home .si-today__shortcuts > * {
	min-width: 0;
}
@media (min-width: 960px) {
	.si-home .si-today__shortcuts {
		display: none;
	}
}
.si-home .si-today__shortcut {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 76px;
	background: var(--si-card);
	border: 1px solid var(--si-line);
	border-radius: 14px;
	padding: 8px 4px;
	text-align: center;
}
.si-home .si-today__shortcut-ico {
	color: var(--si-terra);
	display: flex;
}
.si-home .si-today__shortcut-ico svg {
	width: 24px;
	height: 24px;
}
.si-home .si-today__shortcut-label {
	font-size: 11px;
	color: var(--si-text);
}

/* カード1〜6 */
.si-home .si-today__grid {
	display: flex;
	flex-direction: column;
	gap: var(--si-card-gap);
}
@media (min-width: 960px) {
	.si-home .si-today__grid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 16px;
		/* 🚨 dense: 展開パネル(grid-column:1/-1)を挟んでも、後続のカードが
		   1行目の空きマスを詰めて埋める（sparseのままだと後続カードが行ごと
		   ずれて1行目に空白が残る）。2026-08-20 fix4。 */
		grid-auto-flow: row dense;
	}
	.si-home .si-today__grid > * {
		min-width: 0;
	}
}

.si-home .si-today__card {
	background: var(--si-card);
	border: 1px solid var(--si-line);
	border-radius: var(--si-radius-card);
	padding: 16px;
	display: flex;
	flex-direction: column;
	width: 100%;
	text-align: left;
	transition: transform .15s ease, border-color .15s ease;
}
.si-home a.si-today__card:hover,
.si-home button.si-today__card:hover {
	transform: translateY(-2px);
	border-color: var(--si-terra);
}
.si-home .si-today__card--empty {
	align-items: flex-start;
	justify-content: center;
	min-height: 96px;
}
.si-home .si-today__card .sih-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* 「押せる」ことを示す控えめなテキストリンク（天気/ホテル/航空券/持ち物カードの下端）。
   タップ領域はカード全体のまま。文字はJSが「閉じる ↑」に差し替える(data-si-panel-link)。 */
.si-home .si-today__link {
	display: inline-block;
	margin-top: auto;
	padding-top: 8px;
	font-size: 12px;
	color: var(--si-terra);
	text-decoration: none;
	align-self: flex-start;
}
.si-home .si-today__card--photo .si-today__link {
	margin: auto 16px 14px;
	padding-top: 0;
}

/* かんたん計算機 */
.si-home .si-calc__label {
	display: block;
	font-size: 11px;
	color: var(--si-muted);
	margin: 8px 0 4px;
}
.si-home .si-calc__label:first-of-type {
	margin-top: 0;
}
.si-home .si-calc__input {
	width: 100%;
	border: 1px solid var(--si-line);
	border-radius: 10px;
	background: var(--si-bg);
	padding: 10px 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--si-text);
	text-align: right;
}
.si-home .si-calc__input:focus {
	outline: none;
	border-color: var(--si-terra);
}
.si-home .si-calc__input[readonly] {
	color: var(--si-muted);
	background: var(--si-terra-w);
}

/* 天気（カード表面。「今日の天気＋気温＋アイコン」だけの簡潔表示） */
.si-home .si-wx__icon {
	color: var(--si-muted);
	margin-bottom: 4px;
}
.si-home .si-wx__icon svg {
	width: 48px;
	height: 48px;
}
.si-home .si-wx__label {
	font-size: 12px;
	color: var(--si-text);
	margin-top: 2px;
}

/* 天気パネル（カードをクリックすると「今日の韓国」直下に横幅いっぱいで開く。
   ホテル・航空券・持ち物と同じ .si-today__panel の仕組みを使う）。
   取得できた日数すべて（MET Norwayは7〜9日。2026-08-20 fix5で実際に9日出るよう修正）を
   SP(<600px)は1日=2行のリスト、PC(≥600px)は1日=1枚の縦積みカードのグリッドで出す。
   🚨 2026-08-20 fix5: 旧実装は6カラムを1行に詰め込んでおり、390px幅で気温と降水量が
   重なっていた（実測で確認）。SPは display:grid; grid-template-columns:1fr auto;
   grid-template-rows:auto auto auto; の3行構成にし、気温行と降水量行を必ず分ける。
   .si-wx__day-head（曜日+日付）と .si-wx__day-temps（最高+最低）はSP用のグループ化ラッパー。
   PC(≥600px)ではこの2つを display:contents で透過させ、直下の要素をそのまま
   .si-wx__day（flex縦積みカード）の子として扱わせることで、既存のPC見た目を維持する。 */
.si-home .si-wx__days {
	display: flex;
	flex-direction: column;
}
.si-home .si-wx__days > * {
	min-width: 0;
}
.si-home .si-wx__day {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto auto;
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	padding: 8px 4px;
	min-height: 44px;
	border-bottom: 1px solid var(--si-line);
	font-size: 12px;
	color: var(--si-text);
	font-variant-numeric: tabular-nums;
}
.si-home .si-wx__day:first-child {
	border-top: 1px solid var(--si-line);
}
.si-home .si-wx__day > * {
	min-width: 0;
	white-space: nowrap;
}
.si-home .si-wx__day-head {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.si-home .si-wx__day-wday {
	font-weight: 700;
}
.si-home .si-wx__day-date {
	color: var(--si-muted);
}
.si-home .si-wx__day-ico {
	grid-column: 2;
	grid-row: 1;
	color: var(--si-muted);
	display: flex;
	align-items: center;
	justify-self: end;
}
.si-home .si-wx__day-ico svg {
	width: 22px;
	height: 22px;
}
.si-home .si-wx__day-temps {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.si-home .si-wx__day-tmax,
.si-home .si-wx__day-tmin {
	font-weight: 700;
}
.si-home .si-wx__day-lbl {
	font-weight: 400;
	font-size: 10px;
	color: var(--si-muted);
	margin-right: 3px;
}
.si-home .si-wx__day-precip {
	grid-column: 2;
	grid-row: 2;
	font-size: 11px;
	color: var(--si-terra);
	text-align: right;
	justify-self: end;
}
/* 服装の目安（2026-08-20 fix5で追加）。SPでは3行目、全幅。長文で折り返す前提なので
   .si-wx__day > * の white-space:nowrap をここだけ打ち消す。 */
.si-home .si-wx__day-outfit {
	grid-column: 1 / -1;
	grid-row: 3;
	font-size: 11px;
	color: var(--si-muted);
	white-space: normal;
}
@media (min-width: 600px) {
	.si-home .si-wx__days {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
		gap: 10px;
	}
	.si-home .si-wx__day {
		grid-template-columns: none;
		grid-template-rows: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 6px;
		padding: 14px 8px;
		min-height: 0;
		border: 1px solid var(--si-line);
		border-radius: 10px;
	}
	.si-home .si-wx__day-head,
	.si-home .si-wx__day-temps {
		display: contents;
	}
	.si-home .si-wx__day-ico {
		justify-self: center;
	}
	.si-home .si-wx__day-precip {
		text-align: center;
		justify-self: center;
	}
	.si-home .si-wx__day-outfit {
		text-align: center;
	}
}

/* ホテル・航空券・持ち物（写真カード） */
.si-home .si-today__card--photo {
	position: relative;
	padding: 0;
	overflow: hidden;
}
.si-home .si-today__card--photo .si-card__title,
.si-home .si-today__card--photo .si-card__sub {
	padding: 0 16px;
}
.si-home .si-today__card--photo .si-card__title {
	margin-top: 16px;
}
.si-home .si-today__card--photo .si-card__sub {
	margin-bottom: 12px;
}
.si-home .si-today__photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--si-radius-photo);
	margin: 0 16px 16px;
	width: calc(100% - 32px);
}

/* 展開パネル（今は .si-today__grid の直接の子。対応カードの直後に置かれ、
   PC(6列grid)では grid-column:1/-1 で横幅いっぱいの次の行に差し込まれる。
   SP(1列flex)ではDOM順そのままカードの直下に来る。2026-08-20 fix4）。 */
.si-home .si-today__panel {
	background: var(--si-card);
	border: 1px solid var(--si-line);
	border-radius: var(--si-radius-card);
	padding: 16px;
	margin-top: var(--si-card-gap);
	grid-column: 1 / -1;
}
.si-home .si-today__panel[hidden] {
	display: none;
}
.si-home .si-today__panel-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	align-items: end;
}
.si-home .si-today__panel-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--si-muted);
	min-width: 0;
}
.si-home .si-today__panel-form input,
.si-home .si-today__panel-form select {
	border: 1px solid var(--si-line);
	border-radius: 8px;
	padding: 8px 10px;
	color: var(--si-text);
	background: var(--si-bg);
}
.si-home .si-today__panel-form .sih-btn {
	grid-column: 1 / -1;
	justify-self: start;
}
.si-home .si-today__panel-form .si-card__note {
	grid-column: 1 / -1;
	margin-top: 0;
}

/* 持ち物チェックリスト */
.si-home .si-packing__guide {
	display: inline-block;
	font-size: 12px;
	color: var(--si-terra);
	text-decoration: underline;
	margin-bottom: 14px;
}
.si-home .si-packing__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 12px;
	color: var(--si-muted);
}
.si-home .si-packing__reset {
	font-size: 11px;
	color: var(--si-terra);
	border: 1px solid var(--si-line);
	border-radius: var(--si-radius-pill);
	padding: 4px 12px;
}
.si-home .si-packing__reset:hover {
	border-color: var(--si-terra);
}
.si-home .si-packing__list li {
	display: flex;
	align-items: center;
	gap: 6px;
	border-top: 1px solid var(--si-line);
}
.si-home .si-packing__list li:first-child {
	border-top: none;
}
.si-home .si-packing__list label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 4px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--si-text);
	min-height: 44px;
	cursor: pointer;
	flex: 1 1 auto;
	min-width: 0;
}
.si-home .si-packing__list input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--si-terra);
	flex: none;
}
.si-home .si-packing__list label.is-done {
	color: var(--si-muted);
	text-decoration: line-through;
}
.si-home .si-packing__link {
	flex: none;
	font-size: 11px;
	color: var(--si-terra);
	border: 1px solid var(--si-line);
	border-radius: var(--si-radius-pill);
	padding: 4px 10px;
	white-space: nowrap;
}
.si-home .si-packing__link:hover {
	border-color: var(--si-terra);
}

/* =========================================================================
 * 5. 今、韓国で話題
 * ========================================================================= */
.si-home .si-trend__grid {
	display: flex;
	flex-direction: column;
	gap: var(--si-card-gap);
}
@media (min-width: 960px) {
	.si-home .si-trend__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}
	.si-home .si-trend__grid > * {
		min-width: 0;
	}
}
.si-home .si-trend__card {
	position: relative;
	display: block;
	height: 168px;
	border-radius: var(--si-radius-photo);
	overflow: hidden;
}
@media (min-width: 960px) {
	.si-home .si-trend__card {
		height: 220px;
	}
}
.si-home .si-trend__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.si-home .si-trend__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(30, 24, 20, .72) 100%);
}
.si-home .si-trend__chip {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(255, 255, 255, .94);
	color: var(--si-terra);
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--si-radius-pill);
	padding: 4px 10px;
}
.si-home .si-trend__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px;
	color: #fff;
}
.si-home .si-trend__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.si-home .si-trend__date {
	font-size: 11px;
	color: rgba(255, 255, 255, .8);
	margin-top: 4px;
}

/* =========================================================================
 * 6. ジャンルから探す
 * ========================================================================= */
.si-home .si-genre__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--si-card-gap);
}
.si-home .si-genre__grid > * {
	min-width: 0;
}
@media (min-width: 960px) {
	.si-home .si-genre__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.si-home .si-genre__card {
	display: flex;
	flex-direction: column;
	background: var(--si-card);
	border: 1px solid var(--si-line);
	border-radius: var(--si-radius-card);
	overflow: hidden;
	transition: transform .15s ease, border-color .15s ease;
}
.si-home .si-genre__card:hover {
	transform: translateY(-2px);
	border-color: var(--si-terra);
}
.si-home .si-genre__photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.si-home .si-genre__body {
	padding: 12px 14px;
	flex: 1 1 auto;
	min-width: 0;
}
.si-home .si-genre__name {
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--si-text);
}
.si-home .si-genre__desc {
	display: none;
	font-size: 11px;
	color: var(--si-muted);
	margin-top: 4px;
}
.si-home .si-genre__arrow {
	display: none;
}

@media (min-width: 960px) {
	.si-home .si-genre__card {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 12px;
	}
	.si-home .si-genre__photo {
		width: 88px;
		height: 88px;
		aspect-ratio: 1 / 1;
		border-radius: 12px;
		flex: none;
	}
	.si-home .si-genre__body {
		padding: 0;
	}
	.si-home .si-genre__desc {
		display: block;
	}
	.si-home .si-genre__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: var(--si-terra-w);
		color: var(--si-terra);
		font-size: 13px;
		flex: none;
	}
}

/* =========================================================================
 * 6.5 空港からソウル市内へ（「ジャンルから探す」の直後、横幅いっぱいの帯）
 * ========================================================================= */
.si-home .si-airport__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--si-card-gap);
}
.si-home .si-airport__grid > * {
	min-width: 0;
}
@media (min-width: 960px) {
	.si-home .si-airport__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.si-home .si-airport__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--si-card);
	border: 1px solid var(--si-line);
	border-radius: var(--si-radius-card);
	padding: 16px;
	min-height: 88px;
	transition: transform .15s ease, border-color .15s ease;
}
.si-home .si-airport__card:hover {
	transform: translateY(-2px);
	border-color: var(--si-terra);
}
.si-home .si-airport__title {
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--si-text);
}
.si-home .si-airport__sub {
	font-size: 11px;
	color: var(--si-muted);
	margin-top: 4px;
}
.si-home .si-airport__card--ad {
	background: var(--si-terra-w);
	border-color: var(--si-terra);
}
.si-home .si-airport__ad-label {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 9px;
	font-weight: 700;
	color: #fff;
	background: var(--si-muted);
	padding: 2px 6px;
	border-radius: 4px;
}

/* =========================================================================
 * 7. 新着記事 / バッジ色
 * ========================================================================= */
.si-home .si-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #fff;
	padding: 3px 8px;
	border-radius: 4px;
}
.si-home .si-badge--navy { background: var(--si-navy); }
.si-home .si-badge--sage { background: var(--si-sage); }
.si-home .si-badge--terra { background: var(--si-terra); }
.si-home .si-badge--gold { background: var(--si-gold); }

.si-home .si-latest__grid {
	display: flex;
	flex-direction: column;
	gap: var(--si-card-gap);
}
@media (min-width: 960px) {
	.si-home .si-latest__grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
	}
	.si-home .si-latest__grid > * {
		min-width: 0;
	}
}
.si-home .si-latest__card--sp-hide {
	display: none;
}
@media (min-width: 960px) {
	.si-home .si-latest__card--sp-hide {
		display: block;
	}
}
.si-home .si-latest__photo-wrap {
	position: relative;
}
.si-home .si-latest__photo {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--si-radius-photo);
}
.si-home .si-latest__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	margin-top: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.si-home .si-latest__date {
	font-size: 11px;
	color: var(--si-muted);
	margin-top: 6px;
}

/* =========================================================================
 * 8. いま読まれている記事
 * 1つのマークアップ（si-popular__list）だけを出し、PC/SPの見た目の違いは
 * すべてこのCSSで切り替える（2026-08-20 fix3: 以前はPC用grid/SP用listの2つを
 * 両方DOMに出しており、同じ記事へのリンクが2回ずつ出力されていた）。
 * SP（既定）: フラットな行。写真は隠し、番号（si-popular__num）とタイトルだけ。
 * PC: 写真つきカード横並び。番号は写真上の丸バッジ（si-popular__rank）だけにする。
 * ========================================================================= */
.si-home .si-popular__list {
	display: flex;
	flex-direction: column;
}
.si-home .si-popular__item {
	border-top: 1px solid var(--si-line);
}
.si-home .si-popular__item:first-child {
	border-top: none;
}
.si-home .si-popular__link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 14px 4px;
}
.si-home .si-popular__num {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--si-terra-w);
	color: var(--si-terra);
	font-weight: 700;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.si-home .si-popular__photo-wrap {
	display: none; /* SP: 写真は隠す */
	position: relative;
}
.si-home .si-popular__photo {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--si-radius-photo);
}
.si-home .si-popular__rank {
	display: none; /* PC用。SPでは番号バッジ(si-popular__num)を使う */
}
.si-home .si-popular__item-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (min-width: 960px) {
	.si-home .si-popular__list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 20px;
	}
	.si-home .si-popular__list > * {
		min-width: 0;
	}
	.si-home .si-popular__item {
		border-top: none;
	}
	.si-home .si-popular__link {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		min-height: 0;
		padding: 0;
	}
	.si-home .si-popular__num {
		display: none; /* PCでは写真上のrankバッジだけにする（重複表示しない） */
	}
	.si-home .si-popular__photo-wrap {
		display: block;
	}
	.si-home .si-popular__rank {
		position: absolute;
		top: 10px;
		left: 10px;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: var(--si-terra);
		color: #fff;
		font-weight: 700;
		font-size: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.si-home .si-popular__item-title {
		font-size: 14px;
		font-weight: 700;
		margin-top: 10px;
		-webkit-line-clamp: 2;
	}
}

/* =========================================================================
 * 9. 日本で楽しむ韓国
 * ========================================================================= */
.si-home .si-japan__grid {
	display: flex;
	gap: var(--si-card-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
}
.si-home .si-japan__card {
	flex: 0 0 68vw;
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--si-card);
	border: 1px solid var(--si-line);
	border-radius: var(--si-radius-card);
	padding: 10px;
	min-width: 0;
}
.si-home .si-japan__photo {
	width: 64px;
	height: 64px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	flex: none;
}
.si-home .si-japan__body {
	min-width: 0;
	flex: 1 1 auto;
}
.si-home .si-japan__title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.si-home .si-japan__date {
	font-size: 11px;
	color: var(--si-muted);
	margin-top: 4px;
}

@media (min-width: 960px) {
	.si-home .si-japan__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		overflow: visible;
	}
	.si-home .si-japan__grid > * {
		min-width: 0;
		flex: initial;
	}
	.si-home .si-japan__photo {
		width: 72px;
		height: 72px;
	}
}

/* =========================================================================
 * 11. フッター（自前。SWELL標準フッターの上に出す。get_footer()は別途そのまま残る）
 * PC: 4カラム（ブランド＋ジャンル＋はじめての韓国＋サイトについて）／SP: ブランド全幅＋2カラム
 * 「ソウルインについて」セクションは廃止（fix3）。運営情報の定義リスト(.si-foot__facts)は
 * 「サイトについて」列と重複するため、その後さらに削除した（2026-08-20 fix4）。
 * ========================================================================= */
.si-home .si-foot {
	display: block;
	margin-top: var(--si-sec-gap);
	background: var(--si-terra-w);
	border-top: 1px solid var(--si-line);
}
.si-home .si-foot__inner {
	padding-top: 40px;
	padding-bottom: 24px;
}
.si-home .si-foot__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px 16px;
}
.si-home .si-foot__brand {
	grid-column: 1 / -1;
}
@media (min-width: 960px) {
	.si-home .si-foot__grid {
		grid-template-columns: 2fr 1fr 1fr 1fr;
		gap: 24px;
	}
	.si-home .si-foot__brand {
		grid-column: auto;
	}
}
.si-home .si-foot__logo {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--si-terra);
	margin: 0 0 6px;
}
.si-home .si-foot__logo-en {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--si-muted);
}
/* ロゴ画像版。背景と同化させるため箱は作らない（transparent明示）。 */
.si-home .si-foot__logo--img {
	display: block;
}
.si-home .si-foot__logo-img {
	height: 40px;
	width: auto;
	max-width: 100%;
	background: transparent;
}
.si-home .si-foot__tag {
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 12.5px;
	color: var(--si-text);
	margin: 0 0 10px;
}
.si-home .si-foot__desc {
	font-size: 12px;
	color: var(--si-muted);
	line-height: 1.9;
	margin: 0;
	max-width: 32em;
}
.si-home .si-foot__h {
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: var(--si-terra);
	border-bottom: 1px solid var(--si-line);
	padding-bottom: 8px;
	margin: 0 0 10px;
}
.si-home .si-foot__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.si-home .si-foot__list a {
	font-size: 12.5px;
	color: var(--si-muted);
	line-height: 1.5;
}
.si-home .si-foot__list a:hover {
	color: var(--si-terra);
}
/* 🚨 運営情報の定義リスト(.si-foot__facts)は削除した（2026-08-20 fix4）。
   すぐ上の「サイトについて」列に /about/ へのリンクがあり重複していたため。 */
.si-home .si-foot__copyright /* 未使用: 行は削除済み */ {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--si-line);
	font-size: 11px;
	color: var(--si-muted);
	text-align: center;
}

/* 導入文の中に置く小さなリンク（カードを増やさずに補助ルートへ送る） */
.si-home .si-sec__inlink{
  color: var(--si-terra);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,107,82,.35);
  white-space: nowrap;
}
.si-home .si-sec__inlink:hover{ border-bottom-color: var(--si-terra); }

/* =========================================================
   テーマ側コンテンツ枠の余白の打ち消し
   SWELLの .l-content.l-container が padding-top:64px / margin-bottom:96px を付けるため、
   ヒーローの上とフッターの下に不要な空きができる。
   🚨 テーマのCSSは編集しない。body に付けた目印で、このテンプレートのときだけ上書きする。
   ========================================================= */
/* 🚨 SWELLは <body> にクラスを一切出力しない（body_class()を呼んでいない・2026-08-20実測）。
   そのため body のクラスを目印にする方法は使えない。
   :has() で「中に .si-home を持つコンテンツ枠」だけを狙う。 */
.l-content.l-container:has( > main.si-home ){
  padding-top: 0;
  margin-bottom: 0;
}
/* 🚨 SWELLは body_class() の出力を <body> ではなく内側の <div> に置く（2026-08-20実測）。
   そのため `body.si-home-tpl` では一致しない。要素を限定せずクラスだけで当てる。 */
.si-home-tpl .l-content.l-container{
  padding-top: 0;
  margin-bottom: 0;
}

/* 🚨 サイト側の既存CSS（カスタマイザー/ウィジェット由来）に
   `.top #content{padding-top:4em}` があり、ID指定なのでクラス指定より強い（110 対 30）。
   旧トップページ用に入れられたものと思われる。
   こちらもIDを含めて詳細度を上げて当て返す（!important は使わない）。 */
#content.l-content:has( > main.si-home ),
.si-home-tpl #content.l-content{
  padding-top: 0;
  margin-bottom: 0;
}

/* 通貨記号は数字の前に置く。「ウォン」の3文字だとカード幅で2行に折り返すため
   （実測: 要素幅38pxに対し文字幅約42px → 高さ48px＝2行になっていた） */
.si-home .si-card__cur{
  font-size: .62em;
  font-weight: 700;
  color: var(--si-terra);
  margin-right: .12em;
  vertical-align: baseline;
}
.si-home .si-card__value{ white-space: nowrap; }

/* ロゴ下のサイト名。目立たせない（補助テキスト扱い） */
.si-home .si-foot__name{
  margin: 10px 0 4px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--si-muted);
}

/* 計算機の使い方ヒント。控えめに。 */
.si-home .si-calc__hint{
  font-size: 11px;
  color: var(--si-muted);
  margin: 0 0 8px;
  line-height: 1.5;
}
/* 当日カードの服装目安。天気ラベルの下・リンクの上。 */
.si-home .si-wx__outfit{
  font-size: 11px;
  color: var(--si-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 当日カードの最高/最低・降水量 */
.si-home .si-wx__minmax,
.si-home .si-wx__precip{
  font-size: 12px;
  color: var(--si-text);
  margin-top: 2px;
  white-space: nowrap;
}
.si-home .si-wx__precip{ color: var(--si-muted); }