/* 三休 公開サイト — スタイルはこの 1 本だけ (01 §7)。
 *
 * フレームワークは入れない。色・間隔・角丸は必ず下の CSS 変数を経由すること。
 * ここに直接 #hex を書くと、店舗テーマ (P6) を入れる時に全ファイルを grep して
 * 回ることになる。
 *
 * レイアウト: スマホ 1 カラム / PC (>=900px) 2 カラム。店舗ページの右カラム
 * (予約ブロック) だけ sticky。
 */

:root {
  color-scheme: light;

  /* 落ち着いた配色: 温かい生成り地・墨色文字・アクセントは臙脂 1 色 + 金の差し色 */
  --sk-primary: #8f2a35;
  --sk-primary-dark: #6f1f28;
  --sk-primary-weak: #f7eded;

  --sk-ink: #221e19;
  --sk-ink-weak: #6b6255;
  --sk-ink-faint: #978e81;

  /* ヘッダ / フッタの地。黒ではなく墨に寄せた濃茶 (真っ黒は安く見える)。 */
  --sk-ink-deep: #17130f;
  --sk-ink-deep-2: #241d16;

  /* 差し色の金。面で使わず、罫線・ロゴの下線・見出しの印だけに使う。 */
  --sk-gold: #c3a468;
  --sk-gold-soft: rgba(195, 164, 104, 0.34);

  --sk-bg: #ffffff;
  --sk-bg-soft: #f7f3ec;
  --sk-line: #e4ddd2;
  /* 濃地の上の罫線 (白を透かす)。`--sk-line` を濃地で使うと消える。 */
  --sk-line-dark: rgba(255, 255, 255, 0.16);

  --sk-ok: #2f6b48;
  --sk-warn: #a3671b;

  --sk-radius: 8px;
  --sk-radius-lg: 14px;
  --sk-gap: 16px;
  --sk-max: 1080px;
  --sk-font: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  /* 🔴 見出しだけ明朝。日本語の「高級感」はほぼこれで決まるので、
     本文には使わない (長文の明朝は画面で読みにくい)。 */
  --sk-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
    "Times New Roman", serif;
  --sk-shadow: 0 1px 2px rgba(35, 32, 28, 0.05), 0 6px 20px rgba(35, 32, 28, 0.06);
  --sk-shadow-lift: 0 2px 6px rgba(35, 32, 28, 0.07), 0 14px 34px rgba(35, 32, 28, 0.1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sk-font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--sk-ink);
  /* 平らな 1 色だと安く見えるので、上だけほんのり暖色を落とす。
     `background-attachment: fixed` は iOS で描画が崩れるので使わない。 */
  background: var(--sk-bg-soft);
  background-image: linear-gradient(180deg, #f2ebe0 0%, var(--sk-bg-soft) 420px);
  background-repeat: no-repeat;
}

a { color: inherit; }
img { max-width: 100%; height: auto; }

/* --- ヘッダ / フッタ ------------------------------------------------------ */

/* 🔴 ヘッダは濃地。白ヘッダのままだと下のカードと同じ明度で、
   ページ全体が「フォームの並んだ管理画面」に見える。濃地 + 金の細罫 +
   明朝のロゴの 3 点で高級店の看板に寄せる。文字色は濃地用に別途指定が要る
   (`--sk-ink-*` をそのまま使うと濃地に沈んで読めない)。 */
.sk-header {
  background: linear-gradient(180deg, var(--sk-ink-deep-2), var(--sk-ink-deep));
  border-bottom: 1px solid var(--sk-gold-soft);
  position: sticky;
  top: 0;
  z-index: 30;
}
.sk-header__inner {
  max-width: var(--sk-max);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: var(--sk-gap);
  flex-wrap: wrap;
}
.sk-brand { text-decoration: none; display: flex; align-items: baseline; gap: 10px; }
.sk-brand__mark {
  font-family: var(--sk-serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.22em;
  /* 明朝の字面は右に余白が空くので、字送りぶんを右パディングで戻す。 */
  padding-inline-end: 0.22em;
  color: #fff;
  border-bottom: 1px solid var(--sk-gold);
  padding-bottom: 2px;
}
.sk-brand__sub {
  font-size: 11px;
  color: var(--sk-gold);
  letter-spacing: 0.18em;
}

.sk-header__search { margin-inline-start: auto; display: flex; gap: 8px; }
.sk-header__search input {
  width: 220px; max-width: 46vw;
  padding: 8px 12px;
  border: 1px solid var(--sk-line-dark);
  border-radius: var(--sk-radius);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font: inherit;
}
.sk-header__search input::placeholder { color: rgba(255, 255, 255, 0.45); }
.sk-header__search input:focus {
  outline: none;
  border-color: var(--sk-gold);
  background: rgba(255, 255, 255, 0.12);
}
.sk-header__search button {
  padding: 8px 16px;
  border: 1px solid var(--sk-gold-soft); border-radius: var(--sk-radius);
  background: var(--sk-primary); color: #fff;
  font: inherit; cursor: pointer;
}
.sk-header__search button:hover { background: var(--sk-primary-dark); }

/* 会員リンク。検索欄が `margin-left:auto` で右に寄るので、その右隣に並べる。
   狭い画面では検索欄が折り返して 2 段になる (flex-wrap は inner 側に既にある)。 */
.sk-header__member { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.sk-header__member a {
  color: rgba(255, 255, 255, 0.72); text-decoration: none; white-space: nowrap;
}
.sk-header__member a:hover { color: var(--sk-gold); text-decoration: none; }
.sk-header__member .sk-header__signup {
  padding: 7px 14px;
  border: 1px solid var(--sk-gold);
  border-radius: var(--sk-radius);
  color: var(--sk-gold);
  letter-spacing: 0.04em;
}
.sk-header__member .sk-header__signup:hover {
  background: var(--sk-gold); color: var(--sk-ink-deep); text-decoration: none;
}
.sk-header__logout { margin: 0; }
.sk-header__logout button {
  padding: 0; border: 0; background: none;
  color: rgba(255, 255, 255, 0.72); font: inherit; cursor: pointer;
}
.sk-header__logout button:hover { color: var(--sk-gold); }

.sk-main { max-width: var(--sk-max); margin: 0 auto; padding: 28px 20px 56px; }

.sk-footer {
  background: var(--sk-ink-deep);
  border-top: 1px solid var(--sk-gold-soft);
}
.sk-footer__inner { max-width: var(--sk-max); margin: 0 auto; padding: 30px 20px 44px; }
.sk-footer__nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; }
.sk-footer__nav a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.sk-footer__nav a:hover { color: var(--sk-gold); }
.sk-footer__copy { color: rgba(255, 255, 255, 0.4); font-size: 12px; margin: 16px 0 0; }

/* --- 共通パーツ ----------------------------------------------------------- */

.sk-page__title {
  font-family: var(--sk-serif);
  font-size: 26px; font-weight: 600; margin: 0 0 12px; letter-spacing: 0.08em;
}
.sk-section { margin: 32px 0; }
.sk-section--tight { margin: 16px 0 20px; }
/* 見出しの印は太い臙脂の棒 → 細い二重罫 (臙脂 + 金) に。棒が太いと
   「注意書き」に見えるので、細くして字のほうを主役にする。 */
.sk-section__title {
  font-family: var(--sk-serif);
  font-size: 19px; font-weight: 600; margin: 0 0 14px;
  letter-spacing: 0.1em;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--sk-primary);
  box-shadow: -5px 0 0 -1px var(--sk-gold);
}
.sk-section__subtitle { font-size: 14px; color: var(--sk-ink-weak); margin: 20px 0 8px; }
.sk-lead { margin: 0 0 12px; }
.sk-muted { color: var(--sk-ink-faint); }
.sk-narrow { max-width: 640px; }
.sk-empty { padding: 32px; text-align: center; color: var(--sk-ink-weak); background: var(--sk-bg); border-radius: var(--sk-radius-lg); }
.sk-resultcount { color: var(--sk-ink-weak); margin: 0 0 12px; }
.sk-resultcount strong { color: var(--sk-ink); font-size: 20px; }

.sk-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--sk-radius);
  border: 1px solid transparent;
  font: inherit; text-decoration: none; text-align: center; cursor: pointer;
}
.sk-btn--primary { background: var(--sk-primary); color: #fff; }
.sk-btn--primary:hover { background: var(--sk-primary-dark); }
.sk-btn--ghost { background: var(--sk-bg); color: var(--sk-primary); border-color: var(--sk-primary); }
.sk-btn--block { display: block; width: 100%; margin-top: 10px; }

.sk-tag {
  display: inline-block;
  padding: 1px 9px; margin-inline-end: 6px;
  font-size: 12px; border-radius: 999px;
  background: var(--sk-bg-soft); color: var(--sk-ink-weak);
  border: 1px solid var(--sk-line); text-decoration: none;
}
.sk-tag--genre { background: var(--sk-primary-weak); color: var(--sk-primary); border-color: transparent; }

.sk-chiplist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sk-chip {
  display: inline-block; padding: 6px 14px;
  background: var(--sk-bg); border: 1px solid var(--sk-line);
  border-radius: 999px; text-decoration: none; font-size: 14px;
}
.sk-chip:hover { border-color: var(--sk-primary); color: var(--sk-primary); }
.sk-chiplist--small .sk-chip { font-size: 13px; padding: 4px 12px; }
.sk-chip--ghost { background: transparent; }

.sk-breadcrumb { font-size: 12px; color: var(--sk-ink-faint); margin: 0 0 8px; }
.sk-breadcrumb a { text-decoration: none; }
.sk-breadcrumb span { margin: 0 6px; }

/* --- トップ --------------------------------------------------------------- */

/* ヒーローは `sk-main` の外 (全幅)。中身だけ本文と同じ幅に揃える。 */
.sk-hero {
  background: var(--sk-bg);
  border-bottom: 1px solid var(--sk-line);
  padding: 32px 20px;
}
.sk-hero__inner { max-width: var(--sk-max); margin: 0 auto; }
.sk-hero__title {
  font-family: var(--sk-serif);
  font-size: 30px; font-weight: 600; margin: 0 0 8px; letter-spacing: 0.14em;
}
.sk-hero__lead { margin: 0 0 20px; color: var(--sk-ink-weak); }

/* --- 検索フォーム --------------------------------------------------------- */

.sk-searchform__row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.sk-searchform__row--tail { align-items: center; }
.sk-field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.sk-field--grow { flex: 1 1 220px; }
.sk-field__label { font-size: 12px; color: var(--sk-ink-weak); }
.sk-field select, .sk-field input {
  padding: 8px 10px; border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius); font: inherit; background: var(--sk-bg);
}
.sk-soon {
  font-style: normal; font-size: 10px; margin-inline-start: 4px;
  padding: 0 5px; border-radius: 999px;
  background: var(--sk-bg-soft); color: var(--sk-ink-faint); border: 1px solid var(--sk-line);
}
.sk-check { font-size: 14px; color: var(--sk-ink-weak); margin-inline-end: 10px; }
.sk-searchform__row--tail .sk-btn { margin-inline-start: auto; }

