/* NIAU（ニアウ）試作版スタイル */

:root {
  --coral: #FF6B4A;
  --coral-soft: #FFF1EE;
  --ink: #16161A;
  --sub: #707070; /* 白背景で4.5:1以上になる濃さ(元は#8A8A8Aで約3.45:1だった) */
  --line: #F0F0F0;
  --bg: #FAFAFA;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: #E9E9EC;
  font-family: 'Noto Sans JP', sans-serif;
  word-break: auto-phrase;
}

/* WebKitはword-break:auto-phrase未対応で文節の途中で折り返るため、コツ文・キャプション・
   説明文・結果の文にはBudouXで入れた<wbr>(index.htmlのNIAU_JA)と組み合わせてここで折り返す。
   overflow-wrap:anywhereはBudouXを読み込めなかった時(CDN遮断など)にはみ出さないための安全弁。 */
.ja-wrap { word-break: keep-all; overflow-wrap: anywhere; }

button, input, textarea { font-family: inherit; }

/* ---------- スマホ枠 ---------- */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.phone-frame {
  width: 390px;
  height: 844px;
  max-height: 92vh;
  border-radius: 42px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .04);
  background: #fff;
  position: relative;
}

@media (max-width: 480px) {
  html, body { background: #fff; }
  .phone-frame {
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}

.app {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--ink);
  overflow: hidden;
}

[hidden] { display: none !important; }

/* ---------- 共通 ---------- */
.icon { width: 22px; height: 22px; display: block; }
.icon-lg { width: 34px; height: 34px; }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list.scrollable {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.chip-list.scrollable::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  border: 1.5px solid #e6e6e6;
  background: #fff;
  color: #3a3a3a;
  font-size: 13px;
  font-weight: 500;
  border-radius: 20px;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.chip .tag { color: #b0b0b0; font-size: 11px; margin-left: 4px; }
.chip.selected { background: var(--coral); border-color: var(--coral); color: #fff; font-weight: 700; }
.chip.selected .tag { color: rgba(255, 255, 255, .85); }
.chip.small { padding: 6px 12px; font-size: 12.5px; }
/* さがす画面の先頭チップ「わたしの悩み」。オンボーディング/マイページで選んだ悩みをまとめて絞り込む */
.chip.chip-mine { border-color: var(--coral); color: var(--coral); font-weight: 700; }
.chip.chip-mine.selected { color: #fff; }
.chip.chip-disabled { opacity: .4; cursor: not-allowed; }

.btn-primary {
  width: 100%;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 15px;
  font-size: 15px;
  font-weight: 700;
  margin-top: 22px;
  cursor: pointer;
}
.btn-primary:disabled { background: #dddddd; color: #9b9b9b; cursor: not-allowed; }
.btn-primary.ready { background: var(--coral); }

.screen-title { font-size: 18px; font-weight: 800; margin: 4px 0 16px; }
.section-title { font-size: 14.5px; font-weight: 800; margin: 20px 2px 10px; }
.field-label { font-size: 12.5px; color: var(--sub); font-weight: 600; margin: 18px 2px 8px; }
.filter-label { font-size: 12px; color: var(--sub); font-weight: 600; margin: 12px 2px 8px; }
.empty-note { font-size: 12.5px; color: #bbb; text-align: center; padding: 30px 0; }

/* ---------- 画像フォールバック ---------- */
.media { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f2f2f2; }
.media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.media.fallback img { display: none; }
.media-fallback {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: rgba(255, 255, 255, .95);
}
.media.fallback .media-fallback { display: flex; }
.media-fallback svg { width: 42%; opacity: .95; }
.media-fallback span { font-size: 10.5px; font-weight: 600; background: rgba(0, 0, 0, .2); padding: 3px 9px; border-radius: 20px; }

/* ---------- オンボーディング ---------- */
.onboarding {
  position: absolute; inset: 0; z-index: 40; background: #fff;
  display: flex; flex-direction: column; padding: 0 22px 30px; overflow-y: auto;
}
.onboarding-notice { font-size: 11px; color: #c2c2c2; text-align: center; padding: 16px 0 0; }
.onboarding-step { flex: 1; display: flex; flex-direction: column; padding-top: 36px; }
.ob-kicker { font-size: 12px; color: var(--coral); font-weight: 700; margin: 0 0 10px; }
.ob-title { font-size: 25px; font-weight: 900; line-height: 1.45; margin: 0 0 8px; }
.ob-sub { font-size: 13px; color: var(--sub); margin: 0 0 22px; }
.ob-chip-list { align-content: flex-start; max-height: 48vh; overflow-y: auto; padding-bottom: 8px; }
.ob-height-row { display: flex; align-items: baseline; gap: 8px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-top: 10px; }
#ob-height-input { border: none; outline: none; font-size: 36px; font-weight: 800; width: 130px; color: var(--ink); }
.ob-height-unit { font-size: 16px; color: #777; }

/* ---------- ヘッダー ---------- */
.topbar { flex: 0 0 auto; border-bottom: 1px solid var(--line); background: #fff; position: relative; z-index: 5; }
.notice-bar { font-size: 10.5px; color: #c2c2c2; text-align: center; padding: 8px 10px 2px; }
.topbar-row { display: flex; align-items: center; justify-content: center; padding: 2px 16px 10px; }
.logo { font-family: 'Caveat', cursive; font-weight: 700; font-size: 34px; color: var(--coral); letter-spacing: .5px; }

/* ---------- 画面コンテナ ---------- */
.screens { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg); position: relative; }
.screen { padding: 14px 14px 100px; }

/* ---------- ホーム：ストーリー ---------- */
.stories-rail { padding: 10px 0 2px; }
.stories-caption { font-size: 12px; color: var(--sub); font-weight: 600; margin: 0 2px 10px; }
.stories-row { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none; }
.stories-row::-webkit-scrollbar { display: none; }
.story { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; width: 64px; }
.story-ring { width: 60px; height: 60px; border-radius: 50%; padding: 2.5px; background: #e9e9e9; }
.story-ring.match { background: linear-gradient(135deg, var(--coral), #ffc3af); }
.story-ring .media { width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; }
.story-name { font-size: 11px; color: #4a4a4a; max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- ホーム：フィード ---------- */
.feed { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
.post-head .media { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; }
.post-headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.post-name-row { display: flex; align-items: center; gap: 6px; }
.post-name { font-size: 13px; font-weight: 700; }
.height-badge { font-size: 10.5px; background: #f3f3f3; color: #555; border-radius: 20px; padding: 2px 8px; font-weight: 600; }
.post-handle { font-size: 11.5px; color: #a3a3a3; }
.post-photo-wrap { position: relative; width: 100%; aspect-ratio: 4 / 5; background: #f2f2f2; }
.cover-chip-row { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; max-width: 90%; }
.cover-chip { background: rgba(255, 255, 255, .94); font-size: 11px; padding: 5px 10px; border-radius: 20px; font-weight: 700; color: var(--ink); }
.cover-chip .arrow { color: var(--coral); margin: 0 2px; }
.same-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px 0; }
.same-tag { font-size: 10.5px; color: var(--coral); background: var(--coral-soft); border-radius: 20px; padding: 3px 9px; font-weight: 700; }
.post-actions { display: flex; align-items: center; gap: 12px; padding: 10px 12px 0; }
.action-btn { display: flex; align-items: center; background: none; border: none; padding: 4px; color: var(--ink); cursor: pointer; line-height: 0; position: relative; }
/* 見た目のアイコン(23px)は変えず、当たり判定だけ中央揃えの透明領域で44x44px以上に広げる */
.action-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.action-btn svg { width: 23px; height: 23px; }
.action-btn.active { color: var(--coral); }
.want-btn {
  margin-left: auto; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
  border: none; border-radius: 20px; padding: 8px 14px; display: flex; align-items: center; gap: 5px; cursor: pointer;
}
.want-btn svg { width: 14px; height: 14px; }
.want-btn.active { background: var(--coral); }
.post-likes { font-size: 12.5px; font-weight: 700; padding: 8px 12px 0; }
.post-caption { font-size: 13px; padding: 5px 12px 0; line-height: 1.6; }
.post-caption .cap-name { font-weight: 700; margin-right: 6px; }
.post-hashtags { font-size: 12.5px; color: var(--coral); padding: 2px 12px 12px; line-height: 1.6; }

/* ---------- さがす ---------- */
.search-bar { display: flex; align-items: center; gap: 8px; background: #f1f1f1; border-radius: 14px; padding: 10px 12px; margin-bottom: 6px; }
.search-bar input { border: none; background: none; outline: none; font-size: 14px; flex: 1; }
.search-bar .icon { color: #9a9a9a; width: 19px; height: 19px; flex: 0 0 auto; }
.filter-row { display: flex; gap: 8px; margin: 8px 0; overflow-x: auto; }
.filter-group { display: flex; gap: 8px; }
.result-count { font-size: 12px; color: var(--sub); margin: 14px 2px 10px; }

/* ---------- さがす：悩みのコツ ---------- */
.tips-box { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; }
.tips-box:empty { margin: 0; }
.tips-box-title { font-size: 12px; font-weight: 800; color: var(--sub); margin: 2px 2px 0; }
.tip-card { background: #fff8f6; border: 1px solid #ffe2d8; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.6; color: #4a4a4a; }
.tip-card .tip-source { display: inline-block; margin-top: 6px; font-size: 10.5px; color: var(--coral); text-decoration: none; font-weight: 700; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.grid-item { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #f2f2f2; cursor: pointer; }
.grid-badge { position: absolute; left: 5px; bottom: 5px; font-size: 10px; background: rgba(255, 255, 255, .92); padding: 2px 7px; border-radius: 10px; font-weight: 700; z-index: 2; }

/* ---------- 投稿 ---------- */
.photo-drop {
  width: 100%; aspect-ratio: 4 / 5; max-height: 280px; border: 1.6px dashed #d8d8d8; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: #aaa; background: #fafafa; font-size: 13px; font-weight: 600;
}
.photo-drop-btn { border: none; cursor: pointer; width: 100%; }
#post-tip-input {
  width: 100%; border: 1.6px solid #ececec; border-radius: 12px; padding: 12px; font-size: 13.5px;
  resize: none; outline: none;
}
#post-tip-input:focus { border-color: var(--coral); }

/* ---------- 似た体型 ---------- */
.privacy-note { font-size: 12px; color: var(--sub); margin: -6px 0 18px; }
.match-intro { display: flex; flex-direction: column; gap: 18px; padding-top: 2px; }
.match-intro .photo-drop { max-height: 260px; }
.match-analyzing { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 52vh; color: #8a8a8a; font-size: 13px; }
.spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid #eee; border-top-color: var(--coral); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.estimate-card { background: #fff8f6; border: 1px solid #ffe2d8; border-radius: 16px; padding: 14px 16px; margin-bottom: 8px; }
.estimate-row { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 0; border-bottom: 1px dashed #ffe2d8; }
.estimate-row:last-child { border-bottom: none; }
.estimate-label { color: #7a7a7a; }
.estimate-value { font-weight: 700; color: var(--coral); }
.estimate-note { font-size: 11.5px; color: #a68a85; margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed #ffe2d8; line-height: 1.6; }

/* ---------- 似た体型：写真を選ぶ前の案内 ---------- */
.match-howto { display: flex; flex-direction: column; gap: 10px; }
.match-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #4a4a4a; }
.match-step-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--coral-soft); color: var(--coral);
  font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.match-sample { opacity: .55; pointer-events: none; border: 1px dashed #e4e4e4; border-radius: 14px; padding: 10px 12px; }
.match-sample-label { font-size: 11px; color: #aaa; font-weight: 700; margin: 0 0 8px; }
.match-sample-rows { display: flex; flex-direction: column; gap: 7px; }
.match-sample-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #999; }
.match-sample-num { width: 14px; font-weight: 800; color: #ccc; }
.match-sample-dot { width: 26px; height: 26px; border-radius: 50%; background: #ececec; flex: 0 0 auto; }
.match-sample-name { flex: 1; }
.match-sample-score { font-weight: 800; color: #ccc; }

/* ---------- 似た体型：測れなかったとき ---------- */
.match-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 48vh; text-align: center; padding: 0 8px; }
.match-error p { font-size: 13px; color: #6a6a6a; margin: 0; line-height: 1.6; }
.match-error-tips { color: #9a9a9a !important; font-size: 12px !important; }
.match-error .btn-primary { margin-top: 12px; width: auto; padding: 12px 28px; }
.match-ranking { display: flex; flex-direction: column; gap: 10px; }
.rank-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; cursor: pointer; }
.rank-num { font-size: 14px; font-weight: 800; color: #cfcfcf; width: 16px; text-align: center; flex: 0 0 auto; }
.rank-item .media { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-size: 13px; font-weight: 700; }
.rank-sub { font-size: 11.5px; color: #9a9a9a; margin-top: 2px; }
.rank-score { font-size: 13px; font-weight: 800; color: var(--coral); flex: 0 0 auto; }

/* ---------- マイページ ---------- */
.me-profile { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 0 4px; }
.me-avatar {
  width: 72px; height: 72px; border-radius: 50%; background: var(--coral); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px;
  letter-spacing: 1px; margin-bottom: 14px; font-family: 'Caveat', cursive; font-size: 20px;
}
.me-profile .field-label { text-align: center; }
/* マイページの「気になるところ」は選んだものだけ色をつけ、選んでいないものは薄くする */
#me-complex-chips .chip:not(.selected) { opacity: .4; }
.want-list { display: flex; flex-direction: column; gap: 10px; }

/* ---------- 詳細シート ---------- */
.sheet-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); z-index: 48; }
.detail-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; background: #fff;
  border-radius: 22px 22px 0 0; z-index: 49; display: flex; flex-direction: column;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .18);
}
.sheet-handle { width: 36px; height: 4px; background: #e4e4e4; border-radius: 3px; margin: 10px auto 0; flex: 0 0 auto; }
.sheet-close {
  position: absolute; top: 10px; right: 12px; background: #f2f2f2; border: none; width: 30px; height: 30px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #444; cursor: pointer; z-index: 2;
}
/* 見た目の円(30px)は変えず、当たり判定だけ中央揃えの透明領域で44x44px以上に広げる */
.sheet-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.sheet-close svg { width: 15px; height: 15px; }
.sheet-content { overflow-y: auto; padding: 8px 16px calc(30px + env(safe-area-inset-bottom)); }
.sheet-photo { width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #f2f2f2; margin-bottom: 14px; }
.sheet-person { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sheet-person .media { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; }
.sheet-person-name { font-size: 14px; font-weight: 700; }
.sheet-person-sub { font-size: 12px; color: #9a9a9a; margin-top: 2px; }
.sheet-block { margin-bottom: 18px; }
.sheet-block-title { font-size: 12px; font-weight: 800; color: var(--sub); margin-bottom: 8px; letter-spacing: .3px; }
.sheet-item-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid #f4f4f4; }
.sheet-item-row:last-child { border-bottom: none; }
.sheet-item-kind { color: #9a9a9a; flex: 0 0 auto; }
.tip-row { display: flex; gap: 8px; font-size: 12.5px; padding: 9px 10px; background: #fafafa; border-radius: 10px; margin-bottom: 6px; align-items: flex-start; }
.tip-complex { flex: 0 0 auto; font-weight: 700; color: var(--coral); font-size: 11.5px; background: var(--coral-soft); padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.want-btn-large {
  width: 100%; background: var(--ink); color: #fff; border: none; border-radius: 16px; padding: 14px;
  font-size: 14.5px; font-weight: 800; margin: 4px 0 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.want-btn-large svg { width: 17px; height: 17px; }
.want-btn-large.active { background: var(--coral); }
.sheet-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

/* ---------- 下タブ ---------- */
.tabbar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-around;
  border-top: 1px solid var(--line); background: #fff; padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  position: relative; z-index: 6;
}
.tab-btn { background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #bbbbbb; font-size: 10.5px; padding: 4px 8px; cursor: pointer; min-width: 44px; min-height: 44px; }
.tab-btn.active { color: var(--ink); font-weight: 700; }
.tab-btn.active .icon { color: var(--coral); }
.tab-btn.tab-post {
  background: var(--coral); color: #fff; width: 42px; height: 42px; border-radius: 50%;
  justify-content: center; margin-top: -20px; box-shadow: 0 6px 14px rgba(255, 107, 74, .45);
  position: relative; min-width: 0; min-height: 0; /* 見た目の円(42px)を保つため.tab-btnのmin幅/高さを打ち消す */
}
.tab-btn.tab-post .icon { width: 22px; height: 22px; color: #fff; }
/* 見た目の円(42px)は変えず、当たり判定だけ中央揃えの透明領域で44x44pxに広げる */
.tab-btn.tab-post::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }

/* ---------- トースト ---------- */
.toast {
  position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; padding: 11px 20px;
  border-radius: 30px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 70; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }