:root{
  --red:#e23d48; --red-d:#c7303b; --navy:#3e4a78; --navy-d:#2e3860;
  --yellow:#f5be4b; --blush:#f9e8e9; --paper:#fbfaf8; --paper-2:#f4f1ea; --ink:#2a2d3e;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(16px,3.4vw,48px);
  --hh:40px; /* 고정 헤더(박스 버튼 한 줄) 높이 */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
.mono{font-family:var(--mono);letter-spacing:0}
.wrap{padding-left:var(--gut);padding-right:var(--gut);max-width:1440px;margin:0 auto;width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* ---------- 헤더: 박스 버튼 ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:6px;pointer-events:none}
.top a{pointer-events:auto;text-decoration:none;font-size:14px;line-height:1;padding:6px 8px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);white-space:nowrap}
.top a:hover,.top a:focus-visible{background:var(--ink);color:var(--paper)}
.top a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.top .logo{font-weight:700;letter-spacing:.02em}
.top nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.top .cta{background:var(--ink);color:var(--paper);margin-left:8px;box-shadow:0 0 0 1px var(--paper)}
.top .cta:hover,.top .cta:focus-visible{background:var(--red-d);border-color:var(--red-d)}

/* ---------- 공통 ---------- */
.crop{position:relative;padding:clamp(12px,3vh,28px) 0}
.crop::before,.crop::after,.crop>.c1,.crop>.c2{content:"";position:absolute;width:10px;height:10px;border:0 solid currentColor;opacity:.75}
.crop::before{top:0;left:0;border-top-width:1px;border-left-width:1px}
.crop::after{top:0;right:0;border-top-width:1px;border-right-width:1px}
.crop>.c1{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.crop>.c2{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.mega{font-weight:600;letter-spacing:-.045em;line-height:.9;margin:0;font-size:clamp(48px,min(10.4vw,14vh),150px)}
.label{font-family:var(--mono);font-size:12.5px;line-height:1.4;letter-spacing:.02em;display:inline-block}
.label.inv{background:var(--ink);color:var(--paper);padding:2px 6px}
section{position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;margin-bottom:clamp(20px,4.5vh,48px)}
.sec-head .mega{margin-top:clamp(8px,1.4vh,14px)}
.sec-head p{margin:0;max-width:30em;font-size:18px;word-break:keep-all}

/* OS 창 */
.win{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-family:var(--mono);font-size:12.5px;line-height:1.45}
.tb{display:flex;align-items:center;gap:6px;height:22px;padding:0 6px;border-bottom:2px solid var(--ink);background:repeating-linear-gradient(180deg,var(--ink) 0 1px,var(--paper) 1px 3px);user-select:none}
.tb span{background:var(--paper);padding:0 6px;font-family:var(--mono);font-size:12px;font-weight:700;margin:0 auto;white-space:nowrap;color:var(--ink);overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tb i{width:11px;height:11px;border:1.5px solid var(--ink);background:var(--paper);flex:none}
.wb{padding:10px 12px}
.badge{display:inline-block;background:var(--ink);color:var(--paper);font-weight:700;font-size:22px;line-height:1;padding:4px 6px;letter-spacing:-.02em;font-family:var(--mono)}
.chip{display:inline-block;border:1px solid var(--ink);padding:0 5px;font-size:12px;margin:2px 2px 0 0}
.bar{height:12px;border:1.5px solid var(--ink);margin-top:8px;position:relative;overflow:hidden;background:var(--paper)}
/* 채움 비율이 없는 반복 막대: 빗금 조각이 왼쪽에서 오른쪽으로 계속 지나간다 */
.bar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 8px);animation:sweep 2.4s steps(16) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}

/* ---------- 히어로: MADOBI OS 데스크톱 (1024px 이상) ---------- */
.hero{background:var(--red-d);padding:44px 6px 6px}
.desk{position:relative;height:clamp(640px,calc(100svh - 50px),1200px);border:2px solid var(--ink);background:var(--red-d);overflow:hidden}
.desk canvas.dither{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.desk-bar{position:absolute;top:0;left:0;right:0;height:26px;background:var(--paper);border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:18px;padding:0 10px;color:var(--ink);font-family:var(--mono);font-size:12.5px;z-index:40;white-space:nowrap;overflow:hidden}
.desk-bar b{font-weight:700}
.desk-bar .stat{margin-left:auto;display:flex;gap:14px}
.desk-bar .stat em{font-style:normal;font-weight:700}
.stage{position:absolute;inset:0;pointer-events:none}
.stage>*{pointer-events:auto}
.stage .win{position:absolute;z-index:2}
.win.drag .tb{cursor:default}
.win.dragging{box-shadow:7px 7px 0 var(--ink)}
.win.dragging .tb{cursor:grabbing}

#w-readme{position:absolute;left:2%;top:7%;width:min(600px,42%);z-index:5}
#w-readme .wb{padding:clamp(14px,2.2vh,22px) clamp(16px,1.6vw,24px);font-family:var(--sans)}
#w-readme .label{display:block;margin-bottom:10px}
.hero h1{font-size:clamp(28px,min(3.6vw,5.6vh),54px);line-height:1.14;letter-spacing:-.035em;font-weight:700;margin:0;word-break:keep-all}
.hero-lead{font-size:clamp(15px,1.9vh,17px);line-height:1.65;margin:12px 0 0;word-break:keep-all}
.hero-lead a{font-weight:700}

#w-motive{left:46%;top:16%;width:min(500px,34%);z-index:4}
#w-signal{right:2%;top:31%;width:250px}
#w-clock{right:2%;top:7%;width:230px}
#w-maestro{left:2%;bottom:7%;width:270px}
#w-log{left:calc(2% + 300px);bottom:5%;width:min(470px,30%);z-index:3}
#w-life{left:62%;bottom:8%;width:140px}
.hi-wrap{position:absolute;right:70px;bottom:-8px;width:min(320px,38vh);z-index:6}
.hi-wrap img{width:100%;filter:drop-shadow(5px 5px 0 rgba(42,45,62,.9))}
.hi-say{position:absolute;left:-70px;top:-46px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--mono);font-size:12.5px;padding:6px 10px;white-space:nowrap}

.mtab{width:100%;border-collapse:collapse}
.mtab td{padding:4px 4px;border-bottom:1px solid var(--ink);white-space:nowrap}
.mtab td:first-child span{background:var(--ink);color:var(--paper);padding:0 5px}
.mtab .trk{width:100%;position:relative}
.mtab .trk::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dotted var(--ink)}
.mtab .dot{position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;background:var(--ink);animation:slide 4s linear infinite}
@keyframes slide{0%{left:0}100%{left:calc(100% - 7px)}}
.mfoot{background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 3px),var(--paper);height:14px;margin-top:8px}
/* 질의 중 대화창: 표를 가리지 않도록 MOTIVE 창 제목줄 위쪽 바깥에 둔다 */
.dialog{position:absolute;right:24px;bottom:calc(100% + 8px);width:200px;background:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);z-index:2}
.dialog .wb{padding:6px 10px 8px}
.dialog .bar{margin-top:5px;height:10px}
.clock-t{font-size:24px;font-weight:700}
#life{display:block;width:100%;height:auto;image-rendering:pixelated}
.log{height:clamp(110px,22vh,188px);overflow:hidden;font-size:12.5px;line-height:1.6;display:flex;flex-direction:column;justify-content:flex-end}
.log .ln{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.log .ts{opacity:.75}
.log .ag{font-weight:700}
.cursor{display:inline-block;width:8px;height:13px;background:var(--ink);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.drag-hint{position:absolute;left:2%;bottom:10px;font-family:var(--mono);font-size:12px;color:#fff;z-index:1;background:var(--ink);padding:2px 8px}

/* ---------- 선언 ---------- */
.manifesto{background:var(--red-d);color:#fff;padding:56px 0 110px}
.manifesto .mega{text-align:center;font-size:clamp(48px,min(9.4vw,13vh),140px)}
.manifesto .mega em{font-style:normal;color:var(--yellow)}
.mf-ko{text-align:center;font-size:clamp(19px,min(2.2vw,3.2vh),28px);font-weight:600;letter-spacing:-.02em;margin:clamp(12px,2.4vh,26px) 0 0;word-break:keep-all}
.cols3{display:grid;grid-template-columns:1fr 1fr 1fr .8fr;gap:36px;margin-top:clamp(24px,5vh,64px)}
.cols3 .label{margin-bottom:clamp(10px,1.8vh,20px)}
.cols3 p{margin:0;font-size:clamp(15px,2.1vh,19px);line-height:1.55;word-break:keep-all}
.hash{font-family:var(--mono);font-size:12px;line-height:1.3;word-break:break-all;max-height:calc(1.3em * 9);overflow:hidden}
.mini3{display:grid;grid-template-columns:repeat(3,minmax(0,240px));margin-top:clamp(22px,5vh,64px)}
.mini3>div{border-left:1px solid #fff;padding:0 18px 4px}
.mini3 p{margin:12px 0 0;font-size:15px;line-height:1.55;word-break:keep-all}
.think{position:absolute;right:var(--gut);bottom:clamp(16px,4vh,40px);width:clamp(110px,18vh,170px)}

/* ---------- 하는 일 (OS 창 카드) ---------- */
.pillars{background:var(--paper-2);padding:120px 0}
.pgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:stretch}
.pcard{display:flex;flex-direction:column}
.pcard .wb{padding:14px 14px 18px;font-family:var(--sans);font-size:15px;flex:1;display:flex;flex-direction:column}
.pcard img{width:clamp(72px,13vh,120px);height:clamp(72px,13vh,120px);object-fit:contain;margin:0 auto 10px}
.pcard h3{font-size:clamp(17px,1.5vw,21px);line-height:1.3;letter-spacing:-.02em;margin:0 0 8px;word-break:keep-all}
.pcard p{margin:0;line-height:1.55;word-break:keep-all}

/* ---------- 만든 것: 10개 창 그리드 + 상세 모달 ---------- */
.made{background:var(--navy-d);color:#fff;padding:120px 0}
.made .sec-head p,.made .label{color:#fff}
.agrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.agrid>li{display:flex}
.app-open{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;cursor:pointer;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 #1b2140;transition:transform .12s,box-shadow .12s}
.app-open:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #1b2140}
.app-open:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.app-open .tb span{font-weight:700}
.app-b{display:flex;flex-direction:column;gap:6px;padding:clamp(10px,1.6vh,16px) 14px;flex:1}
.app-b .nm{font-family:var(--sans);font-size:clamp(17px,1.45vw,22px);font-weight:700;letter-spacing:-.025em;line-height:1.2;word-break:keep-all}
.app-b .one{font-family:var(--sans);font-size:14.5px;line-height:1.5;word-break:keep-all}
.app-f{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px solid var(--ink);padding:7px 10px;font-family:var(--mono);font-size:12px;min-height:36px}
.app-f .more{margin-left:auto;text-decoration:underline;text-underline-offset:3px}
.app-detail[hidden]{display:none}
.st{display:inline-flex;align-items:center;gap:6px;padding:2px 7px;font-family:var(--mono);font-size:12px;font-weight:700;border:1.5px solid var(--ink);white-space:nowrap}
.st::before{content:"";width:7px;height:7px;background:currentColor}
.st.live{background:var(--ink);color:var(--paper)}
.st.live::before{background:var(--yellow)}
.st.dev{background:var(--yellow);color:var(--ink)}
.st.prep{background:var(--blush);color:var(--ink)}
.st.dist{background:var(--paper);color:var(--ink)}
.st.dist::before{background:var(--red)}

.appdlg{padding:0;width:min(640px,calc(100vw - 32px));max-height:calc(100svh - 48px);overflow:auto;box-shadow:8px 8px 0 var(--ink);font-family:var(--sans);font-size:16px}
.appdlg::backdrop{background:rgba(42,45,62,.55)}
.appdlg .tb{position:sticky;top:0;z-index:1;height:30px}
.appdlg .x{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:700;background:var(--paper);border:1.5px solid var(--ink);padding:1px 8px;cursor:pointer}
.appdlg .x:hover,.appdlg .x:focus-visible{background:var(--ink);color:var(--paper)}
.appdlg .tb span{margin:0 auto 0 0}
.appdlg .wb{padding:20px 22px 22px}
.dlg-head{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:12px;align-items:start}
.dlg-head img{width:96px;height:96px;object-fit:contain}
.appdlg h3{margin:0;font-size:28px;letter-spacing:-.03em;line-height:1.15;word-break:keep-all}
.appdlg .en{font-family:var(--mono);font-size:12.5px;margin-top:4px}
.appdlg .dlg-st{margin-top:10px}
.appdlg p{margin:14px 0 0;line-height:1.65;word-break:keep-all}
.facts{margin:16px 0 0;border-top:2px solid var(--ink)}
.facts>div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px dashed var(--ink)}
.facts dt{font-family:var(--mono);font-size:12.5px;font-weight:700;padding-top:2px}
.facts dd{margin:0;word-break:keep-all}
.facts .chip{font-family:var(--mono)}
body.dlg-open{overflow:hidden}

/* ---------- 큰 숫자 ---------- */
.nums{background:var(--yellow);color:var(--ink);padding:110px 0 120px}
.nums .mega{font-size:clamp(46px,min(9.6vw,13vh),150px)}
.foot-note{font-family:var(--mono);font-size:13px;margin-top:14px}
.ngrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin-top:clamp(24px,5vh,64px)}
.ncell{padding:clamp(14px,2.2vh,20px) 18px clamp(14px,2.2vh,20px);background:var(--paper);border:2px solid var(--ink);border-radius:16px;box-shadow:0 3px 0 var(--ink),0 14px 26px -12px rgba(42,45,62,.45)}
.ncell .s{font-family:var(--mono);font-size:12.5px;display:inline-block;background:var(--ink);color:var(--yellow);padding:1px 6px}
.ncell .n{font-size:clamp(44px,min(5.6vw,9vh),84px);font-weight:600;letter-spacing:-.05em;line-height:1;margin-top:12px}
.ncell .k{font-size:17px;font-weight:700;margin-top:10px;word-break:keep-all}

/* ---------- 일하는 방식 ---------- */
.how{background:var(--paper);padding:120px 0}
.how-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,24vh,200px);gap:40px;align-items:center}
.how .win{box-shadow:6px 6px 0 var(--ink)}
.wtab{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:16px}
.wtab th,.wtab td{text-align:left;vertical-align:top;padding:clamp(10px,1.8vh,16px) 16px;border-bottom:1px solid var(--ink);word-break:keep-all}
.wtab tr:last-child th,.wtab tr:last-child td{border-bottom:0}
.wtab thead th{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12.5px;font-weight:500;padding:8px 16px}
.wtab tbody th{font-size:19px;letter-spacing:-.02em;width:24%}
.wtab tbody th .mono{display:block;font-size:12.5px;font-weight:400;margin-bottom:4px}
.wtab td.tools{font-family:var(--mono);font-size:13px;width:26%}
.how-grid>img{width:100%}

/* ---------- Lab Notes (보조) ---------- */
.notes{background:var(--blush);padding:110px 0 120px}
.notes .mega{text-align:center;font-size:clamp(48px,min(8vw,12vh),120px)}
.notes-in{max-width:900px;margin:0 auto}
.feat{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;background:var(--ink);color:var(--paper);padding:30px;margin-top:56px;text-decoration:none}
.feat .label{background:var(--paper);color:var(--ink);padding:2px 6px}
.feat .d{font-family:var(--mono);font-size:12.5px;margin-left:8px}
.feat h3{font-size:clamp(24px,min(3vw,4.4vh),38px);line-height:1.15;letter-spacing:-.03em;margin:14px 0 12px;word-break:keep-all}
.feat p{margin:0;font-size:15px;line-height:1.6;color:#e9e7ef;word-break:keep-all}
.feat .pic{background:var(--red-d);position:relative;display:grid;place-items:center;min-height:200px;padding:0;color:var(--paper)}
.feat .pic img{width:58%}
.feat:hover h3,.feat:focus-visible h3{text-decoration:underline;text-underline-offset:4px}
.nlist{list-style:none;margin:64px auto 0;padding:0;max-width:600px}
.nlist li{border-left:1px dashed var(--ink);padding:2px 0 2px 16px;margin-bottom:40px}
.nlist li[hidden]{display:none}
.nlist a{text-decoration:none;display:block}
.nlist h3{font-size:24px;line-height:1.25;letter-spacing:-.025em;margin:8px 0 10px;font-weight:600;word-break:keep-all}
.nlist a:hover h3,.nlist a:focus-visible h3{text-decoration:underline;text-underline-offset:4px}
.nlist p{margin:0;font-size:15px;line-height:1.6;word-break:keep-all}
.nlist .d{font-family:var(--mono);font-size:12.5px;margin-left:8px}
.all{display:table;margin:10px auto 0;font-family:var(--mono);font-size:13px;border:1px solid var(--ink);padding:8px 14px;text-decoration:none;background:var(--paper)}
.all:hover,.all:focus-visible{background:var(--ink);color:var(--paper)}

/* notes.html */
.npage{background:var(--blush);padding:110px 0 120px}
.npage .mega{text-align:center;font-size:clamp(64px,12vw,180px)}
.npage .intro{text-align:center;margin:20px auto 0;max-width:34em;font-size:17px;word-break:keep-all}
.cats{text-align:center;margin-top:64px}
.cats .label{display:block;margin-bottom:10px}
.cats .row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.cats button{font-family:var(--mono);font-size:13px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:4px 9px;cursor:pointer}
.cats button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cats button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.ncount{text-align:center;font-family:var(--mono);font-size:13px;margin-top:14px}

/* ---------- 푸터 ---------- */
footer{background:var(--ink);color:var(--paper);padding:90px 0 28px}
footer .mega{font-size:clamp(54px,min(13vw,22vh),200px);color:var(--paper)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-top:clamp(24px,6vh,56px);border-top:1px solid #6b6f86;padding-top:24px}
.fgrid p{margin:12px 0 0;font-size:15px;line-height:1.65;word-break:keep-all}
.fgrid .links{margin-top:12px}
.fgrid a{display:block;font-size:15px;margin:0 0 8px;text-underline-offset:3px}
.fbot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,6vh,56px);font-family:var(--mono);font-size:12.5px}

/* ---------- 한 화면 한 섹션: 폭 1024 이상, 높이 700 이상 ---------- */
@media (min-width:1024px) and (min-height:700px){
  html{scroll-snap-type:y proximity;scroll-padding-top:0} /* 헤더는 버튼만 떠 있는 오버레이라 섹션 padding-top으로 헤더 높이를 비운다 */
  main>section,body[data-page="home"] footer{min-height:100svh;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center}
  .manifesto,.pillars,.made,.nums,.how,.notes{padding:calc(var(--hh) + clamp(8px,2.4vh,32px)) 0 clamp(20px,4vh,48px)}
  .hero{padding:44px 6px 6px}
  .desk{height:calc(100svh - 50px)}
  body[data-page="home"] footer{padding:calc(var(--hh) + 3vh) 0 24px}
  /* 끌어 옮기기는 이 폭에서만 켜므로 터치 스크롤 차단도 여기서만 */
  .win.drag .tb{cursor:grab;touch-action:none}

  .made .sec-head p{font-size:16.5px}
  /* Lab Notes: 대표 글 왼쪽, 목록 오른쪽 */
  .notes .notes-in{max-width:1240px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;margin-top:clamp(16px,3.6vh,40px);align-items:start}
  .notes .feat{margin-top:0;grid-template-columns:minmax(0,1fr);gap:18px;padding:clamp(18px,3vh,30px);grid-row:1 / span 2}
  .notes .feat .pic{min-height:0;height:clamp(110px,22vh,240px)}
  .notes .feat .pic img{width:auto;height:clamp(96px,19vh,210px);max-width:none}
  .notes .feat .pic{overflow:hidden}
  .notes .nlist{margin:0;max-width:none}
  .notes .nlist li{margin-bottom:clamp(12px,2.4vh,26px)}
  .notes .nlist h3{font-size:clamp(18px,2.4vh,22px);margin:6px 0 6px}
  .notes .nlist p{font-size:14.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .notes .all{margin:0;grid-column:2;justify-self:start}
}
@media (min-width:1024px) and (min-height:700px) and (max-height:860px){
  .notes .nlist p{display:none}
  .pcard p{font-size:14px}
  .hash{max-height:calc(1.3em * 5)}
}

/* ---------- 반응형 ---------- */
@media (min-width:1600px){
  .wrap{max-width:1680px}
  .stage .win{font-size:13.5px}
  #w-readme{width:min(720px,40%)}
  #w-motive{left:44%;top:18%;width:min(640px,34%)}
  .mtab td{padding:6px 6px}
  #w-maestro{width:310px}
  #w-log{left:calc(2% + 340px);width:min(600px,32%)}
  #w-signal{width:280px}
  #w-clock{width:260px}
  #w-life{left:63%;width:170px}
  .hi-wrap{width:min(400px,40vh);right:90px}
  .clock-t{font-size:28px}
}
@media (max-width:1439px){
  #w-signal,#w-clock,#w-life{display:none}
  #w-motive{left:calc(44% + 40px);width:min(480px,calc(56% - 90px))}
  .hi-say{left:auto;right:10px}
}
@media (max-width:1239px){
  #w-log{left:calc(2% + 290px);width:min(380px,calc(96% - 290px - 300px))}
  .hi-wrap{right:20px;width:min(260px,34vh)}
  .ngrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ncell{padding:14px 12px}
  .ncell .k{font-size:15.5px}
  .pgrid{gap:12px}
  .cols3{gap:24px}
}
@media (min-width:1024px) and (max-width:1239px){
  /* 카드 하단: 상태 칩과 열기를 한 줄에 둔다 */
  .app-f{flex-wrap:nowrap;padding:7px 7px;gap:4px}
  .app-f .st{min-width:0;font-size:11px;padding:2px 5px;gap:4px}
  .app-f .st::before{width:6px;height:6px}
}
@media (max-width:1023px){
  /* 고정 헤더: 반투명 크림에 흐림을 깔아 본문이 비쳐도 글자가 섞이지 않게 한다 */
  .top{background:rgba(250,246,240,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .top nav{flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none;padding:1px 1px 3px}
  .top nav::-webkit-scrollbar{display:none}
  .top .logo{flex:none}
  .top nav{pointer-events:auto}
  .hero{padding:96px 10px 10px}
  .desk{height:auto;padding:38px 12px 0}
  .stage{position:relative;inset:auto;height:480px;margin-top:22px;pointer-events:auto}
  #w-readme{position:relative;left:auto;top:auto;width:auto}
  .desk-bar .hide-s,#w-signal,#w-log,#w-life,#w-maestro,.drag-hint{display:none}
  #w-motive{left:0;top:6px;width:min(440px,calc(100% - 40px))}
  #w-clock{display:block;right:0;top:300px;left:auto;width:190px;z-index:5}
  .clock-t{font-size:20px}
  .dialog{display:none}
  .hi-wrap{right:auto;left:-6px;bottom:-6px;width:190px}
  .hi-say{left:auto;right:-150px;top:18px}
  .hero h1{font-size:clamp(28px,5vw,44px)}
  .cols3{grid-template-columns:1fr 1fr;gap:34px}
  .mini3{grid-template-columns:1fr;gap:22px}
  .think{position:relative;right:auto;bottom:auto;margin:40px 0 0 auto;width:130px}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ngrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .how-grid{grid-template-columns:1fr}
  .how-grid>img{width:140px;margin-left:auto}
  .feat{grid-template-columns:minmax(0,1fr)}
  .fgrid{grid-template-columns:1fr}
  .made,.pillars,.how,.nums,.notes,.manifesto{padding-top:88px;padding-bottom:88px}
}
@media (max-width:640px){
  body{font-size:16px}
  .top{align-items:center}
  .top nav{justify-content:flex-start}
  .top a{font-size:13px;padding:5px 6px}
  .top .cta{margin-left:0}
  .hero{padding-top:56px}
  .desk{padding:32px 8px 0}
  #w-readme .wb{padding:14px 14px 16px}
  #w-readme .label{margin-bottom:6px;font-size:11.5px}
  .hero h1{font-size:26px}
  .hero-lead{font-size:14.5px;line-height:1.6;margin-top:10px}
  /* 모바일 히어로: README 아래에 MOTIVE, 시계, 매도비를 대각선으로 겹쳐 둔다 */
  .stage{height:350px;margin-top:14px}
  .mtab td:last-child{display:none}
  .mtab td{padding:3px 4px}
  .mfoot{display:none}
  #w-motive{top:0;width:calc(100% - 44px)}
  #w-motive .wb{padding:8px 10px}
  #w-clock{top:214px;width:184px}
  #w-clock .wb{font-size:12px;padding:8px 10px}
  .hi-wrap{width:150px;left:-4px}
  .hi-say{display:none}
  .cols3{grid-template-columns:1fr}
  .pgrid{grid-template-columns:minmax(0,1fr);gap:14px}
  .pcard .wb{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 14px;align-items:center}
  .pcard img{width:76px;height:76px;margin:0;grid-row:1 / span 2}
  .pcard p{grid-column:1 / -1;margin-top:10px}
  .agrid{grid-template-columns:minmax(0,1fr);gap:14px}
  .app-b .nm{font-size:20px}
  .ngrid{grid-template-columns:1fr 1fr}
  .ncell{padding:16px 14px}
  .ncell:last-child{grid-column:1 / -1}
  .wtab thead{display:none}
  .wtab,.wtab tbody,.wtab tr,.wtab th,.wtab td{display:block;width:auto!important}
  .wtab tr{border-bottom:2px solid var(--ink)}
  .wtab tr:last-child{border-bottom:0}
  .wtab th,.wtab td{border:0;padding:8px 14px}
  .wtab tbody th{padding-top:16px}
  .wtab td.tools{padding-bottom:16px}
  .feat{padding:20px}
  .nlist h3{font-size:21px}
  .cols3 p{font-size:17px}
  .cols3>div:last-child{display:none}
  .made,.pillars,.how,.nums,.notes,.manifesto{padding-top:84px;padding-bottom:84px}
  .npage{padding-top:110px}
  .sec-head{margin-bottom:28px}
  .sec-head p{font-size:16.5px}
  .appdlg .wb{padding:16px}
  .appdlg h3{font-size:23px}
  .dlg-head{grid-template-columns:minmax(0,1fr) 72px}
  .dlg-head img{width:72px;height:72px}
  .facts>div{grid-template-columns:minmax(0,1fr);gap:2px}
}
/* ---------- 귀여움 레이어: 둥근 창, 파스텔, 매도비 포즈, 반짝이 ---------- */
:root{
  --pink:#f4b6bd; --cream:#fbf3df; --lilac:#eceff9; --mint:#e2f2e8; --mint-d:#2f8a57;
  --soft:0 3px 0 rgba(42,45,62,.88),0 12px 28px -10px rgba(42,45,62,.42);
  --soft-l:0 4px 0 rgba(42,45,62,.88),0 22px 40px -14px rgba(42,45,62,.5);
}
/* 헤더 버튼 */
.top a{border-radius:9px}
.top .cta{border-radius:9px}

/* OS 창: 둥근 모서리, 부드러운 그림자, 연한 줄무늬, 신호등 대신 안테나 볼과 볼 홍조, 노랑 원 */
.win{border-radius:10px;box-shadow:var(--soft)}
.win.dragging{box-shadow:var(--soft-l)}
.how .win{box-shadow:var(--soft)}
.tb{border-radius:8px 8px 0 0;background:repeating-linear-gradient(180deg,rgba(62,74,120,.38) 0 1px,var(--paper) 1px 3px)}
.tb span{border-radius:5px}
.tb i{width:10px;height:10px;border:0;border-radius:50%;background:radial-gradient(circle at 34% 32%,#fff 0 16%,var(--red) 22%)}
/* 창 버튼 3색은 맨 앞 창(README) 하나에만, 나머지 창은 빨간 안테나 볼 하나 */
#w-readme .tb i{box-shadow:14px 0 0 var(--pink),28px 0 0 var(--yellow);margin-right:28px}
.dialog,.hi-say{border-radius:12px;box-shadow:var(--soft)}
.dialog .tb{border-radius:10px 10px 0 0}
.badge{border-radius:6px}
.chip{border-radius:999px;padding:0 8px;background:#fff}
.bar{border-radius:999px}
.bar::after{background:repeating-linear-gradient(90deg,var(--navy) 0 6px,transparent 6px 9px)}
.mtab td:first-child span{border-radius:5px;background:var(--navy)}
.mtab .dot{border-radius:50%;background:var(--red);width:8px;height:8px;margin-top:-4px}
.mfoot{border-radius:999px;background:repeating-linear-gradient(90deg,rgba(62,74,120,.55) 0 1px,transparent 1px 4px),var(--blush)}
.cursor{border-radius:2px;background:var(--red)}
.drag-hint{border-radius:999px;padding:3px 12px}
.label.inv{border-radius:6px;padding:3px 8px;background:var(--navy)}
#life{border-radius:6px}

/* 히어로 매도비: 천천히 숨쉬기, 말풍선 꼬리 */
.hi-wrap img{filter:drop-shadow(0 10px 14px rgba(42,45,62,.35));transform-origin:50% 100%;animation:breathe 3.6s ease-in-out infinite}
.hi-say{padding:7px 14px}
.hi-wrap:hover img{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
footer{position:relative}
.hi-say::after{content:"";position:absolute;right:34px;bottom:-9px;width:14px;height:14px;background:var(--paper);border:2px solid var(--ink);border-top:0;border-left:0;transform:rotate(45deg)}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975) translateY(1px)}}

/* 매도비 포즈: 섹션 모서리에서 고개를 내밀고, 마우스를 올리면 통통 튄다 */
.has-peek{overflow:hidden}
.peek{position:absolute;z-index:0;pointer-events:auto;filter:drop-shadow(0 6px 10px rgba(42,45,62,.28))}
.peek:hover,.hop:hover,.pcard:hover img,.how-grid>img:hover,.think:hover{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-12px) rotate(-3deg)}65%{transform:translateY(-4px) rotate(2deg)}}
.made .wrap{position:relative;z-index:1}
/* 데스크톱: 첫 줄 마지막 카드(signal) 제목줄 위에 앉힌다. 좁은 화면에서는 섹션 아래 모서리의 peek-made를 쓴다 */
.agrid>li{position:relative}
.sit-made{position:absolute;right:10px;bottom:calc(100% - 2px);width:clamp(84px,13vh,120px);z-index:2;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))}
.peek-made{display:none}
@media (min-width:1600px){
  /* 넓은 화면은 설명 문단이 제목 오른쪽에 붙으므로 매도비 자리를 비운다 */
  .made .sec-head{padding-right:clamp(110px,13vh,140px)}
  .made .sec-head p{max-width:22em}
}
@media (max-width:1023px){
  .sit-made{display:none}
  .peek-made{display:block;right:var(--gut);bottom:0;width:80px}
}
.nums .wrap{position:relative;z-index:1}
.peek-nums{right:calc(var(--gut) + 36px);top:calc(var(--hh) + 10vh);width:clamp(120px,24vh,230px)}
footer.has-peek .wrap{position:relative;z-index:1}
.peek-foot{right:var(--gut);top:clamp(70px,14vh,140px);width:clamp(100px,18vh,180px)}

/* 반짝이 장식 (4갈래 별) */
.spk{position:absolute;width:var(--s,14px);height:var(--s,14px);background:var(--c,var(--yellow));clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);pointer-events:none;animation:twinkle 2.8s ease-in-out infinite;z-index:1}
@keyframes twinkle{0%,100%{transform:scale(.7) rotate(0);opacity:.55}50%{transform:scale(1.1) rotate(20deg);opacity:1}}
.trail{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;pointer-events:none;z-index:90;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:trail .7s ease-out forwards}
@keyframes trail{0%{transform:translate(var(--x),var(--y)) scale(1) rotate(0);opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 14px)) scale(.2) rotate(90deg);opacity:0}}

