@charset "UTF-8";

/* ============================================
   かしこみ ミニアプリ 共通スタイル
   Figma: かしこみ ミニアプリ_ご確認用（new）準拠
   ============================================ */

:root {
  /* color */
  --color-white: #ffffff;
  --color-text: #222222;
  --color-note: #888888;
  --tenpo-pink-sub-100: #fff3f1;
  --tenpo-beige: #e5dad9;
  --tenpo-brown-text: #7c4939;
  --tenpo-pink-main-500: #f6868f;
  --form-light-gray: #f5f5f5;
  --form-gray: #c8c8c8;
  --form-dark-gray: #aaaaaa;
  --form-red-text: #b21e26;
  --link-pink: #c4737d;
  --tenpo-pink-200: #f8c9cd;
  --tenpo-pink-700: #c4737d;
  --tenpo-light-brown: #81726b;
  --tenpo-bg: #f3f4f6;
  --banner-green-50: #f0faf4;
  --banner-green-100: #c8e6c9;
  --banner-green-500: #4caf50;
  --banner-green-text: #2e7d32;
  --err-red: #f53942;
  --warn-bg: #fff8e6;
  --warn-border: #fabe00;
  --ba-purple: #9b8ec4;
  --ba-green: #00cb42;

  /* font */
  --font-jp: "Noto Sans JP", sans-serif;

  /* radius */
  --radius-card: 10px;
  --radius-input: 5px;

  /* size */
  --header-h: 66px;
  --input-h: 54px;
  --btn-h: 56px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-white);
  font-size: 14px;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--link-pink);
}

/* ============================================
   レイアウト
   ============================================ */

.app {
  max-width: 402px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 10px 20px;
}

/* ============================================
   ヘッダー（ロゴ）
   ============================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  height: var(--header-h);
  background: var(--color-white);
  border-bottom: 1px solid var(--tenpo-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0 9px;
}

.header__logo {
  width: 100px;
  height: 38.3px;
}

/* ============================================
   カード（セクション枠）
   ============================================ */

.card {
  width: 100%;
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
}

.card__title {
  height: 40px;
  background: var(--tenpo-pink-sub-100);
  border: 1px solid var(--tenpo-beige);
  border-bottom-width: 0.5px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.card__title-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  line-height: 24px;
  color: var(--tenpo-brown-text);
}

.card__title-text--required {
  color: var(--form-red-text);
}

.card__title-note {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--form-red-text);
}

.card__badge {
  background: var(--color-white);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--tenpo-pink-main-500);
  white-space: nowrap;
}

.card__body {
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-top-width: 0.5px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
}

/* ============================================
   フォーム
   ============================================ */

.form-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-field__label {
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text);
}

.form-field__input {
  width: 100%;
  min-height: var(--input-h);
  background: var(--form-light-gray);
  border: 1px solid var(--form-gray);
  border-radius: var(--radius-input);
  padding: 10px;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.form-field__input::placeholder {
  color: var(--form-dark-gray);
}

.form-field__input:focus {
  outline: 2px solid var(--tenpo-pink-main-500);
  outline-offset: -1px;
}

/* 郵便番号（2分割） */
.form-field__zip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-field__zip .form-field__input {
  flex: 1;
  text-align: center;
}

.form-field__zip-sep {
  font-size: 14px;
  letter-spacing: 0.42px;
}

/* ============================================
   業種選択
   ============================================ */

.industry-note {
  width: 100%;
  font-size: 14px;
  letter-spacing: 0.7px;
  line-height: 20px;
  color: var(--form-dark-gray);
}

.industry-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 0 4px;
}

.industry-card {
  position: relative;
  width: calc(50% - 8px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.industry-card--wide {
  width: 100%;
  aspect-ratio: auto;
  height: 104px;
  flex-direction: row;
  justify-content: center;
}

.industry-card__radio {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--form-gray);
  border-radius: 50%;
  background: var(--color-white);
}

.industry-card.is-selected {
  border-color: var(--tenpo-pink-main-500);
  border-width: 2px;
}

.industry-card.is-selected .industry-card__radio {
  border-color: var(--tenpo-pink-main-500);
  background: radial-gradient(circle, var(--tenpo-pink-main-500) 0 7px, var(--color-white) 8px);
}

.industry-card__icon-area {
  flex: 0 1 94px;
  min-height: 56px;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.industry-card__icon {
  width: 56px;
  height: 56px;
}

.industry-card__label {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 24px;
  color: var(--tenpo-brown-text);
  text-align: center;
}

.industry-card--wide .industry-card__label {
  align-items: flex-start;
  padding-bottom: 0;
  width: 257px;
  flex: none;
}

.industry-card__sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--form-dark-gray);
}

/* ============================================
   同意事項
   ============================================ */

.consent-scroll {
  width: 100%;
  height: 200px;
  overflow-y: auto;
  background: var(--form-light-gray);
  border: 1px solid var(--tenpo-beige);
  border-top-width: 0.5px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  padding: 12px 13px;
}

.consent-article {
  margin-bottom: 14px;
}

.consent-article__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
}

.consent-article__body {
  font-size: 12px;
  line-height: 22px;
}

.agree-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 10px;
}

.agree-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 3px 0;
  cursor: pointer;
}

.agree-item__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--form-light-gray);
  border: 1px solid var(--form-gray);
  border-radius: 6px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: grid;
  place-content: center;
}

.agree-item__check:checked {
  background: var(--tenpo-pink-main-500);
  border-color: var(--tenpo-pink-main-500);
}

.agree-item__check:checked::before {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.agree-item__label {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.agree-item__label a {
  text-decoration: underline;
}

/* ============================================
   ボタン
   ============================================ */

.btn {
  width: 362px;
  max-width: 100%;
  height: var(--btn-h);
  border: none;
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-white);
  background: var(--tenpo-pink-main-500);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:disabled,
.btn--disabled {
  background: var(--form-dark-gray);
  cursor: not-allowed;
}

.btn--outline {
  background: var(--color-white);
  color: var(--tenpo-pink-main-500);
  border: 2px solid var(--tenpo-pink-main-500);
}

.btn-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
}

.btn-note {
  width: 100%;
  padding: 0 20px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-note);
}

/* ============================================
   完了系ページ（メール送信・登録完了）
   ============================================ */

.complete {
  width: 334px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

.complete__icon {
  width: 88px;
  height: 88px;
  border-radius: 44px;
  background: var(--tenpo-pink-main-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

.complete__icon img {
  width: 48px;
  height: 40px;
}

.complete__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--tenpo-brown-text);
  text-align: center;
}

.complete__desc {
  font-size: 14px;
  line-height: 24px;
  color: var(--tenpo-pink-main-500);
  text-align: center;
}

.complete__note {
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}

.complete__link {
  font-size: 14px;
  font-weight: 500;
  color: #81726b;
  text-decoration: underline;
  cursor: pointer;
}

/* 再送完了バナー */
.resent-banner {
  width: 100%;
  background: #f0faf4;
  border: 1px solid #c8e6c9;
  border-radius: 10px;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.resent-banner.is-visible {
  display: flex;
}

.resent-banner__check {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #4caf50;
  display: grid;
  place-content: center;
}

.resent-banner__check::before {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg) translate(1px, -2px);
}

.resent-banner__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: #2e7d32;
}

.resent-banner__sub {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-note);
}

/* 次の手順ボックス */
.mail-steps {
  width: 100%;
  background: #f3f4f6;
  border: 1px solid var(--form-gray);
  border-radius: 16px;
  padding: 16px;
}

.mail-steps__title {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--form-dark-gray);
}

.mail-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
}

.mail-step:first-of-type {
  padding-top: 16px;
}

.mail-step__num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 10px;
  background: var(--tenpo-pink-main-500);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mail-step__title {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text);
}

.mail-step__sub {
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  color: var(--form-dark-gray);
}

/* ============================================
   パスワード設定
   ============================================ */

.pw-hero {
  width: 100%;
  background: var(--tenpo-pink-main-500);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 20px;
}

.pw-hero__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pw-hero__icon img {
  width: 38px;
  height: 48px;
}

.pw-hero__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-white);
  text-align: center;
  padding-top: 4px;
}

.pw-hero__desc {
  font-size: 12px;
  line-height: 21.6px;
  color: var(--color-white);
  opacity: 0.88;
  text-align: center;
}

.pw-card {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 16px;
}

.form-field__label-sub {
  font-size: 10px;
  line-height: 20px;
  color: var(--form-dark-gray);
}

.pw-input-wrap {
  position: relative;
  width: 100%;
}

.pw-input-wrap .form-field__input {
  padding-right: 44px;
}

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pw-input-wrap.is-match .form-field__input {
  border-color: #4caf50;
  border-width: 1.5px;
}

.pw-match-msg {
  display: none;
  font-size: 12px;
  line-height: 18px;
  color: #2e7d32;
  padding-top: 4px;
}

.pw-match-msg.is-visible {
  display: block;
}

.pw-rules {
  width: 100%;
  background: #f3f4f6;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
}

.pw-rule {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  line-height: 14px;
  color: var(--form-dark-gray);
}

.pw-rule::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--form-gray);
}

.pw-rule.is-ok {
  color: #2e7d32;
}

.pw-rule.is-ok::before {
  background: #4caf50;
}

/* ============================================
   カルテ初期設定
   ============================================ */

.toggle {
  flex-shrink: 0;
  position: relative;
  width: 38px;
  height: 21px;
  border-radius: 11px;
  background: var(--form-gray);
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 8.5px;
  background: var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: left 0.15s;
}

.toggle.is-on {
  background: #4caf50;
}

.toggle.is-on::after {
  left: 19px;
}

.toggle.is-locked {
  opacity: 0.3;
  pointer-events: none;
}

.karte-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid #eeeeee;
}

.karte-item:last-child {
  border-bottom: none;
}

.karte-item__label {
  flex: 1;
  font-size: 14px;
  line-height: 20px;
}

.karte-item__input-like {
  flex: 1;
  height: 41px;
  background: var(--form-light-gray);
  border: 1px solid var(--form-gray);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 14px;
}

.karte-item__input-like--placeholder {
  color: var(--form-dark-gray);
}

/* 担当者サブリスト */
.staff-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 10px 47px;
}

.staff-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.staff-row__handle {
  width: 14px;
  height: 8px;
  flex-shrink: 0;
}

.staff-row__input {
  width: 240px;
  height: 41px;
  background: var(--form-light-gray);
  border: 1px solid var(--form-gray);
  border-radius: 6px;
  padding: 0 10px;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-text);
}

.staff-row__input::placeholder {
  color: var(--form-dark-gray);
}

.staff-row__remove {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.staff-row__remove::before,
.staff-row__remove::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--form-dark-gray);
}

.staff-row__remove::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.staff-row__remove::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 破線の追加ボタン */
.btn-add {
  width: 100%;
  height: 44px;
  background: transparent;
  border: 1px dashed var(--tenpo-pink-main-500);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--tenpo-pink-main-500);
  cursor: pointer;
}

.btn-add img {
  width: 13px;
  height: 13px;
}

/* 同意書設定カード */
.consent-setting {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.consent-setting__header {
  background: var(--tenpo-pink-main-500);
  padding: 10px 14px;
}

.consent-setting__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.consent-setting__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
}

.consent-setting__badge {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-white);
}

.consent-setting__sub {
  font-size: 10px;
  line-height: 15px;
  color: rgba(255, 255, 255, 0.85);
  padding-top: 2px;
}

.consent-setting__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.method-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
}

.method-label__sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--form-dark-gray);
}

.method-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.method-card {
  position: relative;
  min-height: 160px;
  background: var(--color-white);
  border: 2px solid var(--tenpo-beige);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.method-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.method-card__icon {
  width: 38px;
  height: 38px;
  background: var(--form-light-gray);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.method-card__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.method-card__radio {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--form-gray);
  border-radius: 50%;
  background: var(--color-white);
}

.method-card__name {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: var(--form-dark-gray);
}

.method-card__desc {
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  color: var(--form-dark-gray);
  opacity: 0.85;
}

.method-card__tag {
  margin-top: auto;
  background: var(--form-light-gray);
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  color: var(--form-dark-gray);
}

.method-card.is-selected {
  background: var(--tenpo-pink-sub-100);
  border-color: var(--tenpo-pink-main-500);
}

.method-card.is-selected .method-card__radio {
  border-color: var(--tenpo-pink-main-500);
  background: radial-gradient(circle, var(--tenpo-pink-main-500) 0 8px, var(--color-white) 9px);
}

.method-card.is-selected .method-card__name {
  color: var(--tenpo-brown-text);
}

.method-card.is-selected .method-card__desc {
  color: var(--tenpo-brown-text);
}

.method-card.is-selected .method-card__tag {
  background: var(--tenpo-pink-main-500);
  color: var(--color-white);
}

.method-note {
  width: 100%;
  text-align: right;
  font-size: 11px;
  color: var(--form-dark-gray);
}

/* 編集/プレビュータブ */
.consent-tabs {
  display: flex;
  border: 1px solid var(--form-gray);
  border-radius: 8px;
  overflow: hidden;
}

.consent-tab {
  flex: 1;
  padding: 8px;
  border: none;
  background: var(--color-white);
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--tenpo-pink-main-500);
  text-align: center;
  cursor: pointer;
}

