:root{
  --bg:#eef0f3; --dot:#d3d8e0; --ink:#1f2430; --sub:#737b8c;
  --shadow:0 1px 2px rgba(20,28,46,.08),0 6px 16px rgba(20,28,46,.10);
  --line-green:#06C755; --chat:#9bc9b0;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",-apple-system,"system-ui",Meiryo,sans-serif;color:var(--ink);}
#viewport{position:fixed; inset:0; overflow:hidden; cursor:grab;
  user-select:none; -webkit-user-select:none;
  background-color:var(--bg); background-image:radial-gradient(var(--dot) 1.4px, transparent 1.4px); background-size:26px 26px;}
#viewport.grabbing, #viewport.grabbing *{cursor:grabbing !important;}
#canvas{position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform;}
.board{position:relative; z-index:1; display:flex; flex-direction:row; align-items:flex-start; gap:64px; padding:80px 120px;}
svg.links{position:absolute; top:0; left:0; overflow:visible; z-index:0; pointer-events:none;}
.block{position:relative; border-radius:18px; padding:18px 22px 22px; background:var(--blk-soft); border:1px solid var(--blk-line);}
.block-head{display:flex; align-items:center; gap:12px; margin:0 0 18px;}
.block-chip{display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:16px; color:#fff; background:var(--blk); padding:10px 18px; border-radius:999px; box-shadow:var(--shadow);}
.block-chip .step-label{font-size:9.5px; font-weight:800; letter-spacing:.08em; opacity:.85;}
.block-chip .num{display:inline-flex; align-items:center; justify-content:center; width:23px; height:23px; border-radius:50%; background:rgba(255,255,255,.3); font-size:12.5px; font-weight:800;}
.block-goal{font-size:12.5px; color:var(--sub);}
.lanes{display:flex; flex-direction:row; align-items:flex-start; gap:30px;}
.lane-cap{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--blk); background:#fff; border:1px solid var(--blk-line); padding:3px 11px; border-radius:7px; margin:0 0 11px;}
.cards{display:flex; flex-direction:column; align-items:flex-start; gap:26px;}

/* ---- phone card ---- */
.card{position:relative; width:314px; flex:0 0 314px; background:#fff; border-radius:22px; box-shadow:var(--shadow); overflow:hidden; border:1px solid #d7dce5; cursor:auto; user-select:text; -webkit-user-select:text;}
.time-bar{display:flex; align-items:center; gap:8px; padding:7px 12px; background:#fff3bf; border-bottom:1px solid #efe09a;}
.time-no{font-size:11px; font-weight:800; color:#8a6d00; background:#ffe89a; border-radius:6px; padding:1px 7px; white-space:nowrap;}
.time-val{flex:1; text-align:center; font-size:13px; font-weight:800; color:#7a5f00; letter-spacing:.02em;}
.time-len{font-size:10px; font-weight:700; color:#7a5f00; background:#ffe89a; border-radius:6px; padding:1px 7px; white-space:nowrap;}
.notice-box{padding:9px 12px; background:#eef1f4; border-bottom:1px solid #e1e5ea;}
.notice-box .nl{display:inline-block; font-size:9.5px; font-weight:700; color:#fff; background:#9aa1ad; border-radius:4px; padding:1px 6px; margin-right:7px; vertical-align:1px;}
.notice-box .nt{font-size:12px; color:#3a414e; line-height:1.55;}
.line-header{display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--line-green); color:#fff;}
.line-header .bk{font-size:17px; line-height:1; opacity:.95;}
.line-header .nm{font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.line-header .ic{font-size:12px; opacity:.95; letter-spacing:3px;}
.line-chat{background:var(--chat); padding:14px 12px 16px;}
.msg{display:flex; gap:7px; align-items:flex-start;}
.avatar{width:36px; height:36px; flex:0 0 36px; border-radius:50%; background:#e77d54; color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; box-shadow:0 1px 1px rgba(0,0,0,.12);}
.msg-main{display:flex; flex-direction:column; gap:6px; max-width:236px;}
.msg-name{font-size:11px; color:#33433b; margin:1px 0 0;}
.bubble{position:relative; background:#fff; color:#1c1c1c; font-size:13px; line-height:1.55; padding:9px 12px; border-radius:5px 16px 16px 16px; white-space:pre-wrap; word-break:break-word; box-shadow:0 1px 1px rgba(0,0,0,.08);}
.carousel{display:flex; flex-direction:column; gap:8px; margin-top:1px;}
.ccard{background:#fff; border-radius:13px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.16);}
.ccard-img{aspect-ratio:1024/678; display:flex; align-items:center; justify-content:center; font-size:11px; color:#9aa2ad; background:repeating-linear-gradient(135deg,#eef1f6,#eef1f6 9px,#e6eaf2 9px,#e6eaf2 18px);}
.ccard-pad{padding:9px 10px 0;}
.ccard-title{font-size:12px; font-weight:700; line-height:1.4; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.ccard-text{font-size:11px; color:#5b6470; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:1.45em;}
.ccard-btn{margin:9px 10px 10px; background:var(--line-green); color:#fff; text-align:center; padding:8px; border-radius:20px; font-size:11px; font-weight:700;}
.media-ph{margin-top:1px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:12px; font-weight:700; color:#7c8597; text-align:center; padding:10px 14px; background:repeating-linear-gradient(135deg,#eef1f6,#eef1f6 9px,#e6eaf2 9px,#e6eaf2 18px); border:1px dashed #c2cad8;}
.media-ph.bw{aspect-ratio:16/9;}
.media-ph.bt{aspect-ratio:9/16;}
.media-ph.rich{aspect-ratio:9/16;}
.media-ph.video{aspect-ratio:16/9;}
.media-ph small{font-weight:500; color:#9098a6; font-size:10.5px; line-height:1.4;}

/* ---- toolbar ---- */
.toolbar{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:10; display:flex; align-items:center; gap:6px; background:#fff; border:1px solid #e1e5ec; border-radius:14px; padding:7px 9px; box-shadow:0 8px 28px rgba(20,28,46,.16);}
.tbtn{appearance:none; border:0; background:#f2f4f8; color:#3a4252; width:34px; height:34px; border-radius:9px; font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.tbtn:hover{background:#e7ebf2;}
.tbtn.wide{width:auto; padding:0 14px; font-size:13px; font-weight:700; gap:6px;}
.zoom-val{min-width:48px; text-align:center; font-size:12.5px; font-weight:700; color:#4a5266; font-variant-numeric:tabular-nums;}
.title-tag{position:fixed; top:18px; left:20px; z-index:10; background:#fff; border:1px solid #e1e5ec; border-radius:12px; padding:11px 16px; box-shadow:var(--shadow);}
.title-tag h1{margin:0; font-size:14.5px;}
.title-tag p{margin:3px 0 0; font-size:11.5px; color:var(--sub);}
.hint{position:fixed; top:18px; right:20px; z-index:10; font-size:11px; color:var(--sub); background:#fff; border:1px solid #e1e5ec; border-radius:10px; padding:8px 12px; box-shadow:var(--shadow);}
.stepnav{position:fixed; top:62px; left:50%; transform:translateX(-50%); z-index:11; display:flex; align-items:center; gap:5px; max-width:calc(100vw - 36px); overflow-x:auto; background:#fff; border:1px solid #e1e5ec; border-radius:13px; padding:8px 12px; box-shadow:0 6px 20px rgba(20,28,46,.13);}
.stepnav::-webkit-scrollbar{height:6px;}
.stepnav::-webkit-scrollbar-thumb{background:#d3d8e0; border-radius:3px;}
.stepnav-lead{font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--sub); padding:0 4px 0 2px; flex:0 0 auto;}
.step-chip{appearance:none; border:1.5px solid var(--c); background:#fff; color:var(--c); font-size:12px; font-weight:800; padding:6px 13px 6px 7px; border-radius:999px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; transition:background .12s,color .12s; flex:0 0 auto;}
.step-chip:hover{background:var(--c); color:#fff;}
.step-no{display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; background:var(--c); color:#fff; font-size:11px; flex:0 0 auto;}
.step-chip:hover .step-no{background:#fff; color:var(--c);}
.step-sep{color:#aab2c2; font-size:14px; font-weight:700; flex:0 0 auto;}