/* 파스텔 섹션 리듬 */
.pillars{background:radial-gradient(rgba(226,61,72,.12) 1.3px,transparent 1.8px) 0 0/22px 22px,var(--blush)}
.how{background:radial-gradient(rgba(62,74,120,.12) 1.3px,transparent 1.8px) 0 0/22px 22px,var(--lilac)}
.notes{background:var(--cream)}

/* 하는 일 카드, 만든 것 카드: 살짝 기울며 떠오르기 */
.pcard{transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s}
.pcard:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--soft-l)}
.app-open{border-radius:12px;box-shadow:0 4px 0 #1b2140,0 16px 28px -12px rgba(0,0,0,.55);transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s}
.app-open .tb{border-radius:10px 10px 0 0}
.app-open:hover{transform:translateY(-6px) rotate(-1.2deg);box-shadow:0 6px 0 #1b2140,0 24px 34px -12px rgba(0,0,0,.6)}
.agrid>li:nth-child(even) .app-open:hover{transform:translateY(-6px) rotate(1.2deg)}
.app-f{border-top:1px dashed rgba(42,45,62,.35)}
.app-f .more{text-decoration:none;border-radius:999px;background:var(--blush);padding:1px 9px}
.app-open:hover .more{background:var(--red-d);color:#fff}

/* 상태 칩: 알약 모양 파스텔 */
.st{border-radius:999px;border:1.5px solid rgba(42,45,62,.18);padding:2px 9px 2px 8px}
.st::before{border-radius:50%}
.st.live{background:var(--mint);color:#1f4d34}
.st.live::before{background:var(--mint-d)}
.st.dev{background:#fdefc6;color:#6b4a07}
.st.dev::before{background:#e0a21f}
.st.prep{background:var(--blush);color:#8a2430}
.st.prep::before{background:var(--red)}
.st.dist{background:var(--lilac);color:var(--navy-d)}
.st.dist::before{background:var(--navy)}

/* 상세 모달 */
.appdlg{border-radius:14px;box-shadow:0 5px 0 var(--ink),0 30px 60px -18px rgba(20,24,44,.6)}
.appdlg .tb{border-radius:12px 12px 0 0}
.appdlg .x{border-radius:999px;padding:1px 10px}
.appdlg::backdrop{background:rgba(46,56,96,.5)}
.appdlg[open] .dlg-head img{animation:hop .7s cubic-bezier(.3,1.6,.5,1) .1s}
.dlg-head img{background:var(--blush);border-radius:50%;padding:6px}
.facts{border-top:2px solid var(--ink)}
.facts>div{border-bottom:1px dashed rgba(42,45,62,.4)}
.facts .chip{background:var(--blush)}

/* 큰 숫자 */
.ncell .s{border-radius:999px;padding:1px 9px;background:#fff;color:var(--navy-d);border:1.5px solid var(--navy);text-transform:uppercase}
.ncell .s-same{visibility:hidden}

/* How We Work 표 */
.wtab thead th{background:var(--navy)}
.wtab th,.wtab td{border-bottom:1px dashed rgba(42,45,62,.35)}
.wtab tbody tr:nth-child(even){background:#fbf8f3}
.wtab tbody th .mono{display:table;border-radius:999px;background:#f6d3d8;color:#8a2430;padding:2px 8px;margin-bottom:6px}
.wtab tbody tr:nth-child(2) th .mono{background:#dcdcf5;color:var(--navy-d)}
.wtab tbody tr:nth-child(3) th .mono{background:#fbe7a6;color:#6b4a07}
.wtab tr:last-child td,.wtab tr:last-child th{border-bottom:0}
.how .win .wtab tbody tr:last-child th{border-bottom-left-radius:8px}

/* Lab Notes */
.feat{border-radius:18px;box-shadow:var(--soft)}
.feat .pic{border-radius:14px;background:radial-gradient(rgba(249,232,233,.35) 1.3px,transparent 1.8px) 0 0/16px 16px,var(--red-d)}
.feat .label{border-radius:6px}
.feat:hover .pic img{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
.nlist li{border-left:2px dotted rgba(226,61,72,.55)}
.all,.cats button{border-radius:999px}
.all{padding:8px 16px}
.npage{background:radial-gradient(rgba(226,61,72,.1) 1.3px,transparent 1.8px) 0 0/22px 22px,var(--blush)}

@media (min-width:1024px) and (max-width:1439px){
  .app-f{flex-wrap:nowrap;gap:6px;min-width:0}
  .app-f .st{padding:2px 6px;flex:0 1 auto;min-width:0;overflow:hidden}
  .app-f .more{padding:1px 6px;white-space:nowrap;flex:none}
}
@media (min-width:1024px) and (max-width:1279px){
  .sit-made{width:min(96px,12vh)}
  /* 칩이 좁으면 말줄임으로 자른다(텍스트 말줄임이 되도록 inline-block) */
  /* 칩을 좁히고, 그래도 넘치면 말줄임으로 자른다(inline-block이라 말줄임이 동작) */
  .app-f .st{display:inline-block;font-size:11px;padding:2px 5px;letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis}
  .app-f .st::before{display:inline-block;width:5px;height:5px;vertical-align:1px;margin-right:3px}
}
@media (max-width:1023px){
  section:not(.hero) .spk,footer .spk{display:none}
  /* 좁은 화면: chart는 제목 오른쪽 위, rocket은 워드마크 오른쪽 위에 작게 */
  .peek-nums{top:48px;bottom:auto;right:var(--gut);width:84px}
  .peek-foot{top:8px;bottom:auto;right:var(--gut);width:72px}
  .hi-say::after{display:none}
}
@media (max-width:640px){
  .wtab th,.wtab td{border-bottom:0}
  .wtab tbody th .mono{padding:1px 10px}
  .peek-nums{width:72px;top:48px}
  .ncell .s-same{display:none}
  .peek-foot{width:72px;top:6px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bar::after{left:0;width:100%;transform:none}
}