.consent-tab.is-active {
  background: var(--tenpo-pink-main-500);
  color: var(--color-white);
}

/* 同意書テキストエリア */
.consent-textarea {
  width: 100%;
  height: 201px;
  background: var(--tenpo-pink-sub-100);
  border: 1px solid #f8c9cd;
  border-radius: 8px;
  padding: 13px;
  font-family: var(--font-jp);
  font-size: 13px;
  line-height: 24px;
  color: var(--color-text);
  resize: none;
}

.consent-textarea::placeholder {
  color: var(--form-dark-gray);
}

.consent-preview {
  display: none;
  width: 100%;
  height: 201px;
  background: var(--form-light-gray);
  border: 1px solid var(--form-gray);
  border-radius: 8px;
  padding: 13px;
  font-size: 13px;
  line-height: 24px;
  overflow-y: auto;
}

.consent-preview.is-empty {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--form-dark-gray);
  text-align: center;
}

.char-count {
  width: 100%;
  text-align: right;
  font-size: 11px;
  line-height: 14px;
  color: var(--form-dark-gray);
}

/* 注意書きバナー */
.note-banner {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 17.6px;
}

.note-banner img {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.note-banner--green {
  background: #f0faf4;
  border: 1px solid #c8e6c9;
  color: #2e7d32;
}

.note-banner--pink {
  background: var(--tenpo-pink-sub-100);
  border: 1px solid #f8c9cd;
  color: var(--link-pink);
}

/* ============================================
   ログイン
   ============================================ */

.login-page {
  background: #f3f4f6;
}

.app--wide {
  max-width: 402px;
}

.header--login {
  height: 118px;
  padding: 28px 0 29px;
}

.header--login .header__logo {
  width: 160px;
  height: 61.3px;
}

.login-split {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
}

.login-main {
  width: 100%;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 16px;
}

.login-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}

.login-title__main {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  color: var(--tenpo-pink-main-500);
}

.login-title__desc {
  font-size: 13px;
  line-height: 22.1px;
  color: var(--form-dark-gray);
}

.login-box {
  width: 100%;
  background: #f3f4f6;
  border: 1px solid var(--form-gray);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 10px;
}

.form-field__input--white {
  background: var(--color-white);
}

.login-forgot {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: var(--form-dark-gray);
  text-decoration: underline;
}

.login-news {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 16px;
}

.login-news__divider {
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-news__line {
  flex: 1;
  height: 1px;
  background: var(--form-dark-gray);
}

.login-news__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--form-dark-gray);
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-card {
  background: var(--color-white);
  border-left: 3px solid var(--tenpo-pink-main-500);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
}

.news-card__date {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--form-dark-gray);
}

.news-card__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.news-card__new {
  background: var(--tenpo-pink-main-500);
  border-radius: 20px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-white);
}

.news-card__body {
  font-size: 14px;
  line-height: 20px;
  color: #81726b;
}

/* ============================================
   ステップナビ（店舗登録タブレット）
   ============================================ */

.step-nav {
  display: none;
}

.reg-split,
.split-left,
.split-right {
  display: contents;
}

.split-left > .btn {
  order: 99;
}

/* SP/TB表示切替 */
.tb-only {
  display: none;
}

/* ============================================
   タブレット（768px以上）
   ============================================ */

@media (min-width: 768px) {

  .sp-only {
    display: none;
  }

  .tb-only {
    display: inline;
  }

  .app,
  .app--wide {
    max-width: none;
  }

  /* ---- 店舗登録：左ステップナビ＋メイン ---- */
  .reg-split {
    display: grid;
    grid-template-columns: 240px 1fr;
    width: 100%;
    align-items: stretch;
  }

  .step-nav {
    display: block;
    background: var(--color-white);
    border-right: 1px solid #e0e0e0;
    padding: 20px 16px 24px;
  }

  .step-nav__inner {
    position: sticky;
    top: 86px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .step-nav__title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--form-dark-gray);
    padding-bottom: 8px;
  }

  .step-nav__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--form-dark-gray);
    text-decoration: none;
  }

  .step-nav__num {
    width: 18px;
    height: 18px;
    border-radius: 10px;
    background: var(--tenpo-beige);
    color: var(--color-white);
    font-size: 9.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step-nav__item.is-active {
    color: var(--tenpo-pink-main-500);
    font-weight: 500;
  }

  .step-nav__item.is-active .step-nav__num {
    background: var(--tenpo-pink-main-500);
  }

  .reg-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: #f3f4f6;
    padding: 24px;
  }

  .reg-main > .card,
  .reg-main > .btn-area {
    width: 100%;
    max-width: 736px;
  }

  .reg-main .card__body {
    background: var(--color-white);
  }

  .reg-main .btn-area .btn {
    width: 100%;
  }

  /* 業種グリッド4列 */
  .industry-card {
    width: calc(25% - 12px);
  }

  .industry-card--wide {
    width: calc(25% - 12px);
    aspect-ratio: 1 / 1;
    height: auto;
    flex-direction: column;
  }

  .industry-card--wide .industry-card__label {
    align-items: center;
    width: auto;
    flex: 1;
    padding-bottom: 16px;
  }

  /* ---- 2分割（パスワード設定・カルテ初期設定） ---- */
  .split-page {
    display: grid;
    grid-template-columns: 380px 1fr;
    align-items: stretch;
    gap: 0;
    padding: 0;
    width: 100%;
  }

  .split-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    background: var(--color-white);
    border-right: 1px solid #e0e0e0;
    padding: 20px;
    min-height: calc(100dvh - var(--header-h));
  }

  .split-left > .btn {
    order: 0;
    width: 100%;
    position: sticky;
    bottom: 20px;
  }

  .split-left .pw-hero {
    width: 100%;
  }

  .split-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: #f3f4f6;
    padding: 24px;
  }

  .split-right > * {
    width: 100%;
    max-width: 760px;
  }

  .split-right .pw-card,
  .split-right .card__body,
  .split-right .consent-setting {
    background: var(--color-white);
  }

  /* ---- ログイン：左フォーム＋右お知らせ ---- */
  .header--login {
    height: var(--header-h);
    padding: 18px 0 9px;
  }

  .header--login .header__logo {
    width: 100px;
    height: 38.3px;
  }

  .login-split {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding-bottom: 0;
    min-height: calc(100dvh - var(--header-h));
  }

  .login-main {
    width: 400px;
    flex-shrink: 0;
    justify-content: flex-start;
    padding-top: 84px;
    border-right: 1px solid #e0e0e0;
  }

  .login-news {
    flex: 1;
    background: #f3f4f6;
    padding: 32px;
  }

  .news-card {
    max-width: 590px;
  }
}

/* split-page モバイル時の幅補正 */
@media (max-width: 767px) {
  .split-page {
    max-width: 362px;
    margin: 0 auto;
  }

  /* カルテ初期設定：カードは381px・ヒーローは342px・ボタンは362px */
  .ki-page {
    max-width: none;
    padding-left: 10px;
    padding-right: 10px;
  }

  .ki-page .pw-hero {
    width: 342px;
    max-width: 100%;
  }

  .ki-page .btn {
    width: 362px;
    max-width: 100%;
  }

  /* パスワード設定：ヒーロー→カードは14px、カード→ボタンは32px */
  .pw-page {
    gap: 14px;
  }

  .pw-page .btn {
    margin-top: 18px;
  }

  /* 店舗QR：QRカードを左右10px内側に */
  .qr-card-tb {
    margin: 0 10px;
  }
}

/* ============================================
   HOME（本日の回数券利用者一覧）
   ============================================ */

.home-page {
  background: #f3f4f6;
}

.page-header {
  width: 100%;
  height: 56px;
  background: var(--color-white);
  border-bottom: 0.5px solid var(--tenpo-beige);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.page-header__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.9px;
  color: var(--tenpo-brown-text);
}

.page-header__menu {
  width: 28px;
  height: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1px 0;
}

.page-header__menu span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--tenpo-brown-text);
}

/* 初回カウンセリング */
.counseling-box {
  width: 100%;
  background: var(--tenpo-pink-sub-100);
  border: 1px solid #f8c9cd;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 16px;
}

.counseling-box__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.counseling-box__title-line {
  flex: 1;
  max-width: 93px;
  height: 1px;
  background: var(--tenpo-pink-main-500);
}

.counseling-box__title-text {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  line-height: 20px;
  color: var(--tenpo-pink-main-500);
}

.counseling-btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.counseling-btn--pink {
  background: var(--tenpo-pink-main-500);
  color: var(--color-white);
}

.counseling-btn--white {
  background: var(--color-white);
  border: 1px solid #f8c9cd;
  color: var(--tenpo-pink-main-500);
}

.counseling-btn__label {
  flex: 1;
  text-align: center;
}

.counseling-btn__label small {
  font-weight: 400;
  font-size: 14px;
}

.counseling-btn__phone {
  width: 14px;
  height: 22px;
  border: 1px solid var(--color-white);
  border-radius: 2px;
  position: relative;
}

.counseling-btn__phone::before {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 4px;
  width: 4.5px;
  height: 1px;
  background: var(--color-white);
  border-radius: 1px;
}

.counseling-btn__arrow {
  width: 8px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg) scale(0.7);
}

/* 回数券を使うボタン（緑） */
.btn--green {
  background: #4caf50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn--green img {
  width: 24px;
  height: 24px;
}

/* 検索ツールバー */
.search-toolbar {
  width: 100%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 20px 16px 0;
}

.search-box {
  flex: 1;
  height: 37px;
  background: var(--form-light-gray);
  border: 1px solid var(--form-gray);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
}

.search-box img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.search-box input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--color-text);
  outline: none;
}

.search-box input::placeholder {
  color: var(--form-gray);
}

.search-btn {
  width: 100px;
  height: 37px;
  border: none;
  border-radius: 10px;
  background: var(--tenpo-pink-main-500);
  color: var(--color-white);
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* フィルタ行 */
.filter-row {
  width: 100%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--tenpo-beige);
}

.filter-chips {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-chips::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  flex-shrink: 0;
  height: 31px;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 13px;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 600;
  color: #81726b;
  cursor: pointer;
  white-space: nowrap;
}

.filter-chip::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #81726b;
  border-bottom: 1.5px solid #81726b;
  transform: rotate(45deg) translateY(-2px);
}

.filter-reset {
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: 10px;
  border: none;
  border-bottom: 1px solid var(--form-gray);
  background: transparent;
  font-family: var(--font-jp);
  font-size: 10px;
  font-weight: 600;
  color: #888888;
  cursor: pointer;
  padding: 0 0 2px;
}

/* 件数表示 */
.list-info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px;
  color: #888888;
}

.list-info__label {
  font-size: 14px;
  letter-spacing: 0.7px;
  line-height: 20px;
}

.list-info__count {
  font-size: 12px;
}

/* 利用者カード */
.user-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 16px 24px;
}

.user-card {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

.user-card__left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.user-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-card__avatar--none img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  margin-top: 8px;
}

.user-card__name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-card__name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.8px;
  line-height: 24px;
}

.badge-new {
  white-space: nowrap;
  flex-shrink: 0;
  background: #f53942;
  border-radius: 100px;
  padding: 1px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 14px;
  color: var(--color-white);
}

.user-card__date {
  font-size: 12px;
  letter-spacing: 0.6px;
  line-height: 14px;
  color: #81726b;
}

.btn-detail {
  width: 64px;
  height: 26px;
  background: #f3f4f6;
  border: 1px solid var(--tenpo-beige);
  border-radius: 7px;
  font-family: var(--font-jp);
  font-size: 11px;
  font-weight: 600;
  color: #81726b;
  cursor: pointer;
}

/* 空状態 */
.user-list--empty {
  min-height: 300px;
}

/* FAB（かしこみAI）
   ※ 現在は非表示。かしこみAI実装時に display の行を削除して復帰させてください
      現재는 숨김 처리. 카시코미AI 구현 시 display 행을 삭제해 복구해 주세요 */
/* ページネーション */
.pagination {
  width: 100%;
  background: var(--color-white);
  border-top: 1px solid var(--tenpo-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 13px 0 24px;
}

.pg-btn {
  width: 36px;
  height: 36px;
  background: var(--color-white);
  border: 1.3px solid var(--tenpo-beige);
  border-radius: 5px;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 500;
  color: #888888;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pg-btn.is-active {
  background: var(--tenpo-pink-main-500);
  border-color: var(--tenpo-pink-main-500);
  color: var(--color-white);
}

/* ============================================
   HOME ポップアップ（日付・回数券・担当者）
   ============================================ */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 30;
}

.overlay.is-open {
  display: block;
}