/* --- カード一覧 ----------------------------------------------------------- */

.sk-cardgrid { display: grid; gap: var(--sk-gap); grid-template-columns: 1fr; }
.sk-card {
  background: var(--sk-bg); border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
/* hover で地の色を変えると「選択中」に見えて紛らわしいので、影で浮かせる。 */
.sk-card:hover { box-shadow: var(--sk-shadow-lift); transform: translateY(-2px); }
.sk-card__link { display: block; padding: 18px 20px; text-decoration: none; }
/* 写真つきカード: サムネ左 / 本文右。写真が無い掲載は今まで通り本文だけ。 */
.sk-card__link--photo { display: flex; gap: 16px; align-items: stretch; padding: 14px 16px; }
.sk-card__thumb {
  position: relative;
  /* 比率を固定する。カードの高さに合わせて伸ばすと、店名が長い行だけ
     縦長の写真になって一覧がガタつく。 */
  flex: 0 0 140px;
  align-self: flex-start;
  aspect-ratio: 4 / 3;
  border-radius: var(--sk-radius);
  background-color: var(--sk-bg-soft);
  background-size: cover;
  background-position: center;
}
/* 🔴 その店の写真ではないときの断り書き。消さない (01 §2)。 */
.sk-card__thumbnote {
  position: absolute; inset-inline-start: 6px; bottom: 6px;
  padding: 1px 6px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.04em;
  background: rgba(15, 12, 9, 0.62); color: #fff;
}
.sk-card__body { flex: 1 1 auto; min-width: 0; }
.sk-card__link:hover .sk-card__name { color: var(--sk-primary); }
.sk-card__name {
  font-family: var(--sk-serif);
  font-size: 18px; font-weight: 600; margin: 0 0 6px; letter-spacing: 0.04em;
}
.sk-card__meta { margin: 0 0 6px; }
.sk-card__addr { margin: 0 0 4px; font-size: 13px; color: var(--sk-ink-weak); }
.sk-card__budget { margin: 0 0 6px; font-size: 13px; color: var(--sk-ink-weak); display: flex; gap: 14px; flex-wrap: wrap; }
.sk-card__state { margin: 0; font-size: 13px; color: var(--sk-ok); }
.sk-card__state--unclaimed { color: var(--sk-warn); }

/* 検索結果カードの空き時間ボタン (日付指定時のみ・最大 4 つ)。 */
.sk-card__slots {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 18px 16px; margin: -4px 0 0;
}
.sk-card__slot {
  display: inline-block; padding: 6px 12px; font-size: 13px; font-weight: 600;
  text-decoration: none; color: var(--sk-primary);
  border: 1px solid var(--sk-primary); border-radius: 999px; background: var(--sk-bg);
}
.sk-card__slot:hover { background: var(--sk-primary-weak); }
.sk-searchnote { margin: 0 0 12px; font-size: 13px; color: var(--sk-ink-weak); }

.sk-pager { display: flex; align-items: center; gap: 16px; justify-content: center; margin: 28px 0; }
.sk-pager__link { text-decoration: none; color: var(--sk-primary); }
.sk-pager__pos { color: var(--sk-ink-faint); font-size: 13px; }

/* --- 店舗ページ ----------------------------------------------------------- */

.sk-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.sk-shop__head { background: var(--sk-bg); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); padding: 20px 22px; }
.sk-shop__name { font-size: 26px; margin: 0 0 2px; }
.sk-shop__kana { margin: 0 0 10px; font-size: 13px; color: var(--sk-ink-faint); }
.sk-shop__tags { margin: 0 0 8px; }
.sk-shop__price { margin: 0; font-size: 14px; color: var(--sk-ink-weak); }
.sk-shop__desc-note { font-size: 12px; color: var(--sk-ink-weak); margin: 6px 0 0; }
.sk-shop__desc { background: var(--sk-bg); border: 1px solid var(--sk-line); border-radius: var(--sk-radius); padding: 16px 18px; margin: 0; }

