/* ============================================================
   お客様に見える画面（LINE側）のモック。

   販売LP（salon/index.html）から移した。写真ではなくCSSで組んで
   あるので、拡大しても粗くならず、文言を直すのも早い。

   ★ 実物と食い違わせないこと。ここは「製品の画面です」として
     見せるものなので、実際に無い操作や画面を描くと嘘になる。
     迷ったら https://salon-sample.kiteko.jp/demo/line/ を見る。
   ============================================================ */
.phone { width: 236px; height: 480px; border-radius: 34px; background: #1A1A1A; padding: 8px; box-shadow: 0 30px 60px rgba(26,26,26,.25); }
.screen { width: 100%; height: 100%; border-radius: 27px; background: #FDF6F4; overflow: hidden; display: flex; flex-direction: column; font-size: 11px; color: #1A1A1A; }
.scr-head { background: linear-gradient(135deg, #F0618E 0%, #F79A4D 100%); color: #fff; padding: 18px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.scr-head .shop { font-weight: 700; font-size: 12px; }
.scr-tabs { display: flex; gap: 4px; }
.scr-tab { flex: 1; text-align: center; padding: 5px 0; border-radius: 6px; background: rgba(255,255,255,.22); font-weight: 700; font-size: 10px; }
.scr-tab.on { background: #fff; color: #D9497A; }
.scr-body { padding: 10px 10px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.scr-label { font-size: 10px; font-weight: 700; color: #3D3D3D; }
.scr-menu { display: flex; flex-direction: column; gap: 5px; }
.scr-item { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1.5px solid #F0D6DC; border-radius: 7px; padding: 6px 8px; font-size: 10px; }
.scr-item.on { border-color: #F0618E; background: #FDE9F0; font-weight: 700; }
.scr-item span:last-child { color: #3D3D3D; font-weight: 500; }
.scr-cal { background: #fff; border: 1.5px solid #F0D6DC; border-radius: 7px; padding: 6px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.scr-dow { font-size: 8px; text-align: center; color: #8A8A8A; font-weight: 700; }
.scr-day { height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #3D3D3D; background: #FDF6F4; }
.scr-day.past { color: #B9B0B4; background: #F3EEEE; }
.scr-day.sel { background: #F0618E; color: #fff; font-weight: 800; }
.scr-cta { margin: auto 10px 12px; background: #F0618E; color: #fff; text-align: center; font-weight: 700; padding: 10px; border-radius: 7px; font-size: 11px; }
.scr-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 12px; text-align: center; }
.scr-done .ok { width: 48px; height: 48px; border-radius: 50%; background: var(--line-bg); color: #05933F; display: flex; align-items: center; justify-content: center; }
.scr-done .ok svg { width: 24px; height: 24px; }
.scr-done b { font-size: 13px; }
.scr-done .box { width: 100%; background: #fff; border: 1.5px solid #F0D6DC; border-radius: 8px; padding: 10px; text-align: left; font-size: 10px; line-height: 1.7; color: #3D3D3D; }
.scr-chat { display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; }
.bubble { max-width: 88%; background: #fff; border-radius: 12px; padding: 8px 10px; font-size: 10px; line-height: 1.6; color: #1A1A1A; box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.bubble.me { align-self: flex-end; background: #8DE59F; }
.bubble .rich { margin-top: 6px; border-radius: 8px; overflow: hidden; border: 1px solid #F0D6DC; }
.bubble .rich div:first-child { background: linear-gradient(135deg,#F0618E,#F79A4D); height: 42px; }
.bubble .rich div:last-child { padding: 6px 8px; font-weight: 700; color: #D9497A; text-align: center; }
.scr-richmenu { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px; background: #F0D6DC; }
.scr-richmenu div { background: #fff; text-align: center; font-size: 9px; font-weight: 700; padding: 12px 2px; color: #D9497A; }
.scr-add { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 14px; }
.scr-add .qr { width: 110px; height: 110px; background: repeating-linear-gradient(0deg, #1A1A1A 0 6px, transparent 6px 12px), repeating-linear-gradient(90deg, #1A1A1A 0 6px, #fff 6px 12px); background-blend-mode: multiply; border: 6px solid #fff; border-radius: 6px; box-shadow: 0 0 0 1px #F0D6DC; }
.scr-add .addbtn { background: var(--line-green); color: #fff; font-weight: 700; padding: 9px 22px; border-radius: 999px; font-size: 11px; }