/* 日付ボトムシート */
.date-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 402px;
  background: var(--color-white);
  border-radius: 20px 20px 0 0;
  padding: 10px 20px 24px;
  transition: transform 0.25s ease;
  z-index: 40;
}

.date-sheet.is-open {
  transform: translateX(-50%) translateY(0);
}

.date-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--form-gray);
  margin: 0 auto 16px;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-bottom: 12px;
}

.cal-head__title {
  font-size: 16px;
  font-weight: 700;
}

.cal-head__nav {
  border: none;
  background: transparent;
  font-size: 16px;
  color: var(--color-text);
  cursor: pointer;
  padding: 4px 8px;
}

.cal-grid {
  width: 100%;
  border-collapse: collapse;
}

.cal-grid th {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 0;
}

.cal-grid th:first-child {
  color: #e53935;
}

.cal-grid th:last-child {
  color: #1e88e5;
}

.cal-grid td {
  text-align: center;
  font-size: 14px;
  padding: 12px 0;
  cursor: pointer;
  border-radius: 8px;
}

.cal-grid td:first-child {
  color: #e53935;
}

.cal-grid td:last-child {
  color: #1e88e5;
}

.cal-grid td.is-selected {
  background: var(--tenpo-pink-main-500);
  color: var(--color-white) !important;
}

.date-sheet__hint {
  font-size: 13px;
  color: var(--color-note);
  border-top: 1px solid #eeeeee;
  padding: 14px 0 12px;
}

.date-sheet__btns {
  display: flex;
  gap: 12px;
}

.date-sheet__clear {
  flex: 1;
  height: 46px;
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: 8px;
  font-family: var(--font-jp);
  font-size: 14px;
  cursor: pointer;
}

.date-sheet__apply {
  flex: 1.4;
  height: 46px;
  background: var(--tenpo-pink-main-500);
  border: none;
  border-radius: 8px;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  cursor: pointer;
}

/* ドロップダウン（回数券・担当者） */
.filter-dropdown {
  position: absolute;
  display: none;
  min-width: 240px;
  background: #555555;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 40;
}

.filter-dropdown.is-open {
  display: block;
}

.filter-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-white);
  cursor: pointer;
}

.filter-dropdown__item.is-selected {
  background: var(--tenpo-pink-main-500);
}

.filter-dropdown__item.is-selected::before {
  content: "✓";
  font-size: 12px;
}

/* ============================================
   店舗QR表示画面（新規お客様の招待QR）
   ============================================ */

.page-header__back {
  border: none;
  background: transparent;
  font-size: 20px;
  color: var(--tenpo-brown-text);
  cursor: pointer;
  padding: 0 8px 0 0;
}

.page-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-header__store {
  font-size: 13px;
  color: var(--tenpo-brown-text);
  display: none;
}

/* タブバー */
.qr-tabs {
  width: 100%;
  display: flex;
  background: var(--color-white);
  padding: 16px 10px 0;
}

.qr-tab {
  flex: 1;
  height: 45px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  color: var(--form-dark-gray);
  cursor: pointer;
}

.qr-tab.is-active {
  color: #22a45d;
  border-bottom-color: #22a45d;
}

.qr-tab__badge {
  background: #22a45d;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-white);
}

/* 案内バナー */
.qr-banner {
  width: calc(100% - 20px);
  margin: 20px 10px 0;
  background: #eef8f0;
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  padding: 13px 15px;
}

.qr-banner__title {
  font-size: 14px;
  font-weight: 700;
  color: #22a45d;
}

.qr-banner__desc {
  display: none;
  font-size: 13px;
  color: var(--color-note);
  padding-top: 4px;
}

/* QRエリア */
.qr-area {
  width: calc(100% - 20px);
  margin: 20px 10px 0;
  background: #f4fbf5;
  border: 1px solid #22a45d;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 22px;
}

.qr-area__label {
  font-size: 14px;
  font-weight: 700;
  color: #22a45d;
}

.qr-area__code {
  width: 212px;
  height: 212px;
  background: var(--color-white);
  border-radius: 16px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-area__code img {
  width: 212px;
  height: 212px;
  border-radius: 16px;
}

.qr-actions {
  width: 100%;
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.qr-actions .btn {
  width: auto;
  min-width: 0;
  flex: 1;
  height: 48px;
  font-size: 14px;
}

.btn--qr-green {
  background: #22a45d;
}

.btn--qr-outline {
  background: var(--color-white);
  color: #22a45d;
  border: 1px solid #22a45d;
}

.qr-url-label {
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  margin-top: 14px;
}

.qr-url-box {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.2;
  word-break: break-all;
  margin-top: 4px;
  cursor: pointer;
}

.qr-note {
  width: 100%;
  padding: 20px 10px 24px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: var(--color-note);
}

/* TB: 使い方カード */
.qr-howto {
  display: none;
}

.howto-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}

.howto-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 11px;
  background: var(--tenpo-pink-main-500);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.howto-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}

.howto-desc {
  font-size: 12px;
  line-height: 17px;
  color: var(--form-dark-gray);
}

/* TB: 左ナビメニュー */
.side-menu {
  display: none;
}

@media (min-width: 768px) {
  .qr-page .app,
  .has-side-menu .app {
    flex-direction: row;
    align-items: stretch;
    max-width: none;
  }

  .side-menu {
    display: flex;
    flex-direction: column;
    width: 180px;
    flex-shrink: 0;
    background: var(--color-white);
    border-right: 1px solid #e0e0e0;
    min-height: 100dvh;
  }

  .side-menu__logo {
    padding: 16px 20px 8px;
  }

  .side-menu__logo img {
    width: 110px;
  }

  .side-menu__label {
    font-size: 10px;
    color: var(--form-dark-gray);
    padding: 8px 16px;
  }

  .side-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
  }

  .side-menu__item.is-active {
    background: var(--tenpo-pink-sub-100);
    color: var(--tenpo-pink-main-500);
    font-weight: 700;
  }

  .side-menu__item--sub {
    padding-left: 28px;
    font-size: 12px;
    border-bottom: none;
    color: var(--color-text);
  }

  .side-menu__item--muted {
    color: var(--form-dark-gray);
  }

  .qr-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f3f4f6;
  }

  .qr-page .header {
    display: none;
  }

  .qr-page .page-header {
    justify-content: space-between;
  }

  .qr-page .page-header__store {
    display: block;
  }

  .qr-tabs {
    padding: 0;
  }

  .qr-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px;
    align-items: start;
  }

  .qr-card-tb {
    background: var(--color-white);
    border: 1px solid var(--form-gray);
    border-radius: 10px;
    overflow: hidden;
  }

  .qr-card-tb__title {
    background: var(--tenpo-pink-sub-100);
    border-bottom: 0.5px solid var(--tenpo-beige);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.7px;
    color: var(--tenpo-brown-text);
  }

  .qr-area {
    width: auto;
    margin: 0;
    background: var(--color-white);
    border: none;
    border-radius: 0;
  }

  .qr-banner {
    width: 100%;
    margin: 0;
  }

  .qr-banner__desc {
    display: block;
  }

  .qr-note {
    padding: 0 16px 20px;
  }

  .qr-howto {
    display: block;
    margin-top: 16px;
    background: var(--color-white);
    border: 1px solid var(--form-gray);
    border-radius: 10px;
    overflow: hidden;
  }

  .qr-howto__title {
    background: var(--tenpo-pink-sub-100);
    border-bottom: 0.5px solid var(--tenpo-beige);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.7px;
    color: var(--tenpo-brown-text);
  }

  .qr-howto__body {
    padding: 12px 16px;
  }
}

/* 店舗QR: SP表示順・枠調整 */
@media (max-width: 767px) {
  .qr-split {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .qr-col-right {
    order: -1;
  }

  .qr-card-tb {
    background: transparent;
    border: none;
    border-radius: 0;
  }

  .qr-card-tb__title {
    display: none;
  }
}

/* ============================================
   共通トースト・SPドロワーメニュー
   ============================================ */

.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding: 6px 16px;
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 100;
}

.toast img {
  width: 16px;
  height: 16px;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 270px;
  background: var(--color-white);
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 60;
  overflow-y: auto;
  padding: 20px 0;
}

.drawer.is-open {
  transform: translateX(0);
}

.drawer__close {
  border: none;
  background: transparent;
  font-size: 22px;
  color: var(--tenpo-brown-text);
  cursor: pointer;
  padding: 0 20px 12px;
}

.drawer .side-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
}

.drawer .side-menu__item.is-active {
  background: var(--tenpo-pink-sub-100);
  color: var(--tenpo-pink-main-500);
  font-weight: 700;
}

.drawer .side-menu__item--sub {
  padding-left: 32px;
  font-size: 13px;
  border-bottom: none;
}

.drawer .side-menu__item--muted {
  color: var(--form-dark-gray);
}

/* ============================================
   新規お客様（カルテ）登録
   ============================================ */

.line-notice {
  width: 100%;
  background: #fff9ec;
  border-bottom: 1px solid #f5e0b0;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--form-red-text);
}

.anon-card {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: 10px;
  padding: 14px 16px;
}

.anon-card.is-on {
  background: var(--tenpo-pink-sub-100);
  border-color: #f8c9cd;
}

.anon-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.anon-card__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--form-light-gray);
  border-radius: 8px;
  display: grid;
  place-content: center;
  font-size: 20px;
}

.anon-card.is-on .anon-card__icon {
  background: #fadadd;
}

.anon-card__text {
  flex: 1;
}

.anon-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tenpo-brown-text);
}

.anon-card__desc {
  font-size: 11px;
  color: var(--form-dark-gray);
}

.anon-alert {
  display: none;
  margin-top: 12px;
  background: #fffaf0;
  border: 1px solid #f5c563;
  border-radius: 8px;
  padding: 12px 14px;
}

.anon-card.is-on .anon-alert {
  display: block;
}

.anon-alert__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--form-red-text);
  margin-bottom: 4px;
}

.anon-alert__item {
  font-size: 11px;
  line-height: 20px;
  color: var(--tenpo-brown-text);
}

.form-lead {
  width: 100%;
  font-size: 13px;
  color: var(--form-dark-gray);
}

/* 生年月日セレクト風 */
.select-like {
  width: 100%;
  min-height: var(--input-h);
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: var(--radius-input);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: var(--color-text);
  cursor: pointer;
}

.select-like.is-empty {
  color: var(--form-dark-gray);
}

.select-like::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--form-dark-gray);
  border-bottom: 2px solid var(--form-dark-gray);
  transform: rotate(45deg) translate(-3px, -1px);
}

/* ラジオ（性別） */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding-top: 4px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
}

.radio-item input {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--form-gray);
  border-radius: 50%;
  background: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
}

.radio-item input:checked {
  border-color: var(--tenpo-pink-main-500);
  background: radial-gradient(circle, var(--tenpo-pink-main-500) 0 8px, var(--color-white) 9px);
}

.field-note {
  width: 100%;
  font-size: 11px;
  line-height: 18px;
  color: var(--form-dark-gray);
}

.form-field__input--area {
  min-height: 100px;
  resize: vertical;
}

.req-mark {
  color: var(--form-red-text);
}

/* ホイールピッカー（生年月日） */
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  border-radius: 16px 16px 0 0;
  padding: 12px 16px 24px;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  z-index: 70;
  max-width: 402px;
  margin: 0 auto;
}

.sheet.is-open {
  transform: translateY(0);
}

.sheet__handle {
  width: 32px;
  height: 4px;
  background: var(--form-gray);
  border-radius: 2px;
  margin: 0 auto 16px;
}

.wheel-row {
  display: flex;
  gap: 8px;
  position: relative;
  padding: 8px 0 16px;
}

.wheel-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 40px;
  transform: translateY(-50%);
  background: #ede7e4;
  border-radius: 8px;
  pointer-events: none;
}

.wheel {
  flex: 1;
  height: 200px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  text-align: center;
  position: relative;
  z-index: 1;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.wheel::-webkit-scrollbar {
  display: none;
}

.wheel__item {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: var(--color-text);
  scroll-snap-align: center;
  cursor: pointer;
}

.wheel__item.is-active {
  font-weight: 700;
}

.wheel__pad {
  height: 80px;
}

/* 同意書カード（共通・カルテ登録用） */
.consent-block {
  width: 100%;
  border: 1px solid #f8c9cd;
  border-radius: 10px;
  overflow: hidden;
}

.consent-block__head {
  background: var(--tenpo-pink-sub-100);
  border-bottom: 1px solid #f8c9cd;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.consent-block__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: var(--form-red-text);
}

.consent-block__body {
  background: var(--color-white);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.consent-block__desc {
  font-size: 12px;
  line-height: 20px;
  color: #81726b;
}

.consent-block.is-agreed {
  border-color: #a5d6a7;
}

.consent-block.is-agreed .consent-block__head {
  background: #eef8ef;
  border-bottom-color: #a5d6a7;
}

.consent-block.is-agreed .consent-block__title {
  color: #2e7d32;
}

.consent-block.is-agreed .agree-item__check:checked {
  background: #4caf50;
  border-color: #4caf50;
}

/* 署名 */
.sign-date-row {
  display: flex;
  gap: 8px;
}

.sign-date-row select {
  flex: 1;
  height: 44px;
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: 6px;
  padding: 0 8px;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-text);
}

.sign-canvas {
  width: 100%;
  height: 160px;
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: 8px;
  touch-action: none;
  cursor: crosshair;
  display: block;
}

.sign-actions {
  display: flex;
  justify-content: flex-end;
}

.btn-mini {
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: 6px;
  padding: 5px 12px;
  font-family: var(--font-jp);
  font-size: 11px;
  color: var(--form-dark-gray);
  cursor: pointer;
}

/* 完了シート */
.done-sheet__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--tenpo-pink-main-500);
  display: grid;
  place-content: center;
}

