/* CSS１本化　base.css(前のほう）追加　r071201 */

/* 全体の基本スタイル（スマホ基準） */
body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;      /* スマホで読みやすい基準 */
    line-height: 1.6;
    background: #f8f8f8;
}

/* ページのメイン幅 */
.main-container {
    max-width: 700px;      /* スマホでは画面いっぱい、PCでは細めのカラム */
    margin: 0 auto;
    padding: 12px 16px;
    box-sizing: border-box;
}

.fadein-container {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.6s ease-out, transform 1.6s ease-out;
}

body.loaded .fadein-container {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
}

  /* 既存のwelcome-box用 */
.welcome-box {
    display:inline-block;
    padding: 30px 40px;
    background: #faf7f2;
    border: 1px solid #e8e3dc;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    /* line-height: 1.9;  以下追加 r071201 */
    text-align: center;
    margin: 4px 0;
    line-height: 1.2;     /* ★ 行間をキュッと */
}

.welcome-name {
    font-size: 16px;      /* 少しだけ小さめ */
    margin: 2px 0 0;        /* 上下の余白を詰める */
}

.welcome-id {
    font-size: 13px;
    color: #666;
    margin: 0;            /* 余白ゼロでコンパクト */
}

.soji-float-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: #f5f1e8;
    border: 1px solid #e0d9cf;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    text-decoration: none;
    color: #555;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    opacity: 0;
    pointer-events: none;   /* ← 最初は押せない */
    transition: 0.6s ease;
    z-index: 9999;
}

/*                  r071127追加　*/
.welcome-outer {
    display: flex;
    justify-content: center; /* 中央揃え */
    width: 100%;
}

.welcome-card {
    max-width: 480px;
    margin: 0 auto; /* 中央 */
    text-align: center;
}



/* ナビバー全体 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* 左側（タイトル＋ハンバーガー） */
.nav-left {
  display: flex;
  align-items: center;
}

/* タイトル */
.nav-title {
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
}

/* ハンバーガー */
.nav-toggle {
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  user-select: none;
  display: none; /* PCでは非表示（@mediaで出す） */
}


/* まず最初に nav-links の基本（PCもスマホも共通） */
.nav-links {
    display: flex;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 600px) {
  .nav-links {
      display: none;
      flex-direction: column;
      gap: 8px;

      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.08);

      position: static;   /* ← ここ重要！ relative をやめる */
      width: 100%;
      margin-top: 8px;
  }

  .nav-links.show {
      display: flex;
  }
}

@media (max-width: 700px) {
    .nav-toggle {
        display: block;
    }

    .loggedin.navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .loggedin .nav-left {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .loggedin .nav-links {
      display: none;
      flex-direction: column;
      width: 100%;
      margin-top: 8px;
      background: #ffffff;
      border-radius: 10px;
      padding: 10px 14px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      position: static;
  }

  .loggedin .nav-links.show {
      display: flex;
  }
}

.fadein {
    opacity: 0;
    transform: translateY(12px);
    animation: fadeInMove 0.6s ease forwards;
}

@keyframes fadeInMove {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -----------------------------
   やわらか切手風プロフィール写真
------------------------------*/
.stamp-wrapper {
    text-align: center;
    margin-top: 15px;
}

.stamp-photo {
    width: 150px;
    height: 150px;
    object-fit: cover;

    /* 白枠で切手感 */
    border: 6px solid #fff;
    background: #fff;

    /* 影はやわらかめ */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);

    /* 切手のギザギザを柔らかく — 可愛いやつ */
    clip-path: polygon(
      10% 0%, 20% 5%, 30% 0%, 40% 5%, 50% 0%,
      60% 5%, 70% 0%, 80% 5%, 90% 0%,
      100% 10%, 95% 20%, 100% 30%, 95% 40%,
      100% 50%, 95% 60%, 100% 70%, 95% 80%,
      100% 90%, 90% 100%, 80% 95%, 70% 100%,
      60% 95%, 50% 100%, 40% 95%, 30% 100%,
      20% 95%, 10% 100%, 0% 90%, 5% 80%,
      0% 70%, 5% 60%, 0% 50%, 5% 40%,
      0% 30%, 5% 20%, 0% 10%
    );

    /* 少し丸みを足して柔らかくする */
    border-radius: 3px;
}

.myroom-container {
    width: 90%;
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    padding-top: 20px;
}

.display-name {
    font-size: 22px;
    margin: 10px 0 5px;
}

.tomo-id {
    font-size: 14px;
    opacity: 0.7;
}

.memo-text {
    font-size: 15px;
    margin: 10px 0 20px;
    line-height: 1.6;
}

.myroom-links p {
    margin: 12px 0;
    font-size: 16px;
}





/* 共通封筒デザイン */
.letter-box {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* クリーム封筒（公開） */
.cream-box {
    background: #fffaf2;
    border: 2px solid #e0c9a0;
}

/* 水色封筒（DM） */
.blue-box {
    background: #edf6ff;
    border: 2px solid #a7c8e8;
}

.letter-header { font-size: 18px; }
.letter-body { margin: 15px 0; font-size: 16px; }
.letter-footer { font-size: 14px; color: #666; }


/* 便箋のふわ〜効果 */
.fadein-paper {
    /* animation: fadeInPaper 0.7s ease-out; */
    animation: fadeInPaper 1s ease-out;
}

@keyframes fadeInPaper {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 便箋っぽい紙の雰囲気（必須ではないよ） */
.letter-container {
    background: #fffdf8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}