/* osakakoreanbar.com ガイド記事（public/ の静的ページ）用 ― トップ「三つの扉」と同じ紙と墨の配色
   各ページの <style> の直後に読み込み、色・書体・角丸だけを上書きする（文章・配置・リンクは変えない）。
   html body を頭に付けて、各ページ内の同名ルールより必ず優先させる。 */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@500;600&family=Shippori+Mincho+B1:wght@600;700&family=Zen+Kaku+Gothic+New:wght@500;700&display=swap");

:root {
  --paper: #f8f7f4; --sub: #efede8; --card: #ffffff;
  --ink: #1b1a18; --body: #2b2926; --ink2: #55524c; --line: #d9d5cd;
  --hvn: #5e2234; --hvn-l: #f3e6ea;
  --mn: #1f2a4d; --mn-l: #e6e9f2;
  --sr: #9a4a2b; --sr-l: #f5e9e2;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --latin: "Jost", sans-serif;
}
html[lang="ko"] { --sans: "Noto Sans KR", sans-serif; --serif: "Noto Sans KR", sans-serif; }
html[lang^="zh"] { --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --serif: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }

/* ---------- 土台 ---------- */
html body {
  background: var(--paper); color: var(--body);
  font-family: var(--sans); font-weight: 500; letter-spacing: .02em;
}
html body ::selection { background: var(--hvn-l); }
html body b, html body strong { color: var(--ink); }

