/* Sections Ý 3 – 8 (history, mindset, context, n8n flow, repo tree, prompt, new way of working, Q&A) */
.mini-title i, .pick i { font-style: normal; color: var(--green-t); }
.caption { font-size: 13px; color: var(--soft); margin-top: 1vh; }
.btn:disabled { opacity: .35; cursor: default; }

/* 6. history */
.eras { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 1.6vh 0 2.6vh; }
.era-line { position: absolute; left: 4%; right: 4%; top: 50%; height: 1px; background: var(--line); z-index: 0; }
.era-line i { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--grad); transition: width .6s; border-radius: 2px; }
.era { position: relative; z-index: 1; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 1.6vh 20px; transition: .25s; color: var(--body); }
.era small { color: var(--soft); font-size: 12px; letter-spacing: .06em; }
.era b { display: block; font-size: clamp(18px, 2.5vh, 24px); font-weight: 400; color: var(--ink); }
.era span { font-size: 13px; color: var(--soft); }
.era:hover { border-color: var(--blue-hi); }
.era.on { border-color: var(--blue); box-shadow: 0 10px 28px rgba(47, 82, 160, .14); }
.era.on b { color: var(--blue); font-weight: 500; }
.era-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; }
.era-demo, .growth { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 2.2vh 24px; }
.ed-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 1.4vh; }
.ed-row > span { flex: none; width: 96px; font-size: 12px; color: var(--soft); padding-top: 9px; text-transform: uppercase; letter-spacing: .08em; }
.ed-row p { flex: 1; padding: 1vh 16px; border-radius: 12px; font-size: clamp(14px, 1.8vh, 16px); animation: rise .35s both; }
.ed-row.me p { background: var(--blue); color: #fff; }
.ed-row.ai p { background: #fff; border: 1px solid var(--line); }
.ed-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: .6vh 0 1.4vh; }
.ed-tags span { border: 1px solid var(--line); border-radius: 20px; padding: 3px 12px; font-size: 12.5px; color: var(--soft); }
.ed-tags span.yes { border-color: var(--green); color: var(--green-t); }
.ed-note { border-left: 2px solid var(--green); padding-left: 12px; font-size: clamp(13px, 1.75vh, 15px); color: var(--ink); }
.bars { display: grid; gap: 1vh; margin: 1.6vh 0 1.4vh; }
.bar-row { display: grid; grid-template-columns: 170px 1fr 150px; align-items: center; gap: 12px; font-size: 13px; }
.bar-row .bl { color: var(--soft); }
.bar-row .bt { height: 10px; background: var(--hair); border-radius: 6px; overflow: hidden; }
.bar-row .bt i { display: block; height: 100%; width: 0; background: var(--blue-hi); border-radius: 6px; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.bar-row.hot .bt i { background: var(--grad); }
.bar-row .bv { text-align: right; color: var(--ink); }
.src-note { font-size: 12px; color: var(--soft); }

/* 7. mindset */
.ms-grid { display: grid; grid-template-columns: .9fr 1.4fr; gap: 26px; margin-top: 1vh; }
.ms-toggle, .new-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 30px; padding: 4px; background: #fff; margin-bottom: 1.6vh; }
.ms-toggle button, .new-toggle button { border: none; background: transparent; padding: 8px 18px; border-radius: 26px; font-size: 14px; color: var(--soft); transition: .25s; }
.ms-toggle button.on, .new-toggle button.on { background: var(--blue); color: #fff; }
.ms-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 2.2vh 24px; }
.ms-card h3 { font-weight: 400; font-size: clamp(18px, 2.4vh, 22px); color: var(--blue); margin-bottom: 1vh; }
.ms-card.tool h3 { color: var(--amber); }
.ms-card ul { list-style: none; display: grid; gap: .6vh; }
.ms-card li { padding: .8vh 0 .8vh 24px; position: relative; border-bottom: 1px solid var(--hair); font-size: clamp(13.5px, 1.8vh, 15.5px); animation: rise .3s both; }
.ms-card li::before { content: ''; position: absolute; left: 4px; top: 50%; width: 10px; height: 1px; background: var(--green); }
.ms-card.tool li::before { background: var(--amber); }
.ms-card .ms-svg { height: 8vh; margin-bottom: 1vh; }
.ms-card .ms-svg svg { height: 100%; fill: none; stroke: var(--blue); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.ms-card.tool .ms-svg svg { stroke: var(--amber); }
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 1.2vh; }
.cap { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.8vh 20px; transition: .25s; outline: none; min-height: 27vh; }
.cap svg { width: 28px; height: 28px; fill: none; stroke: var(--blue); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.cap b { display: block; font-weight: 500; font-size: clamp(15px, 2vh, 17px); margin: .6vh 0 .4vh; }
.cap p { font-size: clamp(12.5px, 1.65vh, 14px); color: var(--soft); }
.cap:hover, .cap:focus { border-color: var(--blue); box-shadow: 0 12px 30px rgba(47, 82, 160, .12); }
.cap-demo { margin-top: 1.2vh; display: flex; flex-wrap: wrap; gap: 6px; opacity: 0; transform: translateY(6px); transition: .35s; }
.cap:hover .cap-demo, .cap:focus .cap-demo { opacity: 1; transform: none; }
.cap-demo.term { flex-direction: column; gap: 2px; background: #1E2A44; border-radius: 10px; padding: 8px 12px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #C9D3E3; }
.cap-demo.term .ok { color: #8FD48F; }
.cap-demo.chips span { border: 1px solid var(--line); border-radius: 20px; padding: 2px 10px; font-size: 12px; color: var(--blue); background: #fff; }
.cap-demo.sched, .cap-demo.plan { flex-direction: column; gap: 3px; font-size: 12.5px; }
.cap-demo.sched i { font-style: normal; display: inline-block; width: 50px; color: var(--green-t); font-family: 'JetBrains Mono', monospace; }
.cap-demo.plan .d { color: var(--green-t); text-decoration: line-through; text-decoration-color: rgba(62, 158, 62, .5); }

/* 8. context */
.ctx-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; margin-top: 1vh; }
.handover, .setup { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 2.2vh 24px; }
.ho-list { display: grid; gap: .9vh; margin: 1.4vh 0 2vh; }
.ho-list button { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 1.1vh 16px 1.1vh 44px; font-size: clamp(13.5px, 1.8vh, 15.5px); color: var(--body); position: relative; transition: .2s; }
.ho-list button::before { content: ''; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 1px solid var(--soft); transition: .2s; }
.ho-list button:hover { border-color: var(--blue-hi); }
.ho-list button.on { border-color: var(--green); color: var(--ink); }
.ho-list button.on::before { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 3px #fff; }
.ho-meter { display: grid; grid-template-columns: 1fr 60px; gap: 6px 12px; align-items: center; font-size: 13px; color: var(--soft); }
.ho-meter > span:first-child { grid-column: 1 / -1; }
.ho-meter .meter { margin: 0; }
.ho-meter b { font-size: 22px; font-weight: 300; color: var(--blue); text-align: right; }
#setupSvg { width: 100%; height: 44vh; }
#setupSvg text { fill: var(--ink); font-size: 14px; text-anchor: middle; font-family: 'Be Vietnam Pro'; font-weight: 400; }
#setupSvg .sm { font-size: 11px; fill: var(--soft); font-weight: 300; }
#setupSvg .mac rect { fill: #fff; stroke: var(--line); transition: .25s; }
#setupSvg .mac:hover rect { stroke: var(--blue); fill: #F2F6FD; }
#setupSvg #gitNode rect { fill: #fff; stroke: var(--blue); stroke-width: 1.2; }
#setupSvg #memNote rect { fill: #fff; stroke: var(--green); stroke-width: 1.2; }
#setupSvg .ttl-b { fill: var(--blue); font-weight: 500; }
#setupSvg .ttl-g { fill: var(--green-t); font-weight: 500; }
#setupSvg .sync { fill: none; stroke: var(--blue-hi); stroke-width: 1; stroke-dasharray: 5 5; animation: flow 1.2s linear infinite; }
#setupSvg.hot .sync { stroke: var(--green); stroke-width: 1.8; }
@keyframes flow { to { stroke-dashoffset: -20; } }

/* 9. n8n flow */
.flow-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; height: 64vh; min-height: 420px; }
.flow-canvas { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; align-items: center; }
#flowSvg { width: 100%; height: 100%; }
#flowSvg text { fill: var(--ink); font-size: 15px; text-anchor: middle; font-family: 'Be Vietnam Pro'; font-weight: 400; }
#flowSvg .sm { font-size: 11.5px; fill: var(--soft); font-weight: 300; }
#flowSvg .nd rect, #flowSvg .nd circle { fill: #fff; stroke: var(--line); stroke-width: 1; transition: .3s; }
#flowSvg .nd.on rect, #flowSvg .nd.on circle { stroke: var(--blue); stroke-width: 1.8; fill: #F2F6FD; }
#flowSvg .nd.done rect, #flowSvg .nd.done circle { stroke: var(--green); fill: #F3FAF1; }
#flowSvg .fl { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 5 5; transition: .3s; }
#flowSvg .fl.on { stroke: var(--blue); stroke-width: 2; animation: flow 1s linear infinite; }
#flowSvg .fl.done { stroke: var(--green); stroke-width: 1.4; }
.flow-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.flow-step { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.6vh 18px; }
.flow-step small { color: var(--green-t); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.flow-step b { display: block; font-weight: 500; font-size: clamp(15px, 2vh, 18px); margin: .3vh 0; }
.flow-step p { font-size: clamp(13px, 1.7vh, 14.5px); color: var(--soft); }
.flow-out { flex: 1; min-height: 0; overflow: auto; background: var(--fill); border: 1px solid var(--line); border-radius: 14px; padding: 1.4vh 16px; font-size: 13px; }
.flow-out .mail { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; animation: rise .35s both; }
.flow-out .mail div { border-bottom: 1px solid var(--hair); padding: 2px 0; }
.flow-out .mail div span { color: var(--soft); display: inline-block; width: 56px; }
.flow-out .mail p { margin-top: 6px; }
.flow-out .line { animation: rise .3s both; padding: 3px 0; border-bottom: 1px dashed var(--hair); }
.flow-out .line i { font-style: normal; color: var(--green-t); }
.time-cmp { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.2vh 16px; display: grid; gap: 6px; font-size: 13px; }
.time-cmp div { display: grid; grid-template-columns: 100px 1fr 120px; align-items: center; gap: 10px; }
.time-cmp span { color: var(--soft); }
.time-cmp .tb { height: 8px; border-radius: 5px; display: block; }
.time-cmp .man { background: var(--amber); width: 100%; opacity: .7; }
.time-cmp .ai { background: var(--green); width: 11%; }
.time-cmp b { font-weight: 400; text-align: right; }

/* 10. tree */
.tree-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 26px; margin-top: 1vh; height: 66vh; min-height: 420px; }
.tree { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.6vh 14px; overflow: auto; font-size: clamp(13px, 1.75vh, 15px); }
.tree ul { list-style: none; padding-left: 18px; border-left: 1px dashed var(--hair); margin-left: 8px; }
.tree > ul { padding-left: 0; border: none; margin: 0; }
.tree li > div { display: flex; align-items: center; gap: 8px; padding: .45vh 10px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.tree li > div:hover { background: var(--fill); }
.tree li > div.sel { background: rgba(47, 82, 160, .08); color: var(--blue); }
.tree svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--soft); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tree .dir > div svg { stroke: var(--blue-hi); }
.tree .dir.closed > ul { display: none; }
.tree .nm { font-family: 'JetBrains Mono', monospace; font-size: .92em; }
.tree .hint { margin-left: auto; font-size: 11.5px; color: var(--soft); }
.tree-view { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 2.6vh 28px; display: flex; flex-direction: column; gap: 1.2vh; }
.tv-path { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--green-t); }
.tree-view h3 { font-weight: 400; font-size: clamp(20px, 2.8vh, 26px); color: var(--blue); }
.tree-view p { font-size: clamp(14px, 1.9vh, 16.5px); }
.tv-ex { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.4vh 16px; font-size: clamp(12.5px, 1.65vh, 14px); white-space: pre-line; font-family: 'JetBrains Mono', monospace; color: var(--body); line-height: 1.6; }
.tv-tag { margin-top: auto; font-size: 13px; color: var(--soft); border-top: 1px solid var(--hair); padding-top: 1vh; }

/* 11. prompt */
.pr-grid { display: grid; grid-template-columns: .95fr 1.25fr; gap: 26px; margin-top: 1vh; height: 66vh; min-height: 420px; }
.pr-left { min-height: 0; display: flex; flex-direction: column; }
.pr-blocks { display: grid; gap: .8vh; margin-top: 1vh; overflow: auto; }
.pr-b { display: grid; grid-template-columns: 30px 1fr 36px; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: .85vh 14px; transition: .2s; color: var(--body); }
.pr-b i { font-style: normal; font-family: 'JetBrains Mono', monospace; color: var(--soft); font-size: 13px; }
.pr-b b { font-weight: 500; font-size: clamp(13.5px, 1.8vh, 15.5px); display: block; }
.pr-b small { color: var(--soft); font-size: 12px; }
.pr-b .sw { width: 34px; height: 18px; border-radius: 10px; border: 1px solid var(--line); position: relative; transition: .2s; }
.pr-b .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--soft); transition: .2s; }
.pr-b.on { border-color: var(--green); }
.pr-b.on .sw { background: var(--green); border-color: var(--green); }
.pr-b.on .sw::after { left: 18px; background: #fff; }
.pr-b:hover { border-color: var(--blue-hi); }
.pr-right { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.pr-doc { flex: 1; min-height: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.pr-doc-top { padding: 8px 14px; border-bottom: 1px solid var(--hair); font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--soft); }
.pr-doc pre { flex: 1; overflow: auto; padding: 12px 16px; font-family: 'JetBrains Mono', monospace; font-size: clamp(11.5px, 1.5vh, 13px); white-space: pre-wrap; color: var(--body); line-height: 1.55; }
.pr-doc pre .h { color: var(--blue); }
.pr-doc pre .new { background: rgba(90, 181, 90, .14); }
.pr-score { display: grid; grid-template-columns: 1fr 60px; gap: 4px 12px; align-items: center; font-size: 13px; color: var(--soft); }
.pr-score > span:first-child { grid-column: 1 / -1; }
.pr-score .meter { margin: 0; }
.pr-score b { font-size: 22px; font-weight: 300; color: var(--blue); text-align: right; }

/* 12. new way */
.new-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: center; margin-top: 1vh; }
.alloc { display: grid; gap: 1.5vh; margin-top: .6vh; }
.al-row { display: grid; grid-template-columns: 230px 1fr 58px; align-items: center; gap: 12px; font-size: clamp(13.5px, 1.85vh, 16px); }
.al-row .bt { height: 14px; background: var(--hair); border-radius: 8px; overflow: hidden; }
.al-row .bt i { display: block; height: 100%; border-radius: 8px; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.al-row b { font-weight: 300; font-size: 20px; text-align: right; }
.al-row.h .bt i { background: var(--blue); } .al-row.h b { color: var(--blue); }
.al-row.a .bt i { background: var(--green); } .al-row.a b { color: var(--green-t); }
.al-row.w .bt i { background: var(--amber); } .al-row.w b { color: var(--amber); }
.al-row small { display: block; font-size: 11.5px; color: var(--soft); }
#loopSvg { width: 100%; max-height: 58vh; }
#loopSvg .ring { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 6; animation: spin 30s linear infinite; transform-origin: 210px 210px; }
@keyframes spin { to { transform: rotate(360deg); } }
#loopSvg .lp { cursor: pointer; }
#loopSvg .lp circle { fill: #fff; stroke: var(--blue); stroke-width: 1.2; transition: .25s; }
#loopSvg .lp.ai circle { stroke: var(--green); }
#loopSvg .lp:hover circle, #loopSvg .lp.on circle { fill: #F2F6FD; stroke-width: 2.2; }
#loopSvg .lp.ai:hover circle, #loopSvg .lp.ai.on circle { fill: #F3FAF1; }
#loopSvg text { font-family: 'Be Vietnam Pro'; font-size: 14px; text-anchor: middle; fill: var(--ink); pointer-events: none; }
#loopSvg .mid { fill: var(--soft); font-size: 14px; }
#loopSvg .mid.big { fill: var(--blue); font-size: 19px; font-weight: 500; }
.loop .caption { text-align: center; min-height: 3em; font-size: clamp(13px, 1.75vh, 15px); color: var(--body); }

/* 13. end */
.end-wrap { text-align: center; }
.end-wrap .eyebrow::before { display: none; }
.end-wrap .lead { margin: 2vh auto 0; }
.end-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 5vh auto 4vh; max-width: 1100px; text-align: left; }
.end-cards div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 2.4vh 24px; transition: .25s; }
.end-cards div:hover { border-color: var(--green); transform: translateY(-3px); }
.end-cards b { display: block; color: var(--blue); font-weight: 500; font-size: 18px; margin-bottom: .6vh; }
.end-cards span { color: var(--soft); font-size: 14.5px; }
.sign { color: var(--soft); font-size: 13px; letter-spacing: .06em; }

@media (max-width: 900px) {
  .eras, .era-grid, .ms-grid, .cap-grid, .ctx-grid, .flow-grid, .tree-grid, .pr-grid, .new-grid, .end-cards { grid-template-columns: 1fr; height: auto; }
}