.sk-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 20px 0; }
.sk-gallery__item { margin: 0; }
.sk-gallery__item img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--sk-radius); display: block; }

.sk-map { height: 280px; border-radius: var(--sk-radius); border: 1px solid var(--sk-line); background: var(--sk-bg); }
.sk-map--hero { height: 340px; }

.sk-info { width: 100%; border-collapse: collapse; background: var(--sk-bg); border: 1px solid var(--sk-line); border-radius: var(--sk-radius); overflow: hidden; }
.sk-info th, .sk-info td { text-align: start; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--sk-line); font-weight: normal; }
.sk-info th { width: 32%; color: var(--sk-ink-weak); background: var(--sk-bg-soft); font-size: 13px; }
.sk-info tr:last-child th, .sk-info tr:last-child td { border-bottom: 0; }

.sk-notice {
  margin-top: 28px; padding: 14px 16px;
  background: var(--sk-bg-soft); border: 1px dashed var(--sk-line);
  border-radius: var(--sk-radius); font-size: 13px; color: var(--sk-ink-weak);
}
.sk-notice p { margin: 0; }

/* 予約ブロック (P2 で空席カレンダーに差し替わる = テンプレートの block booking) */
.sk-booking {
  background: var(--sk-bg); border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius-lg); padding: 18px 20px; box-shadow: var(--sk-shadow);
}
.sk-booking__title { font-size: 16px; margin: 0 0 12px; }
.sk-booking__state { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.sk-booking__state--soon { color: var(--sk-warn); }
.sk-booking__state--full { color: var(--sk-ink-faint); }
.sk-booking__lead { margin: 0 0 14px; font-size: 13px; color: var(--sk-ink-weak); }

/* --- フォーム ------------------------------------------------------------- */

.sk-form { background: var(--sk-bg); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); padding: 20px 22px; }
.sk-formrow { margin-bottom: 16px; }
.sk-formrow__label { display: block; font-size: 13px; color: var(--sk-ink-weak); margin-bottom: 4px; }
.sk-formrow input, .sk-formrow textarea, .sk-formrow select {
  width: 100%; padding: 9px 12px; font: inherit;
  border: 1px solid var(--sk-line); border-radius: var(--sk-radius); background: var(--sk-bg);
}
.sk-formrow--error input, .sk-formrow--error textarea { border-color: var(--sk-primary); }
.sk-formrow__help { font-size: 12px; color: var(--sk-ink-faint); margin: 4px 0 0; }
.sk-formerr { color: var(--sk-primary); font-size: 13px; margin: 6px 0 0; padding-inline-start: 18px; }
.sk-req { font-style: normal; font-size: 10px; margin-inline-start: 6px; padding: 0 6px; border-radius: 999px; background: var(--sk-primary-weak); color: var(--sk-primary); }
.sk-done { text-align: start; }

/* --- 空席カレンダー (P2-e / 02 §1・03 §4) --------------------------------- */

.sk-availform { margin-bottom: 14px; }
.sk-datechips {
  display: flex; gap: 6px; overflow-x: auto;
  padding-bottom: 6px; margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.sk-datechip {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--sk-line); border-radius: 999px;
  background: var(--sk-bg); color: var(--sk-ink);
  font-size: 13px; text-decoration: none; white-space: nowrap;
}
.sk-datechip--active { background: var(--sk-primary); border-color: var(--sk-primary); color: #fff; }
.sk-avail-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sk-avail-row select {
  padding: 8px 10px; border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius); font: inherit; background: var(--sk-bg);
}
.sk-avail-row .sk-btn { margin-inline-start: auto; }

.sk-availability { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sk-line); }
.sk-avail-date { margin: 0 0 10px; font-size: 13px; color: var(--sk-ink-weak); }
.sk-timegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sk-timeslot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--sk-line); border-radius: var(--sk-radius);
  text-decoration: none; color: var(--sk-ink); background: var(--sk-bg);
  font-size: 12px;
}
.sk-timeslot__time { font-size: 12px; }
.sk-timeslot__mark { font-size: 15px; font-weight: 700; }
.sk-timeslot--ok { border-color: var(--sk-ok); }
.sk-timeslot--ok .sk-timeslot__mark { color: var(--sk-ok); }
.sk-timeslot--few { border-color: var(--sk-warn); }
.sk-timeslot--few .sk-timeslot__mark { color: var(--sk-warn); }
.sk-timeslot--none {
  color: var(--sk-ink-faint); background: var(--sk-bg-soft);
  cursor: default;
}
.sk-timeslot--none .sk-timeslot__mark { color: var(--sk-ink-faint); }
.sk-timegrid__legend { margin: 10px 0 0; font-size: 11px; color: var(--sk-ink-faint); }

/* --- プラン一覧 (P2-e / 02 §1 やること 3) ---------------------------------- */

.sk-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sk-plan {
  background: var(--sk-bg); border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius-lg); padding: 16px 18px; box-shadow: var(--sk-shadow);
}
.sk-plan__kind {
  display: inline-block; margin: 0 0 6px; padding: 1px 9px;
  font-size: 11px; border-radius: 999px;
  background: var(--sk-primary-weak); color: var(--sk-primary);
}
.sk-plan__title { font-size: 17px; margin: 0 0 6px; }
.sk-plan__price { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.sk-plan__price .sk-muted { font-size: 12px; font-weight: normal; }
.sk-plan__meta { margin: 0 0 6px; font-size: 13px; color: var(--sk-ink-weak); }
.sk-plan__desc { margin: 0 0 10px; font-size: 13px; }
.sk-plan__cancel { margin: 0 0 12px; font-size: 12px; color: var(--sk-ink-weak); }

/* --- PC (2 カラム) -------------------------------------------------------- */

/* --- 会員 / 予約 3 ステップ (P3-b / 03 §4) --------------------------------- */

.sk-authlinks { margin: 16px 0 0; font-size: 13px; text-align: center; }

.sk-notice {
  margin: 0 0 16px; padding: 10px 14px; font-size: 13px;
  border-radius: var(--sk-radius-lg); border: 1px solid var(--sk-line);
}
.sk-notice--ok { border-color: var(--sk-ok); color: var(--sk-ok); }
.sk-notice--warn { border-color: var(--sk-warn); color: var(--sk-warn); }

.sk-steps { list-style: none; display: flex; gap: 8px; margin: 0 0 20px; padding: 0; }
.sk-steps__item {
  flex: 1; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--sk-ink-faint);
  border-top: 3px solid var(--sk-line); padding-top: 8px;
}
.sk-steps__item.is-current { color: var(--sk-primary); border-top-color: var(--sk-primary); }
.sk-steps__item.is-done { color: var(--sk-ink-weak); border-top-color: var(--sk-ink-weak); }
.sk-steps__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  background: currentColor; color: #fff; font-size: 11px;
}

.sk-booksummary {
  background: var(--sk-bg-soft); border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius-lg); padding: 14px 16px; margin: 0 0 20px;
}
.sk-booksummary__shop { margin: 0 0 4px; font-weight: 700; }
.sk-booksummary__when { margin: 0 0 4px; font-size: 15px; }
.sk-booksummary__plan { margin: 0; font-size: 13px; color: var(--sk-ink-weak); }

.sk-planpick { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.sk-planpick__item > label {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); padding: 14px 16px;
}
.sk-planpick__item > label:hover { border-color: var(--sk-primary); }
.sk-planpick__body { display: block; }
.sk-planpick__body > span { display: block; }
.sk-planpick__title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }

.sk-deflist {
  margin: 0 0 20px; display: grid; grid-template-columns: 120px 1fr;
  gap: 8px 14px; font-size: 14px;
}
.sk-deflist dt { color: var(--sk-ink-weak); font-size: 13px; }
.sk-deflist dd { margin: 0; }

.sk-policy {
  border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg);
  padding: 14px 16px; margin: 0 0 20px;
}
.sk-policy__title { font-size: 14px; margin: 0 0 6px; }
.sk-policy__body { margin: 0 0 6px; font-size: 13px; }
.sk-policy__free { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.sk-policy__now { margin: 0; font-size: 13px; color: var(--sk-ink-weak); }

.sk-rescode { margin: 0 0 6px; font-size: 14px; }
.sk-resstatus {
  display: inline-block; margin: 0 0 16px; padding: 2px 10px;
  border-radius: 999px; font-size: 12px;
  background: var(--sk-primary-weak); color: var(--sk-primary);
}
.sk-resstatus--cancelled_by_guest,
.sk-resstatus--cancelled_by_shop,
.sk-resstatus--expired { background: var(--sk-bg-soft); color: var(--sk-ink-faint); }
.sk-resactions { margin: 0 0 20px; }

.sk-accountnav { display: flex; gap: 14px; margin: 0 0 20px; font-size: 14px; }
.sk-accountnav__item { padding-bottom: 4px; border-bottom: 2px solid transparent; }
.sk-accountnav__item.is-current { border-bottom-color: var(--sk-primary); font-weight: 700; }

.sk-tabs { display: flex; gap: 14px; margin: 0 0 16px; font-size: 13px; }
.sk-tabs__item { padding-bottom: 4px; border-bottom: 2px solid transparent; }
.sk-tabs__item.is-current { border-bottom-color: var(--sk-primary); font-weight: 700; }

.sk-reslist, .sk-favlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sk-reslist__link {
  display: block; border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius-lg); padding: 12px 14px;
}
.sk-reslist__when { display: block; font-size: 15px; font-weight: 700; }
.sk-reslist__shop { display: block; font-size: 14px; }
.sk-reslist__meta { display: block; font-size: 12px; color: var(--sk-ink-faint); }
.sk-favlist__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); padding: 12px 14px;
}
.sk-favlist__name { display: block; font-weight: 700; }
.sk-favlist__area { display: block; font-size: 12px; color: var(--sk-ink-faint); }

.sk-fav { margin: 10px 0 0; }
.sk-btn--fav { background: var(--sk-bg); color: var(--sk-ink-weak); border-color: var(--sk-line); }
.sk-btn--fav.is-on { color: var(--sk-primary); border-color: var(--sk-primary); }

.sk-availform { margin: 0 0 14px; }
.sk-availform__row { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-availform__row input, .sk-availform__row select {
  padding: 8px 10px; border: 1px solid var(--sk-line); border-radius: var(--sk-radius);
}

/* --- PC (2 カラム) -------------------------------------------------------- */

@media (min-width: 900px) {
  .sk-cardgrid { grid-template-columns: repeat(2, 1fr); }
  .sk-detail { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .sk-detail__side { position: sticky; top: 20px; }
}

/* --- 写真 (エリア / ジャンル / シーン) ------------------------------------- *
 *
 * 08-visuals-and-scene-search.md §3。画像は `static/public/img/<kind>/<slug>.webp`
 * で、**無い slug は `.sk-photocard--noimg` のグラデーションだけ**で成立させる
 * (テンプレート側が画像の実在を見て `<img>` を出し分けている)。
 */

.sk-hero--photo {
  position: relative;
  overflow: hidden;
  border: none;
  background-color: var(--sk-ink);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--sk-gold-soft);
  padding: 76px 20px 68px;
}
.sk-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg, rgba(15, 12, 9, 0.42) 0%, rgba(15, 12, 9, 0.72) 100%
  );
}
.sk-hero--photo .sk-hero__inner { position: relative; }
.sk-hero--photo .sk-hero__title { color: #fff; }
.sk-hero--photo .sk-hero__lead { color: rgba(255, 255, 255, 0.86); }
.sk-hero--photo .sk-searchform {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--sk-gold-soft);
  border-radius: var(--sk-radius-lg);
  box-shadow: 0 18px 46px rgba(10, 8, 6, 0.34);
  padding: 18px;
}

/* ランディング (エリア / ジャンル / シーン) のヒーロー */
.sk-lphero {
  position: relative;
  overflow: hidden;
  border-radius: var(--sk-radius-lg);
  background-color: var(--sk-ink);
  background-size: cover;
  background-position: center;
  padding: 36px 24px;
  margin: 0 0 16px;
}
.sk-lphero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 17, 14, 0.4), rgba(20, 17, 14, 0.72));
}
.sk-lphero__inner { position: relative; }
.sk-lphero__title { font-size: 24px; margin: 0 0 6px; color: #fff; letter-spacing: 0.02em; }
.sk-lphero__lead { margin: 0; color: rgba(255, 255, 255, 0.88); }

.sk-page__lead { margin: 0 0 16px; color: var(--sk-ink-weak); }

.sk-photogrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sk-photocard {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--sk-radius);
  aspect-ratio: 3 / 2;
  text-decoration: none;
  background: var(--sk-bg-soft);
  box-shadow: var(--sk-shadow);
}
.sk-photocard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sk-photocard__body {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(20, 17, 14, 0), rgba(20, 17, 14, 0.78));
  color: #fff;
}
.sk-photocard__name { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.sk-photocard__sub { font-size: 12px; color: rgba(255, 255, 255, 0.82); }
/* 訳語は 1 語で日本語より長くなる (ta の「接待・会食」など)。折り返せないと札からはみ出す。 */
.sk-photocard__name,
.sk-photocard__sub { overflow-wrap: anywhere; }
/* 画像がまだ無い slug のフォールバック (404 を並べない) */
.sk-photocard--noimg {
  background: linear-gradient(135deg, var(--sk-primary-weak), var(--sk-line));
}
.sk-photocard--noimg .sk-photocard__body {
  inset: 0;
  justify-content: center;
  align-items: center;
  background: none;
  color: var(--sk-ink);
  text-align: center;
}

/* --- 効いている条件のチップ (08 §3-4) ------------------------------------- */

.sk-appliedchips {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sk-appliedchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 12px; border-radius: 999px;
  background: var(--sk-primary-weak); color: var(--sk-primary-dark);
  font-size: 13px;
}
.sk-appliedchip__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--sk-bg); color: var(--sk-primary-dark);
  text-decoration: none; line-height: 1;
}

/* --- 画像クレジット (08 §4) ----------------------------------------------- */

