/* moca.html 「03 / DEVELOPER TOOLS」 개발툴 5탭 — 원본 마크업은 js/intellisense-section.js.
   ★ 이 페이지의 색·버튼을 그대로 쓴다(.button · .text-link · .shot-fig · .eyebrow 는 moca.css 것). 섹션 전용 색을 새로 만들지 않는다 —
     2026-09-29 옛 IntelliSense 페이지 모양(연보라·민트·알약 버튼·tools.css)을 들고 왔다가 페이지가 두 벌 옷을 입은 꼴이 됐다.
   색: 바탕 #fbfaf7 · 글 #232321 · 본문 #4a4a44 · 흐림 #77776e · 선 #cfcec5/#bdbeb5 · 포인트 #c53722/#ed4328 */
.dev-sec{padding:90px 7%;background:#fbfaf7;border-top:1px solid #dedbd2;}
.dev-inner{max-width:1300px;margin:0 auto;}
.dev-title{margin:20px 0 0;font-size:44px;font-weight:750;letter-spacing:-.055em;line-height:1.15;color:#232321;text-wrap:balance;}
.dev-lead{margin:20px 0 0;max-width:760px;color:#68675e;font-size:17px;line-height:1.85;word-break:keep-all;}

/* 탭 — 10대 철학과 같은 조작, 이 페이지의 에디토리얼(가는 선·각진 칸) 모양 */
.dev-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:40px 0 0;border-top:1px solid #232321;border-bottom:1px solid #bdbeb5;}
.dev-tab{appearance:none;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:16px 16px 14px;text-align:left;background:none;border:0;border-right:1px solid #cfcec5;color:#232321;transition:background .15s;}
.dev-tab:last-child{border-right:0;}
.dev-tab:hover{background:#efeee7;}
.dev-tab .n{font-size:12px;font-weight:700;letter-spacing:.1em;color:#77776e;font-variant-numeric:tabular-nums;}
.dev-tab .t{font-size:17px;font-weight:750;letter-spacing:-.03em;}
.dev-tab[aria-selected="true"]{background:#232321;color:#fff;}
.dev-tab[aria-selected="true"] .n{color:#ff8a70;}
.dev-tab:focus-visible{outline:3px solid #c53722;outline-offset:-3px;}

/* 패널 — 왼쪽 설명 · 오른쪽 캡처 */
.dev-panel{display:none;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;padding:40px 0 0;align-items:start;}
.dev-panel.is-on{display:grid;}
.dev-panel-wide.is-on{grid-template-columns:minmax(0,1fr);gap:22px;}
.dev-copy h3{margin:0;font-size:30px;font-weight:750;letter-spacing:-.05em;line-height:1.2;color:#232321;}
.dev-sub{margin:8px 0 20px;font-size:14px;color:#a93320;}
.dev-p{margin:0 0 16px;color:#4a4a44;font-size:15.5px;line-height:1.85;word-break:keep-all;}
.dev-list{margin:0 0 24px;padding:0;list-style:none;border-top:1px solid #cfcec5;}
.dev-list li{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid #cfcec5;font-size:14.5px;line-height:1.7;word-break:keep-all;}
.dev-list b{font-weight:700;color:#232321;}
.dev-list span{color:#4a4a44;}
.dev-sec code{font-family:ui-monospace,Consolas,monospace;font-size:.9em;background:#ebe9e1;padding:1px 5px;}
.dev-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;}
.dev-off{flex-basis:100%;font-size:13px;color:#a93320;}
.dev-shots .shot-fig:first-child{margin-top:0;}
.dev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px;align-items:start;}
.dev-grid .shot-fig{margin:0;}
.dev-grid .shot-fig figcaption{font-size:13px;}
.dev-play{height:min(72vh,680px);min-height:460px;border:1px solid #cfcec5;background:#232321;}
.dev-play iframe{display:block;width:100%;height:100%;border:0;}

@media (max-width:900px){
  .dev-sec{padding:64px 5%;}
  .dev-title{font-size:34px;}
  .dev-tabs{grid-template-columns:repeat(3,minmax(0,1fr));}
  .dev-tab{border-bottom:1px solid #cfcec5;}
  .dev-panel.is-on{grid-template-columns:minmax(0,1fr);gap:28px;}
}
@media (max-width:520px){
  .dev-tabs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dev-tab:last-child{grid-column:1/-1;}
  .dev-list li{grid-template-columns:minmax(0,1fr);gap:2px;}
  .dev-grid{grid-template-columns:minmax(0,1fr);}
  .dev-play{height:70vh;min-height:420px;}
}
@media (prefers-reduced-motion:reduce){.dev-tab{transition:none;}}