/* ホテルしみず — 最小リセットと面(surface)×役割(role) (TOKENS.md §1.2) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
figure { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; align-self: flex-start; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

html, body { min-height: 100%; }

/* ============ 面 1: paper (既定) — 値は var(--c-*) を参照する (R5-2) ============ */
body, .surface-paper {
  background-color: var(--c-paper); color: var(--c-ink);
  --role-text: var(--c-ink); --role-muted: var(--c-ink-2); --role-caption: var(--c-ink-3); --role-heading: var(--c-navy);
  --role-link: var(--c-link); --role-visited: var(--c-visited); --role-hover: var(--c-navy-hover); --role-price: var(--c-cta);
  --role-success: var(--c-success); --role-focus: var(--c-focus); --role-line: var(--c-line);
}
/* ============ 面 2: white ============ */
.site-header, .quick-nav, .site-nav, .sticky-cta, .card, .room-mini-card, .shop-card, .toc a, .page-hero__quicklinks a, .spec-list--card, .food-card, .place--card, .surface-white {
  background-color: var(--c-surface); color: var(--c-ink);
  --role-text: var(--c-ink); --role-muted: var(--c-ink-2); --role-caption: var(--c-ink-3); --role-heading: var(--c-navy);
  --role-link: var(--c-link); --role-visited: var(--c-visited); --role-hover: var(--c-navy-hover); --role-price: var(--c-cta);
  --role-success: var(--c-success); --role-focus: var(--c-focus); --role-line: var(--c-line);
}
/* ============ 面 3: mist ============ */
.section--mist, .section--band, .hero__facts, .page-hero, .cta-band, .embed__frame, .rates-table tbody tr:nth-child(even), .surface-mist {
  background-color: var(--c-mist); color: var(--c-ink);
  --role-text: var(--c-ink); --role-muted: var(--c-ink-2); --role-caption: var(--c-ink-3); --role-heading: var(--c-navy);
  --role-link: var(--c-link); --role-visited: var(--c-visited); --role-hover: var(--c-navy-hover); --role-price: var(--c-cta);
  --role-success: var(--c-success); --role-focus: var(--c-focus); --role-line: var(--c-line);
}
/* ============ 面 4: notice ============ */
.notice, .surface-notice {
  background-color: var(--c-warn-bg); color: var(--c-warn-fg);
  --role-text: var(--c-warn-fg); --role-muted: var(--c-warn-fg); --role-caption: var(--c-warn-fg); --role-heading: var(--c-warn-fg);
  --role-link: var(--c-link); --role-visited: var(--c-visited); --role-hover: var(--c-navy-hover); --role-price: var(--c-warn-fg);
  --role-success: var(--c-warn-fg); --role-focus: var(--c-focus); --role-line: var(--c-warn-fg);
}
/* ============ 面 5: dark (フッタだけ) ============ */
.site-footer, .surface-dark {
  background-color: var(--c-footer-bg); color: var(--c-footer-fg);
  --role-text: var(--c-footer-fg); --role-muted: var(--c-footer-muted); --role-caption: var(--c-footer-muted); --role-heading: var(--c-white);
  --role-link: var(--c-footer-fg); --role-visited: var(--c-footer-fg); --role-hover: var(--c-white); --role-price: var(--c-footer-fg);
  --role-success: var(--c-footer-fg); --role-focus: var(--c-focus-dark); --role-line: var(--c-footer-line);
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* ============ 役割を消費する既定ルール (詳細度 0) ============ */
:where(h1, h2, h3, .section__eyebrow, .page-hero__eyebrow) { color: var(--role-heading); }
:where(figcaption, .updated, .hero__caption) { color: var(--role-caption); }
:where(dt, th[scope="col"], .facts__label, .facts__note, .card__meta, .breadcrumb, .site-header__utility, .event-list__date) { color: var(--role-muted); }
:where(a) { color: var(--role-link); }
:where(a:visited) { color: var(--role-visited); }
:where(a:hover, a:focus-visible, a:visited:hover, a:visited:focus-visible, a:active, a:visited:active) { color: var(--role-hover); }
:where(.price, .facts__num--price) { color: var(--role-price); }
:where(:focus-visible) { outline: 2px solid var(--role-focus); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--ff-display); margin: 0; font-weight: 500; text-wrap: balance; }
h3 { font-family: var(--ff-body); font-weight: 700; letter-spacing: var(--ls-h3); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-heading); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

p { margin: 0 0 1em; max-width: var(--measure-prose); }
p:last-child { margin-bottom: 0; }
.section__lead, .page-hero__lead { max-width: var(--measure-lead); font-size: var(--fs-lead); line-height: var(--lh-lead); }

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--dur-1) var(--ease);
}
a:hover, a:focus-visible { text-decoration-thickness: 2px; }

.site-nav__list a, .quick-nav a, .brand, .btn, .card__link, .related__list a, .toc a, .page-hero__quicklinks a, .nav-toggle {
  text-decoration: none;
}

/* 社長裁定 D-13 / R4-1: 改行禁止の白名単はここと .btn--cta, .btn--tel の 2 宣言だけ */
:where(a[href^="tel:"]) { white-space: nowrap; }

table { border-collapse: collapse; width: 100%; line-height: var(--lh-table); }
caption { text-align: left; caption-side: top; padding-block-end: var(--sp-3); font-weight: 700; }
th, td { text-align: left; padding: var(--cell-pad-y) var(--cell-pad-x); border-bottom: 1px solid var(--role-line); }
th[scope="row"] { font-weight: 700; }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-navy);
  color: var(--c-white);
  border-radius: var(--radius-s);
  transition: top var(--dur-1) var(--ease);
}
.skip-link:visited { color: var(--c-white); }
.skip-link:focus { top: var(--sp-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.container--narrow {
  width: min(var(--container-narrow), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ============ スクロール到達位置 (TOKENS §4。D-14: 末尾余白は html.js のときだけ) ============ */
@media (min-width: 1024px) {
  html { scroll-padding-top: calc(var(--header-h-real, 112px) + 4px); }
}
@media (max-width: 1023px) {
  html.js { scroll-padding-bottom: calc(var(--sticky-h-real, var(--sticky-h)) + 8px); }
  /* 固定バーの分の下余白は、暗いフッターの中に取る（components.css C-06）。
     body に取ると、固定バーが退いたときにフッターの下へ地色の帯が出る。 */
}

/* ユーティリティ (インライン style を使わないための小さな余白クラス) */
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-pt-5 { padding-top: var(--sp-5); }
.u-pt-6 { padding-top: var(--sp-6); }
.u-pb-4 { padding-block: var(--sp-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}