/* ═══════════════════════════════════════════════
   nextpage/review / style.css
   レビューページ
   デザイン言語: Pure White · Helvetica Neue · #1A1A1A
═══════════════════════════════════════════════ */

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

:root {
  --bg:        #FFFFFF;
  --ink:       #282828;
  --ink-mid:   rgba(40, 40, 40, 0.45);
  --ink-faint:  rgba(40, 40, 40, 0.12);
  --font:      "Helvetica Neue", Helvetica, "Raleway", Arial, sans-serif;
  --header-h:  64px;
  --row-pad-v: 22px;
  --row-pad-h: 0px;
  --container-max: 100%;
  --transition: 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

html, body {
  width: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 100;
  letter-spacing: 0.05em;
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════
   HEADER — 右上配置
═══════════════════════════════════════════════ */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 44px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#site-nav {
  display: flex;
  gap: 32px;
}

.nav-link {
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  opacity: 1;
}

.nav-link.disabled {
  opacity: 0.18;
  cursor: default;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   BACKGROUND LOGO — 固定・薄く
═══════════════════════════════════════════════ */
#bg-logo {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#bg-logo img {
  width: clamp(300px, 60vw, 780px);  /* 1.5倍拡大 */
  height: auto;
  opacity: 0.04;
  /* filter なし: 元の色味を維持 */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ═══════════════════════════════════════════════
   LOADER
═══════════════════════════════════════════════ */
#loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease;
}

#loader span {
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.35;
}

#loader.hidden {
  opacity: 0;
  pointer-events: none;
}

#loader.gone {
  display: none;
}

/* ═══════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════ */
#main-content {
  position: relative;
  z-index: 1;
  padding-top: var(--header-h);
  min-height: 100vh;
}

#review-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 56px 56px 80px;
}

/* ═══════════════════════════════════════════════
   REVIEW HEADER
═══════════════════════════════════════════════ */
#review-header {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ink-faint);
}

#review-header h1 {
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.9;
}

#review-count {
  font-size: 10px;
  font-weight: 100;
  letter-spacing: 0.2em;
  color: var(--ink-mid);
}

/* ═══════════════════════════════════════════════
   REVIEW LIST
═══════════════════════════════════════════════ */
#review-list {
  /* rows が直接入る */
}

/* ═══════════════════════════════════════════════
   REVIEW ROW (collapsed)
═══════════════════════════════════════════════ */
.review-row {
  border-bottom: 1px solid var(--ink-faint);
  cursor: pointer;
}

.review-row-header {
  display: grid;
  grid-template-columns: 160px 200px 160px 1fr;
  gap: 0 24px;
  align-items: center;
  padding: var(--row-pad-v) 0;
  transition: opacity 0.2s ease;
}

.review-row:hover .review-row-header {
  opacity: 0.7;
}

/* 各カラムタイトル */
.col-label {
  font-size: 9px;
  font-weight: 100;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 4px;
}

/* フィールドの値 */
.col-value {
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* コメント列は残り幅をすべて使う（値スタイルは .col-value で共通） */
.col-comment {
  min-width: 0;  /* grid 子要素のオーバーフロー防止 */
}

/* ═══════════════════════════════════════════════
   REVIEW ROW BODY (expanded / accordion)
═══════════════════════════════════════════════ */
.review-row-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition), opacity var(--transition), padding var(--transition);
  opacity: 0;
  padding-bottom: 0;
}

.review-row.open .review-row-body {
  max-height: 600px;     /* 十分大きい値 */
  opacity: 1;
  padding-bottom: 28px;
}

/* ボディ: ヘッダーと完全に同じ 4列グリッドで揃える
   NAME(160px) COUNTRY(200px) CITY(160px) COMMENT(1fr) */
.review-body-inner {
  display: grid;
  grid-template-columns: 160px 200px 160px 1fr;
  gap: 0 24px;
  padding-top: 12px;
  min-width: 0;
}



.user-data-item {}

.user-data-label {
  font-size: 9px;
  font-weight: 100;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 3px;
}

.user-data-value {
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* COMMENT列 — レビュー全文 */
.review-text {
  grid-column: 4;        /* ヘッダーのCOMMENT列と同じ位置 */
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: var(--ink);
  opacity: 0.85;
  white-space: pre-wrap;
  word-break: break-word;
  min-width: 0;
}

/* ═══════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════ */
#review-empty {
  padding: 80px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

/* ═══════════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  #site-header {
    padding: 0 24px;
  }

  #review-container {
    padding: 40px 24px 64px;
  }

  .review-row-header {
    grid-template-columns: 110px 120px 1fr;
    gap: 12px 16px;
  }

  /* モバイルではコメント列を非表示 */
  .col-comment {
    display: none;
  }

  .review-body-inner {
    grid-template-columns: 1fr;  /* SP: 1列 */
    gap: 20px;
  }

  /* SP: grid-column をリセットしてフル幅で表示 */
  .review-text {
    grid-column: 1;
  }
}