/* =========================================================
   りまっぷ 紹介サイト
   Figma: web_screen_design (946:10394)
   ========================================================= */

:root {
  --yellow: #FFDD00;
  --brown: #823C29;
  --black: #2C2C2C;

  --glass: rgba(255, 255, 255, 0.4);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --glass-weak: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 7.948px 39.741px rgba(182, 119, 68, 0.2);
  /* PC で並べた画面を枠なし・影だけで浮かせるための影 */
  --phone-shadow: 0 8px 40px rgba(182, 119, 68, 0.2);

  --shell-max: 390px;
  --shell-pad: 24px;
  --header-h: 64px;
  --header-top: 16px;

  --font-title: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN",
                "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", YuGothic, "Yu Gothic", sans-serif;

  --fade: 300ms;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--yellow);
  color: var(--brown);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

p, h1 { margin: 0; }

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* ---------------------------------------------------------
   Header  (スクロールしても上部に留まる)
   --------------------------------------------------------- */
.header-wrap {
  position: sticky;
  top: 0;
  z-index: 30;
  padding-top: calc(var(--header-top) + env(safe-area-inset-top, 0px));
  /* ピルの上は地の黄色で塞ぎ、ピルの背後は薄いベールを敷いて
     スクロールしてきたコンテンツがガラス越しにうっすら透ける状態にする */
  background: linear-gradient(
    to bottom,
    var(--yellow) 0,
    var(--yellow) calc(var(--header-top) + env(safe-area-inset-top, 0px)),
    rgba(255, 221, 0, 0.82) calc(var(--header-top) + env(safe-area-inset-top, 0px)),
    rgba(255, 221, 0, 0.82) 100%
  );
}

.shell--header { position: relative; }

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--header-h);
  padding: 16px 20px 16px 24px;
  border-radius: 100px;
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.icon-btn,
.brand {
  display: block;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms ease, opacity 150ms ease;
}

.icon-btn:active,
.brand:active { transform: scale(0.9); }

.icon-btn img,
.brand img { width: 32px; height: 32px; }

.brand img {
  border-radius: 8.348px;
  object-fit: cover;
}

/* ---- Header > icon/menu > menu_padding ---- */
.menu-padding {
  position: absolute;
  top: 100%;
  left: var(--shell-pad);
  width: 240px;
  max-width: calc(100% - var(--shell-pad) * 2);
  padding-top: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--fade) ease,
              transform var(--fade) ease,
              visibility 0s linear var(--fade);
}

.menu-padding.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--fade) ease,
              transform var(--fade) ease,
              visibility 0s;
}

.menu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--glass-shadow);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--brown);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.menu-item + .menu-item { border-top: 1px solid var(--brown); }

.menu-item img { flex: 0 0 auto; width: 32px; height: 32px; }

.menu-item:active { background: rgba(255, 255, 255, 0.35); }

/* ---------------------------------------------------------
   Views
   --------------------------------------------------------- */
#main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.view {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 24px;
  opacity: 0;
  transition: opacity var(--fade) ease;
}

.view[hidden] { display: none; }

.view.is-shown { opacity: 1; }

/* ---- PageTitle ---- */
.page-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  color: var(--brown);
  word-break: break-word;
}

.page-title h1 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(24px, 7.2vw, 28px);
  line-height: 1.5;
}

.page-title__sub {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(14px, 4.1vw, 16px);
  line-height: 1.5;
}

/* ---------------------------------------------------------
   TOP
   --------------------------------------------------------- */
.view--top {
  /* 画面が高いときも間延びしないよう、まとまりごと中央に置く */
  justify-content: center;
  gap: clamp(24px, 5vh, 48px);
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.notification-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.illustration {
  width: 100%;
  overflow: hidden;
}

.illustration img {
  width: 100%;
  aspect-ratio: 342 / 230;
  height: auto;
}

/* ---- Notification - Collapsed ---- */
.notification {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9.935px;
  width: 100%;
  padding: 15.896px;
  border-radius: 23.845px;
  background: var(--glass-strong);
  box-shadow: var(--glass-shadow);
}

.notification__icon {
  flex: 0 0 auto;
  width: 38.085px;
  height: 38.085px;
}

.notification__icon img {
  width: 38.085px;
  height: 38.085px;
  border-radius: 9.935px;
  object-fit: cover;
}

.notification__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 9.935px;
}

.notification__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4.968px;
  color: var(--black);
  font-size: 14.903px;
  letter-spacing: -0.2285px;
  word-break: break-word;
}

.notification__title {
  font-weight: 600;
  line-height: 16.89px;
}

.notification__desc {
  font-weight: 400;
  line-height: 1.5;
}

.notification__time {
  flex: 0 0 auto;
  color: #4D4D4D;
  font-size: 14.81px;
  font-weight: 400;
  line-height: 16.781px;
  white-space: nowrap;
}

/* ---- appstore-badge ---- */
.badge {
  display: block;
  align-self: center;
  width: 167.53px;
  max-width: 100%;
  transition: transform 150ms ease;
}

.badge:active { transform: scale(0.96); }

.badge img {
  width: 100%;
  aspect-ratio: 167.53 / 56;
  height: auto;
}

/* ---------------------------------------------------------
   UPDATE_LIST
   --------------------------------------------------------- */
.view--list { justify-content: flex-start; }

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

.card-todo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  padding: 24px;
  border-radius: 16px;
  background: var(--card-bg);
}

.card-todo__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  color: var(--card-fg);
  white-space: nowrap;
}

.card-todo__title {
  font-weight: 700;
  font-size: clamp(22px, 6.7vw, 26px);
  line-height: 1.2;
}

.card-todo__status {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
}

/* gradient(width:30%) — 右端で文字をフェードさせる */
.card-todo__fade {
  position: absolute;
  inset: 0 0 0 auto;
  width: 30%;
  background: linear-gradient(
    to left,
    var(--card-bg) 52.404%,
    color-mix(in srgb, var(--card-bg) 64%, transparent) 74.038%,
    color-mix(in srgb, var(--card-bg) 0%, transparent) 100%
  );
  pointer-events: none;
}

.card-todo__check {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--glass-weak);
}

/* ---------------------------------------------------------
   BUG_REPORT
   --------------------------------------------------------- */
.view--bug { justify-content: center; }

.bug-form {
  /* 画面が高すぎるときに入力欄が間延びしないよう上限を設ける */
  position: relative;
  flex: 1 1 auto;
  max-height: 620px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 0;
}

.text-input {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 240px;
  padding: 32px;
  border-radius: 16px;
  background: var(--glass-weak);
}

.text-input textarea {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 176px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--brown);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
}

.text-input__placeholder {
  position: absolute;
  inset: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.3;
  color: var(--brown);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.text-input.is-filled .text-input__placeholder { opacity: 0; }

.submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 36px;
  border: 0;
  border-radius: 100px;
  background: var(--glass-strong);
  box-shadow: 0 0 22px rgba(201, 195, 189, 0.4);
  color: #000;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 150ms ease, transform 150ms ease;
}

.submit-button:active:not(:disabled) { transform: scale(0.98); }

.submit-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.submit-button.is-sending {
  opacity: 0.6;
  cursor: progress;
}

/* ボット対策のハニーポット。レイアウトに影響させずに画面外へ逃がす */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.form-error {
  color: var(--brown);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* ---------------------------------------------------------
   Toast
   --------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  /* 送信ボタン（画面下端）に重ならない高さ */
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 24px;
  border-radius: 100px;
  background: #fff;
  filter: drop-shadow(0 0 11px rgba(201, 195, 189, 0.4));
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity var(--fade) ease,
              transform var(--fade) ease,
              visibility 0s linear var(--fade);
}

.toast.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--fade) ease,
              transform var(--fade) ease,
              visibility 0s;
}

.toast img { width: 20px; height: 14.666px; }

/* ---------------------------------------------------------
   細かい調整
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* color-mix 非対応ブラウザ向けフォールバック（フェードなしのベタ塗りは避ける） */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .card-todo__fade { display: none; }
}

/* ---------------------------------------------------------
   PC（3画面を横並び）
   スマホが3台並んでいるように、TOP / UPDATE_LIST / BUG_REPORT を
   同時に見せる。枠は付けず、影だけで浮かせる。
   ブレークポイントは app.js の wideMQ と揃えること。
   --------------------------------------------------------- */
@media (min-width: 1120px) {
  :root {
    --shell-max: 1282px;   /* 390px * 3 + gap 24px * 2 + padding 32px * 2 */
    --shell-pad: 32px;
    --phone-gap: 24px;
  }

  /* ---- Header ---- */
  /* 3画面とも見えていてメニュー（＝画面切り替え）が要らないので、
     PC ではヘッダーごと出さない。ダウンロード導線は TOP のバッジが担う */
  .header-wrap { display: none; }

  /* ---- 3画面の横並び ---- */
  #main {
    /* 縦は伸ばさず、余白で中央に置く（画面が高くても間延びさせない） */
    flex: 0 1 auto;
    margin-block: auto;
    flex-direction: row;
    align-items: stretch;   /* 3台とも同じ高さに揃える */
    justify-content: center;
    gap: var(--phone-gap);
    min-height: min(760px, calc(100dvh - 96px));
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .view {
    flex: 1 1 0;
    min-width: 0;
    max-width: 390px;
    padding: 32px 24px 40px;
    border-radius: 40px;
    background: var(--yellow);
    box-shadow: var(--phone-shadow);
    /* 横並びのときは JS の切り替えを使わないので常に表示 */
    opacity: 1;
  }

  /* 高さは3台まとめて揃えるので、入力欄側の上限は外してよい */
  .bug-form { max-height: none; }
}

/* ---------------------------------------------------------
   マウス操作向けのホバー
   --------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover,
  .brand:hover { opacity: 0.7; }

  .menu-item:hover { background: rgba(255, 255, 255, 0.35); }

  .badge:hover { transform: scale(1.03); }

  .submit-button:hover:not(:disabled) { background: #fff; }
}