.done-sheet__icon::before {
  content: "";
  width: 18px;
  height: 10px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg) translate(2px, -3px);
}

.done-sheet__title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
}

.done-sheet__desc {
  font-size: 13px;
  line-height: 21px;
  color: var(--form-dark-gray);
  text-align: center;
  margin-bottom: 20px;
}

.done-sheet__btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* メインカラム（サイドメニュー併用ページ） */
.nc-main,
.scan-main,
.home-main {
  width: 100%;
}

/* ============================================
   回数券QRスキャン
   ============================================ */

.scan-page {
  background: var(--color-white);
}

.scan-camera {
  position: relative;
  width: 100%;
  height: 520px;
  background: #7c7c7c;
  display: grid;
  place-content: center;
}

.scan-camera__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.scan-frame {
  width: 286px;
  height: 286px;
  position: relative;
}

.scan-frame span {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
}

.scan-frame span:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; }
.scan-frame span:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; }
.scan-frame span:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; }
.scan-frame span:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; }

.scan-guide {
  padding: 32px 16px;
  text-align: center;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text);
  background: var(--form-light-gray);
}

.scan-result-banner {
  width: 100%;
  background: var(--tenpo-pink-sub-100);
  border: 1px solid #f8c9cd;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tenpo-brown-text);
}

.scan-result-banner__check {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--tenpo-pink-main-500);
  display: grid;
  place-content: center;
}

.scan-result-banner__check::before {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -2px);
}

.cust-info__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0eae8;
}

.cust-info__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.cust-info__name {
  font-size: 17px;
  font-weight: 700;
}

.cust-info__kana {
  font-size: 12px;
  color: #81726b;
}

.ticket-label {
  font-size: 11px;
  color: var(--form-dark-gray);
  padding-top: 12px;
}

.ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--tenpo-pink-sub-100);
  border-left: 4px solid var(--tenpo-pink-main-500);
  border-radius: 4px;
  padding: 12px 14px;
  margin-top: 6px;
}

.ticket-row__name {
  font-size: 14px;
  font-weight: 700;
}

.ticket-row__count {
  text-align: right;
}

.ticket-row__num {
  font-size: 18px;
  font-weight: 700;
  color: var(--tenpo-pink-main-500);
}

.ticket-row__total {
  font-size: 12px;
  color: var(--form-dark-gray);
}

.ticket-row__unit {
  font-size: 10px;
  color: var(--form-dark-gray);
}

.confirm-card {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
}

.confirm-card__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}

.confirm-card__btns {
  display: flex;
  gap: 12px;
}

.confirm-card__btns .btn {
  flex: 1;
  width: auto;
  height: 48px;
  font-size: 15px;
}

/* タブレット */
@media (min-width: 768px) {
  .nc-main,
  .scan-main,
  .home-main {
    flex: 1;
    width: auto;
    min-width: 0;
    background: #f3f4f6;
  }

  /* TB: HOMEはロゴヘッダーを隠し、コンテンツを中央寄せ */
  .home-main > .header {
    display: none;
  }

  .home-main > section,
  .home-main > .page-header,
  .home-main > .user-list,
  .home-main > main,
  .home-main > nav {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .nc-main .app__body,
  .scan-main .app__body {
    max-width: 720px;
    margin: 0 auto;
  }

  .scan-camera {
    height: 560px;
    border-radius: 12px;
    margin-top: 16px;
  }

  .sheet {
    max-width: 480px;
    border-radius: 16px;
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
  }

  .sheet.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* ============================================
   カルテプレビュー
   ============================================ */

.kp-name-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 12px;
}

.kp-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.kp-kana {
  width: 100%;
  font-size: 12px;
  color: #81726b;
  margin-top: -10px;
  padding-bottom: 12px;
}

.badge-new {
  white-space: nowrap;
  flex-shrink: 0;
  background: #f53942;
  border-radius: 100px;
  padding: 1px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-white);
}

/* 読み取り専用の値表示 */
.kp-value {
  width: 100%;
  min-height: 48px;
  background: var(--form-light-gray);
  border: 1px solid var(--tenpo-beige);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 22px;
  white-space: pre-wrap;
}

.kp-row2 {
  display: flex;
  gap: 12px;
  width: 100%;
}

.kp-row2 > .form-field {
  flex: 1;
}

/* 画像メモ・B&A グリッド */
.kp-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.kp-photo-card {
  border: 1px solid var(--tenpo-beige);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-white);
  cursor: pointer;
}

.kp-photo-card__label {
  background: var(--tenpo-pink-sub-100);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tenpo-pink-main-500);
}

.kp-photo-card--ba .kp-photo-card__label {
  background: #fff6e5;
  color: #e8a020;
}

.kp-photo-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--form-light-gray);
}

.kp-photo-card__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.kp-photo-card__pair img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.kp-photo-card__comment {
  padding: 8px 10px;
  font-size: 11px;
  line-height: 16px;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kp-photo-card--empty {
  background: var(--tenpo-pink-sub-100);
  border-style: solid;
  min-height: 120px;
}

.kp-photo-add {
  border: 2px dashed #f0b429;
  border-radius: 8px;
  background: #fffaf0;
  display: grid;
  place-content: center;
  min-height: 140px;
  cursor: pointer;
  font-size: 32px;
  color: #f0b429;
  line-height: 1;
}

/* 写真一覧ボタン */
.btn-photolist {
  background: var(--color-white);
  border: 1px solid #f0b429;
  border-radius: 20px;
  padding: 6px 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-jp);
  font-size: 11px;
  font-weight: 700;
  color: #e8a020;
  cursor: pointer;
}

/* カウンセリング内容（ピンク枠） */
.kp-counseling {
  width: 100%;
  border: 2px solid var(--tenpo-pink-main-500);
  border-radius: 10px;
  overflow: hidden;
}

.kp-counseling__head {
  background: var(--tenpo-pink-main-500);
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
}

.kp-counseling__body {
  background: var(--color-white);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-record-btn {
  width: 100%;
  background: var(--color-white);
  border: 1px solid #b9b6f5;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: var(--font-jp);
  text-align: left;
}

.ai-record-btn__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #6c63ff;
  display: grid;
  place-content: center;
  color: #fff;
  font-size: 15px;
}

.ai-record-btn__text {
  flex: 1;
}

.ai-record-btn__title {
  font-size: 13px;
  font-weight: 700;
  color: #6c63ff;
}

.ai-record-btn__sub {
  font-size: 10px;
  color: var(--form-dark-gray);
}

.ai-record-btn__arrow {
  color: #6c63ff;
  font-size: 16px;
}

/* アコーディオン（会員登録情報） */
.kp-accordion {
  width: 100%;
  background: var(--tenpo-pink-sub-100);
  border: 1px solid var(--tenpo-beige);
  border-radius: 8px;
  overflow: hidden;
}

.kp-accordion__head {
  width: 100%;
  background: transparent;
  border: none;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  color: var(--tenpo-brown-text);
  cursor: pointer;
}

.kp-accordion__head::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--tenpo-brown-text);
  border-bottom: 2px solid var(--tenpo-brown-text);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s;
}

.kp-accordion.is-open .kp-accordion__head::after {
  transform: rotate(-135deg) translate(-4px, -4px);
}

.kp-accordion__body {
  display: none;
  background: var(--color-white);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 22px;
}

.kp-accordion.is-open .kp-accordion__body {
  display: block;
}

/* 下部アクション */
.kp-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 32px;
}

.kp-icon-btn {
  width: 48px;
  height: 40px;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: 8px;
  display: grid;
  place-content: center;
  font-size: 17px;
  cursor: pointer;
}

/* モーダル（画像メモ・B&A） */
.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: calc(100% - 24px);
  max-width: 380px;
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: 16px;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 80;
}

.modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal__handle {
  width: 32px;
  height: 4px;
  background: var(--form-gray);
  border-radius: 2px;
  margin: 0 auto 12px;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--tenpo-beige);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.modal__title {
  font-size: 16px;
  font-weight: 700;
}

.modal__close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--form-light-gray);
  color: var(--form-dark-gray);
  font-size: 16px;
  cursor: pointer;
}

.modal__img {
  width: 100%;
  border-radius: 4px;
  display: block;
  margin-bottom: 12px;
}

.modal__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

.modal__pair img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.modal__label {
  font-size: 11px;
  color: var(--form-dark-gray);
  margin-bottom: 4px;
}

.modal__comment {
  background: var(--form-light-gray);
  border: 1px solid var(--tenpo-beige);
  border-radius: 6px;
  padding: 12px;
  font-size: 12px;
  line-height: 20px;
  max-height: 170px;
  overflow-y: auto;
  margin-bottom: 14px;
  white-space: pre-wrap;
}

.modal__btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 削除確認シート */
.sheet__icon-del {
  width: 56px;
  height: 56px;
  margin: 6px auto 14px;
  border-radius: 50%;
  background: #f23b3b;
  display: grid;
  place-content: center;
  font-size: 24px;
}

/* タブレット：2カラム */
@media (min-width: 768px) {
  .kp-main {
    flex: 1;
    width: auto;
    min-width: 0;
    background: #f3f4f6;
  }

  .kp-main > .header {
    display: none;
  }

  .kp-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px 0;
    background: var(--color-white);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--tenpo-beige);
  }

  .kp-toolbar .kp-name {
    white-space: nowrap;
  }

  .kp-toolbar__name {
    flex: 1;
  }

  .kp-toolbar .btn {
    width: 240px;
  }

  .kp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
    padding: 16px 24px 32px;
  }

  .kp-split > div {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .kp-sp-only {
    display: none;
  }
}

@media (max-width: 767px) {
  .kp-toolbar {
    display: none;
  }
}

/* ============================================
   カルテ編集
   ============================================ */

/* 新規/再来 トグル */
.seg-toggle {
  width: 100%;
  display: flex;
  background: var(--form-light-gray);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}

.seg-toggle__btn {
  flex: 1;
  height: 40px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  color: var(--form-dark-gray);
  cursor: pointer;
}

.seg-toggle__btn.is-active {
  background: var(--tenpo-pink-main-500);
  color: var(--color-white);
}

/* 読み取り専用フィールド（グレーピンク） */
.form-field__input--readonly {
  background: #ece2e0;
  color: var(--color-text);
}

/* セレクト */
.form-select {
  width: 100%;
  min-height: var(--input-h);
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: var(--radius-input);
  padding: 10px 14px;
  font-family: var(--font-jp);
  font-size: 15px;
  color: var(--color-text);
}

/* 回数券カウンター */
.ticket-counter {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--form-light-gray);
  border-radius: 8px;
  padding: 12px 14px;
}

.ticket-counter__name {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  line-height: 19px;
}

.ticket-counter__ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
}

.counter-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--tenpo-pink-main-500);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--tenpo-pink-main-500);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-content: center;
}

.ticket-counter__num {
  font-size: 18px;
  font-weight: 700;
  color: var(--tenpo-pink-main-500);
  min-width: 22px;
  text-align: center;
}

.ticket-counter__total {
  font-size: 12px;
  color: var(--form-dark-gray);
}

/* 画像メモ編集 */
.edit-photo-block {
  width: 100%;
  border: 1px solid var(--tenpo-beige);
  border-radius: 8px;
  overflow: hidden;
}

.edit-photo-block__label {
  background: var(--tenpo-pink-sub-100);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tenpo-pink-main-500);
}

.edit-photo-block--ba .edit-photo-block__label {
  background: #fff6e5;
  color: #e8a020;
}

.edit-photo-block__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-white);
}

.photo-frame {
  position: relative;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.photo-frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.photo-frame__tools {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
}

.photo-tool {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  cursor: pointer;
  display: grid;
  place-content: center;
}

/* 写真追加（点線枠） */
.photo-add {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 2px dashed #f5a3ad;
  border-radius: 6px;
  background: var(--tenpo-pink-sub-100);
  display: grid;
  place-content: center;
  gap: 6px;
  justify-items: center;
  cursor: pointer;
  font-size: 12px;
  color: var(--tenpo-pink-main-500);
}

.photo-add--ba {
  border-color: #f0b429;
  background: #fffaf0;
  color: #e8a020;
  aspect-ratio: 3 / 4;
}

.photo-add__icon {
  font-size: 22px;
}

/* B&Aペア（編集） */
.ba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ba-pair__cell {
  border: 1px solid var(--tenpo-beige);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-white);
}

.ba-pair__cell .photo-frame img {
  aspect-ratio: 3 / 4;
}

.ba-pair__tag {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
}

.ba-pair__tag--before {
  color: #b21e26;
}

.ba-pair__tag--after {
  color: #2e7d32;
}

/* タブレット2カラム（プレビューと共通クラス流用） */
@media (min-width: 768px) {
  .ke-main {
    flex: 1;
    width: auto;
    min-width: 0;
    background: #f3f4f6;
  }

  .ke-main > .header {
    display: none;
  }
}

/* ============================================
   カルテ検索
   ============================================ */

.ks-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* フィルタチップ：適用中 */
.filter-chip.is-active {
  border-color: var(--tenpo-pink-main-500);
  color: var(--tenpo-pink-main-500);
}

.filter-chip.is-active::after {
  border-right-color: var(--tenpo-pink-main-500);
  border-bottom-color: var(--tenpo-pink-main-500);
}

.filter-chip--multiline {
  height: auto;
  min-height: 31px;
  padding-top: 4px;
  padding-bottom: 4px;
  white-space: pre-line;
  line-height: 1.25;
  text-align: left;
}

/* カレンダーの期間ハイライト */
.cal-grid td.is-range {
  background: var(--tenpo-pink-sub-100);
  border-radius: 0;
}

/* 件数バー内の並び替えボタン */
.list-info--search {
  background: var(--color-white);
  border-bottom: 1px solid var(--tenpo-beige);
  padding: 8px 14px;
}

.list-info__sort {
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 600;
  color: #c4737d;
  cursor: pointer;
  padding: 0;
}

/* 並び替えドロップダウン */
.sort-dropdown {
  position: absolute;
  display: none;
  width: 348px;
  max-width: calc(100vw - 32px);
  border-radius: 5px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 40;
}

.sort-dropdown.is-open {
  display: block;
}

.sort-dropdown__item {
  min-height: 50px;
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  margin-top: -1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  font-size: 14px;
  letter-spacing: 0.7px;
  cursor: pointer;
}

.sort-dropdown__item:first-child {
  margin-top: 0;
}

.sort-dropdown__item::after {
  content: "✓";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid var(--form-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: transparent;
}

.sort-dropdown__item.is-selected {
  font-weight: 700;
  color: var(--tenpo-brown-text);
}

.sort-dropdown__item.is-selected::after {
  background: var(--tenpo-pink-main-500);
  border-color: var(--tenpo-pink-main-500);
  color: var(--color-white);
}

/* カルテ一覧カード（スマホ） */
.ks-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 11px 24px;
}

.ks-card {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
}

.ks-card__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ks-card__name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.8px;
  line-height: 23px;
}

.ks-card__date {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.7px;
  line-height: 17px;
  color: #81726b;
}

.ks-card__date img {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

.ks-card__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.icon-btn-photo {
  width: 40px;
  height: 40px;
  background: var(--tenpo-pink-sub-100);
  border: 1.25px solid #f8c9cd;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-btn-photo img {
  width: 16px;
  height: 16px;
}

.btn-detail--lg {
  width: 64px;
  height: 40px;
  border-radius: 9px;
  border-color: var(--form-gray);
  font-size: 12px;
  font-weight: 500;
}

/* カルテ一覧テーブル（タブレット） */
.ks-table-wrap {
  display: none;
}

.ks-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) 143px 90px 150px 84px 152px;
  align-items: center;
  border-bottom: 1px solid #fdf0f1;
  padding-left: 14px;
}

.ks-table__head {
  background: var(--tenpo-pink-sub-100);
  border-bottom: 1px solid var(--form-gray);
}

.ks-table__head span {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #c4737d;
  white-space: nowrap;
}

.ks-table__head span:first-child {
  padding-left: 0;
}

.ks-table__head span:nth-child(2),
.ks-table__head span:nth-child(3) {
  padding-left: 28px;
}

.ks-cell--name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ks-cell--name .ks-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ks-cell--name .ks-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ks-cell--name .ks-avatar--none img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  margin-top: 6px;
}

.ks-name {
  font-size: 13px;
  font-weight: 600;
}

.ks-kana {
  font-size: 11px;
  color: #888888;
}

.ks-cell--date {
  padding: 11px 28px;
}

.ks-cell--date b {
  display: block;
  font-size: 13px;
  font-weight: 400;
}

.ks-cell--date small {
  font-size: 11px;
  color: #888888;
}

.ks-cell--type {
  padding-left: 28px;
}

.ks-cell--ticket,
.ks-cell--action {
  display: flex;
  align-items: center;
  padding: 10px 14px;
}

.ks-cell--ticket {
  justify-content: center;
}

.ks-ticket-chip {
  background: #f3f4f6;
  border: 1px solid var(--form-gray);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #888888;
  white-space: nowrap;
}

.ks-ticket-none {
  font-size: 11px;
  color: #c8c8c8;
}

.ks-cell--staff {
  padding: 10px 14px;
  font-size: 13px;
}

.ks-cell--action {
  justify-content: flex-end;
  gap: 5px;
}

/* テーブル用ページネーション */
.ks-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--tenpo-beige);
  padding: 12px 40px 12px 16px;
}

.ks-pagination__info {
  font-size: 12px;
  font-weight: 500;
  color: #888888;
}

.ks-pagination__btns {
  display: flex;
  gap: 4px;
}

.ks-pagination .pg-btn {
  width: 28px;
  height: 28px;
  border-width: 1px;
  font-size: 12px;
}

/* タブレット */
@media (min-width: 768px) {
  .ks-main {
    flex: 1;
    width: auto;
    min-width: 0;
    background: #f3f4f6;
  }

  .ks-main > .header {
    display: none;
  }

  .ks-main .page-header__store {
    display: block;
    margin-left: auto;
  }

  .ks-cards,
  .ks-main > .pagination {
    display: none;
  }

  .ks-table-wrap {
    display: block;
    width: 100%;
    background: var(--color-white);
    border: 1px solid #e8dfe0;
    border-radius: 10px;
    overflow: hidden;
    margin: 16px 0;
  }

  .ks-main > section,
  .ks-main > .list-info,
  .ks-main > .ks-table-wrap {
    max-width: 812px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   写真一覧（ビフォー・アフター／その他の写真）
   ============================================ */

.pl-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-header__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8b7ab;
}

.page-header__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pl-tabs {
  width: 100%;
  display: flex;
  background: var(--color-white);
  border-bottom: 2px solid var(--tenpo-beige);
  padding: 0 24px;
}

.pl-tab {
  flex: 1;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 11px 8px;
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 500;
  color: #888888;
  cursor: pointer;
}

.pl-tab.is-active {
  color: var(--tenpo-pink-main-500);
  border-bottom-color: var(--tenpo-pink-main-500);
}

.pl-body {
  width: 100%;
  flex: 1;
  background: #f3f4f6;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 40px;
}

.pl-body > section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pl-body > section[hidden] {
  display: none;
}

.pl-date {
  font-size: 12px;
  color: #888888;
  padding-bottom: 8px;
}

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

/* ビフォー・アフターカード */
.ba-card {
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.ba-card__head {
  background: #fff8e6;
  border-bottom: 1px solid var(--tenpo-beige);
  padding: 2px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 15px;
  color: #de8036;
}

.ba-card__imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px;
  overflow: hidden;
}

.ba-card__imgs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ba-card__imgs .ba-card__none {
  background: #f0e9e9;
}

.ba-card__comment {
  padding: 6px 6px 0;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.4;
  height: calc(6px + 2.8em);
  overflow: hidden;
}

/* その他の写真 */
.pl-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: #e5e5e5;
  cursor: pointer;
}

.pl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タブレット */
@media (min-width: 768px) {
  .pl-main {
    flex: 1;
    width: auto;
    min-width: 0;
    background: #f3f4f6;
  }

  .pl-main > .header {
    display: none;
  }

  .pl-main .page-header__store {
    display: block;
    margin-left: auto;
  }

  .pl-tabs {
    padding: 0;
  }

  .pl-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }

  .ba-card__imgs {
    grid-template-rows: 96px;
  }
}

/* スマホ専用要素 */
@media (min-width: 768px) {
  [data-sp-only] {
    display: none !important;
  }
}

/* ============================================
   本文エリアの余白（Figma実測値に合わせる）
   ============================================ */

.nc-body {
  gap: 10px;
  padding: 10px;
}

.scan-body {
  gap: 20px;
  padding: 20px 10px;
}

.kp-split {
  gap: 16px;
  padding: 0 10px 16px;
}

@media (min-width: 768px) {
  .nc-body,
  .scan-body,
  .kp-split {
    gap: 16px;
    padding: 16px;
  }
}

/* 店舗登録・新規お客様登録：カード内の左右余白はFigma実測10px */
@media (max-width: 767px) {
  .reg-main > .card > .card__body,
  .nc-body > .card > .card__body {
    padding: 20px 10px;
  }

  .industry-card__label {
    flex: 0 0 auto;
    padding-bottom: 8px;
  }
}

/* パスワード設定・カルテ初期設定：本文の余白（Figma実測値） */
.pw-page,
.ki-page {
  padding-top: 14px;
}

.pw-page {
  gap: 32px;
}

.ki-page {
  gap: 20px;
}

@media (max-width: 767px) {
  .pw-page {
    gap: 14px;
  }
}

/* 新規お客様登録：送信ボタンはFigma実測362px */
@media (max-width: 767px) {
  .nc-body > .btn {
    width: 362px;
    max-width: 100%;
  }
}

/* 店舗QR（スマホ）：QR枠は画面幅いっぱい・注記の余白はFigma実測8px */
@media (max-width: 767px) {
  .qr-area {
    width: 100%;
    margin: 0;
  }

  .qr-note {
    padding: 8px 10px 24px;
  }
}

/* 登録完了：説明文はFigma実測337px（334pxだと1文字だけ折り返す） */
[data-section="register-complete"] .complete__desc {
  width: 337px;
  max-width: none;
}

/* 業種カード：ラベル行数に応じてアイコン領域を詰め、カードは正方形を維持 */
.industry-card__label {
  flex: 0 0 auto;
  padding-bottom: 8px;
}

/* ============================================
   お客様詳細（来店履歴／保有回数券／会員情報）
   ============================================ */

.cd-main {
  width: 100%;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cd-crumb {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.7px;
  color: rgba(124, 73, 57, 0.5);
}

.cd-crumb a {
  color: inherit;
  text-decoration: none;
}

.cd-crumb b {
  color: var(--tenpo-brown-text);
}

/* プロフィール・統計・アクション */
.cd-profile {
  width: 100%;
  background: var(--color-white);
  box-shadow: inset 0 -1px 0 var(--tenpo-beige);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 24px 16px;
}

.cd-profile__top {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
}

.cd-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8b7ab;
}

.cd-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cd-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}

.cd-kana {
  font-size: 12px;
  color: var(--color-note);
  padding-top: 2px;
}

