@layer components {
  .msk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 24px;
    color: var(--fg);
    background: transparent;
    border: 1.5px solid var(--fg);
    font-family: var(--msk-font-jp);
    font-size: .92rem;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, color .2s, box-shadow .2s;

    &--fill {
      color: var(--bg);
      background: var(--fg);
    }

    &--line {
      color: var(--fg);
      background: transparent;
    }

    &--lg {
      min-height: 52px;
      padding: 15px 30px;
      font-size: 1rem;
    }

    &:hover {
      text-decoration: none;
      box-shadow: inset 0 0 0 1px currentColor;
    }

    &:disabled,
    &[aria-disabled="true"] {
      opacity: .55;
      cursor: not-allowed;
    }
  }

  .liquid-glass {
    position: relative;
    overflow: hidden;
    background: rgb(255 255 255 / .045);
    background-blend-mode: luminosity;
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border: 0;
    box-shadow: inset 0 1px 1px rgb(255 255 255 / .14);

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      padding: 1.4px;
      /* 白い光ではなく、正式ロゴの最明色をガラスの縁へ使う。 */
      background: linear-gradient(
        180deg,
        rgb(140 203 236 / .55) 0%,
        rgb(140 203 236 / .18) 20%,
        rgb(140 203 236 / 0) 40%,
        rgb(140 203 236 / 0) 60%,
        rgb(140 203 236 / .18) 80%,
        rgb(140 203 236 / .55) 100%
      );
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
  }

  .liquid-glass--strong {
    backdrop-filter: blur(40px) saturate(1.1);
    -webkit-backdrop-filter: blur(40px) saturate(1.1);
  }

  .msk-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--bg-raised);
    color: var(--fg);
    border: 1px solid var(--line);
    transition: border-color .25s;

    &:hover {
      border-color: var(--line-strong);
    }

    &--dark {
      background: var(--bg-raised);
      border-color: var(--line-strong);
    }

    &__thumb {
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-bottom: 1px solid var(--line);
    }

    &__thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &__title {
      margin-bottom: 8px;
      font-size: 1.05rem;
      line-height: 1.55;
    }

    &__meta {
      margin-bottom: 8px;
      color: var(--fg-muted);
      font-family: var(--msk-font-mono);
      font-size: .68rem;
      letter-spacing: .06em;
    }

    &__body {
      flex: 1;
      padding: 20px 22px 24px;
      color: var(--fg-muted);
      font-size: .88rem;
      line-height: 1.8;
    }
  }

  .msk-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    color: var(--fg);
    background: var(--bg-raised);
    border: 1px solid var(--line-strong);
    font-family: var(--msk-font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    line-height: 1.3;
  }

  .msk-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-inline-end: 5px;
    vertical-align: middle;
    /*
     * 色見本そのものが「円」を表すための唯一の例外。
     * UIコンテナの角を丸める目的では使わない。
     */
    border-radius: 50%;
  }

  .msk-form {
    color: var(--fg);
  }

  .msk-form :where(.snow-monkey-form, .smf-form) {
    width: 100%;
  }

  .msk-form .smf-item {
    display: grid;
    gap: 10px 24px;
    padding-block: 24px;
    border-bottom: 1px solid var(--line);
  }

  .msk-form :where(.smf-item__col, .smf-item__controls) {
    min-width: 0;
  }

  .msk-form .smf-item__label {
    color: var(--fg);
    font-weight: 900;
    line-height: 1.6;
  }

  .msk-form :where(.smf-item__description, .smf-control-description) {
    margin-top: 6px;
    color: var(--fg-muted);
    font-size: .88rem;
    line-height: 1.7;
  }

  .msk-form :where(
    .smf-text-control__control,
    .smf-textarea-control__control,
    input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]),
    textarea
  ) {
    width: 100%;
    min-height: 44px;
    padding: 11px 12px;
    color: var(--fg);
    background: var(--bg-raised);
    border: 1px solid var(--line-strong);
    appearance: none;
    font: inherit;
    line-height: 1.5;
  }

  .msk-form :where(.smf-textarea-control__control, textarea) {
    min-height: 176px;
    resize: vertical;
  }

  .msk-form :where(.smf-control-fieldset) {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .msk-form :where(
    .smf-radio-buttons-control__control,
    .smf-checkboxes-control__control
  ) {
    display: grid;
    gap: 4px;
  }

  .msk-form .smf-label > label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 8px;
    color: var(--fg);
    line-height: 1.6;
    cursor: pointer;
  }

  .msk-form :where(
    .smf-radio-button-control,
    .smf-checkbox-control
  ) {
    display: inline-flex;
    align-items: center;
  }

  .msk-form :where(
    .smf-radio-button-control__control,
    .smf-checkbox-control__control,
    input[type="checkbox"],
    input[type="radio"]
  ) {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0 10px 0 0;
    accent-color: var(--fg);
  }

  .msk-form :where(
    .smf-item__label__required,
    .smf-item__required,
    .is-required
  ) {
    margin-inline-start: .5em;
    color: var(--fg);
    font-size: .78rem;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: .18em;
  }

  .msk-form :where(
    .smf-text-control__control,
    .smf-textarea-control__control,
    .smf-radio-button-control__control,
    .smf-checkbox-control__control,
    button,
    input
  ):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
  }

  /*
   * エラーは色だけに頼らず、太字と罫線でも状態を示す。
   * aria-live はテンプレートの補助処理で動的なエラーにも付与する。
   */
  .msk-form :where(
    [aria-live="assertive"],
    [aria-live="polite"],
    .smf-error-messages,
    .smf-item__error
  ) {
    padding: 10px 12px;
    margin-block: 8px;
    color: var(--fg);
    background: var(--bg-raised);
    border-inline-start: 4px solid var(--line-strong);
    font-weight: 900;
  }

  .msk-form .smf-progress-tracker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    margin: 0 0 28px;
    color: var(--fg-muted);
    list-style: none;
    border: 1px solid var(--line);
  }

  .msk-form .smf-progress-tracker__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border-inline-end: 1px solid var(--line);
  }

  .msk-form .smf-progress-tracker__item:last-child {
    border-inline-end: 0;
  }

  .msk-form .smf-progress-tracker__item[aria-current="step"] {
    color: var(--fg);
    background: var(--bg-raised);
    font-weight: 900;
  }

  .msk-form .smf-progress-tracker__item__number {
    display: grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
    border: 1px solid var(--line-strong);
    font-family: var(--msk-font-mono);
    font-size: .78rem;
  }

  .msk-form .smf-progress-tracker__item__text {
    overflow-wrap: anywhere;
    font-size: .78rem;
    line-height: 1.4;
  }

  .msk-form :where(.smf-action, .smf-button-control) {
    margin-top: 32px;
  }

  .msk-form :where(
    button,
    input[type="submit"],
    .smf-button-control__control
  ) {
    min-height: 48px;
    padding: 12px 24px;
    color: var(--bg);
    background: var(--fg);
    border: 1.5px solid var(--fg);
    appearance: none;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
  }

  .msk-form :where(
    button,
    input[type="submit"],
    .smf-button-control__control
  ):disabled {
    color: var(--fg-muted);
    background: var(--bg-raised);
    border-color: var(--line);
    cursor: not-allowed;
  }

  /* === 拠点の地図 === */

  /*
   * 見出しは枠の外に置く。枠の中に入れると、同じh2なのに
   * 他セクションの見出しより小さく見え、階層を誤解させる。
   * 枠を持つのは __body（情報＋地図のカード）だけにする。
   */
  .msk-map__title {
    padding-bottom: 12px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--rule);
  }

  .msk-map__body {
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    background: var(--bg-raised);
  }

  /* 見出しが見えているときは、見出しの罫線と枠の上辺が二重になる。 */
  .msk-map__title + .msk-map__body {
    border-top: 0;
  }

  .msk-map__info {
    padding: 24px;
  }

  .msk-map__name {
    font-weight: 900;
    line-height: 1.6;
  }

  .msk-map__address {
    margin-top: 6px;
    color: var(--fg-muted);
    font-size: .95rem;
    line-height: 1.8;
    /* 住所は選んでコピーできるほうが実用的なので、行の折返し位置を素直にする。 */
    overflow-wrap: anywhere;
  }

  .msk-map__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
  }

  .msk-map__note {
    margin-top: 12px;
    color: var(--fg-muted);
    font-size: .8rem;
    line-height: 1.7;
  }

  /*
   * 地図の枠は押す前から高さを確保しておく。
   * iframeを差し込んだ瞬間に高さが増えると、下の要素が飛んでCLSになる。
   */
  .msk-map__canvas {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--bg-raised);
    border-top: 1px solid var(--line);
  }

  .msk-map__canvas:empty {
    display: none;
  }

  .msk-map__canvas iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /*
   * 2カラム（情報＋地図を横並び）にはしない。この部品が置かれる本文カラムは
   * 72ch（約580px）で、横に割ると地図が220px程度まで痩せて地名が読めなくなる。
   * 画面幅ではなく置き場所の幅で決まる制約なので、メディアクエリでは解けない。
   */

  @media (min-width: 680px) {
    .msk-form .smf-form--simple-table .smf-item {
      grid-template-columns: minmax(12rem, .8fr) minmax(0, 2fr);
      align-items: start;
    }
  }

  @media (max-width: 560px) {
    .msk-form .smf-progress-tracker {
      grid-template-columns: 1fr;
    }

    .msk-form .smf-progress-tracker__item {
      border-inline-end: 0;
      border-bottom: 1px solid var(--line);
    }

    .msk-form .smf-progress-tracker__item:last-child {
      border-bottom: 0;
    }
  }

  .msk-logo {
    display: inline-flex;
    align-items: center;
    color: var(--fg);
  }

  .msk-logo svg {
    display: block;
    color: inherit;
  }

  .msk-hud {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    color: var(--fg);
  }

  .msk-hud__item {
    min-width: 0;
    padding: 10px 12px;
    text-align: center;
    border-inline-end: 1px solid var(--line);
  }

  .msk-hud__item:last-child {
    border-inline-end: 0;
  }

  .msk-hud__item b {
    display: block;
    font-size: .9rem;
    font-weight: 900;
  }

  .msk-read-more {
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    font-family: var(--msk-font-mono);
    font-size: .82rem;
    font-weight: 700;
  }

  .msk-read-more::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(.28);
    transform-origin: left;
    transition: transform .25s ease;
  }

  .msk-read-more:hover::after,
  .msk-read-more:focus-visible::after {
    transform: scaleX(1);
  }

  @media (max-width: 560px) {
    .msk-hud {
      grid-template-columns: repeat(2, 1fr);
    }

    .msk-hud__item:nth-child(2) {
      border-inline-end: 0;
    }

    .msk-hud__item:nth-child(-n + 2) {
      border-bottom: 1px solid var(--line);
    }
  }
}

@media (prefers-reduced-transparency: reduce) {
  @layer overrides {
    .liquid-glass,
    .liquid-glass--strong {
      background: var(--bg-raised);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 1px solid var(--line);
    }

    .liquid-glass::before {
      display: none;
    }
  }
}