/* 1.2.28–1.2.29 ことば交換 — japafly（JAPANESIABLE）のマイページに埋め込まれたときの見た目。
   Bootstrap::skin() が parentOrigin=https://japafly-japanesiable.jp の埋め込みにだけ BOOT.skin='japafly' を渡し、
   app.js が body[data-skin="japafly"] を付ける。ほかの画面（JLC 本体）には効かない。 */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Klee+One:wght@400;600&display=swap');

body[data-skin="japafly"]{
  --paper:#FFFDF8;--ink:#46403C;--blue:#2287BC;--red:#E0507F;--muted:#8A7F79;--line:#F3E6DC;
  --pale-blue:#EAF5FB;--pale-red:#FDECF2;--jf-pk:#E0507F;--jf-pk2:#F27FA5;--jf-gr:#3EA97C;--jf-ye:#F7C948;
  font-family:Quicksand,"Klee One","M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink);background:transparent;font-size:14.5px;line-height:1.75
}
body[data-skin="japafly"] main{padding:4px 2px 12px}
body[data-skin="japafly"] h2,body[data-skin="japafly"] h3{font-weight:700;letter-spacing:.01em}

/* タブ（マイページのタブと同じ丸いボタン） */
body[data-skin="japafly"] .page-tabs{float:none;display:flex;flex-wrap:wrap;gap:8px;background:transparent;border:0;padding:0;margin:0 0 14px;width:auto}
body[data-skin="japafly"] .page-tab{border:2px solid var(--line);background:#fff;color:var(--muted);border-radius:99px;padding:9px 16px;font-size:13.5px;font-weight:700;line-height:1.2;box-shadow:none}
body[data-skin="japafly"] .page-tab:hover{border-color:var(--jf-pk2);color:var(--jf-pk)}
body[data-skin="japafly"] .page-tab.active,body[data-skin="japafly"] .page-tab[aria-pressed="true"]{background:var(--jf-pk);border-color:var(--jf-pk);color:#fff;box-shadow:0 4px 12px rgba(224,80,127,.28)}

/* ボタン */
body[data-skin="japafly"] .primary,body[data-skin="japafly"] .jlf-primary{background:var(--jf-pk);border:0;color:#fff;border-radius:99px;font-weight:700;box-shadow:0 6px 16px rgba(224,80,127,.25)}
body[data-skin="japafly"] .primary:hover,body[data-skin="japafly"] .jlf-primary:hover{background:#D04272;transform:translateY(-1px)}
body[data-skin="japafly"] .secondary{background:#fff;border:2px solid #F7D3E0;color:var(--jf-pk);border-radius:99px;font-weight:700;box-shadow:none}
body[data-skin="japafly"] .text-button{color:var(--blue);font-weight:700}
body[data-skin="japafly"] .jlf-compact .jlf-compose-toggle,body[data-skin="japafly"] .jlf-compose-toggle{background:var(--jf-pk);border-color:var(--jf-pk);color:#fff;border-radius:99px}
body[data-skin="japafly"] .jlf-compact .jlf-compose-toggle[aria-expanded="true"],body[data-skin="japafly"] .jlf-compose-toggle[aria-expanded="true"]{background:#fff;color:var(--jf-pk)}

/* カード（日記・相手・パネル） */
body[data-skin="japafly"] .jlf-post,body[data-skin="japafly"] .jlf-composer,body[data-skin="japafly"] .person-card,body[data-skin="japafly"] .welcome-panel{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 2px 10px rgba(120,90,60,.06)}
body[data-skin="japafly"] .person-card:hover{border-color:#F7D3E0}
body[data-skin="japafly"] .inbox{border-color:var(--line);border-radius:20px;box-shadow:0 2px 10px rgba(120,90,60,.06)}
body[data-skin="japafly"] .room-sidebar{background:#FFFBF5}
body[data-skin="japafly"] .welcome-art{background:#FDF1F5;color:var(--jf-pk)}
body[data-skin="japafly"] .eyebrow,body[data-skin="japafly"] .jlf-eyebrow{color:var(--jf-pk)}
body[data-skin="japafly"] .topic-chip{border-radius:99px}
body[data-skin="japafly"] .topic-chip.active,body[data-skin="japafly"] .topic-chip[aria-pressed="true"]{background:var(--jf-pk);border-color:var(--jf-pk);color:#fff}
body[data-skin="japafly"] .call-panel{background:#EAF5FB;border-radius:16px}
body[data-skin="japafly"] .bubble{border-radius:16px}
body[data-skin="japafly"] .message.own .bubble{background:#FDECF2}
body[data-skin="japafly"] dialog{background:#FFFDF8;border-color:var(--line);border-radius:22px}

/* 日本語（読む・直す文）は教科書体で読みやすく */
body[data-skin="japafly"] .jlf-body,body[data-skin="japafly"] .bubble,body[data-skin="japafly"] .jlf-post-input,body[data-skin="japafly"] textarea{font-family:"Klee One",Quicksand,"Hiragino Maru Gothic ProN",sans-serif}

/* 1.2.29: 日記から「💬 この人と話す」（プロフィール → メッセージ・ビデオ通話の約束） */
body[data-skin="japafly"] .jlf-post-actions{row-gap:10px}
body[data-skin="japafly"] .jlf-post-actions .jlf-talk{color:var(--jf-pk);background:#FDECF2;font-weight:700}
body[data-skin="japafly"] .jlf-post-actions .jlf-talk:hover{background:#FAD9E5;color:#D04272}

/* 1.2.29: スマホでは、上のメニューを 1 行（横にスクロール）、日記を先に。書く欄は「＋ Tulis diary」で開く */
@media (max-width:760px){
  body[data-skin="japafly"] .page-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  body[data-skin="japafly"] .page-tabs::-webkit-scrollbar{display:none}
  body[data-skin="japafly"] .page-tab{flex:0 0 auto;white-space:nowrap}
  body[data-skin="japafly"] .jlf-content{display:flex;flex-direction:column;gap:14px}
  body[data-skin="japafly"] .jlf-compose-panel{order:-1;width:100%}
  body[data-skin="japafly"] .jlf-stream{width:100%}
  body[data-skin="japafly"] .jlf-compose-toggle{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;border:0;background:var(--jf-pk);color:#fff;font-size:14px;font-weight:700;border-radius:99px;padding:8px 14px;box-shadow:0 6px 16px rgba(224,80,127,.22)}
  body[data-skin="japafly"] .jlf-compose-toggle[aria-expanded="true"]{background:#fff;color:var(--jf-pk);border:2px solid #F7D3E0;box-shadow:none}
  body[data-skin="japafly"] .jlf-compose-panel:not(.jlf-compose-open)>.jlf-composer{display:none}
  body[data-skin="japafly"] .jlf-compose-open>.jlf-composer{margin-top:10px}
}
@media (max-width:560px){
  body[data-skin="japafly"] .page-tab{padding:8px 12px;font-size:12.5px}
  body[data-skin="japafly"] main{padding:2px 0 10px}
}