.cd-profile__side {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cd-stats {
  width: 100%;
  height: 70.7px;
  background: var(--tenpo-bg);
  border: 1px solid var(--tenpo-beige);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: 1px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.cd-stat {
  border-right: 1px solid var(--tenpo-beige);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cd-stat:last-child {
  border-right: none;
}

.cd-stat__num {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.cd-stat__num b {
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  color: var(--tenpo-pink-700);
}

.cd-stat__unit {
  font-size: 8px;
  color: var(--tenpo-light-brown);
}

.cd-stat__label {
  padding-top: 3px;
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  color: var(--tenpo-light-brown);
}

.cd-actions {
  width: 100%;
  display: flex;
  gap: 4px;
}

.cd-act {
  height: 48px;
  border-radius: var(--radius-card);
  padding: 13px;
  font-family: var(--font-jp);
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-act--primary {
  width: 168px;
  flex-shrink: 0;
  background: var(--tenpo-pink-main-500);
  border: none;
  color: var(--color-white);
  font-weight: 700;
}

.cd-act--primary img {
  width: 18px;
  flex-shrink: 0;
}

.cd-act--primary span {
  flex: 1;
  min-width: 0;
}

.cd-act--outline {
  flex: 1;
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  color: var(--tenpo-light-brown);
  font-weight: 500;
}

/* パネル */
.cd-body {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 0 40px;
}

.cd-body > section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 0;
}

.cd-body > section[hidden] {
  display: none;
}

/* 会員情報タブのみカード幅381px＝左右10.5px（Figma実測） */
.cd-body > [data-panel="member"] {
  padding-left: 10.5px;
  padding-right: 10.5px;
}

.cd-sec-hd {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
}

.cd-sec-hd__label {
  font-size: 12px;
  color: var(--color-note);
}

.cd-sec-count {
  height: 18px;
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: 10px;
  padding: 0 7px;
  font-size: 12px;
  line-height: 14px;
  color: var(--color-note);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* 来店履歴カード */
.cd-visits {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cd-visit {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cd-visit__head {
  height: 39px;
  background: var(--tenpo-pink-sub-100);
  border-bottom: 0.5px solid var(--tenpo-beige);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cd-visit__date {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.7px;
  color: var(--tenpo-brown-text);
}

.cd-visit__badge {
  background: var(--color-white);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--tenpo-pink-main-500);
  white-space: nowrap;
}

.cd-visit__body {
  background: var(--color-white);
  border-top: 0.5px solid var(--tenpo-beige);
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 13px;
}

.cd-row {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.cd-row__label {
  width: 64px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  color: var(--form-gray);
}

.cd-row__val {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-text);
}

.cd-chip {
  height: 20px;
  display: inline-flex;
  align-items: center;
  background: var(--tenpo-bg);
  border: 1px solid var(--form-gray);
  border-radius: var(--radius-input);
  padding: 0 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-note);
  white-space: pre;
}

.cd-photos {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cd-photos__list {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 4px 0;
}

.cd-thumb {
  width: 52px;
  height: 52px;
  border: 1px solid var(--tenpo-beige);
  border-radius: var(--radius-input);
  overflow: hidden;
  cursor: pointer;
}

.cd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cd-thumb--pair {
  width: 106px;
  display: flex;
}

.cd-thumb--pair img {
  width: 52px;
  height: 52px;
}

.cd-visit__foot {
  background: var(--color-white);
  border-top: 1px solid var(--tenpo-beige);
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
}

.cd-visit__btn {
  flex: 1;
  min-width: 0;
  height: 40px;
  border-radius: var(--radius-card);
  border: none;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  background: var(--tenpo-pink-main-500);
  color: var(--color-white);
  cursor: pointer;
}

.cd-visit__btn--outline {
  background: var(--color-white);
  border: 1px solid var(--tenpo-pink-200);
  color: var(--tenpo-pink-main-500);
}

.cd-more {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: var(--radius-card);
  padding: 12px 17px;
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
  color: var(--color-note);
  cursor: pointer;
}

/* AI FABぶんの余白（FABは現在 display:none） */
.cd-fab-space {
  width: 100%;
  height: 104px;
}

/* 保有回数券 */
.cd-tickets {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cd-ticket-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tenpo-pink-sub-100);
  border-left: 4px solid var(--tenpo-pink-main-500);
  border-radius: var(--radius-input);
  padding: 8px 12px 8px 16px;
}

.cd-ticket-row__name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
}

.cd-ticket-row__count {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cd-ticket-row__num {
  display: flex;
  align-items: flex-end;
  white-space: nowrap;
}

.cd-ticket-row__num b {
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  color: var(--tenpo-pink-700);
}

.cd-ticket-row__num span {
  font-size: 11px;
  font-weight: 500;
  line-height: 11px;
  color: var(--form-dark-gray);
}

.cd-ticket-row__unit {
  font-size: 10px;
  line-height: 12px;
  color: var(--form-dark-gray);
}

.cd-ticket-cards {
  display: none;
}

.cd-ticket-card {
  background: var(--color-white);
  border: 1px solid #e8dfe0;
  border-radius: 13px;
  box-shadow: 0 1px 6px 0 rgba(196, 115, 125, 0.07);
  overflow: hidden;
}

.cd-ticket-card__head {
  background: #fdf0f1;
  border-bottom: 1px solid #f0c4c8;
  padding: 11px 16px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cd-ticket-card__name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--tenpo-pink-700);
}

.cd-ticket-card__count {
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}

.cd-ticket-card__count b {
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
  color: var(--tenpo-pink-700);
}

.cd-ticket-card__count span {
  font-size: 13px;
  color: var(--tenpo-light-brown);
}

.cd-ticket-card__body {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
}

.cd-ticket-box {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--tenpo-beige);
  border-radius: var(--radius-input);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cd-ticket-box dt {
  font-size: 10px;
  line-height: 12px;
  color: var(--form-dark-gray);
}

.cd-ticket-box dd {
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  color: var(--color-text);
}

/* 会員情報 */
.cd-member {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cd-member__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cd-info-body {
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-top-width: 0.5px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  padding: 20px 11px 0;
}

.cd-info-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid var(--tenpo-beige);
  padding-bottom: 12px;
  margin-bottom: 10px;
}

.cd-info-row:last-child {
  margin-bottom: 20px;
}

.cd-info-row dt {
  font-size: 11px;
  line-height: 14px;
  color: var(--form-dark-gray);
}

.cd-info-row dd {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  color: var(--color-text);
}

/* 同意書アコーディオン */
.cd-acc {
  width: 100%;
}

.cd-acc__head {
  width: 100%;
  height: 40px;
  background: var(--tenpo-pink-sub-100);
  border: 1px solid var(--tenpo-beige);
  border-bottom-width: 0.5px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: var(--tenpo-brown-text);
  cursor: pointer;
}

.cd-acc__head::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1.6px solid var(--tenpo-brown-text);
  border-bottom: 1.6px solid var(--tenpo-brown-text);
  transform: translateY(-3px) rotate(45deg);
}

.cd-acc.is-open .cd-acc__head::after {
  transform: translateY(2px) rotate(225deg);
}

.cd-acc__body {
  display: none;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-top-width: 0.5px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  padding: 16px 13px;
  flex-direction: column;
  gap: 10px;
}

.cd-acc.is-open .cd-acc__body {
  display: flex;
}

.cd-acc__body > [data-consent-state][hidden] {
  display: none;
}

.cd-consent {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cd-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-card);
  padding: 13px 15px;
}

.cd-banner__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
}

.cd-banner--ok {
  background: var(--banner-green-50);
  border: 1px solid var(--banner-green-100);
}

.cd-banner--ok .cd-banner__icon {
  background: var(--banner-green-500);
}

.cd-banner--ok .cd-banner__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--banner-green-text);
}

.cd-banner--none {
  background: var(--tenpo-bg);
  border: 1px solid var(--form-gray);
}

.cd-banner--none .cd-banner__icon {
  background: var(--form-gray);
}

.cd-banner--none .cd-banner__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  color: var(--color-text);
}

.cd-banner__text {
  font-size: 12px;
  line-height: 20px;
  color: var(--color-note);
}

.cd-note {
  font-size: 12px;
  line-height: 20px;
  color: var(--color-note);
}

.cd-cbody {
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-top-width: 0.5px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  padding: 10px 13px 0;
}

.cd-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--tenpo-beige);
  padding: 4px 0 12px;
  margin-bottom: 7px;
}

.cd-field:last-child {
  margin-bottom: 10px;
}

.cd-field dt {
  font-size: 12px;
  color: var(--color-note);
}

.cd-field dd {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text);
}

.cd-sign {
  background: var(--form-light-gray);
  border-radius: var(--radius-input);
  padding: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cd-sign__canvas {
  width: 100%;
  height: 120px;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: var(--radius-input);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cd-sign__note {
  font-size: 11px;
  color: var(--form-dark-gray);
}

.cd-agree {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 10px 10px;
}

.cd-agree__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cd-agree__box {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 3px;
  background: var(--tenpo-pink-200);
  border: 1px solid var(--tenpo-pink-200);
  border-radius: 6px;
  display: grid;
  place-content: center;
}

.cd-agree__box::before {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--color-white);
  border-bottom: 2.5px solid var(--color-white);
  transform: rotate(-45deg) translate(1px, -1px);
}

.cd-agree__label {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.cd-agree__label a {
  color: var(--tenpo-pink-main-500);
  text-decoration: underline;
}

.cd-consent-scroll {
  height: 200px;
  overflow-y: auto;
  background: var(--form-light-gray);
  border: 1px solid var(--tenpo-beige);
  border-radius: var(--radius-input);
  padding: 13px 14px;
}

/* タブレット */
@media (min-width: 768px) {
  .cd-main {
    flex: 1;
    width: auto;
    min-width: 0;
    background: var(--tenpo-bg);
  }

  .cd-main > .header {
    display: none;
  }

  .cd-main .page-header {
    padding: 16px 20px;
    height: auto;
  }

  .cd-main .page-header__title {
    display: none;
  }

  .cd-main .page-header__left {
    gap: 24px;
  }

  .cd-main .page-header__store {
    display: block;
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: rgba(124, 73, 57, 0.5);
  }

  .cd-crumb {
    display: flex;
  }

  .cd-profile {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 26px;
  }

  .cd-profile__top {
    width: auto;
  }

  .cd-profile__side {
    width: 480px;
    flex-shrink: 0;
    gap: 7px;
    padding: 16px 0;
  }

  .cd-body > section {
    padding: 16px 26px 0;
    gap: 10px;
  }

  .cd-body > [data-panel="visits"] {
    padding-top: 0;
    gap: 0;
  }

  .cd-body > [data-panel="tickets"] .cd-sec-hd {
    display: none;
  }

  .cd-visits,
  .cd-tickets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: start;
  }

  .cd-ticket-cards {
    gap: 8px;
  }

  .cd-more {
    display: none;
  }

  .cd-ticket-rows {
    display: none;
  }

  .cd-ticket-cards {
    display: grid;
  }

  .cd-member {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: start;
  }

  .cd-member__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .cd-body > [data-panel="member"] {
    padding-left: 26px;
    padding-right: 26px;
  }

  .cd-info-body {
    padding: 20px 16px 0;
  }
}

/* ============================================
   ビフォーアフター 写真選択（ポップアップ）
   ============================================ */

.bas-page {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 60;
}

.bas-sheet {
  width: 100%;
  max-width: 390px;
  margin: 0 6px;
  max-height: calc(100dvh - 24px);
  background: var(--color-white);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px 0 rgba(155, 142, 196, 0.2);
  padding: 12px 0 40px;
  display: flex;
  flex-direction: column;
}

.bas-handle {
  width: 36px;
  height: 4px;
  flex-shrink: 0;
  margin: 0 auto;
  background: var(--form-gray);
  border-radius: 2px;
}

.bas-inner {
  flex: 1;
  min-height: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

.bas-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px 9px;
  border-bottom: 1px solid var(--tenpo-beige);
}

.bas-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.bas-close {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--tenpo-bg);
  font-family: var(--font-jp);
  font-size: 16px;
  color: var(--tenpo-light-brown);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bas-sub {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 2px;
}

.bas-sub__text {
  font-size: 13px;
  line-height: 16px;
  color: var(--tenpo-light-brown);
}

.bas-modebtns {
  display: flex;
  gap: 8px;
}

.bas-mode {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 13px;
  background: var(--color-white);
  border: 1px solid var(--tenpo-pink-main-500);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  cursor: pointer;
}

.bas-mode img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.bas-mode span {
  flex: 1;
  min-width: 0;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  color: var(--tenpo-pink-main-500);
}

/* 日付フィルタ */
.bas-filter {
  flex-shrink: 0;
  height: 47px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.bas-filter::-webkit-scrollbar {
  display: none;
}

.bas-filter__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 0;
  width: max-content;
}

.bas-chip {
  height: 29px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--tenpo-bg);
  border: 1px solid var(--tenpo-beige);
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 600;
  color: var(--tenpo-light-brown);
  white-space: nowrap;
  cursor: pointer;
}

.bas-chip.is-active {
  background: var(--tenpo-pink-main-500);
  border-color: var(--tenpo-pink-main-500);
  color: var(--color-white);
}

/* 写真グリッド */
.bas-grid {
  flex: 1;
  min-height: 0;
  margin-top: 8px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 83.75px;
  gap: 5px;
  align-content: start;
}

.bas-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  cursor: pointer;
}

.bas-card--pair {
  grid-column: span 2;
}

.bas-half {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 8px;
}

.bas-half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bas-half.is-before::after,
.bas-half.is-after::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 3px solid var(--ba-purple);
  pointer-events: none;
}

.bas-half.is-after::after {
  border-color: var(--ba-green);
}

.bas-check {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: none;
  place-content: center;
  font-size: 8.4px;
  font-weight: 700;
  color: var(--color-white);
}

.bas-half.is-before .bas-check,
.bas-half.is-after .bas-check {
  display: grid;
}

.bas-half.is-before .bas-check {
  background: var(--ba-purple);
}

.bas-half.is-after .bas-check {
  background: var(--ba-green);
}

.bas-pill {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 19px;
  transform: translateX(-50%);
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  display: none;
}

.bas-half.is-before .bas-pill,
.bas-half.is-after .bas-pill {
  display: block;
}

.bas-card.is-both .bas-half .bas-pill {
  display: none;
}

.bas-card__pill {
  position: absolute;
  left: 50%;
  bottom: 19px;
  transform: translateX(-50%);
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  display: none;
  z-index: 2;
}

.bas-card.is-both .bas-card__pill {
  display: block;
}

.bas-date {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 5px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 9px;
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
}