.sk-credits { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.sk-credit {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--sk-bg); border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius); padding: 12px;
}
.sk-credit__img {
  width: 120px; height: 80px; object-fit: cover;
  border-radius: var(--sk-radius); flex: none;
}
.sk-credit__body { min-width: 0; }
.sk-credit__use { margin: 0 0 2px; font-weight: 600; }
.sk-credit__file { margin: 0 0 4px; font-size: 13px; color: var(--sk-ink-weak); word-break: break-word; }
.sk-credit__meta { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 12px; }
.sk-credit__source { margin: 2px 0 0; font-size: 13px; }


/* --- 日付 / 時刻の選択 (skpicker.js) ---------------------------------------
 * 🔴 ネイティブの input は消さずに隠すだけ (JS が動かない端末の逃げ道)。
 */
.sk-picker__native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.sk-pickbtn {
  display: block; width: 100%; text-align: start;
  padding: 10px 36px 10px 12px;
  font: inherit; color: var(--sk-ink);
  background: var(--sk-bg) no-repeat right 12px center;
  border: 1px solid var(--sk-line); border-radius: var(--sk-radius);
  cursor: pointer;
}
.sk-pickbtn:hover { border-color: var(--sk-primary); }
.sk-pickbtn.is-empty { color: var(--sk-ink-faint); }
/* 何のボタンかを文字なしで示す (虫眼鏡ではなく暦と時計)。 */
.sk-pickbtn--date { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6255' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.sk-pickbtn--time { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6255' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

.sk-dlg {
  border: none; border-radius: var(--sk-radius-lg); padding: 0;
  width: min(92vw, 380px); box-shadow: var(--sk-shadow-lift);
  color: var(--sk-ink); background: var(--sk-bg);
}
.sk-dlg::backdrop { background: rgba(23, 19, 15, 0.42); }
.sk-dlg__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--sk-line);
}
.sk-dlg__title { font-family: var(--sk-serif); font-size: 16px; }
.sk-dlg__close {
  border: none; background: transparent; font-size: 22px; line-height: 1;
  color: var(--sk-ink-weak); cursor: pointer; padding: 0 4px;
}
.sk-dlg__body { padding: 14px 16px 18px; }