/* ---------- ヘッダー ---------- */
html body .site-header { background: rgba(248,247,244,.96); border-bottom: 1px solid var(--line); }
html body .header-logo { color: var(--ink); font-family: var(--latin); font-weight: 600; letter-spacing: .14em; }
html body .header-lang a { color: var(--ink2); }
html body .header-lang a:hover { color: var(--ink); }
html body .header-lang a.active { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* ---------- 冒頭 ---------- */
html body .page-hero { background: none; border-bottom: 1px solid var(--line); }
html body .page-hero h1 { color: var(--ink); font-family: var(--serif); font-weight: 700; letter-spacing: .04em; }
html body .page-hero .lead { color: var(--body); }

/* ---------- 本文 ---------- */
html body .content-section { border-top: 1px solid var(--line); }
html body .content-section h2 { color: var(--ink); font-family: var(--serif); font-weight: 700; padding-left: 14px; border-left: 3px solid var(--hvn); line-height: 1.5; }
html body .content-section h3 { color: var(--hvn); }
html body .content-section p, html body .content-section ul li, html body .content-section ol li { color: var(--body); }
html body .content-section ul li::before { color: var(--hvn); }
html body .content-section p.source { color: var(--ink2); }
html body .content-section a:not(.btn) { color: var(--mn); text-decoration: underline; text-underline-offset: 3px; }
html body .content-section ul.timeline li { border-left-color: var(--line); }
html body .content-section ul.timeline li::before { color: var(--hvn); }
html body .content-section ul.timeline li::after { background: var(--hvn); }
html body .content-section ul.timeline li strong { color: var(--ink); }
html body .content-section ul.timeline li span { color: var(--ink2); }
html body .content-section ol.step-list li { color: var(--body); border-bottom-color: var(--line); }
html body .content-section ol.step-list li::before { background: var(--hvn-l); border-color: var(--hvn); color: var(--hvn); }
html body .content-section ol.step-list li b { color: var(--ink); }

/* 写真：角丸と枠をやめてトップと同じ四角に */
html body .article-photo { border-radius: 0; border: 0; }
html body .article-photo img { border-radius: 0; }

/* ---------- ボタン（四角・墨／店の色） ---------- */
html body .btn { border-radius: 0; letter-spacing: .06em; }
html body .btn-gold { background: var(--ink); color: var(--paper); }
html body .btn-gold:hover { background: #3a3834; }
html body .btn-pink { background: var(--hvn); color: #fff; }
html body .btn-pink:hover { background: #742b41; }
html body .btn-coral { background: var(--sr); color: #fff; }
html body .btn-coral:hover { background: #b05634; }
html body .btn-outline { border: 1px solid var(--ink); color: var(--ink); }
html body .btn-outline:hover { border-color: var(--hvn); color: var(--hvn); }

/* ---------- 店舗カード ---------- */
html body .store-card { background: var(--card); border: 1px solid var(--line); border-radius: 0; border-top: 3px solid var(--line); }
html body .store-card:hover { border-color: var(--ink2); }
html body .store-card.heaven { border-top-color: var(--hvn); }
html body .store-card.moon { border-top-color: var(--mn); }
html body .store-card.sarang { border-top-color: var(--sr); }
html body .store-card h3 { color: var(--ink); }
html body .store-card.heaven h3 { color: var(--hvn); }
html body .store-card.moon h3 { color: var(--mn); }
html body .store-card.sarang h3 { color: var(--sr); }
html body .store-card .label { color: var(--ink2); }
html body .store-card .value, html body .store-card p { color: var(--body); }
html body .store-card .addr { color: var(--ink2); }
html body .store-card .desc { color: var(--body); }
html body .store-card .tel-link { color: var(--hvn); }
html body .store-card .tel-link:hover { color: #742b41; }
html body .map-link { color: var(--mn); }
html body .map-link:hover { color: var(--ink); }

/* ---------- 数字の箱・比較表・選び方 ---------- */
html body .fact-box { background: var(--sub); border: 1px solid var(--line); border-radius: 0; }
html body .fact-box p { color: var(--body); }
html body .fact-box .n { color: var(--hvn); font-family: var(--latin); }
html body .fact-box .d { color: var(--body); }
html body .fact-box .src { color: var(--ink2); }
html body .cmp-table th, html body .cmp-table td { border: 1px solid var(--line); }
html body .cmp-table th { background: var(--sub); color: var(--ink); }
html body .cmp-table td { background: var(--card); }
html body .cmp-table td:first-child { color: var(--ink); }
html body .cmp-table td.kana { color: var(--mn); }
html body .cmp-table td.use { color: var(--body); }
html body .cmp-table td.us { color: var(--hvn); }
html body .pick a { background: var(--card); border: 1px solid var(--line); border-radius: 0; }
html body .pick a.h { border-top: 3px solid var(--hvn); }
html body .pick a.m { border-top: 3px solid var(--mn); }
html body .pick a.s { border-top: 3px solid var(--sr); }
html body .pick a.h b { color: var(--hvn); }
html body .pick a.m b { color: var(--mn); }
html body .pick a.s b { color: var(--sr); }
html body .pick a span { color: var(--ink2); }
html body .quiz-box { background: var(--hvn-l); border: 1px solid var(--line); border-radius: 0; }
html body .quiz-box .q { color: var(--ink); }
html body .quiz-box .a { background: var(--card); color: var(--body); border-radius: 0; }
html body .quiz-box .a b { color: var(--hvn); }

/* ---------- 関連ガイド ---------- */
html body .related-guides { border-top: 1px solid var(--line); }
html body .related-guides h3 { color: var(--ink); font-family: var(--serif); }
html body .related-guides a { color: var(--body); }
html body .related-guides a:hover { color: var(--hvn); }
html body .related-guides a::before { color: var(--hvn); }
html body .related-guides a.all-guides { border: 1px solid var(--ink); border-radius: 0; color: var(--ink); }
html body .related-guides a.all-guides:hover { background: var(--ink); color: var(--paper); }

/* ガイド一覧ページ（/guides 系）の分類 */
html body .cat { background: var(--card); border: 1px solid var(--line); border-radius: 0; }
html body .cat summary { color: var(--ink); }
html body .cat summary::after { color: var(--hvn); }
html body .cat .links a { color: var(--body); border-top-color: var(--line); }
html body .cat .links a:hover { color: var(--hvn); }
html body .cat .links a::before { color: var(--hvn); }
html body .cat .links a small { color: var(--ink2); }

/* ---------- フッター ---------- */
html body .site-footer { background: var(--sub); border-top: 1px solid var(--line); color: var(--ink2); }
html body .site-footer a { color: var(--ink2); }
html body .site-footer a:hover { color: var(--ink); }
html body .footer-col h4 { color: var(--ink); font-family: var(--latin); letter-spacing: .14em; }
html body .footer-col p { color: var(--ink2); }
html body .footer-col a { color: var(--ink2); }
html body .footer-col a:hover { color: var(--ink); }
html body .footer-col .tel { color: var(--hvn); }
html body .footer-bottom { border-top: 1px solid var(--line); color: var(--ink2); }
html body .footer-bottom a { color: var(--ink2); }
html body .footer-bottom a:hover { color: var(--ink); }

/* ---------- スマホ下の固定バー ---------- */
html body .sticky-cta { background: rgba(248,247,244,.97); border-top: 1px solid var(--line); }
html body .sticky-cta__item { color: var(--ink2); }
html body .sticky-cta__item--primary { background: var(--hvn); color: #fff; }

/* ---------- 本文中の style="" で色を直接指定している箇所 ---------- */
html body [style*="color:#FF1493"], html body [style*="color: #FF1493"] { color: var(--hvn) !important; }
html body [style*="color:#D4AF37"], html body [style*="color: #D4AF37"] { color: var(--mn) !important; }
html body [style*="color:#FF7F50"], html body [style*="color: #FF7F50"] { color: var(--sr) !important; }
html body [style*="color:rgba(255,255,255"], html body [style*="color: rgba(255,255,255"] { color: var(--ink2) !important; }
html body [style*="color:#c8c8c8"], html body [style*="color: #c8c8c8"],
html body [style*="color:#d0d0d0"], html body [style*="color: #d0d0d0"],
html body [style*="color:#ececec"], html body [style*="color: #ececec"] { color: var(--body) !important; }
html body [style*="background:rgba(212,175,55"], html body [style*="background: rgba(212,175,55"],
html body [style*="background:rgba(255,255,255"], html body [style*="background: rgba(255,255,255"] { background: var(--sub) !important; border-color: var(--line) !important; border-radius: 0 !important; }