/* 選択アクション（タップ時のオーバーレイ） */
.bas-actions {
  position: absolute;
  inset: 0;
  padding: 0 4px;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 3;
}

.bas-card.is-open .bas-actions {
  display: flex;
}

.bas-act {
  padding: 6px 2px;
  border: none;
  border-radius: 5px;
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bas-act img {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.bas-act--set {
  width: 100%;
  justify-content: space-between;
  background: var(--tenpo-pink-main-500);
}

.bas-act--set span {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.bas-act--b {
  background: var(--ba-purple);
}

.bas-act--a {
  background: var(--ba-green);
}

.bas-actions__row {
  width: 159.5px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
}

.bas-actions__row .bas-act {
  width: 75.75px;
  justify-content: space-between;
}

.bas-card--single .bas-actions .bas-act {
  width: 75.75px;
  max-width: 100%;
  justify-content: center;
  padding: 6px 0;
}

/* 開始ボタン */
.bas-foot {
  flex-shrink: 0;
  margin-top: 8px;
  padding: 4px 0 0;
}

.bas-start {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: var(--radius-card);
  background: var(--form-dark-gray);
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--color-white);
  cursor: not-allowed;
}

.bas-start.is-ready {
  background: var(--tenpo-pink-main-500);
  cursor: pointer;
}

/* カメラモード */
.bas-cam {
  position: fixed;
  inset: 0;
  background: #61696e;
  display: none;
  z-index: 80;
}

.bas-cam.is-open {
  display: block;
}

.bas-cam__ghost {
  position: absolute;
  inset: 0;
  display: none;
}

.bas-cam.is-overlay .bas-cam__ghost {
  display: block;
}

.bas-cam__ghost img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.bas-cam.is-overlay {
  background: var(--color-white);
}

.bas-cam__close {
  position: absolute;
  top: 40px;
  right: 34px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  color: var(--color-white);
  cursor: pointer;
}

.bas-cam__bar {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bas-cam__thumbbox {
  width: 88px;
  display: flex;
  justify-content: center;
}

.bas-cam__thumb {
  width: 48px;
  height: 48px;
  border: 2px solid var(--color-white);
  border-radius: 8px;
  overflow: hidden;
  background: var(--form-gray);
}

.bas-cam__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bas-cam__shutter {
  width: 80px;
  height: 80px;
  padding: 8px;
  border: 4px solid var(--color-white);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.bas-cam__shutter span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--form-gray);
}

.bas-cam__toggle {
  width: 88px;
  height: 56px;
  padding: 12px 19px 11px 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10.67px;
  font-family: var(--font-jp);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bas-cam__toggle img {
  width: 24px;
  height: 24px;
}

.bas-cam__toggle span {
  white-space: nowrap;
}

.bas-cam.is-overlay .bas-cam__toggle {
  background: rgba(255, 255, 255, 0.3);
  border-color: var(--color-white);
}

/* タブレット */
@media (min-width: 768px) {
  .bas-page {
    align-items: flex-start;
    padding: 27px 0 9px;
  }

  .bas-sheet {
    max-width: 720px;
    margin: 0;
    max-height: calc(100dvh - 36px);
    border-radius: 20px;
    padding: 0 0 10px;
  }

  .bas-handle {
    display: none;
  }

  .bas-inner {
    gap: 4px;
  }

  .bas-sub {
    flex-direction: row;
    align-items: center;
    gap: 88px;
  }

  .bas-modebtns {
    flex: 1;
    gap: 16px;
  }

  .bas-grid {
    margin-top: 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 109.17px;
  }

  .bas-foot {
    margin-top: 8px;
  }
}

/* ============================================
   ユーザー側 新規登録（LINE経由／メール&パス経由）
   ============================================ */

.ur-body {
  gap: 10px;
  padding: 10px 10.5px 0;
}

.ur-body [hidden] {
  display: none;
}

.ur-badge {
  align-self: flex-start;
  margin-left: 9.5px;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-white);
}

.ur-badge--line {
  background: var(--ba-green);
}

.ur-badge--mail {
  background: var(--ba-purple);
}

/* 基本情報カードの本文だけ余白が狭い（Figma実測16px/10px） */
.ur-body-tight {
  padding: 16px 10px;
}

.ur-body .radio-group {
  gap: 16px 32px;
  max-width: 308px;
  padding-top: 0;
}

/* 性別だけラベルとの間隔が広い（Figma実測15px） */
.ur-gender {
  gap: 15px;
}

.ur-gender .form-field__label {
  line-height: 21px;
}

/* 同意事項（チェック式）はチェック行がカードの外 */
.ur-consent-group {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.ur-consent-group .consent-scroll {
  border-top-width: 0.5px;
}

.ur-agree-row {
  padding: 16px 10px;
}

/* 選択中は塗りつぶし（Figma実測） */
.ur-body .radio-item input {
  background: var(--form-light-gray);
  border-color: #e8e8e8;
}

.ur-body .radio-item input:checked {
  background: var(--tenpo-pink-main-500);
  border-color: var(--tenpo-pink-main-500);
}

/* 年月日セレクト */
.ur-date__row {
  width: 100%;
  display: flex;
  gap: 10px;
}

.ur-date__row select {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 10px;
  background: var(--form-light-gray);
  border: 1px solid var(--form-gray);
  border-radius: var(--radius-input);
  font-family: var(--font-jp);
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

/* 同意事項カード */
.ur-consent-body {
  padding: 14px 16px;
  gap: 16px;
  align-items: stretch;
}

.ur-scroll-frame {
  width: 100%;
  border: 1px solid var(--form-gray);
  border-radius: var(--radius-card);
}

.ur-scroll-frame .consent-scroll {
  border-width: 0;
  border-radius: var(--radius-card);
}

.ur-sign-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.ur-sign-canvas {
  width: 100%;
  height: 140px;
  background: var(--color-white);
  border: 2px solid var(--form-gray);
  border-radius: var(--radius-card);
  touch-action: none;
  cursor: crosshair;
  display: block;
}

.ur-rewrite {
  height: 24px;
  padding: 3px 10px;
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: 6px;
  font-family: var(--font-jp);
  font-size: 11px;
  color: var(--tenpo-light-brown);
  cursor: pointer;
}

.ur-sign-note {
  width: 100%;
  font-size: 11px;
  line-height: 16px;
  color: var(--form-dark-gray);
}

/* 登録ボタン */
.ur-submit {
  width: 100%;
  margin: 6px 0 32px;
}

/* デモ切替（本実装時は削除） */
.ur-demo {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--form-dark-gray);
}

.ur-demo select {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--form-gray);
  border-radius: 6px;
  font-family: var(--font-jp);
  font-size: 12px;
}

/* ============================================
   回数券発行（QRコード生成）
   ============================================ */

.ti-main {
  width: 100%;
  flex: 1;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ti-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 10px 0;
}

.ti-body [hidden] {
  display: none;
}

/* スマホはFigmaの並び順（オプション設定が発行日の前）、タブレットは2カラム */
.ti-col {
  display: contents;
}

.ti-body > .ti-col > [data-section="ticket-select"] {
  order: 1;
}

.ti-body > .ti-col > [data-section="count"] {
  order: 2;
}

.ti-body > .ti-col > [data-section="option"] {
  order: 3;
}

.ti-body > .ti-col > [data-section="period"] {
  order: 4;
}

.ti-body > .ti-col > .ti-summary {
  order: 5;
}

.ti-body > .ti-col > .ti-foot {
  order: 6;
}

/* カード（タイトル45px・本文padding14/10） */
.ti-card > .card__title {
  height: 45px;
}

.ti-card > .card__body {
  align-items: stretch;
  gap: 16px;
  padding: 14px 10px;
}

/* 回数券の選択リスト */
.ti-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ti-option {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
}

.ti-option.is-selected {
  border: 2px solid var(--tenpo-pink-main-500);
}

.ti-option__color {
  width: 6px;
  align-self: stretch;
  flex-shrink: 0;
}

.ti-option__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
}

.ti-option__name {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--color-text);
}

.ti-option.is-selected .ti-option__name {
  color: var(--tenpo-pink-main-500);
}

.ti-option__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  line-height: 16px;
  color: var(--tenpo-light-brown);
}

.ti-option__meta span {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ti-option__meta img {
  width: 12px;
  height: 12.5px;
}

.ti-option__check {
  flex-shrink: 0;
  margin-right: 12px;
  width: 22px;
  height: 22px;
  background: var(--form-light-gray);
  border: 1px solid var(--form-gray);
  border-radius: var(--radius-input);
  display: grid;
  place-content: center;
  font-size: 13px;
  color: transparent;
}

.ti-option.is-selected .ti-option__check {
  background: var(--tenpo-pink-main-500);
  border-color: var(--tenpo-pink-main-500);
  color: var(--color-white);
}

/* 回数を指定する */
.ti-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ti-field__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text);
}

.ti-field__note {
  font-size: 10px;
  line-height: 14px;
  color: var(--form-dark-gray);
}

.ti-count-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ti-count-row select {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  padding: 10px;
  background: var(--form-light-gray);
  border: 1px solid var(--form-gray);
  border-radius: var(--radius-input);
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

.ti-count-row select:disabled {
  color: var(--form-dark-gray);
}

.ti-count-row__unit {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text);
  padding-bottom: 12px;
}

.ti-suggest {
  margin-top: 8px;
  padding: 3px 10px;
  background: var(--tenpo-pink-sub-100);
  border: 1px solid var(--tenpo-pink-200);
  border-radius: 16px;
  font-size: 11px;
  font-weight: 500;
  line-height: 12px;
  color: var(--tenpo-pink-700);
}

/* オプション設定（アコーディオン） */
.ti-acc > .card__title {
  height: 60px;
  cursor: pointer;
}

.ti-acc > .card__title::after {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 2px solid var(--tenpo-brown-text);
  border-bottom: 2px solid var(--tenpo-brown-text);
  transform: translateY(-3px) rotate(45deg);
}

.ti-acc.is-open > .card__title::after {
  transform: translateY(2px) rotate(225deg);
}

.ti-acc > .card__body {
  display: none;
}

.ti-acc.is-open > .card__body {
  display: flex;
}

.ti-toggle-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: var(--color-text);
  margin-bottom: 5px;
}

.ti-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--banner-green-50);
  border-radius: var(--radius-card);
}

.ti-toggle {
  width: 38px;
  height: 21px;
  flex-shrink: 0;
  padding: 2px;
  border: none;
  border-radius: 11px;
  background: var(--banner-green-500);
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}

.ti-toggle span {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}

.ti-toggle[aria-pressed="false"] {
  background: var(--form-gray);
  justify-content: flex-start;
}

.ti-toggle-text b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--color-text);
}

.ti-toggle-text span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 13px;
  color: rgba(0, 0, 0, 0.5);
}

/* 発行日・有効期限 */
.ti-datebox {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  background: var(--form-light-gray);
  border: 1px solid var(--form-gray);
  border-radius: var(--radius-input);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

.ti-datebox--muted {
  color: var(--form-dark-gray);
}

.ti-datebox img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.ti-auto-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  background: rgba(170, 170, 170, 0.2);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--form-dark-gray);
}

.ti-auto-badge img {
  width: 11px;
  height: 11px;
}

/* 発行内容の確認 */
.ti-summary {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: var(--radius-card);
}

.ti-summary__hd {
  padding: 10px 14px;
  border-bottom: 1px solid var(--tenpo-beige);
  font-size: 12px;
  font-weight: 700;
  line-height: 17px;
  color: var(--tenpo-light-brown);
}

.ti-summary__body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ti-summary__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ti-summary__row dt {
  width: 80px;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 14px;
  color: rgba(0, 0, 0, 0.5);
}

.ti-summary__row dd {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  color: var(--color-text);
}

.ti-summary__row dd.is-pink {
  color: var(--tenpo-pink-700);
}

.ti-dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.ti-summary__divider {
  height: 0.5px;
  background: var(--tenpo-pink-sub-100);
}

/* 発行ボタン */
.ti-foot {
  width: auto;
  margin: 0 -10px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ti-foot .btn {
  width: 362px;
}

.ti-foot__note {
  font-size: 11px;
  line-height: 13px;
  text-align: center;
  color: var(--form-dark-gray);
}

/* QR画面 */
.ti-qr-area {
  width: 100%;
  padding: 16px 10px;
  display: flex;
  justify-content: center;
}

.ti-qr-card {
  padding: 16px;
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
}

.ti-qr-card img {
  width: 180px;
  height: 180px;
  display: block;
}

/* タブレット */
@media (min-width: 768px) {
  .ti-main {
    flex: 1;
    width: auto;
    min-width: 0;
    background: var(--tenpo-bg);
  }

  .ti-main > .header {
    display: none;
  }

  .ti-main .page-header {
    padding: 16px 20px;
    height: auto;
  }

  .ti-main .page-header__title {
    display: none;
  }

  .ti-main .page-header__left {
    gap: 24px;
  }

  .ti-main .page-header__store {
    display: block;
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: rgba(124, 73, 57, 0.5);
  }

  .ti-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    padding: 16px;
  }

  .ti-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ti-body > .ti-col > * {
    order: 0;
  }

  .ti-foot {
    width: 100%;
    margin: 0;
    padding: 24px 0 0;
  }

  .ti-qr-area {
    padding: 40px 10px 16px;
  }
}

/* ============================================
   各種設定
   ============================================ */

.st-main {
  width: 100%;
  flex: 1;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.st-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px 10px 0;
}

.st-banner {
  width: 100%;
  padding: 14px 16px;
  background: var(--tenpo-pink-main-500);
  border-radius: var(--radius-card);
  color: var(--color-white);
}

.st-banner__name {
  font-size: 15px;
  line-height: 18px;
}

.st-banner__plan {
  display: none;
  margin-top: 3px;
}

.st-plan-badge {
  display: inline-block;
  padding: 1px 8px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  font-size: 11px;
  line-height: 14px;
}

.st-groups {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 10px;
}

.st-group-set {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.st-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.st-group__label {
  padding: 4px 4px 2px;
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  color: var(--tenpo-light-brown);
}

.st-menu {
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 4px 0 rgba(200, 150, 155, 0.07);
  overflow: hidden;
}

.st-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--tenpo-pink-sub-100);
  font-family: var(--font-jp);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.st-item:last-child {
  border-bottom: none;
}

.st-item__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: var(--tenpo-pink-sub-100);
  border: 1px solid var(--tenpo-pink-200);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--tenpo-pink-700);
}

.st-item__icon img {
  width: 18px;
  height: auto;
}

.st-item__icon--line {
  background: var(--banner-green-50);
  border-color: var(--banner-green-100);
  color: var(--banner-green-500);
}

.st-item__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.st-item__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--color-text);
}

.st-item__label--red {
  color: var(--form-red-text);
}

.st-item__badge {
  padding: 2px 8px;
  background: var(--banner-green-50);
  border: 1px solid var(--banner-green-100);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  color: var(--banner-green-text);
}

.st-item__sub {
  font-size: 11px;
  line-height: 15px;
  color: var(--form-dark-gray);
}

.st-item__arrow {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 22px;
  color: var(--form-dark-gray);
}

.st-logout {
  background: var(--color-white);
  border: 1px solid var(--form-gray);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 4px 0 rgba(200, 150, 155, 0.07);
  overflow: hidden;
}

.st-foot {
  width: 100%;
  margin-top: 10px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.st-version {
  padding: 4px 0;
  text-align: center;
  font-size: 11px;
  line-height: 13px;
  color: var(--form-dark-gray);
}

.st-withdraw {
  padding: 4px 4px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.st-withdraw__link {
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-jp);
  font-size: 12px;
  line-height: 14px;
  color: rgba(0, 0, 0, 0.5);
  text-decoration: underline;
  cursor: pointer;
}

.st-withdraw__sub {
  font-size: 10px;
  line-height: 13px;
  color: var(--form-dark-gray);
}

/* 右下のメニューボタン（スマホ） */
.menu-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 64px;
  height: 64px;
  padding: 9px;
  background: var(--color-white);
  border: none;
  border-radius: 50%;
  box-shadow: 0 3.6px 3.6px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  z-index: 40;
}

.menu-fab__bars {
  width: 28px;
  display: flex;
  flex-direction: column;
  gap: 4.4px;
}

.menu-fab__bars span {
  display: block;
  height: 3.5px;
  border-radius: 2px;
  background: #444444;
}

.menu-fab__label {
  font-family: var(--font-jp);
  font-size: 10.7px;
  letter-spacing: 0.05em;
  color: #555555;
}

/* ログアウト確認ポップアップ */
.lo-sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: calc(100% - 52px);
  max-width: 350px;
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 -4px 24px 0 rgba(155, 142, 196, 0.2);
  padding: 12px 0 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 70;
}

.lo-sheet.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.lo-sheet__inner {
  padding: 40px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lo-sheet__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.lo-sheet__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 35px;
  color: var(--color-text);
}

.lo-sheet__desc {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--tenpo-light-brown);
}

.lo-sheet__btns {
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lo-sheet__btns .btn {
  width: 100%;
  height: 48px;
  font-size: 14px;
  letter-spacing: 0;
}

.lo-sheet__cancel {
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  box-shadow: 0 4px 12px 0 rgba(155, 142, 196, 0.3);
  color: var(--tenpo-pink-main-500);
}

/* ============================================
   店舗情報編集
   ============================================ */

.se-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 10.5px 0;
}

.se-pwlink {
  align-self: flex-end;
  margin-top: 4px;
  background: none;
  border: none;
  font-family: var(--font-jp);
  font-size: 13px;
  line-height: 20px;
  color: var(--tenpo-pink-main-500);
  cursor: pointer;
}

/* 営業時間は3行ぶん（Figma実測80px） */
.se-hours {
  height: 80px;
  min-height: 80px;
}

.se-upload {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.se-upload__label {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text);
}

.se-upload__frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--form-light-gray);
}

.se-upload__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.se-upload__frame--logo {
  height: 72px;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
}

.se-upload__frame--logo img {
  object-fit: contain;
  padding: 8px 10px;
}

.se-upload__frame--photo {
  aspect-ratio: 5 / 4;
}

.se-upload__ratio {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--tenpo-pink-main-500);
  pointer-events: none;
}

.se-upload__btn {
  position: absolute;
  right: 14px;
  bottom: 9px;
  height: 30px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--color-white);
  cursor: pointer;
}

.se-upload__btn img {
  width: 24px;
  height: 20px;
}

.se-foot {
  width: auto;
  margin: 14px -10.5px 0;
  padding: 0 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.se-foot .btn {
  width: 100%;
}

/* タブレット */
@media (min-width: 768px) {
  .st-main {
    width: auto;
    min-width: 0;
    background: var(--tenpo-bg);
  }

  .st-main > .header {
    display: none;
  }

  .st-main .page-header {
    padding: 16px 20px;
    height: auto;
  }

  .st-main .page-header__title {
    display: none;
  }

  .st-main .page-header__left {
    gap: 24px;
  }

  .st-main .page-header__store {
    display: block;
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: rgba(124, 73, 57, 0.5);
  }

  .menu-fab {
    display: none;
  }

  .st-body {
    padding: 16px 32px 0;
  }

  .st-banner {
    padding: 14px 16px;
  }

  .st-banner__name {
    font-size: 19px;
    line-height: 23px;
  }

  .st-banner__plan {
    display: block;
  }

  .st-groups {
    margin-top: 32px;
  }

  .st-group-set {
    gap: 16px;
  }

  /* タブレットは項目そのものがカードになり2カラムに並ぶ */
  .st-group__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .st-menu {
    display: contents;
  }

  .st-item {
    height: 100%;
    background: var(--color-white);
    border: 1px solid var(--tenpo-beige);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 4px 0 rgba(200, 150, 155, 0.07);
  }

  .st-foot {
    padding: 0 16px 24px;
  }

  .lo-sheet {
    max-width: 390px;
  }

  /* 店舗情報編集：2カラム＋下部の保存バー */
  .se-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    padding: 16px 16px 0;
  }

  .se-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .se-foot {
    grid-column: 1 / -1;
    margin: 0;
    padding: 16px 0 24px;
    flex-direction: row;
    justify-content: flex-end;
    gap: 12px;
  }

  .se-foot .btn {
    width: 169px;
    height: 52px;
  }
}

/* ============================================
   データダウンロード（日報・月報・バックアップ）
   ============================================ */

.dd-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 16px 10px 40px;
}

/* スマホは全カードを縦一列（gap 32）、タブレットは2カラム */
.dd-col {
  display: contents;
}

.dd-card {
  width: 100%;
  max-width: 381px;
}

.dd-card > .card__body {
  align-items: stretch;
  gap: 16px;
  padding: 16px;
}

.dd-card--backup > .card__title {
  background: var(--warn-bg);
}

.dd-desc {
  font-size: 12px;
  color: var(--color-note);
}

.dd-select-row {
  display: flex;
  gap: 10px;
}

.dd-select-row select {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  padding: 10px;
  background: var(--form-light-gray);
  border: 1px solid var(--form-gray);
  border-radius: var(--radius-input);
  font-family: var(--font-jp);
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

.dd-range {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dd-range .ti-datebox {
  flex: 1;
  min-width: 0;
}

.dd-range__sep {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-text);
}

/* 前回ダウンロード日 */
.dd-last {
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dd-last__line {
  height: 0.5px;
  background: var(--form-gray);
}

.dd-last__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  line-height: 18px;
  color: var(--form-dark-gray);
}

.dd-last__row dt {
  font-weight: 500;
}

/* ダウンロードボタン */
.dd-btn-set {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dd-btn {
  width: 100%;
  height: 56px;
  padding: 16px 24px;
  border: none;
  border-radius: var(--radius-card);
  background: var(--form-dark-gray);
  color: var(--color-white);
  font-family: var(--font-jp);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
}

.dd-btn.is-ready {
  background: var(--tenpo-pink-main-500);
  cursor: pointer;
}

.dd-btn b {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.0625em;
}

.dd-btn span {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.dd-note {
  font-size: 11px;
  color: var(--color-note);
}

.dd-note--sub {
  font-size: 12px;
  line-height: 18px;
  color: var(--form-dark-gray);
}

.dd-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 注意バナー */
.dd-warn {
  width: 100%;
  max-width: 381px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-card);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.dd-warn img {
  width: 16px;
  height: 15px;
  flex-shrink: 0;
}

/* タブレット */
@media (min-width: 768px) {
  .dd-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    padding: 16px;
  }

  .dd-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .dd-card,
  .dd-warn {
    max-width: none;
  }
}

/* ============================================
   カルテ初期設定（カルテ項目・カスタムメモ・担当者）
   ============================================ */

.ki-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px 10.5px 0;
}

.ki-card > .card__body {
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.ki-card__title-count {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--tenpo-pink-main-500);
}

/* 項目リスト */
.ki-list {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
}

.ki-section-label {
  padding: 8px 14px 5px;
  font-size: 10px;
  line-height: 14px;
  color: var(--form-dark-gray);
}

.ki-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 10px;
  border-bottom: 1px solid var(--tenpo-beige);
}

.ki-item:last-child {
  border-bottom: none;
}

.ki-item--fixed {
  background: var(--form-light-gray);
  opacity: 0.5;
}

.ki-item__label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text);
}

.ki-badge {
  flex-shrink: 0;
  padding: 1px 7px;
  background: #e8e8e8;
  border-radius: var(--radius-input);
  font-size: 10px;
  line-height: 14px;
  color: var(--form-dark-gray);
}

/* カスタムメモ */
.ki-memo {
  padding: 10px 0;
  border-bottom: 1px solid var(--tenpo-beige);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ki-memo:last-child {
  border-bottom: none;
}

.ki-memo.is-error {
  background: var(--warn-bg);
}

.ki-memo__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}

.ki-drag,
.ki-del {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-jp);
  color: var(--form-dark-gray);
  cursor: pointer;
}

.ki-drag {
  font-size: 16px;
  cursor: grab;
}

.ki-del {
  font-size: 18px;
}

.ki-memo__input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: 8px;
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 16px;
  color: var(--color-text);
}

.ki-memo.is-error .ki-memo__input {
  border-color: var(--err-red);
}

.ki-memo__hint {
  padding: 0 14px 8px 50px;
  font-size: 10px;
  line-height: 12px;
  color: var(--form-dark-gray);
}

.ki-memo.is-error .ki-memo__hint {
  color: var(--err-red);
}

/* 担当者リスト */
.ki-staff-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.ki-staff-locked {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: var(--form-light-gray);
  border: 1px solid var(--form-gray);
  border-radius: var(--radius-card);
  font-size: 14px;
  line-height: 16px;
  color: var(--form-dark-gray);
}

.ki-staff-locked span:first-child {
  flex: 1;
  min-width: 0;
}

.ki-staff-list {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ki-staff-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ki-staff-row input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  background: var(--color-white);
  border: 1px solid var(--tenpo-beige);
  border-radius: 8px;
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 16px;
  color: var(--color-text);
}

.ki-add {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px dashed var(--tenpo-pink-main-500);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.05em;
  color: var(--tenpo-pink-main-500);
  cursor: pointer;
}

/* 保存ボタン */
.ki-foot {
  width: auto;
  margin: 4px -10.5px 0;
  padding: 24px 20px 32px;
  display: flex;
  justify-content: center;
}

.ki-foot .btn {
  width: 362px;
}

/* タブレット */
@media (min-width: 768px) {
  .ki-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    padding: 16px;
  }

  .ki-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ki-foot {
    grid-column: 1 / -1;
    margin: 0;
    padding: 16px 0 24px;
    justify-content: flex-end;
  }

  .ki-foot .btn {
    width: 350px;
    height: 50px;
  }
}