.sk-cal__quick { display: flex; gap: 8px; margin: 0 0 12px; }
.sk-cal__quick .sk-chip { cursor: pointer; }
.sk-cal__head {
  display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px;
}
.sk-cal__month { font-family: var(--sk-serif); font-size: 15px; }
.sk-cal__nav {
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid var(--sk-line); background: var(--sk-bg);
  font-size: 18px; line-height: 1; color: var(--sk-ink); cursor: pointer;
}
.sk-cal__nav:disabled { opacity: 0.3; cursor: default; }
.sk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sk-cal__wd {
  text-align: center; font-size: 12px; color: var(--sk-ink-faint); padding: 4px 0;
}
.sk-cal__wd.is-sun, .sk-cal__day.is-sun { color: #a33; }
.sk-cal__wd.is-sat, .sk-cal__day.is-sat { color: #36607f; }
.sk-cal__day {
  aspect-ratio: 1 / 1; border: 1px solid transparent; border-radius: var(--sk-radius);
  background: transparent; font: inherit; font-size: 14px; cursor: pointer;
}
.sk-cal__day:hover:not(:disabled) { background: var(--sk-bg-soft); }
.sk-cal__day:disabled { color: var(--sk-ink-faint); opacity: 0.35; cursor: default; }
.sk-cal__day.is-today { border-color: var(--sk-gold); }
.sk-cal__day.is-selected {
  background: var(--sk-primary); border-color: var(--sk-primary); color: #fff;
}
.sk-cal__clear {
  display: block; margin: 14px auto 0; border: none; background: transparent;
  color: var(--sk-ink-weak); font: inherit; font-size: 13px;
  text-decoration: underline; cursor: pointer;
}

.sk-times { margin: 0 0 14px; }
.sk-times__label {
  margin: 0 0 6px; font-size: 12px; color: var(--sk-ink-weak); letter-spacing: 0.04em;
}
.sk-times__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sk-chip--time {
  padding: 8px 0; text-align: center; border-radius: var(--sk-radius);
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.sk-chip--time.is-selected {
  background: var(--sk-primary); border-color: var(--sk-primary); color: #fff;
}
.sk-times--other summary {
  cursor: pointer; font-size: 13px; color: var(--sk-ink-weak); margin: 0 0 8px;
}


/* 空席の帯見出し (ランチ / ディナー)。長い 1 列にしない。 */
.sk-timegrid__band {
  margin: 14px 0 6px; font-size: 12px; letter-spacing: 0.06em;
  color: var(--sk-ink-weak);
}
.sk-timegrid__band:first-child { margin-top: 4px; }
/* チップは button になったので、a のときの見た目を引き継ぐ。 */
button.sk-datechip { font: inherit; cursor: pointer; }

/* JS が効いているときだけ消すもの (効いていなければ押せる形で残す)。 */
.sk-js .sk-avail-submit { display: none; }

.sk-dlg[open] { animation: sk-dlg-in 0.14s ease-out; }
.sk-dlg[open]::backdrop { animation: sk-fade-in 0.14s ease-out; }
@keyframes sk-dlg-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes sk-fade-in { from { opacity: 0; } }

.sk-times__row--opts { grid-template-columns: repeat(3, 1fr); }
.sk-chip--any { grid-column: 1 / -1; }

/* 🔴 スマホでは中央のダイアログより下からのシートのほうが押しやすい
   (親指が届く・片手で閉じられる)。 */
@media (max-width: 599px) {
  .sk-dlg {
    width: 100%; max-width: none; margin: 0 auto 0; top: auto; bottom: 0;
    border-radius: var(--sk-radius-lg) var(--sk-radius-lg) 0 0;
  }
  .sk-dlg[open] { animation: sk-sheet-in 0.18s ease-out; }
  @keyframes sk-sheet-in { from { transform: translateY(14px); opacity: 0.6; } }
  .sk-dlg__body { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

@media (min-width: 700px) {
  .sk-photogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .sk-photogrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Language menu and "view in your language" band (v2 21 §3, §4-1). Logical properties only (RTL). */
.sk-lang { position: relative; font-size: 13px; }
.sk-lang > summary {
  cursor: pointer; list-style: none; padding: 4px 10px;
  border: 1px solid var(--sk-gold-soft); border-radius: 999px;
  /* ヘッダーは黒地。inherit だと本文色 (濃い墨) を拾って字が読めなくなる。 */
  color: var(--sk-gold);
}
.sk-lang > summary:hover { color: #fff; border-color: var(--sk-gold); }
.sk-lang > summary::-webkit-details-marker { display: none; }
.sk-lang__list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 20;
  margin: 0; padding: 6px 0; list-style: none; min-width: 200px; max-height: 70vh; overflow-y: auto;
  background: #fff; color: var(--sk-ink); border: 1px solid var(--sk-line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* 言語切替は幅によってヘッダーの左にも右にも来る。右端に貼ると狭い幅で画面の外へ出るので、
   1024px 未満では開始側に寄せる (RTL でも inset-inline が面倒を見る)。 */
@media (max-width: 1023px) {
  /* 狭い幅では切替ボタンがヘッダーの左右どちらにも来るので、基準をヘッダー全体にして
     常に画面の内側へ収める。 */
  .sk-lang { position: static; }
  .sk-header__inner { position: relative; }
  .sk-lang__list { inset-inline-end: 12px; }
}
.sk-lang__list { max-width: calc(100vw - 24px); }
.sk-lang__list a { display: block; padding: 8px 16px; color: inherit; text-decoration: none; }
.sk-lang__list a:hover { background: var(--sk-primary-weak); }
.sk-lang__list a[aria-current="true"] { font-weight: 700; }
.sk-langband {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 16px; background: var(--sk-primary-weak); color: var(--sk-ink); font-size: 14px;
}
.sk-langband__go { color: var(--sk-primary); font-weight: 700; text-decoration: none; }
.sk-langband__close { color: var(--sk-ink-weak); text-decoration: none; font-size: 18px; line-height: 1; }

/* ラテン文字の店名の下に置く日本語の本名 (l10n/names.py shop_names)。 */
.sk-shop__jp { margin: 2px 0 0; color: var(--sk-ink-weak); font-size: 14px; }
.sk-card__jp { margin: 2px 0 0; color: var(--sk-ink-weak); font-size: 12px; }
/* 店名は 1 語で札より長いことがある (英字の長い店名・長いタイ語)。折り返させないと札がはみ出す。 */
.sk-card__name, .sk-card__jp, .sk-shop__name, .sk-shop__jp { overflow-wrap: anywhere; }

/* --- 法務ページ (/legal/<page>/) ------------------------------------------ */
.sk-legal { max-width: 760px; line-height: 1.85; }
.sk-legal h2 { font-size: 1.05rem; margin: 28px 0 8px; }
.sk-legal ol, .sk-legal ul { padding-left: 1.4em; }
.sk-legal li { margin: 4px 0; }
.sk-legal__notice { padding: 10px 14px; border: 1px solid var(--sk-line); border-radius: var(--sk-radius); color: var(--sk-ink-weak); }
.sk-legal__table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.sk-legal__table th, .sk-legal__table td { padding: 10px 8px; border-bottom: 1px solid var(--sk-line); text-align: start; vertical-align: top; }
.sk-legal__table th { width: 30%; min-width: 7em; font-weight: 600; }
.sk-legal__updated { margin-top: 32px; color: var(--sk-ink-weak); font-size: 0.9rem; }
.sk-legal-links { font-size: 0.9rem; margin: 4px 0 12px; }
.sk-legal-links a { margin-inline-end: 12px; }

/* --- 口コミ・客の写真 (40 §7 R1) --- */
.sk-stars { color: var(--sk-gold); letter-spacing: 1px; }
.sk-shop__rating { margin: 4px 0; font-size: 14px; }
.sk-shop__rating a { text-decoration: none; color: inherit; }
.sk-badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--sk-line); color: var(--sk-ink-weak); background: var(--sk-bg); }
.sk-badge--ok { border-color: var(--sk-ok); color: var(--sk-ok); }
.sk-badge--soft { background: var(--sk-bg-soft); }
.sk-lv { font-size: 11px; margin-inline-start: 4px; padding: 0 6px; border-radius: 999px; background: var(--sk-gold-soft); color: var(--sk-ink); }
.sk-tag--rv { background: var(--sk-bg-soft); }
.sk-tag--rv small { color: var(--sk-ink-faint); margin-inline-start: 2px; }
.sk-reviews__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.sk-reviews__sub { font-size: 15px; margin: 18px 0 8px; }
.sk-reviews__more { font-size: 14px; }
.sk-reviews__disclose { font-size: 12px; color: var(--sk-ink-faint); margin-top: 16px; }
.sk-rsum { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); background: var(--sk-bg); }
.sk-rsum__score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.sk-rsum__num { font-size: 32px; line-height: 1; }
.sk-rsum__count { font-size: 13px; color: var(--sk-ink-weak); }
.sk-rsum__bars { margin: 0; display: grid; gap: 4px; }
.sk-rsum__bar { display: grid; grid-template-columns: 5.5em 1fr; align-items: center; gap: 8px; font-size: 13px; }
.sk-rsum__bar dt { color: var(--sk-ink-weak); }
.sk-rsum__bar dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.sk-bar { display: inline-block; flex: 1; min-width: 80px; width: 100%; height: 6px; border-radius: 3px; background: var(--sk-line); overflow: hidden; vertical-align: middle; }
.sk-bar span { display: block; height: 100%; background: var(--sk-gold); }
.sk-rsum__tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sk-reviewlist { display: grid; gap: 12px; margin-top: 14px; }
.sk-review { padding: 14px 16px; border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); background: var(--sk-bg); min-width: 0; }
.sk-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.sk-review__who { font-weight: 600; }
.sk-review__date { color: var(--sk-ink-faint); }
.sk-review__subs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--sk-ink-weak); margin: 8px 0 0; }
.sk-review__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.sk-review__ordered { font-size: 13px; margin: 8px 0 0; }
.sk-review__body { margin: 8px 0 0; overflow-wrap: anywhere; }
.sk-review__lang { font-size: 12px; color: var(--sk-ink-faint); margin: 4px 0 0; }
.sk-review__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.sk-review__report, .sk-ugc__report { font-size: 11px; color: var(--sk-ink-faint); }
.sk-ugc-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.sk-ugc-strip--small { margin-top: 10px; }
.sk-ugc { margin: 0; flex: 0 0 160px; scroll-snap-align: start; }
.sk-ugc-strip--small .sk-ugc { flex-basis: 120px; }
.sk-ugc__media { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--sk-radius); background: var(--sk-bg-soft); display: block; }
.sk-ugc__cap { font-size: 11px; color: var(--sk-ink-weak); margin-top: 3px; display: flex; justify-content: space-between; gap: 4px; }

.sk-rw__lead { color: var(--sk-ink-weak); }
.sk-rw__step { border: 0; border-top: 1px solid var(--sk-line); padding: 16px 0 6px; margin: 0; min-width: 0; }
.sk-rw__step:first-of-type { border-top: 0; padding-top: 0; }
.sk-rw__step legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
.sk-rw__visits { display: grid; gap: 6px; margin-bottom: 8px; }
.sk-choice { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.sk-choice input { margin-top: 4px; }
.sk-rw__daysel { width: 100%; max-width: 280px; padding: 8px; border: 1px solid var(--sk-line); border-radius: var(--sk-radius); background: var(--sk-bg); margin-top: 6px; }
.sk-rw__other summary, .sk-rw__subs summary, .sk-rw__private summary, .sk-ugc-rules summary { cursor: pointer; font-size: 13px; color: var(--sk-primary); margin: 6px 0; }
.sk-starpick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.sk-starpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sk-starpick label { font-size: 26px; line-height: 1; padding: 2px 3px; color: var(--sk-line); cursor: pointer; }
.sk-starpick--big label { font-size: 40px; padding: 2px 5px; }
.sk-starpick input:checked ~ label, .sk-starpick label:hover, .sk-starpick label:hover ~ label { color: var(--sk-gold); }
.sk-starpick input:focus-visible + label { outline: 2px solid var(--sk-primary); border-radius: 4px; }
.sk-rw__subrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sk-rw__sublabel { min-width: 5.5em; font-size: 13px; color: var(--sk-ink-weak); }
.sk-rw__tgroup { font-size: 12px; color: var(--sk-ink-faint); margin: 10px 0 4px; }
.sk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-chips .sk-chip { position: relative; padding: 0; border: 0; background: none; }
.sk-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sk-chip span { display: inline-block; padding: 6px 12px; border: 1px solid var(--sk-line); border-radius: 999px; font-size: 13px; background: var(--sk-bg); cursor: pointer; }
.sk-chip input:checked + span { background: var(--sk-primary-weak); border-color: var(--sk-primary); color: var(--sk-primary); font-weight: 600; }
.sk-chip input:focus-visible + span { outline: 2px solid var(--sk-primary); }
.sk-rw__bodytools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.sk-rw__count { font-size: 12px; color: var(--sk-ink-faint); }
.sk-rw__private textarea { width: 100%; box-sizing: border-box; }
.sk-rw__agree { margin-top: 14px; }
.sk-rw__agree .sk-choice input, .sk-choice input[type="checkbox"], .sk-choice input[type="radio"] { width: auto; flex: none; }
.sk-mpick__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sk-mpick__drop { position: relative; }
.sk-mpick__drop:focus-within { outline: 2px solid var(--sk-primary); }
.sk-ugc-rules ul { font-size: 12px; color: var(--sk-ink-weak); padding-inline-start: 18px; }
.sk-mpick__drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border: 2px dashed var(--sk-line); border-radius: var(--sk-radius-lg); cursor: pointer; text-align: center; background: var(--sk-bg-soft); }
.sk-mpick__big { font-weight: 700; color: var(--sk-primary); }
.sk-mpick__help { font-size: 12px; color: var(--sk-ink-faint); }
.sk-mpick__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 10px; }
.sk-mpick__item { position: relative; display: grid; gap: 4px; }
.sk-mpick__thumb img, .sk-mpick__thumb video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--sk-radius); display: block; background: var(--sk-bg-soft); }
.sk-mpick__item select { font-size: 12px; width: 100%; }
.sk-mpick__remove { position: absolute; top: 4px; inset-inline-end: 4px; border: 0; border-radius: 999px; width: 26px; height: 26px; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; }
.sk-rdone__pts { font-size: 20px; }
.sk-rdone__links { display: flex; flex-wrap: wrap; gap: 10px; }
.sk-myrv__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 16px 0; }
.sk-myrv__card { padding: 14px; border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); background: var(--sk-bg); }
.sk-myrv__label { font-size: 12px; color: var(--sk-ink-weak); margin: 0; }
.sk-myrv__big { font-size: 28px; font-weight: 700; margin: 2px 0 6px; }
.sk-myrv__list { list-style: none; padding: 0; display: grid; gap: 8px; }
.sk-myrv__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--sk-line); font-size: 14px; }
.sk-myrv__why { font-size: 12px; flex-basis: 100%; }
.sk-myrv__del { margin-inline-start: auto; }
.sk-myrv__media { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.sk-myrv__mitem { margin: 0; font-size: 11px; color: var(--sk-ink-weak); }
.sk-myrv__mitem img, .sk-myrv__noimg { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--sk-radius); background: var(--sk-bg-soft); display: flex; align-items: center; justify-content: center; }