/* ============================================================
   profile.css — プロフィール詳細ページ用
   lp.css / mascots.css を継承（8bit × ミニマル）
   ============================================================ */

/* ページ全体（スマホ縦長を中央に） */
.page-wrap {
  min-height: 100vh;
  background:
    repeating-linear-gradient(to bottom, oklch(0.92 0.012 85) 0 1px, transparent 1px 26px),
    oklch(0.94 0.012 85);
  display: flex; justify-content: center;
  padding: 0;
}
.page-phone {
  width: 100%; max-width: 420px;
  background: var(--cream);
  box-shadow: 0 0 0 1px var(--line), 0 18px 50px rgba(0,0,0,.08);
  min-height: 100vh;
}

/* 上部ナビ（← もどる） */
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 18px 14px;
}
.backlink {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: "DotGothic16", sans-serif; font-size: 15px;
  color: var(--ink); text-decoration: none; letter-spacing: .03em;
}
.backlink:hover { color: var(--sage-d); }
.backlink .arr { font-size: 16px; }

/* セクション見出し（PROFILE / HISTORY など） */
.p-sec {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
}
.p-sec .en {
  font-family: "DotGothic16", sans-serif; font-size: 13.5px;
  letter-spacing: .14em; color: var(--sage-d);
}
.p-sec .ja {
  font-family: "DotGothic16", sans-serif; font-size: 17px; color: var(--ink);
}
.p-sec .rule { flex: 1; height: 2px; background: var(--line); }

/* 本文 */
.p-body {
  font-size: 16px; line-height: 2.0; color: var(--ink);
  text-wrap: pretty;
}
.p-body + .p-body { margin-top: 14px; }
.p-body .em { color: var(--sage-d); font-weight: 700; }

/* ヘッダ：パンダ＋名前 */
.p-hero {
  text-align: center; padding: 8px 0 4px;
}
.p-hero .role {
  font-family: "DotGothic16", sans-serif; font-size: 12.5px;
  color: var(--ink-soft); letter-spacing: .16em;
}
.p-hero .name {
  font-family: "DotGothic16", sans-serif; font-size: 26px;
  color: var(--ink); margin: 8px 0 2px;
}

/* 写真枠 */
.photo-frame { display: block; }
.photo-cap {
  font-family: "DotGothic16", sans-serif; font-size: 12.5px;
  color: var(--ink-soft); text-align: center; margin-top: 8px; letter-spacing: .04em;
}

/* ============================================================
   年表（これまでの歩み）
   ============================================================ */
.timeline { position: relative; padding-left: 4px; }
.tl-row {
  display: grid; grid-template-columns: 16px 1fr; gap: 14px;
  padding-bottom: 22px; position: relative;
}
.tl-row:last-child { padding-bottom: 0; }
/* 縦のドット線 */
.tl-rail { position: relative; }
.tl-rail::before {
  content: ""; position: absolute; left: 6px; top: 4px; bottom: -22px;
  width: 3px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 8px);
}
.tl-row:last-child .tl-rail::before { display: none; }
.tl-node {
  position: relative; z-index: 1;
  width: 15px; height: 15px; background: var(--sage-d);
  box-shadow: 0 0 0 3px var(--cream);
}
.tl-node.sky  { background: var(--sky-d); }
.tl-node.butter { background: var(--peach-d); }
.tl-node.ink  { background: var(--ink); }
.tl-era {
  font-family: "DotGothic16", sans-serif; font-size: 16px; color: var(--ink);
  margin-bottom: 6px;
}
.tl-jobs {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tl-job {
  font-family: "DotGothic16", sans-serif; font-size: 12.5px;
  color: var(--ink); background: var(--paper);
  padding: 5px 9px; border: 1.5px solid var(--line);
}
.tl-note {
  font-size: 13.5px; line-height: 1.8; color: var(--ink-soft); margin-top: 8px;
}
.tl-touch {
  font-family: "DotGothic16", sans-serif;
  font-size: 13.5px; line-height: 1.7; color: var(--sage-d);
  margin-top: 9px; padding-left: 16px; position: relative;
  text-wrap: pretty;
}
.tl-touch::before {
  content: "—"; position: absolute; left: 0; top: 0; color: var(--sage-d);
}

/* ピコの一言（CRTミニ） */
.pico-aside {
  display: flex; gap: 12px; align-items: center;
}
.pico-aside .bubble {
  flex: 1; position: relative;
  background: var(--sage-bg); padding: 13px 15px;
  font-family: "DotGothic16", sans-serif; font-size: 15px; line-height: 1.7; color: var(--ink);
}
.pico-aside .bubble::before {
  content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 12px; height: 12px; background: var(--sage-bg);
}

/* タップで変化するパンダ */
.panda-tap { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.panda-tap .bubble { transition: transform .07s steps(2); }
.panda-tap:active .bubble { transform: translate(2px, 2px); }
.panda-tap:focus-visible .bubble { box-shadow: 0 0 0 2px var(--sage-d); }
.tap-hint {
  text-align: center; font-size: 12.5px; color: var(--ink-soft);
  letter-spacing: .04em; line-height: 1.6; margin-top: 12px; text-wrap: balance;
}

/* 想い（強調パネル） */
.wish-panel { background: var(--ink); padding: 24px 20px; }
.wish-panel .p-body { color: var(--paper); }
.wish-panel .em { color: oklch(0.86 0.07 150); }

/* フッタ EXIT ボタン */
.exit-wrap { text-align: center; padding: 30px 0 8px; }
.exitbtn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "DotGothic16", sans-serif; font-size: 16px;
  color: var(--paper); background: var(--ink); text-decoration: none;
  padding: 14px 22px; letter-spacing: .04em;
  --n: 5px;
  clip-path: polygon(
    0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n))
  );
}
.exitbtn .bkey {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper); color: var(--ink); font-size: 12.5px;
}
.exitbtn:active { transform: translate(2px, 2px); }