https://0-1.kr/ 창업을 희망하는 예비창업자, 직장인, 초보 스타트업대표님들을 위한 필수 지원 프로그램과 창업자금 마련프로그램만을 소개해 드립니다. ko Thu, 5 Nov 2026 04:00:30 +0900 TISTORY 100 최매슨생 https://tistory1.daumcdn.net/tistory/4330872/attach/216e2b43a4c44f79aa3c5c0762dbbe20 https://0-1.kr https://0-1.kr/129 <!-- 린&9캔버스 작성기 (한 사람용) v1 : 작성 -> 공유링크 / PDF 저장 --> <div id="sc9_root">린캔버스·9캔버스 작성기를 불러오는 중입니다...</div> <script> /* ---- LZString (MIT License, https://github.com/pieroxy/lz-string) 임베드 ---- */ var LZString=function(){var r=String.fromCharCode,o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",e={};function t(r,o){if(!e[r]){e[r]={};for(var n=0;n<r.length;n++)e[r][r.charAt(n)]=n}return e[r][o]}var i={compressToBase64:function(r){if(null==r)return"";var n=i._compress(r,6,function(r){return o.charAt(r)});switch(n.length%4){default:case 0:return n;case 1:return n+"===";case 2:return n+"==";case 3:return n+"="}},decompressFromBase64:function(r){return null==r?"":""==r?null:i._decompress(r.length,32,function(n){return t(o,r.charAt(n))})},compressToUTF16:function(o){return null==o?"":i._compress(o,15,function(o){return r(o+32)})+" "},decompressFromUTF16:function(r){return null==r?"":""==r?null:i._decompress(r.length,16384,function(o){return r.charCodeAt(o)-32})},compressToUint8Array:function(r){for(var o=i.compress(r),n=new Uint8Array(2*o.length),e=0,t=o.length;e<t;e++){var s=o.charCodeAt(e);n[2*e]=s>>>8,n[2*e+1]=s%256}return n},decompressFromUint8Array:function(o){if(null==o)return i.decompress(o);for(var n=new Array(o.length/2),e=0,t=n.length;e<t;e++)n[e]=256*o[2*e]+o[2*e+1];var s=[];return n.forEach(function(o){s.push(r(o))}),i.decompress(s.join(""))},compressToEncodedURIComponent:function(r){return null==r?"":i._compress(r,6,function(r){return n.charAt(r)})},decompressFromEncodedURIComponent:function(r){return null==r?"":""==r?null:(r=r.replace(/ /g,"+"),i._decompress(r.length,32,function(o){return t(n,r.charAt(o))}))},compress:function(o){return i._compress(o,16,function(o){return r(o)})},_compress:function(r,o,n){if(null==r)return"";var e,t,i,s={},u={},a="",p="",c="",l=2,f=3,h=2,d=[],m=0,v=0;for(i=0;i<r.length;i+=1)if(a=r.charAt(i),Object.prototype.hasOwnProperty.call(s,a)||(s[a]=f++,u[a]=!0),p=c+a,Object.prototype.hasOwnProperty.call(s,p))c=p;else{if(Object.prototype.hasOwnProperty.call(u,c)){if(c.charCodeAt(0)<256){for(e=0;e<h;e++)m<<=1,v==o-1?(v=0,d.push(n(m)),m=0):v++;for(t=c.charCodeAt(0),e=0;e<8;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}else{for(t=1,e=0;e<h;e++)m=m<<1|t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t=0;for(t=c.charCodeAt(0),e=0;e<16;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}0==--l&&(l=Math.pow(2,h),h++),delete u[c]}else for(t=s[c],e=0;e<h;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;0==--l&&(l=Math.pow(2,h),h++),s[p]=f++,c=String(a)}if(""!==c){if(Object.prototype.hasOwnProperty.call(u,c)){if(c.charCodeAt(0)<256){for(e=0;e<h;e++)m<<=1,v==o-1?(v=0,d.push(n(m)),m=0):v++;for(t=c.charCodeAt(0),e=0;e<8;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}else{for(t=1,e=0;e<h;e++)m=m<<1|t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t=0;for(t=c.charCodeAt(0),e=0;e<16;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}0==--l&&(l=Math.pow(2,h),h++),delete u[c]}else for(t=s[c],e=0;e<h;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;0==--l&&(l=Math.pow(2,h),h++)}for(t=2,e=0;e<h;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;for(;;){if(m<<=1,v==o-1){d.push(n(m));break}v++}return d.join("")},decompress:function(r){return null==r?"":""==r?null:i._decompress(r.length,32768,function(o){return r.charCodeAt(o)})},_decompress:function(o,n,e){var t,i,s,u,a,p,c,l=[],f=4,h=4,d=3,m="",v=[],g={val:e(0),position:n,index:1};for(t=0;t<3;t+=1)l[t]=t;for(s=0,a=Math.pow(2,2),p=1;p!=a;)u=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=e(g.index++)),s|=(u>0?1:0)*p,p<<=1;switch(s){case 0:for(s=0,a=Math.pow(2,8),p=1;p!=a;)u=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=e(g.index++)),s|=(u>0?1:0)*p,p<<=1;c=r(s);break;case 1:for(s=0,a=Math.pow(2,16),p=1;p!=a;)u=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=e(g.index++)),s|=(u>0?1:0)*p,p<<=1;c=r(s);break;case 2:return""}for(l[3]=c,i=c,v.push(c);;){if(g.index>o)return"";for(s=0,a=Math.pow(2,d),p=1;p!=a;)u=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=e(g.index++)),s|=(u>0?1:0)*p,p<<=1;switch(c=s){case 0:for(s=0,a=Math.pow(2,8),p=1;p!=a;)u=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=e(g.index++)),s|=(u>0?1:0)*p,p<<=1;l[h++]=r(s),c=h-1,f--;break;case 1:for(s=0,a=Math.pow(2,16),p=1;p!=a;)u=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=e(g.index++)),s|=(u>0?1:0)*p,p<<=1;l[h++]=r(s),c=h-1,f--;break;case 2:return v.join("")}if(0==f&&(f=Math.pow(2,d),d++),l[c])m=l[c];else{if(c!==h)return null;m=i+i.charAt(0)}v.push(m),l[h++]=i+m.charAt(0),i=m,0==--f&&(f=Math.pow(2,d),d++)}}};return i}(); (function(){ 'use strict'; var KEY = 'sc9_single_v1'; var GUIDE = { bmc: { partners:'협력사·공급사·제휴처', activities:'가치를 만들려고 해야 할 일', resources:'인력·기술·자금·설비', value:'고객의 문제를 어떻게 해결해 주나요? (차별점 1~2줄)', relationships:'커뮤니티·상담·멤버십', channels:'온라인몰·매장·SNS', segments:'누구에게 팔까요? (연령·특징·니즈)', costs:'인건비·원재료비·마케팅비', revenue:'판매·구독료·수수료', memo:'아이디어 부연설명, 보완할 점, 궁금한 점을 자유롭게 적어보세요' }, lean: { problem:'고객이 겪는 가장 큰 문제 1~3가지', solution:'그 문제를 푸는 핵심 솔루션', metrics:'성공을 재는 지표 (재방문율·전환율)', uvp:'우리만의 가치를 한 문장으로', advantage:'남들이 따라하기 힘든 강점', channels:'고객에게 다가가는 방법', segments:'우리 제품이 필요한 목표 고객군', costs:'인건비·원재료비·마케팅비', revenue:'판매·구독료·수수료', memo:'아이디어 부연설명, 보완할 점, 궁금한 점을 자유롭게 적어보세요' } }; var FIELDS = { bmc: [ {k:'partners',l:'핵심 파트너십'},{k:'activities',l:'핵심 활동'},{k:'resources',l:'핵심 자원'}, {k:'value',l:'가치 제안'},{k:'relationships',l:'고객 관계'},{k:'channels',l:'채널'}, {k:'segments',l:'고객 세그먼트'},{k:'costs',l:'비용 구조'},{k:'revenue',l:'수익원'}, {k:'memo',l:'메모 (아이디어 부연설명)'} ], lean: [ {k:'problem',l:'문제'},{k:'solution',l:'솔루션'},{k:'metrics',l:'핵심 지표'}, {k:'uvp',l:'고유 가치 제안'},{k:'advantage',l:'경쟁 우위'},{k:'channels',l:'채널'}, {k:'segments',l:'고객군'},{k:'costs',l:'비용 구조'},{k:'revenue',l:'수익원'}, {k:'memo',l:'메모 (아이디어 부연설명)'} ] }; var INDUSTRIES = [ {key:'it', label:'IT/소프트웨어'}, {key:'app', label:'앱개발'}, {key:'mfg', label:'제조업'}, {key:'svc', label:'서비스업'}, {key:'retail', label:'유통/커머스'}, {key:'fnb', label:'F&B'}, {key:'edu', label:'교육'}, {key:'health', label:'헬스케어/바이오'}, {key:'content', label:'콘텐츠/미디어'}, {key:'green', label:'그린테크'} ]; var EXAMPLES = { bmc: { it:{partners:'클라우드 서버사(AWS), 결제대행사, 오픈소스 커뮤니티',activities:'서비스 개발·운영, 고객 온보딩, 보안 관리',resources:'개발 인력, 서버 인프라, 자체 알고리즘',value:'업무 효율을 높여주는 올인원 협업 솔루션',relationships:'무료체험 후 유료전환, 실시간 채팅 상담',channels:'자사 웹사이트, 앱스토어, 파트너 재판매',segments:'스타트업 및 중소기업 팀, 원격근무 조직',costs:'서버 호스팅비, 개발 인건비, 마케팅비',revenue:'월 구독료(SaaS), 프리미엄 기능 과금'}, app:{partners:'동물병원, 펫시터 네트워크, 사료·용품업체',activities:'앱 개발·업데이트, 매칭 알고리즘 운영, 시터 검증',resources:'개발팀, 시터 데이터베이스, 앱 플랫폼',value:'믿을 수 있는 펫시터를 빠르게 매칭',relationships:'앱 내 리뷰·평점, 채팅 상담',channels:'앱스토어, SNS 광고, 인플루언서 협업',segments:'1인가구 반려인, 맞벌이 반려동물 보호자',costs:'앱 유지보수비, 마케팅비, 시터 관리비',revenue:'중개 수수료, 프리미엄 구독료'}, mfg:{partners:'원자재 공급업체, OEM 생산공장, 물류사',activities:'제품 설계·생산, 품질관리, 유통망 관리',resources:'생산설비, 특허 기술, 숙련 생산인력',value:'내구성 좋은 친환경 소재의 프리미엄 텀블러',relationships:'A/S 보증, 정기 뉴스레터',channels:'자사몰, 오프라인 편집숍, 대형마트 입점',segments:'친환경 소비 지향 2030 소비자',costs:'원자재비, 생산설비 유지비, 물류비',revenue:'제품 판매 매출, B2B 대량납품'}, svc:{partners:'정리컨설턴트 프리랜서망, 수납용품업체',activities:'방문 상담·시공, 인력 스케줄 관리',resources:'숙련된 정리 컨설턴트, 예약관리 시스템',value:'시간 없는 1인가구를 위한 맞춤 정리수납',relationships:'방문 후 사후관리 체크, 재이용 할인',channels:'네이버예약, 지역 커뮤니티앱, 블로그 후기',segments:'바쁜 직장인 1인가구, 신혼부부',costs:'인건비, 용품 구매비, 플랫폼 수수료',revenue:'서비스 이용료(건별/구독형)'}, retail:{partners:'지역 농가, 냉장물류업체, 결제PG사',activities:'상품 소싱, 주문처리·배송, 품질검수',resources:'물류창고, 배송 네트워크, 자체 플랫폼',value:'신선한 지역농산물을 다음날 새벽 배송',relationships:'정기구독 관리, 불량품 즉시 환불',channels:'자사 커머스앱, 인스타그램, 지역맘카페',segments:'신선식품을 원하는 가정, 소규모 식당',costs:'물류·배송비, 재고 손실비, 운영비',revenue:'상품 판매마진, 정기구독 매출'}, fnb:{partners:'비건 식자재 공급처, 배달앱, 인테리어업체',activities:'메뉴 개발, 매장 운영, 위생관리',resources:'매장 공간, 레시피 노하우, 조리인력',value:'맛과 건강을 동시에 챙기는 비건 디저트',relationships:'단골 적립제, SNS 소통',channels:'오프라인 매장, 배달앱, SNS 마켓',segments:'비건 지향 소비자, 건강식 선호 2030',costs:'임대료, 식자재비, 인건비',revenue:'매장 판매, 배달 매출, 원데이클래스'}, edu:{partners:'학교·학원, 콘텐츠 개발 프리랜서, 교육청',activities:'커리큘럼 개발, 온라인강의 제작, 학습관리',resources:'강사진, 학습플랫폼, 교육 콘텐츠',value:'눈높이에 맞춘 재미있는 코딩 학습 경험',relationships:'학부모 리포트 제공, 1:1 학습상담',channels:'학원 제휴, 온라인 광고, 학부모 커뮤니티',segments:'초등학생 학부모, 방과후 교육 수요층',costs:'강사 인건비, 콘텐츠 제작비, 플랫폼 유지비',revenue:'월 수강료, 학원 라이선스 판매'}, health:{partners:'병원·의료진, 웨어러블 기기 제조사, 보험사',activities:'건강데이터 분석, 앱 개발, 의료진 연계',resources:'의료 데이터, 알고리즘, 의료자문단',value:'만성질환자를 위한 맞춤 건강관리 솔루션',relationships:'주치의 상담 연결, 건강리포트 제공',channels:'병원 제휴, 앱스토어, 건강보험 연계',segments:'만성질환 환자, 건강관리 필요 중장년층',costs:'데이터 인프라비, 의료자문비, 인증비용',revenue:'구독료, 보험사 제휴 수수료'}, content:{partners:'크리에이터·강사, 콘텐츠 제작 스튜디오',activities:'콘텐츠 큐레이션, 플랫폼 운영, 크리에이터 관리',resources:'콘텐츠 라이브러리, 스트리밍 플랫폼',value:'다양한 취미를 원하는 만큼 배우는 구독 서비스',relationships:'크리에이터 소통 커뮤니티, 학습 알림',channels:'자체 앱, 유튜브·SNS 홍보',segments:'자기계발에 관심 많은 2030',costs:'콘텐츠 제작·라이선스비, 서버비',revenue:'월 구독료, 광고 수익'}, green:{partners:'태양광 패널 제조사, 시공업체, 지자체',activities:'설치 컨설팅, 시공관리, 발전량 모니터링',resources:'기술 인력, 설치 파트너망, 모니터링 시스템',value:'초기비용 부담을 줄인 우리집 미니 태양광',relationships:'발전량 리포트 제공, A/S 관리',channels:'지자체 보조사업 연계, 온라인 신청',segments:'에너지비용 절감을 원하는 주택 소유자',costs:'설비 구매비, 시공 인건비, 유지보수비',revenue:'설치 판매, 발전량 기반 리스료'} }, lean: { it:{problem:'여러 툴에 흩어진 업무로 협업 효율 저하',solution:'하나의 앱에서 일정·문서·채팅을 통합 관리',metrics:'주간 활성사용자(WAU), 유료전환율',uvp:'팀 업무를 하나로 모으는 올인원 협업툴',advantage:'자체 개발 실시간 동기화 기술, 선점 데이터',channels:'웹사이트, 앱스토어, B2B 세일즈',segments:'스타트업 및 중소기업 팀',costs:'서버비, 개발인건비, 마케팅비',revenue:'월 구독료, 프리미엄 과금'}, app:{problem:'믿을만한 펫시터를 급하게 구하기 어려움',solution:'검증된 시터를 실시간으로 매칭해주는 앱',metrics:'매칭 성사율, 재이용률',uvp:'검증된 펫시터를 빠르게 매칭',advantage:'자체 검증 시스템과 축적된 시터 데이터',channels:'앱스토어, SNS, 인플루언서',segments:'1인가구·맞벌이 반려인',costs:'앱 유지비, 마케팅비, 시터관리비',revenue:'중개수수료, 구독료'}, mfg:{problem:'일회용 텀블러로 인한 환경오염과 내구성 불만',solution:'내구성 높은 친환경 소재 텀블러 생산',metrics:'재구매율, 생산 불량률',uvp:'한번 사면 오래 쓰는 친환경 텀블러',advantage:'독자 개발 친환경 소재 특허',channels:'자사몰, 편집숍, 대형마트',segments:'친환경 소비 지향 소비자',costs:'원자재비, 생산비, 물류비',revenue:'제품 판매, B2B 납품'}, svc:{problem:'바쁜 1인가구는 집 정리할 시간이 없음',solution:'전문가가 방문해 맞춤 정리수납 대행',metrics:'예약 전환율, 재이용률',uvp:'반나절 만에 끝나는 맞춤 정리수납',advantage:'축적된 노하우와 전문 컨설턴트 네트워크',channels:'네이버예약, 커뮤니티앱, 블로그',segments:'바쁜 직장인 1인가구',costs:'인건비, 용품비, 플랫폼 수수료',revenue:'서비스 이용료'}, retail:{problem:'마트 농산물은 신선도와 원산지 신뢰 부족',solution:'산지 직송 새벽배송 커머스',metrics:'재구매율, 배송 정시율',uvp:'수확 다음날 식탁에 오르는 신선함',advantage:'지역 농가 직거래 네트워크',channels:'자사앱, SNS, 맘카페',segments:'신선식품을 원하는 가정',costs:'물류비, 재고손실비, 운영비',revenue:'판매마진, 구독매출'}, fnb:{problem:'비건 소비자는 만족스러운 디저트 선택지가 적음',solution:'맛과 건강을 잡은 비건 디저트 카페 운영',metrics:'재방문율, 객단가',uvp:'비건도 맛있게 즐기는 디저트',advantage:'독자 레시피와 브랜드 충성고객',channels:'오프라인 매장, 배달앱, SNS',segments:'비건·건강식 지향 소비자',costs:'임대료, 식자재비, 인건비',revenue:'매장·배달 판매, 클래스'}, edu:{problem:'아이들이 흥미를 잃는 딱딱한 코딩 교육',solution:'게임형 커리큘럼으로 배우는 온라인 코딩 교육',metrics:'수강 지속률, 학부모 만족도',uvp:'아이가 스스로 계속하고 싶어지는 코딩 수업',advantage:'자체 개발 게이미피케이션 커리큘럼',channels:'학원 제휴, 온라인광고, 학부모 커뮤니티',segments:'초등학생 학부모',costs:'강사비, 콘텐츠 제작비, 플랫폼비',revenue:'수강료, 라이선스 판매'}, health:{problem:'만성질환자는 일상에서 꾸준한 관리가 어려움',solution:'데이터 기반 맞춤 건강관리 앱 제공',metrics:'일일 기록 유지율, 재구독률',uvp:'매일 이어지는 나만의 건강관리 코치',advantage:'축적된 건강데이터와 의료진 네트워크',channels:'병원제휴, 앱스토어, 보험연계',segments:'만성질환 환자, 건강관리 필요층',costs:'데이터인프라비, 의료자문비, 인증비용',revenue:'구독료, 보험사 제휴수수료'}, content:{problem:'배우고 싶은 취미는 많지만 정보가 흩어져있음',solution:'다양한 취미클래스를 한 곳에서 구독',metrics:'월간 시청시간, 구독 유지율',uvp:'관심있는 취미를 무제한으로 배우는 구독서비스',advantage:'다양한 크리에이터 확보와 콘텐츠 큐레이션 노하우',channels:'자체앱, 유튜브, SNS',segments:'자기계발 관심 2030',costs:'콘텐츠 제작·라이선스비, 서버비',revenue:'구독료, 광고수익'}, green:{problem:'태양광 설치는 초기비용 부담이 커서 망설임',solution:'초기비용 낮춘 소형 태양광 설치 서비스',metrics:'설치 신청 전환율, 발전 효율',uvp:'부담 없이 시작하는 우리집 태양광',advantage:'지자체 보조금 연계 노하우와 시공 네트워크',channels:'지자체 연계, 온라인 신청',segments:'에너지비용 절감 원하는 주택소유자',costs:'설비비, 시공인건비, 유지보수비',revenue:'설치판매, 발전량 기반 리스료'} } }; var CSS = [ '#sc9_root{max-width:760px;margin:0 auto;font-family:-apple-system,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:#222;line-height:1.4;text-align:left;box-sizing:border-box}', '#sc9_root *{box-sizing:border-box}', '#sc9_root .sc9_title{background:#1f2b47;color:#fff;font-size:16px;font-weight:700;padding:12px 16px;border-radius:10px;margin:0 0 10px}', '#sc9_root .sc9_tabs{display:flex;gap:6px;margin:0 0 8px}', '#sc9_root .sc9_tab{flex:1;padding:10px 0;border:1px solid #ccc;border-radius:8px;background:#f5f5f5;font-size:14px;font-weight:600;color:#333;cursor:pointer;margin:0;font-family:inherit}', '#sc9_root .sc9_tab.sc9_on{background:#2d5be3;border-color:#2d5be3;color:#fff}', '#sc9_root .sc9_exrow{display:flex;gap:6px;margin:0 0 4px}', '#sc9_root .sc9_exrow select{flex:1;min-width:0;padding:8px;border:1px solid #ccc;border-radius:6px;font-size:13px;background:#fff;color:#222;margin:0;font-family:inherit;height:auto}', '#sc9_root .sc9_btn{padding:8px 12px;border:1px solid #ccc;border-radius:6px;background:#fff;font-size:13px;color:#222;line-height:1.2;cursor:pointer;margin:0;font-family:inherit;height:auto}', '#sc9_root .sc9_btn.sc9_pri{background:#2d5be3;border-color:#2d5be3;color:#fff}', '#sc9_root .sc9_note{font-size:11px;color:#888;margin:0 0 8px;padding:0}', '#sc9_root .sc9_banner{display:flex;gap:8px;align-items:center;justify-content:space-between;background:#fff6e0;border:1px solid #f0d58a;border-radius:8px;padding:8px 10px;margin:0 0 8px;font-size:12px;color:#6b4e00}', '#sc9_root .sc9_stage{background:transparent}', '#sc9_root .sc9_bar{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px;gap:8px}', '#sc9_root .sc9_barTxt{font-size:12px;color:#888}', '#sc9_root .sc9_grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(104px,auto);gap:3px;grid-template-areas:"s1 s2 s4 s5 s7" "s1 s3 s4 s6 s7"}', '#sc9_root .sc9_row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(84px,auto);gap:3px;margin-top:8px;padding-top:8px;border-top:2px solid #d7ddec}', '#sc9_root .sc9_memo{margin-top:8px;padding-top:8px;border-top:2px solid #d7ddec}', '#sc9_root .sc9_memo .sc9_k{min-height:84px}', '#sc9_root .sc9_k{display:flex;flex-direction:column;background:#f4f6fb;border-radius:6px;padding:5px;min-width:0}', '#sc9_root .sc9_k label{display:block;font-size:11px;font-weight:700;color:#5a6b8c;margin:0 0 3px;line-height:1.25;padding:0}', '#sc9_root .sc9_k textarea{flex:1;display:block;width:100%;min-height:64px;border:1px solid #d5dbea;border-radius:4px;background:#fff;color:#222;font-size:12px;line-height:1.4;padding:4px;resize:none;font-family:inherit;margin:0}', '#sc9_root .sc9_k textarea::placeholder{color:#a3acc0}', '#sc9_root .sc9_meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}', '#sc9_root .sc9_meta input{width:100%;border:1px solid #ccd4e6;background:#fff;border-radius:4px;padding:7px;font-size:13px;color:#222;margin:0;font-family:inherit;height:auto}', '#sc9_root .sc9_actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid #ddd}', '#sc9_root .sc9_actions .sc9_btn{flex:1;min-width:110px;padding:11px;font-weight:700}', '#sc9_root .sc9_chk{flex-basis:100%;font-size:12px;color:#555;display:flex;align-items:center;gap:6px;margin:0}', '#sc9_root .sc9_res{display:none;margin-top:10px;background:#f4f6fb;border-radius:8px;padding:8px 10px}', '#sc9_root .sc9_res.sc9_show{display:block}', '#sc9_root .sc9_status{font-size:12px;color:#555;margin:0 0 6px}', '#sc9_root .sc9_res textarea{display:block;width:100%;height:68px;border:1px solid #ccd4e6;border-radius:4px;padding:6px;font-size:11px;font-family:monospace;background:#fff;color:#222;margin:0 0 6px;resize:none}', '#sc9_root .sc9_stage.sc9_full{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:2147483000;background:#000;overflow:auto;padding:10px 10px 28px;-webkit-overflow-scrolling:touch}', '#sc9_root .sc9_full .sc9_barTxt{color:#9aa3b2;font-size:13px}', '#sc9_root .sc9_full .sc9_btn{background:#1c1c1c;border-color:#333;color:#eee}', '#sc9_root .sc9_full .sc9_k{background:#161616}', '#sc9_root .sc9_full .sc9_k label{color:#9aa3b2;font-size:12px}', '#sc9_root .sc9_full .sc9_k textarea{background:#0b0b0b;border-color:#333;color:#f2f2f2;font-size:14px}', '#sc9_root .sc9_full .sc9_k textarea::placeholder{color:#5c6270}', '#sc9_root .sc9_full .sc9_grid{grid-auto-rows:minmax(24vh,auto)}', '#sc9_root .sc9_full .sc9_row2{grid-auto-rows:minmax(16vh,auto);border-top-color:#333}', '#sc9_root .sc9_full .sc9_memo{border-top-color:#333}', '#sc9_root .sc9_full .sc9_meta input{background:#0b0b0b;border-color:#333;color:#f2f2f2}', '@media (max-width:480px){', '#sc9_root .sc9_k label{font-size:10px}', '#sc9_root .sc9_k textarea{font-size:11px;min-height:56px}', '#sc9_root .sc9_grid{grid-auto-rows:minmax(96px,auto)}', '#sc9_root .sc9_meta{grid-template-columns:1fr}', '#sc9_root .sc9_full .sc9_k textarea{font-size:13px}', '}' ].join('\n'); var PRINT_EXTRA = [ 'body{margin:0;padding:8px;background:#fff}', '#sc9_root.sc9_print{max-width:none}', '#sc9_root .sc9_ptitle{font-size:18px;font-weight:700;margin:0 0 2px}', '#sc9_root .sc9_pdate{font-size:12px;color:#666;margin:0 0 10px}', '#sc9_root .sc9_v{font-size:11.5px;line-height:1.5;white-space:pre-wrap;word-break:break-all;color:#222}', '#sc9_root.sc9_print .sc9_k{border:1px solid #d9deec}', '@page{size:A4 landscape;margin:10mm}' ].join('\n'); var state = { type:'bmc', meta:{team:'',item:'',members:''}, values:{bmc:{},lean:{}}, ex:'', ro:false, shareRO:false, full:false, result:null }; var saveTimer = null, savedOverflow = '', nativeFS = false; function typeLabel(t){ return t === 'lean' ? '린캔버스' : '9캔버스'; } function fieldsOf(t){ return t === 'lean' ? FIELDS.lean : FIELDS.bmc; } function getVal(t,k){ return state.values[t][k] || ''; } function trim(s){ return String(s||'').replace(/^\s+|\s+$/g,''); } function hasContent(t){ var fs = fieldsOf(t); for(var i=0;i<fs.length;i++){ if(trim(getVal(t,fs[i].k))) return true; } return false; } function titleOf(){ var s = ''; if(state.meta.team) s += state.meta.team; if(state.meta.item) s += (s ? '_' : '') + state.meta.item; return s; } function todayStr(){ var d = new Date(); return d.getFullYear() + '.' + ('0'+(d.getMonth()+1)).slice(-2) + '.' + ('0'+d.getDate()).slice(-2); } function placeholderFor(t,k){ var ex = state.ex && EXAMPLES[t] && EXAMPLES[t][state.ex]; if(ex && ex[k]) return ex[k]; return GUIDE[t][k] || ''; } /* ---- DOM 생성 도우미 (문자열 HTML을 쓰지 않음) ---- */ function mk(doc, tag, o, kids){ var e = doc.createElement(tag), k; if(o){ for(k in o){ if(!o.hasOwnProperty(k)) continue; if(k === 'cls') e.className = o[k]; else if(k === 'text') e.textContent = o[k]; else e.setAttribute(k, o[k]); } } if(kids){ for(var i=0;i<kids.length;i++){ if(kids[i] == null) continue; e.appendChild(kids[i]); } } return e; } function block(doc, t, f, vals, mode){ var d = mk(doc,'div',{cls:'sc9_k'}); d.appendChild(mk(doc,'label',{text:f.l})); if(mode === 'print'){ d.appendChild(mk(doc,'div',{cls:'sc9_v',text:vals[f.k] || ''})); } else { var ta = mk(doc,'textarea',{'data-k':f.k,placeholder:placeholderFor(t,f.k)}); ta.value = vals[f.k] || ''; if(state.ro) ta.setAttribute('readonly','readonly'); d.appendChild(ta); } return d; } function buildCanvas(doc, t, vals, mode){ var fs = fieldsOf(t), i, b; var frag = doc.createDocumentFragment(); var grid = mk(doc,'div',{cls:'sc9_grid'}); for(i=0;i<7;i++){ b = block(doc,t,fs[i],vals,mode); b.style.gridArea = 's' + (i+1); grid.appendChild(b); } frag.appendChild(grid); var row2 = mk(doc,'div',{cls:'sc9_row2'}); row2.appendChild(block(doc,t,fs[7],vals,mode)); row2.appendChild(block(doc,t,fs[8],vals,mode)); frag.appendChild(row2); var memo = mk(doc,'div',{cls:'sc9_memo'}); memo.appendChild(block(doc,t,fs[9],vals,mode)); frag.appendChild(memo); return frag; } function metaInput(doc, key, label, ph){ var wrap = mk(doc,'div'); var inp = mk(doc,'input',{type:'text','data-m':key,placeholder:ph,title:label}); inp.value = state.meta[key] || ''; if(state.ro) inp.setAttribute('readonly','readonly'); wrap.appendChild(inp); return wrap; } function barText(){ return state.full ? ('크게보기 · ' + typeLabel(state.type)) : '가이드를 보면서 바로 작성하세요'; } /* ---- 화면 그리기 ---- */ function render(){ var root = document.getElementById('sc9_root'); if(!root) return; while(root.firstChild){ root.removeChild(root.firstChild); } var d = document, i; root.appendChild(mk(d,'div',{cls:'sc9_title',text:'린&9캔버스 작성기'})); var tabs = mk(d,'div',{cls:'sc9_tabs'}); tabs.appendChild(mk(d,'button',{cls:'sc9_tab' + (state.type==='bmc'?' sc9_on':''),'data-act':'tab','data-v':'bmc',type:'button',text:'9캔버스'})); tabs.appendChild(mk(d,'button',{cls:'sc9_tab' + (state.type==='lean'?' sc9_on':''),'data-act':'tab','data-v':'lean',type:'button',text:'린캔버스'})); root.appendChild(tabs); var exrow = mk(d,'div',{cls:'sc9_exrow'}); var sel = mk(d,'select',{'data-act':'ex',title:'업종을 고르면 서식의 회색 글씨가 그 업종 예시로 바뀝니다'}); sel.appendChild(mk(d,'option',{value:'',text:'업종별 예시 보기 (선택 안 함)'})); for(i=0;i<INDUSTRIES.length;i++){ sel.appendChild(mk(d,'option',{value:INDUSTRIES[i].key,text:INDUSTRIES[i].label})); } sel.value = state.ex; exrow.appendChild(sel); exrow.appendChild(mk(d,'button',{cls:'sc9_btn','data-act':'exfill',type:'button',title:'고른 업종 예시를 칸에 실제 내용으로 채워서 수정할 수 있게 합니다',text:'예시로 채우기'})); root.appendChild(exrow); root.appendChild(mk(d,'p',{cls:'sc9_note',text:'칸 안의 회색 글씨는 작성 가이드(또는 예시)예요. 직접 쓰면 사라집니다.'})); if(state.ro){ var ban = mk(d,'div',{cls:'sc9_banner'}); ban.appendChild(mk(d,'span',{text:'읽기 전용으로 공유된 캔버스예요.'})); ban.appendChild(mk(d,'button',{cls:'sc9_btn','data-act':'unlock',type:'button',title:'이 화면에서 내용을 고칠 수 있게 합니다 (보낸 사람 것은 바뀌지 않아요)',text:'수정하기'})); root.appendChild(ban); } var stage = mk(d,'div',{id:'sc9_stage',cls:'sc9_stage' + (state.full ? ' sc9_full' : '')}); var bar = mk(d,'div',{cls:'sc9_bar'}); bar.appendChild(mk(d,'span',{cls:'sc9_barTxt',id:'sc9_barTxt',text:barText()})); bar.appendChild(mk(d,'button',{cls:'sc9_btn',id:'sc9_fullBtn','data-act':'full',type:'button',title:'화면을 꽉 채운 검은 배경에서 작성합니다',text:state.full ? '닫기' : '크게보기'})); stage.appendChild(bar); stage.appendChild(buildCanvas(d,state.type,state.values[state.type],'edit')); var meta = mk(d,'div',{cls:'sc9_meta'}); meta.appendChild(metaInput(d,'team','팀(조)명','팀(조)명')); meta.appendChild(metaInput(d,'item','아이템명','아이템명')); meta.appendChild(metaInput(d,'members','구성원','구성원')); stage.appendChild(meta); root.appendChild(stage); var act = mk(d,'div',{cls:'sc9_actions'}); act.appendChild(mk(d,'button',{cls:'sc9_btn','data-act':'pdf',type:'button',title:'이 캔버스만 PDF로 저장합니다 (인쇄창에서 대상을 PDF로 선택하세요)',text:'PDF 저장'})); act.appendChild(mk(d,'button',{cls:'sc9_btn sc9_pri','data-act':'share',type:'button',title:'작성한 내용이 담긴 링크를 만들어 복사합니다. 링크를 열면 이 글이 그대로 보여요',text:'공유링크 만들기'})); var chk = mk(d,'label',{cls:'sc9_chk'}); var cb = mk(d,'input',{type:'checkbox','data-act':'ro'}); cb.checked = state.shareRO; chk.appendChild(cb); chk.appendChild(d.createTextNode('읽기 전용으로 공유 (받는 사람이 처음엔 수정 못 함)')); act.appendChild(chk); root.appendChild(act); var res = mk(d,'div',{id:'sc9_res',cls:'sc9_res'}); res.appendChild(mk(d,'p',{cls:'sc9_status',id:'sc9_status'})); res.appendChild(mk(d,'textarea',{id:'sc9_out',readonly:'readonly'})); res.appendChild(mk(d,'button',{cls:'sc9_btn','data-act':'copy',type:'button',text:'링크 복사'})); root.appendChild(res); fillResult(); } function fillResult(){ var box = document.getElementById('sc9_res'); if(!box) return; if(!state.result){ box.className = 'sc9_res'; return; } box.className = 'sc9_res sc9_show'; document.getElementById('sc9_out').value = state.result.url; document.getElementById('sc9_status').textContent = state.result.msg; } function updatePlaceholders(){ var root = document.getElementById('sc9_root'); var list = root.querySelectorAll('textarea[data-k]'); for(var i=0;i<list.length;i++){ list[i].setAttribute('placeholder', placeholderFor(state.type, list[i].getAttribute('data-k'))); } } /* ---- 크게보기 (화면 꽉 채운 검은 배경, 그 안에서도 작성 가능) ---- */ function setFull(on){ var st = document.getElementById('sc9_stage'); if(!st) return; state.full = on; if(on){ st.className = 'sc9_stage sc9_full'; savedOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; try{ var f = st.requestFullscreen || st.webkitRequestFullscreen; if(f){ var p = f.call(st); if(p && p.then){ p.then(function(){ nativeFS = true; })['catch'](function(){}); } } }catch(err){} } else { st.className = 'sc9_stage'; document.body.style.overflow = savedOverflow; nativeFS = false; try{ if(document.fullscreenElement && document.exitFullscreen){ document.exitFullscreen(); } else if(document.webkitFullscreenElement && document.webkitExitFullscreen){ document.webkitExitFullscreen(); } }catch(err2){} } document.getElementById('sc9_fullBtn').textContent = on ? '닫기' : '크게보기'; document.getElementById('sc9_barTxt').textContent = barText(); } /* ---- 공유링크: 원본/압축 중 더 짧은 쪽 ---- */ function buildPayload(){ var t = state.type, fs = fieldsOf(t), vals = []; for(var i=0;i<fs.length;i++){ vals.push(getVal(t,fs[i].k)); } return [1, t === 'lean' ? 'l' : 'b', state.meta.team, state.meta.item, state.meta.members, state.shareRO ? 1 : 0, vals]; } /* 원본 링크: 내용이 있는 칸만 읽기 쉬운 형태로 (t=b&tm=1조&f0=내용...) */ function buildPlainQuery(){ var t = state.type, fs = fieldsOf(t), parts = ['t=' + (t === 'lean' ? 'l' : 'b')]; if(state.shareRO) parts.push('ro=1'); if(state.meta.team) parts.push('tm=' + encodeURIComponent(state.meta.team)); if(state.meta.item) parts.push('it=' + encodeURIComponent(state.meta.item)); if(state.meta.members) parts.push('mb=' + encodeURIComponent(state.meta.members)); for(var i=0;i<fs.length;i++){ var v = getVal(t, fs[i].k); if(v) parts.push('f' + i + '=' + encodeURIComponent(v)); } return parts.join('&'); } function getParam(s, name){ var m = s.match(new RegExp('[?&]' + name + '=([^&#]*)')); if(!m) return null; try{ return decodeURIComponent(m[1].replace(/\+/g, ' ')); }catch(e){ return m[1]; } } function copyText(text, cb){ var done = false; function fallback(){ var ok = false; try{ var out = document.getElementById('sc9_out'); out.focus(); out.select(); try{ out.setSelectionRange(0, 999999); }catch(e1){} ok = document.execCommand('copy'); }catch(e2){ ok = false; } if(!done){ done = true; cb(ok); } } try{ if(navigator.clipboard && navigator.clipboard.writeText){ navigator.clipboard.writeText(text).then(function(){ if(!done){ done = true; cb(true); } }, fallback); return; } }catch(e){} fallback(); } function makeLink(){ var t = state.type, any = hasContent(t); if(!any && !state.meta.team && !state.meta.item && !state.meta.members){ window.alert('공유할 내용이 없어요. 먼저 캔버스를 작성해 주세요.'); return; } var json = JSON.stringify(buildPayload()); var base = window.location.href.split('#')[0].split('?')[0]; var plain = base + '?' + buildPlainQuery(); var comp = base + '?c=' + LZString.compressToEncodedURIComponent(json); var useComp = comp.length < plain.length; var url = useComp ? comp : plain; var kind = useComp ? '압축 링크' : '원본 링크'; var tail = kind + ' (' + url.length + '자)' + (state.shareRO ? ' · 읽기 전용' : ''); state.result = {url:url, msg:'링크를 만들었어요 · ' + tail}; fillResult(); copyText(url, function(ok){ state.result.msg = (ok ? '복사했어요 · ' : '아래 [링크 복사]를 눌러 주세요 · ') + tail; fillResult(); }); } /* ---- PDF (이 캔버스만, 인쇄창에서 PDF 선택) ---- */ function ensureHeadBody(doc){ if(!doc.head){ doc.documentElement.insertBefore(doc.createElement('head'), doc.documentElement.firstChild); } if(!doc.body){ doc.documentElement.appendChild(doc.createElement('body')); } } function doPdf(){ var t = state.type, name = titleOf(); var win = null, doc = null, ifr = null; try{ win = window.open('', '_blank'); }catch(e){ win = null; } if(win && win.document){ doc = win.document; } else { var old = document.getElementById('sc9_printframe'); if(old && old.parentNode) old.parentNode.removeChild(old); ifr = document.createElement('iframe'); ifr.id = 'sc9_printframe'; ifr.setAttribute('style','position:fixed;left:-9999px;top:0;width:1000px;height:700px;border:0'); document.body.appendChild(ifr); win = ifr.contentWindow; doc = win.document; } try{ ensureHeadBody(doc); doc.title = typeLabel(t) + (name ? ' - ' + name : ''); var st = doc.createElement('style'); st.appendChild(doc.createTextNode(CSS + '\n' + PRINT_EXTRA)); doc.head.appendChild(st); var holder = mk(doc,'div',{id:'sc9_root',cls:'sc9_print'}); holder.appendChild(mk(doc,'div',{cls:'sc9_ptitle',text:typeLabel(t) + (name ? ' - ' + name : '')})); holder.appendChild(mk(doc,'div',{cls:'sc9_pdate',text:'작성일 ' + todayStr()})); var meta = mk(doc,'div',{cls:'sc9_meta'}); var ml = [['조 / 팀 이름','team'],['아이템 / 프로젝트명','item'],['구성원','members']]; for(var i=0;i<ml.length;i++){ var kbox = mk(doc,'div',{cls:'sc9_k'}); kbox.appendChild(mk(doc,'label',{text:ml[i][0]})); kbox.appendChild(mk(doc,'div',{cls:'sc9_v',text:state.meta[ml[i][1]] || ''})); meta.appendChild(kbox); } holder.appendChild(meta); var spacer = mk(doc,'div'); spacer.style.height = '10px'; holder.appendChild(spacer); holder.appendChild(buildCanvas(doc,t,state.values[t],'print')); doc.body.appendChild(holder); }catch(err){ window.alert('PDF 저장 창을 준비하는 중 문제가 생겼어요.'); return; } setTimeout(function(){ try{ win.focus(); win.print(); }catch(e3){} }, 400); } /* ---- 저장/불러오기 ---- */ function save(){ if(saveTimer) clearTimeout(saveTimer); saveTimer = setTimeout(function(){ try{ window.localStorage.setItem(KEY, JSON.stringify({type:state.type, meta:state.meta, values:state.values, ex:state.ex})); }catch(e){} }, 300); } function loadFromStorage(){ try{ var raw = window.localStorage.getItem(KEY); if(!raw) return; var o = JSON.parse(raw); if(o.type === 'lean') state.type = 'lean'; if(o.meta){ state.meta.team = o.meta.team || ''; state.meta.item = o.meta.item || ''; state.meta.members = o.meta.members || ''; } if(o.values){ state.values.bmc = o.values.bmc || {}; state.values.lean = o.values.lean || {}; } if(o.ex) state.ex = o.ex; }catch(e){} } function loadFromUrl(){ var s = window.location.search || ''; if(!s) return false; var mc = s.match(/[?&]c=([^&#]+)/), json = null; if(mc){ try{ var raw = mc[1]; try{ raw = decodeURIComponent(raw); }catch(e1){} json = LZString.decompressFromEncodedURIComponent(raw); var a = JSON.parse(json); if(!(a instanceof Array) || a[0] !== 1 || !(a[6] instanceof Array)) return false; var t = a[1] === 'l' ? 'lean' : 'bmc'; var fs = fieldsOf(t); state.type = t; state.meta = {team:a[2] || '', item:a[3] || '', members:a[4] || ''}; state.values[t] = {}; for(var i=0;i<fs.length;i++){ state.values[t][fs[i].k] = a[6][i] || ''; } state.ro = (a[5] === 1); return true; }catch(e2){ return false; } } var tv = getParam(s, 't'); if(tv !== 'b' && tv !== 'l') return false; var t2 = tv === 'l' ? 'lean' : 'bmc'; var fs2 = fieldsOf(t2); state.type = t2; state.meta = {team:getParam(s,'tm') || '', item:getParam(s,'it') || '', members:getParam(s,'mb') || ''}; state.values[t2] = {}; for(var j=0;j<fs2.length;j++){ state.values[t2][fs2[j].k] = getParam(s, 'f' + j) || ''; } state.ro = (getParam(s,'ro') === '1'); return true; } /* ---- 이벤트 ---- */ function findAct(e, root){ var t = e.target; while(t && t !== root){ if(t.getAttribute && t.getAttribute('data-act')) return t; t = t.parentNode; } return null; } function onClick(e){ var root = document.getElementById('sc9_root'); var t = findAct(e, root); if(!t) return; var act = t.getAttribute('data-act'); if(act === 'tab'){ var v = t.getAttribute('data-v'); if(v !== state.type){ state.type = v; render(); save(); } } else if(act === 'exfill'){ if(!state.ex){ window.alert('먼저 위에서 업종을 선택해 주세요.'); return; } var exd = EXAMPLES[state.type] && EXAMPLES[state.type][state.ex]; if(!exd) return; if(hasContent(state.type) && !window.confirm('지금 쓴 내용이 예시로 바뀝니다. 계속할까요?')) return; var fs = fieldsOf(state.type), memo = state.values[state.type].memo || ''; state.values[state.type] = {}; for(var i=0;i<fs.length;i++){ if(exd[fs[i].k]) state.values[state.type][fs[i].k] = exd[fs[i].k]; } if(memo) state.values[state.type].memo = memo; render(); save(); } else if(act === 'unlock'){ state.ro = false; render(); } else if(act === 'full'){ setFull(!state.full); } else if(act === 'pdf'){ doPdf(); } else if(act === 'share'){ makeLink(); } else if(act === 'copy'){ if(!state.result) return; copyText(state.result.url, function(ok){ var base = state.result.msg.split(' · ').slice(1).join(' · '); state.result.msg = (ok ? '복사했어요 · ' : '복사가 안 되면 링크를 길게 눌러 복사해 주세요 · ') + base; fillResult(); }); } } function onChange(e){ var t = e.target, act = t.getAttribute && t.getAttribute('data-act'); if(act === 'ex'){ state.ex = t.value; updatePlaceholders(); save(); } else if(act === 'ro'){ state.shareRO = !!t.checked; } } function onInput(e){ var t = e.target; var k = t.getAttribute && t.getAttribute('data-k'); if(k){ state.values[state.type][k] = t.value; save(); return; } var m = t.getAttribute && t.getAttribute('data-m'); if(m){ state.meta[m] = t.value; save(); } } function injectCss(){ if(document.getElementById('sc9_css')) return; var st = document.createElement('style'); st.id = 'sc9_css'; st.appendChild(document.createTextNode(CSS)); (document.head || document.documentElement).appendChild(st); } function init(){ var root = document.getElementById('sc9_root'); if(!root) return; injectCss(); if(!loadFromUrl()) loadFromStorage(); render(); root.addEventListener('click', onClick); root.addEventListener('change', onChange); root.addEventListener('input', onInput); document.addEventListener('keydown', function(e){ if(state.full && (e.key === 'Escape' || e.keyCode === 27)){ setFull(false); } }); document.addEventListener('fullscreenchange', function(){ if(!document.fullscreenElement && nativeFS){ nativeFS = false; if(state.full) setFull(false); } }); } if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', init); } else { init(); } })(); </script> 모두의계산기/강의노트_18 최매슨생 https://0-1.kr/129 https://0-1.kr/129#entry129comment Wed, 4 Nov 2026 08:22:20 +0900 https://0-1.kr/128 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&amp;family=IBM+Plex+Mono:wght@400;500&amp;display=swap"> <style> /* 레이아웃 개념: 한 줄 타이틀바 아래로 카드가 세로로 쌓이는 모바일 우선 단일 열 (정비 수첩 느낌, 번호판 칩이 포인트) */ .cbk-scope{ --ink:#10212f;--ink2:#455a6e;--mute:#6b7e91;--line:#d4dee9;--ground:#eef2f7;--paper:#ffffff; --blue:#1456d9;--blue-d:#0e3fa8;--blue-s:#e7efff; --amber:#9a5200;--amber-s:#fff3dc;--green:#0b7a4b;--green-s:#e3f5ec;--red:#bf352b;--red-s:#fdebe9; --f-body:'Noto Sans KR',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; } #cbk-root.cbk-scope{background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;max-width:640px;margin:0 auto;padding:16px 16px 28px;box-sizing:border-box;-webkit-text-size-adjust:100%;text-align:left;border-radius:12px;overflow-x:hidden} .cbk-scope *{box-sizing:border-box} .cbk-scope h1,.cbk-scope h2,.cbk-scope h3,.cbk-scope p{margin:0;padding:0;font-family:var(--f-body);color:var(--ink);letter-spacing:0} .cbk-scope button,.cbk-scope input,.cbk-scope textarea{font-family:var(--f-body);font-size:16px;color:var(--ink)} /* 타이틀바 */ .cbk-scope .cbk-tbar{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:12px 12px 10px} .cbk-scope .cbk-tbar-top{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap} .cbk-scope .cbk-tbar-l{flex:1 1 220px;min-width:0} .cbk-scope .cbk-title{font-size:22px;line-height:1.25;font-weight:800;word-break:keep-all;overflow-wrap:anywhere} .cbk-scope .cbk-sub{font-size:11px;line-height:1.4;color:var(--blue);margin-top:3px;font-weight:500} .cbk-scope .cbk-tbar-r{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap} .cbk-scope .cbk-tbar-blank{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px} /* 버튼 */ .cbk-scope .cbk-btn{-webkit-appearance:none;appearance:none;font-weight:700;font-size:15px;min-height:44px;padding:0 16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;line-height:1.2;text-align:center} .cbk-scope .cbk-btn:hover{border-color:var(--blue)} .cbk-scope .cbk-btn:focus-visible,.cbk-scope .cbk-chip:focus-visible,.cbk-scope .cbk-acc-h:focus-visible,.cbk-scope .cbk-tab:focus-visible,.cbk-scope input:focus-visible,.cbk-scope textarea:focus-visible{outline:3px solid #8fb2ff;outline-offset:1px} .cbk-scope .cbk-btn-sm{min-height:40px;padding:0 12px;font-size:14px} .cbk-scope .cbk-btn-pri{background:var(--blue);border-color:var(--blue);color:#fff} .cbk-scope .cbk-btn-pri:hover{background:var(--blue-d);border-color:var(--blue-d)} .cbk-scope .cbk-btn-ghost{border-style:dashed;color:var(--mute);font-weight:500;background:transparent} .cbk-scope .cbk-btn-del{color:var(--red)} .cbk-scope .cbk-btn-del.cbk-arm{background:var(--red);border-color:var(--red);color:#fff} .cbk-scope .cbk-btn[disabled]{opacity:.45;cursor:not-allowed} .cbk-scope .cbk-bulb{width:44px;padding:0;display:inline-flex;align-items:center;justify-content:center} .cbk-scope .cbk-bulb svg{width:22px;height:22px;display:block} .cbk-scope .cbk-bulb .cbk-bulb-f{fill:none;stroke:#7b8a99;stroke-width:1.8} .cbk-scope .cbk-bulb.cbk-on{border-color:#e0a800;background:#fff8d6} .cbk-scope .cbk-bulb.cbk-on .cbk-bulb-f{fill:#ffd43b;stroke:#c98f00} /* 말풍선 */ .cbk-scope .cbk-tip{position:relative} .cbk-scope .cbk-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:12px;font-weight:500;line-height:1.35;padding:6px 8px;border-radius:6px;white-space:normal;width:max-content;max-width:190px;text-align:left;display:none;pointer-events:none;z-index:5} .cbk-scope .cbk-tip:hover::after,.cbk-scope .cbk-tip:focus-visible::after{display:block} .cbk-scope .cbk-tip-r::after{left:auto;right:0;transform:none} .cbk-scope .cbk-tip-l::after{left:0;transform:none} .cbk-scope .cbk-tip-b::after{bottom:auto;top:calc(100% + 6px)} /* 카드·폼 */ .cbk-scope .cbk-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:12px} .cbk-scope .cbk-h{font-size:17px;font-weight:800;margin-bottom:10px} .cbk-scope .cbk-h-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px} .cbk-scope .cbk-h-row .cbk-h{margin-bottom:0} .cbk-scope .cbk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cbk-scope .cbk-f{display:block;min-width:0;margin-bottom:10px} .cbk-scope .cbk-f>span{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:4px} .cbk-scope .cbk-f input,.cbk-scope .cbk-f textarea,.cbk-scope .cbk-ta,.cbk-scope .cbk-q{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fbfdff;line-height:1.4;-webkit-appearance:none;appearance:none} .cbk-scope .cbk-f textarea,.cbk-scope .cbk-ta{resize:none;display:block;overflow:hidden} .cbk-scope .cbk-f input.cbk-warn{border-color:var(--red);background:var(--red-s)} .cbk-scope .cbk-note{font-size:13px;color:var(--mute);margin-top:2px} .cbk-scope .cbk-sub-h{font-size:13px;font-weight:700;color:var(--ink2);margin:6px 0 6px;display:flex;align-items:center;gap:8px} .cbk-scope .cbk-badge{font-size:12px;font-weight:700;background:var(--blue-s);color:var(--blue);border-radius:99px;padding:1px 8px} .cbk-scope .cbk-actions{display:flex;gap:8px;margin-top:6px} .cbk-scope .cbk-actions .cbk-btn-pri{flex:1 1 auto} /* 번호판 */ .cbk-scope .cbk-plate-row{display:flex;margin-bottom:12px} .cbk-scope .cbk-plate{display:inline-flex;align-items:stretch;border:2px solid var(--ink);border-radius:8px;background:#fff;overflow:hidden;max-width:100%} .cbk-scope .cbk-plate-band{width:16px;background:var(--blue);flex:0 0 auto} .cbk-scope .cbk-plate-no{padding:6px 16px;font-size:28px;font-weight:800;letter-spacing:.08em;line-height:1.2;word-break:break-all;font-variant-numeric:tabular-nums} .cbk-scope .cbk-plate-no.cbk-ph{color:#b3c0cd} /* 항목 칩 */ .cbk-scope .cbk-grp{margin-bottom:10px} .cbk-scope .cbk-grp-t{font-size:12px;font-weight:700;color:var(--mute);letter-spacing:.04em;margin-bottom:5px} .cbk-scope .cbk-chiprow{display:flex;flex-wrap:wrap;gap:6px} .cbk-scope .cbk-chip{-webkit-appearance:none;appearance:none;min-height:40px;padding:6px 12px;border:1px solid var(--line);background:#fff;border-radius:99px;font-size:15px;font-weight:500;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;line-height:1.2} .cbk-scope .cbk-chip.cbk-on{background:var(--blue-s);border-color:var(--blue);color:var(--blue-d);font-weight:700} .cbk-scope .cbk-chip.cbk-on::before{content:"\2713\00a0"} .cbk-scope .cbk-amts{margin:4px 0 10px} .cbk-scope .cbk-arow{display:grid;grid-template-columns:minmax(0,1fr) 130px 40px;gap:6px;align-items:center;margin-bottom:6px} .cbk-scope .cbk-arow-n{font-size:15px;font-weight:700;min-width:0;overflow-wrap:anywhere} .cbk-scope .cbk-arow input{width:100%;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;text-align:right;background:#fbfdff;font-variant-numeric:tabular-nums} .cbk-scope .cbk-arow .cbk-btn{min-height:40px;padding:0} /* 아코디언 */ .cbk-scope .cbk-acc{padding:0;overflow:visible} .cbk-scope .cbk-acc-h{-webkit-appearance:none;appearance:none;width:100%;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;background:transparent;border:0;font-size:17px;font-weight:800;cursor:pointer;touch-action:manipulation;text-align:left} .cbk-scope .cbk-acc-h svg{width:20px;height:20px;transition:transform .15s;flex:0 0 auto} .cbk-scope .cbk-acc-h[aria-expanded="true"] svg{transform:rotate(180deg)} .cbk-scope .cbk-acc-b{display:none;padding:0 14px 14px} .cbk-scope .cbk-acc-b.cbk-open{display:block} .cbk-scope .cbk-tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap} .cbk-scope .cbk-tab{-webkit-appearance:none;appearance:none;min-height:38px;padding:0 12px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;touch-action:manipulation} .cbk-scope .cbk-tab.cbk-on{background:var(--ink);color:#fff;border-color:var(--ink)} .cbk-scope .cbk-tabp{display:none;font-size:14.5px;color:var(--ink2)} .cbk-scope .cbk-tabp.cbk-on{display:block} .cbk-scope .cbk-tabp ol,.cbk-scope .cbk-tabp ul{margin:0;padding-left:20px} .cbk-scope .cbk-tabp li{margin-bottom:4px} /* 기록 카드 */ .cbk-scope .cbk-list{display:flex;flex-direction:column;gap:8px} .cbk-scope .cbk-rec{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fbfdff} .cbk-scope .cbk-rec-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap} .cbk-scope .cbk-rec-d{font-weight:800;font-family:var(--f-mono);font-size:14px} .cbk-scope .cbk-rec-km{font-size:13px;color:var(--mute);font-family:var(--f-mono)} .cbk-scope .cbk-rec-i{font-size:15px;font-weight:700;margin-top:3px;overflow-wrap:anywhere} .cbk-scope .cbk-rec-m{font-size:13px;color:var(--ink2);margin-top:2px;overflow-wrap:anywhere} .cbk-scope .cbk-rec-b{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .cbk-scope .cbk-src{display:inline-block;font-size:11px;font-weight:700;border-radius:4px;padding:1px 6px;background:var(--green-s);color:var(--green);margin-bottom:4px} .cbk-scope .cbk-src.cbk-ex{background:var(--amber-s);color:var(--amber)} .cbk-scope .cbk-raw{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;margin-top:4px;color:var(--ink2)} .cbk-scope .cbk-empty{font-size:14px;color:var(--mute);padding:6px 0} .cbk-scope .cbk-find-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px} .cbk-scope .cbk-find-row .cbk-q{flex:1 1 160px;min-width:0} .cbk-scope .cbk-sumline{font-size:13px;color:var(--ink2);margin-bottom:8px} .cbk-scope .cbk-recv{border-color:var(--blue);background:var(--blue-s)} .cbk-scope .cbk-foot{margin-top:14px;font-size:12px;color:var(--mute);text-align:center} /* 팝업 */ .cbk-scope.cbk-pop-wrap{display:none;position:fixed;left:0;top:0;right:0;bottom:0;z-index:2147483647;background:rgba(16,33,47,.55);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px;font-family:var(--f-body);font-size:16px;line-height:1.5;color:var(--ink);text-align:left} .cbk-scope.cbk-pop-wrap.cbk-show{display:flex;align-items:flex-start;justify-content:center} .cbk-scope .cbk-pop{background:var(--paper);border-radius:12px;width:100%;max-width:560px;margin:auto 0;box-shadow:0 12px 40px rgba(0,0,0,.3)} .cbk-scope .cbk-pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 8px 16px;border-bottom:1px solid var(--line)} .cbk-scope .cbk-pop-head .cbk-h{margin:0} .cbk-scope .cbk-x{width:44px;padding:0;font-size:18px} .cbk-scope .cbk-pop-body{padding:14px 16px} .cbk-scope .cbk-pop-foot{padding:10px 16px 16px} .cbk-scope .cbk-pop-foot .cbk-btn{width:100%} .cbk-scope .cbk-count{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 4px;font-size:13px;font-weight:700;font-family:var(--f-mono)} .cbk-scope .cbk-bar{flex:1 1 auto;height:6px;background:var(--line);border-radius:99px;overflow:hidden} .cbk-scope .cbk-bar i{display:block;height:100%;width:0;background:var(--green)} .cbk-scope .cbk-count.cbk-warn span:first-child{color:var(--amber)} .cbk-scope .cbk-count.cbk-warn .cbk-bar i{background:#d98a00} .cbk-scope .cbk-count.cbk-over span:first-child{color:var(--red)} .cbk-scope .cbk-count.cbk-over .cbk-bar i{background:var(--red)} .cbk-scope .cbk-msg{font-size:13px;color:var(--ink2);margin:4px 0 8px;min-height:19px} .cbk-scope .cbk-msg.cbk-amber{color:var(--amber)} .cbk-scope .cbk-opts{display:flex;flex-direction:column;gap:2px;margin-bottom:10px} .cbk-scope .cbk-chk{display:flex;align-items:center;gap:10px;min-height:42px;font-size:15px;cursor:pointer} .cbk-scope .cbk-chk input{width:22px;height:22px;flex:0 0 auto;margin:0} .cbk-scope .cbk-chk.cbk-sub-opt{padding-left:24px} .cbk-scope .cbk-chk.cbk-dim{opacity:.45} .cbk-scope .cbk-diag{font-size:12px;color:var(--mute);font-family:var(--f-mono);white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:8px} .cbk-scope .cbk-ta.cbk-mono{font-family:var(--f-mono);font-size:13px} .cbk-scope .cbk-row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px} .cbk-scope .cbk-row .cbk-btn{flex:1 1 140px} .cbk-scope .cbk-sec{margin-bottom:14px;padding-bottom:12px;border-bottom:1px dashed var(--line)} .cbk-scope .cbk-sec:last-child{border-bottom:0;margin-bottom:0} .cbk-scope .cbk-sec-t{font-size:14px;font-weight:800;margin-bottom:4px} .cbk-scope .cbk-qr{display:flex;justify-content:center;padding:8px 0} .cbk-scope .cbk-qr canvas,.cbk-scope .cbk-qr img{max-width:100%;height:auto} .cbk-scope a.cbk-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none} /* 토스트 */ .cbk-scope.cbk-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);max-width:88%;background:var(--ink);color:#fff;font-family:var(--f-body);font-size:14px;font-weight:500;line-height:1.4;padding:10px 16px;border-radius:99px;z-index:2147483647;opacity:0;pointer-events:none;transition:opacity .15s;text-align:center} .cbk-scope.cbk-toast.cbk-on{opacity:1} /* mycar 줄 */ .cbk-scope .cbk-mycar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px} .cbk-scope .cbk-mc-tag{font-family:var(--f-mono);font-size:12px;font-weight:500;color:#fff;background:var(--ink);border-radius:4px;padding:0 8px;letter-spacing:.02em;line-height:1;height:46px;display:inline-flex;align-items:center} .cbk-scope .cbk-mc-w{flex:0 0 auto;width:98px;display:block} .cbk-scope .cbk-mc-w.cbk-mc-km{width:84px} .cbk-scope .cbk-mc-in{width:100%;height:46px;min-height:46px;padding:4px 4px;border:1px solid var(--line);border-radius:6px;background:#fbfdff;font-size:16px;font-weight:700;text-align:center;-webkit-appearance:none;appearance:none} .cbk-scope .cbk-mc-in::placeholder{font-weight:500;color:#9aa8b6} .cbk-scope .cbk-mc-in.cbk-warn{border-color:var(--red);background:var(--red-s)} .cbk-scope .cbk-datepill{display:flex;align-items:center;gap:6px;flex:1 1 170px;min-width:0;height:46px;min-height:46px;padding:0 10px;border-radius:8px;background:var(--blue);color:#fff;cursor:pointer} .cbk-scope .cbk-dp-l{font-size:13px;font-weight:700;opacity:.85} .cbk-scope .cbk-datepill input{flex:1 1 0;width:0;min-width:0;min-height:40px;padding:0;border:0;background:transparent;color:#fff;font-size:16px;font-weight:800;letter-spacing:0;-webkit-appearance:none;appearance:none;font-variant-numeric:tabular-nums;font-family:var(--f-body)} .cbk-scope .cbk-datepill input::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer;margin:0 0 0 2px;padding:0} .cbk-scope .cbk-dp-b{flex:0 0 auto;font-size:11px;font-weight:800;border-radius:99px;padding:3px 8px;background:#fff;color:var(--blue)} .cbk-scope .cbk-dp-b.cbk-mod{background:#ffd43b;color:var(--ink)} /* 알약탭 */ .cbk-scope .cbk-pills{display:flex;gap:8px;margin-top:12px} .cbk-scope .cbk-pill{-webkit-appearance:none;appearance:none;flex:1 1 0;min-width:0;min-height:48px;border-radius:99px;border:2px solid var(--line);background:var(--paper);color:var(--ink2);font-size:16px;font-weight:800;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent} .cbk-scope .cbk-pill.cbk-on{background:var(--ink);border-color:var(--ink);color:#fff} .cbk-scope .cbk-pill:focus-visible{outline:3px solid #8fb2ff;outline-offset:1px} .cbk-scope .cbk-main{display:none} .cbk-scope .cbk-main.cbk-on{display:block} /* 정비소 + 지도 */ .cbk-scope .cbk-lbl{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:4px} .cbk-scope .cbk-shopf{margin-bottom:10px} .cbk-scope .cbk-shopbox{display:flex;align-items:stretch;height:46px;border:1px solid var(--line);border-radius:8px;background:#fbfdff} .cbk-scope .cbk-shopbox input{flex:1 1 auto;min-width:0;height:100%;min-height:0;padding:0 12px;border:0;background:transparent;border-radius:8px 0 0 8px;-webkit-appearance:none;appearance:none;line-height:1.4} .cbk-scope .cbk-ico{-webkit-appearance:none;appearance:none;flex:0 0 auto;width:46px;display:inline-flex;align-items:center;justify-content:center;border:0;border-left:1px solid var(--line);background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-size:21px;line-height:1;text-decoration:none;padding:0;color:#98a6b5} .cbk-scope .cbk-ico:last-child{border-radius:0 8px 8px 0} .cbk-scope .cbk-mag svg{width:22px;height:22px;display:block} .cbk-scope .cbk-mag.cbk-mag-on{background:#fff} .cbk-scope .cbk-mapsel{display:none;gap:6px;flex-wrap:wrap;margin-top:6px} .cbk-scope .cbk-mapsel.cbk-open{display:flex} .cbk-scope .cbk-mp{-webkit-appearance:none;appearance:none;flex:1 1 70px;min-height:42px;padding:0 8px;border:2px solid var(--line);border-radius:8px;background:#fff;font-size:16px;font-weight:800;cursor:pointer;touch-action:manipulation} .cbk-scope .cbk-mp-naver{color:#03C75A;border-color:#03C75A} .cbk-scope .cbk-mp-tmap{color:#0064FF;border-color:#0064FF} .cbk-scope .cbk-mp-kakao{color:#B58900;border-color:#F2B800} .cbk-scope .cbk-mp-google{color:#EA4335;border-color:#EA4335} .cbk-scope .cbk-mp.cbk-sel{box-shadow:0 0 0 2px currentColor} .cbk-scope .cbk-mapnote{font-size:12px;color:var(--mute);margin-top:4px} /* 간단메모·기본 지도·입력 공통 */ .cbk-scope .cbk-tb-btn{padding:0 10px} .cbk-scope .cbk-inp{width:100%;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fbfdff;line-height:1.4;-webkit-appearance:none;appearance:none} .cbk-scope .cbk-inp.cbk-mono{font-family:var(--f-mono);font-size:13px} .cbk-scope .cbk-mapdef{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)} .cbk-scope .cbk-mapdef-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px} .cbk-scope .cbk-mdl{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 12px;border:2px solid var(--line);border-radius:8px;background:#fff;font-size:16px;font-weight:800;cursor:pointer;touch-action:manipulation} .cbk-scope .cbk-mdl input{width:20px;height:20px;margin:0;accent-color:currentColor} /* 내기록찾기 막대 */ .cbk-scope.cbk-findbar{display:none;position:fixed;left:0;top:0;right:0;z-index:2147483647;background:#fff;border-bottom:2px solid var(--blue);box-shadow:0 6px 20px rgba(0,0,0,.18);padding:8px 12px 10px;font-family:var(--f-body);font-size:16px;color:var(--ink);text-align:left} .cbk-scope.cbk-findbar.cbk-show{display:block} .cbk-scope .cbk-fb-in{max-width:640px;margin:0 auto} .cbk-scope .cbk-fb-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px} .cbk-scope .cbk-fb-row:first-child{margin-top:0} .cbk-scope .cbk-fb-q{flex:1 1 140px;min-width:0;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fbfdff;-webkit-appearance:none;appearance:none} .cbk-scope .cbk-fb-chip{border-radius:99px;padding:0 12px} .cbk-scope .cbk-fb-n{font-family:var(--f-mono);font-size:14px;font-weight:700;min-width:58px;text-align:center;margin-left:auto} .cbk-scope .cbk-fb-b{width:44px;padding:0} .cbk-scope .cbk-fb-msg{font-size:13px;color:var(--ink2);margin-top:6px} mark.cbk-hl{background:#fff176!important;color:inherit!important;padding:0;border-radius:2px;box-shadow:0 0 0 1px #f2c200} mark.cbk-hl.cbk-cur{background:#ff9f1a!important;box-shadow:0 0 0 2px #e65100} @media (max-width:420px){ .cbk-scope .cbk-grid2{grid-template-columns:1fr} .cbk-scope .cbk-arow{grid-template-columns:minmax(0,1fr) 110px 40px} .cbk-scope .cbk-plate-no{font-size:24px;padding:6px 12px} } @media (prefers-reduced-motion:reduce){ .cbk-scope *{transition:none!important} } </style> <div id="cbk-root" class="cbk-scope"> <header class="cbk-tbar"> <div class="cbk-tbar-top"> <div class="cbk-tbar-l"> <h1 class="cbk-title" id="cbk-title">공유형 차계부_V2(261031)</h1> <p class="cbk-sub">내차 수리! 댓글로 남기고 찾아봐요</p> </div> <div class="cbk-tbar-r"> <button type="button" class="cbk-btn cbk-btn-sm cbk-btn-pri cbk-tb-btn cbk-tip cbk-tip-b cbk-tip-l" id="cbk-b-comment" data-tip="댓글에 붙여넣을 요약을 만들어요 (복사해서 댓글창에 붙여넣기)">댓글저장</button> <button type="button" class="cbk-btn cbk-btn-sm cbk-tb-btn cbk-tip cbk-tip-b" id="cbk-b-mail" data-tip="입력한 내용으로 메일 작성 화면을 열어요 (제목: 날짜_차번호_차량_차량점검)">메일</button> <button type="button" class="cbk-btn cbk-btn-sm cbk-tb-btn cbk-tip cbk-tip-b" id="cbk-b-find" data-tip="이 페이지에서 차번호·차량·날짜를 찾아 형광펜으로 표시해요">내기록찾기</button> <button type="button" class="cbk-btn cbk-btn-sm cbk-bulb cbk-tip cbk-tip-b cbk-tip-r" id="cbk-b-bulb" data-tip="모바일 화면 항상 켜기 (누르면 켜져요)" aria-pressed="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><path class="cbk-bulb-f" d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z" stroke-linecap="round" stroke-linejoin="round"></path></svg> </button> </div> </div> <div class="cbk-mycar" id="cbk-mycar"> <span class="cbk-mc-tag">mycar</span> <span class="cbk-mc-w cbk-tip cbk-tip-l" data-tip="차번호예요 (예: 12가3456)"><input id="cbk-no" class="cbk-mc-in" type="text" placeholder="차번호" data-ph="차번호" autocomplete="off" autocapitalize="off" enterkeyhint="next" aria-label="차번호"></span> <span class="cbk-mc-w cbk-tip" data-tip="차량 이름이에요 (예: 아반떼CN7)"><input id="cbk-model" class="cbk-mc-in" type="text" placeholder="차량" data-ph="차량" autocomplete="off" enterkeyhint="next" aria-label="차량"></span> <span class="cbk-mc-w cbk-mc-km cbk-tip" data-tip="주행거리 km예요 (예: 45,200)"><input id="cbk-km" class="cbk-mc-in" type="text" inputmode="numeric" placeholder="주행거리" data-ph="주행거리" autocomplete="off" aria-label="주행거리"></span> <label class="cbk-datepill cbk-tip cbk-tip-r" data-tip="기록 날짜예요. 오늘 날짜가 먼저 들어가고, 고치면 고친 날짜로 저장돼요"><input id="cbk-date" type="date" aria-label="날짜"><span class="cbk-dp-b" id="cbk-datebadge">오늘</span></label> </div> </header> <section class="cbk-card cbk-acc" id="cbk-acc"> <button type="button" class="cbk-acc-h cbk-tip cbk-tip-l" id="cbk-acc-btn" data-tip="사용설명서를 펼치거나 접어요" aria-expanded="false" aria-controls="cbk-acc-body"> <span>사용설명서</span> <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6" fill="none" stroke="#10212f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path></svg> </button> <div class="cbk-acc-b" id="cbk-acc-body"> <div class="cbk-tabs" id="cbk-tabs"> <button type="button" class="cbk-tab cbk-on cbk-tip cbk-tip-l" data-t="0" data-tip="기본 사용 순서">기본 사용</button> <button type="button" class="cbk-tab cbk-tip" data-t="1" data-tip="댓글 글자수와 URL 설명">댓글·URL</button> <button type="button" class="cbk-tab cbk-tip" data-t="2" data-tip="지도 기본값과 내기록 탭 설명">지도·내기록</button> </div> <div class="cbk-tabp cbk-on" data-p="0"> <ol> <li>맨 위 mycar 줄에 차번호·차량·주행거리를 적어요. 입력하면 이 기기에 자동 저장돼요.</li> <li>날짜는 오늘이 먼저 들어가요. 고치면 고친 날짜로 저장돼요.</li> <li>[정비교체기록] 탭에서 정비소와 간단메모를 적고, 교체·수리한 항목을 체크해요.</li> <li>[댓글저장]을 누르면 댓글용 요약이 나와요. 복사해서 이 글 아래 댓글창에 붙여넣어요.</li> <li>[메일]을 누르면 같은 내용으로 메일 작성 화면이 열려요. 제목은 [날짜_차번호_차량_차량점검] 모양이에요. 발송은 메일 앱에서 [보내기]를 직접 눌러야 돼요.</li> <li>[내기록찾기]는 이 페이지에서 차번호·차량·날짜를 찾아 형광펜으로 표시해요. ▲▼로 하나씩 넘겨 볼 수 있어요.</li> </ol> </div> <div class="cbk-tabp" data-p="1"> <ul> <li>댓글은 1000자까지만 써져요. 기본은 입력한 내용만 담는 방식이에요.</li> <li>[입력 내용 URL 붙이기]를 체크하면 맨 아래 줄에 압축 링크가 붙어요. 링크를 열면 기록이 그대로 보여요.</li> <li>[짧은 URL로 바꾸기]를 체크하면 단축 사이트(is.gd, v.gd, da.gd, cleanuri 순서)를 거쳐요. 모두 실패하면 원본 링크를 드려요.</li> <li>내용이 1000자를 넘으면 요약 끝을 줄여요. 이때는 URL을 붙이면 전체 내용이 링크에 담겨요.</li> </ul> </div> <div class="cbk-tabp" data-p="2"> <ul> <li>정비소 칸 끝의 지도 버튼으로 네X버·티X·카X오·구X 중에서 바꿀 수 있어요. 돋보기를 누르면 고른 지도에서 정비소를 검색해요.</li> <li>티X는 앱으로 열려서 앱이 깔린 폰에서만 움직여요.</li> <li>[내기록] 탭 위쪽은 [댓글저장]을 눌렀을 때 나오는 내용 그대로예요. 바로 복사해서 댓글에 붙여넣어요.</li> <li>[내기록] 탭 아래쪽에는 이 기기에 담긴 기록이 쌓여요.</li> </ul> <div class="cbk-mapdef" id="cbk-mapdef"> <div class="cbk-sec-t">기본 지도</div> <p class="cbk-note">돋보기를 누르면 여기서 고른 지도로 이동해요. 처음에는 네X버가 골라져 있어요. 바꾸면 그대로 저장돼요.</p> <div class="cbk-mapdef-row"> <label class="cbk-mdl cbk-mp-naver cbk-tip cbk-tip-l" data-tip="네이버 지도를 기본으로 해요"><input type="radio" name="cbk-mapdef" value="naver" id="cbk-md-naver" checked=""><span>네X버</span></label> <label class="cbk-mdl cbk-mp-tmap cbk-tip" data-tip="티맵 앱을 기본으로 해요"><input type="radio" name="cbk-mapdef" value="tmap" id="cbk-md-tmap"><span>티X</span></label> <label class="cbk-mdl cbk-mp-kakao cbk-tip" data-tip="카카오맵을 기본으로 해요"><input type="radio" name="cbk-mapdef" value="kakao" id="cbk-md-kakao"><span>카X오</span></label> <label class="cbk-mdl cbk-mp-google cbk-tip cbk-tip-r" data-tip="구글 지도를 기본으로 해요"><input type="radio" name="cbk-mapdef" value="google" id="cbk-md-google"><span>구X</span></label> </div> </div> </div> </div> </section> <section class="cbk-card cbk-recv" id="cbk-recv" style="display:none"> <h2 class="cbk-h">공유받은 기록</h2> <div class="cbk-list" id="cbk-recv-list"></div> <div class="cbk-rec-b" id="cbk-recv-b"></div> </section> <div class="cbk-pills" id="cbk-pills" role="tablist"> <button type="button" class="cbk-pill cbk-tip cbk-tip-l cbk-on" data-m="0" role="tab" aria-selected="true" data-tip="교체·수리한 항목을 체크하고 입력해요">정비교체기록</button> <button type="button" class="cbk-pill cbk-tip cbk-tip-r" data-m="1" role="tab" aria-selected="false" data-tip="댓글에 어떻게 기록되는지 보고 바로 복사해요">내기록</button> </div> <section class="cbk-card cbk-main cbk-on" data-mp="0"> <div class="cbk-h-row"> <h2 class="cbk-h">정비·교체 기록</h2> <div style="display:flex;gap:6px"> <button type="button" class="cbk-btn cbk-btn-sm cbk-tip cbk-tip-r" id="cbk-undo" data-tip="방금 입력을 되돌려요" style="width:44px;padding:0">↶</button> <button type="button" class="cbk-btn cbk-btn-sm cbk-tip cbk-tip-r" id="cbk-redo" data-tip="되돌린 입력을 다시 살려요" style="width:44px;padding:0">↷</button> </div> </div> <div class="cbk-shopf"> <label class="cbk-lbl" for="cbk-shop">정비소·수리지점</label> <div class="cbk-shopbox"> <input id="cbk-shop" type="text" placeholder="예) 강남정비소" autocomplete="off" enterkeyhint="done"> <button type="button" class="cbk-ico cbk-tip cbk-tip-r" id="cbk-mapbtn" data-tip="지도를 골라요 (네X버·티X·카X오·구X)" aria-expanded="false" aria-label="지도 선택"> ️</button> <a class="cbk-ico cbk-mag cbk-tip cbk-tip-r" id="cbk-mag" href="#" target="_blank" rel="noopener noreferrer" data-tip="먼저 지도를 골라 주세요 (왼쪽 지도 버튼)" aria-label="지도에서 검색"> <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5" fill="none" stroke="currentColor" stroke-width="2.6"></circle><path d="M15.5 15.5L21 21" stroke="currentColor" stroke-width="2.8" stroke-linecap="round"></path></svg> </a> </div> <div class="cbk-mapsel" id="cbk-mapsel"> <button type="button" class="cbk-mp cbk-mp-naver cbk-tip cbk-tip-l" data-k="naver" data-tip="네이버 지도로 검색해요">네X버</button> <button type="button" class="cbk-mp cbk-mp-tmap cbk-tip" data-k="tmap" data-tip="티맵 앱으로 검색해요 (앱이 있는 폰에서만)">티X</button> <button type="button" class="cbk-mp cbk-mp-kakao cbk-tip" data-k="kakao" data-tip="카카오맵으로 검색해요">카X오</button> <button type="button" class="cbk-mp cbk-mp-google cbk-tip cbk-tip-r" data-k="google" data-tip="구글 지도로 검색해요">구X</button> </div> </div> <label class="cbk-f"><span>간단메모</span><input id="cbk-note" type="text" placeholder="예) 합성유로 교체, 다음 점검은 6개월 뒤" autocomplete="off" enterkeyhint="done"></label> <div class="cbk-sub-h">교체·수리한 항목 체크 <span class="cbk-badge" id="cbk-cnt">0개</span></div> <div id="cbk-chips"></div> <div class="cbk-amts" id="cbk-amts"></div> <label class="cbk-f"><span>합계 비용(원)</span><input id="cbk-total" type="text" inputmode="numeric" placeholder="비워두면 항목 금액을 더해요" autocomplete="off"></label> <label class="cbk-f"><span>메모</span><textarea id="cbk-memo" rows="2" placeholder="예) 합성유 5W-30, 다음 교체 때 타이어 확인"></textarea></label> <div class="cbk-actions"> <button type="button" class="cbk-btn cbk-tip cbk-tip-l" id="cbk-new" data-tip="날짜를 오늘로 하고 항목·금액·메모를 비워요 (차 정보는 유지)">새 기록</button> <button type="button" class="cbk-btn cbk-btn-pri cbk-tip cbk-tip-r" id="cbk-go" data-tip="댓글에 붙여넣을 요약을 만들고 이 기기 기록에도 담아요">댓글저장</button> </div> </section> <section class="cbk-card cbk-main" data-mp="1"> <h2 class="cbk-h">댓글에 이렇게 기록돼요</h2> <p class="cbk-note" style="margin-bottom:8px">[댓글저장]을 눌렀을 때 나오는 내용 그대로예요. 복사해서 댓글창에 붙여넣으세요.</p> <div id="cbk-t-panel"></div> <h2 class="cbk-h" style="margin-top:22px">내 기록 (이 기기)</h2> <p class="cbk-sumline" id="cbk-hsum"></p> <div class="cbk-list" id="cbk-hist"></div> </section> <section class="cbk-card" style="display:none"> <h2 class="cbk-h">차번호로 기록 찾기</h2> <div class="cbk-find-row"> <input id="cbk-q" class="cbk-q" type="text" placeholder="차번호 입력 (예: 12가3456)" autocomplete="off" enterkeyhint="search"> <button type="button" class="cbk-btn cbk-btn-pri cbk-tip" id="cbk-find" data-tip="이 기기 기록과 이 페이지 댓글에서 차번호를 찾아요">찾기</button> <button type="button" class="cbk-btn cbk-tip cbk-tip-r" id="cbk-ex" data-tip="시안용 예시 댓글로 결과 모양을 봐요">예시로 보기</button> </div> <div class="cbk-list" id="cbk-found"></div> </section> <div class="cbk-row" style="justify-content:center;margin:14px 0 4px"></div> <p class="cbk-foot">스타트업ex _ cds1981@naver.com</p> <div class="cbk-scope cbk-pop-wrap" id="cbk-pop-comment" role="dialog" aria-modal="true" aria-label="댓글저장"> <div class="cbk-pop"> <div class="cbk-pop-head"><h2 class="cbk-h">댓글저장</h2><button type="button" class="cbk-btn cbk-x cbk-tip cbk-tip-r cbk-tip-b" data-close="cbk-pop-comment" data-tip="팝업 닫기">✕</button></div> <div class="cbk-pop-body"> <p class="cbk-note" style="margin-bottom:6px">이 기기 기록에도 담았어요. 복사해서 댓글창에 붙여넣어 주세요.</p> <div id="cbk-c-panel"></div> </div> <div class="cbk-pop-foot"><button type="button" class="cbk-btn cbk-tip cbk-tip-l" data-close="cbk-pop-comment" data-tip="팝업을 닫아요">닫기</button></div> </div> </div> <div class="cbk-scope cbk-pop-wrap" id="cbk-pop-share" role="dialog" aria-modal="true" aria-label="공유"> <div class="cbk-pop"> <div class="cbk-pop-head"><h2 class="cbk-h">공유</h2><button type="button" class="cbk-btn cbk-x cbk-tip cbk-tip-r cbk-tip-b" data-close="cbk-pop-share" data-tip="팝업 닫기">✕</button></div> <div class="cbk-pop-body"> <div class="cbk-sec"> <div class="cbk-sec-t">원본 URL (추천)</div> <p class="cbk-note">압축 없이 링크만으로 공유해요. 글이 많으면 길어져요.</p> <textarea id="cbk-s-long" class="cbk-ta cbk-mono" readonly="" rows="2"></textarea> <p class="cbk-msg" id="cbk-s-lmsg"></p> <button type="button" class="cbk-btn cbk-tip cbk-tip-l" id="cbk-s-lcopy" data-tip="원본(긴) 링크를 복사해요" style="width:100%">원본URL복사</button> </div> <div class="cbk-sec"> <div class="cbk-sec-t">단축 링크</div> <p class="cbk-note">주소는 짧아지지만 단축 사이트를 거쳐요.</p> <textarea id="cbk-s-short" class="cbk-ta cbk-mono" readonly="" rows="1" placeholder="[단축링크 만들기]를 눌러요"></textarea> <p class="cbk-msg" id="cbk-s-smsg"></p> <div class="cbk-row"> <button type="button" class="cbk-btn cbk-tip cbk-tip-l" id="cbk-s-make" data-tip="단축 사이트로 짧은 링크를 만들어요">단축링크 만들기</button> <button type="button" class="cbk-btn cbk-tip cbk-tip-r" id="cbk-s-scopy" data-tip="만든 짧은 링크를 복사해요">단축링크복사</button> </div> </div> <div class="cbk-sec"> <div class="cbk-sec-t">QR</div> <div class="cbk-qr" id="cbk-s-qr"></div> <p class="cbk-msg" id="cbk-s-qmsg"></p> <button type="button" class="cbk-btn cbk-tip cbk-tip-l" id="cbk-s-qmake" data-tip="링크를 QR 그림으로 만들어요" style="width:100%">QR 만들기</button> </div> <div class="cbk-sec"> <div class="cbk-sec-t">이메일·문자</div> <p class="cbk-note">앱에 따라 열리지 않을 수 있어요. 안 열리면 위 링크를 복사해서 보내요.</p> <div class="cbk-row"> <a class="cbk-btn cbk-tip cbk-tip-l" id="cbk-s-mail" href="#" data-tip="이메일 앱으로 내용을 보내요">이메일</a> <a class="cbk-btn cbk-tip cbk-tip-r" id="cbk-s-sms" href="#" data-tip="문자 앱으로 내용을 보내요">문자</a> </div> </div> </div> <div class="cbk-pop-foot"><button type="button" class="cbk-btn cbk-tip cbk-tip-l" data-close="cbk-pop-share" data-tip="팝업을 닫아요">닫기</button></div> </div> </div> <div class="cbk-scope cbk-pop-wrap" id="cbk-pop-save" role="dialog" aria-modal="true" aria-label="저장"> <div class="cbk-pop"> <div class="cbk-pop-head"><h2 class="cbk-h">저장</h2><button type="button" class="cbk-btn cbk-x cbk-tip cbk-tip-r cbk-tip-b" data-close="cbk-pop-save" data-tip="팝업 닫기">✕</button></div> <div class="cbk-pop-body"> <div class="cbk-sec"> <div class="cbk-sec-t">1) 엑셀</div> <p class="cbk-note" id="cbk-v-xnote"></p> <div class="cbk-row"> <button type="button" class="cbk-btn cbk-tip cbk-tip-l" id="cbk-v-xsave" data-tip="내 기록을 엑셀 파일로 저장해요">엑셀저장</button> <button type="button" class="cbk-btn cbk-tip cbk-tip-r" id="cbk-v-xload" data-tip="저장했던 엑셀 파일에서 기록을 불러와요">엑셀 불러오기</button> </div> <input type="file" id="cbk-v-xfile" accept=".xlsx,.xls" style="display:none"> <p class="cbk-msg" id="cbk-v-xmsg"></p> </div> <div class="cbk-sec"> <div class="cbk-sec-t">2) URL로 저장</div> <p class="cbk-note">내 기록 전체를 링크 하나에 담아요. 링크를 열면 기록을 가져올 수 있어요.</p> <p class="cbk-msg" id="cbk-v-umsg"></p> <div class="cbk-row"> <button type="button" class="cbk-btn cbk-tip cbk-tip-l" id="cbk-v-ulong" data-tip="원본(압축) 링크를 복사해요">원본URL복사</button> <button type="button" class="cbk-btn cbk-tip cbk-tip-r" id="cbk-v-ushort" data-tip="짧은 링크를 만들어 복사해요">단축링크복사</button> </div> </div> <div class="cbk-sec"> <div class="cbk-sec-t">3) 오프라인 읽기전용 HTML</div> <p class="cbk-note">다음 버전에서 추가돼요.</p> <button type="button" class="cbk-btn cbk-tip cbk-tip-l" id="cbk-v-off" data-tip="아직 준비 중이에요" disabled="" style="width:100%">오프라인 HTML 저장 (준비 중)</button> </div> </div> <div class="cbk-pop-foot"><button type="button" class="cbk-btn cbk-tip cbk-tip-l" data-close="cbk-pop-save" data-tip="팝업을 닫아요">닫기</button></div> </div> </div> <div class="cbk-scope cbk-pop-wrap" id="cbk-pop-mail" role="dialog" aria-modal="true" aria-label="메일"> <div class="cbk-pop"> <div class="cbk-pop-head"><h2 class="cbk-h">메일</h2><button type="button" class="cbk-btn cbk-x cbk-tip cbk-tip-r cbk-tip-b" data-close="cbk-pop-mail" data-tip="팝업 닫기">✕</button></div> <div class="cbk-pop-body"> <p class="cbk-note" style="margin-bottom:10px">입력한 내용으로 메일 작성 화면을 열어줘요. 발송은 메일 앱에서 [보내기]를 직접 눌러야 돼요.</p> <div class="cbk-sec"> <label class="cbk-lbl" for="cbk-m-to">받는 사람 (내 메일 주소, 비워도 돼요)</label> <input id="cbk-m-to" class="cbk-inp" type="text" inputmode="email" placeholder="예) me@example.com" autocomplete="off" autocapitalize="off"> <p class="cbk-note">이 기기에만 저장돼요.</p> </div> <div class="cbk-sec"> <div class="cbk-sec-t">제목</div> <input id="cbk-m-sub" class="cbk-inp cbk-mono" type="text" readonly="" aria-label="메일 제목"> <p class="cbk-note">나중에 메일에서 차번호만 검색해도 이 제목이 나와요.</p> </div> <div class="cbk-sec"> <div class="cbk-sec-t">내용</div> <textarea id="cbk-m-body" class="cbk-ta" readonly="" rows="6" aria-label="메일 내용"></textarea> <p class="cbk-msg" id="cbk-m-msg"></p> <div class="cbk-row"> <a class="cbk-btn cbk-btn-pri cbk-tip cbk-tip-l" id="cbk-m-app" href="#" data-tip="메일 앱에서 제목과 내용이 채워진 작성 화면을 열어요">메일 앱 열기</a> <a class="cbk-btn cbk-tip cbk-tip-r" id="cbk-m-gm" href="#" target="_blank" rel="noopener noreferrer" data-tip="지메일 작성 화면을 새 창으로 열어요">지메일로 열기</a> </div> <div class="cbk-row"> <button type="button" class="cbk-btn cbk-tip cbk-tip-l" id="cbk-m-csub" data-tip="메일 제목만 복사해요">제목 복사</button> <button type="button" class="cbk-btn cbk-tip cbk-tip-r" id="cbk-m-cbody" data-tip="메일 내용만 복사해요">내용 복사</button> </div> </div> </div> <div class="cbk-pop-foot"><button type="button" class="cbk-btn cbk-tip cbk-tip-l" data-close="cbk-pop-mail" data-tip="팝업을 닫아요">닫기</button></div> </div> </div> <div class="cbk-scope cbk-findbar" id="cbk-findbar" role="search" aria-label="내기록찾기"> <div class="cbk-fb-in"> <div class="cbk-fb-row"> <input id="cbk-f-q" class="cbk-fb-q" type="text" placeholder="차번호·차량·날짜로 찾기" autocomplete="off" autocapitalize="off" enterkeyhint="search" aria-label="찾을 내용"> <button type="button" class="cbk-btn cbk-btn-sm cbk-btn-pri cbk-tip cbk-tip-b cbk-tip-r" id="cbk-f-go" data-tip="이 페이지에서 찾아 형광펜으로 표시해요">찾기</button> </div> <div class="cbk-fb-row"> <button type="button" class="cbk-btn cbk-btn-sm cbk-fb-chip cbk-tip cbk-tip-b cbk-tip-l" id="cbk-f-c1" data-tip="mycar의 차번호로 찾아요">차번호</button> <button type="button" class="cbk-btn cbk-btn-sm cbk-fb-chip cbk-tip cbk-tip-b" id="cbk-f-c2" data-tip="mycar의 차량으로 찾아요">차량</button> <button type="button" class="cbk-btn cbk-btn-sm cbk-fb-chip cbk-tip cbk-tip-b" id="cbk-f-c3" data-tip="mycar의 날짜로 찾아요">날짜</button> <span class="cbk-fb-n" id="cbk-f-n">0 / 0</span> <button type="button" class="cbk-btn cbk-btn-sm cbk-fb-b cbk-tip cbk-tip-b" id="cbk-f-prev" data-tip="이전으로 찾은 곳">▲</button> <button type="button" class="cbk-btn cbk-btn-sm cbk-fb-b cbk-tip cbk-tip-b" id="cbk-f-next" data-tip="다음으로 찾은 곳">▼</button> <button type="button" class="cbk-btn cbk-btn-sm cbk-fb-b cbk-tip cbk-tip-b cbk-tip-r" id="cbk-f-x" data-tip="찾기를 닫고 형광펜을 지워요">✕</button> </div> <p class="cbk-fb-msg" id="cbk-f-msg">차번호·차량·날짜를 적고 [찾기]를 눌러요</p> </div> </div> <div class="cbk-scope cbk-toast" id="cbk-toast" role="status" aria-live="polite"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script> <script> (function(){ /* 티스토리 붙여넣기용 원본 소스 (화면이 바뀌기 전에 미리 받아둠) */ var SRC_PARTS = (function(){ try { var out = [], q, i, st = document.getElementsByTagName('style'), sc = document.getElementsByTagName('script'), rt, bt, own = ''; q = document.querySelector('link[href*="fonts.googleapis.com/css2?family=Noto+Sans+KR"]'); if (q) out.push(q.outerHTML); for (i = 0; i < st.length; i++) if (st[i].textContent.indexOf('.cbk-scope') > -1) { out.push('<sty' + 'le>' + st[i].textContent + '</sty' + 'le>'); break; } rt = document.getElementById('cbk-root').cloneNode(true); bt = rt.querySelector('#cbk-b-src'); if (bt && bt.parentNode) bt.parentNode.removeChild(bt); out.push(rt.outerHTML); q = document.querySelector('script[src*="pako"]'); if (q) out.push(q.outerHTML); for (i = 0; i < sc.length; i++) if (!sc[i].src && sc[i].textContent.indexOf('SRC_PARTS') > -1) { own = sc[i].textContent; break; } out.push('<scr' + 'ipt>' + own + '</scr' + 'ipt>'); return out; } catch (e) { return null; } })(); 'use strict'; /* ===== 기본 설정 ===== */ var APP_URL = ''; /* 티스토리 주소가 정해지면 예) https://0-1.kr/번호 . 비워두면 지금 열린 주소를 써요 */ var LIMIT = 1000; var VERSION_FILE = '공유형차계부_V2(261031)'; var LS_STATE = 'cbk_v1_state'; var LS_HIST = 'cbk_v1_hist'; /* 항목 번호 = 배열 순서. 링크에 번호가 들어가므로 순서 변경·삽입 금지, 새 항목은 맨 뒤에만 추가 */ var G = ['엔진·구동','브레이크·하체','타이어','전기·소모품','외관·사고','검사·보험·세금','연료·충전','전기차','기타']; var ITEMS = [ ['엔진오일',0],['오일필터',0],['에어필터(엔진)',0],['연료필터',0],['점화플러그',0],['타이밍벨트/체인',0],['구동벨트',0],['냉각수(부동액)',0],['미션오일',0],['차동기어오일',0],['파워스티어링오일',0], ['브레이크패드(앞)',1],['브레이크패드(뒤)',1],['브레이크오일',1],['브레이크 디스크',1],['쇼바/서스펜션',1],['휠 얼라인먼트',1],['휠 밸런스',1], ['타이어 교체',2],['타이어 위치교환',2],['타이어 펑크수리',2],['휠/림 수리',2], ['배터리',3],['와이퍼',3],['워셔액',3],['에어컨필터(실내)',3],['에어컨 가스/점검',3],['전구/등화류',3],['퓨즈',3],['블랙박스',3], ['판금/도색',4],['유리 수리/교체',4],['사고수리',4],['흠집/덴트',4],['썬팅',4],['세차',4], ['정기검사',5],['자동차보험',5],['자동차세',5],['주차/통행료',5], ['주유',6],['전기충전',6],['LPG충전',6], ['감속기오일',7],['배터리 냉각수',7],['고전압배터리 점검',7], ['기타(메모에 적기)',8] ]; var NAME2ID = {}; (function(){ for (var i = 0; i < ITEMS.length; i++) NAME2ID[ITEMS[i][0]] = i; })(); /* ===== 도우미 ===== */ function $(id){ return document.getElementById(id); } function el(tag, cls, txt){ var e = document.createElement(tag); if (cls) e.className = cls; if (txt != null) e.textContent = txt; return e; } function pad2(n){ return n < 10 ? '0' + n : '' + n; } function todayStr(){ var d = new Date(); return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()); } function dateToN(s){ var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s || ''); return m ? (parseInt(m[1], 10) - 2000) * 10000 + parseInt(m[2], 10) * 100 + parseInt(m[3], 10) : 0; } function nToDate(n){ n = parseInt(n, 10) || 0; if (!n) return ''; return (2000 + Math.floor(n / 10000)) + '-' + pad2(Math.floor(n / 100) % 100) + '-' + pad2(n % 100); } function fmtDate(s){ var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s || ''); return m ? m[1].slice(2) + '.' + m[2] + '.' + m[3] : (s || ''); } function digits(s){ return String(s == null ? '' : s).replace(/[^\d]/g, ''); } function fmtNum(s){ var d = digits(s); return d ? d.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : ''; } function toInt(s){ return parseInt(digits(s) || '0', 10) || 0; } function norm(s){ return String(s || '').replace(/\s+/g, '').toUpperCase(); } function copyObj(o){ var r = {}, k; for (k in o) if (Object.prototype.hasOwnProperty.call(o, k)) r[k] = o[k]; return r; } function lsGet(k){ try { return localStorage.getItem(k); } catch (e) { return null; } } function lsSet(k, v){ try { localStorage.setItem(k, v); } catch (e) {} } function scrollY(){ return window.pageYOffset || document.documentElement.scrollTop || 0; } function keepScroll(fn){ var y = scrollY(); fn(); window.scrollTo(0, y); } function autosize(ta){ if (!ta.getClientRects().length) return; /* 숨겨진 칸은 높이를 재지 않아요 */ keepScroll(function(){ ta.style.height = 'auto'; ta.style.height = (ta.scrollHeight + 2) + 'px'; }); } /* ===== 토스트 · 클립보드 · 팝업 ===== */ var toastEl = $('cbk-toast'), toastT = null; function toast(msg){ if (toastEl.parentNode !== document.body) document.body.appendChild(toastEl); toastEl.textContent = msg; toastEl.className = 'cbk-scope cbk-toast cbk-on'; clearTimeout(toastT); toastT = setTimeout(function(){ toastEl.className = 'cbk-scope cbk-toast'; }, 2300); } function copyText(t){ return new Promise(function(res){ function fb(){ var y = scrollY(); var ta = document.createElement('textarea'); ta.value = t; ta.setAttribute('readonly', ''); ta.style.cssText = 'position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;font-size:16px'; document.body.appendChild(ta); ta.select(); try { ta.setSelectionRange(0, t.length); } catch (e) {} var ok = false; try { ok = document.execCommand('copy'); } catch (e2) {} document.body.removeChild(ta); window.scrollTo(0, y); res(ok); } if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(t).then(function(){ res(true); }, function(){ fb(); }); } else { fb(); } }); } function copyToast(t, okMsg){ if (!t) { toast('복사할 내용이 없어요'); return; } copyText(t).then(function(ok){ toast(ok ? (okMsg || '복사했어요') : '복사에 실패했어요. 글을 길게 눌러 직접 복사해 주세요'); }); } var openPops = [], prevOverflow = ''; function openPop(id){ var p = $(id); if (p.parentNode !== document.body) document.body.appendChild(p); p.classList.add('cbk-show'); if (!openPops.length) { prevOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; } if (openPops.indexOf(id) < 0) openPops.push(id); p.scrollTop = 0; } function closePop(id){ var p = $(id); p.classList.remove('cbk-show'); var i = openPops.indexOf(id); if (i >= 0) openPops.splice(i, 1); if (!openPops.length) document.body.style.overflow = prevOverflow; } ['cbk-pop-comment', 'cbk-pop-share', 'cbk-pop-save', 'cbk-pop-mail'].forEach(function(id){ var p = $(id); p.addEventListener('click', function(ev){ if (ev.target === p) closePop(id); }); var cs = p.querySelectorAll('[data-close]'); for (var i = 0; i < cs.length; i++) cs[i].addEventListener('click', function(){ closePop(this.getAttribute('data-close')); }); }); document.addEventListener('keydown', function(ev){ if (ev.key !== 'Escape') return; if (openPops.length) closePop(openPops[openPops.length - 1]); else if ($('cbk-findbar').classList.contains('cbk-show')) closeFind(); }); /* ===== 지도 (정비소 검색) ===== */ var MAPS = { naver: { name: '네X버', color: '#03C75A', blank: true, open: function(q){ return 'https://map.naver.com/p/search/' + encodeURIComponent(q); } }, tmap: { name: '티X', color: '#0064FF', blank: false, open: function(q){ return 'tmap://search?name=' + encodeURIComponent(q); } }, kakao: { name: '카X오', color: '#F2B800', blank: true, open: function(q){ return 'https://map.kakao.com/link/search/' + encodeURIComponent(q); } }, google: { name: '구X', color: '#EA4335', blank: true, open: function(q){ return 'https://www.google.com/maps/search/?api=1&query=' + encodeURIComponent(q); } } }; /* ===== 상태 ===== */ function newRec(){ return { date: todayStr(), km: '', shop: '', total: '', memo: '', note: '', items: {} }; } var S = { car: { no: '', model: '' }, rec: newRec(), opts: { url: false, short: false, mini: false }, hist: [], map: 'naver' }; var restoring = false, saveT = null; var U = [], R = [], lastSnap = ''; function packState(){ var o = {}, c = S.car, r = S.rec; if (c.no) o.n = c.no; if (c.model) o.m = c.model; if (r.date && r.date !== todayStr()) o.d = r.date; if (r.km) o.k = r.km; if (r.shop) o.s = r.shop; if (r.total) o.t = r.total; if (r.memo) o.o = r.memo; if (r.note) o.q = r.note; if (Object.keys(r.items).length) o.i = r.items; if (S.opts.url) o.u = 1; if (S.opts.short) o.h = 1; if (S.opts.mini) o.z = 1; if (S.map && S.map !== 'naver') o.p = S.map; return o; } function unpackState(o){ S.car = { no: o.n || '', model: o.m || '' }; var r = newRec(); if (o.d) r.date = o.d; r.km = o.k || ''; r.shop = o.s || ''; r.total = o.t || ''; r.memo = o.o || ''; r.note = o.q || ''; r.items = (o.i && typeof o.i === 'object') ? copyObj(o.i) : {}; S.rec = r; S.opts = { url: !!o.u, short: !!o.h, mini: !!o.z }; S.map = MAPS[o.p] ? o.p : 'naver'; } function snapshot(){ return JSON.stringify({ c: S.car, r: S.rec }); } function persist(){ if (restoring) return; lsSet(LS_STATE, JSON.stringify(packState())); var s = snapshot(); if (s !== lastSnap) { U.push(lastSnap); if (U.length > 60) U.shift(); R = []; lastSnap = s; } updUndo(); } function changed(){ if (restoring) return; clearTimeout(saveT); saveT = setTimeout(persist, 700); schedPanel(); } function flushSave(){ clearTimeout(saveT); persist(); } function updUndo(){ $('cbk-undo').disabled = !U.length; $('cbk-redo').disabled = !R.length; } function loadSnap(s){ restoring = true; try { var o = JSON.parse(s); S.car = o.c; S.rec = o.r; } catch (e) {} applyState(); restoring = false; lsSet(LS_STATE, JSON.stringify(packState())); } function doUndo(){ flushSave(); if (!U.length) return; R.push(lastSnap); lastSnap = U.pop(); loadSnap(lastSnap); updUndo(); } function doRedo(){ flushSave(); if (!R.length) return; U.push(lastSnap); lastSnap = R.pop(); loadSnap(lastSnap); updUndo(); } /* ===== 기록 계산 ===== */ function curEntry(){ return { no: S.car.no.trim(), model: S.car.model.trim(), date: S.rec.date || todayStr(), km: S.rec.km, shop: S.rec.shop.trim(), total: S.rec.total, memo: S.rec.memo.trim(), note: (S.rec.note || '').trim(), items: copyObj(S.rec.items) }; } function sortedIds(items){ return Object.keys(items).map(Number).sort(function(a, b){ return a - b; }); } function itemName(id){ return ITEMS[id] ? ITEMS[id][0] : '항목#' + id; } function sumItems(items){ var t = 0, k; for (k in items) t += toInt(items[k]); return t; } function entryTotal(e){ var t = toInt(e.total); return t > 0 ? t : sumItems(e.items); } function hasContent(e){ return sortedIds(e.items).length > 0 || !!e.memo || !!e.shop || !!e.note; } function line2Full(e){ var p = []; if (e.date) p.push(fmtDate(e.date)); if (toInt(e.km)) p.push(fmtNum(e.km) + 'km'); var its = sortedIds(e.items).map(function(id){ var a = toInt(e.items[id]); return itemName(id) + (a ? ' ' + fmtNum(a) : ''); }); if (its.length) p.push(its.join(', ')); if (e.shop) p.push(e.shop); if (e.note) p.push(e.note.replace(/\s*\n\s*/g, ' ')); var t = entryTotal(e); if (t) p.push('합계 ' + fmtNum(t) + '원'); if (e.memo) p.push(e.memo.replace(/\s*\n\s*/g, ' ')); return p.join(' | '); } function line2Mini(e){ var p = []; if (e.date) p.push(fmtDate(e.date)); var its = sortedIds(e.items).map(itemName); if (its.length) p.push(its.join(',')); if (e.note) p.push(e.note.replace(/\s*\n\s*/g, ' ')); var t = entryTotal(e); if (t) p.push(fmtNum(t) + '원'); return p.join(' | '); } function assemble(e, o, url){ var title = '[차계부] ' + e.no + (e.model ? ' ' + e.model : ''); var l2 = o.mini ? line2Mini(e) : line2Full(e); var l3 = url ? ('▶ ' + url) : ''; var cut = false; var total = title.length + 1 + l2.length + (l3 ? 1 + l3.length : 0); if (total > LIMIT) { var room = LIMIT - title.length - 1 - (l3 ? 1 + l3.length : 0); if (room >= 8) { l2 = l2.slice(0, room - 1) + '…'; cut = true; } } var text = [title, l2, l3].filter(function(x){ return !!x; }).join('\n'); return { text: text, cut: cut }; } /* ===== 압축 링크 (?d=) ===== */ function toCompact(e){ var its = sortedIds(e.items).map(function(id){ var a = toInt(e.items[id]); return a ? [id, a] : id; }); var a = [e.no || '', e.model || '', dateToN(e.date), toInt(e.km), its, e.shop || '', toInt(e.total), (e.memo || '').replace(/\s*\n\s*/g, ' '), (e.note || '').replace(/\s*\n\s*/g, ' ')]; while (a.length) { var last = a[a.length - 1]; if (last === '' || last === 0 || (Array.isArray(last) && !last.length)) a.pop(); else break; } return a; } function fromCompact(a){ var its = {}; (a[4] || []).forEach(function(x){ if (Array.isArray(x)) its[String(x[0])] = String(x[1] || ''); else its[String(x)] = ''; }); return { no: a[0] || '', model: a[1] || '', date: nToDate(a[2]), km: a[3] ? String(a[3]) : '', items: its, shop: a[5] || '', total: a[6] ? String(a[6]) : '', memo: a[7] || '', note: a[8] || '' }; } function b64uEnc(bytes){ var s = '', i; for (i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]); return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, ''); } function b64uDec(str){ var s = str.replace(/-/g, '+').replace(/_/g, '/'); while (s.length % 4) s += '='; var bin = atob(s), out = new Uint8Array(bin.length), i; for (i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i); return out; } /* pk0_ = 압축 없이 짧을 때, pk1_ = deflateRaw level9. 예전 링크도 항상 열려야 하므로 접두사 의미는 바꾸지 않아요 */ function encPayload(obj){ var u8 = new TextEncoder().encode(JSON.stringify(obj)); var raw = 'pk0_' + b64uEnc(u8); if (typeof pako !== 'undefined') { var c = 'pk1_' + b64uEnc(pako.deflateRaw(u8, { level: 9 })); return c.length <= raw.length ? c : raw; } return raw; } function decPayload(str){ try { var pre = str.slice(0, 4), body = str.slice(4), u8; if (pre === 'pk0_') u8 = b64uDec(body); else if (pre === 'pk1_') { if (typeof pako === 'undefined') return null; u8 = pako.inflateRaw(b64uDec(body)); } else return null; return JSON.parse(new TextDecoder().decode(u8)); } catch (e) { return null; } } function baseUrl(){ if (APP_URL) return APP_URL; try { return location.origin + location.pathname; } catch (e) { return ''; } } function linkFor(obj){ var b = baseUrl(); return b + (b.indexOf('?') >= 0 ? '&' : '?') + 'd=' + encPayload(obj); } function entriesFromPayload(p){ if (Array.isArray(p)) return [fromCompact(p)]; if (p && Array.isArray(p.b)) return p.b.filter(Array.isArray).map(fromCompact); return []; } /* ===== 짧은 링크 (is.gd → v.gd → da.gd → cleanuri, TinyURL 사용 안 함) ===== */ var skipUntil = {}, shortCache = {}; function fetchT(url, opts, ms){ return new Promise(function(res, rej){ var ctrl = (typeof AbortController !== 'undefined') ? new AbortController() : null; var t = setTimeout(function(){ if (ctrl) { try { ctrl.abort(); } catch (e) {} } var err = new Error(ms + 'ms 안에 응답이 없어요'); err.name = 'Timeout'; rej(err); }, ms); opts = opts || {}; if (ctrl) opts.signal = ctrl.signal; fetch(url, opts).then(function(r){ return r.text().then(function(tx){ clearTimeout(t); res({ status: r.status, text: tx }); }); }).catch(function(e){ clearTimeout(t); rej(e); }); }); } var SERVICES = [ { id: 'is.gd', host: 'is.gd', run: function(u){ return fetchT('https://is.gd/create.php?format=simple&url=' + encodeURIComponent(u), null, 7000); } }, { id: 'v.gd', host: 'v.gd', run: function(u){ return fetchT('https://v.gd/create.php?format=simple&url=' + encodeURIComponent(u), null, 7000); } }, { id: 'da.gd', host: 'da.gd', run: function(u){ return fetchT('https://da.gd/shorten?url=' + encodeURIComponent(u), null, 7000); } }, { id: 'cleanuri', host: 'cleanuri.com', run: function(u){ return fetchT('https://cleanuri.com/api/v1/shorten', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'url=' + encodeURIComponent(u) }, 7000).then(function(r){ try { var j = JSON.parse(r.text); if (j && j.result_url) return { status: r.status, text: String(j.result_url) }; } catch (e) {} return r; }); } } ]; function validShort(txt, svc, longUrl){ var s = String(txt || '').trim().split(/\s+/)[0]; if (!/^https?:\/\//i.test(s)) return ''; var m = /^https?:\/\/([^\/?#]+)/i.exec(s); if (!m) return ''; var host = m[1].toLowerCase(); if (host !== svc.host && host.slice(-(svc.host.length + 1)) !== '.' + svc.host) return ''; if (s.length >= longUrl.length) return ''; return s; } function shortenUrl(longUrl){ var diag = [], i = 0; function next(){ if (i >= SERVICES.length) return Promise.resolve({ ok: false, diag: diag }); var svc = SERVICES[i++]; if (skipUntil[svc.id] && skipUntil[svc.id] > Date.now()) { diag.push(svc.id + ': 실패 직후라 5분간 건너뜀'); return next(); } return svc.run(longUrl).then(function(r){ var ok = validShort(r.text, svc, longUrl); if (ok) return { ok: true, url: ok, svc: svc.id, diag: diag }; skipUntil[svc.id] = Date.now() + 300000; diag.push(svc.id + ': 응답 확인 실패 (상태 ' + r.status + ', 앞 30자: ' + String(r.text || '').slice(0, 30).replace(/\s+/g, ' ') + ')'); return next(); }, function(e){ skipUntil[svc.id] = Date.now() + 300000; diag.push(svc.id + ': ' + (e && e.name) + ' / ' + (e && e.message)); return next(); }); } return next(); } /* ===== 화면 그리기 ===== */ var CHIP = {}; function buildChips(){ var wrap = $('cbk-chips'); wrap.innerHTML = ''; for (var g = 0; g < G.length; g++) { var box = el('div', 'cbk-grp'); box.appendChild(el('div', 'cbk-grp-t', G[g])); var row = el('div', 'cbk-chiprow'); for (var i = 0; i < ITEMS.length; i++) { if (ITEMS[i][1] !== g) continue; (function(id){ var b = el('button', 'cbk-chip cbk-tip', ITEMS[id][0]); b.type = 'button'; b.setAttribute('data-tip', ITEMS[id][0] + ' 체크/해제'); b.setAttribute('aria-pressed', 'false'); b.addEventListener('click', function(){ toggleItem(id); }); CHIP[id] = b; row.appendChild(b); })(i); } box.appendChild(row); wrap.appendChild(box); } } function paintChips(){ var n = 0; for (var id in CHIP) { var on = Object.prototype.hasOwnProperty.call(S.rec.items, String(id)); if (on) n++; CHIP[id].className = 'cbk-chip cbk-tip' + (on ? ' cbk-on' : ''); CHIP[id].setAttribute('aria-pressed', on ? 'true' : 'false'); } $('cbk-cnt').textContent = n + '개'; } function toggleItem(id){ var k = String(id); if (Object.prototype.hasOwnProperty.call(S.rec.items, k)) delete S.rec.items[k]; else S.rec.items[k] = ''; keepScroll(function(){ paintChips(); renderAmts(); }); changed(); } function renderAmts(){ var box = $('cbk-amts'); box.innerHTML = ''; var ids = sortedIds(S.rec.items); if (!ids.length) return; box.appendChild(el('div', 'cbk-sub-h', '항목별 금액 (적으면 요약에 들어가요, 비워도 돼요)')); ids.forEach(function(id){ var k = String(id); var row = el('div', 'cbk-arow'); row.appendChild(el('div', 'cbk-arow-n', itemName(id))); var inp = el('input'); inp.type = 'text'; inp.setAttribute('inputmode', 'numeric'); inp.placeholder = '금액(원)'; inp.setAttribute('autocomplete', 'off'); inp.value = fmtNum(S.rec.items[k]); inp.addEventListener('input', function(){ S.rec.items[k] = digits(inp.value); changed(); }); inp.addEventListener('change', function(){ inp.value = fmtNum(S.rec.items[k]); }); row.appendChild(inp); var x = el('button', 'cbk-btn cbk-tip cbk-tip-r', '✕'); x.type = 'button'; x.setAttribute('data-tip', itemName(id) + ' 체크 해제'); x.addEventListener('click', function(){ toggleItem(id); }); row.appendChild(x); box.appendChild(row); }); } function renderPlate(){ var p = $('cbk-plate-no'); if (!p) return; var v = S.car.no.trim(); p.textContent = v || '12가 3456'; p.className = 'cbk-plate-no' + (v ? '' : ' cbk-ph'); } function applyState(){ $('cbk-no').value = S.car.no; $('cbk-model').value = S.car.model; $('cbk-date').value = S.rec.date || ''; $('cbk-km').value = fmtNum(S.rec.km); $('cbk-shop').value = S.rec.shop; $('cbk-note').value = S.rec.note || ''; $('cbk-total').value = fmtNum(S.rec.total); $('cbk-memo').value = S.rec.memo; autosize($('cbk-memo')); paintChips(); renderAmts(); renderPlate(); renderHist(); paintDate(); paintMap(); renderPanels(); } function warnField(id){ var f = $(id); f.classList.add('cbk-warn'); setTimeout(function(){ f.classList.remove('cbk-warn'); }, 2500); } /* ===== 기록 목록 ===== */ function loadHist(){ try { var a = JSON.parse(lsGet(LS_HIST) || '[]'); if (Array.isArray(a)) return a.filter(function(h){ return h && typeof h === 'object' && h.items; }); } catch (e) {} return []; } function saveHist(){ lsSet(LS_HIST, JSON.stringify(S.hist)); } function entryKey(e){ return JSON.stringify(toCompact(e)); } function histAdd(e){ var ent = copyObj(e); ent.items = copyObj(e.items); ent.ts = Date.now(); var k = entryKey(ent); S.hist = S.hist.filter(function(h){ return entryKey(h) !== k; }); S.hist.unshift(ent); if (S.hist.length > 300) S.hist.length = 300; saveHist(); } function histFor(no){ var n = norm(no); return S.hist.filter(function(h){ return !n || norm(h.no) === n; }); } function entryCard(e, srcLabel, isEx){ var c = el('div', 'cbk-rec'); if (srcLabel) c.appendChild(el('span', 'cbk-src' + (isEx ? ' cbk-ex' : ''), srcLabel)); var top = el('div', 'cbk-rec-top'); top.appendChild(el('span', 'cbk-rec-d', fmtDate(e.date) || '날짜 없음')); if (toInt(e.km)) top.appendChild(el('span', 'cbk-rec-km', fmtNum(e.km) + ' km')); c.appendChild(top); var ids = sortedIds(e.items); if (ids.length) c.appendChild(el('div', 'cbk-rec-i', ids.map(function(id){ var a = toInt(e.items[id]); return itemName(id) + (a ? ' ' + fmtNum(a) : ''); }).join(', '))); var meta = []; if (e.no) meta.push(e.no + (e.model ? ' ' + e.model : '')); if (e.shop) meta.push(e.shop); var t = entryTotal(e); if (t) meta.push('합계 ' + fmtNum(t) + '원'); if (meta.length) c.appendChild(el('div', 'cbk-rec-m', meta.join(' · '))); if (e.note) c.appendChild(el('div', 'cbk-rec-m', e.note)); if (e.memo) c.appendChild(el('div', 'cbk-rec-m', e.memo)); return c; } function mkBtn(label, cls, tip, fn){ var b = el('button', 'cbk-btn cbk-btn-sm cbk-tip ' + (cls || ''), label); b.type = 'button'; b.setAttribute('data-tip', tip); b.addEventListener('click', fn); return b; } function loadIntoDraft(e){ S.car = { no: e.no || '', model: e.model || '' }; var r = newRec(); r.date = e.date || todayStr(); r.km = e.km || ''; r.shop = e.shop || ''; r.total = e.total || ''; r.memo = e.memo || ''; r.note = e.note || ''; r.items = copyObj(e.items); S.rec = r; applyState(); flushSave(); toast('입력칸으로 불러왔어요'); } function renderHist(){ var box = $('cbk-hist'); box.innerHTML = ''; var list = histFor(S.car.no); var sum = $('cbk-hsum'); if (!list.length) { sum.textContent = ''; box.appendChild(el('div', 'cbk-empty', S.hist.length ? '이 차번호로 담긴 기록이 아직 없어요.' : '아직 담긴 기록이 없어요. [댓글저장]을 누르면 이 기기에 같이 담겨요.')); return; } var tot = 0; list.forEach(function(h){ tot += entryTotal(h); }); sum.textContent = (S.car.no.trim() ? S.car.no.trim() + ' · ' : '전체 · ') + list.length + '건' + (tot ? ' · 합계 ' + fmtNum(tot) + '원' : ''); list.slice(0, 30).forEach(function(h){ var c = entryCard(h); var b = el('div', 'cbk-rec-b'); b.appendChild(mkBtn('불러오기', '', '이 기록을 입력칸으로 가져와 고쳐요', function(){ loadIntoDraft(h); })); b.appendChild(mkBtn('댓글 복사', '', '이 기록의 댓글 요약을 다시 복사해요', function(){ copyToast(assemble(h, { mini: false }, '').text, '댓글 요약을 복사했어요'); })); var del = mkBtn('삭제', 'cbk-btn-del', '이 기록을 지워요 (한 번 더 누르면 지워져요)', function(){ if (!del.classList.contains('cbk-arm')) { del.classList.add('cbk-arm'); del.textContent = '정말 삭제?'; setTimeout(function(){ del.classList.remove('cbk-arm'); del.textContent = '삭제'; }, 3000); return; } S.hist = S.hist.filter(function(x){ return x !== h; }); saveHist(); renderHist(); toast('기록을 지웠어요'); }); b.appendChild(del); c.appendChild(b); box.appendChild(c); }); if (list.length > 30) box.appendChild(el('div', 'cbk-empty', '최근 30건만 보여요. 전체는 [저장]의 엑셀에서 볼 수 있어요.')); } /* ===== 댓글 패널 (댓글저장 팝업과 내기록 탭이 같은 모양을 써요) ===== */ var panels = [], popupPanel = null, tabPanel = null, panelT = null; function sampleEntry(){ return { no: '12가3456', model: '아반떼CN7', date: todayStr(), km: '45200', items: { '0': '80000', '1': '15000' }, shop: '강남정비소', total: '', memo: '', note: '합성유 5W-30' }; } function makePanel(host, px, live){ var P = { px: px, live: live, entry: null, loading: false, tok: 0, example: false }; var wrap = el('div', 'cbk-panel'); var ta = el('textarea', 'cbk-ta'); ta.id = px + '-text'; ta.readOnly = true; ta.rows = 4; ta.setAttribute('aria-label', '댓글 내용'); var cnt = el('div', 'cbk-count'); cnt.id = px + '-count'; var n = el('span'); n.id = px + '-n'; var bar = el('span', 'cbk-bar'), bi = el('i'); bar.appendChild(bi); cnt.appendChild(n); cnt.appendChild(bar); var msg = el('p', 'cbk-msg'); msg.id = px + '-msg'; var opts = el('div', 'cbk-opts'); function chk(id, label, tip, sub){ var l = el('label', 'cbk-chk cbk-tip cbk-tip-l' + (sub ? ' cbk-sub-opt' : '')); l.setAttribute('data-tip', tip); var i = el('input'); i.type = 'checkbox'; i.id = px + '-' + id; l.appendChild(i); l.appendChild(el('span', null, label)); opts.appendChild(l); return { l: l, i: i }; } var cUrl = chk('o-url', '입력 내용 URL 붙이기 (압축 링크)', '맨 아래 줄에 입력 내용을 담은 압축 링크를 붙여요', false); var cShort = chk('o-short', '짧은 URL로 바꾸기', '링크를 더 짧게 줄여요 (단축 사이트를 거쳐요)', true); var cMini = chk('o-mini', '요약 줄이기 (항목명만, 금액 생략)', '금액을 빼고 항목 이름만 남겨 글자수를 줄여요', false); var diag = el('p', 'cbk-diag'); diag.id = px + '-diag'; var copy = el('button', 'cbk-btn cbk-btn-pri cbk-tip cbk-tip-l', '댓글 복사'); copy.type = 'button'; copy.id = px + '-copy'; copy.setAttribute('data-tip', '위 댓글 내용을 클립보드에 복사해요'); copy.style.width = '100%'; [ta, cnt, msg, opts, diag, copy].forEach(function(x){ wrap.appendChild(x); }); host.appendChild(wrap); P.ta = ta; P.n = n; P.bar = bi; P.cnt = cnt; P.msg = msg; P.diag = diag; P.cUrl = cUrl.i; P.cShort = cShort.i; P.cShortL = cShort.l; P.cMini = cMini.i; P.copy = copy; cUrl.i.addEventListener('change', function(){ S.opts.url = this.checked; if (!this.checked) S.opts.short = false; changed(); renderPanels(); }); cShort.i.addEventListener('change', function(){ S.opts.short = this.checked; changed(); renderPanels(); }); cMini.i.addEventListener('change', function(){ S.opts.mini = this.checked; changed(); renderPanels(); }); copy.addEventListener('click', function(){ if (P.example) { toast('먼저 차번호와 항목을 입력해 주세요'); return; } var e = panelEntry(P), o = S.opts; if (P.live && o.url && o.short) { var lu = linkFor(toCompact(e)); if (!shortCache[lu]) { P.msg.textContent = '짧은 링크 만드는 중…'; shortenUrl(lu).then(function(r){ shortCache[lu] = r; renderPanels(); toast(r.ok ? '짧은 링크를 만들었어요. 다시 [댓글 복사]를 눌러 주세요' : '짧은 링크를 만들지 못해 원본 링크를 드려요. 다시 [댓글 복사]를 눌러 주세요'); }); return; } } if (P.live) { histAdd(e); renderHist(); } copyToast(P.ta.value, '댓글 내용을 복사했어요. 댓글창에 붙여넣어 주세요'); }); panels.push(P); return P; } function panelEntry(P){ if (P.live) { var ce = curEntry(); if (ce.no && hasContent(ce)) { P.example = false; return ce; } P.example = true; return sampleEntry(); } P.example = false; return P.entry; } function renderPanel(P){ var e = panelEntry(P); if (!e) return; var o = S.opts, url = '', msg = '', amber = false, diag = ''; P.cUrl.checked = o.url; P.cShort.checked = o.short; P.cMini.checked = o.mini; P.cShort.disabled = !o.url; P.cShortL.className = 'cbk-chk cbk-sub-opt cbk-tip cbk-tip-l' + (o.url ? '' : ' cbk-dim'); if (o.url) { var lu = linkFor(toCompact(e)); url = lu; msg = '압축 링크 · ' + fmtNum(lu.length) + '자'; if (lu.length >= 2000) { msg += ' · 링크가 길어요. [짧은 URL로 바꾸기]를 추천해요'; amber = true; } if (o.short) { var c = shortCache[lu]; if (c) { if (c.ok) { url = c.url; msg = '짧은 링크 완성 · ' + c.svc + ' · ' + fmtNum(url.length) + '자'; amber = false; } else { msg = '짧은 링크를 만들지 못해 원본 링크를 드려요 · ' + fmtNum(lu.length) + '자'; amber = true; diag = '진단\n' + c.diag.join('\n'); } } else if (!P.live) { msg = '짧은 링크 만드는 중… (원본 링크를 먼저 보여드려요)'; if (!P.loading) { P.loading = true; var my = P.tok; shortenUrl(lu).then(function(r){ shortCache[lu] = r; P.loading = false; if (my === P.tok) renderPanel(P); }); } } else { msg = '짧은 링크는 [댓글 복사]를 누를 때 만들어요 (지금은 원본 링크예요)'; } } } else { msg = 'URL 없이 입력한 내용만 댓글에 남겨요'; } var r = assemble(e, o, url); if (r.cut) { msg = '1000자를 넘어 요약 끝을 줄였어요. URL을 붙이면 전체 내용이 링크에 담겨요. · ' + msg; amber = true; } if (P.example) { msg = '아직 입력이 없어 예시로 보여드려요. 차번호와 항목을 입력하면 내 기록으로 바뀌어요.'; amber = false; diag = ''; } P.ta.value = r.text; autosize(P.ta); var len = r.text.length; P.n.textContent = fmtNum(len) + ' / ' + fmtNum(LIMIT) + '자'; P.bar.style.width = Math.min(100, Math.round(len / LIMIT * 100)) + '%'; P.cnt.className = 'cbk-count' + (len > LIMIT ? ' cbk-over' : (len > 900 ? ' cbk-warn' : '')); P.msg.textContent = msg; P.msg.className = 'cbk-msg' + (amber ? ' cbk-amber' : ''); P.diag.textContent = diag; P.copy.disabled = P.example; } function renderPanels(){ for (var i = 0; i < panels.length; i++) renderPanel(panels[i]); } function schedPanel(){ clearTimeout(panelT); panelT = setTimeout(function(){ if (tabPanel) renderPanel(tabPanel); }, 150); } /* ===== 댓글저장 (타이틀바·아래 버튼이 같이 써요) ===== */ function openComment(){ flushSave(); var e = curEntry(); if (!e.no) { warnField('cbk-no'); try { $('cbk-mycar').scrollIntoView({ block: 'center' }); } catch (x) {} toast('차번호를 먼저 입력해 주세요'); return; } if (!hasContent(e)) { toast('체크한 항목이나 정비소, 메모를 먼저 입력해 주세요'); return; } histAdd(e); renderHist(); popupPanel.entry = e; popupPanel.loading = false; popupPanel.tok++; openPop('cbk-pop-comment'); renderPanel(popupPanel); } /* ===== 공유 팝업 ===== */ var sh = { entry: null, long: '', short: null }; function openShare(){ flushSave(); var e = curEntry(); if (!e.no || !hasContent(e)) { toast('공유할 기록이 비어 있어요. 차번호와 항목을 먼저 입력해 주세요'); return; } sh.entry = e; sh.short = null; var payload = encPayload(toCompact(e)); sh.long = baseUrl() + (baseUrl().indexOf('?') >= 0 ? '&' : '?') + 'd=' + payload; try { history.replaceState(null, '', '?d=' + payload); } catch (err) {} $('cbk-s-long').value = sh.long; autosize($('cbk-s-long')); var lm = $('cbk-s-lmsg'); lm.textContent = fmtNum(sh.long.length) + '자' + (sh.long.length >= 2000 ? ' · 링크가 길어요. 단축 링크를 추천해요' : ''); lm.className = 'cbk-msg' + (sh.long.length >= 2000 ? ' cbk-amber' : ''); $('cbk-s-short').value = ''; $('cbk-s-smsg').textContent = ''; $('cbk-s-qr').innerHTML = ''; $('cbk-s-qmsg').textContent = ''; var body = assemble(e, { mini: false }, sh.long).text; $('cbk-s-mail').href = 'mailto:?subject=' + encodeURIComponent('[차계부] ' + e.no) + '&body=' + encodeURIComponent(body); $('cbk-s-sms').href = 'sms:?&body=' + encodeURIComponent(body); openPop('cbk-pop-share'); } function makeShort(then){ var lu = sh.long; if (shortCache[lu]) { then(shortCache[lu]); return; } $('cbk-s-smsg').textContent = '짧은 링크 만드는 중…'; shortenUrl(lu).then(function(r){ shortCache[lu] = r; then(r); }); } function showShort(r){ var m = $('cbk-s-smsg'); if (r.ok) { sh.short = r.url; $('cbk-s-short').value = r.url; m.textContent = '완성 · ' + r.svc + ' · ' + fmtNum(r.url.length) + '자'; m.className = 'cbk-msg'; } else { sh.short = null; $('cbk-s-short').value = sh.long; m.textContent = '짧은 링크를 만들지 못해 원본 링크를 드려요\n' + r.diag.join('\n'); m.className = 'cbk-msg cbk-amber'; m.style.whiteSpace = 'pre-wrap'; } autosize($('cbk-s-short')); } $('cbk-s-lcopy').addEventListener('click', function(){ copyToast(sh.long, '원본 링크를 복사했어요'); }); $('cbk-s-make').addEventListener('click', function(){ makeShort(showShort); }); $('cbk-s-scopy').addEventListener('click', function(){ if (sh.short) { copyToast(sh.short, '단축 링크를 복사했어요'); return; } makeShort(function(r){ showShort(r); copyToast(r.ok ? r.url : sh.long, r.ok ? '단축 링크를 복사했어요' : '짧은 링크를 만들지 못해 원본 링크를 복사했어요'); }); }); function loadScript(src){ return new Promise(function(res, rej){ var s = document.createElement('script'); s.src = src; s.onload = res; s.onerror = function(){ rej(new Error('라이브러리를 불러오지 못했어요')); }; document.body.appendChild(s); }); } $('cbk-s-qmake').addEventListener('click', function(){ var msg = $('cbk-s-qmsg'); msg.textContent = 'QR 만드는 중…'; function draw(url, note){ var box = $('cbk-s-qr'); box.innerHTML = ''; try { new QRCode(box, { text: url, width: 200, height: 200, correctLevel: QRCode.CorrectLevel.L }); msg.textContent = note; } catch (e) { msg.textContent = 'QR을 만들지 못했어요 (' + (e && e.message) + '). 링크가 너무 길어요. 단축 링크를 먼저 만들어 주세요'; } } function go(){ if (sh.long.length > 600) { makeShort(function(r){ showShort(r); draw(r.ok ? r.url : sh.long, r.ok ? '짧은 링크 기준으로 만들었어요' : '짧은 링크를 만들지 못해 원본 링크로 만들었어요'); }); } else { draw(sh.long, '원본 링크 기준으로 만들었어요'); } } if (typeof QRCode !== 'undefined') go(); else loadScript('https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js').then(go, function(e){ msg.textContent = e.message; }); }); /* ===== 저장 팝업 (엑셀 · URL) ===== */ function itemsText(h){ return sortedIds(h.items).map(function(id){ var a = toInt(h.items[id]); return itemName(id) + (a ? ':' + a : ''); }).join('; '); } function openSave(){ flushSave(); var n = histFor(S.car.no).length; $('cbk-v-xnote').textContent = (S.car.no.trim() ? S.car.no.trim() : '전체 차량') + ' 기록 ' + n + '건을 파일로 저장해요. 불러오기는 같은 모양의 엑셀 파일을 읽어요.'; $('cbk-v-xmsg').textContent = ''; $('cbk-v-umsg').textContent = n ? ('내 기록 ' + n + '건') : '담긴 기록이 없어요'; openPop('cbk-pop-save'); } function ensureXlsx(){ if (typeof XLSX !== 'undefined') return Promise.resolve(); return loadScript('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js'); } $('cbk-v-xsave').addEventListener('click', function(){ var list = histFor(S.car.no), m = $('cbk-v-xmsg'); if (!list.length) { m.textContent = '저장할 기록이 없어요'; return; } m.textContent = '엑셀 만드는 중…'; ensureXlsx().then(function(){ var rows = [['차번호', '차종', '날짜', '주행거리(km)', '항목(금액)', '정비소', '합계(원)', '메모', '간단메모']]; list.forEach(function(h){ rows.push([h.no || '', h.model || '', h.date || '', toInt(h.km) || '', itemsText(h), h.shop || '', entryTotal(h) || '', h.memo || '', h.note || '']); }); var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, XLSX.utils.aoa_to_sheet(rows), '차계부'); XLSX.writeFile(wb, VERSION_FILE + '.xlsx'); m.textContent = '엑셀 파일을 저장했어요 (' + list.length + '건)'; }).catch(function(e){ m.textContent = '엑셀 저장에 실패했어요: ' + ((e && e.name) || '') + ' / ' + ((e && e.message) || ''); }); }); $('cbk-v-xload').addEventListener('click', function(){ $('cbk-v-xfile').click(); }); $('cbk-v-xfile').addEventListener('change', function(){ var f = this.files && this.files[0], inp = this, m = $('cbk-v-xmsg'); if (!f) return; m.textContent = '엑셀 읽는 중…'; ensureXlsx().then(function(){ var fr = new FileReader(); fr.onload = function(){ try { var wb = XLSX.read(fr.result, { type: 'array' }); var rows = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { defval: '' }); var added = 0, unknown = 0; rows.forEach(function(r){ var no = String(r['차번호'] || '').trim(); if (!no) return; var items = {}, extra = []; String(r['항목(금액)'] || '').split(/;\s*/).forEach(function(tok){ tok = tok.trim(); if (!tok) return; var p = tok.lastIndexOf(':'), nm = p >= 0 ? tok.slice(0, p) : tok, amt = p >= 0 ? digits(tok.slice(p + 1)) : ''; if (Object.prototype.hasOwnProperty.call(NAME2ID, nm)) items[String(NAME2ID[nm])] = amt; else { extra.push(tok); unknown++; } }); var d = r['날짜']; if (typeof d === 'number') { var dt = new Date(Math.round((d - 25569) * 86400000)); d = dt.getUTCFullYear() + '-' + pad2(dt.getUTCMonth() + 1) + '-' + pad2(dt.getUTCDate()); } var memo = String(r['메모'] || ''); if (extra.length) memo = (memo ? memo + ' / ' : '') + extra.join(', '); histAdd({ no: no, model: String(r['차종'] || ''), date: String(d || ''), km: digits(r['주행거리(km)']), items: items, shop: String(r['정비소'] || ''), total: digits(r['합계(원)']), memo: memo, note: String(r['간단메모'] || '') }); added++; }); renderHist(); m.textContent = added + '건을 불러왔어요' + (unknown ? ' (목록에 없는 항목 ' + unknown + '개는 메모로 옮겼어요)' : ''); } catch (e) { m.textContent = '엑셀을 읽지 못했어요: ' + (e && e.message); } inp.value = ''; }; fr.readAsArrayBuffer(f); }).catch(function(e){ m.textContent = '엑셀 라이브러리를 불러오지 못했어요: ' + (e && e.message); }); }); function bundleLink(){ var list = histFor(S.car.no); if (!list.length) return ''; return linkFor({ b: list.map(toCompact) }); } $('cbk-v-ulong').addEventListener('click', function(){ var u = bundleLink(), m = $('cbk-v-umsg'); if (!u) { toast('저장할 기록이 없어요'); return; } m.textContent = '원본 링크 ' + fmtNum(u.length) + '자' + (u.length >= 2000 ? ' · 길어요. 단축링크복사를 추천해요' : ''); copyToast(u, '원본 링크를 복사했어요'); }); $('cbk-v-ushort').addEventListener('click', function(){ var u = bundleLink(), m = $('cbk-v-umsg'); if (!u) { toast('저장할 기록이 없어요'); return; } m.textContent = '짧은 링크 만드는 중…'; var c = shortCache[u]; function done(r){ shortCache[u] = r; m.textContent = r.ok ? ('완성 · ' + r.svc + ' · ' + fmtNum(r.url.length) + '자') : ('짧은 링크를 만들지 못해 원본 링크를 드려요\n' + r.diag.join('\n')); m.style.whiteSpace = 'pre-wrap'; copyToast(r.ok ? r.url : u, r.ok ? '단축 링크를 복사했어요' : '원본 링크를 복사했어요'); } if (c) done(c); else shortenUrl(u).then(done); }); /* ===== 차번호로 기록 찾기 ===== */ var CSEL = ['.tt-list-reply li', '.tt-comment-cont', '.tt_cmt', '#comment li', '.comment-list li', '.comments li', '.commentList li', '[class*="comment"] li', '[class*="reply"] li']; function scanComments(nq){ var seen = [], i, j, nodes; for (i = 0; i < CSEL.length; i++) { try { nodes = document.querySelectorAll(CSEL[i]); } catch (e) { continue; } for (j = 0; j < nodes.length; j++) { var nd = nodes[j]; if (nd.closest && nd.closest('.cbk-scope')) continue; if (norm(nd.textContent).indexOf(nq) < 0) continue; if (seen.indexOf(nd) < 0) seen.push(nd); } } var inner = seen.filter(function(a){ return !seen.some(function(b){ return b !== a && a.contains(b); }); }); var texts = []; inner.forEach(function(n){ var t = (n.innerText || n.textContent || '').trim(); if (t && texts.indexOf(t) < 0) texts.push(t); }); return texts.slice(0, 30); } function parseCommentEntries(text){ var m = /[?&]d=(pk[01]_[A-Za-z0-9_\-]+)/.exec(text || ''); if (!m) return []; return entriesFromPayload(decPayload(m[1])); } function exampleTexts(plate){ var p = plate || '12가3456'; var sample = { no: p, model: '아반떼CN7', date: '2026-03-14', km: '38900', items: { '18': '520000', '16': '40000' }, shop: '타이어프로 서초점', total: '', memo: '앞뒤 4짝 교체' }; var one = { no: p, model: '아반떼CN7', date: '2026-10-28', km: '45200', items: { '0': '80000', '1': '15000' }, shop: '강남정비소', total: '', memo: '' }; return [ assemble(one, { mini: false }, '').text, assemble(sample, { mini: false }, linkFor(toCompact(sample))).text ]; } function doFind(useExample){ var q = $('cbk-q').value.trim(); if (useExample) { q = '12가3456'; $('cbk-q').value = q; } var box = $('cbk-found'); box.innerHTML = ''; if (!q) { toast('차번호를 입력해 주세요'); return; } var nq = norm(q), count = 0; S.hist.forEach(function(h){ if (norm(h.no).indexOf(nq) < 0) return; box.appendChild(entryCard(h, '이 기기 기록')); count++; }); var texts = useExample ? exampleTexts(q) : scanComments(nq); texts.forEach(function(t){ var ents = parseCommentEntries(t); var c; if (ents.length) { c = entryCard(ents[0], useExample ? '예시 댓글' : '페이지 댓글', useExample); } else { c = el('div', 'cbk-rec'); c.appendChild(el('span', 'cbk-src' + (useExample ? ' cbk-ex' : ''), useExample ? '예시 댓글' : '페이지 댓글')); c.appendChild(el('div', 'cbk-raw', t.length > 260 ? t.slice(0, 260) + '…' : t)); } box.appendChild(c); count++; }); if (!count) box.appendChild(el('div', 'cbk-empty', '찾은 기록이 없어요. 댓글이 모두 불러와진 뒤 다시 찾아보거나, [예시로 보기]로 모양을 먼저 확인해 보세요.')); else { var s = el('div', 'cbk-sumline', q + ' · ' + count + '건' + (useExample ? ' (시안용 예시예요)' : '')); box.insertBefore(s, box.firstChild); } } /* ===== 공유받은 기록 (?d=) ===== */ function showReceived(){ var m = /[?&]d=([^&#]*)/.exec(location.search || ''); if (!m) return; var ents = entriesFromPayload(decPayload(m[1])); var sec = $('cbk-recv'), list = $('cbk-recv-list'), b = $('cbk-recv-b'); sec.style.display = 'block'; if (!ents.length) { list.appendChild(el('div', 'cbk-empty', '이 링크의 기록을 읽지 못했어요. 링크가 잘렸거나 지원하지 않는 형식이에요.')); return; } ents.slice(0, 20).forEach(function(e){ list.appendChild(entryCard(e)); }); b.appendChild(mkBtn('내 기록에 담기', 'cbk-btn-pri', '받은 기록을 이 기기 내 기록에 담아요', function(){ ents.forEach(function(e){ histAdd(e); }); renderHist(); toast(ents.length + '건을 담았어요'); })); if (ents.length === 1) b.appendChild(mkBtn('입력칸으로 불러오기', '', '받은 기록을 입력칸에 채워 고쳐요', function(){ loadIntoDraft(ents[0]); })); b.appendChild(mkBtn('닫기', '', '받은 기록 영역을 닫아요', function(){ sec.style.display = 'none'; })); } /* ===== 화면 항상 켜기 ===== */ var wl = null, wlOn = false; function paintBulb(){ var b = $('cbk-b-bulb'); b.className = 'cbk-btn cbk-btn-sm cbk-bulb cbk-tip cbk-tip-b cbk-tip-r' + (wlOn ? ' cbk-on' : ''); b.setAttribute('data-tip', wlOn ? '항상켜짐' : '모바일 화면 항상 켜기 (누르면 켜져요)'); b.setAttribute('aria-pressed', wlOn ? 'true' : 'false'); } function reqWake(){ if (!(navigator.wakeLock && navigator.wakeLock.request)) { toast('이 기기·브라우저는 화면 항상 켜기를 지원하지 않아요'); return; } navigator.wakeLock.request('screen').then(function(s){ wl = s; wlOn = true; paintBulb(); toast('화면이 항상 켜져요'); s.addEventListener('release', function(){ if (wl === s) { wl = null; if (wlOn && document.visibilityState === 'visible') { wlOn = false; paintBulb(); } } }); }).catch(function(e){ wlOn = false; paintBulb(); toast('화면 켜짐을 허용받지 못했어요 (' + ((e && e.name) || '') + ')'); }); } $('cbk-b-bulb').addEventListener('click', function(){ if (wlOn) { wlOn = false; if (wl) { try { wl.release(); } catch (e) {} wl = null; } paintBulb(); toast('화면 항상 켜기를 껐어요'); } else reqWake(); }); document.addEventListener('visibilitychange', function(){ if (document.visibilityState === 'visible' && wlOn && !wl && navigator.wakeLock) { navigator.wakeLock.request('screen').then(function(s){ wl = s; }).catch(function(){}); } }); /* ===== 사용설명서 아코디언 ===== */ $('cbk-acc-btn').addEventListener('click', function(){ var open = this.getAttribute('aria-expanded') === 'true'; this.setAttribute('aria-expanded', open ? 'false' : 'true'); $('cbk-acc-body').className = 'cbk-acc-b' + (open ? '' : ' cbk-open'); }); (function(){ var tabs = $('cbk-tabs').querySelectorAll('.cbk-tab'), panels = $('cbk-acc-body').querySelectorAll('.cbk-tabp'); for (var i = 0; i < tabs.length; i++) tabs[i].addEventListener('click', function(){ var t = this.getAttribute('data-t'); for (var a = 0; a < tabs.length; a++) tabs[a].className = 'cbk-tab cbk-tip' + (tabs[a].getAttribute('data-t') === t ? ' cbk-on' : '') + (a === 0 ? ' cbk-tip-l' : ''); for (var b = 0; b < panels.length; b++) panels[b].className = 'cbk-tabp' + (panels[b].getAttribute('data-p') === t ? ' cbk-on' : ''); }); })(); /* ===== 입력칸 연결 ===== */ $('cbk-no').addEventListener('input', function(){ S.car.no = this.value; renderPlate(); changed(); }); $('cbk-no').addEventListener('change', function(){ renderHist(); }); $('cbk-model').addEventListener('input', function(){ S.car.model = this.value; changed(); }); $('cbk-date').addEventListener('input', function(){ if (this.value) { S.rec.date = this.value; paintDate(); changed(); } }); $('cbk-date').addEventListener('change', function(){ if (!this.value) this.value = todayStr(); S.rec.date = this.value; paintDate(); changed(); }); $('cbk-km').addEventListener('input', function(){ S.rec.km = digits(this.value); changed(); }); $('cbk-km').addEventListener('change', function(){ this.value = fmtNum(S.rec.km); }); $('cbk-shop').addEventListener('input', function(){ S.rec.shop = this.value; changed(); }); $('cbk-note').addEventListener('input', function(){ S.rec.note = this.value; changed(); }); $('cbk-total').addEventListener('input', function(){ S.rec.total = digits(this.value); changed(); }); $('cbk-total').addEventListener('change', function(){ this.value = fmtNum(S.rec.total); }); $('cbk-memo').addEventListener('input', function(){ S.rec.memo = this.value; autosize(this); changed(); }); $('cbk-undo').addEventListener('click', doUndo); $('cbk-redo').addEventListener('click', doRedo); $('cbk-new').addEventListener('click', function(){ flushSave(); S.rec = newRec(); applyState(); flushSave(); toast('새 기록으로 비웠어요 (차 정보는 그대로예요)'); }); $('cbk-go').addEventListener('click', openComment); $('cbk-b-comment').addEventListener('click', openComment); $('cbk-b-mail').addEventListener('click', openMail); $('cbk-b-find').addEventListener('click', openFind); if ($('cbk-b-share')) $('cbk-b-share').addEventListener('click', openShare); /* 화면에서는 뺐지만 기능은 남겨둬요 */ if ($('cbk-b-save')) $('cbk-b-save').addEventListener('click', openSave); $('cbk-find').addEventListener('click', function(){ doFind(false); }); $('cbk-ex').addEventListener('click', function(){ doFind(true); }); $('cbk-q').addEventListener('keydown', function(ev){ if (ev.key === 'Enter') doFind(false); }); if ($('cbk-b-src')) $('cbk-b-src').addEventListener('click', function(){ if (!SRC_PARTS || SRC_PARTS.length < 4) { toast('소스를 읽지 못했어요'); return; } var t = SRC_PARTS.join('\n'); copyToast(t, 'HTML ' + Math.round(t.length / 1024) + 'KB를 복사했어요. 티스토리 HTML 모드에 붙여넣으세요'); }); /* ===== 메일 (메일 앱 작성 화면을 열어줘요. 발송은 메일 앱에서 직접 눌러야 해요) ===== */ var LS_MAILTO = 'cbk_v1_mailto'; var ml = { sub: '', body: '' }; function mailSubject(e){ var seg = [String(dateToN(e.date) || ''), (e.no || '').replace(/\s+/g, ''), (e.model || '').replace(/\s+/g, ''), '차량점검'].filter(function(x){ return !!x; }); return '[' + seg.join('_') + ']'; } function paintMail(){ var to = $('cbk-m-to').value.trim(), okTo = /^[^\s@]+@[^\s@]+$/.test(to), toEnc = okTo ? encodeURIComponent(to).replace(/%40/g, '@') : ''; var href = 'mailto:' + toEnc + '?subject=' + encodeURIComponent(ml.sub) + '&body=' + encodeURIComponent(ml.body.replace(/\n/g, '\r\n')); $('cbk-m-app').href = href; $('cbk-m-gm').href = 'https://mail.google.com/mail/?view=cm&fs=1' + (okTo ? '&to=' + toEnc : '') + '&su=' + encodeURIComponent(ml.sub) + '&body=' + encodeURIComponent(ml.body); var msg = $('cbk-m-msg'), t = '', amber = false; if (to && !okTo) { t = '메일 주소 모양이 아니에요. 비워두면 받는 사람 없이 열려요.'; amber = true; } else if (href.length > 1900) { t = '내용이 길어서 메일 앱이 일부만 받을 수 있어요. 안 되면 [내용 복사]를 써 주세요.'; amber = true; } else { t = '메일 앱을 열면 제목과 내용이 채워져 있어요. [보내기]를 눌러야 발송돼요.'; } msg.textContent = t; msg.className = 'cbk-msg' + (amber ? ' cbk-amber' : ''); } function openMail(){ flushSave(); var e = curEntry(); if (!e.no) { warnField('cbk-no'); try { $('cbk-mycar').scrollIntoView({ block: 'center' }); } catch (x) {} toast('차번호를 먼저 입력해 주세요'); return; } if (!hasContent(e)) { toast('체크한 항목이나 정비소, 메모를 먼저 입력해 주세요'); return; } histAdd(e); renderHist(); renderPanel(tabPanel); ml.sub = mailSubject(e); ml.body = tabPanel.ta.value + '\n\n※ 메일에서 차번호(' + e.no.replace(/\s+/g, '') + ')만 입력해 검색하면 지난 기록을 찾기 편할 거예요.'; $('cbk-m-to').value = lsGet(LS_MAILTO) || ''; $('cbk-m-sub').value = ml.sub; $('cbk-m-body').value = ml.body; openPop('cbk-pop-mail'); autosize($('cbk-m-body')); paintMail(); } $('cbk-m-to').addEventListener('input', function(){ lsSet(LS_MAILTO, this.value.trim()); paintMail(); }); $('cbk-m-csub').addEventListener('click', function(){ copyToast(ml.sub, '메일 제목을 복사했어요'); }); $('cbk-m-cbody').addEventListener('click', function(){ copyToast(ml.body, '메일 내용을 복사했어요'); }); /* ===== 내기록찾기 (이 페이지에서 차번호·차량·날짜를 찾아 형광펜으로 표시) ===== */ var fnd = { marks: [], idx: -1, t: null, q: '' }; var FSKIP = { SCRIPT: 1, STYLE: 1, NOSCRIPT: 1, TEXTAREA: 1, SELECT: 1, OPTION: 1, INPUT: 1 }; function escRe(c){ return c.replace(/[.*+?^${}()|[\]\\\/-]/g, '\\$&'); } function ptn(t){ return t.replace(/\s+/g, '').split('').map(escRe).join('\\s*'); } function dateParts(q){ var t = q.trim(), m = /^(\d{4})\s*[-.\/]?\s*(\d{1,2})\s*[-.\/]?\s*(\d{1,2})\.?$/.exec(t), d; if (m) d = [m[1].slice(2), +m[2], +m[3]]; else { m = /^(\d{2})\s*[-.\/]?\s*(\d{2})\s*[-.\/]?\s*(\d{2})$/.exec(t); if (m) d = [m[1], +m[2], +m[3]]; } if (d && d[1] >= 1 && d[1] <= 12 && d[2] >= 1 && d[2] <= 31) return d; return null; } function buildFindRe(q){ var pats = [ptn(q)], d = dateParts(q); if (d) pats.push('(?:20)?' + d[0] + '\\s*[.\\-\\/]?\\s*0?' + d[1] + '\\s*[.\\-\\/]?\\s*0?' + d[2]); return new RegExp(pats.join('|'), 'gi'); } function clearMarks(){ var ms = document.querySelectorAll('mark.cbk-hl'), i, mk, par; for (i = ms.length - 1; i >= 0; i--) { mk = ms[i]; par = mk.parentNode; if (!par) continue; while (mk.firstChild) par.insertBefore(mk.firstChild, mk); par.removeChild(mk); par.normalize(); } fnd.marks = []; fnd.idx = -1; } function collectTextNodes(){ var out = [], w = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false), n, p, v; while ((n = w.nextNode())) { v = n.nodeValue; if (!v || !/\S/.test(v)) continue; p = n.parentNode; if (!p || p.nodeType !== 1) continue; if (FSKIP[p.tagName] === 1) continue; if (p.closest && p.closest('.cbk-scope')) continue; if (!p.getClientRects().length) continue; out.push(n); } return out; } function gotoMark(i){ var n = fnd.marks.length; if (!n) return; if (fnd.idx >= 0 && fnd.marks[fnd.idx]) fnd.marks[fnd.idx].className = 'cbk-hl'; fnd.idx = ((i % n) + n) % n; var mk = fnd.marks[fnd.idx]; mk.className = 'cbk-hl cbk-cur'; $('cbk-f-n').textContent = (fnd.idx + 1) + ' / ' + n; try { mk.scrollIntoView({ block: 'center', behavior: 'smooth' }); } catch (e) { mk.scrollIntoView(); } } function runFind(q){ clearMarks(); q = (q || '').trim(); fnd.q = q; var msg = $('cbk-f-msg'), cnt = $('cbk-f-n'); cnt.textContent = '0 / 0'; if (!q) { msg.textContent = '차번호·차량·날짜를 적고 [찾기]를 눌러요'; return; } var re, nodes, total = 0, ni, nd, txt, m, hits, h, mid, mk; try { re = buildFindRe(q); } catch (e) { msg.textContent = '검색어를 처리하지 못했어요'; return; } try { nodes = collectTextNodes(); for (ni = 0; ni < nodes.length && total < 500; ni++) { nd = nodes[ni]; txt = nd.nodeValue; hits = []; re.lastIndex = 0; while ((m = re.exec(txt)) !== null) { if (!m[0].length) { re.lastIndex++; continue; } hits.push([m.index, m[0].length]); if (total + hits.length >= 500) break; } for (h = hits.length - 1; h >= 0; h--) { mid = nd.splitText(hits[h][0]); if (mid.nodeValue.length > hits[h][1]) mid.splitText(hits[h][1]); mk = document.createElement('mark'); mk.className = 'cbk-hl'; mid.parentNode.replaceChild(mk, mid); mk.appendChild(mid); fnd.marks.push(mk); } total += hits.length; } } catch (err) { msg.textContent = '찾는 중에 문제가 생겼어요: ' + (err && err.message); return; } fnd.marks.sort(function(a, b){ return (a.compareDocumentPosition(b) & 4) ? -1 : 1; }); if (!fnd.marks.length) { msg.textContent = '이 페이지에서 찾지 못했어요. 댓글이 모두 불러와졌는지 확인하고 다시 [찾기]를 눌러요'; return; } msg.textContent = fnd.marks.length + '곳을 찾았어요. ▲▼로 넘겨 보세요' + (fnd.marks.length >= 500 ? ' (500곳까지만 표시해요)' : ''); gotoMark(0); } function openFind(){ var bar = $('cbk-findbar'), q = $('cbk-f-q'); if (bar.parentNode !== document.body) document.body.appendChild(bar); bar.classList.add('cbk-show'); if (!q.value.trim() && S.car.no.trim()) q.value = S.car.no.trim(); if (q.value.trim()) runFind(q.value); else { $('cbk-f-msg').textContent = '차번호·차량·날짜를 적고 [찾기]를 눌러요'; q.focus(); } } function closeFind(){ clearMarks(); fnd.q = ''; $('cbk-findbar').classList.remove('cbk-show'); $('cbk-f-n').textContent = '0 / 0'; } function fillFind(kind){ var v = kind === 'no' ? S.car.no.trim() : (kind === 'model' ? S.car.model.trim() : fmtDate(S.rec.date || todayStr())); if (!v) { toast('mycar 줄에 먼저 입력해 주세요'); return; } $('cbk-f-q').value = v; runFind(v); } $('cbk-f-go').addEventListener('click', function(){ runFind($('cbk-f-q').value); }); $('cbk-f-prev').addEventListener('click', function(){ if (fnd.marks.length) gotoMark(fnd.idx - 1); else toast('먼저 [찾기]를 눌러 주세요'); }); $('cbk-f-next').addEventListener('click', function(){ if (fnd.marks.length) gotoMark(fnd.idx + 1); else toast('먼저 [찾기]를 눌러 주세요'); }); $('cbk-f-x').addEventListener('click', closeFind); $('cbk-f-c1').addEventListener('click', function(){ fillFind('no'); }); $('cbk-f-c2').addEventListener('click', function(){ fillFind('model'); }); $('cbk-f-c3').addEventListener('click', function(){ fillFind('date'); }); $('cbk-f-q').addEventListener('input', function(){ clearTimeout(fnd.t); var v = this.value; fnd.t = setTimeout(function(){ runFind(v); }, 350); }); $('cbk-f-q').addEventListener('keydown', function(ev){ if (ev.key !== 'Enter') return; ev.preventDefault(); clearTimeout(fnd.t); if (this.value.trim() !== fnd.q || !fnd.marks.length) runFind(this.value); else gotoMark(fnd.idx + (ev.shiftKey ? -1 : 1)); }); /* ===== mycar 줄 · 날짜 · 알약탭 · 지도 ===== */ ['cbk-no', 'cbk-model', 'cbk-km'].forEach(function(id){ var i = $(id); i.addEventListener('focus', function(){ i.setAttribute('placeholder', ''); }); i.addEventListener('blur', function(){ if (!i.value) i.setAttribute('placeholder', i.getAttribute('data-ph')); }); }); function paintDate(){ var b = $('cbk-datebadge'), same = (S.rec.date === todayStr()); b.textContent = same ? '오늘' : '수정됨'; b.className = 'cbk-dp-b' + (same ? '' : ' cbk-mod'); } function setMain(i){ var pills = $('cbk-pills').querySelectorAll('.cbk-pill'), secs = $('cbk-root').querySelectorAll('.cbk-main'), k; for (k = 0; k < pills.length; k++) { pills[k].className = 'cbk-pill cbk-tip ' + (k === 0 ? 'cbk-tip-l' : 'cbk-tip-r') + (k === i ? ' cbk-on' : ''); pills[k].setAttribute('aria-selected', k === i ? 'true' : 'false'); } for (k = 0; k < secs.length; k++) secs[k].className = 'cbk-card cbk-main' + (k === i ? ' cbk-on' : ''); if (i === 0) autosize($('cbk-memo')); else { renderPanels(); renderHist(); } } (function(){ var pills = $('cbk-pills').querySelectorAll('.cbk-pill'); for (var k = 0; k < pills.length; k++) pills[k].addEventListener('click', function(){ setMain(parseInt(this.getAttribute('data-m'), 10)); }); })(); function paintMap(){ var m = MAPS[S.map], mag = $('cbk-mag'); mag.style.color = m ? m.color : ''; mag.className = 'cbk-ico cbk-mag cbk-tip cbk-tip-r' + (m ? ' cbk-mag-on' : ''); mag.setAttribute('data-tip', m ? (m.name + ' 지도에서 이 정비소를 검색해요 (누르면 이동)') : '먼저 지도를 골라 주세요 (왼쪽 지도 버튼)'); mag.setAttribute('aria-label', m ? (m.name + ' 지도에서 검색') : '지도에서 검색'); var rs = $('cbk-mapdef').querySelectorAll('input[name="cbk-mapdef"]'); for (var j = 0; j < rs.length; j++) rs[j].checked = (rs[j].value === S.map); var bs = $('cbk-mapsel').querySelectorAll('.cbk-mp'); for (var i = 0; i < bs.length; i++) { var k = bs[i].getAttribute('data-k'); bs[i].className = 'cbk-mp cbk-mp-' + k + ' cbk-tip' + (k === 'naver' ? ' cbk-tip-l' : '') + (k === 'google' ? ' cbk-tip-r' : '') + (k === S.map ? ' cbk-sel' : ''); } } function toggleMapSel(open){ var box = $('cbk-mapsel'), on = (open == null) ? !box.classList.contains('cbk-open') : open; box.className = 'cbk-mapsel' + (on ? ' cbk-open' : ''); $('cbk-mapbtn').setAttribute('aria-expanded', on ? 'true' : 'false'); } $('cbk-mapbtn').addEventListener('click', function(){ toggleMapSel(); }); (function(){ var rs = $('cbk-mapdef').querySelectorAll('input[name="cbk-mapdef"]'); for (var i = 0; i < rs.length; i++) rs[i].addEventListener('change', function(){ if (!this.checked) return; S.map = this.value; paintMap(); changed(); toast(MAPS[S.map].name + ' 지도를 기본으로 정했어요'); }); })(); (function(){ var bs = $('cbk-mapsel').querySelectorAll('.cbk-mp'); for (var i = 0; i < bs.length; i++) bs[i].addEventListener('click', function(){ S.map = this.getAttribute('data-k'); paintMap(); toggleMapSel(false); changed(); toast(MAPS[S.map].name + ' 지도로 정했어요. 돋보기를 누르면 이동해요'); }); })(); $('cbk-mag').addEventListener('click', function(ev){ var m = MAPS[S.map]; if (!m) { ev.preventDefault(); toggleMapSel(true); toast('먼저 지도를 골라 주세요'); return; } var q = S.rec.shop.trim(); if (!q) { ev.preventDefault(); toast('정비소·수리지점을 먼저 입력해 주세요'); return; } this.href = m.open(q); if (m.blank) { this.setAttribute('target', '_blank'); this.setAttribute('rel', 'noopener noreferrer'); } else { this.removeAttribute('target'); } }); /* ===== 시작 ===== */ function init(){ buildChips(); popupPanel = makePanel($('cbk-c-panel'), 'cbk-c', false); tabPanel = makePanel($('cbk-t-panel'), 'cbk-t', true); var raw = lsGet(LS_STATE); restoring = true; if (raw) { try { unpackState(JSON.parse(raw)); } catch (e) {} } S.hist = loadHist(); applyState(); restoring = false; lastSnap = snapshot(); U = []; R = []; updUndo(); if (S.car.no) $('cbk-q').value = S.car.no; showReceived(); } init(); })(); </script> 모두의계산기 최매슨생 https://0-1.kr/128 https://0-1.kr/128#entry128comment Sat, 31 Oct 2026 12:12:38 +0900 https://0-1.kr/125 <div class="bc-page" id="bcPage" style="background:#f7f5ef;color:#2b271f;margin:0;border-radius:14px;"> <style> .bc-page, .bc-page *{ box-sizing:border-box; } .bc-page{ --bc-page-bg:#f7f5ef; --bc-panel:#ffffff; --bc-panel-2:#f1eee5; --bc-line:#e3ddcf; --bc-text:#2b271f; --bc-sub:#847a68; --bc-accent:#e0891f; background:var(--bc-page-bg); color:var(--bc-text); font-family:-apple-system,BlinkMacSystemFont,'Malgun Gothic','Apple SD Gothic Neo',sans-serif; margin:0; border-radius:14px; } /* ---------- 설정 화면 ---------- */ .bc-setup{ max-width:640px; margin:0 auto; padding:28px 20px 40px; } .bc-header-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; flex-wrap:nowrap; } .bc-titlebar{ background:var(--bc-panel-2); border:1px solid var(--bc-line); border-radius:12px; padding:10px 12px; margin-bottom:14px; } .bc-titlebar .bc-desc{ margin:6px 0 0; font-size:10px; line-height:1.5; color:var(--bc-sub); } .bc-title-block{ min-width:0; } .bc-version{ font-size:10px; color:#8fb2ff; opacity:0.55; font-weight:400; letter-spacing:0; margin-top:2px; } .bc-header-btns{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; flex:0 0 auto; } .bc-header-btns .bc-start-btn-inline{ padding:6px 11px; font-size:12px; } .bc-header-btns button.bc-icon-btn-light{ padding:6px 9px; font-size:12px; gap:4px; } .bc-page button.bc-bulb-btn{ padding:5px 9px; } .bc-bulb{ display:inline-block; font-size:15px; filter:grayscale(1) opacity(0.45); transition:filter .15s ease; } .bc-bulb-btn.bc-on .bc-bulb{ filter:none; } .bc-tooltip-wrap{ position:relative; display:inline-block; } .bc-tooltip-bubble{ display:none; position:absolute; top:calc(100% + 10px); right:-8px; left:auto; transform:none; width:200px; max-width:70vw; background:#2b271f; color:#f7f5ef; font-size:12px; line-height:1.5; padding:10px 12px; border-radius:10px; z-index:10; text-align:left; font-weight:400; } .bc-tooltip-bubble::after{ content:''; position:absolute; bottom:100%; right:14px; left:auto; transform:none; border:6px solid transparent; border-bottom-color:#2b271f; } .bc-tooltip-wrap:hover .bc-tooltip-bubble, .bc-tooltip-wrap:focus-within .bc-tooltip-bubble{ display:block; } .bc-setup h1{ font-size:19px; font-weight:800; margin:0; letter-spacing:-0.02em; color:var(--bc-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bc-setup .bc-desc{ color:var(--bc-sub); font-size:14px; line-height:1.6; margin:0 0 24px; } .bc-section{ background:var(--bc-panel); border:1px solid var(--bc-line); border-radius:14px; padding:18px; margin-bottom:14px; } .bc-section h2{ font-size:13px; font-weight:700; letter-spacing:0.04em; color:var(--bc-sub); margin:0 0 12px; text-transform:uppercase; } .bc-preview{ border-radius:10px; padding:14px 10px; display:flex; flex-direction:column; align-items:stretch; gap:2px; overflow:hidden; max-width:200px; margin:0 auto; } .bc-preview .bc-preview-row{ text-align:center; line-height:1.1; } .bc-preview .bc-p-digit{ font-size:34px; letter-spacing:0.02em; } .bc-preview.bc-preview-today{ justify-content:center; gap:6px; padding:22px 10px; } .bc-preview-line{ text-align:center; font-size:15px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bc-page input.bc-preview-time-input{ display:block; width:100%; margin-top:10px; padding:7px 8px; border-radius:8px; border:1px solid var(--bc-line); background:var(--bc-panel-2); color:var(--bc-text); font-size:13px; text-align:center; } .bc-share-row{ display:flex; gap:8px; margin-bottom:8px; } .bc-page .bc-share-row input[type=text]{ flex:1 1 auto; min-width:0; background:var(--bc-panel-2); color:var(--bc-text); border:1px solid var(--bc-line); border-radius:8px; padding:8px 10px; font-size:12px; } .bc-preview-strip-wrap{ position:relative; } .bc-preview-strip{ display:flex; gap:12px; overflow-x:auto; padding:2px 2px 8px; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; } .bc-page button.bc-preview-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:32px; height:32px; border-radius:50%; border:1px solid var(--bc-line); background:var(--bc-panel); color:var(--bc-text); font-size:18px; line-height:1; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.08); } .bc-preview-nav-left{ left:-6px; } .bc-preview-nav-right{ right:-6px; } .bc-preview-strip::-webkit-scrollbar{ height:6px; } .bc-preview-card{ flex:0 0 auto; width:168px; background:var(--bc-panel-2); border:1px solid var(--bc-line); border-radius:14px; padding:12px; text-align:center; } .bc-preview-card-title{ font-size:12px; color:var(--bc-sub); letter-spacing:0.06em; margin-bottom:8px; } .bc-page button.bc-preview-jump{ display:block; width:100%; margin-top:10px; padding:8px; border-radius:8px; border:1px solid var(--bc-line); background:none; color:var(--bc-accent); font-size:12px; font-weight:700; cursor:pointer; } .bc-section.bc-accordion{ padding:0; overflow:hidden; } .bc-page button.bc-acc-header{ width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none; color:var(--bc-sub); font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:18px; cursor:pointer; text-align:left; } .bc-acc-chevron{ display:inline-block; transition:transform .2s ease; font-size:12px; } .bc-page button.bc-acc-header.bc-acc-open .bc-acc-chevron{ transform:rotate(180deg); } .bc-acc-body{ padding:0 18px 18px; } .bc-back-row{ display:flex; align-items:center; gap:8px; padding:6px 0; } .bc-back-row input[type=checkbox]{ flex:0 0 auto; width:18px; height:18px; accent-color:var(--bc-accent); cursor:pointer; } .bc-back-row.bc-back-off{ opacity:0.5; } .bc-back-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap; } .bc-back-size-group{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--bc-sub); } .bc-back-size-value{ min-width:34px; text-align:center; font-weight:700; color:var(--bc-text); font-size:12px; } .bc-page input#bcBgImageInput{ font-size:12px; color:var(--bc-sub); max-width:180px; } .bc-page input#bcBgBlurRange{ width:100%; margin-top:6px; accent-color:var(--bc-accent); } .bc-page .bc-back-size-group button.bc-size-btn{ padding:6px 12px; font-size:15px; font-weight:800; } .bc-page .bc-back-row input[type=text]{ flex:1 1 auto; min-width:0; background:var(--bc-panel-2); color:var(--bc-text); border:1px solid var(--bc-line); border-radius:8px; padding:8px 10px; font-size:13px; } .bc-page .bc-back-row input[type=time]{ flex:0 0 auto; background:var(--bc-panel-2); color:var(--bc-text); border:1px solid var(--bc-line); border-radius:8px; padding:6px 8px; font-size:13px; } .bc-page .bc-back-row button.bc-back-del{ flex:0 0 auto; width:30px; height:30px; border-radius:8px; border:1px solid var(--bc-line); background:var(--bc-panel-2); color:var(--bc-sub); cursor:pointer; font-size:14px; } .bc-theme-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:10px; } .bc-theme-swatch{ border:2px solid var(--bc-line); border-radius:10px; padding:10px 8px; cursor:pointer; text-align:center; background:var(--bc-panel-2); } .bc-theme-swatch.bc-active{ border-color:var(--bc-accent); } .bc-theme-swatch .bc-swatch-box{ height:38px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:20px; margin-bottom:6px; } .bc-theme-swatch .bc-swatch-name{ font-size:11px; color:var(--bc-sub); } .bc-custom-row{ display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap; } .bc-color-field{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--bc-sub); } .bc-page .bc-color-field input[type=color]{ width:34px;height:34px;border:1px solid var(--bc-line);border-radius:8px;background:none;padding:0;cursor:pointer; } .bc-toggle-line{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--bc-sub); margin-top:10px; cursor:pointer; user-select:none; } .bc-font-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; } .bc-font-swatch{ border:2px solid var(--bc-line); border-radius:10px; padding:10px; cursor:pointer; background:var(--bc-panel-2); text-align:center; } .bc-font-swatch.bc-active{ border-color:var(--bc-accent); } .bc-font-swatch .bc-font-sample{ font-size:26px; line-height:1.1; margin-bottom:4px; } .bc-font-swatch .bc-font-name{ font-size:11px; color:var(--bc-sub); } .bc-option-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:14px; } .bc-option-row .bc-hint{ display:block; font-size:12px; color:var(--bc-sub); margin-top:2px; } .bc-page select.bc-select{ background:var(--bc-panel-2); color:var(--bc-text); border:1px solid var(--bc-line); border-radius:8px; padding:8px 10px; font-size:13px; -webkit-appearance:menulist; appearance:menulist; } .bc-page input[type=checkbox].bc-check{ width:18px;height:18px;accent-color:var(--bc-accent);cursor:pointer; } .bc-page button.bc-start-btn{ width:100%; padding:16px; border:none; border-radius:12px; background:var(--bc-accent); color:#1c1204; font-size:16px; font-weight:800; cursor:pointer; margin-top:6px; } .bc-page button.bc-start-btn.bc-start-btn-inline{ width:auto; padding:10px 18px; font-size:14px; margin-top:0; white-space:nowrap; flex:0 0 auto; } .bc-page button.bc-start-btn:active{ opacity:0.85; } /* ---------- 전체화면 오버레이 ---------- */ .bc-page .bc-overlay{ position:fixed; inset:0; display:none; z-index:2147483647; background:#000; touch-action:none; overscroll-behavior:none; border-radius:0; } .bc-page .bc-overlay.bc-active{ display:block; } .bc-topbar{ position:absolute; top:0; left:0; right:0; height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 10px; z-index:5; opacity:1; transition:opacity .25s ease, transform .25s ease; } .bc-topbar.bc-hidden{ opacity:0; transform:translateY(-8px); pointer-events:none; } .bc-page button.bc-icon-btn{ background:rgba(128,128,128,0.22); border:1px solid rgba(255,255,255,0.14); color:inherit; border-radius:8px; padding:8px 12px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:6px; touch-action:manipulation; } .bc-page button.bc-icon-btn.bc-on{ background:rgba(255,255,255,0.9); color:#111; } .bc-page button.bc-icon-btn.bc-size-btn{ padding:8px 10px; font-size:13px; font-weight:700; } .bc-page button.bc-icon-btn-light{ background:var(--bc-panel-2); border:1px solid var(--bc-line); color:var(--bc-text); border-radius:8px; padding:9px 14px; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .bc-page button.bc-icon-btn-light.bc-on{ background:#fff6d8; border-color:#e7c766; color:#7a5c00; } .bc-page button.bc-icon-btn-light:active{ opacity:0.8; } .bc-bg-image-layer{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; pointer-events:none; display:none; } .bc-panels-wrap{ position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; z-index:1; } .bc-panels{ height:100%; display:flex; width:700%; transition:transform .28s ease; } .bc-panel{ width:14.2857%; height:100%; display:flex; flex-direction:column; } .bc-digitarea{ flex:1 1 auto; position:relative; min-height:0; } .bc-rows{ position:absolute; inset:0; display:flex; flex-direction:column; pointer-events:none; } .bc-row{ flex:1 1 0; display:flex; align-items:center; justify-content:center; position:relative; min-height:0; } .bc-row-label{ position:absolute; top:6px; left:10px; font-size:12px; opacity:0.4; font-family:-apple-system,sans-serif; letter-spacing:0.05em; } .bc-digit{ display:inline-block; line-height:1; white-space:nowrap; } .bc-rowline{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; pointer-events:none; } .bc-colon{ display:inline-block; opacity:0.55; } .bc-overlay.bc-landscape .bc-rows{ display:none; } .bc-overlay.bc-landscape .bc-rowline{ display:flex; } .bc-overlay.bc-portrait .bc-rows{ display:flex; } .bc-overlay.bc-portrait .bc-rowline{ display:none; } .bc-ctrlbar{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 8px 24px; flex-wrap:wrap; position:relative; z-index:6; opacity:1; transition:opacity .25s ease, transform .25s ease; } .bc-ctrlbar.bc-hidden{ opacity:0; transform:translateY(8px); pointer-events:none; } .bc-page .bc-ctrlbar button{ background:rgba(128,128,128,0.22); border:1px solid rgba(255,255,255,0.16); color:inherit; border-radius:8px; padding:9px 14px; font-size:13px; cursor:pointer; touch-action:manipulation; } .bc-page .bc-ctrlbar button.bc-primary{ background:var(--bc-accent); color:#1c1204; font-weight:700; border:none; } .bc-dots{ position:absolute; left:0; right:0; bottom:6px; display:flex; align-items:center; justify-content:center; gap:7px; z-index:4; } .bc-panel-title{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:8px 14px 0; font-size:12px; opacity:0.5; letter-spacing:0.06em; } .bc-panel-title .bc-wm{ font-size:9px; opacity:0.75; letter-spacing:0.08em; } .bc-today-area{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4%; min-height:0; padding:0 4%; } .bc-today-line{ line-height:1.05; white-space:nowrap; text-align:center; } .bc-today-line .bc-td-sub{ opacity:0.55; font-size:0.5em; margin-left:0.3em; } .bc-bt-strip{ flex:0 0 auto; display:flex; gap:8px; overflow-x:auto; padding:8px 12px 2px; -webkit-overflow-scrolling:touch; } .bc-bt-strip::-webkit-scrollbar{ display:none; } .bc-bt-pill{ flex:0 0 auto; padding:5px 10px; border-radius:999px; font-size:12px; background:rgba(128,128,128,0.18); border:1px solid rgba(255,255,255,0.1); white-space:nowrap; } .bc-bt-pill.bc-bt-passed{ opacity:0.35; } .bc-bt-pill.bc-bt-next{ opacity:1; font-weight:700; border-color:currentColor; } .bc-bt-target{ flex:0 0 auto; text-align:center; font-size:14px; opacity:0.75; padding:6px 8px 0; letter-spacing:0.04em; } .bc-blinking .bc-digit{ animation:bcBlink 1s steps(2, start) infinite; } @keyframes bcBlink{ 50%{ opacity:0.15; } } .bc-nav-arrow{ display:none; position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(128,128,128,0.22); border:1px solid rgba(255,255,255,0.14); color:inherit; font-size:22px; line-height:1; cursor:pointer; z-index:5; opacity:0; transition:opacity .2s ease; } .bc-nav-left{ left:12px; } .bc-nav-right{ right:12px; } @media (hover:hover) and (pointer:fine){ .bc-nav-arrow{ display:block; } .bc-overlay:hover .bc-nav-arrow{ opacity:0.8; } .bc-nav-arrow:hover{ opacity:1 !important; } } /* 자리별 폭 고정(정적) 기본값: 폰트에 표를 지원하면 모든 숫자가 같은 폭으로 그려져서 초가 바뀌어도 가로폭이 흔들리지 않음. "역동적"을 고르면 이 속성을 꺼서 원래처럼 보임 */ .bc-digit{ font-variant-numeric: tabular-nums; } .bc-overlay.bc-dynamic-width .bc-digit{ font-variant-numeric: normal; } .bc-dots span{ width:6px;height:6px;border-radius:50%; background:currentColor; opacity:0.25; touch-action:manipulation; } .bc-dots span.bc-dot-active{ opacity:0.9; } @media (max-width:480px){ .bc-theme-grid, .bc-font-grid{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); } } </style> <div class="bc-setup"> <div class="bc-titlebar"> <div class="bc-header-row"> <div class="bc-title-block"> <h1>풀스크린 와치</h1> <div class="bc-version">_V17(260825)</div> </div> <div class="bc-header-btns"> <button class="bc-start-btn bc-start-btn-inline" id="bcStartBtn" type="button">전체</button> <span class="bc-tooltip-wrap"> <button class="bc-icon-btn-light" id="bcShareBtn" type="button">공유</button> <span class="bc-tooltip-bubble">지금 색상·폰트·백타임 항목·타이머 시간을 링크 하나로 만들어서 다른 사람이나 다른 기기에 그대로 전달해요. 그 링크를 열면 이 설정이 자동으로 적용됩니다.</span> </span> <button class="bc-icon-btn-light bc-bulb-btn" id="bcPageWakeBtn" type="button" aria-label="화면 항상 켜짐"><span class="bc-bulb"> </span></button> </div> </div> <p class="bc-desc">숫자화면 꽉 찬시계 (pc, 태블릿, 모바일 모두 가능). 폰트·색상 선택 후 [전체]를 누르면 순환됩니다.<br>태블릿·모바일은 시작 전 전구(항상켜짐)를 눌러주세요.</p> </div> <div id="bcShareResult" style="display:none;margin-top:14px;"> <div class="bc-share-row"> <input type="text" id="bcShareFullUrl" readonly> <button type="button" class="bc-icon-btn-light" data-copy-target="bcShareFullUrl">복사</button> </div> <div class="bc-share-row"> <input type="text" id="bcShareShortUrl" readonly placeholder="단축 링크 생성 중..."> <button type="button" class="bc-icon-btn-light" data-copy-target="bcShareShortUrl">복사</button> </div> <p class="bc-hint" id="bcShareFallback" style="display:none;"></p> <div style="text-align:center;margin-top:12px;"> <img id="bcShareQr" alt="QR 코드" width="180" height="180" style="background:#fff;padding:8px;border-radius:8px;"> </div> </div> <div class="bc-section"> <h2>미리보기 (좌우로 넘겨서 5개 화면 모두 확인)</h2> <div class="bc-preview-strip-wrap"> <button type="button" class="bc-preview-nav bc-preview-nav-left" id="bcPvNavLeft" aria-label="이전 카드">‹</button> <div class="bc-preview-strip" id="bcPreviewStrip"> <div class="bc-preview-card"> <div class="bc-preview-card-title">현시계</div> <div class="bc-preview" id="bcPreview" style="background:#1c1a17;color:#f5a623;"> <div class="bc-preview-row"><span class="bc-p-digit" id="bcPvH">12</span></div> <div class="bc-preview-row"><span class="bc-p-digit" id="bcPvM">34</span></div> <div class="bc-preview-row"><span class="bc-p-digit" id="bcPvS">56</span></div> </div> <button type="button" class="bc-preview-jump" data-panel-idx="0">전체보기 ▸</button> </div> <div class="bc-preview-card"> <div class="bc-preview-card-title">스톱워치</div> <div class="bc-preview" style="background:#1c1a17;color:#f5a623;"> <div class="bc-preview-row"><span class="bc-p-digit">00</span></div> <div class="bc-preview-row"><span class="bc-p-digit">00</span></div> <div class="bc-preview-row"><span class="bc-p-digit">00</span></div> </div> <button type="button" class="bc-preview-jump" data-panel-idx="1">전체보기 ▸</button> </div> <div class="bc-preview-card"> <div class="bc-preview-card-title">타이머</div> <div class="bc-preview" style="background:#1c1a17;color:#f5a623;"> <div class="bc-preview-row"><span class="bc-p-digit" id="bcPvTimerH">05</span></div> <div class="bc-preview-row"><span class="bc-p-digit" id="bcPvTimerM">00</span></div> <div class="bc-preview-row"><span class="bc-p-digit" id="bcPvTimerS">00</span></div> </div> <input type="time" step="1" id="bcTimerPreviewInput" class="bc-preview-time-input" value="00:05:00"> <button type="button" class="bc-preview-jump" data-panel-idx="2">전체보기 ▸</button> </div> <div class="bc-preview-card"> <div class="bc-preview-card-title">오늘은</div> <div class="bc-preview bc-preview-today" style="background:#1c1a17;color:#f5a623;"> <div class="bc-preview-line" id="bcPvTD1">26년 35주차</div> <div class="bc-preview-line" id="bcPvTD2">08월24일(월)</div> <div class="bc-preview-line" id="bcPvTD3">13시28분</div> </div> <button type="button" class="bc-preview-jump" data-panel-idx="3">전체보기 ▸</button> </div> <div class="bc-preview-card"> <div class="bc-preview-card-title">백타임</div> <div class="bc-preview bc-preview-today" style="background:#1c1a17;color:#f5a623;"> <div class="bc-preview-line" style="font-size:12px;opacity:0.7;">시간을 입력한</div> <div class="bc-preview-line" style="font-size:12px;opacity:0.7;">항목까지</div> <div class="bc-preview-line">01:00</div> </div> <button type="button" class="bc-preview-jump" data-panel-idx="4">전체보기 ▸</button> </div> </div> <button type="button" class="bc-preview-nav bc-preview-nav-right" id="bcPvNavRight" aria-label="다음 카드">›</button> </div> </div> <div class="bc-section bc-accordion"> <button type="button" class="bc-acc-header" id="bcAccHeadBack" data-target="bcAccBodyBack"> <span>백타임이란?</span><span class="bc-acc-chevron">▾</span> </button> <div class="bc-acc-body" id="bcAccBodyBack" style="display:none;"> <p class="bc-hint" style="margin:0 0 10px;">체크한 항목만 전체화면에 나타나요. 기본 시간은 예시로 채워뒀으니 자유롭게 바꾸세요. 하루 중 그 시각까지 남은 시간을 거꾸로 세어줍니다.</p> <div id="bcBackList"></div> <div class="bc-back-toolbar"> <button type="button" class="bc-icon-btn-light" id="bcBackAdd">+ 항목 추가</button> <span class="bc-back-size-group"> 문구 글자크기 <button type="button" class="bc-icon-btn-light bc-size-btn" id="bcBtSizeMinus">−</button> <span id="bcBtSizeValue" class="bc-back-size-value">1.3x</span> <button type="button" class="bc-icon-btn-light bc-size-btn" id="bcBtSizePlus">+</button> </span> </div> </div> </div> <div class="bc-section bc-accordion"> <button type="button" class="bc-acc-header" id="bcAccHeadTheme" data-target="bcAccBodyTheme"> <span>색상 테마 (배경 + 숫자색)</span><span class="bc-acc-chevron">▾</span> </button> <div class="bc-acc-body" id="bcAccBodyTheme" style="display:none;"> <div class="bc-theme-grid" id="bcThemeGrid"></div> <label class="bc-toggle-line"> <input type="checkbox" class="bc-check" id="bcCustomToggle"> 직접 색상 지정하기 </label> <div class="bc-custom-row" id="bcCustomRow" style="display:none;"> <div class="bc-color-field">배경색 <input type="color" id="bcCustomBg" value="#1c1a17"></div> <div class="bc-color-field">숫자색 <input type="color" id="bcCustomFg" value="#f5a623"></div> </div> <div class="bc-toggle-line" style="margin-top:16px;font-weight:700;">숫자 가로폭</div> <div class="bc-custom-row"> <label class="bc-toggle-line"><input type="radio" name="bcWidthMode" class="bc-check" id="bcWidthStatic" checked> 정적 (자리 고정)</label> <label class="bc-toggle-line"><input type="radio" name="bcWidthMode" class="bc-check" id="bcWidthDynamic"> 역동적 (원래 느낌)</label> </div> <div class="bc-toggle-line" style="margin-top:16px;font-weight:700;">배경 그림 (선택)</div> <p class="bc-hint" style="margin:2px 0 8px;">전체화면 배경에 그림을 깔아볼 수 있어요. 흐림 정도로 숫자 가독성을 조절하세요.</p> <div class="bc-custom-row"> <input type="file" accept="image/*" id="bcBgImageInput"> <button type="button" class="bc-icon-btn-light" id="bcBgImageClear">그림 지우기</button> </div> <div class="bc-bg-blur-row" id="bcBgBlurRow" style="display:none;"> <label class="bc-toggle-line" style="margin-top:10px;">흐림 정도 <span id="bcBgBlurValue">4px</span></label> <input type="range" id="bcBgBlurRange" min="0" max="20" value="4"> </div> <p class="bc-hint" id="bcBgWarning" style="color:#b9762a;margin-top:8px;">⚠ 배경 그림은 이 브라우저에서만 임시로 보이며, 새로고침하거나 [공유] 링크를 만들면 저장되지 않고 항상 사라집니다.</p> </div> </div> <div class="bc-section bc-accordion"> <button type="button" class="bc-acc-header" id="bcAccHeadFont" data-target="bcAccBodyFont"> <span>숫자 폰트 (무료 · Google Fonts)</span><span class="bc-acc-chevron">▾</span> </button> <div class="bc-acc-body" id="bcAccBodyFont" style="display:none;"> <div class="bc-font-grid" id="bcFontGrid"></div> </div> </div> <div class="bc-section bc-accordion"> <button type="button" class="bc-acc-header" id="bcAccHeadAction" data-target="bcAccBodyAction"> <span>동작 설정</span><span class="bc-acc-chevron">▾</span> </button> <div class="bc-acc-body" id="bcAccBodyAction" style="display:none;"> <div class="bc-option-row"> <div>항상 화면 켜짐 유지<span class="bc-hint">전체화면 우측 상단에서도 켜고 끌 수 있어요</span></div> <input type="checkbox" class="bc-check" id="bcWakeToggle"> </div> </div> </div> </div> <!-- 전체화면 오버레이 : display:none/position:fixed/z-index를 style 속성에 직접 박아둠 (스타일시트가 늦게 붙거나 잘려도 이 요소만큼은 절대 문서 흐름에 노출되지 않게 하기 위함) --> <div class="bc-overlay" id="bcOverlay" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:2147483647;background:#000;"> <div class="bc-bg-image-layer" id="bcBgImageLayer"></div> <div class="bc-topbar" id="bcTopbar"> <button class="bc-icon-btn" id="bcExitBtn" type="button">닫기</button> <button class="bc-icon-btn" id="bcWakeBtnFs" type="button">항상켜짐</button> </div> <button class="bc-nav-arrow bc-nav-left" id="bcNavLeft" type="button" aria-label="이전 화면">‹</button> <button class="bc-nav-arrow bc-nav-right" id="bcNavRight" type="button" aria-label="다음 화면">›</button> <div class="bc-panels-wrap" id="bcPanelsWrap"> <div class="bc-panels" id="bcPanels"> <!-- 클론(무한 루프용): 백타임의 복제본. 실제로는 아무 것도 조작하지 않는 화면 --> <div class="bc-panel" id="bcPanelCloneStart" aria-hidden="true"> <div class="bc-panel-title"><span>백타임</span><span class="bc-wm">STARTUPEX (0-1.kr/125)</span></div> <div class="bc-bt-strip" id="bcBTStripClone"></div> <div class="bc-bt-target" id="bcBTTargetClone"></div> <div class="bc-digitarea"> <div class="bc-rows"> <div class="bc-row"><span class="bc-row-label" id="bcBLbl0Clone">분</span><span class="bc-digit" id="bcB-h0Clone"></span><span class="bc-digit" id="bcB-h1Clone"></span></div> <div class="bc-row"><span class="bc-row-label" id="bcBLbl1Clone">초</span><span class="bc-digit" id="bcB-m0Clone"></span><span class="bc-digit" id="bcB-m1Clone"></span></div> <div class="bc-row"><span class="bc-row-label" id="bcBLbl2Clone"></span><span class="bc-digit" id="bcB-s0Clone"></span><span class="bc-digit" id="bcB-s1Clone"></span></div> </div> <div class="bc-rowline"> <span class="bc-digit" id="bcBL-h0Clone"></span><span class="bc-digit" id="bcBL-h1Clone"></span><span class="bc-colon">:</span><span class="bc-digit" id="bcBL-m0Clone"></span><span class="bc-digit" id="bcBL-m1Clone"></span><span class="bc-colon" id="bcBL-c2Clone">.</span><span class="bc-digit" id="bcBL-s0Clone"></span><span class="bc-digit" id="bcBL-s1Clone"></span> </div> </div> </div> <div class="bc-panel" id="bcPanelClock"> <div class="bc-panel-title"><span>현시계</span><span class="bc-wm">STARTUPEX (0-1.kr/125)</span></div> <div class="bc-digitarea" id="bcAreaClock"> <div class="bc-rows"> <div class="bc-row"><span class="bc-row-label">시</span><span class="bc-digit" id="bcC-h0"></span><span class="bc-digit" id="bcC-h1"></span></div> <div class="bc-row"><span class="bc-row-label">분</span><span class="bc-digit" id="bcC-m0"></span><span class="bc-digit" id="bcC-m1"></span></div> <div class="bc-row"><span class="bc-row-label">초</span><span class="bc-digit" id="bcC-s0"></span><span class="bc-digit" id="bcC-s1"></span></div> </div> <div class="bc-rowline"> <span class="bc-digit" id="bcCL-h0"></span><span class="bc-digit" id="bcCL-h1"></span><span class="bc-colon">:</span><span class="bc-digit" id="bcCL-m0"></span><span class="bc-digit" id="bcCL-m1"></span><span class="bc-colon">:</span><span class="bc-digit" id="bcCL-s0"></span><span class="bc-digit" id="bcCL-s1"></span> </div> </div> <div class="bc-ctrlbar"> <button type="button" data-size-adj="-1">글자−</button> <button type="button" data-size-adj="1">글자+</button> </div> </div> <div class="bc-panel" id="bcPanelStop"> <div class="bc-panel-title"><span>스톱워치</span><span class="bc-wm">STARTUPEX (0-1.kr/125)</span></div> <div class="bc-digitarea" id="bcAreaStop"> <div class="bc-rows"> <div class="bc-row"><span class="bc-row-label" id="bcSLbl0">분</span><span class="bc-digit" id="bcS-h0"></span><span class="bc-digit" id="bcS-h1"></span></div> <div class="bc-row"><span class="bc-row-label" id="bcSLbl1">초</span><span class="bc-digit" id="bcS-m0"></span><span class="bc-digit" id="bcS-m1"></span></div> <div class="bc-row"><span class="bc-row-label" id="bcSLbl2"></span><span class="bc-digit" id="bcS-s0"></span><span class="bc-digit" id="bcS-s1"></span></div> </div> <div class="bc-rowline"> <span class="bc-digit" id="bcSL-h0"></span><span class="bc-digit" id="bcSL-h1"></span><span class="bc-colon">:</span><span class="bc-digit" id="bcSL-m0"></span><span class="bc-digit" id="bcSL-m1"></span><span class="bc-colon" id="bcSL-c2">.</span><span class="bc-digit" id="bcSL-s0"></span><span class="bc-digit" id="bcSL-s1"></span> </div> </div> <div class="bc-ctrlbar"> <button id="bcStopStart" class="bc-primary" type="button">시작</button> <button id="bcStopReset" type="button">리셋</button> <button type="button" data-size-adj="-1">글자−</button> <button type="button" data-size-adj="1">글자+</button> </div> </div> <div class="bc-panel" id="bcPanelTimer"> <div class="bc-panel-title"><span>타이머</span><span class="bc-wm">STARTUPEX (0-1.kr/125)</span></div> <div class="bc-digitarea" id="bcAreaTimer"> <div class="bc-rows"> <div class="bc-row"><span class="bc-row-label" id="bcTLbl0">분</span><span class="bc-digit" id="bcT-h0"></span><span class="bc-digit" id="bcT-h1"></span></div> <div class="bc-row"><span class="bc-row-label" id="bcTLbl1">초</span><span class="bc-digit" id="bcT-m0"></span><span class="bc-digit" id="bcT-m1"></span></div> <div class="bc-row"><span class="bc-row-label" id="bcTLbl2"></span><span class="bc-digit" id="bcT-s0"></span><span class="bc-digit" id="bcT-s1"></span></div> </div> <div class="bc-rowline"> <span class="bc-digit" id="bcTL-h0"></span><span class="bc-digit" id="bcTL-h1"></span><span class="bc-colon">:</span><span class="bc-digit" id="bcTL-m0"></span><span class="bc-digit" id="bcTL-m1"></span><span class="bc-colon" id="bcTL-c2">.</span><span class="bc-digit" id="bcTL-s0"></span><span class="bc-digit" id="bcTL-s1"></span> </div> </div> <div class="bc-ctrlbar"> <button id="bcTimerMinusM" type="button">-1분</button> <button id="bcTimerStart" class="bc-primary" type="button">시작</button> <button id="bcTimerPlusM" type="button">+1분</button> <button id="bcTimerReset" type="button">리셋</button> <button type="button" data-size-adj="-1">글자−</button> <button type="button" data-size-adj="1">글자+</button> </div> </div> <div class="bc-panel" id="bcPanelToday"> <div class="bc-panel-title"><span>오늘은</span><span class="bc-wm">STARTUPEX (0-1.kr/125)</span></div> <div class="bc-today-area" id="bcAreaToday"> <div class="bc-today-line" id="bcTD-line1"></div> <div class="bc-today-line" id="bcTD-line2"></div> <div class="bc-today-line" id="bcTD-line3"></div> </div> <div class="bc-ctrlbar"> <button type="button" data-size-adj="-1">글자−</button> <button type="button" data-size-adj="1">글자+</button> </div> </div> <div class="bc-panel" id="bcPanelBack"> <div class="bc-panel-title"><span>백타임</span><span class="bc-wm">STARTUPEX (0-1.kr/125)</span></div> <div class="bc-bt-strip" id="bcBTStrip"></div> <div class="bc-bt-target" id="bcBTTarget"></div> <div class="bc-digitarea" id="bcAreaBack"> <div class="bc-rows"> <div class="bc-row"><span class="bc-row-label" id="bcBLbl0">분</span><span class="bc-digit" id="bcB-h0"></span><span class="bc-digit" id="bcB-h1"></span></div> <div class="bc-row"><span class="bc-row-label" id="bcBLbl1">초</span><span class="bc-digit" id="bcB-m0"></span><span class="bc-digit" id="bcB-m1"></span></div> <div class="bc-row"><span class="bc-row-label" id="bcBLbl2"></span><span class="bc-digit" id="bcB-s0"></span><span class="bc-digit" id="bcB-s1"></span></div> </div> <div class="bc-rowline"> <span class="bc-digit" id="bcBL-h0"></span><span class="bc-digit" id="bcBL-h1"></span><span class="bc-colon">:</span><span class="bc-digit" id="bcBL-m0"></span><span class="bc-digit" id="bcBL-m1"></span><span class="bc-colon" id="bcBL-c2">.</span><span class="bc-digit" id="bcBL-s0"></span><span class="bc-digit" id="bcBL-s1"></span> </div> </div> <div class="bc-ctrlbar"> <button type="button" data-size-adj="-1">글자−</button> <button type="button" data-size-adj="1">글자+</button> <button type="button" data-strip-adj="-1">문구−</button> <button type="button" data-strip-adj="1">문구+</button> </div> </div> <!-- 클론(무한 루프용): 시계의 복제본 --> <div class="bc-panel" id="bcPanelCloneEnd" aria-hidden="true"> <div class="bc-panel-title"><span>현시계</span><span class="bc-wm">STARTUPEX (0-1.kr/125)</span></div> <div class="bc-digitarea"> <div class="bc-rows"> <div class="bc-row"><span class="bc-row-label">시</span><span class="bc-digit" id="bcC-h0Clone"></span><span class="bc-digit" id="bcC-h1Clone"></span></div> <div class="bc-row"><span class="bc-row-label">분</span><span class="bc-digit" id="bcC-m0Clone"></span><span class="bc-digit" id="bcC-m1Clone"></span></div> <div class="bc-row"><span class="bc-row-label">초</span><span class="bc-digit" id="bcC-s0Clone"></span><span class="bc-digit" id="bcC-s1Clone"></span></div> </div> <div class="bc-rowline"> <span class="bc-digit" id="bcCL-h0Clone"></span><span class="bc-digit" id="bcCL-h1Clone"></span><span class="bc-colon">:</span><span class="bc-digit" id="bcCL-m0Clone"></span><span class="bc-digit" id="bcCL-m1Clone"></span><span class="bc-colon">:</span><span class="bc-digit" id="bcCL-s0Clone"></span><span class="bc-digit" id="bcCL-s1Clone"></span> </div> </div> </div> </div> </div> <div class="bc-dots" id="bcDots"> <span data-i="0" class="bc-dot-active"></span> <span data-i="1"></span> <span data-i="2"></span> <span data-i="3"></span> <span data-i="4"></span> </div> </div> <script> (function(){ "use strict"; function safeRun(fn){ try { fn(); } catch (err) { /* 한 구간이 실패해도 나머지 기능은 계속 동작하도록 격리 */ } } safeRun(function loadFonts(){ var href = 'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&family=Orbitron:wght@400;700;900&family=DM+Mono:wght@400;500&family=Big+Shoulders+Display:wght@400;700;900&family=Teko:wght@400;600;700&family=Oswald:wght@400;600;700&family=Anton&family=Rajdhani:wght@500;600;700&family=Saira+Condensed:wght@600;700&family=Barlow+Condensed:wght@600;700&family=Archivo+Black&family=JetBrains+Mono:wght@500;700&family=Russo+One&family=Michroma&display=swap'; if (document.querySelector('link[data-bc-fonts="1"]')) return; var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; link.setAttribute('data-bc-fonts', '1'); document.head.appendChild(link); }); var THEMES = [ { id:'graphite-amber', name:'그래파이트 앰버', bg:'#1c1a17', fg:'#f5a623' }, { id:'deepsea-indigo', name:'딥시 인디고', bg:'#10131c', fg:'#6ee7ff' }, { id:'paper-sage', name:'페이퍼 세이지', bg:'#eef0e6', fg:'#2f5233' }, { id:'cherry-noir', name:'체리 느와르', bg:'#1a0f14', fg:'#ff6f91' }, { id:'sundown-copper', name:'선다운 코퍼', bg:'#241b14', fg:'#c98a4b' } ]; var FONTS = [ { id:'bebas', name:'Bebas Neue', family:'Bebas Neue' }, { id:'space-mono', name:'Space Mono', family:'Space Mono' }, { id:'orbitron', name:'Orbitron', family:'Orbitron' }, { id:'dm-mono', name:'DM Mono', family:'DM Mono' }, { id:'big-shoulders',name:'Big Shoulders Display',family:'Big Shoulders Display' }, { id:'teko', name:'Teko', family:'Teko' }, { id:'oswald', name:'Oswald', family:'Oswald' }, { id:'anton', name:'Anton', family:'Anton' }, { id:'rajdhani', name:'Rajdhani', family:'Rajdhani' }, { id:'saira-cond', name:'Saira Condensed', family:'Saira Condensed' }, { id:'barlow-cond', name:'Barlow Condensed', family:'Barlow Condensed' }, { id:'archivo-black',name:'Archivo Black', family:'Archivo Black' }, { id:'jetbrains', name:'JetBrains Mono', family:'JetBrains Mono' }, { id:'russo-one', name:'Russo One', family:'Russo One' }, { id:'michroma', name:'Michroma', family:'Michroma' } ]; var PANEL_KEYS = ['clock', 'stop', 'timer', 'today', 'back']; var PANEL_COUNT = PANEL_KEYS.length; var PANEL_STEP = 100 / PANEL_COUNT; /* (더는 이동 계산엔 안 쓰지만 참고용으로 유지) */ var TRACK_COUNT = PANEL_COUNT + 2; /* 앞뒤로 클론 1개씩 */ var TRACK_STEP = 100 / TRACK_COUNT; var state = { themeIndex: 0, customOn: false, customBg: '#1c1a17', customFg: '#f5a623', fontIndex: 0, wake: false, panelIndex: 0, trackIndex: 1, orient: 'portrait', sizeScale: 1.0, dynamicWidth: false, bgImageDataUrl: null, bgBlur: 4 }; function $(id){ return document.getElementById(id); } function pad2(n){ n = Math.floor(n); return (n < 10 ? '0' : '') + n; } function fontStack(f){ return '"' + f + '", sans-serif'; } function currentColors(){ if (state.customOn){ return { bg: state.customBg, fg: state.customFg }; } var t = THEMES[state.themeIndex]; return { bg: t.bg, fg: t.fg }; } function currentFont(){ return FONTS[state.fontIndex].family; } safeRun(function themeSetup(){ var themeGrid = $('bcThemeGrid'); THEMES.forEach(function(t, idx){ var el = document.createElement('div'); el.className = 'bc-theme-swatch' + (idx === 0 ? ' bc-active' : ''); el.innerHTML = '<div class="bc-swatch-box" style="background:' + t.bg + ';color:' + t.fg + ';">00</div>' + '<div class="bc-swatch-name">' + t.name + '</div>'; el.addEventListener('click', function(){ state.themeIndex = idx; state.customOn = false; $('bcCustomToggle').checked = false; $('bcCustomRow').style.display = 'none'; refreshThemeUI(); updatePreview(); }); themeGrid.appendChild(el); }); function refreshThemeUI(){ var swatches = themeGrid.querySelectorAll('.bc-theme-swatch'); for (var i = 0; i < swatches.length; i++){ swatches[i].className = 'bc-theme-swatch' + (i === state.themeIndex && !state.customOn ? ' bc-active' : ''); } } $('bcCustomToggle').addEventListener('change', function(e){ state.customOn = e.target.checked; $('bcCustomRow').style.display = state.customOn ? 'flex' : 'none'; refreshThemeUI(); updatePreview(); }); $('bcCustomBg').addEventListener('input', function(e){ state.customBg = e.target.value; updatePreview(); }); $('bcCustomFg').addEventListener('input', function(e){ state.customFg = e.target.value; updatePreview(); }); $('bcWidthStatic').addEventListener('change', function(){ state.dynamicWidth = false; applyColorsAndFont(); }); $('bcWidthDynamic').addEventListener('change', function(){ state.dynamicWidth = true; applyColorsAndFont(); }); }); safeRun(function fontSetup(){ var fontGrid = $('bcFontGrid'); FONTS.forEach(function(f, idx){ var el = document.createElement('div'); el.className = 'bc-font-swatch' + (idx === 0 ? ' bc-active' : ''); el.innerHTML = '<div class="bc-font-sample" style="font-family:' + fontStack(f.family) + ';">00</div>' + '<div class="bc-font-name">' + f.name + '</div>'; el.addEventListener('click', function(){ state.fontIndex = idx; var swatches = fontGrid.querySelectorAll('.bc-font-swatch'); for (var i = 0; i < swatches.length; i++){ swatches[i].className = 'bc-font-swatch' + (i === idx ? ' bc-active' : ''); } updatePreview(); }); fontGrid.appendChild(el); }); }); safeRun(function wakeCheckboxSetup(){ $('bcWakeToggle').addEventListener('change', function(e){ state.wake = e.target.checked; syncWakeButtons(); }); }); function updatePreview(){ var c = currentColors(); var f = currentFont(); var boxes = document.querySelectorAll('#bcPreviewStrip .bc-preview'); for (var b = 0; b < boxes.length; b++){ boxes[b].style.background = c.bg; boxes[b].style.color = c.fg; } var digits = document.querySelectorAll('#bcPreviewStrip .bc-p-digit, #bcPreviewStrip .bc-preview-line'); for (var i = 0; i < digits.length; i++){ digits[i].style.fontFamily = fontStack(f); } } safeRun(updatePreview); safeRun(function(){ var strip = $('bcPreviewStrip'); function scrollByCard(dir){ if (!strip) return; var card = strip.querySelector('.bc-preview-card'); var amount = card ? (card.offsetWidth + 12) : 180; strip.scrollBy({ left: dir * amount, behavior: 'smooth' }); } $('bcPvNavLeft').addEventListener('click', function(){ scrollByCard(-1); }); $('bcPvNavRight').addEventListener('click', function(){ scrollByCard(1); }); }); safeRun(function accordionSetup(){ var headers = document.querySelectorAll('.bc-acc-header'); for (var i = 0; i < headers.length; i++){ headers[i].addEventListener('click', function(){ var body = document.getElementById(this.getAttribute('data-target')); if (!body) return; var willOpen = (body.style.display === 'none' || body.style.display === ''); body.style.display = willOpen ? 'block' : 'none'; if (willOpen){ this.classList.add('bc-acc-open'); } else { this.classList.remove('bc-acc-open'); } }); } }); var _fitCanvas = document.createElement('canvas'); var _fitCtx = _fitCanvas.getContext('2d'); function measure(text, family, refSize){ _fitCtx.font = '700 ' + refSize + 'px "' + family + '"'; var m = _fitCtx.measureText(text); var asc = m.actualBoundingBoxAscent || refSize * 0.78; var desc = m.actualBoundingBoxDescent || refSize * 0.12; return { w: m.width, h: asc + desc }; } function fitFontSize(text, family, boxW, boxH){ var ref = 100; var m = measure(text, family, ref); if (m.w <= 0 || m.h <= 0){ return 40; } return Math.max(Math.min((boxW / m.w) * ref, (boxH / m.h) * ref), 10); } var overlay = $('bcOverlay'); var panelsWrap = $('bcPanelsWrap'); var panelsEl = $('bcPanels'); var topbar = $('bcTopbar'); var areaIds = ['bcAreaClock', 'bcAreaStop', 'bcAreaTimer', 'bcAreaToday', 'bcAreaBack']; var panelElIds = ['bcPanelClock', 'bcPanelStop', 'bcPanelTimer', 'bcPanelToday', 'bcPanelBack']; var groups = { clock: { rows: ['bcC-h0','bcC-h1','bcC-m0','bcC-m1','bcC-s0','bcC-s1'], line: ['bcCL-h0','bcCL-h1','bcCL-m0','bcCL-m1','bcCL-s0','bcCL-s1'] }, stop: { rows: ['bcS-h0','bcS-h1','bcS-m0','bcS-m1','bcS-s0','bcS-s1'], line: ['bcSL-h0','bcSL-h1','bcSL-m0','bcSL-m1','bcSL-s0','bcSL-s1'] }, timer: { rows: ['bcT-h0','bcT-h1','bcT-m0','bcT-m1','bcT-s0','bcT-s1'], line: ['bcTL-h0','bcTL-h1','bcTL-m0','bcTL-m1','bcTL-s0','bcTL-s1'] }, back: { rows: ['bcB-h0','bcB-h1','bcB-m0','bcB-m1','bcB-s0','bcB-s1'], line: ['bcBL-h0','bcBL-h1','bcBL-m0','bcBL-m1','bcBL-s0','bcBL-s1'] } }; /* 스톱워치/타이머/백타임은 1시간 미만이면 분:초:1백분의1초, 1시간 이상이면 시:분:초 로 자동 전환 */ var labelIds = { stop: ['bcSLbl0', 'bcSLbl1', 'bcSLbl2'], timer: ['bcTLbl0', 'bcTLbl1', 'bcTLbl2'], back: ['bcBLbl0', 'bcBLbl1', 'bcBLbl2'] }; var sep2Ids = { stop: 'bcSL-c2', timer: 'bcTL-c2', back: 'bcBL-c2' }; function formatGroups(totalSeconds){ totalSeconds = Math.max(0, totalSeconds); if (totalSeconds >= 3600){ return { a: Math.floor(totalSeconds / 3600), b: Math.floor((totalSeconds % 3600) / 60), c: Math.floor(totalSeconds % 60), labels: ['시', '분', '초'], sep2: ':' }; } return { a: Math.floor(totalSeconds / 60), b: Math.floor(totalSeconds % 60), c: Math.floor((totalSeconds - Math.floor(totalSeconds)) * 100), labels: ['분', '초', ''], sep2: '.' }; } function setGroupDigits(key, totalSeconds){ var g = formatGroups(totalSeconds); var aa = pad2(g.a), bb = pad2(g.b), cc = pad2(g.c); var chars = [aa.charAt(0), aa.charAt(1), bb.charAt(0), bb.charAt(1), cc.charAt(0), cc.charAt(1)]; var rowIds = groups[key].rows; var lineIds = groups[key].line; for (var i = 0; i < 6; i++){ var r = document.getElementById(rowIds[i]); if (r) r.textContent = chars[i]; var l = document.getElementById(lineIds[i]); if (l) l.textContent = chars[i]; } var lbls = labelIds[key]; if (lbls){ for (var j = 0; j < 3; j++){ var lblEl = document.getElementById(lbls[j]); if (lblEl) lblEl.textContent = g.labels[j]; } } var sepEl = document.getElementById(sep2Ids[key]); if (sepEl) sepEl.textContent = g.sep2; } function applyBgImage(){ var layer = $('bcBgImageLayer'); if (!layer) return; if (state.bgImageDataUrl){ layer.style.backgroundImage = 'url(' + state.bgImageDataUrl + ')'; layer.style.filter = 'blur(' + state.bgBlur + 'px)'; layer.style.display = 'block'; } else { layer.style.backgroundImage = 'none'; layer.style.display = 'none'; } } function applyColorsAndFont(){ var c = currentColors(); var f = currentFont(); overlay.style.background = c.bg; overlay.style.color = c.fg; var els = overlay.querySelectorAll('.bc-digit, .bc-colon, .bc-icon-btn, .bc-row-label, .bc-ctrlbar button, .bc-dots, .bc-today-line, .bc-panel-title, .bc-bt-pill, .bc-bt-target'); for (var i = 0; i < els.length; i++){ els[i].style.fontFamily = fontStack(f); } if (state.dynamicWidth){ overlay.classList.add('bc-dynamic-width'); } else { overlay.classList.remove('bc-dynamic-width'); } applyBgImage(); } safeRun(function(){ $('bcBgImageInput').addEventListener('change', function(e){ var file = e.target.files && e.target.files[0]; if (!file) return; var reader = new FileReader(); reader.onload = function(ev){ state.bgImageDataUrl = ev.target.result; applyBgImage(); $('bcBgBlurRow').style.display = 'block'; }; reader.readAsDataURL(file); }); $('bcBgImageClear').addEventListener('click', function(){ state.bgImageDataUrl = null; $('bcBgImageInput').value = ''; applyBgImage(); $('bcBgBlurRow').style.display = 'none'; }); $('bcBgBlurRange').addEventListener('input', function(e){ state.bgBlur = parseInt(e.target.value, 10) || 0; $('bcBgBlurValue').textContent = state.bgBlur + 'px'; applyBgImage(); }); }); var mq = window.matchMedia('(orientation: portrait)'); function updateOrientClass(){ state.orient = mq.matches ? 'portrait' : 'landscape'; overlay.classList.remove('bc-portrait', 'bc-landscape'); overlay.classList.add('bc-' + state.orient); } function layoutPanel(idx){ var key = PANEL_KEYS[idx]; if (key === 'today'){ layoutToday(idx); return; } var family = currentFont(); var area = document.getElementById(areaIds[idx]); if (!area) return; var rect = area.getBoundingClientRect(); var w = rect.width, h = rect.height; if (w <= 0 || h <= 0) return; if (state.orient === 'portrait'){ var rowH = h / 3; var size = fitFontSize('00', family, w * 0.94, rowH * 0.90) * state.sizeScale; var ids = groups[key].rows; for (var i = 0; i < ids.length; i++){ var el = document.getElementById(ids[i]); if (el) el.style.fontSize = size + 'px'; } } else { var size2 = fitFontSize('00:00:00', family, w * 0.95, h * 0.86) * state.sizeScale; var ids2 = groups[key].line; for (var j = 0; j < ids2.length; j++){ var el2 = document.getElementById(ids2[j]); if (el2) el2.style.fontSize = size2 + 'px'; } var colons = document.getElementById(panelElIds[idx]).querySelectorAll('.bc-colon'); for (var k = 0; k < colons.length; k++){ colons[k].style.fontSize = (size2 * 0.7) + 'px'; } } } function layoutAll(){ updateOrientClass(); for (var i = 0; i < PANEL_COUNT; i++){ layoutPanel(i); } } var _resizeTimer = null; function scheduleLayout(){ if (_resizeTimer) clearTimeout(_resizeTimer); _resizeTimer = setTimeout(layoutAll, 60); } safeRun(function(){ window.addEventListener('resize', scheduleLayout); if (mq.addEventListener){ mq.addEventListener('change', scheduleLayout); } else if (mq.addListener){ mq.addListener(scheduleLayout); } window.addEventListener('orientationchange', scheduleLayout); }); function setDigits(key, h, m, s){ var hh = pad2(h), mm = pad2(m), ss = pad2(s); var chars = [hh.charAt(0), hh.charAt(1), mm.charAt(0), mm.charAt(1), ss.charAt(0), ss.charAt(1)]; var rowIds = groups[key].rows; var lineIds = groups[key].line; for (var i = 0; i < 6; i++){ var r = document.getElementById(rowIds[i]); if (r) r.textContent = chars[i]; var l = document.getElementById(lineIds[i]); if (l) l.textContent = chars[i]; } } /* ---------------- 오늘은(캘린더) : 음력 변환 + 주차 계산 ---------------- */ /* 음력 계산은 1900~2049년 매년의 "월별 대/소, 윤달 여부"를 담은 표(공개 천문 자료 기반의 널리 쓰이는 인코딩 방식)를 사용합니다. 표를 벗어난 해는 화면에 음력을 표시하지 않습니다. */ var LUNAR_INFO = [ 0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2, 0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977, 0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970, 0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950, 0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557, 0x06ca0,0x0b550,0x15355,0x04da0,0x0a5b0,0x14573,0x052b0,0x0a9a8,0x0e950,0x06aa0, 0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0, 0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b6a0,0x195a6, 0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570, 0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0, 0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5, 0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930, 0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530, 0x05aa0,0x076a3,0x096d0,0x04afb,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45, 0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0 ]; var LUNAR_BASE_YEAR = 1900; function lunarLeapMonth(y){ return LUNAR_INFO[y - LUNAR_BASE_YEAR] & 0xf; } function lunarLeapDays(y){ return lunarLeapMonth(y) ? ((LUNAR_INFO[y - LUNAR_BASE_YEAR] & 0x10000) ? 30 : 29) : 0; } function lunarMonthDays(y, m){ return (LUNAR_INFO[y - LUNAR_BASE_YEAR] & (0x10000 >> m)) ? 30 : 29; } function lunarYearDays(y){ var sum = 348, i; for (i = 0x8000; i > 0x8; i >>= 1){ sum += (LUNAR_INFO[y - LUNAR_BASE_YEAR] & i) ? 1 : 0; } return sum + lunarLeapDays(y); } function solarToLunar(y, m, d){ var minYear = LUNAR_BASE_YEAR, maxYear = LUNAR_BASE_YEAR + LUNAR_INFO.length - 1; if (y < minYear || y > maxYear) return null; var offset = Math.round((Date.UTC(y, m - 1, d) - Date.UTC(minYear, 0, 31)) / 86400000); if (offset < 0) return null; var i, temp = 0; for (i = minYear; i <= maxYear && offset > 0; i++){ temp = lunarYearDays(i); offset -= temp; } if (offset < 0){ offset += temp; i--; } var lYear = i; var leap = lunarLeapMonth(lYear); var isLeap = false; for (i = 1; i < 13 && offset > 0; i++){ if (leap > 0 && i === (leap + 1) && !isLeap){ i--; isLeap = true; temp = lunarLeapDays(lYear); } else { temp = lunarMonthDays(lYear, i); } if (isLeap && i === (leap + 1)){ isLeap = false; } offset -= temp; } if (offset === 0 && leap > 0 && i === leap + 1){ if (isLeap){ isLeap = false; } else { isLeap = true; i--; } } if (offset < 0){ offset += temp; i--; } return { lYear: lYear, lMonth: i, lDay: offset + 1, isLeap: isLeap }; } /* ISO 8601 방식 연중 주차 (월요일 시작, 목요일이 포함된 주가 1주차) */ function isoWeekOfYear(date){ var d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())); var dayNum = d.getUTCDay() || 7; d.setUTCDate(d.getUTCDate() + 4 - dayNum); var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1)); return Math.ceil((((d - yearStart) / 86400000) + 1) / 7); } /* 그 달의 몇째 주인지: 연중 주차와 동일한 ISO 규칙을 적용 — 월(Mon)~일(Sun)로 묶은 주에서 그 주의 "목요일"이 속한 달의 몇 번째 주인지로 센다 (예: 2026년 8월은 8/6이 목요일이라 8/3~8/9 주가 8월 1주차) */ function weekOfMonthKr(date){ var dow = (date.getDay() + 6) % 7; /* 월=0 ~ 일=6 */ var thursday = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dow + 3); var n = Math.ceil(thursday.getDate() / 7); var names = ['첫째', '둘째', '셋째', '넷째', '다섯째', '여섯째']; return names[Math.min(n, names.length) - 1] || (n + '번째'); } var KR_WEEKDAY = ['일', '월', '화', '수', '목', '금', '토']; function layoutToday(idx){ var family = currentFont(); var area = document.getElementById(areaIds[idx]); if (!area) return; var rect = area.getBoundingClientRect(); var w = rect.width, h = rect.height; if (w <= 0 || h <= 0) return; var lineH = h / 3.4; /* 줄 사이 여백까지 고려해 한 줄당 예산을 살짝 넉넉히 잡음 */ var lines = ['bcTD-line1', 'bcTD-line2', 'bcTD-line3']; for (var i = 0; i < lines.length; i++){ var el = document.getElementById(lines[i]); if (!el || !el.textContent) continue; var size = fitFontSize(el.textContent, family, w * 0.94, lineH * 0.92) * state.sizeScale; el.style.fontSize = size + 'px'; } } function renderToday(){ var now = new Date(); var yy = now.getFullYear() % 100; var week = isoWeekOfYear(now); var moWeek = weekOfMonthKr(now); var line1 = document.getElementById('bcTD-line1'); if (line1) line1.textContent = yy + '년 ' + week + '주차 / ' + (now.getMonth() + 1) + '월 ' + moWeek + '주'; var line2 = document.getElementById('bcTD-line2'); if (line2){ var dateStr = yy + '년' + pad2(now.getMonth() + 1) + '월' + pad2(now.getDate()) + '일(' + KR_WEEKDAY[now.getDay()] + ')'; var lunar = solarToLunar(now.getFullYear(), now.getMonth() + 1, now.getDate()); var lunarStr = lunar ? ('(음)' + (lunar.isLeap ? '윤' : '') + pad2(lunar.lMonth) + '.' + pad2(lunar.lDay)) : ''; line2.innerHTML = dateStr + (lunarStr ? '<span class="bc-td-sub">' + lunarStr + '</span>' : ''); } var line3 = document.getElementById('bcTD-line3'); if (line3) line3.textContent = now.getHours() + '시' + pad2(now.getMinutes()) + '분' + pad2(now.getSeconds()) + '초'; } /* ---------------- 백타임 : 하루 중 정해진 시각까지 거꾸로 카운트 ---------------- */ var BACK_DEFAULTS = [ ['기상까지','07:00'], ['아침까지','07:30'], ['출근까지','08:30'], ['점심까지','12:00'], ['낮잠까지','13:30'], ['약속까지','15:00'], ['운동까지','17:30'], ['퇴근까지','18:00'], ['산책까지','19:00'], ['저녁까지','19:30'], ['마감까지','22:00'], ['취침까지','23:30'] ]; var backIdSeq = 0; function newBackId(){ backIdSeq += 1; return 'bt' + Date.now() + backIdSeq; } state.backRoutines = BACK_DEFAULTS.map(function(pair){ return { id: newBackId(), label: pair[0], time: pair[1], enabled: false }; }); state.btStripScale = 1.3; safeRun(function loadBackRoutines(){ var raw = window.localStorage ? window.localStorage.getItem('bc_backRoutines_v2') : null; if (!raw) return; var parsed = JSON.parse(raw); if (parsed && parsed.length){ state.backRoutines = parsed; } }); safeRun(function loadStripScale(){ var raw = window.localStorage ? window.localStorage.getItem('bc_btStripScale_v1') : null; if (raw){ var n = parseFloat(raw); if (!isNaN(n)){ state.btStripScale = n; } } }); function saveBackRoutines(){ safeRun(function(){ if (window.localStorage){ window.localStorage.setItem('bc_backRoutines_v2', JSON.stringify(state.backRoutines)); } }); } function saveStripScale(){ safeRun(function(){ if (window.localStorage){ window.localStorage.setItem('bc_btStripScale_v1', String(state.btStripScale)); } }); } function renderBackSettingsList(){ var wrap = $('bcBackList'); if (!wrap) return; wrap.innerHTML = ''; state.backRoutines.forEach(function(item){ var row = document.createElement('div'); row.className = 'bc-back-row' + (item.enabled ? '' : ' bc-back-off'); row.innerHTML = '<input type="checkbox"' + (item.enabled ? ' checked' : '') + '>' + '<input type="text" value="' + item.label.replace(/"/g, '&quot;') + '">' + '<input type="time" value="' + item.time + '">' + '<button type="button" class="bc-back-del">✕</button>'; var checkInput = row.querySelector('input[type=checkbox]'); var labelInput = row.querySelector('input[type=text]'); var timeInput = row.querySelector('input[type=time]'); var delBtn = row.querySelector('.bc-back-del'); checkInput.addEventListener('change', function(){ item.enabled = checkInput.checked; row.className = 'bc-back-row' + (item.enabled ? '' : ' bc-back-off'); saveBackRoutines(); }); labelInput.addEventListener('input', function(){ item.label = labelInput.value; saveBackRoutines(); }); timeInput.addEventListener('input', function(){ item.time = timeInput.value; saveBackRoutines(); }); delBtn.addEventListener('click', function(){ state.backRoutines = state.backRoutines.filter(function(r){ return r.id !== item.id; }); saveBackRoutines(); renderBackSettingsList(); }); wrap.appendChild(row); }); } safeRun(renderBackSettingsList); safeRun(function(){ $('bcBackAdd').addEventListener('click', function(){ state.backRoutines.push({ id: newBackId(), label: '새 항목', time: '', enabled: false }); saveBackRoutines(); renderBackSettingsList(); }); }); function updateBtSizeReadout(){ var el = $('bcBtSizeValue'); if (el) el.textContent = state.btStripScale.toFixed(1) + 'x'; } function adjustBtStripScale(delta){ state.btStripScale = Math.max(0.6, Math.min(3.2, state.btStripScale + delta)); saveStripScale(); updateBtSizeReadout(); } safeRun(updateBtSizeReadout); safeRun(function(){ $('bcBtSizeMinus').addEventListener('click', function(){ adjustBtStripScale(-0.2); }); $('bcBtSizePlus').addEventListener('click', function(){ adjustBtStripScale(0.2); }); }); /* 설정된(시간이 있는) 항목들 중, "오늘 하루" 기준 다음으로 다가올 시각을 찾는다. 이미 지난 시각은 내일 같은 시각으로 넘어가므로, 여러 기기에서 봐도 항상 같은 결과가 나온다. */ function computeBackTargets(now){ var list = []; state.backRoutines.forEach(function(item){ if (!item.enabled || !item.time) return; var parts = item.time.split(':'); var hh = parseInt(parts[0], 10), mm = parseInt(parts[1], 10); if (isNaN(hh) || isNaN(mm)) return; var todayTarget = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hh, mm, 0, 0); var passedToday = todayTarget.getTime() <= now.getTime(); var nextTarget = passedToday ? new Date(todayTarget.getTime() + 86400000) : todayTarget; list.push({ id: item.id, label: item.label, minutes: hh * 60 + mm, passedToday: passedToday, nextTarget: nextTarget }); }); list.sort(function(a, b){ return a.minutes - b.minutes; }); return list; } function renderBack(){ var now = new Date(); var list = computeBackTargets(now); var strip = $('bcBTStrip'); var targetEl = $('bcBTTarget'); var panelBack = $('bcPanelBack'); if (targetEl) targetEl.style.fontSize = (14 * state.btStripScale) + 'px'; if (!list.length){ if (strip) strip.innerHTML = ''; if (targetEl) targetEl.textContent = '설정에서 항목을 켜고 시간을 입력해주세요'; var emptyChars = ['-', '-', '-', '-', '-', '-']; var rIds = groups.back.rows, lIds = groups.back.line; for (var e = 0; e < 6; e++){ var re = document.getElementById(rIds[e]); if (re) re.textContent = emptyChars[e]; var le = document.getElementById(lIds[e]); if (le) le.textContent = emptyChars[e]; } if (panelBack) panelBack.classList.remove('bc-blinking'); return; } var soonest = list[0]; for (var i = 1; i < list.length; i++){ if (list[i].nextTarget.getTime() < soonest.nextTarget.getTime()){ soonest = list[i]; } } if (strip){ strip.innerHTML = ''; list.forEach(function(entry){ var pill = document.createElement('span'); pill.className = 'bc-bt-pill' + (entry.passedToday ? ' bc-bt-passed' : '') + (entry.id === soonest.id ? ' bc-bt-next' : ''); pill.style.fontSize = (12 * state.btStripScale) + 'px'; pill.textContent = entry.label + ' ' + pad2(Math.floor(entry.minutes / 60)) + ':' + pad2(entry.minutes % 60); strip.appendChild(pill); }); } if (targetEl) targetEl.textContent = soonest.label; var remainSec = (soonest.nextTarget.getTime() - now.getTime()) / 1000; setGroupDigits('back', remainSec); if (panelBack){ if (remainSec <= 10){ panelBack.classList.add('bc-blinking'); } else { panelBack.classList.remove('bc-blinking'); } } } /* 무한 루프용 클론에 실제 화면의 글자/크기를 그대로 복사 (클론은 스스로 계산하지 않음) */ function mirrorClockClone(){ var pairs = [ ['bcC-h0','bcC-h0Clone'],['bcC-h1','bcC-h1Clone'],['bcC-m0','bcC-m0Clone'],['bcC-m1','bcC-m1Clone'],['bcC-s0','bcC-s0Clone'],['bcC-s1','bcC-s1Clone'], ['bcCL-h0','bcCL-h0Clone'],['bcCL-h1','bcCL-h1Clone'],['bcCL-m0','bcCL-m0Clone'],['bcCL-m1','bcCL-m1Clone'],['bcCL-s0','bcCL-s0Clone'],['bcCL-s1','bcCL-s1Clone'] ]; for (var i = 0; i < pairs.length; i++){ var src = document.getElementById(pairs[i][0]), dst = document.getElementById(pairs[i][1]); if (src && dst){ dst.textContent = src.textContent; dst.style.fontSize = src.style.fontSize; dst.style.fontFamily = src.style.fontFamily; } } } function mirrorBackClone(){ var pairs = [ ['bcB-h0','bcB-h0Clone'],['bcB-h1','bcB-h1Clone'],['bcB-m0','bcB-m0Clone'],['bcB-m1','bcB-m1Clone'],['bcB-s0','bcB-s0Clone'],['bcB-s1','bcB-s1Clone'], ['bcBL-h0','bcBL-h0Clone'],['bcBL-h1','bcBL-h1Clone'],['bcBL-m0','bcBL-m0Clone'],['bcBL-m1','bcBL-m1Clone'],['bcBL-s0','bcBL-s0Clone'],['bcBL-s1','bcBL-s1Clone'], ['bcBLbl0','bcBLbl0Clone'],['bcBLbl1','bcBLbl1Clone'],['bcBLbl2','bcBLbl2Clone'] ]; for (var i = 0; i < pairs.length; i++){ var src = document.getElementById(pairs[i][0]), dst = document.getElementById(pairs[i][1]); if (src && dst){ dst.textContent = src.textContent; dst.style.fontSize = src.style.fontSize; dst.style.fontFamily = src.style.fontFamily; } } var srcSep = document.getElementById('bcBL-c2'), dstSep = document.getElementById('bcBL-c2Clone'); if (srcSep && dstSep){ dstSep.textContent = srcSep.textContent; } var srcStrip = document.getElementById('bcBTStrip'), dstStrip = document.getElementById('bcBTStripClone'); if (srcStrip && dstStrip){ dstStrip.innerHTML = srcStrip.innerHTML; } var srcTarget = document.getElementById('bcBTTarget'), dstTarget = document.getElementById('bcBTTargetClone'); if (srcTarget && dstTarget){ dstTarget.textContent = srcTarget.textContent; dstTarget.style.fontSize = srcTarget.style.fontSize; } var srcPanel = $('bcPanelBack'), dstPanel = $('bcPanelCloneStart'); if (srcPanel && dstPanel){ if (srcPanel.classList.contains('bc-blinking')){ dstPanel.classList.add('bc-blinking'); } else { dstPanel.classList.remove('bc-blinking'); } } } var clockTimer = null; function tickClock(){ var d = new Date(); setDigits('clock', d.getHours(), d.getMinutes(), d.getSeconds()); mirrorClockClone(); renderToday(); renderBack(); mirrorBackClone(); } function startClock(){ tickClock(); if (clockTimer) clearInterval(clockTimer); clockTimer = setInterval(tickClock, 250); } var stopElapsed = 0, stopRunning = false, stopInt = null, stopLastTs = 0; function renderStop(){ setGroupDigits('stop', stopElapsed); } function stopStep(){ var now = Date.now(); stopElapsed += (now - stopLastTs) / 1000; stopLastTs = now; renderStop(); } function startStop(){ if (stopRunning) return; stopRunning = true; stopLastTs = Date.now(); stopInt = setInterval(stopStep, 200); var btn = $('bcStopStart'); if (btn) btn.textContent = '일시정지'; } function pauseStop(){ stopRunning = false; if (stopInt){ clearInterval(stopInt); stopInt = null; } var btn = $('bcStopStart'); if (btn) btn.textContent = '시작'; } function toggleStop(){ if (stopRunning){ pauseStop(); } else { startStop(); } } function resetStop(){ pauseStop(); stopElapsed = 0; renderStop(); } safeRun(function(){ $('bcStopStart').addEventListener('click', toggleStop); $('bcStopReset').addEventListener('click', resetStop); }); safeRun(renderStop); var timerTotalSec = 5 * 60, timerRemain = timerTotalSec, timerRunning = false, timerInt = null, timerLastTs = 0; function renderTimer(){ setGroupDigits('timer', timerRemain); } function timerStep(){ var now = Date.now(); var delta = (now - timerLastTs) / 1000; timerLastTs = now; timerRemain -= delta; if (timerRemain <= 0){ timerRemain = 0; renderTimer(); pauseTimer(); return; } renderTimer(); } function startTimer(){ if (timerRunning || timerRemain <= 0) return; timerRunning = true; timerLastTs = Date.now(); timerInt = setInterval(timerStep, 200); var btn = $('bcTimerStart'); if (btn) btn.textContent = '일시정지'; } function pauseTimer(){ timerRunning = false; if (timerInt){ clearInterval(timerInt); timerInt = null; } var btn = $('bcTimerStart'); if (btn) btn.textContent = '시작'; } function toggleTimer(){ if (timerRunning){ pauseTimer(); } else { startTimer(); } } function resetTimer(){ pauseTimer(); timerRemain = timerTotalSec; renderTimer(); } function adjustTimer(deltaSec){ pauseTimer(); timerTotalSec = Math.max(0, Math.min(99*3600 + 59*60 + 59, timerTotalSec + deltaSec)); timerRemain = timerTotalSec; renderTimer(); safeRun(renderTimerPreview); } safeRun(function(){ $('bcTimerMinusM').addEventListener('click', function(){ adjustTimer(-60); }); $('bcTimerPlusM').addEventListener('click', function(){ adjustTimer(60); }); $('bcTimerStart').addEventListener('click', toggleTimer); $('bcTimerReset').addEventListener('click', resetTimer); }); safeRun(renderTimer); /* ---------------- 설정 페이지의 타이머 미리보기: 숫자로 직접 시작 시간을 입력 ---------------- */ function renderTimerPreview(){ var t = Math.max(0, Math.floor(timerTotalSec)); var h = Math.floor(t / 3600), m = Math.floor((t % 3600) / 60), s = t % 60; var eh = $('bcPvTimerH'); if (eh) eh.textContent = pad2(h); var em = $('bcPvTimerM'); if (em) em.textContent = pad2(m); var es = $('bcPvTimerS'); if (es) es.textContent = pad2(s); var inp = $('bcTimerPreviewInput'); if (inp){ inp.value = pad2(h) + ':' + pad2(m) + ':' + pad2(s); } } function setTimerDuration(totalSec){ pauseTimer(); timerTotalSec = Math.max(0, Math.min(99 * 3600 + 59 * 60 + 59, totalSec)); timerRemain = timerTotalSec; renderTimer(); renderTimerPreview(); } safeRun(function(){ $('bcTimerPreviewInput').addEventListener('change', function(e){ var parts = e.target.value.split(':'); var hh = parseInt(parts[0], 10) || 0, mm = parseInt(parts[1], 10) || 0, ss = parseInt(parts[2], 10) || 0; setTimerDuration(hh * 3600 + mm * 60 + ss); }); }); safeRun(renderTimerPreview); /* ---------------- 상단바 자동 숨김/표시 ---------------- */ var topbarTimer = null; function showControls(){ var ctrlbars = document.querySelectorAll('.bc-ctrlbar'); if (topbar) topbar.classList.remove('bc-hidden'); for (var i = 0; i < ctrlbars.length; i++){ ctrlbars[i].classList.remove('bc-hidden'); } if (topbarTimer) clearTimeout(topbarTimer); topbarTimer = setTimeout(function(){ if (topbar) topbar.classList.add('bc-hidden'); var bars = document.querySelectorAll('.bc-ctrlbar'); for (var j = 0; j < bars.length; j++){ bars[j].classList.add('bc-hidden'); } }, 2600); } /* ---------------- 패널 전환 (좌우 스와이프, 클론 기반 무한 순환) ---------------- 트랙 구성: [클론:백타임] [시계] [스톱워치] [타이머] [오늘은] [백타임] [클론:시계] 실제 화면 인덱스(0~4)는 트랙 위치로 보면 1~5. 화살표/스와이프처럼 "한 칸씩" 움직일 때만 클론 칸을 자연스럽게 타고 넘어가고, 전환 애니메이션이 끝나는 순간 티 안 나게 진짜 화면 위치로 순간이동시켜서 몇 번을 넘겨도 계속 자연스럽게 이어지도록 함. */ var dots = []; safeRun(function(){ dots = $('bcDots').querySelectorAll('span'); }); function realIndexForTrack(t){ if (t <= 0) return PANEL_COUNT - 1; if (t >= TRACK_COUNT - 1) return 0; return t - 1; } function setActiveDots(realIdx){ for (var i = 0; i < dots.length; i++){ dots[i].className = (i === realIdx) ? 'bc-dot-active' : ''; } } function applyTrackTransform(trackIdx, animate){ if (!animate){ panelsEl.style.transition = 'none'; } panelsEl.style.transform = 'translateX(-' + (trackIdx * TRACK_STEP) + '%)'; if (!animate){ void panelsEl.offsetWidth; setTimeout(function(){ panelsEl.style.transition = ''; }, 30); } } /* 절대 이동: 점 클릭, 미리보기 카드의 [전체보기], 처음 전체화면 진입 시 사용. 클론을 거치지 않음 */ function goPanel(realIdx, animate){ var wrapped = ((realIdx % PANEL_COUNT) + PANEL_COUNT) % PANEL_COUNT; state.panelIndex = wrapped; state.trackIndex = wrapped + 1; applyTrackTransform(state.trackIndex, animate !== false); setActiveDots(wrapped); scheduleLayout(); } /* 상대 이동(±1칸): 스와이프/드래그/휠/키보드/좌우 화살표 버튼에서 사용. 끝에서 넘기면 클론 화면을 타고 슬라이드했다가, transitionend에서 순간이동으로 이어붙임 */ function stepPanel(direction){ state.trackIndex += direction; applyTrackTransform(state.trackIndex, true); state.panelIndex = realIndexForTrack(state.trackIndex); setActiveDots(state.panelIndex); scheduleLayout(); } safeRun(function(){ panelsEl.addEventListener('transitionend', function(e){ if (e.propertyName && e.propertyName !== 'transform') return; if (state.trackIndex === 0){ state.trackIndex = PANEL_COUNT; applyTrackTransform(state.trackIndex, false); } else if (state.trackIndex === TRACK_COUNT - 1){ state.trackIndex = 1; applyTrackTransform(state.trackIndex, false); } }); }); safeRun(function(){ for (var di = 0; di < dots.length; di++){ dots[di].addEventListener('click', function(e){ goPanel(parseInt(e.target.getAttribute('data-i'), 10)); showControls(); }); } }); safeRun(function(){ $('bcNavLeft').addEventListener('click', function(){ stepPanel(-1); showControls(); }); $('bcNavRight').addEventListener('click', function(){ stepPanel(1); showControls(); }); }); var touchStartX = 0, touchStartY = 0, touchActive = false; safeRun(function(){ panelsWrap.addEventListener('touchstart', function(e){ showControls(); if (e.touches.length !== 1) return; touchStartX = e.touches[0].clientX; touchStartY = e.touches[0].clientY; touchActive = true; }, { passive: true }); panelsWrap.addEventListener('touchend', function(e){ if (!touchActive) return; touchActive = false; var dx = e.changedTouches[0].clientX - touchStartX; var dy = e.changedTouches[0].clientY - touchStartY; if (Math.abs(dx) > 55 && Math.abs(dx) > Math.abs(dy) * 1.4){ stepPanel(dx < 0 ? 1 : -1); } }, { passive: true }); }); var mouseDownX = 0, mouseActive = false; safeRun(function(){ panelsWrap.addEventListener('mousedown', function(e){ showControls(); mouseDownX = e.clientX; mouseActive = true; }); window.addEventListener('mouseup', function(e){ if (!mouseActive) return; mouseActive = false; var dx = e.clientX - mouseDownX; if (Math.abs(dx) > 70){ stepPanel(dx < 0 ? 1 : -1); } }); }); var wheelLock = false; safeRun(function(){ panelsWrap.addEventListener('wheel', function(e){ showControls(); if (wheelLock) return; if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 30){ wheelLock = true; stepPanel(e.deltaX > 0 ? 1 : -1); setTimeout(function(){ wheelLock = false; }, 350); } }, { passive: true }); }); safeRun(function(){ document.addEventListener('keydown', function(e){ if (!overlay.classList.contains('bc-active')) return; if (e.key === 'ArrowLeft'){ stepPanel(-1); showControls(); } else if (e.key === 'ArrowRight'){ stepPanel(1); showControls(); } else if (e.key === 'Escape'){ closeFullscreen(); } }); }); var wakeLockObj = null; function requestWake(){ if ('wakeLock' in navigator){ navigator.wakeLock.request('screen').then(function(lock){ wakeLockObj = lock; }).catch(function(){}); } } function releaseWake(){ if (wakeLockObj){ wakeLockObj.release().catch(function(){}); wakeLockObj = null; } } function syncWakeButtons(){ var btn = $('bcWakeBtnFs'); if (btn){ btn.textContent = state.wake ? '항상켜짐 ON' : '항상켜짐'; btn.className = 'bc-icon-btn' + (state.wake ? ' bc-on' : ''); } var pageBtn = $('bcPageWakeBtn'); if (pageBtn){ pageBtn.className = 'bc-icon-btn-light bc-bulb-btn' + (state.wake ? ' bc-on' : ''); } var chk = $('bcWakeToggle'); if (chk) chk.checked = state.wake; if (state.wake){ requestWake(); } else { releaseWake(); } } safeRun(function(){ $('bcWakeBtnFs').addEventListener('click', function(){ state.wake = !state.wake; syncWakeButtons(); showControls(); }); $('bcPageWakeBtn').addEventListener('click', function(){ state.wake = !state.wake; syncWakeButtons(); }); document.addEventListener('visibilitychange', function(){ if (state.wake && document.visibilityState === 'visible'){ requestWake(); } }); }); safeRun(syncWakeButtons); function adjustScale(delta){ state.sizeScale = Math.max(0.75, Math.min(1.3, state.sizeScale + delta)); scheduleLayout(); showControls(); } safeRun(function(){ var sizeBtns = document.querySelectorAll('[data-size-adj]'); for (var i = 0; i < sizeBtns.length; i++){ sizeBtns[i].addEventListener('click', function(){ var d = parseFloat(this.getAttribute('data-size-adj')); adjustScale(d * 0.05); }); } var stripBtns = document.querySelectorAll('[data-strip-adj]'); for (var j = 0; j < stripBtns.length; j++){ stripBtns[j].addEventListener('click', function(){ var d = parseFloat(this.getAttribute('data-strip-adj')); adjustBtStripScale(d * 0.2); renderBack(); mirrorBackClone(); showControls(); }); } }); function requestFs(el){ var fn = el.requestFullscreen || el.webkitRequestFullscreen || el.msRequestFullscreen; if (fn){ try { fn.call(el); } catch(err){} } } function exitFs(){ var fn = document.exitFullscreen || document.webkitExitFullscreen || document.msExitFullscreen; if (fn && (document.fullscreenElement || document.webkitFullscreenElement)){ try { fn.call(document); } catch(err){} } } function openFullscreen(targetIdx){ applyColorsAndFont(); overlay.style.display = 'block'; overlay.classList.add('bc-active'); updateOrientClass(); requestFs(overlay); goPanel(typeof targetIdx === 'number' ? targetIdx : 0, false); /* 기본은 시계, 미리보기 카드에서 누르면 해당 화면으로 바로 이동 (애니메이션 없이 즉시) */ startClock(); syncWakeButtons(); showControls(); setTimeout(layoutAll, 50); setTimeout(layoutAll, 300); } function closeFullscreen(){ overlay.classList.remove('bc-active'); overlay.style.display = 'none'; exitFs(); } safeRun(function(){ $('bcStartBtn').addEventListener('click', function(){ openFullscreen(0); }); $('bcExitBtn').addEventListener('click', closeFullscreen); var jumpBtns = document.querySelectorAll('.bc-preview-jump'); for (var jb = 0; jb < jumpBtns.length; jb++){ jumpBtns[jb].addEventListener('click', function(){ openFullscreen(parseInt(this.getAttribute('data-panel-idx'), 10)); }); } document.addEventListener('fullscreenchange', function(){ if (!document.fullscreenElement){ overlay.classList.remove('bc-active'); overlay.style.display = 'none'; } }); }); safeRun(function(){ if (document.fonts && document.fonts.ready){ document.fonts.ready.then(scheduleLayout).catch(function(){}); } }); /* ---------------- 설정 페이지 미리보기: 시계·오늘은 카드를 실시간으로 움직이게 ---------------- */ function renderSettingsPreviewLive(){ var now = new Date(); var ph = $('bcPvH'); if (ph) ph.textContent = pad2(now.getHours()); var pm = $('bcPvM'); if (pm) pm.textContent = pad2(now.getMinutes()); var ps = $('bcPvS'); if (ps) ps.textContent = pad2(now.getSeconds()); var yy = now.getFullYear() % 100; var week = isoWeekOfYear(now); var moWeek = weekOfMonthKr(now); var l1 = $('bcPvTD1'); if (l1) l1.textContent = yy + '년 ' + week + '주차 / ' + (now.getMonth() + 1) + '월 ' + moWeek + '주'; var l2 = $('bcPvTD2'); if (l2) l2.textContent = pad2(now.getMonth() + 1) + '월' + pad2(now.getDate()) + '일(' + KR_WEEKDAY[now.getDay()] + ')'; var l3 = $('bcPvTD3'); if (l3) l3.textContent = pad2(now.getHours()) + '시' + pad2(now.getMinutes()) + '분'; } safeRun(function(){ renderSettingsPreviewLive(); setInterval(renderSettingsPreviewLive, 1000); }); /* ---------------- 설정 공유: URL 파라미터 + TinyURL + QR ---------------- */ function serializeConfig(){ return { v: 2, th: state.themeIndex, co: state.customOn ? 1 : 0, cb: state.customBg, cf: state.customFg, fo: state.fontIndex, dw: state.dynamicWidth ? 1 : 0, tt: timerTotalSec, bs: state.btStripScale, br: state.backRoutines.map(function(r){ return [r.label, r.time, r.enabled ? 1 : 0]; }) }; } function refreshThemeSwatchesUI(){ var swatches = document.querySelectorAll('#bcThemeGrid .bc-theme-swatch'); for (var i = 0; i < swatches.length; i++){ swatches[i].className = 'bc-theme-swatch' + (i === state.themeIndex && !state.customOn ? ' bc-active' : ''); } } function refreshFontSwatchesUI(){ var swatches = document.querySelectorAll('#bcFontGrid .bc-font-swatch'); for (var i = 0; i < swatches.length; i++){ swatches[i].className = 'bc-font-swatch' + (i === state.fontIndex ? ' bc-active' : ''); } } function applyConfig(cfg){ if (!cfg) return; if (typeof cfg.th === 'number'){ state.themeIndex = cfg.th; } state.customOn = !!cfg.co; if (cfg.cb){ state.customBg = cfg.cb; } if (cfg.cf){ state.customFg = cfg.cf; } if (typeof cfg.fo === 'number'){ state.fontIndex = cfg.fo; } state.dynamicWidth = !!cfg.dw; if (typeof cfg.tt === 'number' && cfg.tt >= 0){ timerTotalSec = cfg.tt; timerRemain = cfg.tt; } if (typeof cfg.bs === 'number'){ state.btStripScale = cfg.bs; saveStripScale(); safeRun(updateBtSizeReadout); } if (cfg.br && cfg.br.length){ state.backRoutines = cfg.br.map(function(pair){ return { id: newBackId(), label: pair[0] || '', time: pair[1] || '', enabled: !!pair[2] }; }); saveBackRoutines(); } safeRun(function(){ $('bcCustomToggle').checked = state.customOn; }); safeRun(function(){ $('bcCustomBg').value = state.customBg; }); safeRun(function(){ $('bcCustomFg').value = state.customFg; }); safeRun(function(){ $('bcCustomRow').style.display = state.customOn ? 'flex' : 'none'; }); safeRun(function(){ $('bcWidthStatic').checked = !state.dynamicWidth; }); safeRun(function(){ $('bcWidthDynamic').checked = state.dynamicWidth; }); safeRun(refreshThemeSwatchesUI); safeRun(refreshFontSwatchesUI); safeRun(updatePreview); safeRun(renderBackSettingsList); safeRun(renderTimerPreview); } function buildShareUrl(){ var json = JSON.stringify(serializeConfig()); return window.location.origin + window.location.pathname + '?cfg=' + encodeURIComponent(json); } safeRun(function(){ $('bcShareBtn').addEventListener('click', function(){ var fullUrl = buildShareUrl(); $('bcShareFullUrl').value = fullUrl; $('bcShareResult').style.display = 'block'; var shortInput = $('bcShareShortUrl'); shortInput.value = ''; shortInput.setAttribute('placeholder', '단축 링크 생성 중...'); $('bcShareQr').src = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + encodeURIComponent(fullUrl); var fallback = $('bcShareFallback'); fallback.style.display = 'block'; fallback.innerHTML = '자동 단축이 안 되면 <a href="https://tinyurl.com/api-create.php?url=' + encodeURIComponent(fullUrl) + '" target="_blank" rel="noopener">여기를 눌러 새 탭에서 단축 링크 생성</a>'; fetch('https://tinyurl.com/api-create.php?url=' + encodeURIComponent(fullUrl)) .then(function(res){ return res.text(); }) .then(function(short){ if (short && short.indexOf('http') === 0){ shortInput.value = short.trim(); } else { shortInput.setAttribute('placeholder', '단축 실패 - 아래 링크로 대신 만들어주세요'); } }) .catch(function(){ shortInput.setAttribute('placeholder', '단축 실패(네트워크 차단) - 아래 링크로 대신 만들어주세요'); }); }); var copyBtns = document.querySelectorAll('[data-copy-target]'); for (var cbtn = 0; cbtn < copyBtns.length; cbtn++){ copyBtns[cbtn].addEventListener('click', function(){ var target = $(this.getAttribute('data-copy-target')); if (!target || !target.value) return; target.select(); target.setSelectionRange(0, 99999); try { document.execCommand('copy'); } catch (err){} if (navigator.clipboard && navigator.clipboard.writeText){ navigator.clipboard.writeText(target.value).catch(function(){}); } }); } }); safeRun(function loadSharedConfigFromUrl(){ var params = new URLSearchParams(window.location.search); var raw = params.get('cfg'); if (!raw) return; var cfg = JSON.parse(raw); applyConfig(cfg); }); })(); </script> </div> 모두의계산기/각종타이머 발표 빽타임 숫자큰시계 시계 업무 웹앱 풀스크린와치 최매슨생 https://0-1.kr/125 https://0-1.kr/125#entry125comment Mon, 24 Aug 2026 15:09:24 +0900 https://0-1.kr/124 <div id="pgc-root"> <style> #pgc-root { max-width: 100%; margin: 0 auto; padding: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif; color: #222; box-sizing: border-box; touch-action: manipulation; } #pgc-root * { box-sizing: border-box; } .pgc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .pgc-header h1 { flex: 1; font-size: 16px; margin: 0; padding: 10px; background: #2d3f52; color: #fff; border-radius: 10px; text-align: center; } .pgc-header-btn { flex: none; font-size: 12px; padding: 9px 10px; border: none; border-radius: 8px; background: #3f6fa8; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; white-space: nowrap; } .pgc-header-btn.pgc-save { background: #4a8a5c; } .pgc-acc { background: #f7f8fa; border: 1px solid #e2e5ea; border-radius: 10px; margin-bottom: 14px; overflow: hidden; } .pgc-acc summary { list-style: none; cursor: pointer; font-size: 15px; font-weight: 700; padding: 12px 14px; color: #2d3f52; -webkit-tap-highlight-color: transparent; touch-action: manipulation; display: flex; align-items: center; justify-content: space-between; } .pgc-acc summary::-webkit-details-marker { display: none; } .pgc-acc summary:after { content: '▾'; font-size: 13px; color: #8a939c; transition: transform 0.2s; } .pgc-acc[open] summary:after { transform: rotate(180deg); } .pgc-acc-body { padding: 0 14px 14px 14px; } .pgc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .pgc-label { font-size: 14px; font-weight: 600; min-width: 70px; } .pgc-select, .pgc-input { font-size: 16px; padding: 8px 10px; border: 1px solid #ccd2da; border-radius: 8px; -webkit-appearance: none; appearance: none; background: #fff; flex: 1; min-width: 90px; } .pgc-input-num { flex: none; width: 70px; } .pgc-btn { font-size: 14px; padding: 9px 14px; border: none; border-radius: 8px; background: #2d3f52; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .pgc-btn.pgc-btn-sub { background: #6c7a89; } .pgc-btn.pgc-btn-mini { font-size: 13px; padding: 7px 10px; background: #eef1f5; color: #2d3f52; border: 1px solid #ccd2da; } .pgc-btn.pgc-btn-mini:disabled { opacity: 0.4; } .pgc-btn.pgc-btn-token { background: #eef1f5; color: #2d3f52; border: 1px solid #ccd2da; font-size: 12px; padding: 6px 9px; position: relative; } .pgc-weekday-wrap { display: flex; gap: 4px; flex-wrap: wrap; } .pgc-weekday { font-size: 13px; padding: 7px 10px; border-radius: 20px; border: 1px solid #ccd2da; background: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .pgc-weekday.pgc-active { background: #2d3f52; color: #fff; border-color: #2d3f52; } .pgc-token-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .pgc-tooltip { display: none; position: absolute; bottom: 115%; left: 50%; transform: translateX(-50%); background: #222; color: #fff; font-size: 11px; padding: 5px 8px; border-radius: 6px; white-space: nowrap; z-index: 10; } .pgc-tt-show { display: block !important; } .pgc-tpl-guide { font-size: 12.5px; line-height: 1.6; background: #eef4fb; border: 1px solid #cfe0f2; border-radius: 8px; padding: 10px; margin-bottom: 10px; color: #2d3f52; } .pgc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e2e5ea; border-radius: 8px; } #pgc-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 12px; table-layout: fixed; } #pgc-table th { background: #2d3f52; color: #fff; padding: 8px 6px; font-size: 12px; position: sticky; top: 0; resize: horizontal; overflow: auto; } #pgc-table td { padding: 6px; border-bottom: 1px solid #eef1f5; vertical-align: top; } #pgc-table td input.pgc-plain { width: 100%; font-size: 12px; padding: 6px; border: 1px solid #e2e5ea; border-radius: 6px; -webkit-appearance: none; } #pgc-table td textarea.pgc-memo { width: 100%; font-size: 12px; padding: 6px; border: 1px solid #e2e5ea; border-radius: 6px; resize: vertical; -webkit-appearance: none; } .pgc-cell-flex { display: flex; gap: 4px; align-items: flex-start; } .pgc-cell-flex textarea { flex: 1; width: 100%; font-size: 12px; padding: 6px; border: 1px solid #e2e5ea; border-radius: 6px; resize: none; overflow-y: auto; line-height: 1.35; max-height: 58px; white-space: pre-wrap; word-break: break-word; -webkit-appearance: none; } .pgc-copybtn { flex: none; font-size: 10px; padding: 5px 6px; background: #eef1f5; color: #2d3f52; border: 1px solid #ccd2da; border-radius: 6px; white-space: nowrap; height: 26px; } #pgc-table td.pgc-col-date { white-space: nowrap; font-weight: 600; color: #2d3f52; } #pgc-table td.pgc-col-seq { text-align: center; color: #888; } .pgc-status { text-align: center; font-size: 12px; color: #8a939c; margin-top: 6px; min-height: 16px; } .pgc-guide { font-size: 13px; line-height: 1.6; background: #fffbe8; border: 1px solid #f0e4a0; border-radius: 8px; padding: 12px; margin-bottom: 14px; } .pgc-guide summary { cursor: pointer; font-weight: 700; } .pgc-credit { text-align: center; font-size: 11px; color: #aab0b8; margin-top: 10px; } .pgc-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: #222; color: #fff; padding: 10px 16px; border-radius: 20px; font-size: 13px; z-index: 2147483647; opacity: 0; transition: opacity 0.25s; pointer-events: none; } .pgc-toast.pgc-show { opacity: 1; } .pgc-tablebtn-row { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; } .pgc-popup-backdrop { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 2147483647; touch-action: none; } .pgc-popup { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 92%; max-width: 420px; max-height: 84%; overflow-y: auto; background: #fff; border-radius: 14px; padding: 16px; -webkit-overflow-scrolling: touch; } .pgc-popup-head { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 700; margin-bottom: 12px; color: #2d3f52; } .pgc-popup-head button { border: none; background: none; font-size: 18px; color: #8a939c; cursor: pointer; } .pgc-popup-label { font-size: 12px; font-weight: 700; color: #6c7a89; margin: 10px 0 4px 0; } .pgc-popup textarea, .pgc-popup input { width: 100%; font-size: 13px; padding: 8px; border: 1px solid #ccd2da; border-radius: 8px; -webkit-appearance: none; } .pgc-popup textarea { height: 70px; resize: none; } .pgc-popup-btnrow { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } </style> <div class="pgc-header"> <button type="button" id="pgc-btn-share" class="pgc-header-btn"> URL공유</button> <h1 id="pgc-title">정기발행물기획계산기_V3_(260823)</h1> <button type="button" id="pgc-btn-save-top" class="pgc-header-btn pgc-save"> 저장</button> </div> <details class="pgc-guide"> <summary> 사용설명서 (열기/닫기)</summary> <div style="margin-top:8px;"> 1. <b>발행 주기</b>를 선택하고 시작일·총 회차수를 입력하면 발행일이 자동 계산됩니다.<br> 2. <b>제목틀</b>에 문구를 쓰고 토큰 버튼으로 값을 끼워 넣은 뒤 "적용"을 누르면 표에 반영됩니다.<br> 3. 표에서 제목·내용메모·태그는 직접 수정 가능하며, 제목·태그 옆 (복사) 버튼으로 해당 칸만 복사할 수 있습니다.<br> 4. 상단 <b> URL공유</b>로 지금 상태를 링크로 공유하거나 즐겨찾기에 저장할 수 있고, <b> 저장</b>은 엑셀 파일로 다운로드합니다.<br> 5. 입력 내용은 4초 안에 이 기기에 자동 저장되며, 되돌리기/되살리기로 복구 가능합니다.<br> 6. "초기화" 버튼은 전체 데이터를 지웁니다 (되돌릴 수 없음, 신중히 사용). </div> </details> <details class="pgc-acc" open> <summary>① 발행일 설정</summary> <div class="pgc-acc-body"> <div class="pgc-row"> <span class="pgc-label">주기</span> <select id="pgc-freq" class="pgc-select"> <option value="daily">매일</option> <option value="weekly" selected>매주</option> <option value="monthly">매달</option> <option value="ndays">N일마다</option> </select> </div> <div class="pgc-row" id="pgc-weekly-wrap"> <span class="pgc-label">요일</span> <div class="pgc-weekday-wrap" id="pgc-weekday-wrap"> <span class="pgc-weekday" data-d="0">일</span> <span class="pgc-weekday pgc-active" data-d="1">월</span> <span class="pgc-weekday" data-d="2">화</span> <span class="pgc-weekday" data-d="3">수</span> <span class="pgc-weekday" data-d="4">목</span> <span class="pgc-weekday" data-d="5">금</span> <span class="pgc-weekday" data-d="6">토</span> </div> </div> <div class="pgc-row" id="pgc-monthly-wrap" style="display:none;"> <span class="pgc-label">매달 며칠</span> <input type="number" id="pgc-monthday" class="pgc-input pgc-input-num" min="1" max="31" value="1"> </div> <div class="pgc-row" id="pgc-ndays-wrap" style="display:none;"> <span class="pgc-label">며칠마다</span> <input type="number" id="pgc-ndays" class="pgc-input pgc-input-num" min="1" value="3"> </div> <div class="pgc-row"> <span class="pgc-label">시작일</span> <input type="date" id="pgc-startdate" class="pgc-input"> </div> <div class="pgc-row"> <span class="pgc-label">총 회차</span> <input type="number" id="pgc-count" class="pgc-input pgc-input-num" min="1" max="200" value="10"> <button type="button" id="pgc-btn-calc" class="pgc-btn">발행일 계산</button> </div> </div> </details> <details class="pgc-acc" open> <summary>② 제목틀 빌더</summary> <div class="pgc-acc-body"> <div class="pgc-tpl-guide"> <b>사용법</b> — 입력창에 문구를 쓰다가 원하는 자리에서 토큰 버튼을 누르면 그 위치에 토큰이 삽입돼요. 예: <code>[{월_2자리}월 {월주차}주차] 뉴스레터 #{순번_2자리}</code> → "적용"을 누르면 각 회차 발행일 기준으로 자동 치환됩니다. </div> <div class="pgc-row"> <input type="text" id="pgc-titletpl" class="pgc-input" placeholder="예: [{월_2자리}월 {월주차}주차] 뉴스레터 #{순번_2자리}" style="width:100%;"> </div> <div class="pgc-row"> <button type="button" id="pgc-btn-undo" class="pgc-btn pgc-btn-mini" disabled>↶ 되돌리기</button> <button type="button" id="pgc-btn-redo" class="pgc-btn pgc-btn-mini" disabled>↷ 되살리기</button> </div> <div class="pgc-token-row" id="pgc-token-row"></div> <button type="button" id="pgc-btn-apply-title" class="pgc-btn pgc-btn-sub">제목틀 적용 (전체 회차에 반영)</button> </div> </details> <details class="pgc-acc" open> <summary>③ 회차별 기획표</summary> <div class="pgc-acc-body"> <div class="pgc-table-wrap"> <table id="pgc-table"> <thead> <tr><th style="width:32px;">#</th><th style="width:92px;">발행일</th><th style="width:190px;">제목</th><th style="width:210px;">주요내용</th><th style="width:150px;">태그</th></tr> </thead> <tbody id="pgc-tbody"></tbody> </table> </div> <div class="pgc-status" id="pgc-status">회차가 없습니다. 위에서 발행일을 계산해주세요.</div> <div class="pgc-tablebtn-row"> <button type="button" id="pgc-btn-xlsx" class="pgc-btn"> 엑셀 저장</button> <button type="button" id="pgc-btn-copy" class="pgc-btn pgc-btn-sub"> 내용복사 (엑셀 붙여넣기용)</button> </div> </div> </details> <div class="pgc-row" style="justify-content:center;"> <button type="button" id="pgc-btn-reset" class="pgc-btn" style="background:#b64a4a;">전체 초기화</button> </div> <div class="pgc-credit">스타트업ex _ cds1981@naver.com</div> <div class="pgc-popup-backdrop" id="pgc-popup-backdrop"> <div class="pgc-popup"> <div class="pgc-popup-head"><span> URL 공유</span><button type="button" id="pgc-popup-close">✕</button></div> <div class="pgc-popup-label">전체 링크 (압축된 데이터 포함)</div> <textarea id="pgc-share-url" readonly></textarea> <div class="pgc-popup-btnrow"> <button type="button" id="pgc-btn-copy-url" class="pgc-btn pgc-btn-mini">링크 복사</button> </div> <div class="pgc-popup-label">짧은 링크 (TinyURL)</div> <input type="text" id="pgc-tiny-url" readonly placeholder="아래 버튼을 눌러 생성"> <div class="pgc-popup-btnrow"> <button type="button" id="pgc-btn-make-tiny" class="pgc-btn pgc-btn-mini">짧은링크 생성</button> <button type="button" id="pgc-btn-copy-tiny" class="pgc-btn pgc-btn-mini">짧은링크 복사</button> </div> <div class="pgc-popup-label">즐겨찾기</div> <button type="button" id="pgc-btn-fav" class="pgc-btn pgc-btn-sub" style="width:100%;">⭐ 이 브라우저 주소창에 현재 상태 반영하기</button> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js"></script> <script> (function () { 'use strict'; var STORE_KEY = 'pgc_v3_data'; var saveTimer = null; var _touching = false; var state = { freq: 'weekly', weekdays: [1], monthday: 1, ndays: 3, startdate: '', count: 10, titletpl: '', rows: [] }; var history = []; var future = []; var HISTORY_MAX = 30; var WD_KR = ['일', '월', '화', '수', '목', '금', '토']; var WD_EN = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; var SEASON = ['겨울', '겨울', '봄', '봄', '봄', '여름', '여름', '여름', '가을', '가을', '가을', '겨울']; var TOKENS = [ { key: '{년_4자리}', desc: '연도 4자리 (예: 2026)' }, { key: '{년_2자리}', desc: '연도 뒤 2자리 (예: 26)' }, { key: '{월_2자리}', desc: '월 2자리 (예: 08, 12)' }, { key: '{월_1자리}', desc: '월 (한자리는 그대로, 10~12월은 두자리, 예: 8, 12)' }, { key: '{일}', desc: '일 (예: 3, 23)' }, { key: '{년월일_6자리}', desc: '연월일 6자리 (예: 260823)' }, { key: '{년월일_8자리}', desc: '연월일 8자리 (예: 20260823)' }, { key: '{월일}', desc: '월일 4자리 (예: 0823)' }, { key: '{순번_2자리}', desc: '발행 순번 2자리 (예: 01, 12)' }, { key: '{순번_3자리}', desc: '발행 순번 3자리 (예: 001, 012)' }, { key: '{요일}', desc: '요일 한글자 (예: 금)' }, { key: '{년주차}', desc: '연도 기준 몇 번째 주 (예: 26년_31주차)' }, { key: '{월주차}', desc: '해당 월 기준 몇 번째 주 (예: 4주차)' }, { key: '{분기}', desc: '분기 (예: 3분기)' }, { key: '{년월}', desc: '연-월 (예: 2026-08)' }, { key: '{요일_영문}', desc: '영문 요일 축약 (예: Fri)' }, { key: '{전체회차}', desc: '이번 발행 계획의 총 회차수 (예: 10)' }, { key: '{계절}', desc: '해당 월의 계절 (봄/여름/가을/겨울)' } ]; function $(id) { return document.getElementById(id); } function pad2(n) { return n < 10 ? '0' + n : '' + n; } function fmtDate(d) { return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()); } function getYearWeek(d) { var jan1 = new Date(d.getFullYear(), 0, 1); var dayOfYear = Math.floor((new Date(d.getFullYear(), d.getMonth(), d.getDate()) - jan1) / 86400000) + 1; return Math.ceil((dayOfYear + jan1.getDay()) / 7); } function getMonthWeek(d) { var firstDay = new Date(d.getFullYear(), d.getMonth(), 1); return Math.ceil((d.getDate() + firstDay.getDay()) / 7); } function getQuarter(d) { return Math.floor(d.getMonth() / 3) + 1; } function buildTitle(tpl, d, seq, total) { var s = tpl; var y4 = d.getFullYear(); var y2 = y4 % 100; var mo = d.getMonth() + 1; var day = d.getDate(); var wd = d.getDay(); var repl = [ ['{년_4자리}', '' + y4], ['{년_2자리}', pad2(y2)], ['{월_2자리}', pad2(mo)], ['{월_1자리}', '' + mo], ['{일}', '' + day], ['{년월일_6자리}', pad2(y2) + pad2(mo) + pad2(day)], ['{년월일_8자리}', '' + y4 + pad2(mo) + pad2(day)], ['{월일}', pad2(mo) + pad2(day)], ['{순번_2자리}', pad2(seq)], ['{순번_3자리}', (seq < 10 ? '00' : seq < 100 ? '0' : '') + seq], ['{요일}', WD_KR[wd]], ['{요일_영문}', WD_EN[wd]], ['{년주차}', pad2(y2) + '년_' + getYearWeek(d) + '주차'], ['{월주차}', getMonthWeek(d) + '주차'], ['{분기}', getQuarter(d) + '분기'], ['{년월}', y4 + '-' + pad2(mo)], ['{전체회차}', '' + total], ['{계절}', SEASON[mo - 1]] ]; for (var i = 0; i < repl.length; i++) { s = s.split(repl[i][0]).join(repl[i][1]); } return s; } function snapshot() { return JSON.stringify({ titletpl: state.titletpl, rows: state.rows }); } function pushHistory() { history.push(snapshot()); if (history.length > HISTORY_MAX) history.shift(); future = []; updateUndoRedoBtns(); } function applySnapshot(snapStr) { var snap = JSON.parse(snapStr); state.titletpl = snap.titletpl; state.rows = snap.rows; $('pgc-titletpl').value = state.titletpl; renderTable(); scheduleSave(); } function doUndo() { if (history.length === 0) return; future.push(snapshot()); applySnapshot(history.pop()); updateUndoRedoBtns(); } function doRedo() { if (future.length === 0) return; history.push(snapshot()); applySnapshot(future.pop()); updateUndoRedoBtns(); } function updateUndoRedoBtns() { $('pgc-btn-undo').disabled = history.length === 0; $('pgc-btn-redo').disabled = future.length === 0; } function calcDates() { var start = $('pgc-startdate').value; if (!start) { showToast('시작일을 선택해주세요.'); return; } var count = parseInt($('pgc-count').value, 10) || 1; var freq = $('pgc-freq').value; var dates = []; var cur = new Date(start + 'T00:00:00'); if (freq === 'daily') { for (var i = 0; i < count; i++) dates.push(new Date(cur.getTime() + i * 86400000)); } else if (freq === 'weekly') { var wds = state.weekdays.slice().sort(); if (wds.length === 0) { showToast('요일을 1개 이상 선택해주세요.'); return; } var d = new Date(cur); var guard = 0; while (dates.length < count && guard < count * 20) { if (wds.indexOf(d.getDay()) !== -1 && d >= cur) dates.push(new Date(d)); d = new Date(d.getTime() + 86400000); guard++; } } else if (freq === 'monthly') { var md = parseInt($('pgc-monthday').value, 10) || 1; var y = cur.getFullYear(), m = cur.getMonth(); if (cur.getDate() > md) m++; for (var j = 0; j < count; j++) dates.push(new Date(y, m + j, md)); } else if (freq === 'ndays') { var nd2 = parseInt($('pgc-ndays').value, 10) || 1; for (var k = 0; k < count; k++) dates.push(new Date(cur.getTime() + k * nd2 * 86400000)); } pushHistory(); var newRows = []; for (var idx = 0; idx < dates.length; idx++) { var seq = idx + 1; var existing = state.rows[idx]; newRows.push({ seq: seq, date: fmtDate(dates[idx]), title: existing ? existing.title : '', memo: existing ? existing.memo : '', tags: existing ? existing.tags : '' }); } state.rows = newRows; state.freq = freq; state.startdate = start; state.count = count; state.monthday = parseInt($('pgc-monthday').value, 10) || 1; state.ndays = parseInt($('pgc-ndays').value, 10) || 1; renderTable(); scheduleSave(); showToast(count + '개 회차의 발행일이 계산되었습니다.'); } function applyTitleTemplate() { var tpl = $('pgc-titletpl').value; if (!tpl) { showToast('제목틀을 입력해주세요.'); return; } if (state.rows.length === 0) { showToast('먼저 발행일을 계산해주세요.'); return; } pushHistory(); state.titletpl = tpl; var total = state.rows.length; for (var i = 0; i < state.rows.length; i++) { var d = new Date(state.rows[i].date + 'T00:00:00'); state.rows[i].title = buildTitle(tpl, d, state.rows[i].seq, total); } renderTable(); scheduleSave(); showToast('제목틀이 전체 회차에 적용되었습니다.'); } function autoGrow(el) { el.style.height = 'auto'; var maxH = 58; el.style.height = Math.min(el.scrollHeight, maxH) + 'px'; } function renderTable() { var tbody = $('pgc-tbody'); tbody.innerHTML = ''; if (state.rows.length === 0) { $('pgc-status').textContent = '회차가 없습니다. 위에서 발행일을 계산해주세요.'; return; } $('pgc-status').textContent = '총 ' + state.rows.length + '회차'; for (var i = 0; i < state.rows.length; i++) { (function (row, index) { var tr = document.createElement('tr'); var tdSeq = document.createElement('td'); tdSeq.className = 'pgc-col-seq'; tdSeq.textContent = row.seq; tr.appendChild(tdSeq); var tdDate = document.createElement('td'); tdDate.className = 'pgc-col-date'; tdDate.textContent = row.date; tr.appendChild(tdDate); tr.appendChild(makeGrowCell(row, index, 'title', true)); var tdMemo = document.createElement('td'); var taMemo = document.createElement('textarea'); taMemo.className = 'pgc-memo'; taMemo.rows = 2; taMemo.value = row.memo; addFieldListener(taMemo, index, 'memo'); tdMemo.appendChild(taMemo); tr.appendChild(tdMemo); tr.appendChild(makeGrowCell(row, index, 'tags', true)); tbody.appendChild(tr); })(state.rows[i], i); } } function makeGrowCell(row, index, field, withCopy) { var td = document.createElement('td'); var wrap = document.createElement('div'); wrap.className = 'pgc-cell-flex'; var ta = document.createElement('textarea'); ta.rows = 1; ta.value = row[field]; if (field === 'tags') ta.placeholder = '태그1, 태그2'; addFieldListener(ta, index, field); ta.addEventListener('input', function () { autoGrow(ta); }, false); wrap.appendChild(ta); if (withCopy) { var btn = document.createElement('button'); btn.type = 'button'; btn.className = 'pgc-copybtn'; btn.textContent = '복사'; bindTap(btn, function () { var text = ta.value || ''; if (!text) { showToast('복사할 내용이 없습니다.'); return; } copyPlainText(text, function () { showToast('복사했습니다.'); }, function () { showToast('복사에 실패했습니다.'); }); }); wrap.appendChild(btn); } td.appendChild(wrap); setTimeout(function () { autoGrow(ta); }, 0); return td; } function addFieldListener(el, index, field) { var beforeVal = null; el.addEventListener('focus', function () { beforeVal = el.value; }, false); el.addEventListener('blur', function () { if (beforeVal !== null && beforeVal !== el.value) pushHistory(); }, false); el.addEventListener('input', function () { state.rows[index][field] = el.value; scheduleSave(); }, false); } function scheduleSave() { $('pgc-status').textContent = '저장 중...'; if (saveTimer) clearTimeout(saveTimer); saveTimer = setTimeout(function () { try { localStorage.setItem(STORE_KEY, JSON.stringify(state)); $('pgc-status').textContent = '총 ' + state.rows.length + '회차 · 자동 저장됨'; } catch (e) { $('pgc-status').textContent = '저장 실패 (저장공간 확인 필요)'; } }, 4000); } function loadState() { try { var raw = localStorage.getItem(STORE_KEY); if (!raw) return; var loaded = JSON.parse(raw); if (loaded && typeof loaded === 'object') state = loaded; } catch (e) {} } function restoreFormFromState() { if (state.freq) $('pgc-freq').value = state.freq; if (state.startdate) $('pgc-startdate').value = state.startdate; if (state.count) $('pgc-count').value = state.count; if (state.monthday) $('pgc-monthday').value = state.monthday; if (state.ndays) $('pgc-ndays').value = state.ndays; if (state.titletpl) $('pgc-titletpl').value = state.titletpl; if (state.weekdays && state.weekdays.length) { var items = $('pgc-weekday-wrap').children; for (var i = 0; i < items.length; i++) { var d = parseInt(items[i].getAttribute('data-d'), 10); items[i].className = (state.weekdays.indexOf(d) !== -1) ? 'pgc-weekday pgc-active' : 'pgc-weekday'; } } toggleFreqFields(); renderTable(); } function toggleFreqFields() { var freq = $('pgc-freq').value; $('pgc-weekly-wrap').style.display = (freq === 'weekly') ? 'flex' : 'none'; $('pgc-monthly-wrap').style.display = (freq === 'monthly') ? 'flex' : 'none'; $('pgc-ndays-wrap').style.display = (freq === 'ndays') ? 'flex' : 'none'; } function showToast(msg) { var t = document.createElement('div'); t.className = 'pgc-toast'; t.textContent = msg; document.body.appendChild(t); setTimeout(function () { t.className = 'pgc-toast pgc-show'; }, 10); setTimeout(function () { t.className = 'pgc-toast'; setTimeout(function () { if (t.parentNode) t.parentNode.removeChild(t); }, 300); }, 2200); } function bindTap(el, handler) { el.addEventListener('touchend', function (e) { _touching = true; e.preventDefault(); handler(e); setTimeout(function () { _touching = false; }, 400); }, false); el.addEventListener('click', function (e) { if (_touching) return; handler(e); }, false); } function buildTokenButtons() { var wrap = $('pgc-token-row'); for (var i = 0; i < TOKENS.length; i++) { (function (tok) { var btn = document.createElement('button'); btn.type = 'button'; btn.className = 'pgc-btn-token'; btn.textContent = tok.key; var tip = document.createElement('span'); tip.className = 'pgc-tooltip'; tip.textContent = tok.desc; btn.appendChild(tip); bindTap(btn, function () { var inp = $('pgc-titletpl'); var start = inp.selectionStart != null ? inp.selectionStart : inp.value.length; var end = inp.selectionEnd != null ? inp.selectionEnd : inp.value.length; inp.value = inp.value.slice(0, start) + tok.key + inp.value.slice(end); inp.focus(); tip.className = 'pgc-tooltip pgc-tt-show'; setTimeout(function () { tip.className = 'pgc-tooltip'; }, 1300); }); wrap.appendChild(btn); })(TOKENS[i]); } } function exportXlsx() { if (state.rows.length === 0) { showToast('먼저 발행일을 계산해주세요.'); return; } if (typeof XLSX === 'undefined') { showToast('엑셀 라이브러리 로딩에 실패했습니다. 다시 시도해주세요.'); return; } var aoa = [['#', '발행일', '제목', '주요내용', '태그']]; for (var i = 0; i < state.rows.length; i++) { var r = state.rows[i]; aoa.push([r.seq, r.date, r.title, r.memo, r.tags]); } var ws = XLSX.utils.aoa_to_sheet(aoa); ws['!cols'] = [{ wch: 5 }, { wch: 12 }, { wch: 30 }, { wch: 40 }, { wch: 20 }]; var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, '발행계획'); var fname = '정기발행물기획_' + (state.startdate || '') + '.xlsx'; try { XLSX.writeFile(wb, fname); showToast('엑셀 파일로 저장했습니다.'); } catch (e) { showToast('엑셀 저장에 실패했습니다.'); } } function copyForExcel() { if (state.rows.length === 0) { showToast('먼저 발행일을 계산해주세요.'); return; } var lines = ['#\t발행일\t제목\t주요내용\t태그']; for (var i = 0; i < state.rows.length; i++) { var r = state.rows[i]; var memo = (r.memo || '').split('\n').join(' '); lines.push(r.seq + '\t' + r.date + '\t' + (r.title || '') + '\t' + memo + '\t' + (r.tags || '')); } copyPlainText(lines.join('\n'), function () { showToast('복사했습니다. 엑셀 셀에 붙여넣기(Ctrl/Cmd+V) 하세요.'); }, function () { showToast('복사에 실패했습니다. 직접 선택 후 복사해주세요.'); }); } function copyPlainText(text, done, fail) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(done, function () { legacyCopy(text) ? done() : fail(); }); } else { legacyCopy(text) ? done() : fail(); } } function legacyCopy(text) { try { var ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.focus(); ta.select(); var ok = document.execCommand('copy'); document.body.removeChild(ta); return ok; } catch (e) { return false; } } // ---- URL 공유 팝업 ---- function buildShareUrl() { var payload = JSON.stringify(state); var compressed = (typeof LZString !== 'undefined') ? LZString.compressToEncodedURIComponent(payload) : encodeURIComponent(payload); var base = location.origin + location.pathname; return base + '?pgcd=' + compressed; } function openSharePopup() { var url = buildShareUrl(); $('pgc-share-url').value = url; $('pgc-tiny-url').value = ''; $('pgc-popup-backdrop').style.display = 'block'; document.body.style.overflow = 'hidden'; document.body.classList.add('pgc-popup-open'); if (location.hash !== '#pgc-share') { history.pushState({ pgcPopup: true }, '', location.pathname + location.search + '#pgc-share'); } } function closeSharePopup() { $('pgc-popup-backdrop').style.display = 'none'; document.body.style.overflow = ''; document.body.classList.remove('pgc-popup-open'); if (location.hash === '#pgc-share') history.back(); } window.addEventListener('hashchange', function () { if (location.hash !== '#pgc-share' && $('pgc-popup-backdrop').style.display === 'block') { $('pgc-popup-backdrop').style.display = 'none'; document.body.style.overflow = ''; document.body.classList.remove('pgc-popup-open'); } }, false); function makeTinyUrl() { var longUrl = $('pgc-share-url').value; if (!longUrl) return; showToast('짧은 링크 생성 중...'); fetch('https://tinyurl.com/api-create.php?url=' + encodeURIComponent(longUrl)) .then(function (r) { return r.text(); }) .then(function (t) { if (t && t.indexOf('http') === 0) { $('pgc-tiny-url').value = t; showToast('짧은 링크가 생성되었습니다.'); } else { showToast('짧은 링크 생성에 실패했습니다. 전체 링크를 이용해주세요.'); } }) .catch(function () { showToast('짧은 링크 생성에 실패했습니다 (네트워크 제한일 수 있음). 전체 링크를 이용해주세요.'); }); } function loadSharedFromUrl() { var m = location.search.match(/[?&]pgcd=([^&]+)/); if (!m) return; try { var raw = (typeof LZString !== 'undefined') ? LZString.decompressFromEncodedURIComponent(m[1]) : decodeURIComponent(m[1]); var shared = JSON.parse(raw); if (shared && typeof shared === 'object' && window.confirm('공유된 발행 계획을 불러올까요? 현재 이 기기에 저장된 내용을 덮어씁니다.')) { pushHistory(); state = shared; restoreFormFromState(); scheduleSave(); showToast('공유된 데이터를 불러왔습니다.'); } } catch (e) {} } function init() { loadState(); buildTokenButtons(); if (!$('pgc-startdate').value && !state.startdate) { $('pgc-startdate').value = fmtDate(new Date()); } restoreFormFromState(); updateUndoRedoBtns(); loadSharedFromUrl(); $('pgc-freq').addEventListener('change', toggleFreqFields, false); var wdItems = $('pgc-weekday-wrap').children; for (var i = 0; i < wdItems.length; i++) { (function (el) { bindTap(el, function () { var d = parseInt(el.getAttribute('data-d'), 10); var idx = state.weekdays.indexOf(d); if (idx === -1) { el.className = 'pgc-weekday pgc-active'; state.weekdays.push(d); } else { if (state.weekdays.length === 1) { showToast('요일을 1개 이상 선택해야 합니다.'); return; } el.className = 'pgc-weekday'; state.weekdays.splice(idx, 1); } }); })(wdItems[i]); } bindTap($('pgc-btn-calc'), calcDates); bindTap($('pgc-btn-apply-title'), applyTitleTemplate); bindTap($('pgc-btn-undo'), doUndo); bindTap($('pgc-btn-redo'), doRedo); bindTap($('pgc-btn-xlsx'), exportXlsx); bindTap($('pgc-btn-copy'), copyForExcel); bindTap($('pgc-btn-save-top'), exportXlsx); bindTap($('pgc-btn-share'), openSharePopup); bindTap($('pgc-popup-close'), closeSharePopup); bindTap($('pgc-popup-backdrop'), function (e) { if (e.target && e.target.id === 'pgc-popup-backdrop') closeSharePopup(); }); bindTap($('pgc-btn-copy-url'), function () { copyPlainText($('pgc-share-url').value, function () { showToast('링크를 복사했습니다.'); }, function () { showToast('복사에 실패했습니다.'); }); }); bindTap($('pgc-btn-make-tiny'), makeTinyUrl); bindTap($('pgc-btn-copy-tiny'), function () { var v = $('pgc-tiny-url').value; if (!v) { showToast('먼저 짧은 링크를 생성해주세요.'); return; } copyPlainText(v, function () { showToast('짧은 링크를 복사했습니다.'); }, function () { showToast('복사에 실패했습니다.'); }); }); bindTap($('pgc-btn-fav'), function () { var url = buildShareUrl(); history.replaceState(null, '', url); showToast('주소창에 현재 상태가 반영되었습니다. 지금 이 페이지를 즐겨찾기 해주세요.'); }); bindTap($('pgc-btn-reset'), function () { if (window.confirm('전체 데이터를 초기화할까요? 되돌릴 수 없습니다.')) { localStorage.removeItem(STORE_KEY); location.reload(); } }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init, false); } else { init(); } })(); </script> 모두의계산기 계산기 모두 웹앱 정기발행물기획계산기 최매슨생 https://0-1.kr/124 https://0-1.kr/124#entry124comment Sun, 23 Aug 2026 12:31:27 +0900 https://0-1.kr/123 <div id="grp-app" style="max-width:720px;margin:0 auto;padding:12px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Malgun Gothic',sans-serif;color:#1f2937;box-sizing:border-box;"> <style> #grp-app *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} #grp-app .grp-header-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px;} #grp-app .grp-title{font-size:22px;font-weight:800;color:#6d28d9;letter-spacing:-0.4px;line-height:1.25;} #grp-app .grp-subtitle{font-size:11.5px;color:#9ca3af;margin-bottom:12px;} #grp-app .grp-icon-group{display:flex;gap:6px;flex-shrink:0;} #grp-app .grp-icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid #c4b5fd;background:#fff;color:#7c3aed;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;touch-action:manipulation;} #grp-app .grp-icon-btn-primary{background:#7c3aed;color:#fff;border-color:#7c3aed;} #grp-app .grp-tabs{display:flex;gap:6px;margin-bottom:12px;touch-action:pan-y;} #grp-app .grp-tab-btn{flex:1;padding:12px 4px;font-size:15px;font-weight:600;border:none;border-radius:10px;background:#ede9fe;color:#7c3aed;cursor:pointer;} #grp-app .grp-tab-btn.grp-active{background:#7c3aed;color:#fff;} #grp-app .grp-panel{display:none;} #grp-app .grp-panel.grp-active{display:block;} #grp-app .grp-card{background:#faf9ff;border:1px solid #e9e5f7;border-radius:14px;padding:14px;margin-bottom:12px;} #grp-app .grp-row-label{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;margin-bottom:8px;color:#4c1d95;} #grp-app .grp-row-label-flex{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;} #grp-app .grp-info-btn{width:20px;height:20px;border-radius:50%;border:none;background:#c4b5fd;color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center;padding:0;cursor:pointer;flex-shrink:0;} #grp-app textarea{width:100%;font-size:16px;line-height:1.5;border:1px solid #ddd6f3;border-radius:10px;padding:10px;resize:vertical;-webkit-appearance:none;touch-action:pan-y;} #grp-app .grp-template{min-height:110px;} #grp-app .grp-paste{min-height:70px;margin-top:8px;} #grp-app .grp-btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;} #grp-app button.grp-btn{border:none;border-radius:9px;padding:11px 14px;font-size:14px;font-weight:600;cursor:pointer;touch-action:manipulation;} #grp-app .grp-btn-sm{padding:7px 10px;font-size:12px;} #grp-app .grp-btn-primary{background:#7c3aed;color:#fff;} #grp-app .grp-btn-soft{background:#ede9fe;color:#5b21b6;} #grp-app .grp-btn-outline{background:#fff;color:#7c3aed;border:1px solid #c4b5fd;} #grp-app .grp-btn-danger{background:#fee2e2;color:#b91c1c;} #grp-app table.grp-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px;display:block;overflow-x:auto;white-space:nowrap;} #grp-app table.grp-table th,#grp-app table.grp-table td{border:1px solid #e5e0f5;padding:6px 8px;} #grp-app table.grp-table th{background:#f2effc;color:#5b21b6;position:sticky;top:0;} #grp-app table.grp-table input{width:90px;font-size:13px;border:1px solid #ddd6f3;border-radius:6px;padding:5px 6px;} #grp-app .grp-var-th{cursor:pointer;border-bottom:1px dashed #7c3aed;touch-action:manipulation;} #grp-app .grp-selectall{display:flex;align-items:center;gap:6px;font-size:13px;color:#5b21b6;margin-bottom:8px;font-weight:600;} #grp-app .grp-preview-item{border:1px solid #e9e5f7;border-radius:10px;padding:10px;margin-bottom:8px;background:#fff;display:flex;gap:8px;align-items:flex-start;} #grp-app .grp-preview-check{margin-top:3px;flex-shrink:0;width:18px;height:18px;} #grp-app .grp-preview-body{flex:1;min-width:0;} #grp-app .grp-preview-name{font-weight:700;color:#6d28d9;font-size:13px;margin-bottom:4px;} #grp-app .grp-preview-text{font-size:14px;white-space:pre-wrap;line-height:1.5;margin-bottom:8px;} #grp-app .grp-preview-btns{display:flex;gap:6px;flex-wrap:wrap;} #grp-app .grp-preview-btns button{padding:7px 10px;font-size:12px;} #grp-app .grp-savebar{font-size:11px;color:#8b8398;text-align:center;margin:8px 0;min-height:14px;} #grp-app .grp-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));bottom:calc(24px + constant(safe-area-inset-bottom));transform:translateX(-50%);background:#312e81;color:#fff;padding:10px 18px;border-radius:20px;font-size:13px;z-index:2147483647;opacity:0;transition:opacity .25s;pointer-events:none;max-width:86%;text-align:center;} #grp-app .grp-toast.grp-show{opacity:1;} #grp-app .grp-modal-bg{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:2147483647;display:none;-webkit-overflow-scrolling:touch;} #grp-app .grp-modal-bg.grp-show{display:flex;align-items:center;justify-content:center;padding:16px;} #grp-app .grp-modal{background:#fff;border-radius:16px;padding:18px;max-width:480px;width:100%;max-height:80%;overflow-y:auto;} #grp-app .grp-modal h3{margin:0 0 10px;color:#5b21b6;font-size:16px;} #grp-app .grp-modal p,#grp-app .grp-modal li{font-size:13.5px;line-height:1.6;color:#374151;} #grp-app .grp-modal-close{margin-top:12px;width:100%;padding:11px;background:#7c3aed;color:#fff;border:none;border-radius:9px;font-size:14px;font-weight:600;} #grp-app .grp-tip-pop{position:fixed;z-index:2147483647;background:#312e81;color:#fff;font-size:12px;line-height:1.5;padding:9px 12px;border-radius:9px;max-width:240px;box-shadow:0 4px 14px rgba(0,0,0,.2);} #grp-app .grp-qr-box{text-align:center;margin-top:8px;} #grp-app .grp-hint{font-size:12px;color:#9ca3af;margin-top:6px;} </style> <div class="grp-header-top"> <div class="grp-title">단체문구생성계산기_V4_260810</div> <div class="grp-icon-group"> <button class="grp-icon-btn" id="grp-help" title="사용설명서"> </button> <button class="grp-icon-btn grp-icon-btn-primary" id="grp-share-all" title="공유"> </button> </div> </div> <div class="grp-subtitle">문자·이메일·보고서 등, 빠른 퇴근을 위함입니다.</div> <div class="grp-tabs"> <button class="grp-btn grp-tab-btn grp-active" data-tab="sms">문자</button> <button class="grp-btn grp-tab-btn" data-tab="email">이메일</button> <button class="grp-btn grp-tab-btn" data-tab="report">보고서</button> </div> <div id="grp-panels"></div> <div class="grp-savebar" id="grp-savebar">자동저장 대기중</div> <div class="grp-modal-bg" id="grp-help-modal"> <div class="grp-modal"> <h3>사용설명서 (V4)</h3> <p><b>1. 본문 템플릿 작성:</b> "✎ 자주쓰는 서식 선택"에서 미리 만들어둔 서식(문자·이메일 각 33개, 보고서 10개)을 골라 바로 채울 수 있고, "＋ 항목 추가" 버튼을 누르면 커서 위치에 {{항목1}}처럼 자동 삽입됩니다. {{이름}}은 항상 자동 지원됩니다.</p> <p><b>2. 삽입항목 데이터 입력:</b> 템플릿 바로 아래 표에서 이름·연락처·항목값을 직접 입력합니다. 표의 항목1, 항목2 같은 열 제목을 탭하면 이름을 바꿀 수 있고, 바꾼 이름은 본문 템플릿에도 그대로 반영됩니다. "엑셀 붙여넣기" 버튼을 누르면 엑셀에서 복사한 내용을 붙여넣는 칸이 나타납니다 (열 순서: 이름, 연락처, 항목1, 항목2...).</p> <p><b>3. 발송정보 분리:</b> 이름과 연락처는 발송 대상을 찾는 용도로만 쓰이며, 직접 {{이름}}을 본문에 넣지 않는 한 문자·메일 내용에는 포함되지 않습니다. 연락처(전화번호/이메일 주소)는 어떤 경우에도 본문 내용에 자동으로 들어가지 않습니다.</p> <p><b>4. 선택 발송:</b> 미리보기 우측의 "선택" 버튼을 누르면 각 항목 앞에 체크박스가 생깁니다. 원하는 사람만 선택한 뒤 "선택발송", 전체를 보내려면 "전체발송"을 누르세요. 여러 건을 보낼 때는 발송창이 순서대로 열리니 팝업 차단 알림이 뜨면 허용해주세요.</p> <p><b>5. 보고서 내보내기:</b> 보고서 탭은 txt로 내보내기(새창 텍스트), 인쇄/PDF로 저장, 워드(doc)로 내보내기를 지원합니다. 선택 모드에서 일부만 선택하면 선택된 사람만 내보내집니다.</p> <p><b>6. 저장/공유/되돌리기:</b> 입력값은 4초마다 이 기기에 자동저장됩니다. 상단의 아이콘을 누르면 문자·이메일·보고서 탭 전체 내용을 한 번에 압축된 링크·QR코드로 공유할 수 있고, 각 탭의 "공유링크" 버튼은 해당 탭만 따로 공유합니다. 실행취소(↩)·되살리기(↪)는 각 탭의 본문 템플릿 카드 안에 있습니다.</p> <p style="margin-top:10px;color:#9ca3af;">스타트업ex · cds1981@naver.com</p> <button class="grp-modal-close" id="grp-help-close">닫기</button> </div> </div> <div class="grp-modal-bg" id="grp-share-modal"> <div class="grp-modal"> <h3> 전체 내용 공유</h3> <p>지금까지 문자·이메일·보고서 탭에 입력한 내용이 모두 압축되어 하나의 링크로 만들어집니다. 이 링크를 열면 입력한 값이 그대로 복원됩니다.</p> <div class="grp-qr-box" data-role="qrbox-all"></div> <button class="grp-modal-close" id="grp-share-close">닫기</button> </div> </div> <div class="grp-toast" id="grp-toast"></div> </div> <script> (function(){ var __b64 = "CihmdW5jdGlvbigpewogICd1c2Ugc3RyaWN0JzsKCiAgdmFyIFNUT1JBR0VfS0VZID0gJ2dycC1yZXBvcnQtd3JpdGVyLXYwJzsKICB2YXIgX3RvdWNoaW5nID0gZmFsc2U7CgogIHZhciBUQUJfREVGUyA9IFsKICAgIHtrZXk6J3NtcycsIGxhYmVsOifrrLjsnpAnLCBoYXNDb250YWN0OnRydWUsIGNvbnRhY3RMYWJlbDon7KCE7ZmU67KI7Zi4Jywgc2VuZFR5cGU6J3Ntcyd9LAogICAge2tleTonZW1haWwnLCBsYWJlbDon7J2066mU7J28JywgaGFzQ29udGFjdDp0cnVlLCBjb250YWN0TGFiZWw6J+ydtOuplOydvOyjvOyGjCcsIHNlbmRUeXBlOidlbWFpbCd9LAogICAge2tleToncmVwb3J0JywgbGFiZWw6J+uztOqzoOyEnCcsIGhhc0NvbnRhY3Q6ZmFsc2UsIGNvbnRhY3RMYWJlbDonJywgc2VuZFR5cGU6J25vbmUnfQogIF07CgogIHZhciBURU1QTEFURV9MSUJSQVJZID0gewogICAgc21zOiBbCiAgICB7dDon66qo7KeRIOqzteqzoCcsIGI6J1vrqqjsp5HslYjrgrRdIHt77ZWt66qpMX19IOqzvOyglSDssLjqsIDsnpDrpbwg66qo7KeR7ZWp64uI64ukLiDsi6Dssq3quLDqsIQge3vtla3rqqkyfX3quYzsp4DsnbTri4gg6rSA7IusIOyeiOycvOyLoCDrtoTsnYAg7ISc65GY65+sIOyLoOyyre2VtOyjvOyEuOyalC4nfSwKICAgIHt0OifsoJHsiJgg7ZmV7J24JywgYjone3vsnbTrpoR9feuLmCwge3vtla3rqqkxfX0g7Iug7LKt7J20IOygleyDgeyggeycvOuhnCDsoJHsiJjrkJjsl4jsirXri4jri6QuIOqwkOyCrO2VqeuLiOuLpC4nfSwKICAgIHt0OifshJzrpZgg7ZWp6rKpIOyViOuCtCcsIGI6J3t77J2066aEfX3ri5gsIOy2le2VmO2VqeuLiOuLpCEge3vtla3rqqkxfX0g7ISc66WY7KCE7ZiV7JeQIO2Vqeqyqe2VmOyFqOyKteuLiOuLpC4g64uk7J2MIOygiOywqOuKlCDstpTtm4Qg7JWI64K065Oc66as6rKg7Iq164uI64ukLid9LAogICAge3Q6J+yEnOulmCDrtojtlanqsqkg7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwge3vtla3rqqkxfX0g7ISc66WY7KCE7ZiVIOqysOqzvCDsnbTrsojsl5DripQg7ZWo6ruY7ZWY7KeAIOuqu+2VmOqyjCDrkJjsl4jsirXri4jri6QuIOq0gOyLrCDqsIDsoLjso7zshZTshJwg6rCQ7IKs7ZWp64uI64ukLid9LAogICAge3Q6J+uwnO2RnCjrqbTsoJEpIOydvOyglSDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCB7e+2VreuqqTF9fSDrsJztkZwg7J287KCV7J2AIHt77ZWt66qpMn197J6F64uI64ukLiDsi5zqsIQg6rytIO2ZleyduCDrtoDtg4Hrk5zrpr3ri4jri6QuJ30sCiAgICB7dDon67Cc7ZGcIOyepeyGjCDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCB7e+2VreuqqTF9fSDrsJztkZwg7J6l7IaM64qUIHt77ZWt66qpMn197J6F64uI64ukLiDsgqzsoITsl5Ag7JyE7LmYIO2ZleyduCDrtoDtg4Hrk5zrpr3ri4jri6QuJ30sCiAgICB7dDon67Cc7ZGcIOumrOuniOyduOuNlCgx7J28IOyghCknLCBiOid7e+ydtOumhH1964uYLCDrgrTsnbzsnYAge3vtla3rqqkxfX0g67Cc7ZGc7J287J6F64uI64ukLiDspIDruYTrrLwg7J6K7KeAIOunkOqzoCDssZnqsqjso7zshLjsmpQuJ30sCiAgICB7dDon67Cc7ZGcIOumrOuniOyduOuNlCjri7nsnbwpJywgYjone3vsnbTrpoR9feuLmCwg7Jik64qYIHt77ZWt66qpMX19IOuwnO2RnOqwgCB7e+2VreuqqTJ9feyXkCDsp4TtlonrkKnri4jri6QuIOyXrOycoOyeiOqyjCDrj4TssKkg67aA7YOB65Oc66a964uI64ukLid9LAogICAge3Q6J+y1nOyihSDtlanqsqkg7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwg7LaV7ZWY65Oc66a964uI64ukISB7e+2VreuqqTF9fSDstZzsooUg7ZWp6rKp7ZWY7IWo7Iq164uI64ukLiDsnpDshLjtlZwg7JWI64K064qUIOqzpyDrsJzshqHrk5zrpr3ri4jri6QuJ30sCiAgICB7dDon7LWc7KKFIOu2iO2VqeqyqSDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCB7e+2VreuqqTF9fSDstZzsooUg6rKw6rO8IOyVhOyJveqyjOuPhCDsnbTrsojsl5DripQg7ZWo6ruY7ZWY7KeAIOuqu+2VmOqyjCDrkJjsl4jsirXri4jri6QuIOydkeybkO2VmOqyoOyKteuLiOuLpC4nfSwKICAgIHt0Oifrk7HroZ3ruYQg7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwge3vtla3rqqkxfX0g65Ox66Gd67mE64qUIHt77ZWt66qpMn197J6F64uI64ukLiDquLDtlZwg64K0IOyeheq4iCDrtoDtg4Hrk5zrpr3ri4jri6QuJ30sCiAgICB7dDon7J6F6riIIO2ZleyduCcsIGI6J3t77J2066aEfX3ri5gsIHt77ZWt66qpMX19IOyeheq4iOydtCDtmZXsnbjrkJjsl4jsirXri4jri6QuIOqwkOyCrO2VqeuLiOuLpC4nfSwKICAgIHt0OifsmKTrpqzsl5TthYzsnbTshZgg7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwge3vtla3rqqkxfX0g7Jik66as7JeU7YWM7J207IWY7J2AIHt77ZWt66qpMn197JeQIOynhO2WieuQqeuLiOuLpC4g6rytIOywuOyEnSDrtoDtg4Hrk5zrpr3ri4jri6QuJ30sCiAgICB7dDon6rCV7J2Y7J6Q66OMIOuwnOyGoScsIGI6J3t77J2066aEfX3ri5gsIHt77ZWt66qpMX19IOqwleydmOyekOujjOulvCDrs7TrgrTrk5zrpr3ri4jri6QuIO2ZleyduCDrtoDtg4Hrk5zrpr3ri4jri6QuJ30sCiAgICB7dDon6rO87KCcIOygnOy2nCDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCB7e+2VreuqqTF9fSDqs7zsoJwg7KCc7LacIOq4sO2VnOydgCB7e+2VreuqqTJ9feq5jOyngOyeheuLiOuLpC4nfSwKICAgIHt0Oifqs7zsoJwg66eI6rCQIOumrOuniOyduOuNlCcsIGI6J3t77J2066aEfX3ri5gsIHt77ZWt66qpMX19IOqzvOygnCDrp4jqsJDsnbQg7Ja866eIIOuCqOyngCDslYrslZjsirXri4jri6QuIOyeiuyngCDrp5Dqs6Ag7KCc7Lac7ZW07KO87IS47JqULid9LAogICAge3Q6J+yImOujjCDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCB7e+2VreuqqTF9fSDqs7zsoJUg7IiY66OM66W8IOy2le2VmOuTnOumveuLiOuLpCEnfSwKICAgIHt0OifsiJjro4zspp0g67Cc6riJIOyViOuCtCcsIGI6J3t77J2066aEfX3ri5gsIHt77ZWt66qpMX19IOyImOujjOymneydtCDrsJzquInrkJjsl4jsirXri4jri6QuIOyImOuguSDrsKnrspXsnYAge3vtla3rqqkyfX3snoXri4jri6QuJ30sCiAgICB7dDon66eM7KGx64+EIOyhsOyCrCDsmpTssq0nLCBiOid7e+ydtOumhH1964uYLCB7e+2VreuqqTF9fSDrp4zsobHrj4Qg7KGw7IKs7JeQIOywuOyXrO2VtOyjvOyLnOuptCDtgbAg64+E7JuA7J20IOuQqeuLiOuLpC4g6rCQ7IKs7ZWp64uI64ukLid9LAogICAge3Q6J+uLpOydjCDquLDsiJgg66qo7KeRIOyViOuCtCcsIGI6J3t77J2066aEfX3ri5gsIHt77ZWt66qpMX19IOuLpOydjCDquLDsiJjrpbwg66qo7KeR7ZWp64uI64ukLiDqtIDsi6wg7J6I7Jy87Iuc66m0IOyLoOyyre2VtOyjvOyEuOyalC4nfSwKICAgIHt0OifsobDquLDrp4jqsJAg7JWI64K0JywgYjone3vtla3rqqkxfX0g7Iug7LKtIOyduOybkOydtCDrqrDroKQg7KGw6riw66eI6rCQ65CgIOyImCDsnojsirXri4jri6QuIOyEnOuRmOufrCDsi6Dssq3tlbTso7zshLjsmpQuJ30sCiAgICB7dDon7KCV7JuQ66eI6rCQIOyehOuwlSDslYjrgrQnLCBiOid7e+2VreuqqTF9fSDsoJXsm5DsnbQg7Ja866eIIOuCqOyngCDslYrslZjsirXri4jri6QuIOuniOqwkCDsoIQg7ISc65GY65+s7KO87IS47JqULid9LAogICAge3Q6J+ydvOyglSDrs4Dqsr0g7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwge3vtla3rqqkxfX0g7J287KCV7J20IHt77ZWt66qpMn1966GcIOuzgOqyveuQmOyXiOyKteuLiOuLpC4g7LC46rOgIOu2gO2DgeuTnOumveuLiOuLpC4nfSwKICAgIHt0OifsnqXshowg67OA6rK9IOyViOuCtCcsIGI6J3t77J2066aEfX3ri5gsIHt77ZWt66qpMX19IOyepeyGjOqwgCB7e+2VreuqqTJ9feuhnCDrs4Dqsr3rkJjsl4jsirXri4jri6QuJ30sCiAgICB7dDon7LC47ISdIO2ZleyduCDsmpTssq0nLCBiOid7e+ydtOumhH1964uYLCB7e+2VreuqqTF9fSDssLjshJ0g7Jes67aA66W8IO2ajOyLoCDrtoDtg4Hrk5zrpr3ri4jri6QuJ30sCiAgICB7dDon67aI7LC4IOyLnCDsl7Drnb0g7JqU7LKtJywgYjone3vsnbTrpoR9feuLmCwg67aA65Od7J207ZWY6rKMIOu2iOywuO2VmOyLnOuKlCDqsr3smrAg66+466asIOyXsOudvSDrtoDtg4Hrk5zrpr3ri4jri6QuJ30sCiAgICB7dDon7KeA6rCBIOyViOuCtCcsIGI6J3t77J2066aEfX3ri5gsIHt77ZWt66qpMX19IOygleyLnCDsp4Ttlokg7JiI7KCV7J207Jik64uIIOuKpuyngCDslYrqsowg64+E7LCpIOu2gO2DgeuTnOumveuLiOuLpC4nfSwKICAgIHt0OifspIDruYTrrLwg7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwge3vtla3rqqkxfX0g7KSA67mE66y87J2AIHt77ZWt66qpMn197J6F64uI64ukLiDssLjqs6DtlbTso7zshLjsmpQuJ30sCiAgICB7dDon7ZaJ7IKsIOyiheujjCDqsJDsgqwg7J247IKsJywgYjone3vsnbTrpoR9feuLmCwge3vtla3rqqkxfX3sl5Ag7LC47Jes7ZW07KO87IWU7IScIOqwkOyCrO2VqeuLiOuLpC4g64uk7J2M7JeQ64+EIO2VqOq7mO2VtOyalCEnfSwKICAgIHt0OifrqoXsoIgv7Jew66eQIOyduOyCrCcsIGI6J3t77J2066aEfX3ri5gsIOuKmCDtlajqu5jtlbTso7zshZTshJwg6rCQ7IKs7ZWp64uI64ukLiDrlLDrnLvtlZwg66qF7KCIIOuztOuCtOyEuOyalC4nfSwKICAgIHt0OifrjIDquLDsnpAg7JWI64K0KOygleykkSknLCBiOid7e+ydtOumhH1964uYLCB7e+2VreuqqTF9feyXkCDsi6Dssq3tlbTso7zshZTshJwg7KeE7Ius7Jy866GcIOqwkOyCrOuTnOumveuLiOuLpC4g7JWE7Im96rKM64+EIOygleybkOydtCDqsIDrk50g7LCoIOyasOyEoCDrjIDquLDsnpAg66qF64uo7JeQIOyViOuCtOuTnOumrOupsCwg7J6Q66as6rCAIOuCmOuKlCDrjIDroZwg6rCA7J6lIOuovOyggCDsl7Drnb3rk5zrpqzqsqDsirXri4jri6QuJ30sCiAgICB7dDon7ZaJ7IKsIOy3qOyGjCDslYjrgrQo7KCV7KSRKScsIGI6J3t77J2066aEfX3ri5gsIOu2gOuTneydtO2VnCDsgqzsoJXsnLzroZwge3vtla3rqqkxfX3snbQo6rCAKSDst6jshozrkJjslrQg7JWI64K065Oc66a964uI64ukLiDquLDrjIDtlbTso7zshajsnYQg7YWQ642wIOu2iO2OuOydhCDrk5zroKQg7KeE7Ius7Jy866GcIOyjhOyGoe2VmOupsCwg64uk7J2MIOq4sO2ajOyXkCDrjZQg7KKL7J2AIOuqqOyKteycvOuhnCDqvK0g64uk7IucIOu1meqyoOyKteuLiOuLpC4nfSwKICAgIHt0Oiftj5DqsJUg7JWI64K0KOygleykkSknLCBiOid7e+ydtOumhH1964uYLCDsi6Dssq0g7J247JuQ7J20IOyggeyWtCDsnbTrsogge3vtla3rqqkxfX0g6rO87KCV7J2AIOyVhOyJveqyjCDtj5DqsJXrkJjsl4jsirXri4jri6QuIOyGjOykke2VnCDsi5zqsIQg64K07Ja0IOyLoOyyre2VtOyjvOyFlOyEnCDqsJDsgqzrk5zrpqzrqbAsIOuLpOydjCDquLDsiJjsl5DripQg6rytIO2VqOq7mO2VoCDsiJgg7J6I6riw66W8IOuwlOuejeuLiOuLpC4nfQogICAgXSwKICAgIGVtYWlsOiBbCiAgICB7dDon66qo7KeRIOqzteqzoCDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG57e+2VreuqqTF9fSDqs7zsoJUg7LC46rCA7J6Q66W8IOuqqOynke2VqeuLiOuLpC5cbuyLoOyyreq4sOqwhDoge3vtla3rqqkyfX1cbuq0gOyLrCDsnojsnLzsi6Ag67aE65Ok7J2YIOunjuydgCDsi6Dssq0g67aA7YOB65Oc66a964uI64ukLid9LAogICAge3Q6J+ygkeyImCDtmZXsnbgg66mU7J28JywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxue3vtla3rqqkxfX0g7Iug7LKt7J20IOygleyDgeyggeycvOuhnCDsoJHsiJjrkJjsl4jsnYzsnYQg7JWI64K065Oc66a964uI64ukLlxu6rCQ7IKs7ZWp64uI64ukLid9LAogICAge3Q6J+yEnOulmCDtlanqsqkg7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxue3vtla3rqqkxfX0g7ISc66WY7KCE7ZiVIO2VqeqyqeydhCDsp4Tsi6zsnLzroZwg7LaV7ZWY65Oc66a964uI64ukLlxu64uk7J2MIOygiOywqOuKlCB7e+2VreuqqTJ9fSDsmIjsoJXsnbTrqbAsIOyekOyEuO2VnCDsgqztla3snYAg7LaU7ZuEIOuzhOuPhCDslYjrgrTrk5zrpqzqsqDsirXri4jri6QuJ30sCiAgICB7dDon7ISc66WYIOu2iO2VqeqyqSDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG57e+2VreuqqTF9fSDshJzrpZjsoITtmJUg6rKw6rO8LCDsnbTrsojsl5DripQg7ZWo6ruY7ZWY7KeAIOuqu+2VmOqyjCDrkJjsl4jsnYzsnYQg7JWI64K065Oc66a964uI64ukLlxu6rSA7IusIOqwgOyguOyjvOyFlOyEnCDsp4Tsi6zsnLzroZwg6rCQ7IKs65Oc66a964uI64ukLid9LAogICAge3Q6J+uwnO2RnCjrqbTsoJEpIOydvOyglSDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG57e+2VreuqqTF9fSDrsJztkZwg7J287KCV7J2EIOyViOuCtOuTnOumveuLiOuLpC5cbuydvOyLnDoge3vtla3rqqkyfX1cbuyepeyGjDoge3vtla3rqqkzfX0nfSwKICAgIHt0OifrsJztkZwg7J6l7IaMIOuwjyDsnKDsnZjsgqztla0g7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxue3vtla3rqqkxfX0g67Cc7ZGcIOyepeyGjOuKlCB7e+2VreuqqTJ9feyeheuLiOuLpC5cbuyCrOyghOyXkCDsnITsuZjrpbwg7ZmV7J247ZW07KO87Iuc6rOgLCDsl6zsnKDsnojqsowg64+E7LCpIOu2gO2DgeuTnOumveuLiOuLpC4nfSwKICAgIHt0OifrsJztkZwg66as66eI7J24642UJywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxue3vtla3rqqkxfX0g67Cc7ZGc6rCAIOyWvOuniCDrgqjsp4Ag7JWK7JWY7Iq164uI64ukLlxu7J287IucOiB7e+2VreuqqTJ9fVxu7KSA67mE66y86rO8IOyLnOqwhOydhCDri6Tsi5wg7ZWc67KIIO2ZleyduCDrtoDtg4Hrk5zrpr3ri4jri6QuJ30sCiAgICB7dDon7LWc7KKFIO2VqeqyqSDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG57e+2VreuqqTF9fSDstZzsooUg7ZWp6rKp7J2EIOynhOyLrOycvOuhnCDstpXtlZjrk5zrpr3ri4jri6QhXG7snbTtm4Qg7KCI7LCo64qUIHt77ZWt66qpMn19IOyViOuCtOuTnOumtCDsmIjsoJXsnoXri4jri6QuJ30sCiAgICB7dDon7LWc7KKFIOu2iO2VqeqyqSDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG57e+2VreuqqTF9fSDstZzsooUg6rKw6rO8LCDslYTsib3qsozrj4Qg7J2067KI7JeQ64qUIO2VqOq7mO2VmOyngCDrqrvtlZjqsowg65CY7JeI7Iq164uI64ukLlxu6reA7ZWcIOyLnOqwhCDrgrTslrTso7zshZTshJwg7KeE7Ius7Jy866GcIOqwkOyCrOuTnOumveuLiOuLpC4nfSwKICAgIHt0Oifrk7HroZ3ruYQg7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxue3vtla3rqqkxfX0g65Ox66Gd67mEIOyViOuCtOuTnOumveuLiOuLpC5cbuq4iOyVoToge3vtla3rqqkyfX1cbuyeheq4iCDquLDtlZw6IHt77ZWt66qpM319J30sCiAgICB7dDon7J6F6riIIO2ZleyduCDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG57e+2VreuqqTF9fSDsnoXquIjsnbQg7KCV7IOB7KCB7Jy866GcIO2ZleyduOuQmOyXiOyKteuLiOuLpC5cbuqwkOyCrO2VqeuLiOuLpC4nfSwKICAgIHt0OifsmKTrpqzsl5TthYzsnbTshZgg7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxue3vtla3rqqkxfX0g7Jik66as7JeU7YWM7J207IWYIOydvOygleydhCDslYjrgrTrk5zrpr3ri4jri6QuXG7snbzsi5w6IHt77ZWt66qpMn19XG7snqXshow6IHt77ZWt66qpM319J30sCiAgICB7dDon6rCV7J2Y7J6Q66OMIOuwnOyGoScsIGI6J3t77J2066aEfX3ri5gsIOyViOuFle2VmOyEuOyalC5cbnt77ZWt66qpMX19IOqwleydmOyekOujjOulvCDssqjrtoDsmYAg6rCZ7J20IOuztOuCtOuTnOumveuLiOuLpC5cbu2ZleyduCDrtoDtg4Hrk5zrpr3ri4jri6QuJ30sCiAgICB7dDon6rO87KCcIOygnOy2nCDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG57e+2VreuqqTF9fSDqs7zsoJwg7KCc7LacIOq4sO2VnOydgCB7e+2VreuqqTJ9feq5jOyngOyeheuLiOuLpC5cbuygnOy2nCDrsKnrspU6IHt77ZWt66qpM319J30sCiAgICB7dDon6rO87KCcIOuniOqwkCDrpqzrp4jsnbjrjZQnLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG57e+2VreuqqTF9fSDqs7zsoJwg66eI6rCQ7J20IOyehOuwle2VmOyYgOyKteuLiOuLpC5cbnt77ZWt66qpMn196rmM7KeAIOygnOy2nCDrtoDtg4Hrk5zrpr3ri4jri6QuJ30sCiAgICB7dDon7IiY66OMIOyViOuCtCcsIGI6J3t77J2066aEfX3ri5gsIOyViOuFle2VmOyEuOyalC5cbnt77ZWt66qpMX19IOqzvOyglSDsiJjro4zrpbwg7KeE7Ius7Jy866GcIOy2le2VmOuTnOumveuLiOuLpC5cbuq3uOuPmeyViCDtlajqu5jtlbTso7zshZTshJwg6rCQ7IKs7ZaI7Iq164uI64ukLid9LAogICAge3Q6J+yImOujjOymnSDrsJzquIkg7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxue3vtla3rqqkxfX0g7IiY66OM7Kad7J20IOuwnOq4ieuQmOyXiOyKteuLiOuLpC5cbuyImOuguSDrsKnrspU6IHt77ZWt66qpMn19J30sCiAgICB7dDon66eM7KGx64+EIOyhsOyCrCDsmpTssq0nLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG57e+2VreuqqTF9fSDrp4zsobHrj4Qg7KGw7IKs7JeQIOywuOyXrOulvCDrtoDtg4Hrk5zrpr3ri4jri6QuXG7shozspJHtlZwg7J2Y6rKs7J2AIOuLpOydjCDqs7zsoJXsl5Ag7YGwIOuPhOybgOydtCDrkKnri4jri6QuJ30sCiAgICB7dDon64uk7J2MIOq4sOyImCDrqqjsp5Eg7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxue3vtla3rqqkxfX0g64uk7J2MIOq4sOyImCDrqqjsp5HsnYQg7Iuc7J6R7ZWp64uI64ukLlxu6rSA7IusIOyeiOycvOyLnOuptCDsi6Dssq0g67aA7YOB65Oc66a964uI64ukLid9LAogICAge3Q6J+yhsOq4sOuniOqwkCDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG57e+2VreuqqTF9fSDsi6Dssq0g7J247JuQ7J20IOuqsOugpCDsobDquLDrp4jqsJDrkKAg7IiYIOyeiOyKteuLiOuLpC5cbuyEnOuRmOufrCDsi6Dssq0g67aA7YOB65Oc66a964uI64ukLid9LAogICAge3Q6J+ygleybkOuniOqwkCDsnoTrsJUg7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxue3vtla3rqqkxfX0g7KCV7JuQ7J20IOyWvOuniCDrgqjsp4Ag7JWK7JWY7Iq164uI64ukLlxu66eI6rCQIOyghCDsi6Dssq0g67aA7YOB65Oc66a964uI64ukLid9LAogICAge3Q6J+ydvOyglSDrs4Dqsr0g7JWI64K0JywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxue3vtla3rqqkxfX0g7J287KCV7J20IOu2gOuTneydtO2VmOqyjCDrs4Dqsr3rkJjsl4jsirXri4jri6QuXG7rs4Dqsr3rkJwg7J287KCVOiB7e+2VreuqqTJ9fVxu7JaR7ZW0IOu2gO2DgeuTnOumveuLiOuLpC4nfSwKICAgIHt0OifsnqXshowg67OA6rK9IOyViOuCtCcsIGI6J3t77J2066aEfX3ri5gsIOyViOuFle2VmOyEuOyalC5cbnt77ZWt66qpMX19IOyepeyGjOqwgCDrs4Dqsr3rkJjsl4jsirXri4jri6QuXG7rs4Dqsr3rkJwg7J6l7IaMOiB7e+2VreuqqTJ9fSd9LAogICAge3Q6J+ywuOyEnSDtmZXsnbgg7JqU7LKtKFJTVlApJywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxue3vtla3rqqkxfX0g7LC47ISdIOyXrOu2gOulvCB7e+2VreuqqTJ9feq5jOyngCDtmozsi6Ag67aA7YOB65Oc66a964uI64ukLid9LAogICAge3Q6J+u2iOywuCDsi5wg7Jew6529IOyalOyyrScsIGI6J3t77J2066aEfX3ri5gsIOyViOuFle2VmOyEuOyalC5cbuu2gOuTneydtO2VmOqyjCDrtojssLjtlZjsi5zripQg6rK97JqwIOuvuOumrCDsl7Drnb0g67aA7YOB65Oc66a964uI64ukLid9LAogICAge3Q6J+ykgOu5hOusvCDslYjrgrQnLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG57e+2VreuqqTF9fSDspIDruYTrrLzsnYAge3vtla3rqqkyfX3snoXri4jri6QuIOywuOqzoCDrtoDtg4Hrk5zrpr3ri4jri6QuJ30sCiAgICB7dDon7ZaJ7IKsIOyiheujjCDqsJDsgqwg7J247IKsJywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxue3vtla3rqqkxfX3sl5Ag7LC47Jes7ZW07KO87IWU7IScIOynhOyLrOycvOuhnCDqsJDsgqzrk5zrpr3ri4jri6QuXG7ri6TsnYzsl5Drj4Qg7KKL7J2AIOyduOyXsOycvOuhnCDrtZnqsqDsirXri4jri6QuJ30sCiAgICB7dDon7ZiR7KGwIOyalOyyrSDrqZTsnbwnLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG57e+2VreuqqTF9feqzvCDqtIDroKjtlZjsl6wg7ZiR7KGw66W8IOyalOyyreuTnOumveuLiOuLpC5cbuyekOyEuO2VnCDrgrTsmqk6IHt77ZWt66qpMn19J30sCiAgICB7dDon66y47J2YIOuLteuzgCDrqZTsnbwnLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG7rrLjsnZjso7zsi6Age3vtla3rqqkxfX3sl5Ag64yA7ZW0IOuLteuzgOuTnOumveuLiOuLpC5cbnt77ZWt66qpMn19J30sCiAgICB7dDon66qF7KCIL+yXsOunkCDsnbjsgqwnLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG7tlZwg7ZW0IOuPmeyViCDtlajqu5jtlbTso7zshZTshJwg7KeE7Ius7Jy866GcIOqwkOyCrOuTnOumveuLiOuLpC5cbuuUsOucu+2VnCDsl7Drp5Ag67O064K07Iuc6ri4IOuwlOuejeuLiOuLpC4nfSwKICAgIHt0OifrjIDquLDsnpAg7JWI64K0KOygleykkSknLCBiOid7e+ydtOumhH1964uYLCDslYjrhZXtlZjshLjsmpQuXG7rqLzsoIAge3vtla3rqqkxfX3sl5Ag6rSA7Ius7J2EIOqwgOyngOqzoCDsi6Dssq3tlbTso7zshZTshJwg7KeE7Ius7Jy866GcIOqwkOyCrOuTnOumveuLiOuLpC5cbuyVhOyJveqyjOuPhCDsnbTrsojsl5DripQg7Iug7LKtIOyduOybkOydtCDrp47slYQg7KCV7JuQ7J20IOuqqOuRkCDrp4jqsJDrkJjslrQsIHt77J2066aEfX3ri5jsnYQg64yA6riw7J6QIOuqheuLqOyXkCDslYjrgrTrk5zrpqzqsowg65CY7JeI7Iq164uI64ukLlxu7J6Q66as6rCAIOuniOugqOuQmOuKlCDrjIDroZwg6rCA7J6lIOuovOyggCDsl7Drnb3rk5zrprQg6rKD7J2EIOyVveyGjeuTnOumrOupsCwg6riw64uk66Ck7KO87Iuc66m0IOqwkOyCrO2VmOqyoOyKteuLiOuLpC4nfSwKICAgIHt0Oiftlonsgqwg7Leo7IaMIOyViOuCtCjsoJXspJEpJywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxu67aA65Od7J207ZWcIOyCrOygleycvOuhnCB7e+2VreuqqTF9feydtCjqsIApIOy3qOyGjOuQmOyXiOydjOydhCDslYjrgrTrk5zrpqzqsowg65CY7Ja0IOunpOyasCDshqHqtazsiqTrn73sirXri4jri6QuXG7quLDrjIDtlZjqs6Ag6rOE7IWo7J2EIO2FkOuNsCDsnbTroIfqsowg7JWI64K065Oc66as6rKMIOuQmOyWtCDso4TshqHtlZwg66eI7J2M7J6F64uI64ukLlxue3vtla3rqqkyfX1cbuuLpOydjOyXkOuKlCDrjZTsmrEg7JWM7LCsIOuqqOyKteycvOuhnCDssL7slYTrtZAg7IiYIOyeiOuPhOuhnSDtlZjqsqDsirXri4jri6QuIOyWke2VtO2VtOyjvOyFlOyEnCDqsJDsgqztlanri4jri6QuJ30sCiAgICB7dDon7Y+Q6rCVIOyViOuCtCjsoJXspJEpJywgYjone3vsnbTrpoR9feuLmCwg7JWI64WV7ZWY7IS47JqULlxu7Iug7LKt7ZW07KO87IugIHt77ZWt66qpMX19IOqzvOygleydtCDsi6Dssq0g7J247JuQIOu2gOyhseycvOuhnCDrtoDrk53snbTtlZjqsowg7Y+Q6rCV65CY7JeI7J2M7J2EIOyViOuCtOuTnOumveuLiOuLpC5cbuq3gO2VnCDsi5zqsIQg64K07Ja0IOyLoOyyre2VtOyjvOyFqOuKlOuNsCDsnbTrn7Ag7IaM7Iud7J2EIOyghO2VtOuTnOumrOqyjCDrkJjslrQg7KeE7Ius7Jy866GcIOyjhOyGoe2VnCDrp4jsnYzsnoXri4jri6QuXG57e+2VreuqqTJ9fVxu64uk7J2MIOq4sOyImOyXkOuKlCDqvK0g7KKL7J2AIOuqqOyKteycvOuhnCDtlajqu5jtlaAg7IiYIOyeiOq4sOulvCDrsJTrnbzrqbAsIOuLpOyLnCDtlZzrsogg7JaR7ZW0IOu2gO2DgeuTnOumveuLiOuLpC4nfQogICAgXSwKICAgIHJlcG9ydDogWwogICAge3Q6J+uwnO2RnCDtj4nqsIAg67O06rOg7IScJywgYjon7ISx66qFOiB7e+ydtOumhH19XG7rsJztkZzso7zsoJw6IHt77ZWt66qpMX19XG7tj4nqsIDsnbzsnpA6IHt77ZWt66qpMn19XG7sooXtlansnZjqsqw6IHt77ZWt66qpM319J30sCiAgICB7dDon7ISc66WY7KCE7ZiVIOqysOqzvCDrs7Tqs6DshJwnLCBiOifshLHrqoU6IHt77J2066aEfX1cbuyngOybkOu2hOyVvDoge3vtla3rqqkxfX1cbuyEnOulmOyghO2YlSDqsrDqs7w6IHt77ZWt66qpMn19J30sCiAgICB7dDon7LWc7KKFIO2VqeqyqeyekCDrqoXri6gnLCBiOifshLHrqoU6IHt77J2066aEfX1cbuyXsOudveyymCDtmZXsnbgg7JmE66OMXG7stZzsooXqsrDqs7w6IHt77ZWt66qpMX19XG7ruYTqs6A6IHt77ZWt66qpMn19J30sCiAgICB7dDon6rWQ7Jyh6rO87KCVIOydtOyImCDrs7Tqs6DshJwnLCBiOifshLHrqoU6IHt77J2066aEfX1cbuqzvOygleuqhToge3vtla3rqqkxfX1cbuydtOyImOq4sOqwhDoge3vtla3rqqkyfX1cbuy2nOyEneuloDoge3vtla3rqqkzfX0nfSwKICAgIHt0Oifrp4zsobHrj4Qg7KGw7IKsIOqysOqzvCDsmpTslb0nLCBiOifsnZHri7XsnpA6IHt77J2066aEfX1cbuqzvOygleuqhToge3vtla3rqqkxfX1cbuunjOyhseuPhCDsoJDsiJg6IHt77ZWt66qpMn19XG7so7zsmpQg7J2Y6rKsOiB7e+2VreuqqTN9fSd9LAogICAge3Q6J+ywuOyEneyekCDrqoXri6gnLCBiOifshLHrqoU6IHt77J2066aEfX1cbuyGjOyGjS/qtazrtoQ6IHt77ZWt66qpMX19XG7ssLjshJ3sl6zrtoA6IHt77ZWt66qpMn19J30sCiAgICB7dDon66qo7KeRIOynhO2WiSDtmITtmakg67O06rOgJywgYjon6rWs67aEOiB7e+2VreuqqTF9fVxu7Iug7LKt7J247JuQOiB7e+2VreuqqTJ9fVxu66eI6rCQ7J28OiB7e+2VreuqqTN9fSd9LAogICAge3Q6J+uTseuhneu5hCDsnoXquIgg7ZiE7ZmpJywgYjon7ISx66qFOiB7e+ydtOumhH19XG7rk7HroZ3ruYQ6IHt77ZWt66qpMX19XG7snoXquIjsl6zrtoA6IHt77ZWt66qpMn19J30sCiAgICB7dDon67Cc7ZGcIOydvOygle2RnCcsIGI6J+yEseuqhToge3vsnbTrpoR9fVxu67Cc7ZGc7J287IucOiB7e+2VreuqqTF9fVxu67Cc7ZGc7J6l7IaMOiB7e+2VreuqqTJ9fSd9LAogICAge3Q6J+yImOujjCDrqoXri6gg67O06rOgJywgYjon7ISx66qFOiB7e+ydtOumhH19XG7qs7zsoJXrqoU6IHt77ZWt66qpMX19XG7siJjro4zsl6zrtoA6IHt77ZWt66qpMn19J30KICAgIF0KICB9OwoKICBmdW5jdGlvbiBkZWZhdWx0VGFiU3RhdGUoKXsKICAgIHJldHVybiB7IHRlbXBsYXRlOicnLCByb3dzOlsgYmxhbmtSb3coKSBdIH07CiAgfQogIGZ1bmN0aW9uIGJsYW5rUm93KCl7IHJldHVybiB7IG5hbWU6JycsIGNvbnRhY3Q6JycsIHZhcnM6e30sIHNlbGVjdGVkOmZhbHNlIH07IH0KCiAgZnVuY3Rpb24gbG9hZFN0YXRlKCl7CiAgICB0cnl7CiAgICAgIHZhciByYXcgPSBsb2NhbFN0b3JhZ2UuZ2V0SXRlbShTVE9SQUdFX0tFWSk7CiAgICAgIGlmKHJhdyl7CiAgICAgICAgdmFyIHBhcnNlZCA9IEpTT04ucGFyc2UocmF3KTsKICAgICAgICBpZihwYXJzZWQgJiYgcGFyc2VkLnNtcyAmJiBwYXJzZWQuZW1haWwgJiYgcGFyc2VkLnJlcG9ydCkgcmV0dXJuIHBhcnNlZDsKICAgICAgfQogICAgfWNhdGNoKGUpe30KICAgIHJldHVybiB7IHNtczogZGVmYXVsdFRhYlN0YXRlKCksIGVtYWlsOiBkZWZhdWx0VGFiU3RhdGUoKSwgcmVwb3J0OiBkZWZhdWx0VGFiU3RhdGUoKSB9OwogIH0KCiAgdmFyIHN0YXRlID0gbG9hZFN0YXRlKCk7CiAgdmFyIGN1cnJlbnRUYWIgPSAnc21zJzsKICB2YXIgdWlTdGF0ZSA9IHsKICAgIHNtczp7IHBhc3RlT3BlbjpmYWxzZSwgc2VsZWN0TW9kZTpmYWxzZSB9LAogICAgZW1haWw6eyBwYXN0ZU9wZW46ZmFsc2UsIHNlbGVjdE1vZGU6ZmFsc2UgfSwKICAgIHJlcG9ydDp7IHBhc3RlT3BlbjpmYWxzZSwgc2VsZWN0TW9kZTpmYWxzZSB9CiAgfTsKICB2YXIgaGlzdG9yeSA9IFsgSlNPTi5zdHJpbmdpZnkoc3RhdGUpIF07CiAgdmFyIGhpc3RvcnlJZHggPSAwOwogIHZhciBkaXJ0eSA9IGZhbHNlOwoKICBmdW5jdGlvbiBzbmFwc2hvdCgpewogICAgdmFyIHMgPSBKU09OLnN0cmluZ2lmeShzdGF0ZSk7CiAgICBpZihoaXN0b3J5W2hpc3RvcnlJZHhdID09PSBzKSByZXR1cm47CiAgICBoaXN0b3J5ID0gaGlzdG9yeS5zbGljZSgwLCBoaXN0b3J5SWR4KzEpOwogICAgaGlzdG9yeS5wdXNoKHMpOwogICAgaWYoaGlzdG9yeS5sZW5ndGggPiA0MCkgaGlzdG9yeS5zaGlmdCgpOwogICAgaGlzdG9yeUlkeCA9IGhpc3RvcnkubGVuZ3RoIC0gMTsKICB9CgogIGZ1bmN0aW9uIG1hcmtEaXJ0eSgpeyBkaXJ0eSA9IHRydWU7IH0KCiAgZnVuY3Rpb24gZG9VbmRvKCl7CiAgICBpZihoaXN0b3J5SWR4ID4gMCl7CiAgICAgIGhpc3RvcnlJZHgtLTsKICAgICAgc3RhdGUgPSBKU09OLnBhcnNlKGhpc3RvcnlbaGlzdG9yeUlkeF0pOwogICAgICByZW5kZXIoKTsKICAgICAgc2hvd1RvYXN0KCfrkJjrj4zroLjsirXri4jri6QnKTsKICAgIH0gZWxzZSB7IHNob3dUb2FzdCgn642UIOydtOyDgSDrkJjrj4zrprQg7IiYIOyXhuyKteuLiOuLpCcpOyB9CiAgfQogIGZ1bmN0aW9uIGRvUmVkbygpewogICAgaWYoaGlzdG9yeUlkeCA8IGhpc3RvcnkubGVuZ3RoLTEpewogICAgICBoaXN0b3J5SWR4Kys7CiAgICAgIHN0YXRlID0gSlNPTi5wYXJzZShoaXN0b3J5W2hpc3RvcnlJZHhdKTsKICAgICAgcmVuZGVyKCk7CiAgICAgIHNob3dUb2FzdCgn65CY7IK066C47Iq164uI64ukJyk7CiAgICB9IGVsc2UgeyBzaG93VG9hc3QoJ+uNlCDsnbTsg4Eg65CY7IK066a0IOyImCDsl4bsirXri4jri6QnKTsgfQogIH0KCiAgZnVuY3Rpb24gYXV0b3NhdmVUaWNrKCl7CiAgICBpZighZGlydHkpIHJldHVybjsKICAgIHRyeXsKICAgICAgbG9jYWxTdG9yYWdlLnNldEl0ZW0oU1RPUkFHRV9LRVksIEpTT04uc3RyaW5naWZ5KHN0YXRlKSk7CiAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdncnAtc2F2ZWJhcicpLnRleHRDb250ZW50ID0gJ+yekOuPmeyggOyepeuQqCDCtyAnICsgbmV3IERhdGUoKS50b0xvY2FsZVRpbWVTdHJpbmcoKTsKICAgICAgZGlydHkgPSBmYWxzZTsKICAgICAgc25hcHNob3QoKTsKICAgIH1jYXRjaChlKXsKICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2dycC1zYXZlYmFyJykudGV4dENvbnRlbnQgPSAn7KCA7J6lIOyLpO2MqCjsmqnrn4kg7LSI6rO8IOqwgOuKpSknOwogICAgfQogIH0KICBzZXRJbnRlcnZhbChhdXRvc2F2ZVRpY2ssIDQwMDApOwoKICBmdW5jdGlvbiBleHRyYWN0VmFycyh0cGwpewogICAgdmFyIHJlID0gL1x7XHsoW157fV0rKVx9XH0vZzsKICAgIHZhciBmb3VuZCA9IFtdOyB2YXIgbTsKICAgIHdoaWxlKChtID0gcmUuZXhlYyh0cGwpKSAhPT0gbnVsbCl7CiAgICAgIHZhciBrZXkgPSBtWzFdOwogICAgICBpZihrZXkgIT09ICfsnbTrpoQnICYmIGZvdW5kLmluZGV4T2Yoa2V5KSA9PT0gLTEpIGZvdW5kLnB1c2goa2V5KTsKICAgIH0KICAgIHJldHVybiBmb3VuZDsKICB9CgogIGZ1bmN0aW9uIG5leHRWYXJUb2tlbih0cGwpewogICAgdmFyIGV4aXN0aW5nID0gZXh0cmFjdFZhcnModHBsKTsKICAgIHZhciBuID0gMTsKICAgIHdoaWxlKGV4aXN0aW5nLmluZGV4T2YoJ+2VreuqqScrbikgIT09IC0xKSBuKys7CiAgICByZXR1cm4gJ+2VreuqqScrbjsKICB9CgogIGZ1bmN0aW9uIHNob3dUb2FzdChtc2cpewogICAgdmFyIHQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZ3JwLXRvYXN0Jyk7CiAgICB0LnRleHRDb250ZW50ID0gbXNnOwogICAgdC5jbGFzc0xpc3QuYWRkKCdncnAtc2hvdycpOwogICAgc2V0VGltZW91dChmdW5jdGlvbigpeyB0LmNsYXNzTGlzdC5yZW1vdmUoJ2dycC1zaG93Jyk7IH0sIDIyMDApOwogIH0KCiAgZnVuY3Rpb24gY29weVRleHQodGV4dCl7CiAgICBpZihuYXZpZ2F0b3IuY2xpcGJvYXJkICYmIG5hdmlnYXRvci5jbGlwYm9hcmQud3JpdGVUZXh0KXsKICAgICAgbmF2aWdhdG9yLmNsaXBib2FyZC53cml0ZVRleHQodGV4dCkudGhlbihmdW5jdGlvbigpewogICAgICAgIHNob3dUb2FzdCgn67O17IKs65CY7JeI7Iq164uI64ukJyk7CiAgICAgIH0pLmNhdGNoKGZ1bmN0aW9uKCl7IGZhbGxiYWNrQ29weSh0ZXh0KTsgfSk7CiAgICB9IGVsc2UgewogICAgICBmYWxsYmFja0NvcHkodGV4dCk7CiAgICB9CiAgfQogIGZ1bmN0aW9uIGZhbGxiYWNrQ29weSh0ZXh0KXsKICAgIHZhciB0YSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3RleHRhcmVhJyk7CiAgICB0YS52YWx1ZSA9IHRleHQ7IHRhLnN0eWxlLnBvc2l0aW9uPSdmaXhlZCc7IHRhLnN0eWxlLnRvcD0nLTk5OXB4JzsKICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQodGEpOyB0YS5mb2N1cygpOyB0YS5zZWxlY3QoKTsKICAgIHRyeXsgZG9jdW1lbnQuZXhlY0NvbW1hbmQoJ2NvcHknKTsgc2hvd1RvYXN0KCfrs7XsgqzrkJjsl4jsirXri4jri6QnKTsgfWNhdGNoKGUpeyBzaG93VG9hc3QoJ+uzteyCrCDsi6TtjKgnKTsgfQogICAgZG9jdW1lbnQuYm9keS5yZW1vdmVDaGlsZCh0YSk7CiAgfQoKICBmdW5jdGlvbiBtZXJnZVRlbXBsYXRlKHRwbCwgcm93KXsKICAgIHJldHVybiB0cGwucmVwbGFjZSgvXHtceyhbXnt9XSspXH1cfS9nLCBmdW5jdGlvbihhbGwsIGtleSl7CiAgICAgIGlmKGtleSA9PT0gJ+ydtOumhCcpIHJldHVybiByb3cubmFtZSB8fCAnJzsKICAgICAgcmV0dXJuIChyb3cudmFycyAmJiByb3cudmFyc1trZXldICE9PSB1bmRlZmluZWQpID8gcm93LnZhcnNba2V5XSA6ICcnOwogICAgfSk7CiAgfQoKICBmdW5jdGlvbiBnZXRFeHBvcnRSb3dzKHBhbmVsS2V5KXsKICAgIHZhciByb3dzID0gc3RhdGVbcGFuZWxLZXldLnJvd3M7CiAgICBpZih1aVN0YXRlW3BhbmVsS2V5XS5zZWxlY3RNb2RlKXsKICAgICAgdmFyIHNlbCA9IHJvd3MuZmlsdGVyKGZ1bmN0aW9uKHIpeyByZXR1cm4gISFyLnNlbGVjdGVkOyB9KTsKICAgICAgaWYoc2VsLmxlbmd0aCkgcmV0dXJuIHNlbDsKICAgIH0KICAgIHJldHVybiByb3dzOwogIH0KCiAgZnVuY3Rpb24gYnVpbGRQYW5lbHNIVE1MKCl7CiAgICB2YXIgaHRtbCA9ICcnOwogICAgVEFCX0RFRlMuZm9yRWFjaChmdW5jdGlvbihkZWYpewogICAgICB2YXIgcyA9IHN0YXRlW2RlZi5rZXldOwogICAgICB2YXIgdWkgPSB1aVN0YXRlW2RlZi5rZXldOwogICAgICB2YXIgdmFycyA9IGV4dHJhY3RWYXJzKHMudGVtcGxhdGUpOwoKICAgICAgaHRtbCArPSAnPGRpdiBjbGFzcz0iZ3JwLXBhbmVsJyArIChkZWYua2V5PT09Y3VycmVudFRhYiA/ICcgZ3JwLWFjdGl2ZScgOiAnJykgKyAnIiBkYXRhLXBhbmVsPSInICsgZGVmLmtleSArICciPic7CgogICAgICAvLyDsubTrk5wgMTog67O466y4IO2FnO2UjOumvwogICAgICBodG1sICs9ICc8ZGl2IGNsYXNzPSJncnAtY2FyZCI+JzsKICAgICAgaHRtbCArPSAnPGRpdiBjbGFzcz0iZ3JwLXJvdy1sYWJlbCI+PGJ1dHRvbiBjbGFzcz0iZ3JwLWluZm8tYnRuIiBkYXRhLXRpcD0i66y47J6QL+ydtOuplOydvC/rs7Tqs6DshJwg67O466y47J2EIOyekeyEse2VmOyEuOyalC4ge3vtla3rqqkxfX3sspjrn7wg7ZGc7Iuc65CcIOu2gOu2hOydgCDslYTrnpgg7ZGc7J2YIOqwkuycvOuhnCDsnpDrj5kg7LmY7ZmY65Cp64uI64ukLiB7e+ydtOumhH1964+EIOyekOuPmSDsp4Dsm5DrkKnri4jri6QuIj4/PC9idXR0b24+IOuzuOusuCDthZztlIzrpr88L2Rpdj4nOwogICAgICBodG1sICs9ICc8c2VsZWN0IGRhdGEtcm9sZT0idGVtcGxhdGUtc2VsZWN0IiBzdHlsZT0id2lkdGg6MTAwJTtmb250LXNpemU6MTRweDtwYWRkaW5nOjlweDtib3JkZXI6MXB4IHNvbGlkICNkZGQ2ZjM7Ym9yZGVyLXJhZGl1czo5cHg7Y29sb3I6IzViMjFiNjttYXJnaW4tYm90dG9tOjhweDsiPic7CiAgICAgIGh0bWwgKz0gJzxvcHRpb24gdmFsdWU9IiI+4pyOIOyekOyjvOyTsOuKlCDshJzsi50g7ISg7YOdLi4uPC9vcHRpb24+JzsKICAgICAgKFRFTVBMQVRFX0xJQlJBUllbZGVmLmtleV18fFtdKS5mb3JFYWNoKGZ1bmN0aW9uKGl0ZW0sIHRpKXsKICAgICAgICBodG1sICs9ICc8b3B0aW9uIHZhbHVlPSInK3RpKyciPicrZXNjYXBlSHRtbChpdGVtLnQpKyc8L29wdGlvbj4nOwogICAgICB9KTsKICAgICAgaHRtbCArPSAnPC9zZWxlY3Q+JzsKICAgICAgaHRtbCArPSAnPHRleHRhcmVhIGNsYXNzPSJncnAtdGVtcGxhdGUiIGRhdGEtcm9sZT0idGVtcGxhdGUiIHBsYWNlaG9sZGVyPSLsmIgpIOyViOuFle2VmOyEuOyalCB7e+ydtOumhH1964uYLCB7e+2VreuqqTF9fSDqtIDroKgg7JWI64K065Oc66a964uI64ukLiI+JyArIGVzY2FwZUh0bWwocy50ZW1wbGF0ZSkgKyAnPC90ZXh0YXJlYT4nOwogICAgICBodG1sICs9ICc8ZGl2IGNsYXNzPSJncnAtYnRucm93Ij4nOwogICAgICBodG1sICs9ICc8YnV0dG9uIGNsYXNzPSJncnAtYnRuIGdycC1idG4tcHJpbWFyeSIgZGF0YS1hY3Rpb249ImFkZHZhciI+77yLIO2VreuqqSDstpTqsIA8L2J1dHRvbj4nOwogICAgICBodG1sICs9ICc8YnV0dG9uIGNsYXNzPSJncnAtYnRuIGdycC1idG4tb3V0bGluZSIgZGF0YS1hY3Rpb249ImNsZWFyLXRlbXBsYXRlIj7rs7jrrLgg7KeA7Jqw6riwPC9idXR0b24+JzsKICAgICAgaHRtbCArPSAnPGJ1dHRvbiBjbGFzcz0iZ3JwLWljb24tYnRuIiBkYXRhLWFjdGlvbj0idW5kbyIgdGl0bGU9IuyLpO2Wiey3qOyGjCIgc3R5bGU9IndpZHRoOmF1dG87cGFkZGluZzowIDEycHg7Ij7ihqkg7Iuk7ZaJ7Leo7IaMPC9idXR0b24+JzsKICAgICAgaHRtbCArPSAnPGJ1dHRvbiBjbGFzcz0iZ3JwLWljb24tYnRuIiBkYXRhLWFjdGlvbj0icmVkbyIgdGl0bGU9IuuQmOyCtOumrOq4sCIgc3R5bGU9IndpZHRoOmF1dG87cGFkZGluZzowIDEycHg7Ij7ihqog65CY7IK066as6riwPC9idXR0b24+JzsKICAgICAgaHRtbCArPSAnPC9kaXY+JzsKICAgICAgaHRtbCArPSAnPC9kaXY+JzsKCiAgICAgIC8vIOy5tOuTnCAyOiDsgr3snoXtla3rqqkg642w7J207YSwICjtkZwpIC0g7YWc7ZSM66a/IOuwlOuhnCDslYTrnpgKICAgICAgaHRtbCArPSAnPGRpdiBjbGFzcz0iZ3JwLWNhcmQiPic7CiAgICAgIGh0bWwgKz0gJzxkaXYgY2xhc3M9ImdycC1yb3ctbGFiZWwiPjxidXR0b24gY2xhc3M9ImdycC1pbmZvLWJ0biIgZGF0YS10aXA9IuydtOumhCwg7Jew65297LKYLCDqt7jrpqzqs6Ag7YWc7ZSM66a/7JeQIOyCveyehe2VnCDtla3rqqnrk6TsnZgg7Iuk7KCcIOqwkuydhCDsgqzrnozrs4TroZwg7J6F66Cl7ZWY64qUIO2RnOyeheuLiOuLpC4g7ZWt66qpMeyymOufvCDtkZzsi5zrkJwg7Je0IOygnOuqqeydhCDtg63tlZjrqbQg7J2066aE7J2EIOuwlOq/gCDsiJgg7J6I7Ja07JqULiI+PzwvYnV0dG9uPiDsgr3snoXtla3rqqkg642w7J207YSwICgnICsgcy5yb3dzLmxlbmd0aCArICfrqoUpPC9kaXY+JzsKICAgICAgaHRtbCArPSBidWlsZFZhclRhYmxlSFRNTChkZWYsIHMsIHZhcnMpOwogICAgICBodG1sICs9ICc8ZGl2IGNsYXNzPSJncnAtYnRucm93Ij4nOwogICAgICBodG1sICs9ICc8YnV0dG9uIGNsYXNzPSJncnAtYnRuIGdycC1idG4tc29mdCIgZGF0YS1hY3Rpb249ImFkZC1yb3ciPu+8iyDtlokg7LaU6rCAPC9idXR0b24+JzsKICAgICAgaHRtbCArPSAnPGJ1dHRvbiBjbGFzcz0iZ3JwLWJ0biBncnAtYnRuLW91dGxpbmUiIGRhdGEtYWN0aW9uPSJ0b2dnbGUtcGFzdGUiPicgKyAodWkucGFzdGVPcGVuID8gJ+yXkeyFgCDrtpnsl6zrhKPquLAg64ur6riwJyA6ICfsl5HshYAg67aZ7Jes64Sj6riwJykgKyAnPC9idXR0b24+JzsKICAgICAgaHRtbCArPSAnPC9kaXY+JzsKICAgICAgaWYodWkucGFzdGVPcGVuKXsKICAgICAgICBodG1sICs9ICc8dGV4dGFyZWEgY2xhc3M9ImdycC1wYXN0ZSIgZGF0YS1yb2xlPSJwYXN0ZSIgcGxhY2Vob2xkZXI9IuydtOumhFvtg61d7Jew65297LKYW+2DrV3tla3rqqkxW+2DrV3tla3rqqkyIC4uLiAo7KSE67CU6r+I7Jy866GcIOyCrOuejCDqtazrtoQsIOyXkeyFgOyXkOyEnCDrs7XsgqztlbQg67aZ7Jes64Sj7Jy87IS47JqUKSI+PC90ZXh0YXJlYT4nOwogICAgICAgIGh0bWwgKz0gJzxkaXYgY2xhc3M9ImdycC1idG5yb3ciPjxidXR0b24gY2xhc3M9ImdycC1idG4gZ3JwLWJ0bi1wcmltYXJ5IiBkYXRhLWFjdGlvbj0iYXBwbHktcGFzdGUiPu2RnOyXkCDrsJjsmIE8L2J1dHRvbj48L2Rpdj4nOwogICAgICB9CiAgICAgIGh0bWwgKz0gJzwvZGl2Pic7CgogICAgICAvLyDsubTrk5wgMzog66+466as67O06riwCiAgICAgIGh0bWwgKz0gJzxkaXYgY2xhc3M9ImdycC1jYXJkIj4nOwogICAgICBodG1sICs9ICc8ZGl2IGNsYXNzPSJncnAtcm93LWxhYmVsLWZsZXgiPic7CiAgICAgIGh0bWwgKz0gJzxzcGFuIGNsYXNzPSJncnAtcm93LWxhYmVsIiBzdHlsZT0ibWFyZ2luLWJvdHRvbTowOyI+PGJ1dHRvbiBjbGFzcz0iZ3JwLWluZm8tYnRuIiBkYXRhLXRpcD0i7IKs656M67OE66GcIOy1nOyihSDrs5HtlanrkJwg6rKw6rO87J6F64uI64ukLiDsnbTrpoTCt+yXsOudveyymOuKlCDrsJzshqEg64yA7IOBIO2ZleyduOyaqeydvCDrv5Ag67O466y4IOuCtOyaqeyXkOuKlCDtj6ztlajrkJjsp4Ag7JWK7Iq164uI64ukKOyngeygkSB7e+ydtOumhH197J2EIOuEo+ydgCDqsr3smrAg7KCc7Jm4KS4iPj88L2J1dHRvbj4g66+466as67O06riwPC9zcGFuPic7CiAgICAgIGh0bWwgKz0gJzxidXR0b24gY2xhc3M9ImdycC1idG4gZ3JwLWJ0bi1vdXRsaW5lIGdycC1idG4tc20iIGRhdGEtYWN0aW9uPSJ0b2dnbGUtc2VsZWN0Ij4nICsgKHVpLnNlbGVjdE1vZGUgPyAn7ISg7YOd7Leo7IaMJyA6ICfshKDtg50nKSArICc8L2J1dHRvbj4nOwogICAgICBodG1sICs9ICc8L2Rpdj4nOwogICAgICBpZih1aS5zZWxlY3RNb2RlKXsKICAgICAgICB2YXIgc2VsQ291bnQgPSBzLnJvd3MuZmlsdGVyKGZ1bmN0aW9uKHIpe3JldHVybiAhIXIuc2VsZWN0ZWQ7fSkubGVuZ3RoOwogICAgICAgIHZhciBhbGxTZWxlY3RlZCA9IHNlbENvdW50ID4gMCAmJiBzZWxDb3VudCA9PT0gcy5yb3dzLmxlbmd0aDsKICAgICAgICBodG1sICs9ICc8bGFiZWwgY2xhc3M9ImdycC1zZWxlY3RhbGwiPjxpbnB1dCB0eXBlPSJjaGVja2JveCIgZGF0YS1hY3Rpb249InNlbGVjdC1hbGwiJyArIChhbGxTZWxlY3RlZD8nIGNoZWNrZWQnOicnKSArICc+IOyghOyytOyEoO2DnSAoJyArIHNlbENvdW50ICsgJy8nICsgcy5yb3dzLmxlbmd0aCArICfrqoUg7ISg7YOd65CoKTwvbGFiZWw+JzsKICAgICAgfQogICAgICBodG1sICs9ICc8ZGl2IGRhdGEtaG9vaz0icHJldmlldy1saXN0Ij4nICsgYnVpbGRQcmV2aWV3SFRNTChkZWYsIHMsIHVpKSArICc8L2Rpdj4nOwogICAgICBodG1sICs9ICc8ZGl2IGNsYXNzPSJncnAtYnRucm93Ij4nOwogICAgICBodG1sICs9ICc8YnV0dG9uIGNsYXNzPSJncnAtYnRuIGdycC1idG4tb3V0bGluZSIgZGF0YS1hY3Rpb249ImNvcHktYWxsIj7soITssrQg67O17IKsPC9idXR0b24+JzsKICAgICAgaWYoZGVmLnNlbmRUeXBlICE9PSAnbm9uZScgJiYgdWkuc2VsZWN0TW9kZSl7CiAgICAgICAgaHRtbCArPSAnPGJ1dHRvbiBjbGFzcz0iZ3JwLWJ0biBncnAtYnRuLXByaW1hcnkiIGRhdGEtYWN0aW9uPSJzZW5kLXNlbGVjdGVkIj7shKDtg53rsJzshqE8L2J1dHRvbj4nOwogICAgICAgIGh0bWwgKz0gJzxidXR0b24gY2xhc3M9ImdycC1idG4gZ3JwLWJ0bi1zb2Z0IiBkYXRhLWFjdGlvbj0ic2VuZC1hbGwiPuyghOyytOuwnOyGoTwvYnV0dG9uPic7CiAgICAgIH0KICAgICAgaWYoZGVmLmtleSA9PT0gJ3JlcG9ydCcpewogICAgICAgIGh0bWwgKz0gJzxidXR0b24gY2xhc3M9ImdycC1idG4gZ3JwLWJ0bi1vdXRsaW5lIiBkYXRhLWFjdGlvbj0iZXhwb3J0LXR4dCI+dHh066GcIOuCtOuztOuCtOq4sDwvYnV0dG9uPic7CiAgICAgICAgaHRtbCArPSAnPGJ1dHRvbiBjbGFzcz0iZ3JwLWJ0biBncnAtYnRuLW91dGxpbmUiIGRhdGEtYWN0aW9uPSJleHBvcnQtcHJpbnQiPuyduOyHhC9QREbroZwg7KCA7J6lPC9idXR0b24+JzsKICAgICAgICBodG1sICs9ICc8YnV0dG9uIGNsYXNzPSJncnAtYnRuIGdycC1idG4tb3V0bGluZSIgZGF0YS1hY3Rpb249ImV4cG9ydC13b3JkIj7sm4zrk5woZG9jKeuhnCDrgrTrs7TrgrTquLA8L2J1dHRvbj4nOwogICAgICB9CiAgICAgIGh0bWwgKz0gJzxidXR0b24gY2xhc3M9ImdycC1idG4gZ3JwLWJ0bi1zb2Z0IiBkYXRhLWFjdGlvbj0ic2hhcmUiPvCflJcg6rO17Jyg66eB7YGsPC9idXR0b24+JzsKICAgICAgaHRtbCArPSAnPC9kaXY+JzsKICAgICAgaHRtbCArPSAnPGRpdiBjbGFzcz0iZ3JwLXFyLWJveCIgZGF0YS1yb2xlPSJxcmJveCI+PC9kaXY+JzsKICAgICAgaHRtbCArPSAnPC9kaXY+JzsKCiAgICAgIGh0bWwgKz0gJzwvZGl2Pic7CiAgICB9KTsKICAgIHJldHVybiBodG1sOwogIH0KCiAgZnVuY3Rpb24gYnVpbGRWYXJUYWJsZUhUTUwoZGVmLCBzLCB2YXJzKXsKICAgIHZhciBodG1sID0gJzx0YWJsZSBjbGFzcz0iZ3JwLXRhYmxlIj48dGhlYWQ+PHRyPjx0aD7snbTrpoQ8L3RoPic7CiAgICBpZihkZWYuaGFzQ29udGFjdCkgaHRtbCArPSAnPHRoPicgKyBkZWYuY29udGFjdExhYmVsICsgJzwvdGg+JzsKICAgIHZhcnMuZm9yRWFjaChmdW5jdGlvbih2KXsKICAgICAgaHRtbCArPSAnPHRoPjxzcGFuIGNsYXNzPSJncnAtdmFyLXRoIiBkYXRhLWFjdGlvbj0icmVuYW1lLXZhciIgZGF0YS12YXI9IicrZXNjYXBlQXR0cih2KSsnIj4nK2VzY2FwZUh0bWwodikrJyDinI48L3NwYW4+PC90aD4nOwogICAgfSk7CiAgICBodG1sICs9ICc8dGg+PC90aD48L3RyPjwvdGhlYWQ+PHRib2R5Pic7CiAgICBzLnJvd3MuZm9yRWFjaChmdW5jdGlvbihyb3csIGlkeCl7CiAgICAgIGh0bWwgKz0gJzx0cj4nOwogICAgICBodG1sICs9ICc8dGQ+PGlucHV0IGRhdGEtcm9sZT0iY2VsbCIgZGF0YS1maWVsZD0ibmFtZSIgZGF0YS1pZHg9IicraWR4KyciIHZhbHVlPSInK2VzY2FwZUF0dHIocm93Lm5hbWUpKyciPjwvdGQ+JzsKICAgICAgaWYoZGVmLmhhc0NvbnRhY3QpewogICAgICAgIGh0bWwgKz0gJzx0ZD48aW5wdXQgZGF0YS1yb2xlPSJjZWxsIiBkYXRhLWZpZWxkPSJjb250YWN0IiBkYXRhLWlkeD0iJytpZHgrJyIgdmFsdWU9IicrZXNjYXBlQXR0cihyb3cuY29udGFjdCkrJyI+PC90ZD4nOwogICAgICB9CiAgICAgIHZhcnMuZm9yRWFjaChmdW5jdGlvbih2KXsKICAgICAgICB2YXIgdmFsID0gcm93LnZhcnNbdl0gfHwgJyc7CiAgICAgICAgaHRtbCArPSAnPHRkPjxpbnB1dCBkYXRhLXJvbGU9ImNlbGwiIGRhdGEtZmllbGQ9InZhciIgZGF0YS12YXI9IicrZXNjYXBlQXR0cih2KSsnIiBkYXRhLWlkeD0iJytpZHgrJyIgdmFsdWU9IicrZXNjYXBlQXR0cih2YWwpKyciPjwvdGQ+JzsKICAgICAgfSk7CiAgICAgIGh0bWwgKz0gJzx0ZD48YnV0dG9uIGNsYXNzPSJncnAtYnRuIGdycC1idG4tZGFuZ2VyIGdycC1idG4tc20iIGRhdGEtYWN0aW9uPSJkZWwtcm93IiBkYXRhLWlkeD0iJytpZHgrJyI+7IKt7KCcPC9idXR0b24+PC90ZD4nOwogICAgICBodG1sICs9ICc8L3RyPic7CiAgICB9KTsKICAgIGh0bWwgKz0gJzwvdGJvZHk+PC90YWJsZT4nOwogICAgcmV0dXJuIGh0bWw7CiAgfQoKICBmdW5jdGlvbiBidWlsZFByZXZpZXdIVE1MKGRlZiwgcywgdWkpewogICAgdmFyIGh0bWwgPSAnJzsKICAgIGlmKHMucm93cy5sZW5ndGggPT09IDAgfHwgKHMucm93cy5sZW5ndGg9PT0xICYmICFzLnJvd3NbMF0ubmFtZSAmJiAhcy50ZW1wbGF0ZSkpewogICAgICByZXR1cm4gJzxkaXYgc3R5bGU9ImZvbnQtc2l6ZToxM3B4O2NvbG9yOiM5Y2EzYWY7Ij7thZztlIzrpr/qs7wg7J247JuQ7J2EIOyeheugpe2VmOuptCDsl6zquLDsl5Ag66+466as67O06riw6rCAIO2RnOyLnOuQqeuLiOuLpC48L2Rpdj4nOwogICAgfQogICAgcy5yb3dzLmZvckVhY2goZnVuY3Rpb24ocm93LCBpZHgpewogICAgICB2YXIgbWVyZ2VkID0gbWVyZ2VUZW1wbGF0ZShzLnRlbXBsYXRlLCByb3cpOwogICAgICBodG1sICs9ICc8ZGl2IGNsYXNzPSJncnAtcHJldmlldy1pdGVtIj4nOwogICAgICBpZih1aS5zZWxlY3RNb2RlKXsKICAgICAgICBodG1sICs9ICc8aW5wdXQgdHlwZT0iY2hlY2tib3giIGNsYXNzPSJncnAtcHJldmlldy1jaGVjayIgZGF0YS1hY3Rpb249InNlbGVjdC1vbmUiIGRhdGEtaWR4PSInK2lkeCsnIicrKHJvdy5zZWxlY3RlZD8nIGNoZWNrZWQnOicnKSsnPic7CiAgICAgIH0KICAgICAgaHRtbCArPSAnPGRpdiBjbGFzcz0iZ3JwLXByZXZpZXctYm9keSI+JzsKICAgICAgaHRtbCArPSAnPGRpdiBjbGFzcz0iZ3JwLXByZXZpZXctbmFtZSI+JyArIGVzY2FwZUh0bWwocm93Lm5hbWUgfHwgJyjsnbTrpoQg7JeG7J2MKScpICsgKGRlZi5oYXNDb250YWN0ID8gJyDCtyAnICsgZXNjYXBlSHRtbChyb3cuY29udGFjdHx8J+yXsOudveyymCDsl4bsnYwnKSA6ICcnKSArICc8L2Rpdj4nOwogICAgICBodG1sICs9ICc8ZGl2IGNsYXNzPSJncnAtcHJldmlldy10ZXh0Ij4nICsgZXNjYXBlSHRtbChtZXJnZWQpICsgJzwvZGl2Pic7CiAgICAgIGh0bWwgKz0gJzxkaXYgY2xhc3M9ImdycC1wcmV2aWV3LWJ0bnMiPic7CiAgICAgIGh0bWwgKz0gJzxidXR0b24gY2xhc3M9ImdycC1idG4gZ3JwLWJ0bi1vdXRsaW5lIiBkYXRhLWFjdGlvbj0iY29weS1vbmUiIGRhdGEtaWR4PSInK2lkeCsnIj7rs7Xsgqw8L2J1dHRvbj4nOwogICAgICBpZihkZWYuc2VuZFR5cGUgPT09ICdzbXMnKXsKICAgICAgICBodG1sICs9ICc8YnV0dG9uIGNsYXNzPSJncnAtYnRuIGdycC1idG4tcHJpbWFyeSIgZGF0YS1hY3Rpb249InNlbmQtc21zIiBkYXRhLWlkeD0iJytpZHgrJyI+66y47J6QIOuwnOyGoTwvYnV0dG9uPic7CiAgICAgIH0gZWxzZSBpZihkZWYuc2VuZFR5cGUgPT09ICdlbWFpbCcpewogICAgICAgIGh0bWwgKz0gJzxidXR0b24gY2xhc3M9ImdycC1idG4gZ3JwLWJ0bi1wcmltYXJ5IiBkYXRhLWFjdGlvbj0ic2VuZC1lbWFpbCIgZGF0YS1pZHg9IicraWR4KyciPuuplOydvCDrsJzshqE8L2J1dHRvbj4nOwogICAgICB9CiAgICAgIGh0bWwgKz0gJzwvZGl2PjwvZGl2PjwvZGl2Pic7CiAgICB9KTsKICAgIHJldHVybiBodG1sOwogIH0KCiAgZnVuY3Rpb24gZXNjYXBlSHRtbChzdHIpewogICAgcmV0dXJuIFN0cmluZyhzdHJ8fCcnKS5yZXBsYWNlKC8mL2csJyZhbXA7JykucmVwbGFjZSgvPC9nLCcmbHQ7JykucmVwbGFjZSgvPi9nLCcmZ3Q7Jyk7CiAgfQogIGZ1bmN0aW9uIGVzY2FwZUF0dHIoc3RyKXsKICAgIHJldHVybiBTdHJpbmcoc3RyfHwnJykucmVwbGFjZSgvJi9nLCcmYW1wOycpLnJlcGxhY2UoLyIvZywnJnF1b3Q7Jyk7CiAgfQoKICBmdW5jdGlvbiByZW5kZXIoKXsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdncnAtcGFuZWxzJykuaW5uZXJIVE1MID0gYnVpbGRQYW5lbHNIVE1MKCk7CiAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcjZ3JwLWFwcCAuZ3JwLXRhYi1idG4nKS5mb3JFYWNoKGZ1bmN0aW9uKGJ0bil7CiAgICAgIGJ0bi5jbGFzc0xpc3QudG9nZ2xlKCdncnAtYWN0aXZlJywgYnRuLmdldEF0dHJpYnV0ZSgnZGF0YS10YWInKSA9PT0gY3VycmVudFRhYik7CiAgICB9KTsKICB9CgogIGZ1bmN0aW9uIHNlbmRCdWxrKHBhbmVsS2V5LCBkZWYsIHJvd3MpewogICAgaWYocm93cy5sZW5ndGggPT09IDApeyBzaG93VG9hc3QoJ+yEoO2DneuQnCDsnbjsm5DsnbQg7JeG7Iq164uI64ukJyk7IHJldHVybjsgfQogICAgaWYocm93cy5sZW5ndGggPiAxKSBzaG93VG9hc3Qocm93cy5sZW5ndGggKyAn6rG07J2YIOuwnOyGoeywveydtCDsiJzshJzrjIDroZwg7Je066a964uI64ukLiDtjJ3sl4XsnbQg7LCo64uo65CY66m0IO2XiOyaqe2VtOyjvOyEuOyalC4nKTsKICAgIHJvd3MuZm9yRWFjaChmdW5jdGlvbihyKXsKICAgICAgdmFyIGJvZHkgPSBtZXJnZVRlbXBsYXRlKHN0YXRlW3BhbmVsS2V5XS50ZW1wbGF0ZSwgcik7CiAgICAgIHZhciB1cmw7CiAgICAgIGlmKGRlZi5zZW5kVHlwZSA9PT0gJ3NtcycpIHVybCA9ICdzbXM6JyArIGVuY29kZVVSSUNvbXBvbmVudChyLmNvbnRhY3R8fCcnKSArICc/JmJvZHk9JyArIGVuY29kZVVSSUNvbXBvbmVudChib2R5KTsKICAgICAgZWxzZSB1cmwgPSAnbWFpbHRvOicgKyBlbmNvZGVVUklDb21wb25lbnQoci5jb250YWN0fHwnJykgKyAnP2JvZHk9JyArIGVuY29kZVVSSUNvbXBvbmVudChib2R5KTsKICAgICAgd2luZG93Lm9wZW4odXJsLCAnX2JsYW5rJyk7CiAgICB9KTsKICB9CgogIGZ1bmN0aW9uIGJpbmRPbmNlKCl7CiAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcjZ3JwLWFwcCAuZ3JwLXRhYi1idG4nKS5mb3JFYWNoKGZ1bmN0aW9uKGJ0bil7CiAgICAgIGFkZFRhcChidG4sIGZ1bmN0aW9uKCl7CiAgICAgICAgY3VycmVudFRhYiA9IGJ0bi5nZXRBdHRyaWJ1dGUoJ2RhdGEtdGFiJyk7CiAgICAgICAgcmVuZGVyKCk7CiAgICAgIH0pOwogICAgfSk7CgogICAgYWRkVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdncnAtaGVscCcpLCBmdW5jdGlvbigpewogICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZ3JwLWhlbHAtbW9kYWwnKS5jbGFzc0xpc3QuYWRkKCdncnAtc2hvdycpOwogICAgICBkb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93ID0gJ2hpZGRlbic7CiAgICB9KTsKICAgIGFkZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZ3JwLWhlbHAtY2xvc2UnKSwgZnVuY3Rpb24oKXsKICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2dycC1oZWxwLW1vZGFsJykuY2xhc3NMaXN0LnJlbW92ZSgnZ3JwLXNob3cnKTsKICAgICAgZG9jdW1lbnQuYm9keS5zdHlsZS5vdmVyZmxvdyA9ICcnOwogICAgfSk7CiAgICBhZGRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2dycC1oZWxwLW1vZGFsJyksIGZ1bmN0aW9uKGUpewogICAgICBpZihlLnRhcmdldCAmJiBlLnRhcmdldC5pZCA9PT0gJ2dycC1oZWxwLW1vZGFsJyl7CiAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2dycC1oZWxwLW1vZGFsJykuY2xhc3NMaXN0LnJlbW92ZSgnZ3JwLXNob3cnKTsKICAgICAgICBkb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93ID0gJyc7CiAgICAgIH0KICAgIH0pOwogICAgYWRkVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdncnAtc2hhcmUtYWxsJyksIGZ1bmN0aW9uKCl7CiAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdncnAtc2hhcmUtbW9kYWwnKS5jbGFzc0xpc3QuYWRkKCdncnAtc2hvdycpOwogICAgICBkb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93ID0gJ2hpZGRlbic7CiAgICAgIGRvU2hhcmVBbGwoKTsKICAgIH0pOwogICAgYWRkVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdncnAtc2hhcmUtY2xvc2UnKSwgZnVuY3Rpb24oKXsKICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2dycC1zaGFyZS1tb2RhbCcpLmNsYXNzTGlzdC5yZW1vdmUoJ2dycC1zaG93Jyk7CiAgICAgIGRvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3cgPSAnJzsKICAgIH0pOwogICAgYWRkVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdncnAtc2hhcmUtbW9kYWwnKSwgZnVuY3Rpb24oZSl7CiAgICAgIGlmKGUudGFyZ2V0ICYmIGUudGFyZ2V0LmlkID09PSAnZ3JwLXNoYXJlLW1vZGFsJyl7CiAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2dycC1zaGFyZS1tb2RhbCcpLmNsYXNzTGlzdC5yZW1vdmUoJ2dycC1zaG93Jyk7CiAgICAgICAgZG9jdW1lbnQuYm9keS5zdHlsZS5vdmVyZmxvdyA9ICcnOwogICAgICB9CiAgICB9KTsKCiAgICB2YXIgcGFuZWxzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2dycC1wYW5lbHMnKTsKCiAgICBwYW5lbHMuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCBmdW5jdGlvbihlKXsKICAgICAgdmFyIHQgPSBlLnRhcmdldDsKICAgICAgdmFyIHBhbmVsS2V5ID0gdC5jbG9zZXN0KCdbZGF0YS1wYW5lbF0nKSA/IHQuY2xvc2VzdCgnW2RhdGEtcGFuZWxdJykuZ2V0QXR0cmlidXRlKCdkYXRhLXBhbmVsJykgOiBjdXJyZW50VGFiOwogICAgICBpZih0LmdldEF0dHJpYnV0ZSgnZGF0YS1yb2xlJykgPT09ICd0ZW1wbGF0ZScpewogICAgICAgIHN0YXRlW3BhbmVsS2V5XS50ZW1wbGF0ZSA9IHQudmFsdWU7CiAgICAgICAgbWFya0RpcnR5KCk7CiAgICAgICAgdmFyIHRQYW5lbEVsID0gdC5jbG9zZXN0KCdbZGF0YS1wYW5lbF0nKTsKICAgICAgICB2YXIgdExpc3QgPSB0UGFuZWxFbC5xdWVyeVNlbGVjdG9yKCdbZGF0YS1ob29rPSJwcmV2aWV3LWxpc3QiXScpOwogICAgICAgIGlmKHRMaXN0KXsKICAgICAgICAgIHZhciB0RGVmID0gVEFCX0RFRlMuZmlsdGVyKGZ1bmN0aW9uKGQpe3JldHVybiBkLmtleT09PXBhbmVsS2V5O30pWzBdOwogICAgICAgICAgdExpc3QuaW5uZXJIVE1MID0gYnVpbGRQcmV2aWV3SFRNTCh0RGVmLCBzdGF0ZVtwYW5lbEtleV0sIHVpU3RhdGVbcGFuZWxLZXldKTsKICAgICAgICB9CiAgICAgIH0gZWxzZSBpZih0LmdldEF0dHJpYnV0ZSgnZGF0YS1yb2xlJykgPT09ICdjZWxsJyl7CiAgICAgICAgdmFyIGlkeCA9IHBhcnNlSW50KHQuZ2V0QXR0cmlidXRlKCdkYXRhLWlkeCcpLDEwKTsKICAgICAgICB2YXIgZmllbGQgPSB0LmdldEF0dHJpYnV0ZSgnZGF0YS1maWVsZCcpOwogICAgICAgIGlmKGZpZWxkID09PSAnbmFtZScpIHN0YXRlW3BhbmVsS2V5XS5yb3dzW2lkeF0ubmFtZSA9IHQudmFsdWU7CiAgICAgICAgZWxzZSBpZihmaWVsZCA9PT0gJ2NvbnRhY3QnKSBzdGF0ZVtwYW5lbEtleV0ucm93c1tpZHhdLmNvbnRhY3QgPSB0LnZhbHVlOwogICAgICAgIGVsc2UgaWYoZmllbGQgPT09ICd2YXInKXsKICAgICAgICAgIHZhciB2a2V5ID0gdC5nZXRBdHRyaWJ1dGUoJ2RhdGEtdmFyJyk7CiAgICAgICAgICBzdGF0ZVtwYW5lbEtleV0ucm93c1tpZHhdLnZhcnNbdmtleV0gPSB0LnZhbHVlOwogICAgICAgIH0KICAgICAgICBtYXJrRGlydHkoKTsKICAgICAgICAvLyDtkZwg7J6F66Cl7J2AIOuvuOumrOuztOq4sOunjCDsi6Tsi5zqsIQg6rCx7IugICjtkZzripQg6re464yA66GcIOuRkOyWtCDsnoXroKUg7Y+s7Luk7IqkIOycoOyngCkKICAgICAgICB2YXIgcGFuZWxFbCA9IHQuY2xvc2VzdCgnW2RhdGEtcGFuZWxdJyk7CiAgICAgICAgdmFyIGxpc3QgPSBwYW5lbEVsLnF1ZXJ5U2VsZWN0b3IoJ1tkYXRhLWhvb2s9InByZXZpZXctbGlzdCJdJyk7CiAgICAgICAgaWYobGlzdCl7CiAgICAgICAgICB2YXIgZGVmID0gVEFCX0RFRlMuZmlsdGVyKGZ1bmN0aW9uKGQpe3JldHVybiBkLmtleT09PXBhbmVsS2V5O30pWzBdOwogICAgICAgICAgbGlzdC5pbm5lckhUTUwgPSBidWlsZFByZXZpZXdIVE1MKGRlZiwgc3RhdGVbcGFuZWxLZXldLCB1aVN0YXRlW3BhbmVsS2V5XSk7CiAgICAgICAgfQogICAgICB9CiAgICB9KTsKCiAgICBwYW5lbHMuYWRkRXZlbnRMaXN0ZW5lcignY2hhbmdlJywgZnVuY3Rpb24oZSl7CiAgICAgIHZhciB0ID0gZS50YXJnZXQ7CiAgICAgIGlmKHQuZ2V0QXR0cmlidXRlKCdkYXRhLXJvbGUnKSA9PT0gJ3RlbXBsYXRlLXNlbGVjdCcpewogICAgICAgIHZhciBwYW5lbEtleTIgPSB0LmNsb3Nlc3QoJ1tkYXRhLXBhbmVsXScpLmdldEF0dHJpYnV0ZSgnZGF0YS1wYW5lbCcpOwogICAgICAgIHZhciBzZWxJZHggPSB0LnZhbHVlOwogICAgICAgIGlmKHNlbElkeCA9PT0gJycpIHJldHVybjsKICAgICAgICB2YXIgbGliID0gVEVNUExBVEVfTElCUkFSWVtwYW5lbEtleTJdIHx8IFtdOwogICAgICAgIHZhciBwaWNrZWQgPSBsaWJbcGFyc2VJbnQoc2VsSWR4LDEwKV07CiAgICAgICAgaWYoIXBpY2tlZCkgcmV0dXJuOwogICAgICAgIHZhciBjdXIgPSBzdGF0ZVtwYW5lbEtleTJdLnRlbXBsYXRlOwogICAgICAgIGlmKGN1ciAmJiBjdXIudHJpbSgpICE9PSAnJyl7CiAgICAgICAgICB2YXIgb2sgPSB3aW5kb3cuY29uZmlybSgn7ZiE7J6sIOyekeyEsSDspJHsnbgg67O466y47J2EICInICsgcGlja2VkLnQgKyAnIiDshJzsi50g64K07Jqp7Jy866GcIOuwlOq/gOq5jOyalD8gKOq4sOyhtCDrgrTsmqnsnYAg7IKs65287KeR64uI64ukKScpOwogICAgICAgICAgaWYoIW9rKXsgdC52YWx1ZSA9ICcnOyByZXR1cm47IH0KICAgICAgICB9CiAgICAgICAgc3RhdGVbcGFuZWxLZXkyXS50ZW1wbGF0ZSA9IHBpY2tlZC5iOwogICAgICAgIG1hcmtEaXJ0eSgpOwogICAgICAgIHJlbmRlcigpOwogICAgICAgIHNob3dUb2FzdCgnIicgKyBwaWNrZWQudCArICciIOyEnOyLneydhCDsoIHsmqntlojsirXri4jri6QnKTsKICAgICAgfQogICAgfSk7CgogICAgcGFuZWxzLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24oZSl7CiAgICAgIHZhciBhY3Rpb25FbCA9IGUudGFyZ2V0LmNsb3Nlc3QoJ1tkYXRhLWFjdGlvbl0nKTsKICAgICAgaWYoIWFjdGlvbkVsKSByZXR1cm47CiAgICAgIHZhciBhY3Rpb24gPSBhY3Rpb25FbC5nZXRBdHRyaWJ1dGUoJ2RhdGEtYWN0aW9uJyk7CiAgICAgIHZhciBwYW5lbEVsID0gYWN0aW9uRWwuY2xvc2VzdCgnW2RhdGEtcGFuZWxdJyk7CiAgICAgIHZhciBwYW5lbEtleSA9IHBhbmVsRWwgPyBwYW5lbEVsLmdldEF0dHJpYnV0ZSgnZGF0YS1wYW5lbCcpIDogY3VycmVudFRhYjsKICAgICAgdmFyIGRlZiA9IFRBQl9ERUZTLmZpbHRlcihmdW5jdGlvbihkKXtyZXR1cm4gZC5rZXk9PT1wYW5lbEtleTt9KVswXTsKCiAgICAgIGlmKGFjdGlvbiA9PT0gJ3VuZG8nKXsKICAgICAgICBkb1VuZG8oKTsKICAgICAgfSBlbHNlIGlmKGFjdGlvbiA9PT0gJ3JlZG8nKXsKICAgICAgICBkb1JlZG8oKTsKICAgICAgfSBlbHNlIGlmKGFjdGlvbiA9PT0gJ2FkZHZhcicpewogICAgICAgIHZhciB0YSA9IHBhbmVsRWwucXVlcnlTZWxlY3RvcignW2RhdGEtcm9sZT0idGVtcGxhdGUiXScpOwogICAgICAgIHZhciB0b2tlbiA9IG5leHRWYXJUb2tlbihzdGF0ZVtwYW5lbEtleV0udGVtcGxhdGUpOwogICAgICAgIGluc2VydEF0Q3Vyc29yKHRhLCAne3snK3Rva2VuKyd9fScpOwogICAgICAgIHN0YXRlW3BhbmVsS2V5XS50ZW1wbGF0ZSA9IHRhLnZhbHVlOwogICAgICAgIG1hcmtEaXJ0eSgpOwogICAgICAgIHJlbmRlcigpOwogICAgICB9IGVsc2UgaWYoYWN0aW9uID09PSAnY2xlYXItdGVtcGxhdGUnKXsKICAgICAgICBzdGF0ZVtwYW5lbEtleV0udGVtcGxhdGUgPSAnJzsKICAgICAgICBtYXJrRGlydHkoKTsKICAgICAgICByZW5kZXIoKTsKICAgICAgfSBlbHNlIGlmKGFjdGlvbiA9PT0gJ3JlbmFtZS12YXInKXsKICAgICAgICB2YXIgb2xkS2V5ID0gYWN0aW9uRWwuZ2V0QXR0cmlidXRlKCdkYXRhLXZhcicpOwogICAgICAgIHJlbmFtZVZhcihwYW5lbEtleSwgb2xkS2V5KTsKICAgICAgfSBlbHNlIGlmKGFjdGlvbiA9PT0gJ3RvZ2dsZS1wYXN0ZScpewogICAgICAgIHVpU3RhdGVbcGFuZWxLZXldLnBhc3RlT3BlbiA9ICF1aVN0YXRlW3BhbmVsS2V5XS5wYXN0ZU9wZW47CiAgICAgICAgcmVuZGVyKCk7CiAgICAgIH0gZWxzZSBpZihhY3Rpb24gPT09ICdhcHBseS1wYXN0ZScpewogICAgICAgIHZhciBwYXN0ZVRhID0gcGFuZWxFbC5xdWVyeVNlbGVjdG9yKCdbZGF0YS1yb2xlPSJwYXN0ZSJdJyk7CiAgICAgICAgYXBwbHlQYXN0ZShwYW5lbEtleSwgZGVmLCBwYXN0ZVRhLnZhbHVlKTsKICAgICAgICBtYXJrRGlydHkoKTsKICAgICAgICB1aVN0YXRlW3BhbmVsS2V5XS5wYXN0ZU9wZW4gPSBmYWxzZTsKICAgICAgICByZW5kZXIoKTsKICAgICAgfSBlbHNlIGlmKGFjdGlvbiA9PT0gJ2FkZC1yb3cnKXsKICAgICAgICBzdGF0ZVtwYW5lbEtleV0ucm93cy5wdXNoKGJsYW5rUm93KCkpOwogICAgICAgIG1hcmtEaXJ0eSgpOwogICAgICAgIHJlbmRlcigpOwogICAgICB9IGVsc2UgaWYoYWN0aW9uID09PSAnZGVsLXJvdycpewogICAgICAgIHZhciBkaSA9IHBhcnNlSW50KGFjdGlvbkVsLmdldEF0dHJpYnV0ZSgnZGF0YS1pZHgnKSwxMCk7CiAgICAgICAgc3RhdGVbcGFuZWxLZXldLnJvd3Muc3BsaWNlKGRpLDEpOwogICAgICAgIGlmKHN0YXRlW3BhbmVsS2V5XS5yb3dzLmxlbmd0aD09PTApIHN0YXRlW3BhbmVsS2V5XS5yb3dzLnB1c2goYmxhbmtSb3coKSk7CiAgICAgICAgbWFya0RpcnR5KCk7CiAgICAgICAgcmVuZGVyKCk7CiAgICAgIH0gZWxzZSBpZihhY3Rpb24gPT09ICd0b2dnbGUtc2VsZWN0Jyl7CiAgICAgICAgdWlTdGF0ZVtwYW5lbEtleV0uc2VsZWN0TW9kZSA9ICF1aVN0YXRlW3BhbmVsS2V5XS5zZWxlY3RNb2RlOwogICAgICAgIHJlbmRlcigpOwogICAgICB9IGVsc2UgaWYoYWN0aW9uID09PSAnc2VsZWN0LWFsbCcpewogICAgICAgIHZhciBjaGVja2VkID0gYWN0aW9uRWwuY2hlY2tlZDsKICAgICAgICBzdGF0ZVtwYW5lbEtleV0ucm93cy5mb3JFYWNoKGZ1bmN0aW9uKHIpeyByLnNlbGVjdGVkID0gY2hlY2tlZDsgfSk7CiAgICAgICAgbWFya0RpcnR5KCk7CiAgICAgICAgcmVuZGVyKCk7CiAgICAgIH0gZWxzZSBpZihhY3Rpb24gPT09ICdzZWxlY3Qtb25lJyl7CiAgICAgICAgdmFyIHNpMiA9IHBhcnNlSW50KGFjdGlvbkVsLmdldEF0dHJpYnV0ZSgnZGF0YS1pZHgnKSwxMCk7CiAgICAgICAgc3RhdGVbcGFuZWxLZXldLnJvd3Nbc2kyXS5zZWxlY3RlZCA9IGFjdGlvbkVsLmNoZWNrZWQ7CiAgICAgICAgbWFya0RpcnR5KCk7CiAgICAgICAgcmVuZGVyKCk7CiAgICAgIH0gZWxzZSBpZihhY3Rpb24gPT09ICdjb3B5LW9uZScpewogICAgICAgIHZhciBjaSA9IHBhcnNlSW50KGFjdGlvbkVsLmdldEF0dHJpYnV0ZSgnZGF0YS1pZHgnKSwxMCk7CiAgICAgICAgdmFyIHJvdyA9IHN0YXRlW3BhbmVsS2V5XS5yb3dzW2NpXTsKICAgICAgICBjb3B5VGV4dChtZXJnZVRlbXBsYXRlKHN0YXRlW3BhbmVsS2V5XS50ZW1wbGF0ZSwgcm93KSk7CiAgICAgIH0gZWxzZSBpZihhY3Rpb24gPT09ICdjb3B5LWFsbCcpewogICAgICAgIHZhciByb3dzVG9Db3B5ID0gZ2V0RXhwb3J0Um93cyhwYW5lbEtleSk7CiAgICAgICAgdmFyIGFsbCA9IHJvd3NUb0NvcHkubWFwKGZ1bmN0aW9uKHIpewogICAgICAgICAgcmV0dXJuIChyLm5hbWV8fCco7J2066aE7JeG7J2MKScpICsgJ1xuJyArIG1lcmdlVGVtcGxhdGUoc3RhdGVbcGFuZWxLZXldLnRlbXBsYXRlLCByKTsKICAgICAgICB9KS5qb2luKCdcblxuLS0tXG5cbicpOwogICAgICAgIGNvcHlUZXh0KGFsbCk7CiAgICAgIH0gZWxzZSBpZihhY3Rpb24gPT09ICdzZW5kLXNtcycpewogICAgICAgIHZhciBzaSA9IHBhcnNlSW50KGFjdGlvbkVsLmdldEF0dHJpYnV0ZSgnZGF0YS1pZHgnKSwxMCk7CiAgICAgICAgc2VuZEJ1bGsocGFuZWxLZXksIGRlZiwgW3N0YXRlW3BhbmVsS2V5XS5yb3dzW3NpXV0pOwogICAgICB9IGVsc2UgaWYoYWN0aW9uID09PSAnc2VuZC1lbWFpbCcpewogICAgICAgIHZhciBlaSA9IHBhcnNlSW50KGFjdGlvbkVsLmdldEF0dHJpYnV0ZSgnZGF0YS1pZHgnKSwxMCk7CiAgICAgICAgc2VuZEJ1bGsocGFuZWxLZXksIGRlZiwgW3N0YXRlW3BhbmVsS2V5XS5yb3dzW2VpXV0pOwogICAgICB9IGVsc2UgaWYoYWN0aW9uID09PSAnc2VuZC1zZWxlY3RlZCcpewogICAgICAgIHNlbmRCdWxrKHBhbmVsS2V5LCBkZWYsIHN0YXRlW3BhbmVsS2V5XS5yb3dzLmZpbHRlcihmdW5jdGlvbihyKXtyZXR1cm4gISFyLnNlbGVjdGVkO30pKTsKICAgICAgfSBlbHNlIGlmKGFjdGlvbiA9PT0gJ3NlbmQtYWxsJyl7CiAgICAgICAgc2VuZEJ1bGsocGFuZWxLZXksIGRlZiwgc3RhdGVbcGFuZWxLZXldLnJvd3MpOwogICAgICB9IGVsc2UgaWYoYWN0aW9uID09PSAnZXhwb3J0LXR4dCcpewogICAgICAgIGV4cG9ydFR4dChwYW5lbEtleSk7CiAgICAgIH0gZWxzZSBpZihhY3Rpb24gPT09ICdleHBvcnQtcHJpbnQnKXsKICAgICAgICBleHBvcnRQcmludChwYW5lbEtleSk7CiAgICAgIH0gZWxzZSBpZihhY3Rpb24gPT09ICdleHBvcnQtd29yZCcpewogICAgICAgIGV4cG9ydFdvcmQocGFuZWxLZXkpOwogICAgICB9IGVsc2UgaWYoYWN0aW9uID09PSAnc2hhcmUnKXsKICAgICAgICBkb1NoYXJlKHBhbmVsS2V5KTsKICAgICAgfQogICAgfSk7CgogICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbihlKXsKICAgICAgdmFyIGluZm9CdG4gPSBlLnRhcmdldC5jbG9zZXN0ICYmIGUudGFyZ2V0LmNsb3Nlc3QoJy5ncnAtaW5mby1idG4nKTsKICAgICAgY2xvc2VUaXAoKTsKICAgICAgaWYoaW5mb0J0bil7CiAgICAgICAgc2hvd1RpcChpbmZvQnRuLCBpbmZvQnRuLmdldEF0dHJpYnV0ZSgnZGF0YS10aXAnKSk7CiAgICAgICAgZS5zdG9wUHJvcGFnYXRpb24oKTsKICAgICAgfQogICAgfSk7CiAgfQoKICBmdW5jdGlvbiByZW5hbWVWYXIocGFuZWxLZXksIG9sZEtleSl7CiAgICB2YXIgaW5wdXQgPSB3aW5kb3cucHJvbXB0KCfsg4gg7ZWt66qpIOydtOumhOydhCDsnoXroKXtlZjshLjsmpQgKOyYiDog7Iug7LKt7J287J6QKScsIG9sZEtleSk7CiAgICBpZihpbnB1dCA9PT0gbnVsbCkgcmV0dXJuOwogICAgdmFyIG5ld0tleSA9IGlucHV0LnJlcGxhY2UoL1t7fV0vZywnJykudHJpbSgpOwogICAgaWYoIW5ld0tleSl7IHNob3dUb2FzdCgn7J2066aE7J2EIOyeheugpe2VtOyjvOyEuOyalCcpOyByZXR1cm47IH0KICAgIGlmKG5ld0tleSA9PT0gb2xkS2V5KSByZXR1cm47CiAgICBpZihuZXdLZXkgPT09ICfsnbTrpoQnKXsgc2hvd1RvYXN0KCci7J2066aEIuydgCDsnbTrr7gg7IKs7JqpIOykkeyduCDsnbTrpoTsnoXri4jri6QnKTsgcmV0dXJuOyB9CiAgICB2YXIgZXhpc3RpbmcgPSBleHRyYWN0VmFycyhzdGF0ZVtwYW5lbEtleV0udGVtcGxhdGUpOwogICAgaWYoZXhpc3RpbmcuaW5kZXhPZihuZXdLZXkpICE9PSAtMSl7IHNob3dUb2FzdCgn7J2066+4IOyCrOyaqSDspJHsnbgg7ZWt66qpIOydtOumhOyeheuLiOuLpCcpOyByZXR1cm47IH0KICAgIHN0YXRlW3BhbmVsS2V5XS50ZW1wbGF0ZSA9IHN0YXRlW3BhbmVsS2V5XS50ZW1wbGF0ZS5zcGxpdCgne3snK29sZEtleSsnfX0nKS5qb2luKCd7eycrbmV3S2V5Kyd9fScpOwogICAgc3RhdGVbcGFuZWxLZXldLnJvd3MuZm9yRWFjaChmdW5jdGlvbihyKXsKICAgICAgaWYoT2JqZWN0LnByb3RvdHlwZS5oYXNPd25Qcm9wZXJ0eS5jYWxsKHIudmFycywgb2xkS2V5KSl7CiAgICAgICAgci52YXJzW25ld0tleV0gPSByLnZhcnNbb2xkS2V5XTsKICAgICAgICBkZWxldGUgci52YXJzW29sZEtleV07CiAgICAgIH0KICAgIH0pOwogICAgbWFya0RpcnR5KCk7CiAgICByZW5kZXIoKTsKICAgIHNob3dUb2FzdCgn7ZWt66qpIOydtOumhOydhCDrs4Dqsr3tlojsirXri4jri6QnKTsKICB9CgogIGZ1bmN0aW9uIGFwcGx5UGFzdGUocGFuZWxLZXksIGRlZiwgdGV4dCl7CiAgICBpZighdGV4dCB8fCAhdGV4dC50cmltKCkpIHJldHVybjsKICAgIHZhciB2YXJzID0gZXh0cmFjdFZhcnMoc3RhdGVbcGFuZWxLZXldLnRlbXBsYXRlKTsKICAgIHZhciBsaW5lcyA9IHRleHQuc3BsaXQoL1xyP1xuLykuZmlsdGVyKGZ1bmN0aW9uKGwpeyByZXR1cm4gbC50cmltKCkgIT09ICcnOyB9KTsKICAgIHZhciBuZXdSb3dzID0gbGluZXMubWFwKGZ1bmN0aW9uKGxpbmUpewogICAgICB2YXIgY29scyA9IGxpbmUuc3BsaXQoJ1x0Jyk7CiAgICAgIHZhciByb3cgPSBibGFua1JvdygpOwogICAgICB2YXIgY2kgPSAwOwogICAgICByb3cubmFtZSA9IGNvbHNbY2ldIHx8ICcnOyBjaSsrOwogICAgICBpZihkZWYuaGFzQ29udGFjdCl7IHJvdy5jb250YWN0ID0gY29sc1tjaV0gfHwgJyc7IGNpKys7IH0KICAgICAgdmFycy5mb3JFYWNoKGZ1bmN0aW9uKHYpewogICAgICAgIHJvdy52YXJzW3ZdID0gY29sc1tjaV0gfHwgJyc7CiAgICAgICAgY2krKzsKICAgICAgfSk7CiAgICAgIHJldHVybiByb3c7CiAgICB9KTsKICAgIHN0YXRlW3BhbmVsS2V5XS5yb3dzID0gbmV3Um93cy5sZW5ndGggPyBuZXdSb3dzIDogW2JsYW5rUm93KCldOwogIH0KCiAgZnVuY3Rpb24gaW5zZXJ0QXRDdXJzb3IodGEsIHRleHQpewogICAgaWYoZG9jdW1lbnQuYWN0aXZlRWxlbWVudCAhPT0gdGEpeyB0YS52YWx1ZSArPSB0ZXh0OyByZXR1cm47IH0KICAgIHZhciBzdGFydCA9IHRhLnNlbGVjdGlvblN0YXJ0LCBlbmQgPSB0YS5zZWxlY3Rpb25FbmQ7CiAgICB0YS52YWx1ZSA9IHRhLnZhbHVlLnNsaWNlKDAsc3RhcnQpICsgdGV4dCArIHRhLnZhbHVlLnNsaWNlKGVuZCk7CiAgICB0YS5zZWxlY3Rpb25TdGFydCA9IHRhLnNlbGVjdGlvbkVuZCA9IHN0YXJ0ICsgdGV4dC5sZW5ndGg7CiAgfQoKICBmdW5jdGlvbiBleHBvcnRUeHQocGFuZWxLZXkpewogICAgdmFyIHMgPSBzdGF0ZVtwYW5lbEtleV07CiAgICB2YXIgcm93cyA9IGdldEV4cG9ydFJvd3MocGFuZWxLZXkpOwogICAgdmFyIGNvbnRlbnQgPSByb3dzLm1hcChmdW5jdGlvbihyKXsKICAgICAgcmV0dXJuICdbJyArIChyLm5hbWV8fCfsnbTrpoTsl4bsnYwnKSArICddXG4nICsgbWVyZ2VUZW1wbGF0ZShzLnRlbXBsYXRlLCByKTsKICAgIH0pLmpvaW4oJ1xuXG4tLS0tLS0tLS0tXG5cbicpOwogICAgdmFyIHcgPSB3aW5kb3cub3BlbignJywgJ19ibGFuaycpOwogICAgaWYoIXcpeyBzaG93VG9hc3QoJ+2MneyXheydtCDssKjri6jrkJjsl4jsirXri4jri6QnKTsgcmV0dXJuOyB9CiAgICB3LmRvY3VtZW50LndyaXRlKCc8cHJlIHN0eWxlPSJ3aGl0ZS1zcGFjZTpwcmUtd3JhcDtmb250LXNpemU6MTVweDtwYWRkaW5nOjE2cHg7Zm9udC1mYW1pbHk6c2Fucy1zZXJpZjsiPicgKyBlc2NhcGVIdG1sKGNvbnRlbnQpICsgJzwvcHJlPjxwIHN0eWxlPSJ0ZXh0LWFsaWduOmNlbnRlcjtjb2xvcjojODg4O2ZvbnQtc2l6ZToxMnB4OyI+7YWN7Iqk7Yq466W8IOq4uOqyjCDriIzrn6wg7KCE7LK0IOyEoO2DnSDtm4Qg67O17IKs7ZWY6rGw64KYLCDruIzrnbzsmrDsoIAg7KCA7J6lIOq4sOuKpeydhCDsgqzsmqntlZjshLjsmpQuPC9wPicpOwogICAgdy5kb2N1bWVudC5jbG9zZSgpOwogIH0KCiAgZnVuY3Rpb24gZXhwb3J0UHJpbnQocGFuZWxLZXkpewogICAgdmFyIHMgPSBzdGF0ZVtwYW5lbEtleV07CiAgICB2YXIgcm93cyA9IGdldEV4cG9ydFJvd3MocGFuZWxLZXkpOwogICAgdmFyIGNvbnRlbnQgPSByb3dzLm1hcChmdW5jdGlvbihyKXsKICAgICAgcmV0dXJuICc8ZGl2IHN0eWxlPSJwYWdlLWJyZWFrLWFmdGVyOmFsd2F5cztwYWRkaW5nOjIwcHg7Ij48aDI+JyArIGVzY2FwZUh0bWwoci5uYW1lfHwn7J2066aE7JeG7J2MJykgKyAnPC9oMj48ZGl2IHN0eWxlPSJ3aGl0ZS1zcGFjZTpwcmUtd3JhcDtmb250LXNpemU6MTVweDtsaW5lLWhlaWdodDoxLjY7Ij4nICsgZXNjYXBlSHRtbChtZXJnZVRlbXBsYXRlKHMudGVtcGxhdGUsIHIpKSArICc8L2Rpdj48L2Rpdj4nOwogICAgfSkuam9pbignJyk7CiAgICB2YXIgdyA9IHdpbmRvdy5vcGVuKCcnLCAnX2JsYW5rJyk7CiAgICBpZighdyl7IHNob3dUb2FzdCgn7Yyd7JeF7J20IOywqOuLqOuQmOyXiOyKteuLiOuLpCcpOyByZXR1cm47IH0KICAgIHcuZG9jdW1lbnQud3JpdGUoJzxodG1sPjxoZWFkPjx0aXRsZT7rs7Tqs6DshJwg7J247IeEPC90aXRsZT48L2hlYWQ+PGJvZHk+JyArIGNvbnRlbnQgKyAnPC9ib2R5PjwvaHRtbD4nKTsKICAgIHcuZG9jdW1lbnQuY2xvc2UoKTsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24oKXsgdy5mb2N1cygpOyB3LnByaW50KCk7IH0sIDMwMCk7CiAgfQoKICBmdW5jdGlvbiBleHBvcnRXb3JkKHBhbmVsS2V5KXsKICAgIGlmKHR5cGVvZiBodG1sRG9jeCA9PT0gJ3VuZGVmaW5lZCcpeyBzaG93VG9hc3QoJ+ybjOuTnCDrs4DtmZgg65287J2067iM65+s66asIOuhnOuUqeykkSwg7J6g7Iuc7ZuEIOuLpOyLnCDsi5zrj4TtlbTso7zshLjsmpQnKTsgcmV0dXJuOyB9CiAgICB2YXIgcyA9IHN0YXRlW3BhbmVsS2V5XTsKICAgIHZhciByb3dzID0gZ2V0RXhwb3J0Um93cyhwYW5lbEtleSk7CiAgICB2YXIgYm9keUh0bWwgPSByb3dzLm1hcChmdW5jdGlvbihyKXsKICAgICAgdmFyIG1lcmdlZCA9IGVzY2FwZUh0bWwobWVyZ2VUZW1wbGF0ZShzLnRlbXBsYXRlLCByKSkucmVwbGFjZSgvXG4vZywgJzxicj4nKTsKICAgICAgcmV0dXJuICc8aDIgc3R5bGU9ImNvbG9yOiM1YjIxYjY7Ij4nICsgZXNjYXBlSHRtbChyLm5hbWV8fCfsnbTrpoTsl4bsnYwnKSArICc8L2gyPicKICAgICAgICArICc8cCBzdHlsZT0iZm9udC1zaXplOjE0cHg7bGluZS1oZWlnaHQ6MS43OyI+JyArIG1lcmdlZCArICc8L3A+JwogICAgICAgICsgJzxiciBjbGVhcj0iYWxsIiBzdHlsZT0icGFnZS1icmVhay1iZWZvcmU6YWx3YXlzOyI+JzsKICAgIH0pLmpvaW4oJycpOwogICAgdmFyIGZ1bGxIdG1sID0gJzxodG1sPjxoZWFkPjxtZXRhIGNoYXJzZXQ9InV0Zi04Ij48dGl0bGU+67O06rOg7IScPC90aXRsZT48L2hlYWQ+PGJvZHk+JyArIGJvZHlIdG1sICsgJzwvYm9keT48L2h0bWw+JzsKICAgIHRyeXsKICAgICAgdmFyIGJsb2IgPSBodG1sRG9jeC5hc0Jsb2IoZnVsbEh0bWwpOwogICAgICB2YXIgZmlsZW5hbWUgPSAn64uo7LK066y46rWs7IOd7ISx6rOE7IKw6riwX1Y0XzI2MDgxMC5kb2MnOwogICAgICB2YXIgdXJsID0gVVJMLmNyZWF0ZU9iamVjdFVSTChibG9iKTsKICAgICAgdmFyIGEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdhJyk7CiAgICAgIGEuaHJlZiA9IHVybDsKICAgICAgYS5kb3dubG9hZCA9IGZpbGVuYW1lOwogICAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKGEpOwogICAgICBhLmNsaWNrKCk7CiAgICAgIGRvY3VtZW50LmJvZHkucmVtb3ZlQ2hpbGQoYSk7CiAgICAgIHNldFRpbWVvdXQoZnVuY3Rpb24oKXsgVVJMLnJldm9rZU9iamVjdFVSTCh1cmwpOyB9LCA0MDAwKTsKICAgICAgc2hvd1RvYXN0KCfsm4zrk5wg7YyM7J287J2EIOyggOyepe2WiOyKteuLiOuLpCcpOwogICAgfWNhdGNoKGUpewogICAgICBzaG93VG9hc3QoJ+ybjOuTnCDtjIzsnbwg7IOd7ISx7JeQIOyLpO2MqO2WiOyKteuLiOuLpCcpOwogICAgfQogIH0KCiAgZnVuY3Rpb24gZG9TaGFyZShwYW5lbEtleSl7CiAgICBpZih0eXBlb2YgTFpTdHJpbmcgPT09ICd1bmRlZmluZWQnKXsgc2hvd1RvYXN0KCfslZXstpUg65287J2067iM65+s66asIOuhnOuUqSDrjIDquLDspJEsIOyeoOyLnO2bhCDri6Tsi5wg7Iuc64+EJyk7IHJldHVybjsgfQogICAgdmFyIHBheWxvYWQgPSBKU09OLnN0cmluZ2lmeShzdGF0ZVtwYW5lbEtleV0pOwogICAgdmFyIGNvbXByZXNzZWQgPSBMWlN0cmluZy5jb21wcmVzc1RvRW5jb2RlZFVSSUNvbXBvbmVudChwYXlsb2FkKTsKICAgIHZhciBiYXNlID0gbG9jYXRpb24ub3JpZ2luICsgbG9jYXRpb24ucGF0aG5hbWU7CiAgICB2YXIgc2hhcmVVcmwgPSBiYXNlICsgJz9ncnBfJyArIHBhbmVsS2V5ICsgJz0nICsgY29tcHJlc3NlZDsKICAgIHZhciBwYW5lbEVsID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignW2RhdGEtcGFuZWw9IicrcGFuZWxLZXkrJyJdJyk7CiAgICB2YXIgcXJib3ggPSBwYW5lbEVsLnF1ZXJ5U2VsZWN0b3IoJ1tkYXRhLXJvbGU9InFyYm94Il0nKTsKICAgIHFyYm94LmlubmVySFRNTCA9ICcnOwoKICAgIHZhciBzaG93UmVzdWx0ID0gZnVuY3Rpb24oZmluYWxVcmwpewogICAgICB2YXIgYm94ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnZGl2Jyk7CiAgICAgIGJveC5zdHlsZS5mb250U2l6ZSA9ICcxMnB4JzsKICAgICAgYm94LnN0eWxlLndvcmRCcmVhayA9ICdicmVhay1hbGwnOwogICAgICBib3guc3R5bGUubWFyZ2luID0gJzZweCAwJzsKICAgICAgYm94LnN0eWxlLmNvbG9yID0gJyM0YzFkOTUnOwogICAgICBib3gudGV4dENvbnRlbnQgPSBmaW5hbFVybDsKICAgICAgcXJib3guYXBwZW5kQ2hpbGQoYm94KTsKICAgICAgdmFyIGNvcHlCdG4gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdidXR0b24nKTsKICAgICAgY29weUJ0bi5jbGFzc05hbWUgPSAnZ3JwLWJ0biBncnAtYnRuLW91dGxpbmUnOwogICAgICBjb3B5QnRuLnRleHRDb250ZW50ID0gJ+unge2BrCDrs7XsgqwnOwogICAgICBhZGRUYXAoY29weUJ0biwgZnVuY3Rpb24oKXsgY29weVRleHQoZmluYWxVcmwpOyB9KTsKICAgICAgcXJib3guYXBwZW5kQ2hpbGQoY29weUJ0bik7CiAgICAgIGlmKHR5cGVvZiBRUkNvZGUgIT09ICd1bmRlZmluZWQnKXsKICAgICAgICB2YXIgcXJEaXYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTsKICAgICAgICBxckRpdi5zdHlsZS5tYXJnaW5Ub3AgPSAnOHB4JzsKICAgICAgICBxckRpdi5zdHlsZS5kaXNwbGF5ID0gJ2lubGluZS1ibG9jayc7CiAgICAgICAgcXJib3guYXBwZW5kQ2hpbGQocXJEaXYpOwogICAgICAgIG5ldyBRUkNvZGUocXJEaXYsIHsgdGV4dDogZmluYWxVcmwsIHdpZHRoOjEyOCwgaGVpZ2h0OjEyOCB9KTsKICAgICAgfQogICAgfTsKCiAgICBpZihzaGFyZVVybC5sZW5ndGggPiAzMDApewogICAgICBmZXRjaCgnaHR0cHM6Ly90aW55dXJsLmNvbS9hcGktY3JlYXRlLnBocD91cmw9JyArIGVuY29kZVVSSUNvbXBvbmVudChzaGFyZVVybCkpCiAgICAgICAgLnRoZW4oZnVuY3Rpb24ocmVzKXsgcmV0dXJuIHJlcy50ZXh0KCk7IH0pCiAgICAgICAgLnRoZW4oZnVuY3Rpb24oc2hvcnQpewogICAgICAgICAgc2hvd1RvYXN0KCfso7zshozqsIAg6ri47Ja0IOynp+ydgCDrp4HtgazroZwg67OA7ZmY7ZaI7Iq164uI64ukJyk7CiAgICAgICAgICBzaG93UmVzdWx0KHNob3J0KTsKICAgICAgICB9KQogICAgICAgIC5jYXRjaChmdW5jdGlvbigpewogICAgICAgICAgc2hvd1Jlc3VsdChzaGFyZVVybCk7CiAgICAgICAgfSk7CiAgICB9IGVsc2UgewogICAgICBzaG93UmVzdWx0KHNoYXJlVXJsKTsKICAgIH0KICB9CgogIGZ1bmN0aW9uIGRvU2hhcmVBbGwoKXsKICAgIHZhciBxcmJveCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNncnAtc2hhcmUtbW9kYWwgW2RhdGEtcm9sZT0icXJib3gtYWxsIl0nKTsKICAgIHFyYm94LmlubmVySFRNTCA9ICcnOwogICAgaWYodHlwZW9mIExaU3RyaW5nID09PSAndW5kZWZpbmVkJyl7CiAgICAgIHFyYm94LmlubmVySFRNTCA9ICc8ZGl2IHN0eWxlPSJmb250LXNpemU6MTNweDtjb2xvcjojOWNhM2FmOyI+7JWV7LaVIOudvOydtOu4jOufrOumrCDroZzrlKnspJEsIOyeoOyLnO2bhCDri6Tsi5wg7Je07Ja07KO87IS47JqULjwvZGl2Pic7CiAgICAgIHJldHVybjsKICAgIH0KICAgIHZhciBwYXlsb2FkID0gSlNPTi5zdHJpbmdpZnkoc3RhdGUpOwogICAgdmFyIGNvbXByZXNzZWQgPSBMWlN0cmluZy5jb21wcmVzc1RvRW5jb2RlZFVSSUNvbXBvbmVudChwYXlsb2FkKTsKICAgIHZhciBiYXNlID0gbG9jYXRpb24ub3JpZ2luICsgbG9jYXRpb24ucGF0aG5hbWU7CiAgICB2YXIgc2hhcmVVcmwgPSBiYXNlICsgJz9ncnBBbGw9JyArIGNvbXByZXNzZWQ7CgogICAgdmFyIHNob3dSZXN1bHQgPSBmdW5jdGlvbihmaW5hbFVybCl7CiAgICAgIHZhciBib3ggPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTsKICAgICAgYm94LnN0eWxlLmZvbnRTaXplID0gJzEycHgnOwogICAgICBib3guc3R5bGUud29yZEJyZWFrID0gJ2JyZWFrLWFsbCc7CiAgICAgIGJveC5zdHlsZS5tYXJnaW4gPSAnNnB4IDAnOwogICAgICBib3guc3R5bGUuY29sb3IgPSAnIzRjMWQ5NSc7CiAgICAgIGJveC50ZXh0Q29udGVudCA9IGZpbmFsVXJsOwogICAgICBxcmJveC5hcHBlbmRDaGlsZChib3gpOwogICAgICB2YXIgY29weUJ0biA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2J1dHRvbicpOwogICAgICBjb3B5QnRuLmNsYXNzTmFtZSA9ICdncnAtYnRuIGdycC1idG4tb3V0bGluZSc7CiAgICAgIGNvcHlCdG4udGV4dENvbnRlbnQgPSAn66eB7YGsIOuzteyCrCc7CiAgICAgIGFkZFRhcChjb3B5QnRuLCBmdW5jdGlvbigpeyBjb3B5VGV4dChmaW5hbFVybCk7IH0pOwogICAgICBxcmJveC5hcHBlbmRDaGlsZChjb3B5QnRuKTsKICAgICAgaWYodHlwZW9mIFFSQ29kZSAhPT0gJ3VuZGVmaW5lZCcpewogICAgICAgIHZhciBxckRpdiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2RpdicpOwogICAgICAgIHFyRGl2LnN0eWxlLm1hcmdpblRvcCA9ICc4cHgnOwogICAgICAgIHFyRGl2LnN0eWxlLmRpc3BsYXkgPSAnaW5saW5lLWJsb2NrJzsKICAgICAgICBxcmJveC5hcHBlbmRDaGlsZChxckRpdik7CiAgICAgICAgbmV3IFFSQ29kZShxckRpdiwgeyB0ZXh0OiBmaW5hbFVybCwgd2lkdGg6MTQwLCBoZWlnaHQ6MTQwIH0pOwogICAgICB9CiAgICB9OwoKICAgIGlmKHNoYXJlVXJsLmxlbmd0aCA+IDMwMCl7CiAgICAgIGZldGNoKCdodHRwczovL3Rpbnl1cmwuY29tL2FwaS1jcmVhdGUucGhwP3VybD0nICsgZW5jb2RlVVJJQ29tcG9uZW50KHNoYXJlVXJsKSkKICAgICAgICAudGhlbihmdW5jdGlvbihyZXMpeyByZXR1cm4gcmVzLnRleHQoKTsgfSkKICAgICAgICAudGhlbihmdW5jdGlvbihzaG9ydCl7CiAgICAgICAgICBzaG93UmVzdWx0KHNob3J0KTsKICAgICAgICB9KQogICAgICAgIC5jYXRjaChmdW5jdGlvbigpewogICAgICAgICAgc2hvd1Jlc3VsdChzaGFyZVVybCk7CiAgICAgICAgfSk7CiAgICB9IGVsc2UgewogICAgICBzaG93UmVzdWx0KHNoYXJlVXJsKTsKICAgIH0KICB9CgogIGZ1bmN0aW9uIHJlc3RvcmVGcm9tVXJsKCl7CiAgICB2YXIgcXMgPSBsb2NhdGlvbi5zZWFyY2g7CiAgICBpZighcXMpIHJldHVybjsKICAgIHZhciBhbGxNYXRjaCA9IHFzLm1hdGNoKC9bPyZdZ3JwQWxsPShbXiZdKykvKTsKICAgIGlmKGFsbE1hdGNoICYmIHR5cGVvZiBMWlN0cmluZyAhPT0gJ3VuZGVmaW5lZCcpewogICAgICB0cnl7CiAgICAgICAgdmFyIGFsbEpzb24gPSBMWlN0cmluZy5kZWNvbXByZXNzRnJvbUVuY29kZWRVUklDb21wb25lbnQoYWxsTWF0Y2hbMV0pOwogICAgICAgIGlmKGFsbEpzb24pewogICAgICAgICAgdmFyIGFsbFBhcnNlZCA9IEpTT04ucGFyc2UoYWxsSnNvbik7CiAgICAgICAgICBpZihhbGxQYXJzZWQgJiYgYWxsUGFyc2VkLnNtcyAmJiBhbGxQYXJzZWQuZW1haWwgJiYgYWxsUGFyc2VkLnJlcG9ydCl7CiAgICAgICAgICAgIHN0YXRlID0gYWxsUGFyc2VkOwogICAgICAgICAgICByZXR1cm47CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9Y2F0Y2goZSl7fQogICAgfQogICAgVEFCX0RFRlMuZm9yRWFjaChmdW5jdGlvbihkZWYpewogICAgICB2YXIgcmUgPSBuZXcgUmVnRXhwKCdbPyZdZ3JwXycgKyBkZWYua2V5ICsgJz0oW14mXSspJyk7CiAgICAgIHZhciBtID0gcXMubWF0Y2gocmUpOwogICAgICBpZihtICYmIHR5cGVvZiBMWlN0cmluZyAhPT0gJ3VuZGVmaW5lZCcpewogICAgICAgIHRyeXsKICAgICAgICAgIHZhciBqc29uID0gTFpTdHJpbmcuZGVjb21wcmVzc0Zyb21FbmNvZGVkVVJJQ29tcG9uZW50KG1bMV0pOwogICAgICAgICAgaWYoanNvbil7CiAgICAgICAgICAgIHZhciBwYXJzZWQgPSBKU09OLnBhcnNlKGpzb24pOwogICAgICAgICAgICBpZihwYXJzZWQgJiYgcGFyc2VkLnJvd3MpIHN0YXRlW2RlZi5rZXldID0gcGFyc2VkOwogICAgICAgICAgfQogICAgICAgIH1jYXRjaChlKXt9CiAgICAgIH0KICAgIH0pOwogIH0KCiAgdmFyIGN1cnJlbnRUaXBFbCA9IG51bGw7CiAgZnVuY3Rpb24gc2hvd1RpcChhbmNob3IsIHRleHQpewogICAgdmFyIHRpcCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2RpdicpOwogICAgdGlwLmNsYXNzTmFtZSA9ICdncnAtdGlwLXBvcCc7CiAgICB0aXAudGV4dENvbnRlbnQgPSB0ZXh0OwogICAgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZCh0aXApOwogICAgdmFyIHIgPSBhbmNob3IuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7CiAgICB2YXIgdG9wID0gci5ib3R0b20gKyA2OwogICAgdmFyIGxlZnQgPSBNYXRoLm1pbihNYXRoLm1heCg4LCByLmxlZnQgLSAyMCksIHdpbmRvdy5pbm5lcldpZHRoIC0gMjQ4KTsKICAgIHRpcC5zdHlsZS50b3AgPSB0b3AgKyAncHgnOwogICAgdGlwLnN0eWxlLmxlZnQgPSBsZWZ0ICsgJ3B4JzsKICAgIGN1cnJlbnRUaXBFbCA9IHRpcDsKICB9CiAgZnVuY3Rpb24gY2xvc2VUaXAoKXsKICAgIGlmKGN1cnJlbnRUaXBFbCAmJiBjdXJyZW50VGlwRWwucGFyZW50Tm9kZSl7CiAgICAgIGN1cnJlbnRUaXBFbC5wYXJlbnROb2RlLnJlbW92ZUNoaWxkKGN1cnJlbnRUaXBFbCk7CiAgICB9CiAgICBjdXJyZW50VGlwRWwgPSBudWxsOwogIH0KCiAgZnVuY3Rpb24gYWRkVGFwKGVsLCBoYW5kbGVyKXsKICAgIGlmKCFlbCkgcmV0dXJuOwogICAgZWwuYWRkRXZlbnRMaXN0ZW5lcigndG91Y2hlbmQnLCBmdW5jdGlvbihlKXsKICAgICAgX3RvdWNoaW5nID0gdHJ1ZTsKICAgICAgaGFuZGxlcihlKTsKICAgICAgc2V0VGltZW91dChmdW5jdGlvbigpeyBfdG91Y2hpbmcgPSBmYWxzZTsgfSwgMzUwKTsKICAgIH0sIHtwYXNzaXZlOnRydWV9KTsKICAgIGVsLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24oZSl7CiAgICAgIGlmKF90b3VjaGluZykgcmV0dXJuOwogICAgICBoYW5kbGVyKGUpOwogICAgfSk7CiAgfQoKICBmdW5jdGlvbiBsb2FkU2NyaXB0KHNyYywgY2IpewogICAgdmFyIHMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdzY3JpcHQnKTsKICAgIHMuc3JjID0gc3JjOwogICAgcy5vbmxvYWQgPSBjYjsKICAgIHMub25lcnJvciA9IGNiOwogICAgZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChzKTsKICB9CgogIGxvYWRTY3JpcHQoJ2h0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vbHotc3RyaW5nQDEuNS4wL2xpYnMvbHotc3RyaW5nLm1pbi5qcycsIGZ1bmN0aW9uKCl7CiAgICBsb2FkU2NyaXB0KCdodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL3FyY29kZWpzQDEuMC4wL3FyY29kZS5taW4uanMnLCBmdW5jdGlvbigpewogICAgICBsb2FkU2NyaXB0KCdodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2h0bWwtZG9jeC1qc0AwLjMuMS9kaXN0L2h0bWwtZG9jeC5qcycsIGZ1bmN0aW9uKCl7CiAgICAgICAgcmVzdG9yZUZyb21VcmwoKTsKICAgICAgICByZW5kZXIoKTsKICAgICAgICBiaW5kT25jZSgpOwogICAgICB9KTsKICAgIH0pOwogIH0pOwoKfSkoKTsK"; function __b64DecodeUnicode(str){ return decodeURIComponent(atob(str).split('').map(function(c){ return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join('')); } try{ var __src = __b64DecodeUnicode(__b64); (new Function(__src))(); }catch(e){ if(window.console) console.error('grp-app load error', e); } })(); </script> 모두의계산기 단체문구 보고서 업무 웹앱 이메일 최매슨생 https://0-1.kr/123 https://0-1.kr/123#entry123comment Tue, 11 Aug 2026 11:03:51 +0900 https://0-1.kr/122 <p data-ke-size="size16">&nbsp;</p> <div id="ce-root"> <style> #ce-root{--bg:#f0f2f5;--card:#fff;--header:#0a0f1e;--accent:#2563eb;--accent2:#10b981;--accent3:#f59e0b;--danger:#ef4444;--text:#0f172a;--text2:#64748b;--border:#e2e8f0;--radius:4px;--font:'Pretendard',-apple-system,sans-serif; width:100%;max-width:720px;margin:0 auto;box-sizing:border-box;font-family:var(--font);background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06);} #ce-root *{box-sizing:border-box;} .ce-badge{display:inline-block;background:#fef3c7;color:#92400e;font-size:10px;font-weight:800;padding:2px 7px;border-radius:3px;margin-left:5px;vertical-align:middle;} .ce-header{background:var(--header);padding:16px 18px 12px;color:#fff;} .ce-toprow{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:6px;} .ce-title{font-size:14px;font-weight:800;letter-spacing:-.3px;color:#cbd5e1;flex-shrink:0;} .ce-era-toggle{display:flex;background:rgba(255,255,255,.1);border-radius:3px;padding:2px;flex-shrink:0;} .ce-era-btn{border:none;background:transparent;color:#94a3b8;font-size:11px;font-weight:700;padding:5px 10px;border-radius:2px;cursor:pointer;font-family:var(--font);} .ce-era-btn.active{background:var(--accent);color:#fff;} .ce-country-sel{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:3px;padding:7px 8px;font-size:11px;font-weight:700;font-family:var(--font);width:100%;margin-bottom:10px;} .ce-country-sel option{color:#0f172a;} /* 오늘 날짜 네브 */ .ce-nav-wrap{display:flex;align-items:center;justify-content:center;gap:12px;padding:2px 0 10px;} .ce-nav-btn{background:rgba(255,255,255,.1);border:none;color:#fff;width:28px;height:28px;border-radius:3px;font-size:12px;cursor:pointer;flex-shrink:0;} .ce-nav-label{font-size:16px;font-weight:800;text-align:center;} /* 주차/음력 줄 */ .ce-wl-wrap{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border-radius:3px;padding:10px 12px;} .ce-wl-today-btn{background:var(--accent);border:none;color:#fff;font-size:11px;font-weight:800;padding:7px 10px;border-radius:3px;cursor:pointer;flex-shrink:0;} .ce-wl-line{flex:1;text-align:center;font-size:13px;font-weight:800;color:#fef3c7;cursor:pointer;line-height:1.6;} .ce-wl-part{font-size:13px;font-weight:800;color:#fef3c7;} .ce-wl-toggle{background:rgba(255,255,255,.1);border:none;color:#fff;width:28px;height:28px;border-radius:3px;font-size:11px;cursor:pointer;flex-shrink:0;} /* 달력 그리드 */ .ce-cal-widget{background:var(--card);} .ce-cal-widget.collapsed .ce-cal-body{display:none;} .ce-cal-head{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-bottom:1px solid var(--border);} .ce-cal-nav{background:var(--bg);border:1px solid var(--border);width:28px;height:28px;border-radius:3px;font-size:12px;cursor:pointer;color:var(--text2);} .ce-cal-sel{border:1px solid var(--border);border-radius:3px;padding:6px 8px;font-size:12.5px;font-weight:700;font-family:var(--font);background:var(--card);color:var(--text);} .ce-cal-grid{display:grid;grid-template-columns:48px repeat(7,1fr);padding:6px 6px 12px;} .ce-cal-wlabel{display:flex;align-items:center;justify-content:center;font-size:9.5px;color:var(--text2);font-weight:700;border-right:1px solid var(--border);} .ce-cal-dow{text-align:center;font-size:11px;font-weight:700;color:var(--text2);padding:5px 0;} .ce-cal-dow.sun{color:#ef4444;} .ce-cal-dow.sat{color:#2563eb;} .ce-cal-rowlabel{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;color:var(--text2);font-weight:700;line-height:1.4;padding:4px 2px;border-right:1px solid var(--border);} .ce-cal-rowlabel .yw{color:var(--accent);font-size:11px;font-weight:900;} .ce-cal-cell{text-align:center;font-size:12.5px;font-weight:600;padding:8px 0;border-radius:3px;cursor:pointer;color:var(--text);} .ce-cal-cell.empty{cursor:default;} .ce-cal-cell.today{background:var(--accent);color:#fff;font-weight:800;} .ce-cal-cell.selected:not(.today){background:#dbeafe;font-weight:800;} .ce-cal-cell.sun{color:#ef4444;} .ce-cal-cell.sat{color:#2563eb;} .ce-cal-cell.today.sun,.ce-cal-cell.today.sat{color:#fff;} /* 아코디언 섹션 */ .ce-acc{border-top:6px solid var(--bg);background:var(--card);} .ce-acc-head{width:100%;text-align:left;background:var(--card);border:none;padding:14px 16px;font-size:13.5px;font-weight:800;color:var(--text);display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:var(--font);} .ce-acc-arrow{font-size:10px;color:var(--text2);transition:transform .2s;flex-shrink:0;margin-left:8px;} .ce-acc-head.open .ce-acc-arrow{transform:rotate(180deg);} .ce-acc-body{display:none;padding:0 16px 16px;font-size:12px;line-height:1.75;color:var(--text2);} .ce-acc-body.open{display:block;} .ce-acc-body b{color:var(--text);} .ce-std-row{background:var(--bg);border-radius:3px;padding:9px 11px;margin-top:8px;border:1px solid var(--border);} .ce-std-row div:first-child{font-weight:800;color:var(--text);font-size:12px;margin-bottom:2px;} .ce-sub{font-size:11px;color:var(--text2);margin:0 0 9px;line-height:1.6;} .ce-mart-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px dashed var(--border);font-size:12.5px;} .ce-mart-row:last-child{border-bottom:none;} .ce-mart-status{font-weight:800;font-size:11px;padding:3px 9px;border-radius:3px;background:#fee2e2;color:#b91c1c;} .ce-mart-region{display:flex;gap:6px;margin-bottom:10px;} .ce-mart-region button{flex:1;border:1px solid var(--border);background:var(--bg);border-radius:3px;padding:8px 4px;font-size:11px;font-weight:700;color:var(--text2);cursor:pointer;font-family:var(--font);} .ce-mart-region button.active{background:var(--accent);color:#fff;border-color:var(--accent);} .ce-disclaimer{font-size:10.5px;color:#94a3b8;line-height:1.6;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);} /* 모바일(휴대폰) 반응형: 세로/가로 모드 모두 여백·글자 살짝 축소 */ @media (max-width:600px){ #ce-root{border-radius:0;} .ce-header{padding:12px 12px 10px;} .ce-nav-label{font-size:14.5px;} .ce-wl-line,.ce-wl-part{font-size:12px;} .ce-cal-grid{grid-template-columns:38px repeat(7,1fr);padding:4px 3px 8px;} .ce-cal-cell{font-size:11.5px;padding:7px 0;} .ce-cal-rowlabel{font-size:8px;} .ce-cal-rowlabel .yw{font-size:9.5px;} .ce-acc-head{padding:12px 12px;font-size:13px;} .ce-acc-body{padding:0 12px 14px;} } </style> <div class="ce-header"> <div class="ce-toprow"> <div class="ce-title"> 오늘의 달력정보</div> <div class="ce-era-toggle"> <button class="ce-era-btn active" id="ceEraAd" onclick="ceSetEra('ad')">서기</button> <button class="ce-era-btn" id="ceEraDangi" onclick="ceSetEra('dangi')">단기</button> </div> </div> <select class="ce-country-sel" id="ceCountrySel" onchange="ceOnCountryChange(this.value)"> <option value="kr"> 한국 (일요일 표시 · 주차는 ISO 8601 기준)</option> <option value="jp"> 일본 (일요일 표시 · 주차는 JIS 규격=ISO 기준)</option> <option value="cn"> 중국 (월요일 표시 · 주차는 ISO 기준)</option> <option value="us"> 미국·캐나다 (일요일 시작 · 자체 주차 방식)</option> <option value="me"> 중동권 (토요일 시작 · 자체 주차 방식)</option> </select> <div class="ce-nav-wrap"> <button class="ce-nav-btn" onclick="ceNav(-1)">◀</button> <div class="ce-nav-label" id="ceDateMain">-</div> <button class="ce-nav-btn" onclick="ceNav(1)">▶</button> </div> <div class="ce-wl-wrap"> <button class="ce-wl-today-btn" onclick="ceGoToday()">오늘</button> <div class="ce-wl-line" id="ceWeekLunarLine" onclick="ceToggleCalCollapse()">-</div> <button class="ce-wl-toggle" id="ceCalCollapseBtn" onclick="ceToggleCalCollapse()">▼</button> </div> </div> <div class="ce-cal-widget" id="ceCalWidget"> <div class="ce-cal-head"> <button class="ce-cal-nav" onclick="ceCalPrevMonth()">◀</button> <select class="ce-cal-sel" id="ceCalMonthSel" onchange="ceOnCalMonthSelChange(this.value)"></select> <button class="ce-cal-nav" onclick="ceCalNextMonth()">▶</button> </div> <div class="ce-cal-body"> <div class="ce-cal-grid" id="ceCalGrid"></div> </div> </div> <div class="ce-acc"> <button class="ce-acc-head" onclick="ceToggleAcc(this)"> 나라마다 주차 기준이 왜 다른가요? <span class="ce-acc-arrow">▼</span></button> <div class="ce-acc-body"> 같은 날짜라도 나라마다 "몇 주차"인지, 달력에 한 주를 어떤 요일부터 배열하는지가 다릅니다. 위에서 나라를 바꾸면 큰 주차 숫자와 달력의 요일 순서가 함께 바뀝니다. <div class="ce-std-row"> <div> 한국</div> 공식 산업표준(KS X ISO 8601)은 월요일 시작을 규정하지만, 실제 인쇄되는 달력은 예외적으로 대부분 일요일이 맨 앞입니다. 그래서 이 앱도 "달력은 일요일부터, 주차 숫자는 ISO(월요일·목요일 포함주 기준)"로 표시합니다. </div> <div class="ce-std-row"> <div> 일본</div> 일상적으로 쓰는 달력·노동기준법 관습은 일요일 시작이지만, 산업표준 JIS X 0301은 ISO 8601을 따라 월요일 시작·목요일 포함주 기준을 씁니다. 한국과 마찬가지로 "관습과 표준이 다른" 대표 사례입니다. </div> <div class="ce-std-row"> <div> 중국</div> 달력과 주차 모두 월요일 시작 관습이 일반적이며, 국제표준인 ISO 8601과 크게 다르지 않은 방식을 씁니다. </div> <div class="ce-std-row"> <div> 미국·캐나다</div> 일요일이 한 주의 시작이며, 1월 1일이 포함된 주가 무조건 1주차가 됩니다. 그래서 연말·연초에는 ISO식과 최대 1주까지 차이가 납니다. </div> <div class="ce-std-row"> <div> 중동권</div> 토요일이 한 주의 시작입니다. 사우디아라비아 등 일부 국가에서 사용하며, 1월 1일이 속한 주를 1주차로 보는 방식은 미국식과 비슷합니다. </div> <div class="ce-disclaimer">※ 실제로는 나라·기관별 세부 규정이 더 다양합니다(회계연도 기준 주차 등). 가장 널리 쓰이는 대표 방식만 담았습니다.</div> </div> </div> <div class="ce-acc"> <button class="ce-acc-head" onclick="ceToggleAcc(this)"> 이번주 대형마트 휴무 확인 <span class="ce-badge">예시</span><span class="ce-acc-arrow">▼</span></button> <div class="ce-acc-body"> <div class="ce-sub">대부분 지자체는 매월 <b>둘째·넷째 일요일</b>을 대형마트 의무휴업일로 지정합니다 (지역별로 다른 요일인 경우도 있음).</div> <div class="ce-mart-region"> <button class="active" id="ceMartRegBtn2_4" onclick="ceSetMartRegion('2_4')">대부분 지역 (2·4주 일요일)</button> <button id="ceMartRegBtn1_3" onclick="ceSetMartRegion('1_3')">일부 지역 (1·3주 일요일)</button> </div> <div id="ceMartBody"></div> <div class="ce-disclaimer">※ 실제 휴무일은 지자체 조례·매장별로 다르며 임시 변경될 수 있습니다. 방문 전 해당 지점에 꼭 확인하세요. 다음 단계에서 지역(시/군/구) 선택 기반 실데이터 연동을 검토하겠습니다.</div> </div> </div> </div> <script> (function(){ var ceState = { date: new Date(), era: 'ad', country: 'kr', martRegion: '2_4' }; var ceCal = { year: ceState.date.getFullYear(), month: ceState.date.getMonth() }; var ceCalCollapsed = false; function pad2(n){ return (n<10?'0':'')+n; } function ymdStr(d){ return d.getFullYear()+'-'+pad2(d.getMonth()+1)+'-'+pad2(d.getDate()); } function sameDate(a,b){ return a.getFullYear()===b.getFullYear() && a.getMonth()===b.getMonth() && a.getDate()===b.getDate(); } /* ── 음력 변환 (한국천문연구원 KASI 알고리즘 포팅, 1999~2050년, 기존 앱 원본 로직 그대로 사용) ── */ var LUNAR_BASE_YEAR = 1999; var LUNAR_CUM_BASE = 364880; var SOLAR_CUM_BASE = 364877; var SOLAR_LUNAR_DAY_DIFF = 43; var SOLAR_MONTH_DAYS = [31,28,31,30,31,30,31,31,30,31,30,31,29]; var LUNAR_DATA = [0x82c4092e, 0xc2c40c96, 0x83004e95, 0x82c40d4a, 0x82c60da5, 0xc3002755, 0x82c4056c, 0x83027abb, 0x82c4025d, 0xc2c4092d, 0x83005cab, 0x82c40a95, 0x82c40b4a, 0xc3013b4a, 0x82c60b55, 0x8300955d, 0x82c404ba, 0xc2c60a5b, 0x83005557, 0x82c4052b, 0x82c40a95, 0xc3004b95, 0x82c406aa, 0x82c60ad5, 0x830026b5, 0xc2c404b6, 0x83006a6e, 0x82c60a57, 0x82c40527, 0xc2fe56a6, 0x82c60d93, 0x82c405aa, 0x83003b6a, 0xc2c6096d, 0x8300b4af, 0x82c404ae, 0x82c40a4d, 0xc3016d0d, 0x82c40d25, 0x82c40d52, 0x83005dd4, 0xc2c60b6a, 0x82c6096d, 0x8300255b, 0x82c4049b, 0xc3007a57, 0x82c40a4b, 0x82c40b25, 0x83015b25, 0xc2c406d4, 0x82c60ada, 0x830138b6]; function _lunarData(y){ return LUNAR_DATA[y-LUNAR_BASE_YEAR]; } function _lunarInterMonth(d){ return (d>>12)&0x0F; } function _lunarDays(year, month, isInter){ var d = _lunarData(year); if (month !== undefined && isInter !== undefined) { if (isInter && _lunarInterMonth(d)===month) return ((d>>16)&0x01) ? 30:29; return ((d>>(12-month))&0x01) ? 30:29; } return (d>>17)&0x1FF; } function _solarInterYear(d){ return ((d>>30)&0x01) > 0; } function _solarDays(year, month){ var d = _lunarData(year); if (month !== undefined) return (month===2 && _solarInterYear(d)) ? SOLAR_MONTH_DAYS[12] : SOLAR_MONTH_DAYS[month-1]; return _solarInterYear(d) ? 366 : 365; } function _lunarDaysBeforeYear(year){ var s=LUNAR_CUM_BASE; for (var y=LUNAR_BASE_YEAR;y<=year;y++) s+=_lunarDays(y); return s; } function _solarDaysBeforeYear(year){ var s=SOLAR_CUM_BASE; for (var y=LUNAR_BASE_YEAR;y<=year;y++) s+=_solarDays(y); return s; } function _lunarDaysBeforeMonth(year, month, isInter){ var s=0; if (year>=LUNAR_BASE_YEAR && month>0) { for (var m=1;m<=month;m++) s+=_lunarDays(year,m,false); if (isInter) { var im=_lunarInterMonth(_lunarData(year)); if (im>0 && im<month+1) s+=_lunarDays(year,im,true); } } return s; } function _solarDaysBeforeMonth(year, month){ var s=0; for (var m=1;m<=month;m++) s+=_solarDays(year,m); return s; } function _lunarAbsDays(year,month,day,isInter){ var s = _lunarDaysBeforeYear(year-1) + _lunarDaysBeforeMonth(year,month-1,true) + day; if (isInter && _lunarInterMonth(_lunarData(year))===month) s += _lunarDays(year,month,false); return s; } function _solarAbsDays(year,month,day){ return _solarDaysBeforeYear(year-1) + _solarDaysBeforeMonth(year,month-1) + day - SOLAR_LUNAR_DAY_DIFF; } function solarToLunar(sy, sm, sd){ try { if (sy < LUNAR_BASE_YEAR+1 || sy > 2050) return null; var absDays = _solarAbsDays(sy,sm,sd); var lunarYear = (absDays >= _lunarAbsDays(sy,1,1,false)) ? sy : sy-1; var lunarMonth=0, lunarDay=0, isInter=false; for (var month=12; month>=1; month--){ var absDaysByMonth = _lunarAbsDays(lunarYear, month, 1, false); if (absDays >= absDaysByMonth) { lunarMonth = month; if (_lunarInterMonth(_lunarData(lunarYear)) === month) isInter = absDays >= _lunarAbsDays(lunarYear, month, 1, true); lunarDay = absDays - _lunarAbsDays(lunarYear, lunarMonth, 1, isInter) + 1; break; } } return {year:lunarYear, month:lunarMonth, day:lunarDay, isInter:isInter}; } catch(e) { return null; } } /* ── 주차 계산 (국가별 4가지 기준) ── */ function isoWeekInfo(d){ var dt = new Date(d.getFullYear(), d.getMonth(), d.getDate()); var dow = (dt.getDay()+6)%7; dt.setDate(dt.getDate() - dow + 3); var isoYear = dt.getFullYear(); var firstThu = new Date(isoYear,0,4); var fDow = (firstThu.getDay()+6)%7; firstThu.setDate(firstThu.getDate() - fDow + 3); var week = 1 + Math.round((dt - firstThu) / (7*86400000)); return { year: isoYear, week: week }; } function usWeekInfo(d){ var year = d.getFullYear(); var jan1 = new Date(year,0,1); var jan1Dow = jan1.getDay(); var dayOfYear = Math.round((new Date(year,d.getMonth(),d.getDate()) - jan1)/86400000) + 1; var week = Math.ceil((dayOfYear + jan1Dow) / 7); return { year: year, week: week }; } function meWeekInfo(d){ var year = d.getFullYear(); var jan1 = new Date(year,0,1); var jan1SatDow = (jan1.getDay()+1)%7; var dayOfYear = Math.round((new Date(year,d.getMonth(),d.getDate()) - jan1)/86400000) + 1; var week = Math.ceil((dayOfYear + jan1SatDow) / 7); return { year: year, week: week }; } var COUNTRY_CFG = { kr:{gridStart:0, basis:'iso', flag:' '}, jp:{gridStart:0, basis:'iso', flag:' '}, cn:{gridStart:1, basis:'iso', flag:' '}, us:{gridStart:0, basis:'us', flag:' '}, me:{gridStart:6, basis:'me', flag:' '} }; function getWeekInfo(d, country){ var basis = COUNTRY_CFG[country].basis; if (basis==='us') return usWeekInfo(d); if (basis==='me') return meWeekInfo(d); return isoWeekInfo(d); } var ORD = ['','첫째주','둘째주','셋째주','넷째주','다섯째주','여섯째주']; function monthWeekKorean(d){ var dow = (d.getDay()+6)%7; var thu = new Date(d); thu.setDate(d.getDate() - dow + 3); var targetMonth = thu.getMonth(), targetYear = thu.getFullYear(); var cursorThu = new Date(targetYear, targetMonth, 1); var cDow = (cursorThu.getDay()+6)%7; cursorThu.setDate(cursorThu.getDate() - cDow + 3); if (cursorThu.getMonth() !== targetMonth) cursorThu.setDate(cursorThu.getDate() + 7); var weekNum = Math.round((thu - cursorThu) / (7*86400000)) + 1; return { m:(targetMonth+1), label:(ORD[weekNum] || (weekNum+'주차')) }; } function monthWeekSimple(d, startDow){ var first = new Date(d.getFullYear(), d.getMonth(), 1); var fDow = first.getDay(); var offset = (fDow - startDow + 7) % 7; var weekNum = Math.ceil((d.getDate() + offset) / 7); return { m:(d.getMonth()+1), label:(ORD[weekNum] || (weekNum+'주차')) }; } function getMonthWeek(d, country){ var basis = COUNTRY_CFG[country].basis; if (basis==='us') return monthWeekSimple(d, 0); if (basis==='me') return monthWeekSimple(d, 6); if (country==='jp') return monthWeekSimple(d, 0); return monthWeekKorean(d); // kr, cn } function eraYear(y){ return ceState.era==='dangi' ? (y+2333) : y; } var DOW_KR = ['일','월','화','수','목','금','토']; /* ── 상단 렌더 ── */ function ceRenderTop(){ var d = ceState.date; var displayYear = eraYear(d.getFullYear()); document.getElementById('ceDateMain').textContent = displayYear + (ceState.era==='dangi'?'(단기)':'') + '년 ' + (d.getMonth()+1) + '월 ' + d.getDate() + '일 (' + DOW_KR[d.getDay()] + ')'; var wk = getWeekInfo(d, ceState.country); var mw = getMonthWeek(d, ceState.country); var lunar = solarToLunar(d.getFullYear(), d.getMonth()+1, d.getDate()); var lunarStr = lunar ? ('음력 '+pad2(lunar.month)+'월'+pad2(lunar.day)+'일'+(lunar.isInter?'(윤달)':'')) : '음력 정보없음'; var wYy = String(eraYear(wk.year)).slice(-2); var line = '<span class="ce-wl-part">' + wYy + '년 ' + wk.week + '주</span>' + ' <span class="ce-wl-part">' + mw.m + '월 ' + mw.label + '</span>' + ' <span class="ce-wl-part">' + lunarStr + '</span>'; document.getElementById('ceWeekLunarLine').innerHTML = line; } function ceNav(delta){ ceState.date.setDate(ceState.date.getDate() + delta); ceState.date = new Date(ceState.date); ceCal.year = ceState.date.getFullYear(); ceCal.month = ceState.date.getMonth(); ceRenderAll(); } function ceGoToday(){ ceState.date = new Date(); ceCal.year = ceState.date.getFullYear(); ceCal.month = ceState.date.getMonth(); ceRenderAll(); } function ceSetEra(era){ ceState.era = era; document.getElementById('ceEraAd').classList.toggle('active', era==='ad'); document.getElementById('ceEraDangi').classList.toggle('active', era==='dangi'); ceRenderAll(); } function ceOnCountryChange(v){ ceState.country = v; ceRenderAll(); } function ceToggleAcc(btn){ btn.classList.toggle('open'); var body = btn.nextElementSibling; body.classList.toggle('open'); } function ceToggleCalCollapse(){ ceCalCollapsed = !ceCalCollapsed; document.getElementById('ceCalWidget').classList.toggle('collapsed', ceCalCollapsed); document.getElementById('ceCalCollapseBtn').textContent = ceCalCollapsed ? '▶' : '▼'; } /* ── 달력 그리드 ── */ function populateCalMonthSelect(){ var sel = document.getElementById('ceCalMonthSel'); var base = new Date(); var html = ''; for (var i=-24; i<=24; i++) { var y = base.getFullYear(); var m = base.getMonth() + i; var d = new Date(y, m, 1); var val = d.getFullYear() + '-' + pad2(d.getMonth()+1); html += '<option value="' + val + '">' + d.getFullYear() + '년 ' + (d.getMonth()+1) + '월</option>'; } sel.innerHTML = html; } function syncCalMonthSelectValue(){ var sel = document.getElementById('ceCalMonthSel'); var val = ceCal.year + '-' + pad2(ceCal.month+1); if (sel.value !== val) { if (!sel.querySelector('option[value="'+val+'"]')) { var opt = document.createElement('option'); opt.value = val; opt.textContent = ceCal.year + '년 ' + (ceCal.month+1) + '월'; sel.appendChild(opt); } sel.value = val; } } function ceOnCalMonthSelChange(val){ var parts = val.split('-'); ceCal.year = parseInt(parts[0],10); ceCal.month = parseInt(parts[1],10) - 1; ceRenderCal(); } function ceCalPrevMonth(){ ceCal.month--; if (ceCal.month<0){ ceCal.month=11; ceCal.year--; } ceRenderCal(); } function ceCalNextMonth(){ ceCal.month++; if (ceCal.month>11){ ceCal.month=0; ceCal.year++; } ceRenderCal(); } function daysInMonth(y,m){ return new Date(y,m+1,0).getDate(); } function ceRenderCal(){ syncCalMonthSelectValue(); var grid = document.getElementById('ceCalGrid'); var cfg = COUNTRY_CFG[ceState.country]; var startDow = cfg.gridStart; var dowNames = []; for (var i=0;i<7;i++) dowNames.push(DOW_KR[(startDow+i)%7]); var html = '<div class="ce-cal-wlabel">주차</div>'; dowNames.forEach(function(n,i){ var actualDow = (startDow+i)%7; html += '<div class="ce-cal-dow' + (actualDow===0?' sun':actualDow===6?' sat':'') + '">' + n + '</div>'; }); var firstDow = new Date(ceCal.year, ceCal.month, 1).getDay(); var offset = (firstDow - startDow + 7) % 7; var total = daysInMonth(ceCal.year, ceCal.month); var today = new Date(); var dayNum = 1 - offset; while (dayNum <= total) { var rowFirst = new Date(ceCal.year, ceCal.month, dayNum); var anchorDate; if (cfg.basis === 'iso') { // 그리드가 어느 요일부터 시작하든, 그 줄 안에서 "월요일"을 기준점으로 잡아야 // ISO 목요일-포함주 규칙이 정확히 맞음 (일요일을 기준으로 잡으면 전주로 잘못 계산됨) var mondayOffset = (1 - startDow + 7) % 7; anchorDate = new Date(rowFirst); anchorDate.setDate(rowFirst.getDate() + mondayOffset); } else { anchorDate = rowFirst; } var wk = getWeekInfo(anchorDate, ceState.country); var mw = getMonthWeek(anchorDate, ceState.country); html += '<div class="ce-cal-rowlabel"><span class="yw">' + wk.week + '주차</span><span>' + mw.m + '월' + mw.label + '</span></div>'; for (var j=0;j<7;j++){ var dd = dayNum + j; var actualDow = (startDow+j)%7; if (dd<1 || dd>total){ html += '<div class="ce-cal-cell empty"></div>'; continue; } var cellDate = new Date(ceCal.year, ceCal.month, dd); var isToday = sameDate(cellDate, today); var isSelected = sameDate(cellDate, ceState.date); html += '<div class="ce-cal-cell' + (isToday?' today':'') + (isSelected?' selected':'') + (actualDow===0?' sun':actualDow===6?' sat':'') + '" onclick="ceOnCellClick(' + ceCal.year + ',' + ceCal.month + ',' + dd + ')">' + dd + '</div>'; } dayNum += 7; } grid.innerHTML = html; } window.ceOnCellClick = function(y,m,d){ ceState.date = new Date(y,m,d); ceRenderAll(); }; /* ── 마트 의무휴업 (규칙 기반 예시) ── */ function nthSundaysOfMonth(year, month){ var sundays = []; var d = new Date(year, month, 1); while (d.getMonth()===month){ if (d.getDay()===0) sundays.push(new Date(d)); d.setDate(d.getDate()+1); } return sundays; } function ceSetMartRegion(r){ ceState.martRegion = r; document.getElementById('ceMartRegBtn2_4').classList.toggle('active', r==='2_4'); document.getElementById('ceMartRegBtn1_3').classList.toggle('active', r==='1_3'); ceRenderMart(); } function ceRenderMart(){ var d = ceState.date; var sundays = nthSundaysOfMonth(d.getFullYear(), d.getMonth()); var idxWanted = (ceState.martRegion==='2_4') ? [1,3] : [0,2]; var closedDates = idxWanted.map(function(i){ return sundays[i]; }).filter(Boolean); var todayStr2 = ymdStr(d); var html = ''; closedDates.forEach(function(cd, i){ var isToday = ymdStr(cd)===todayStr2; var label = (ceState.martRegion==='2_4') ? (i===0?'둘째주':'넷째주') : (i===0?'첫째주':'셋째주'); html += '<div class="ce-mart-row"><span>' + (cd.getMonth()+1) + '월 ' + cd.getDate() + '일 (' + label + ' 일요일)</span><span class="ce-mart-status">' + (isToday?'오늘 휴무':'휴무 예상') + '</span></div>'; }); document.getElementById('ceMartBody').innerHTML = html; } function ceRenderAll(){ ceRenderTop(); ceRenderCal(); ceRenderMart(); } window.ceNav = ceNav; window.ceGoToday = ceGoToday; window.ceSetEra = ceSetEra; window.ceOnCountryChange = ceOnCountryChange; window.ceToggleAcc = ceToggleAcc; window.ceToggleCalCollapse = ceToggleCalCollapse; window.ceOnCalMonthSelChange = ceOnCalMonthSelChange; window.ceCalPrevMonth = ceCalPrevMonth; window.ceCalNextMonth = ceCalNextMonth; window.ceSetMartRegion = ceSetMartRegion; populateCalMonthSelect(); ceRenderAll(); })(); </script> </div> 모두의계산기 계산기 마트휴일 모두 주차 주차달력 최매슨생 https://0-1.kr/122 https://0-1.kr/122#entry122comment Sun, 9 Aug 2026 13:26:11 +0900 https://0-1.kr/116 <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/ILo6Z/dJMcabEJlc7/uQO131BOnIEO4ULLI2QaH0/00.2026%EB%85%84%20%EC%B2%AD%EB%85%84%EC%A0%84%EC%9A%A9%EC%B0%BD%EC%97%85%EC%9E%90%EA%B8%88%20%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4_V4%28260630%29.pdf?attach=1&amp;knm=tfile.pdf" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">00.2026년 청년전용창업자금 프로세스_V4(260630).pdf</span></div> <div class="size">1.07MB</div> </div> </a></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드6.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/bMHQhM/dJMcagSRLmb/68XLB6FV3d0BwLMhNRrIY0/img.png" data-phocus="https://blog.kakaocdn.net/dn/bMHQhM/dJMcagSRLmb/68XLB6FV3d0BwLMhNRrIY0/img.png"><img src="https://blog.kakaocdn.net/dn/bMHQhM/dJMcagSRLmb/68XLB6FV3d0BwLMhNRrIY0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbMHQhM%2FdJMcagSRLmb%2F68XLB6FV3d0BwLMhNRrIY0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드6.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> </p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000035932.png" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/AqWXk/dJMcabreF8C/SJKuoQ6faoNddfMKlF4uYk/img.png" data-phocus="https://blog.kakaocdn.net/dn/AqWXk/dJMcabreF8C/SJKuoQ6faoNddfMKlF4uYk/img.png"><img src="https://blog.kakaocdn.net/dn/AqWXk/dJMcabreF8C/SJKuoQ6faoNddfMKlF4uYk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAqWXk%2FdJMcabreF8C%2FSJKuoQ6faoNddfMKlF4uYk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="1000035932.png" data-origin-width="1280" data-origin-height="720"/></span></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000035933.png" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/cZv1WD/dJMcabreF8B/8qCA3AIwFpKWxUHzKVVSgK/img.png" data-phocus="https://blog.kakaocdn.net/dn/cZv1WD/dJMcabreF8B/8qCA3AIwFpKWxUHzKVVSgK/img.png"><img src="https://blog.kakaocdn.net/dn/cZv1WD/dJMcabreF8B/8qCA3AIwFpKWxUHzKVVSgK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcZv1WD%2FdJMcabreF8B%2F8qCA3AIwFpKWxUHzKVVSgK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="1000035933.png" data-origin-width="1280" data-origin-height="720"/></span></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000035934.png" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/Dgoub/dJMcabdCkJH/FgRKyfGJwS2g7EfPkaDC3K/img.png" data-phocus="https://blog.kakaocdn.net/dn/Dgoub/dJMcabdCkJH/FgRKyfGJwS2g7EfPkaDC3K/img.png"><img src="https://blog.kakaocdn.net/dn/Dgoub/dJMcabdCkJH/FgRKyfGJwS2g7EfPkaDC3K/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDgoub%2FdJMcabdCkJH%2FFgRKyfGJwS2g7EfPkaDC3K%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="1000035934.png" data-origin-width="1280" data-origin-height="720"/></span></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">26년 6월 현재 청년창업사관학교 16기 입교생 지원가능</p> <p style="text-align: center;" data-ke-size="size16">6월 1차 중간평가 우수,양호 판정 시 발표평가 면제(서류평가로만 진행가능)</p> <p style="text-align: center;" data-ke-size="size16">단 보통판정 시 발표평가 진행 후 선정 시 지원가능</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> 스타트업 운영TIP/정부지원사업 TIP 융자 청년 청년전용창업자금 청창사 최매슨생 https://0-1.kr/116 https://0-1.kr/116#entry116comment Tue, 28 Apr 2026 18:37:26 +0900 https://0-1.kr/110 <!-- ╔══════════════════════════════════════════════════════════╗ ║ QnA 계산기 v6 — 티스토리 글 본문 HTML ║ ║ ║ ║ ① qna6.js 파일을 티스토리 스킨 > 파일 업로드에 추가 ║ ║ ② 아래 JS_FILE_URL 을 업로드된 qna6.js 주소로 교체 ║ ║ ③ 이 전체 코드를 티스토리 글 > HTML 모드로 붙여넣기 ║ ╚══════════════════════════════════════════════════════════╝ --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap"> <style> #qna6-wrap *,#qna6-wrap *::before,#qna6-wrap *::after{box-sizing:border-box;margin:0;padding:0} #qna6-wrap{ --g:#2d6a4f;--gm:#40916c;--gl:#52b788;--gp:#d8f3dc;--gh:#eaf7ed; --bd:#b7d5be;--bd2:#d8ead9;--tx:#1a2e1e;--mu:#5a7a62;--ti:#9abba0;--rd:#c0392b; --fn:'Noto Sans KR',sans-serif; font-family:var(--fn);font-size:13px;color:var(--tx);line-height:1.5; max-width:860px;margin:0 auto;padding-bottom:20px; } #qna6-top{background:var(--g);padding:6px 10px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;position:sticky;top:0;z-index:50;border-radius:6px 6px 0 0;box-shadow:0 2px 8px rgba(45,106,79,.3)} .qbrand{font-size:13px;font-weight:700;color:#fff;white-space:nowrap} #qna6-doctitle{border:none;border-bottom:1.5px solid rgba(255,255,255,.35);background:transparent;font-family:var(--fn);font-size:12px;color:#fff;padding:2px 5px;width:130px;outline:none} #qna6-doctitle::placeholder{color:rgba(255,255,255,.4)} #qna6-dot{width:6px;height:6px;border-radius:50%;background:#b7ffce;opacity:0;transition:opacity .4s;flex-shrink:0} #qna6-dot.on{opacity:1} .qsep{width:1px;height:14px;background:rgba(255,255,255,.2);flex-shrink:0} .qtbtn{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:rgba(255,255,255,.9);font-family:var(--fn);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer;white-space:nowrap;transition:all .12s} .qtbtn:hover{background:rgba(255,255,255,.22)} .qtbtn.qdanger:hover{background:rgba(192,57,43,.5)} .qtbtn.qprime{background:rgba(255,255,255,.9);color:var(--g);font-weight:700;border-color:transparent} .qtbtn.qprime:hover{background:#fff} #qna6-sbar{background:#fff;border-bottom:1px solid var(--bd);padding:4px 12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .qsl{font-size:11px;color:var(--mu);display:flex;align-items:center;gap:5px;white-space:nowrap} .qsl select{font-family:var(--fn);font-size:11px;border:1px solid var(--bd);border-radius:3px;padding:2px 5px;background:#fff;outline:none;cursor:pointer} #qna6-jnav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:4px 12px;background:#f6fcf7;border-bottom:1px solid var(--bd2);min-height:27px} .qjlbl{font-size:10px;color:var(--ti);flex-shrink:0} .qjbtn{font-size:10px;border:1px solid var(--bd);background:#fff;border-radius:10px;padding:2px 9px;color:var(--mu);cursor:pointer;font-family:var(--fn);transition:all .1s;white-space:nowrap} .qjbtn:hover{background:var(--gp);border-color:var(--gm);color:var(--g)} #qna6-bsc{padding:14px 4px 4px} .qbsec{margin-bottom:18px} .qbsec.dv-line{border-top:3px solid var(--gl)} .qbsec.dv-double{border-top:5px double var(--g)} .qbsec.dv-dashed{border-top:3px dashed var(--gm)} .qbsec.dv-dotted{border-top:4px dotted var(--gl)} .qbsec.dv-thick{border-top:5px solid var(--g)} .qbbar{display:flex;align-items:center;gap:6px;background:var(--g);border-radius:6px 6px 0 0;padding:5px 10px} .qbpfx{font-size:10px;font-weight:700;color:rgba(255,255,255,.55);white-space:nowrap;flex-shrink:0;font-family:monospace;min-width:14px} .qbbar>input[type=text]{flex:1;border:none;background:transparent;font-family:var(--fn);font-size:12px;font-weight:700;color:#fff;outline:none;padding:1px 0;min-width:0} .qbbar>input[type=text]::placeholder{color:rgba(255,255,255,.35);font-weight:400} .qbctrl{display:flex;gap:2px;flex-shrink:0} .qbb{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);border-radius:3px;font-size:10px;padding:1px 6px;cursor:pointer;font-family:var(--fn);transition:all .12s;line-height:1.4} .qbb:hover{background:rgba(255,255,255,.25)} .qbb.qdel:hover{background:rgba(192,57,43,.6)} .qfwrap{background:#fff;border:1.5px solid var(--bd);border-top:none;border-radius:0 0 6px 6px;overflow:hidden} .qrwrap{border-bottom:1px solid var(--bd2)} .qrwrap:last-child{border-bottom:none} .qrwrap.qdragging{opacity:.35} .qrwrap.qdot{border-top:2px solid var(--gm)} .qrwrap.qdob{border-bottom:2px solid var(--gm)} .qrtop{display:flex;align-items:stretch;min-height:30px;background:var(--gh);transition:background .1s} .qrtop:hover{background:#dff0e4} .qdragh{width:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:grab;color:var(--ti);font-size:13px;user-select:none;border-right:1px solid var(--bd2)} .qdragh:active{cursor:grabbing} .qrtop:hover .qdragh{color:var(--gm)} .qrnum{width:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-family:monospace;font-weight:700;color:var(--gm);border-right:1px solid var(--bd2);user-select:none} .qrlbl{flex:1;border:none;background:transparent;font-family:var(--fn);font-size:11px;font-weight:600;color:var(--g);outline:none;padding:0 8px;min-width:0;align-self:center} .qrlbl::placeholder{color:var(--ti);font-weight:400;font-style:italic} .qrc{display:flex;align-items:center;gap:2px;padding:0 6px;flex-shrink:0} .qrb{background:none;border:1px solid transparent;border-radius:3px;color:var(--mu);font-size:10px;padding:2px 5px;cursor:pointer;transition:all .1s;line-height:1;font-family:var(--fn)} .qrb:hover{background:var(--gp);border-color:var(--bd);color:var(--g)} .qrb.qdel:hover{background:#fdecea;color:var(--rd);border-color:#e8bfbf} .qrb.qre{background:rgba(64,145,108,.1);border:1px solid var(--bd);color:var(--g);font-weight:700} .qrb.qre:hover,.qrb.qre.on{background:var(--gm);color:#fff;border-color:var(--gm)} .qvc{display:none;align-items:center;gap:8px;padding:8px 12px 9px 44px;flex-wrap:wrap;background:#fafffe;border-top:1px solid var(--bd2)} .qvc.show{display:flex} .qrezone{display:none;background:#f4fbf5;border-top:1px dashed var(--bd2)} .qrezone.show{display:block} .qrerow{display:flex;align-items:flex-start;border-bottom:1px dashed var(--bd2)} .qrerow:last-child{border-bottom:none} .qrerow:hover{background:#edf7ef} .qreind{width:52px;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;padding:7px 8px 0 0;background:#e8f5ec;border-right:2px solid var(--bd);user-select:none} .qreind .qarr{color:var(--gl);font-size:14px;line-height:1} .qreind .qrlb{font-size:9px;color:var(--ti);font-weight:700;letter-spacing:.3px;margin-top:1px} .qreta{flex:1;border:none;background:transparent;font-family:var(--fn);font-size:12px;color:var(--tx);resize:none;outline:none;padding:7px 10px;min-height:34px;line-height:1.6;overflow:hidden} .qreta::placeholder{color:var(--ti)} .qredel{background:none;border:none;color:var(--ti);font-size:11px;cursor:pointer;padding:4px 6px;align-self:flex-start;margin-top:3px} .qredel:hover{color:var(--rd)} .qreadd{display:flex;padding:3px 3px 3px 52px;background:#eef7f0;border-top:1px dashed var(--bd2)} .qreadd-btn{font-size:10px;border:1px dashed var(--bd);background:none;border-radius:10px;padding:1px 8px;color:var(--mu);cursor:pointer;font-family:var(--fn);transition:all .1s} .qreadd-btn:hover{border-color:var(--gm);color:var(--g);background:var(--gp)} .qvi{border:1px solid var(--bd);border-radius:4px;padding:5px 9px;font-family:var(--fn);font-size:13px;color:var(--tx);background:#fff;outline:none;height:34px;transition:border-color .12s} .qvi:focus{border-color:var(--gl);box-shadow:0 0 0 2px rgba(82,183,136,.12)} .qvi.qfull{flex:1;min-width:120px} .qvi.qnum{width:110px;text-align:right} .qvsep{color:var(--mu);font-size:13px;flex-shrink:0} .qvsel{border:1px solid var(--bd);border-radius:4px;padding:5px 24px 5px 9px;font-family:var(--fn);font-size:13px;color:var(--tx);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a7a62'/%3E%3C/svg%3E") no-repeat right 7px center;appearance:none;outline:none;cursor:pointer;height:34px} .qvsel:focus{border-color:var(--gl)} .qrgrp,.qoxgrp,.qcgrp{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .qri,.qoxi,.qci{display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer} .qri input,.qoxi input,.qci input{accent-color:var(--gm);width:15px;height:15px;cursor:pointer} .qxdel{background:none;border:none;color:var(--ti);font-size:11px;cursor:pointer;padding:0 0 0 2px;line-height:1} .qxdel:hover{color:var(--rd)} .qopanel{width:100%;margin-top:5px} .qotog{font-size:10px;border:none;background:none;color:var(--ti);cursor:pointer;padding:0 2px;font-family:var(--fn)} .qotog:hover{color:var(--gm)} .qolist{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:4px} .qolist.qhidden{display:none} .qopill{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--bd);border-radius:9px;padding:2px 6px 2px 8px;font-size:11px;color:var(--mu);background:#fff} .qopill .qox{cursor:pointer;color:var(--ti);font-size:12px;line-height:1} .qopill .qox:hover{color:var(--rd)} .qoadd{border:1px dashed var(--bd);border-radius:9px;padding:2px 8px;font-size:11px;color:var(--mu);background:none;cursor:pointer;font-family:var(--fn);transition:all .12s} .qoadd:hover{border-color:var(--gm);color:var(--g);background:var(--gp)} /* 행 추가 strip — label 한 줄 / 버튼들 wrap */ .qastrip{padding:6px 10px 8px;background:#f6fcf7;border-top:1px dashed var(--bd2)} .qastrip .qalbl{display:block;font-size:10px;color:var(--ti);margin-bottom:5px} .qastrip .qatypes{display:flex;flex-wrap:wrap;gap:4px} .qtbtype{border:1px solid var(--bd);background:#fff;border-radius:10px;font-family:var(--fn);font-size:11px;color:var(--mu);padding:3px 10px;cursor:pointer;transition:all .12s;white-space:nowrap} .qtbtype:hover{border-color:var(--gm);color:var(--g);background:var(--gp)} .qaddbig{width:100%;border:2px dashed var(--bd);background:none;border-radius:6px;padding:9px;font-family:var(--fn);font-size:12px;color:var(--mu);cursor:pointer;text-align:center;transition:all .12s;margin-bottom:8px;display:block} .qaddbig:hover{border-color:var(--gm);color:var(--g);background:var(--gp)} #qna6-spanel{background:#fff;border:1.5px solid var(--bd);border-radius:6px;margin-top:12px;overflow:hidden} #qna6-shandle{padding:5px 12px;display:flex;align-items:center;gap:6px;background:var(--gh);border-bottom:1px solid var(--bd);cursor:pointer;user-select:none} .qshtit{font-size:11px;font-weight:700;color:var(--g);flex:1} .qsbn{font-size:10px;border:1px solid var(--bd);background:#fff;color:var(--mu);border-radius:3px;padding:2px 7px;cursor:pointer;font-family:var(--fn);transition:all .12s} .qsbn:hover{background:var(--gp);border-color:var(--gm);color:var(--g)} .qsbn.qp{background:var(--g);color:#fff;border-color:var(--g)} .qsbn.qp:hover{background:var(--gm)} #qna6-sbody{padding:8px 12px;max-height:200px;overflow-y:auto;transition:max-height .25s} #qna6-sbody.qclosed{max-height:0;padding:0 12px;overflow:hidden} #qna6-stext{font-size:11px;color:var(--tx);white-space:pre-wrap;line-height:1.8;font-family:monospace} .qoverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:9999;align-items:center;justify-content:center} .qoverlay.qopen{display:flex} .qmodal{background:#fff;border-radius:9px;padding:20px;max-width:400px;width:92%;box-shadow:0 10px 40px rgba(0,0,0,.14)} .qmodal h3{font-size:14px;font-weight:700;color:var(--g);margin-bottom:10px} .qmodal p{font-size:12px;color:var(--mu);margin-bottom:12px;line-height:1.6} .qmodal input[type=email],.qmodal input[type=text]{width:100%;border:1.5px solid var(--bd);border-radius:4px;padding:6px 9px;font-family:var(--fn);font-size:13px;color:var(--tx);margin-bottom:8px;outline:none;display:block} .qurlbox{font-size:10px;word-break:break-all;background:#eff3f0;border:1px solid var(--bd);border-radius:3px;padding:7px 9px;margin-bottom:10px;color:var(--mu);max-height:70px;overflow-y:auto;font-family:monospace} .qmbtns{display:flex;gap:6px;justify-content:flex-end} .qmbtn{border:1.5px solid var(--bd);background:#fff;font-family:var(--fn);font-size:12px;padding:5px 12px;border-radius:4px;cursor:pointer;transition:all .12s} .qmbtn:hover{background:#eff3f0} .qmbtn.qp{background:var(--g);color:#fff;border-color:var(--g)} .qmbtn.qd{background:var(--rd);color:#fff;border-color:var(--rd)} @media print{ #qna6-top,#qna6-sbar,#qna6-spanel,#qna6-jnav,.qbctrl,.qrc,.qastrip,.qdragh,.qaddbig, .qoadd,.qxdel,.qopill .qox,.qredel,.qreadd,.qbb,.qrb,.qotog{display:none!important} .qbbar{background:#2d6a4f!important;-webkit-print-color-adjust:exact;print-color-adjust:exact} .qbbar>input[type=text],.qbpfx{color:#fff!important;pointer-events:none} .qrtop{background:#eaf7ed!important;-webkit-print-color-adjust:exact;print-color-adjust:exact} .qrlbl{color:#2d6a4f!important;pointer-events:none} .qvc{display:flex!important} .qrezone{display:block!important} .qvi,.qvsel{border:none!important;background:transparent!important;height:auto;padding:0;pointer-events:none} } </style> <div id="qna6-wrap"> <div id="qna6-top"> <span class="qbrand"> QnA 계산기</span> <input id="qna6-doctitle" type="text" placeholder="문서 제목..."> <div id="qna6-dot"></div> <div class="qsep"></div> <button class="qtbtn qdanger" onclick="qna6.openM('factory')"> 공장초기화</button> <button class="qtbtn" onclick="qna6.openM('reset')"> 초기화</button> <button class="qtbtn" onclick="qna6.doShare()"> 공유</button> <button class="qtbtn" onclick="qna6.doExcel()"> 엑셀</button> <button class="qtbtn" onclick="qna6.doPrint()"> ️인쇄</button> <button class="qtbtn qprime" onclick="qna6.openMailM()"> 메일</button> </div> <div id="qna6-sbar"> <label class="qsl">말머리 <select id="qna6-pfxsel" onchange="qna6.onPfxChange()"> <option value="num">1.</option><option value="rom">Ⅰ.</option> <option value="abc">A.</option><option value="kor">제1조</option> <option value="none">없음</option> </select> </label> <label class="qsl">구분선 <select id="qna6-divsel" onchange="qna6.onDivChange()"> <option value="none">없음</option><option value="line">실선</option> <option value="double">이중선</option><option value="dashed">점선(대)</option> <option value="dotted">점선(소)</option><option value="thick">굵은선</option> </select> </label> </div> <div id="qna6-jnav"><span class="qjlbl">바로가기:</span></div> <div id="qna6-bsc"></div> <button class="qaddbig" onclick="qna6.addBig()">＋ Tile 추가</button> <div id="qna6-spanel"> <div id="qna6-shandle" onclick="qna6.togglePanel()"> <span class="qshtit"> 요약</span> <button class="qsbn" onclick="event.stopPropagation();qna6.doRestore()"> 복원</button> <button class="qsbn" onclick="event.stopPropagation();qna6.doCopySummary()"> 복사</button> <button class="qsbn qp" onclick="event.stopPropagation();qna6.doShare()"> 공유</button> <span style="font-size:11px;color:var(--mu);margin-left:2px">⇅</span> </div> <div id="qna6-sbody"><pre id="qna6-stext"></pre></div> </div> </div> <div class="qoverlay" id="qna6-m-share"> <div class="qmodal"><h3> 저장 &amp; 공유</h3><p>아래 URL로 현재 상태가 공유됩니다.</p> <div class="qurlbox" id="qna6-share-url"></div> <div class="qmbtns"><button class="qmbtn" onclick="qna6.copyUrl()">URL 복사</button><button class="qmbtn qp" onclick="qna6.closeM('share')">닫기</button></div> </div> </div> <div class="qoverlay" id="qna6-m-mail"> <div class="qmodal"><h3> 이메일 전달</h3><p>수신자 이메일을 입력하면 기본 메일 앱이 열립니다.</p> <input type="email" id="qna6-mail-to" placeholder="수신 이메일"> <input type="text" id="qna6-mail-subj" placeholder="제목"> <div class="qmbtns"><button class="qmbtn" onclick="qna6.closeM('mail')">취소</button><button class="qmbtn qp" onclick="qna6.sendMail()">메일 열기</button></div> </div> </div> <div class="qoverlay" id="qna6-m-factory"> <div class="qmodal"><h3> 공장 초기화</h3><p>모든 Tile과 데이터를 삭제합니다. 되돌릴 수 없습니다.</p> <div class="qmbtns"><button class="qmbtn" onclick="qna6.closeM('factory')">취소</button><button class="qmbtn qd" onclick="qna6.doFactory()">초기화 실행</button></div> </div> </div> <div class="qoverlay" id="qna6-m-reset"> <div class="qmodal"><h3> 내용 초기화</h3><p>입력된 값만 지우고 구조는 유지합니다.</p> <div class="qmbtns"><button class="qmbtn" onclick="qna6.closeM('reset')">취소</button><button class="qmbtn qd" onclick="qna6.doReset()">초기화</button></div> </div> </div> <!-- ★ 아래 src 를 실제 qna6.js 업로드 주소로 바꾸세요 ★ 티스토리 관리 > 꾸미기 > 스킨 편집 > 파일 업로드 탭에서 qna6.js 를 올린 뒤 생성된 URL을 복사해서 붙여넣으세요. --> <script src="https://tistory1.daumcdn.net/tistory/4330872/skin/images/qna6.js"></script> 모두의계산기 QNA 계산기 메모 모두의계산기 최매슨생 https://0-1.kr/110 https://0-1.kr/110#entry110comment Mon, 9 Mar 2026 20:33:08 +0900 https://0-1.kr/108 <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/BU3ln/dJMcah4BnQ5/OFKgoXQkJZEYZvMaigSDFK/%E2%98%85%28%EA%B3%B5%EA%B3%A0%EB%AC%B8%29%202026%EB%85%84%EB%8F%84%20%EC%A4%91%EC%95%99%EB%B6%80%EC%B2%98%20%EB%B0%8F%20%EC%A7%80%EC%9E%90%EC%B2%B4%20%EC%B0%BD%EC%97%85%EC%A7%80%EC%9B%90%EC%82%AC%EC%97%85%20%ED%86%B5%ED%95%A9%EA%B3%B5%EA%B3%A0%EB%AC%B8%28%EC%A0%9C2025-648%ED%98%B8%2C%202025.12.19.%29.hwpx?attach=1&amp;knm=tfile.hwpx" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">★(공고문) 2026년도 중앙부처 및 지자체 창업지원사업 통합공고문(제2025-648호, 2025.12.19.).hwpx</span></div> <div class="size">0.46MB</div> </div> </a></figure> <figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/bwu3Nc/dJMcacPLauz/gturukSKu0iITbZQ5Knznk/%28%EC%95%88%EB%82%B4%EC%B1%85%EC%9E%90%29%202026%EB%85%84%EB%8F%84%20%EC%A4%91%EC%95%99%EB%B6%80%EC%B2%98%20%EB%B0%8F%20%EC%A7%80%EC%9E%90%EC%B2%B4%20%EC%B0%BD%EC%97%85%EC%A7%80%EC%9B%90%EC%82%AC%EC%97%85%20%ED%86%B5%ED%95%A9%EA%B3%B5%EA%B3%A0.pdf?attach=1&amp;knm=tfile.pdf" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">(안내책자) 2026년도 중앙부처 및 지자체 창업지원사업 통합공고.pdf</span></div> <div class="size">3.99MB</div> </div> </a></figure> <figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/bjXmCH/dJMcabXBZET/5Fk5rOTijKn3J0QnlXVKp0/%E2%98%85%28%EA%B3%B5%EA%B3%A0%EB%AC%B8%29%202026%EB%85%84%EB%8F%84%20%EC%A4%91%EC%95%99%EB%B6%80%EC%B2%98%20%EB%B0%8F%20%EC%A7%80%EC%9E%90%EC%B2%B4%20%EC%B0%BD%EC%97%85%EC%A7%80%EC%9B%90%EC%82%AC%EC%97%85%20%ED%86%B5%ED%95%A9%EA%B3%B5%EA%B3%A0%EB%AC%B8%28%EC%A0%9C2025-648%ED%98%B8%2C%202025.12.19.%29.hwpx?attach=1&amp;knm=tfile.hwpx" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">★(공고문) 2026년도 중앙부처 및 지자체 창업지원사업 통합공고문(제2025-648호, 2025.12.19.).hwpx</span></div> <div class="size">0.46MB</div> </div> </a></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16"><a href="https://www.k-startup.go.kr/web/s/k6dTtkF" target="_blank" rel="noopener&nbsp;noreferrer">https://www.k-startup.go.kr/web/s/k6dTtkF</a></p> <figure id="og_1772424470037" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="&gt;K-Startup 창업지원포털&gt;사업소개&gt;2026년 창업지원사업 통합공고" data-og-description="&gt;K-Startup 창업지원포털&gt;사업소개&gt;2026년 창업지원사업 통합공고" data-og-host="www.k-startup.go.kr" data-og-source-url="https://www.k-startup.go.kr/web/s/k6dTtkF" data-og-url="https://www.k-startup.go.kr/web/contents/webFSBIPBANC.do" data-og-image="https://scrap.kakaocdn.net/dn/ki9a4/dJMb86nU1oy/K6wKkkyiDSduQktc2IlY21/img.jpg?width=359&amp;height=250&amp;face=0_0_359_250"><a href="https://www.k-startup.go.kr/web/s/k6dTtkF" target="_blank" rel="noopener" data-source-url="https://www.k-startup.go.kr/web/s/k6dTtkF"> <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/ki9a4/dJMb86nU1oy/K6wKkkyiDSduQktc2IlY21/img.jpg?width=359&amp;height=250&amp;face=0_0_359_250');">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">&gt;K-Startup 창업지원포털&gt;사업소개&gt;2026년 창업지원사업 통합공고</p> <p class="og-desc" data-ke-size="size16">&gt;K-Startup 창업지원포털&gt;사업소개&gt;2026년 창업지원사업 통합공고</p> <p class="og-host" data-ke-size="size16">www.k-startup.go.kr</p> </div> </a></figure> <p data-ke-size="size16">&nbsp;</p> 창업지원프로그램UP/자금&amp;공간&amp;융자 최매슨생 https://0-1.kr/108 https://0-1.kr/108#entry108comment Mon, 2 Mar 2026 13:08:03 +0900 https://0-1.kr/106 <script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script> <script src="https://tistory1.daumcdn.net/tistory/4330872/skin/images/sim_excel3.js"></script> <div> <style> .mv10{margin:10px 0;padding:12px;border:2px solid #1e3a5f;border-radius:10px;background:#fff !important;font-family:'Malgun Gothic',sans-serif;clear:both;position:relative;} .mv10-hd{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:7px;} #mv10-grid{width:100% !important;height:480px !important;border:1px solid #ccc !important;} .mb{padding:5px 9px;cursor:pointer;border:1px solid #ddd;border-radius:5px;background:#f1f5f9;font-weight:bold;font-size:11px;color:#333;white-space:nowrap;font-family:'Malgun Gothic',sans-serif;} .mb:hover{opacity:.85;} .mb-bl{background:#3b82f6 !important;color:#fff !important;border:none !important;} .mb-gn{background:#16a34a !important;color:#fff !important;border:none !important;} .mb-or{background:#ea580c !important;color:#fff !important;border:none !important;} .mb-pu{background:#7c3aed !important;color:#fff !important;border:none !important;} .mb-pk{background:#db2777 !important;color:#fff !important;border:none !important;} .mb-ye{background:#d97706 !important;color:#fff !important;border:none !important;} .mb-rd{background:#dc2626 !important;color:#fff !important;border:none !important;} .mb-tl{background:#0d9488 !important;color:#fff !important;border:none !important;} .mb-dk{background:#334155 !important;color:#fff !important;border:none !important;} .msel{padding:4px 6px;border:2px solid #1e3a5f;border-radius:4px;font-weight:bold;font-size:11px;font-family:'Malgun Gothic',sans-serif;background:#fff;} .mdiv{display:inline-block;width:1px;height:20px;background:#cbd5e1;margin:0 3px;vertical-align:middle;} .mdd{position:relative;display:inline-block;} .mddm{display:none;position:absolute;top:30px;left:0;background:#fff;border:1px solid #cbd5e1;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:99999;min-width:150px;padding:4px 0;} .mddm.on{display:block !important;} .mddm button{display:block;width:100%;padding:7px 14px;border:none;background:transparent;text-align:left;font-size:12px;font-weight:600;color:#1e293b;cursor:pointer;font-family:'Malgun Gothic',sans-serif;box-sizing:border-box;} .mddm button:hover{background:#eff6ff;color:#2563eb;} .mddm-s{height:1px;background:#e2e8f0;margin:3px 0;} .mhint{font-size:11px;color:#1d4ed8;background:#eff6ff;border-left:3px solid #3b82f6;padding:4px 8px;margin-bottom:6px;border-radius:0 4px 4px 0;} .handsontable td,.handsontable th{border:1px solid #d0d0d0 !important;height:24px !important;line-height:24px !important;background:#fff !important;vertical-align:middle !important;font-size:12px !important;font-family:'Malgun Gothic',sans-serif !important;} .handsontable th{background:#f8fafc !important;font-weight:700 !important;color:#475569 !important;} .mv10-full{position:fixed !important;top:0;left:0;width:100vw !important;height:100vh !important;z-index:99999;background:#fff;padding:12px;box-sizing:border-box;} #mv10-mail-bg{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:999999;} #mv10-mail-bg.on{display:flex !important;align-items:center;justify-content:center;} .mv10-modal{background:#fff;border-radius:12px;padding:22px;width:90%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.3);font-family:'Malgun Gothic',sans-serif;} .mv10-modal h3{font-size:15px;font-weight:700;margin:0 0 12px;color:#1e293b;} .mv10-modal label{display:block;font-size:11px;font-weight:700;color:#64748b;margin-bottom:3px;} .mv10-modal input,.mv10-modal textarea{display:block;width:100%;box-sizing:border-box;border:1.5px solid #e2e8f0;border-radius:6px;padding:6px 10px;font-size:13px;margin-bottom:9px;outline:none;font-family:'Malgun Gothic',sans-serif;} .mv10-modal textarea{min-height:68px;resize:vertical;} .mv10-mbtns{display:flex;gap:8px;} .mv10-mbtns button{flex:1;height:34px;border:none;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Malgun Gothic',sans-serif;} #mv10-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#1e293b;color:#fff;padding:8px 20px;border-radius:30px;font-size:12px;font-weight:700;z-index:9999999;opacity:0;transition:all .25s;pointer-events:none;white-space:nowrap;font-family:'Malgun Gothic',sans-serif;} #mv10-toast.on{transform:translateX(-50%) translateY(0);opacity:1;} </style> <div id="mv10-wrap" class="mv10"> <div class="mv10-hd"> <b style="font-size:13px;color:#1e3a5f;"> 간단엑셀</b> <span class="mdiv"></span> <div class="mdd" id="mdd-r"><button class="mb mb-bl" onclick="mDD('mdd-r')">➕행 ▾</button><div class="mddm" id="mdd-r-m"><button onclick="mAddRow('b');mDDclose()">↓ 아래 행 추가</button><button onclick="mAddRow('a');mDDclose()">↑ 위 행 추가</button><div class="mddm-s"></div><button onclick="mDelRow();mDDclose()">✕ 행 삭제</button></div></div> <div class="mdd" id="mdd-c"><button class="mb mb-bl" onclick="mDD('mdd-c')">➕열 ▾</button><div class="mddm" id="mdd-c-m"><button onclick="mAddCol('r');mDDclose()">→ 오른쪽 열 추가</button><button onclick="mAddCol('l');mDDclose()">← 왼쪽 열 추가</button><div class="mddm-s"></div><button onclick="mDelCol();mDDclose()">✕ 열 삭제</button></div></div> <span class="mdiv"></span> <button class="mb mb-pu" onclick="mMerge()"> 병합</button> <button class="mb" onclick="mUnmerge()">↩ 해제</button> <span class="mdiv"></span> <select id="mv10-fz" class="msel" onchange="mFz()"><option value="0"> 고정해제</option><option value="1" selected>A열 고정</option><option value="2">B열 고정</option><option value="3">C열 고정</option><option value="4">D열 고정</option><option value="5">E열 고정</option></select> <span class="mdiv"></span> <button id="mv10-fsbtn" class="mb mb-ye" onclick="mFs()"> 전체보기</button> <span class="mdiv"></span> <button class="mb mb-gn" onclick="mSave()"> 저장</button> <button class="mb mb-bl" onclick="mShare()"> 데이터전송</button> <div class="mdd" id="mdd-e"><button class="mb mb-or" onclick="mDD('mdd-e')"> 내보내기 ▾</button><div class="mddm" id="mdd-e-m"><button onclick="mCSV();mDDclose()"> 엑셀(CSV) 저장</button><div class="mddm-s"></div><button onclick="mPrint('landscape');mDDclose()"> PDF 가로</button><button onclick="mPrint('portrait');mDDclose()"> PDF 세로</button></div></div> <button class="mb mb-tl" onclick="mGSheet()"> 구글시트</button> <span class="mdiv"></span> <button class="mb mb-pk" onclick="mMailOpen()"> 메일</button> <button class="mb mb-rd" onclick="mReset()"> 리셋</button> </div> <div class="mhint"> 엑셀 복사 후 셀 클릭 → Ctrl+V 자동 분배 | 우클릭으로 행/열 추가·삭제 | Ctrl+S 저장</div> <div id="mv10-grid"></div> <div style="margin-top:6px;font-size:11px;color:#999;">* 우클릭으로 행 추가/삭제 | 열 경계 드래그로 너비 조절</div> </div> <div id="mv10-mail-bg"> <div class="mv10-modal"> <h3> 메일 발송</h3> <label>받는 사람</label><input type="email" id="mv10-to" placeholder="example@email.com"> <label>제목</label><input type="text" id="mv10-sub" value="간단엑셀 데이터 공유"> <label>내용</label><textarea id="mv10-body">안녕하세요, 데이터를 공유합니다.</textarea> <div class="mv10-mbtns"><button style="background:#3b82f6;color:#fff;" onclick="mMailSend()"> 발송</button><button style="background:#e2e8f0;color:#333;" onclick="mMailClose()">취소</button></div> </div> </div> <div id="mv10-toast"></div> </div> 모두의계산기 계산기 모두의 엑셀 엑셀계산기 최매슨생 https://0-1.kr/106 https://0-1.kr/106#entry106comment Tue, 24 Feb 2026 23:37:48 +0900 https://0-1.kr/104 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>모두의 편스토랑 레시피 모음</title> <!-- ✅ 폰트 깨짐 방지: Google Fonts CDN으로 한국어 폰트 직접 로드 --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet"> <style> /* ════════════════════════════════════════ 티스토리 붙여넣기 주의사항 ① 티스토리 글쓰기 → [HTML] 탭 클릭 ② 이 파일의 전체 내용을 Ctrl+A → Ctrl+C ③ 티스토리 HTML 탭에서 Ctrl+V ④ [기본] 탭으로 돌아와서 미리보기 확인 ⑤ 폰트 깨짐 없이 정상 표시됩니다 ════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #f2f2f7; --card: #ffffff; --accent: #ff3b30; --orange: #ff9500; --green: #34c759; --blue: #007aff; --purple: #af52de; --pink: #ff2d55; --t1: #1c1c1e; --t2: #6c6c70; --t3: #aeaeb2; --sep: #e5e5ea; --r: 18px; --rs: 12px; --sh: 0 2px 20px rgba(0,0,0,0.08); --shs: 0 1px 8px rgba(0,0,0,0.06); } body { font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; background: var(--bg); color: var(--t1); -webkit-font-smoothing: antialiased; } /* ── HERO ── */ .py-hero { background: linear-gradient(145deg,#ff3b30 0%,#ff6535 45%,#ff9500 100%); padding: 56px 24px 72px; text-align: center; position: relative; overflow: hidden; } .py-hero::before { content: ' '; position: absolute; font-size: 200px; opacity: .07; top: -30px; right: -30px; transform: rotate(20deg); pointer-events: none; } .py-hero::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 40px; background: var(--bg); border-radius: 40px 40px 0 0; } .py-badge { display: inline-block; background: rgba(255,255,255,.22); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 6px 16px; border-radius: 50px; margin-bottom: 14px; border: 1px solid rgba(255,255,255,.3); } .py-hero h1 { font-size: clamp(28px,7vw,42px); font-weight: 900; color: #fff; line-height: 1.15; margin-bottom: 10px; text-shadow: 0 2px 14px rgba(0,0,0,.15); } .py-hero p { font-size: 14px; color: rgba(255,255,255,.85); } /* ── SEARCH ── */ .py-search-wrap { padding: 16px 20px 8px; position: sticky; top: 0; z-index: 100; background: var(--bg); } .py-search { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 13px; padding: 13px 16px; box-shadow: var(--shs); } .py-search input { border: none; outline: none; font-family: inherit; font-size: 15px; color: var(--t1); flex: 1; background: transparent; } .py-search input::placeholder { color: var(--t3); } /* ── FILTER CHIPS ── */ .py-filters { display: flex; gap: 8px; padding: 10px 20px 4px; overflow-x: auto; scrollbar-width: none; } .py-filters::-webkit-scrollbar { display: none; } .py-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 1.5px solid var(--sep); border-radius: 50px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--t2); white-space: nowrap; cursor: pointer; transition: all .2s; box-shadow: var(--shs); } .py-chip.on, .py-chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(255,59,48,.35); } /* ── STATS ── */ .py-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 14px 20px 4px; } .py-stat { background: var(--card); border-radius: var(--rs); padding: 14px 8px; text-align: center; box-shadow: var(--shs); } .py-stat-n { font-size: 22px; font-weight: 900; color: var(--accent); } .py-stat-l { font-size: 11px; color: var(--t3); margin-top: 2px; font-weight: 500; } /* ── SECTION HEADER ── */ .py-sec { display: flex; align-items: center; gap: 10px; padding: 20px 20px 6px; } .py-sec-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .py-sec h2 { font-size: 19px; font-weight: 900; color: var(--t1); } .py-sec-count { margin-left: auto; font-size: 12px; font-weight: 700; background: var(--bg); color: var(--t3); padding: 3px 10px; border-radius: 50px; } /* ── CARDS CONTAINER ── */ .py-cards { display: flex; flex-direction: column; gap: 14px; padding: 4px 20px 8px; } /* ── RECIPE CARD ── */ .py-card { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; transition: transform .25s, box-shadow .25s; animation: pySlide .4s ease both; } .py-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,.12); } @keyframes pySlide { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform: translateY(0); } } /* Card top bar */ .py-card-top { display: flex; align-items: center; gap: 12px; padding: 16px 18px 0; } .py-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.15); } .py-chef-name { font-size: 13px; font-weight: 700; color: var(--t1); } .py-ep { font-size: 11px; color: var(--t3); margin-top: 1px; } .py-win { font-size: 11px; font-weight: 700; color: var(--orange); } .py-dish { font-size: 20px; font-weight: 900; color: var(--t1); padding: 10px 18px 0; line-height: 1.3; } .py-div { height: 1px; background: var(--sep); margin: 13px 18px 0; } /* Row blocks */ .py-row { padding: 12px 18px; border-bottom: 1px solid var(--sep); } .py-row:last-of-type { border-bottom: none; } .py-label { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--t3); text-transform: uppercase; margin-bottom: 8px; } .py-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .py-dot.g { background: var(--green); } .py-dot.o { background: var(--orange); } .py-dot.b { background: var(--blue); } /* Ingredients */ .py-ings { display: flex; flex-wrap: wrap; gap: 7px; } .py-ing { background: #fff1f0; color: #c0392b; font-size: 13px; font-weight: 500; border-radius: 8px; padding: 5px 10px; border: 1px solid rgba(255,59,48,.13); } /* Steps */ .py-steps { display: flex; flex-direction: column; gap: 9px; } .py-step { display: flex; gap: 10px; align-items: flex-start; } .py-snum { min-width: 24px; height: 24px; background: var(--accent); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .py-stxt { font-size: 14px; line-height: 1.65; color: var(--t1); } /* Tip */ .py-tip { background: linear-gradient(135deg,#fff9f0,#fff3e0); border-radius: 11px; padding: 12px 14px; font-size: 14px; line-height: 1.65; color: #7a4800; border-left: 3px solid var(--orange); } .py-tip::before { content: ' '; } /* YouTube button */ .py-yt { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg,#ff3b30,#ff0000); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; padding: 13px 20px; border-radius: 13px; text-decoration: none; margin: 4px 18px 16px; transition: all .2s; box-shadow: 0 4px 14px rgba(255,0,0,.3); border: none; cursor: pointer; width: calc(100% - 36px); } .py-yt:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(255,0,0,.42); } .py-yt svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; } /* ── FOOTER ── */ .py-footer { background: var(--card); text-align: center; padding: 28px 20px 40px; font-size: 12px; color: var(--t3); border-top: 1px solid var(--sep); margin-top: 12px; } .py-footer span { color: var(--accent); font-weight: 700; } /* ── UTILS ── */ .hidden { display: none !important; } .py-empty { text-align: center; padding: 40px 20px; font-size: 14px; color: var(--t3); display: none; } @media (min-width: 620px) { .py-cards, .py-stats, .py-search-wrap, .py-filters, .py-sec, .py-footer { max-width: 620px; margin-left: auto; margin-right: auto; } } </style> </head> <body> <!-- ★★★ HERO ★★★ --> <div class="py-hero"> <div class="py-badge"> KBS 2TV · 매주 금요일 밤 8:30</div> <h1>모두의<br>편스토랑 레시피</h1> <p>시즌1·2 편셰프별 대표 레시피 완전 정리</p> </div> <!-- ★★★ SEARCH ★★★ --> <div class="py-search-wrap"> <div class="py-search"> <span style="font-size:16px;color:var(--t3)"> </span> <input type="text" id="pySearch" placeholder="요리명·요리사·재료 검색..." oninput="pyFilter()"> <span id="pyClear" style="font-size:14px;color:var(--t3);cursor:pointer;display:none" onclick="pyClearSearch()">✕</span> </div> </div> <!-- ★★★ FILTER CHIPS ★★★ --> <div class="py-filters"> <span class="py-chip on" onclick="pySetChef('전체',this)"> 전체</span> <span class="py-chip" onclick="pySetChef('류수영',this)"> ‍ 류수영</span> <span class="py-chip" onclick="pySetChef('이영자',this)"> ‍ 이영자</span> <span class="py-chip" onclick="pySetChef('이경규',this)"> 이경규</span> <span class="py-chip" onclick="pySetChef('박솔미',this)"> 박솔미</span> <span class="py-chip" onclick="pySetChef('이찬원',this)"> 이찬원</span> <span class="py-chip" onclick="pySetChef('차예련',this)"> 차예련</span> </div> <!-- ★★★ STATS ★★★ --> <div class="py-stats" style="max-width:620px;margin:0 auto"> <div class="py-stat"><div class="py-stat-n" id="pyStatN">100</div><div class="py-stat-l">전체 레시피</div></div> <div class="py-stat"><div class="py-stat-n">2019</div><div class="py-stat-l">방영 시작</div></div> <div class="py-stat"><div class="py-stat-n">254+</div><div class="py-stat-l">방영 회차</div></div> </div> <!-- ══════════════════════════════════════ ‍ 류수영 (어남선생) 섹션 ══════════════════════════════════════ --> <div class="py-sec"> <div class="py-sec-dot" style="background:#ff3b30"></div> <h2>류수영 <span style="font-weight:400;color:var(--t3)">(어남선생)</span></h2> <div class="py-sec-count" id="cnt-류수영">20개</div> </div> <div class="py-cards" id="sec-류수영"> <!-- 류수영 1 --> <div class="py-card" data-chef="류수영" data-dish="갈배제육볶음"> <div class="py-card-top"> <div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div> <div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">1회 · 2019.10.25</div></div> </div> <div class="py-dish">갈배제육볶음 </div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div> <div class="py-ings"><span class="py-ing">돼지 앞다리살 400g</span><span class="py-ing">갈아만든 배 1캔</span><span class="py-ing">고추장 3T</span><span class="py-ing">고춧가루 2T</span><span class="py-ing">간장 2T</span><span class="py-ing">설탕 1T</span><span class="py-ing">참기름</span><span class="py-ing">대파</span><span class="py-ing">양파</span></div> </div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div> <div class="py-steps"> <div class="py-step"><div class="py-snum">1</div><div class="py-stxt">돼지고기를 갈아만든 배에 30분 재워 연육</div></div> <div class="py-step"><div class="py-snum">2</div><div class="py-stxt">고추장·고춧가루·간장·설탕 섞어 양념 완성</div></div> <div class="py-step"><div class="py-snum">3</div><div class="py-stxt">재운 고기에 양념 버무려 20분 추가 숙성</div></div> <div class="py-step"><div class="py-snum">4</div><div class="py-stxt">달군 팬 양파 볶다 고기 넣고 센 불에 빠르게</div></div> <div class="py-step"><div class="py-snum">5</div><div class="py-stxt">대파·참기름·깨 넣고 마무리</div></div> </div> </div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div> <div class="py-tip">배 캔 1개가 연육제+단맛 동시 해결! 센 불 유지해야 물 안 생겨요.</div> </div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+갈배제육볶음" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 2 --> <div class="py-card" data-chef="류수영" data-dish="어남선생 떡볶이"> <div class="py-card-top"> <div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div> <div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">5회 · 2019.11.22</div></div> </div> <div class="py-dish">어남선생 떡볶이</div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div> <div class="py-ings"><span class="py-ing">밀떡 250g</span><span class="py-ing">사각어묵 3장</span><span class="py-ing">대파 2대</span><span class="py-ing">물 600ml</span><span class="py-ing">고춧가루 4T</span><span class="py-ing">설탕 4T</span><span class="py-ing">진간장 2T</span><span class="py-ing">굴소스 2T</span><span class="py-ing">고추장 2T</span><span class="py-ing">식용유 1T</span></div> </div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div> <div class="py-steps"> <div class="py-step"><div class="py-snum">1</div><div class="py-stxt">고춧가루·설탕·간장·굴소스·고추장·식용유 섞어 양념장 만들기</div></div> <div class="py-step"><div class="py-snum">2</div><div class="py-stxt">냄비에 대파 깔고 어묵 올린 뒤 물 600ml 붓기</div></div> <div class="py-step"><div class="py-snum">3</div><div class="py-stxt">강불 1분 끓여 어묵 육수 우려내기</div></div> <div class="py-step"><div class="py-snum">4</div><div class="py-stxt">밀떡 넣고 중불로 낮춰 1~2분, 양념장 투입</div></div> <div class="py-step"><div class="py-snum">5</div><div class="py-stxt">약불 10분 끓여 완성</div></div> </div> </div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div> <div class="py-tip">식용유 1T가 떡볶이집 진한 소스 색·농도의 비결! 고춧가루는 먼저 물에 불려야 색이 예뻐요.</div> </div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+어남선생+떡볶이" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 3 --> <div class="py-card" data-chef="류수영" data-dish="치치닭"> <div class="py-card-top"> <div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div> <div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">19회 · 2020.02.28 편의점 출시</div></div> </div> <div class="py-dish">치치닭 </div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div> <div class="py-ings"><span class="py-ing">닭다리살 500g</span><span class="py-ing">모짜렐라 치즈 1컵</span><span class="py-ing">파인애플 통조림</span><span class="py-ing">간장 4T</span><span class="py-ing">설탕 2T</span><span class="py-ing">굴소스 1T</span><span class="py-ing">다진마늘 1T</span><span class="py-ing">전분 2T</span></div> </div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div> <div class="py-steps"> <div class="py-step"><div class="py-snum">1</div><div class="py-stxt">닭다리살 한입 크기로 잘라 간장·설탕·마늘 양념에 30분 재우기</div></div> <div class="py-step"><div class="py-snum">2</div><div class="py-stxt">전분 묻혀 에어프라이어(200℃ 15분) or 팬에서 바삭하게 굽기</div></div> <div class="py-step"><div class="py-snum">3</div><div class="py-stxt">파인애플·굴소스로 달콤짭짤 소스 만들어 졸이기</div></div> <div class="py-step"><div class="py-snum">4</div><div class="py-stxt">구운 닭에 소스 버무리기</div></div> <div class="py-step"><div class="py-snum">5</div><div class="py-stxt">모짜렐라 치즈 올려 녹이기 (치즈+치킨=치치닭!)</div></div> </div> </div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div> <div class="py-tip">파인애플 즙이 닭고기를 부드럽게 만들어줘요. 치즈는 불 끄고 잔열에 녹여야 타지 않아요.</div> </div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+치치닭" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 4 --> <div class="py-card" data-chef="류수영" data-dish="소고기 육전"> <div class="py-card-top"> <div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div> <div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">25회 · 2020.04.10</div></div> </div> <div class="py-dish">소고기 육전</div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div> <div class="py-ings"><span class="py-ing">육전용 소고기 400g</span><span class="py-ing">찹쌀가루 1컵</span><span class="py-ing">달걀 3개</span><span class="py-ing">진간장 3T</span><span class="py-ing">설탕 1.5T</span><span class="py-ing">참기름 1T</span><span class="py-ing">식용유</span></div> </div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div> <div class="py-steps"> <div class="py-step"><div class="py-snum">1</div><div class="py-stxt">고기 칼끝으로 콕콕 찔러 간장·설탕·참기름으로 밑간 후 30분</div></div> <div class="py-step"><div class="py-snum">2</div><div class="py-stxt">달걀 잘 풀어두기</div></div> <div class="py-step"><div class="py-snum">3</div><div class="py-stxt">고기에 찹쌀가루 앞뒤 묻히기 (일반 밀가루보다 바삭)</div></div> <div class="py-step"><div class="py-snum">4</div><div class="py-stxt">달걀물 입혀 중불 팬에서 앞뒤 각 2분씩 노릇하게</div></div> <div class="py-step"><div class="py-snum">5</div><div class="py-stxt">키친타올에 올려 기름 빼기</div></div> </div> </div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div> <div class="py-tip">찹쌀가루 사용이 핵심! 더 바삭하고 쫀득해요. 밑간이 잘 배어야 고기가 부드럽고 맛있어요.</div> </div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+소고기육전" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 5 --> <div class="py-card" data-chef="류수영" data-dish="닭볶음탕"> <div class="py-card-top"> <div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div> <div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">34회 · 2020.06.19</div></div> </div> <div class="py-dish">어남선생 닭볶음탕</div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div> <div class="py-ings"><span class="py-ing">닭 한 마리 600g</span><span class="py-ing">감자 2개</span><span class="py-ing">양배추 1/4개</span><span class="py-ing">양파 1개</span><span class="py-ing">대파</span><span class="py-ing">고추장 2T</span><span class="py-ing">고춧가루 4T</span><span class="py-ing">간장 3T</span><span class="py-ing">설탕 2T</span><span class="py-ing">맛술 4T</span></div> </div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div> <div class="py-steps"> <div class="py-step"><div class="py-snum">1</div><div class="py-stxt">닭을 찬물에 담가 핏물 제거 (30분)</div></div> <div class="py-step"><div class="py-snum">2</div><div class="py-stxt">양념장(고추장·고춧가루·간장·설탕·맛술·마늘) 미리 만들기</div></div> <div class="py-step"><div class="py-snum">3</div><div class="py-stxt">냄비에 닭, 감자, 양파 넣고 양념 붓고 물 자박하게</div></div> <div class="py-step"><div class="py-snum">4</div><div class="py-stxt">강불로 끓어오르면 중불 낮춰 20분 조리기</div></div> <div class="py-step"><div class="py-snum">5</div><div class="py-stxt">양배추·대파 넣고 5분 더, 참기름 마무리</div></div> </div> </div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div> <div class="py-tip">양배추가 비결! 단맛과 식감을 동시에. 먹다 남은 국물에 라면 넣으면 2배 맛있어요.</div> </div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+닭볶음탕" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 6 --> <div class="py-card" data-chef="류수영" data-dish="스팸 케찹 파스타"> <div class="py-card-top"> <div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div> <div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">42회 · 2020.08.14</div></div> </div> <div class="py-dish">스팸 케찹 파스타</div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div> <div class="py-ings"><span class="py-ing">스파게티면 2인분</span><span class="py-ing">스팸 1/2캔</span><span class="py-ing">케찹 3T</span><span class="py-ing">모짜렐라 치즈 1컵</span><span class="py-ing">다진마늘 1T</span><span class="py-ing">버터 1T</span><span class="py-ing">후추</span></div> </div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div> <div class="py-steps"> <div class="py-step"><div class="py-snum">1</div><div class="py-stxt">끓는 소금물에 면 10분 삶기</div></div> <div class="py-step"><div class="py-snum">2</div><div class="py-stxt">팬에 버터 녹여 스팸 깍둑썰어 볶기</div></div> <div class="py-step"><div class="py-snum">3</div><div class="py-stxt">케찹·마늘 넣고 1분 볶다 삶은 면 투입</div></div> <div class="py-step"><div class="py-snum">4</div><div class="py-stxt">치즈 올려 녹이기</div></div> <div class="py-step"><div class="py-snum">5</div><div class="py-stxt">후추 뿌려 마무리</div></div> </div> </div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div> <div class="py-tip">케찹+마늘이 의외의 황금 조합! 느끼하지 않고 새콤달콤해요. 면수 조금 추가하면 소스가 더 진해져요.</div> </div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+스팸파스타" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 7 --> <div class="py-card" data-chef="류수영" data-dish="고등어 무조림"> <div class="py-card-top"> <div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div> <div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">58회 · 2020.12.04</div></div> </div> <div class="py-dish">고등어 무조림</div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div> <div class="py-ings"><span class="py-ing">고등어 2마리</span><span class="py-ing">무 500g</span><span class="py-ing">양파 1개</span><span class="py-ing">대파 1대</span><span class="py-ing">홍고추 1개</span><span class="py-ing">간장 5T</span><span class="py-ing">고춧가루 4T</span><span class="py-ing">설탕 3T</span><span class="py-ing">굴소스 2T</span><span class="py-ing">된장 1T</span></div> </div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div> <div class="py-steps"> <div class="py-step"><div class="py-snum">1</div><div class="py-stxt">고등어 소금물+밀가루+식초에 20분 담가 비린내 제거</div></div> <div class="py-step"><div class="py-snum">2</div><div class="py-stxt">양념장(간54321법 - 간장5·고춧4·설탕3·굴소스2·식초1)</div></div> <div class="py-step"><div class="py-snum">3</div><div class="py-stxt">냄비에 무 깔고 양념 2T+물 1L 붓기</div></div> <div class="py-step"><div class="py-snum">4</div><div class="py-stxt">끓으면 거품 걷어내고 뚜껑 덮어 중불 15분</div></div> <div class="py-step"><div class="py-snum">5</div><div class="py-stxt">고등어 올리고 나머지 양념 끼얹으며 15분 더 조리기</div></div> </div> </div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div> <div class="py-tip">간설굴식 54321 외우면 평생 쓰는 양념 황금비율! 식초가 생선살을 탱탱하게 잡아줘요.</div> </div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+고등어무조림" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 8 --> <div class="py-card" data-chef="류수영" data-dish="순두부찌개"> <div class="py-card-top"> <div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div> <div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">67회 · 2021.02.05</div></div> </div> <div class="py-dish">스팸 순두부찌개</div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div> <div class="py-ings"><span class="py-ing">순두부 1팩</span><span class="py-ing">스팸 1/2캔</span><span class="py-ing">달걀 1개</span><span class="py-ing">고춧가루 2T</span><span class="py-ing">다진마늘 1T</span><span class="py-ing">국간장 1T</span><span class="py-ing">새우젓 1T</span><span class="py-ing">물 500ml</span><span class="py-ing">대파</span></div> </div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div> <div class="py-steps"> <div class="py-step"><div class="py-snum">1</div><div class="py-stxt">냄비에 참기름 두르고 고춧가루·마늘 볶아 향 내기</div></div> <div class="py-step"><div class="py-snum">2</div><div class="py-stxt">스팸 깍둑썰어 함께 볶기</div></div> <div class="py-step"><div class="py-snum">3</div><div class="py-stxt">물 붓고 끓이다 순두부 넣기</div></div> <div class="py-step"><div class="py-snum">4</div><div class="py-stxt">새우젓·국간장으로 간 맞추기</div></div> <div class="py-step"><div class="py-snum">5</div><div class="py-stxt">달걀 넣고 대파 얹어 마무리</div></div> </div> </div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div> <div class="py-tip">스팸이 육수 역할까지! 별도 육수 없이도 깊은 맛이 나요. 새우젓으로 간을 맞춰야 깔끔해요.</div> </div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+스팸순두부찌개" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 9 --> <div class="py-card" data-chef="류수영" data-dish="양념게장"> <div class="py-card-top"> <div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div> <div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">78회 · 2021.04.23</div></div> </div> <div class="py-dish">냉동꽃게 양념게장</div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div> <div class="py-ings"><span class="py-ing">냉동 절단 꽃게 500g</span><span class="py-ing">간장 7T(45ml)</span><span class="py-ing">고춧가루 4T</span><span class="py-ing">설탕 3T</span><span class="py-ing">식초 1T</span><span class="py-ing">다진마늘 1T</span><span class="py-ing">다진생강 0.5T</span><span class="py-ing">대파</span><span class="py-ing">깨</span></div> </div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div> <div class="py-steps"> <div class="py-step"><div class="py-snum">1</div><div class="py-stxt">냉동 꽃게 솔로 깨끗이 세척 (물에 담그지 않기)</div></div> <div class="py-step"><div class="py-snum">2</div><div class="py-stxt">식초물(물 75ml+식초 2T) 뿌려 5분 재운 뒤 물기 제거</div></div> <div class="py-step"><div class="py-snum">3</div><div class="py-stxt">양념장 모두 섞기</div></div> <div class="py-step"><div class="py-snum">4</div><div class="py-stxt">게에 양념 골고루 버무리기</div></div> <div class="py-step"><div class="py-snum">5</div><div class="py-stxt">냉장고에서 하루 이상 숙성 후 먹기</div></div> </div> </div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div> <div class="py-tip">식초물 뿌리면 비린내 제거 + 살이 탱글해져요! 식초물이 양념에 섞이지 않게 완전히 빼야 해요.</div> </div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+양념게장" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 10 --> <div class="py-card" data-chef="류수영" data-dish="15분 깍두기"> <div class="py-card-top"> <div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div> <div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">89회 · 2021.07.09</div></div> </div> <div class="py-dish">15분 깍두기</div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div> <div class="py-ings"><span class="py-ing">무 2kg</span><span class="py-ing">굵은소금 2T</span><span class="py-ing">고춧가루 6T</span><span class="py-ing">배음료 1캔(238ml)</span><span class="py-ing">밀가루 3T</span><span class="py-ing">굴소스 2T</span><span class="py-ing">새우젓 3T</span><span class="py-ing">다진마늘 4T</span><span class="py-ing">대파</span></div> </div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div> <div class="py-steps"> <div class="py-step"><div class="py-snum">1</div><div class="py-stxt">무 2~3cm 깍둑썰어 소금 2T 뿌려 1시간 절이기</div></div> <div class="py-step"><div class="py-snum">2</div><div class="py-stxt">냄비에 밀가루·굴소스·설탕·배음료 섞어 강불로 걸쭉하게 끓여 배풀 만들기</div></div> <div class="py-step"><div class="py-snum">3</div><div class="py-stxt">절인 무에 고춧가루 넣고 흔들어 섞기</div></div> <div class="py-step"><div class="py-snum">4</div><div class="py-stxt">대파·새우젓·마늘·생강·배풀 모두 넣어 버무리기</div></div> <div class="py-step"><div class="py-snum">5</div><div class="py-stxt">실온 24시간 후 냉장 1주일 숙성</div></div> </div> </div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div> <div class="py-tip">배음료가 갈아만든 배 역할! 따로 갈 필요 없어요. 배풀을 식혀서 넣어야 무가 물러지지 않아요.</div> </div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+15분깍두기" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 11~20 간소화 버전 (재료/순서/팁 핵심만) --> <div class="py-card" data-chef="류수영" data-dish="어묵볶이"> <div class="py-card-top"> <div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div> <div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">101회 · 2021.10.22</div></div> </div> <div class="py-dish">매운 어묵볶이 (당장레시피)</div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div> <div class="py-ings"><span class="py-ing">사각어묵 6장</span><span class="py-ing">대파 2대</span><span class="py-ing">고춧가루 4T</span><span class="py-ing">고추장 2T</span><span class="py-ing">설탕 3T</span><span class="py-ing">굴소스 2T</span><span class="py-ing">진간장 2T</span><span class="py-ing">물 630ml</span><span class="py-ing">청양고추</span></div> </div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div> <div class="py-steps"> <div class="py-step"><div class="py-snum">1</div><div class="py-stxt">팬에 고춧가루·설탕·간장·굴소스·고추장·물 100ml 넣고 섞기</div></div> <div class="py-step"><div class="py-snum">2</div><div class="py-stxt">어묵 길게 반으로 잘라 양념에 넣기</div></div> <div class="py-step"><div class="py-snum">3</div><div class="py-stxt">물 530ml 붓고 센 불로 끓이기</div></div> <div class="py-step"><div class="py-snum">4</div><div class="py-stxt">대파 넣고 중불로 5분</div></div> <div class="py-step"><div class="py-snum">5</div><div class="py-stxt">청양고추·통깨 올려 마무리</div></div> </div> </div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div> <div class="py-tip">양념장을 팬에 바로! 그릇 설거지 없이 초간단. 어묵을 길게 잘라 군만두 싸먹으면 꿀맛!</div> </div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+어묵볶이+당장레시피" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 12 --> <div class="py-card" data-chef="류수영" data-dish="또치닭"> <div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div><div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">113회 · 2022.01.14 편의점 출시</div></div></div> <div class="py-dish">또치닭 </div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div><div class="py-ings"><span class="py-ing">닭다리살 500g</span><span class="py-ing">또띠아 2장</span><span class="py-ing">양배추</span><span class="py-ing">할라피뇨</span><span class="py-ing">사워크림</span><span class="py-ing">간장 3T</span><span class="py-ing">설탕 2T</span><span class="py-ing">고춧가루 2T</span><span class="py-ing">마늘 1T</span></div></div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">닭다리살 양념에 30분 재우기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">에어프라이어 200℃ 15분 또는 팬에서 바삭 굽기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">또띠아 위에 양배추 채 깔기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">구운 닭다리살 올리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">할라피뇨·사워크림 올리고 돌돌 말기</div></div></div></div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">또띠아+닭=또치닭! 매콤한 양념 닭에 사워크림의 조화가 핵심. 할라피뇨는 취향껏 가감하세요.</div></div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+또치닭" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 13 --> <div class="py-card" data-chef="류수영" data-dish="대파크림파스타"> <div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div><div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">135회 · 2022.07.01 편의점 출시</div></div></div> <div class="py-dish">대파크림파스타 </div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div><div class="py-ings"><span class="py-ing">스파게티면 2인분</span><span class="py-ing">대파 흰 부분 3대</span><span class="py-ing">생크림 200ml</span><span class="py-ing">우유 100ml</span><span class="py-ing">버터 2T</span><span class="py-ing">파마산치즈</span><span class="py-ing">소금·후추</span></div></div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">대파 흰 부분만 얇게 슬라이스해서 버터에 충분히 볶기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">생크림+우유 붓고 끓이기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">면 삶아 소스에 버무리기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">파마산치즈 넣어 농도 맞추기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">소금·후추 간 후 대파 초록 부분 올려 마무리</div></div></div></div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">대파를 충분히 볶아야 단맛이 나와요! 카라멜라이즈될 때까지 볶으면 깊은 맛의 비결.</div></div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+대파크림파스타" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 14 --> <div class="py-card" data-chef="류수영" data-dish="어향치킨"> <div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div><div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">158회 · 2022.12.30 편의점 출시</div></div></div> <div class="py-dish">어향치킨 </div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div><div class="py-ings"><span class="py-ing">닭다리살 500g</span><span class="py-ing">가지 1개</span><span class="py-ing">두반장 1T</span><span class="py-ing">간장 2T</span><span class="py-ing">설탕 1T</span><span class="py-ing">식초 1T</span><span class="py-ing">전분 2T</span><span class="py-ing">참기름</span><span class="py-ing">마늘·생강</span></div></div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">닭 전분 묻혀 바삭하게 튀기거나 에어프라이어</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">가지 슬라이스해서 따로 볶기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">두반장+간장+식초+설탕으로 새콤달콤 어향 소스 만들기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">닭+가지 소스에 버무리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">참기름 뿌려 마무리</div></div></div></div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">두반장이 어향의 핵심! 매콤하면서 새콤달콤한 중식 소스. 가지가 소스를 쫙 흡수해서 맛있어요.</div></div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+어향치킨" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <!-- 류수영 15~20 --> <div class="py-card" data-chef="류수영" data-dish="갈비치킨"> <div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div><div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">175회 · 2023.05.05</div></div></div> <div class="py-dish">갈비치킨</div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div><div class="py-ings"><span class="py-ing">닭다리살 500g</span><span class="py-ing">갈아만든 배 1캔</span><span class="py-ing">간장 4T</span><span class="py-ing">설탕 2T</span><span class="py-ing">참기름</span><span class="py-ing">마늘</span><span class="py-ing">깨</span></div></div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">닭 배+간장+설탕+마늘에 1시간 재우기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">에어프라이어 190℃ 18분</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">남은 양념 졸여 소스 만들기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">구운 닭에 소스 발라 5분 더 굽기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">참기름·깨 마무리</div></div></div></div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">배로 재워서 갈비집 치킨 맛! 마지막 소스 발라 굽는 단계가 윤기의 비결.</div></div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+갈비치킨" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <div class="py-card" data-chef="류수영" data-dish="나폴리갈비덮밥"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div><div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">190회 · 2023.08.25 </div></div></div><div class="py-dish">나폴리 갈비덮밥 </div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div><div class="py-ings"><span class="py-ing">갈비 500g</span><span class="py-ing">토마토 소스 200ml</span><span class="py-ing">양파 1개</span><span class="py-ing">마늘 5쪽</span><span class="py-ing">버터 1T</span><span class="py-ing">바질</span><span class="py-ing">파마산치즈</span><span class="py-ing">밥 2공기</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">갈비 핏물 제거 후 소금·후추 밑간</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">팬에 버터로 갈비 시어링</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">양파·마늘 볶다 토마토 소스 넣어 약불 30분 조리기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">갈비 살 발라내어 소스에 버무리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">밥 위에 올리고 치즈·바질로 마무리</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">한식 갈비에 이탈리안 토마토 소스의 퓨전! 약불에서 충분히 조려야 살이 부드럽게 발려요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+나폴리갈비덮밥" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="류수영" data-dish="마라투움바"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div><div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">205회 · 2023.12.08 </div></div></div><div class="py-dish">마라투움바 </div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div><div class="py-ings"><span class="py-ing">스파게티면 2인분</span><span class="py-ing">마라소스 2T</span><span class="py-ing">생크림 150ml</span><span class="py-ing">새우 10마리</span><span class="py-ing">닭가슴살</span><span class="py-ing">버터 1T</span><span class="py-ing">마늘</span><span class="py-ing">파마산치즈</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">새우·닭 버터에 볶기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">마라소스 넣고 1분 볶기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">생크림 넣고 크림소스 만들기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">삶은 면 버무리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">치즈 뿌려 마무리</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">마라+크림 조합이 의외로 찰떡! 마라소스 양으로 매운맛 조절하세요. 면수 조금 추가하면 더 부드러워요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+마라투움바" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="류수영" data-dish="사치닭"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div><div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">218회 · 2024.03.15 </div></div></div><div class="py-dish">사치닭 </div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div><div class="py-ings"><span class="py-ing">닭다리살 500g</span><span class="py-ing">사천고추</span><span class="py-ing">화자오(화자오페퍼)</span><span class="py-ing">두반장 1T</span><span class="py-ing">간장 2T</span><span class="py-ing">설탕 1T</span><span class="py-ing">전분</span><span class="py-ing">마늘·생강</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">닭 전분 묻혀 바삭하게 튀기기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">팬에 기름 두르고 사천고추·화자오 볶아 향 내기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">두반장·마늘·생강 넣고 볶기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">간장·설탕 넣고 닭 버무리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">참기름 마무리</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">화자오가 입이 얼얼한 마라 느낌의 핵심! 없으면 사천 고추만 써도 OK. 사치(사천+치킨) 레시피!</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+사치닭" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="류수영" data-dish="참치 비빔국수"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff3b30)"> ‍ </div><div><div class="py-chef-name">류수영 (어남선생)</div><div class="py-ep">232회 · 2024.06.28</div></div></div><div class="py-dish">참치 비빔국수</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div><div class="py-ings"><span class="py-ing">소면 2인분</span><span class="py-ing">참치캔 1개</span><span class="py-ing">오이 1/2개</span><span class="py-ing">고추장 2T</span><span class="py-ing">식초 2T</span><span class="py-ing">설탕 1T</span><span class="py-ing">참기름</span><span class="py-ing">깨</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">소면 삶아 찬물에 헹구기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">고추장·식초·설탕·참기름 양념장 만들기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">기름 뺀 참치 넣어 버무리기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">오이 채 썰어 올리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">달걀 프라이 올려 마무리</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">참치 기름을 꼭 빼야 깔끔! 오이 대신 무 채도 좋아요. 냉장고 재료만으로 5분 완성!</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+류수영+참치비빔국수" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> </div><!-- /류수영 cards --> <!-- ══════════════════════════════════════ ‍ 이영자 섹션 ══════════════════════════════════════ --> <div class="py-sec"> <div class="py-sec-dot" style="background:#af52de"></div> <h2>이영자 <span style="font-weight:400;color:var(--t3)">(먹대모)</span></h2> <div class="py-sec-count" id="cnt-이영자">10개</div> </div> <div class="py-cards" id="sec-이영자"> <div class="py-card" data-chef="이영자" data-dish="매운 쌀밥"> <div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#af52de,#ff2d55)"> ‍ </div><div><div class="py-chef-name">이영자 (먹대모)</div><div class="py-ep">3회 · 2019.11.08 </div></div></div> <div class="py-dish">이영자 매운 쌀밥 </div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--purple)"></span>재료</div><div class="py-ings"><span class="py-ing">쌀밥 1공기</span><span class="py-ing">닭발 양념</span><span class="py-ing">고추장 2T</span><span class="py-ing">고춧가루 1T</span><span class="py-ing">간장 1T</span><span class="py-ing">설탕 1T</span><span class="py-ing">다진마늘</span><span class="py-ing">달걀</span><span class="py-ing">참기름</span></div></div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">닭발집 비법 매운 양념장 만들기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">팬에 밥 볶기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">양념 넣고 매콤하게 볶음밥 만들기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">달걀 프라이 올리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">참기름·깨 마무리</div></div></div></div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">30년 단골 닭발집 레시피 전수! 이영자의 첫 우승작. 불맛 나도록 강불 볶기가 포인트.</div></div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이영자+매운쌀밥" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <div class="py-card" data-chef="이영자" data-dish="궁중쫄면"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#af52de,#ff2d55)"> ‍ </div><div><div class="py-chef-name">이영자 (먹대모)</div><div class="py-ep">116회 · 2022.02.25 </div></div></div><div class="py-dish">궁중쫄면 </div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--purple)"></span>재료</div><div class="py-ings"><span class="py-ing">쫄면 사리 2인분</span><span class="py-ing">콩나물 300g</span><span class="py-ing">차돌박이 80g</span><span class="py-ing">납작만두 4개</span><span class="py-ing">고추장 1컵</span><span class="py-ing">고춧가루 1/2컵</span><span class="py-ing">사과즙 1컵</span><span class="py-ing">물엿 7T</span><span class="py-ing">트러플오일</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">양념장(고추장·고춧가루·간장·물엿·사과즙·식초) 믹서에 갈아 하루 숙성</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">콩나물 데치기, 쫄면 삶기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">차돌박이 강불 1분, 납작만두 약불 3분 굽기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">쫄면+콩나물+양념장 버무리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">트러플오일 두르고 차돌박이·만두 올리기</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">트러플오일이 궁중 격 UP! 없으면 참기름으로 대체. 양념장은 반드시 하루 숙성해야 맛이 달라요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이영자+궁중쫄면" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이영자" data-dish="불고기파전"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#af52de,#ff2d55)"> ‍ </div><div><div class="py-chef-name">이영자 (먹대모)</div><div class="py-ep">20회 · 2020.03.06</div></div></div><div class="py-dish">이영자 불고기파전</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--purple)"></span>재료</div><div class="py-ings"><span class="py-ing">불고기용 소고기 200g</span><span class="py-ing">대파 2대</span><span class="py-ing">부추 한 줌</span><span class="py-ing">부침가루 1컵</span><span class="py-ing">달걀 2개</span><span class="py-ing">간장 2T</span><span class="py-ing">설탕 1T</span><span class="py-ing">참기름</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">불고기 간장·설탕에 10분 재우기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">부침가루+달걀+물로 반죽</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">팬에 기름 두르고 반죽 펴기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">대파·부추·불고기 올리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">뒤집어 노릇하게 굽기</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">이영자가 황신혜 추천 식당에서 전수받은 독특한 반죽 비법이 핵심! 반죽에 달걀 넣으면 더 고소해요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이영자+불고기파전" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이영자" data-dish="간장비빔면"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#af52de,#ff2d55)"> ‍ </div><div><div class="py-chef-name">이영자 (먹대모)</div><div class="py-ep">20회 · 2020.03.06</div></div></div><div class="py-dish">간장비빔면</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--purple)"></span>재료</div><div class="py-ings"><span class="py-ing">중면 2인분</span><span class="py-ing">간장 3T</span><span class="py-ing">참기름 2T</span><span class="py-ing">설탕 1T</span><span class="py-ing">다진마늘 1T</span><span class="py-ing">오이</span><span class="py-ing">달걀</span><span class="py-ing">깨</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">간장·참기름·설탕·마늘 양념 만들기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">면 삶아 찬물에 헹구기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">양념에 면 버무리기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">오이 채 썰어 올리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">달걀 반숙·깨 올려 완성</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">이영자가 감동받은 식당의 간장비빔면! 참기름을 아끼지 않는 것이 핵심. 면을 차갑게 해야 더 맛있어요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이영자+간장비빔면" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이영자" data-dish="명란크림파스타"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#af52de,#ff2d55)"> ‍ </div><div><div class="py-chef-name">이영자 (먹대모)</div><div class="py-ep">55회 · 2020.11.13</div></div></div><div class="py-dish">이영자 명란크림파스타</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--purple)"></span>재료</div><div class="py-ings"><span class="py-ing">스파게티면 2인분</span><span class="py-ing">명란젓 50g</span><span class="py-ing">생크림 200ml</span><span class="py-ing">버터 2T</span><span class="py-ing">마늘 3쪽</span><span class="py-ing">파마산치즈</span><span class="py-ing">쪽파</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">명란 껍질 제거하고 알만 빼놓기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">버터+마늘 볶다 생크림 넣고 끓이기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">명란 넣고 약불에서 섞기 (절대 끓이지 않기)</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">삶은 면 버무리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">쪽파·치즈 올려 마무리</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">명란을 끓이면 익어서 식감이 달라져요! 불 끄고 잔열에 섞는 게 핵심. 고소하고 짭짤한 이탈리안 명란!</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이영자+명란크림파스타" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <!-- 이영자 6~10 간소형 --> <div class="py-card" data-chef="이영자" data-dish="영자삼합"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#af52de,#ff2d55)"> ‍ </div><div><div class="py-chef-name">이영자 (먹대모)</div><div class="py-ep">21회 · 2020.03.13</div></div></div><div class="py-dish">영자삼합 (명란+돌게장+잡채)</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--purple)"></span>재료</div><div class="py-ings"><span class="py-ing">명란젓</span><span class="py-ing">돌게장</span><span class="py-ing">잡채</span><span class="py-ing">쌈채소</span><span class="py-ing">참기름</span><span class="py-ing">깨</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">잡채 미리 만들어두기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">명란젓과 돌게장 준비</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">쌈채소에 세 가지 올려 한입에</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">이영자표 삼합! 세 가지 간이 어우러지면 밥 한 그릇 뚝딱. 명란은 구워서 곁들여도 맛있어요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이영자+영자삼합" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이영자" data-dish="꿀통삼겹살"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#af52de,#ff2d55)"> ‍ </div><div><div class="py-chef-name">이영자 (먹대모)</div><div class="py-ep">38회 · 2020.07.17</div></div></div><div class="py-dish">이영자 꿀통삼겹살</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--purple)"></span>재료</div><div class="py-ings"><span class="py-ing">통삼겹살 500g</span><span class="py-ing">꿀 3T</span><span class="py-ing">간장 2T</span><span class="py-ing">마늘 1T</span><span class="py-ing">후추</span><span class="py-ing">로즈마리</span><span class="py-ing">쌈채소</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">삼겹살 꿀+간장+마늘+후추에 30분 재우기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">오븐 200℃ 30분 또는 에어프라이어 굽기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">중간에 남은 마리네이드 발라주기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">노릇하게 구워지면 꺼내기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">쌈채소와 함께 서빙</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">꿀로 재운 삼겹살은 윤기+단맛이 살아나요! 마리네이드를 자주 발라줄수록 더 맛있어요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이영자+꿀통삼겹살" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이영자" data-dish="전복죽"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#af52de,#ff2d55)"> ‍ </div><div><div class="py-chef-name">이영자 (먹대모)</div><div class="py-ep">70회 · 2021.02.26</div></div></div><div class="py-dish">이영자 전복죽</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--purple)"></span>재료</div><div class="py-ings"><span class="py-ing">전복 4마리</span><span class="py-ing">쌀 1컵</span><span class="py-ing">참기름 2T</span><span class="py-ing">국간장 1T</span><span class="py-ing">소금</span><span class="py-ing">물 5컵</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">전복 솔로 깨끗이 닦아 내장 분리</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">참기름에 전복 내장 볶기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">불린 쌀 넣고 볶다 물 붓기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">전복 살 넣고 약불에서 20분</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">국간장·소금으로 간 맞추기</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">내장을 먼저 볶아야 녹색 색깔이 예쁘게 나와요! 전복살은 너무 오래 익히면 질겨지니 주의.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이영자+전복죽" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이영자" data-dish="고추참치김밥"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#af52de,#ff2d55)"> ‍ </div><div><div class="py-chef-name">이영자 (먹대모)</div><div class="py-ep">82회 · 2021.05.21</div></div></div><div class="py-dish">이영자 고추참치김밥</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--purple)"></span>재료</div><div class="py-ings"><span class="py-ing">고추참치캔 2개</span><span class="py-ing">밥 2공기</span><span class="py-ing">김 4장</span><span class="py-ing">달걀 2개</span><span class="py-ing">오이</span><span class="py-ing">참기름</span><span class="py-ing">소금</span><span class="py-ing">깨</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">밥에 참기름·소금·깨 넣고 간하기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">달걀 부쳐 길게 썰기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">고추참치 기름 빼기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">김 위에 밥 펴고 재료 올려 말기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">참기름 발라 마무리</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">고추참치캔만 있으면 끝! 양념 따로 필요 없는 초간단 김밥. 촉촉하게 먹으려면 김을 반으로 잘라 겹겹이 말기.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이영자+고추참치김밥" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이영자" data-dish="된장찌개"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#af52de,#ff2d55)"> ‍ </div><div><div class="py-chef-name">이영자 (먹대모)</div><div class="py-ep">100회 · 2021.10.08</div></div></div><div class="py-dish">이영자 된장찌개</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--purple)"></span>재료</div><div class="py-ings"><span class="py-ing">된장 3T</span><span class="py-ing">두부 1/2모</span><span class="py-ing">애호박 1/2개</span><span class="py-ing">감자 1개</span><span class="py-ing">표고버섯</span><span class="py-ing">다시마 육수 3컵</span><span class="py-ing">청양고추</span><span class="py-ing">마늘</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">다시마+멸치로 육수 만들기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">감자·호박 썰어 육수에 넣기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">된장 풀어 끓이기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">두부·버섯 넣고 5분</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">청양고추·마늘 넣어 마무리</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">이영자표 된장은 육수가 생명! 다시마 육수를 넉넉히 우려야 깊은 맛이 나요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이영자+된장찌개" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> </div> <!-- ══════════════════════════════════════ 이경규 섹션 ══════════════════════════════════════ --> <div class="py-sec"> <div class="py-sec-dot" style="background:#34c759"></div> <h2>이경규 <span style="font-weight:400;color:var(--t3)">(규든램지)</span></h2> <div class="py-sec-count" id="cnt-이경규">10개</div> </div> <div class="py-cards" id="sec-이경규"> <div class="py-card" data-chef="이경규" data-dish="마장면"> <div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#34c759,#007aff)"> </div><div><div class="py-chef-name">이경규 (규든램지)</div><div class="py-ep">1회 · 2019.10.25 역대 첫 우승</div></div></div> <div class="py-dish">마장면 역대 첫 우승</div> <div class="py-div"></div> <div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--green)"></span>재료</div><div class="py-ings"><span class="py-ing">중면 2인분</span><span class="py-ing">마라소스 2T</span><span class="py-ing">간장 2T</span><span class="py-ing">식초 1T</span><span class="py-ing">설탕 1T</span><span class="py-ing">다진마늘</span><span class="py-ing">오이 채</span><span class="py-ing">숙주</span><span class="py-ing">땅콩</span></div></div> <div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">면 삶아 찬물에 헹구기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">마라소스·간장·식초·설탕·마늘로 양념장</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">숙주 데치기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">면에 양념 버무리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">오이채·숙주·땅콩 올려 완성</div></div></div></div> <div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">편스토랑 역사적 첫 우승작! 마라의 얼얼함+새콤달콤 양념의 조화. 땅콩이 고소함을 더해요.</div></div> <a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이경규+마장면" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a> </div> <div class="py-card" data-chef="이경규" data-dish="복돼지면"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#34c759,#007aff)"> </div><div><div class="py-chef-name">이경규 (규든램지)</div><div class="py-ep">30회 · 2020.05.15 </div></div></div><div class="py-dish">복돼지면 </div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--green)"></span>재료</div><div class="py-ings"><span class="py-ing">라면 2개</span><span class="py-ing">돼지고기 다짐육 150g</span><span class="py-ing">돈골 분말 1팩</span><span class="py-ing">다대기</span><span class="py-ing">부추</span><span class="py-ing">달걀</span><span class="py-ing">대파</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">돼지고기 다짐육 삶아 육수 만들기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">돈골 분말 넣어 진한 국물 만들기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">라면 삶아 넣기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">부추·달걀·다대기 올리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">다대기로 매운맛 조절</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">라멘의 국밥 버전! 첫 밀키트 우승작. 다대기 없이 먹으면 느끼할 수 있으니 꼭 함께 먹어요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이경규+복돼지면" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이경규" data-dish="바질라면"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#34c759,#007aff)"> </div><div><div class="py-chef-name">이경규 (규든램지)</div><div class="py-ep">100회 · 2021.10.08 100회 특집</div></div></div><div class="py-dish">바질라면 100회 특집 우승</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--green)"></span>재료</div><div class="py-ings"><span class="py-ing">라면 1개</span><span class="py-ing">바질페스토 2T</span><span class="py-ing">파마산치즈</span><span class="py-ing">달걀</span><span class="py-ing">올리브오일</span><span class="py-ing">마늘</span><span class="py-ing">버터 1T</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">라면 삶아 물 적게 남기기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">버터+마늘 볶기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">바질페스토 넣고 면 버무리기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">파마산치즈 뿌리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">달걀 반숙 올려 마무리</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">라면+이탈리안 바질의 파격 조합! 면물을 조금 남겨 소스 농도 맞추는 게 포인트. 100회 라면전쟁 우승!</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이경규+바질라면" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이경규" data-dish="김자반 비빔밥 라유장"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#34c759,#007aff)"> </div><div><div class="py-chef-name">이경규 (규든램지)</div><div class="py-ep">60회 · 2020.12.18 </div></div></div><div class="py-dish">김자반 비빔밥 + 라유장 </div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--green)"></span>재료</div><div class="py-ings"><span class="py-ing">밥 2공기</span><span class="py-ing">김자반</span><span class="py-ing">양파 1/2</span><span class="py-ing">대파 2대</span><span class="py-ing">건표고버섯 10g</span><span class="py-ing">건새우 10g</span><span class="py-ing">고추장·고춧가루</span><span class="py-ing">간장·참기름</span><span class="py-ing">오일 5T</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">양파·대파·표고·건새우 곱게 다지기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">오일에 중불로 다진 재료 볶기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">고추장·고춧가루·간장·설탕·참기름으로 라유장 완성</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">밥에 김자반+라유장 올리기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">달걀 프라이 올려 비비기</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">라유장은 다른 요리에도 만능 소스! 센 불 금지—중불에서 천천히 볶아야 타지 않아요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이경규+김자반비빔밥+라유장" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이경규" data-dish="마늘면볶이"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#34c759,#007aff)"> </div><div><div class="py-chef-name">이경규 (규든램지)</div><div class="py-ep">22회 · 2020.03.20</div></div></div><div class="py-dish">마늘면볶이</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--green)"></span>재료</div><div class="py-ings"><span class="py-ing">라면 2개</span><span class="py-ing">마늘 10쪽</span><span class="py-ing">버터 2T</span><span class="py-ing">간장 2T</span><span class="py-ing">설탕 1T</span><span class="py-ing">굴소스 1T</span><span class="py-ing">쪽파</span><span class="py-ing">참기름</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">라면 살짝 덜 삶아 건지기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">버터에 슬라이스 마늘 노릇하게 볶기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">간장·설탕·굴소스 넣기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">면 넣고 센 불에 볶기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">쪽파·참기름 마무리</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">마늘은 버터에서 노릇해질 때까지! 그래야 고소한 마늘향이 최대로. 면을 좀 덜 익혀야 볶을 때 안 풀려요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이경규+마늘면볶이" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이경규" data-dish="매운돈가스"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#34c759,#007aff)"> </div><div><div class="py-chef-name">이경규 (규든램지)</div><div class="py-ep">22회 · 2020.03.20</div></div></div><div class="py-dish">이경규 매운돈가스</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--green)"></span>재료</div><div class="py-ings"><span class="py-ing">돼지 등심 200g</span><span class="py-ing">빵가루</span><span class="py-ing">달걀</span><span class="py-ing">밀가루</span><span class="py-ing">고추장 2T</span><span class="py-ing">케찹 2T</span><span class="py-ing">마늘</span><span class="py-ing">식용유</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">돼지 등심 두드려 얇게 펴기, 소금·후추 밑간</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">밀가루→달걀→빵가루 순서로 입히기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">170℃ 기름에 5분 튀기기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">고추장+케찹+마늘로 매운 소스 만들기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">돈가스 위에 소스 뿌려 완성</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">분식소년단도 인정한 레시피! 고추장+케찹 소스가 양식 돈가스를 한식으로 변신시켜요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이경규+매운돈가스" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이경규" data-dish="대왕돈가스"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#34c759,#007aff)"> </div><div><div class="py-chef-name">이경규 (규든램지)</div><div class="py-ep">45회 · 2020.09.04 </div></div></div><div class="py-dish">대왕돈가스 </div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--green)"></span>재료</div><div class="py-ings"><span class="py-ing">돼지 목살 300g</span><span class="py-ing">빵가루</span><span class="py-ing">달걀 2개</span><span class="py-ing">밀가루</span><span class="py-ing">돈가스 소스</span><span class="py-ing">양배추 채</span><span class="py-ing">식용유</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">목살 칼집 넣어 크게 펴기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">밀가루→달걀→빵가루</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">160℃ 기름에 7분 튀기기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">200℃ 올려 마지막 1분 바삭하게</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">양배추 채·소스와 함께 서빙</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">이단 튀김이 핵심! 낮은 온도로 속 익히고 마지막에 고온으로 바삭함 완성. 이경규 10승 대표작.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이경규+대왕돈가스" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이경규" data-dish="오믈렛 토스트"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#34c759,#007aff)"> </div><div><div class="py-chef-name">이경규 (규든램지)</div><div class="py-ep">22회 · 2020.03.20</div></div></div><div class="py-dish">이경규 오믈렛 토스트</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--green)"></span>재료</div><div class="py-ings"><span class="py-ing">식빵 2장</span><span class="py-ing">달걀 3개</span><span class="py-ing">치즈 2장</span><span class="py-ing">버터 1T</span><span class="py-ing">케찹</span><span class="py-ing">소금·후추</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">달걀 풀어 소금·후추 간</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">버터 두른 팬에 스크램블 만들기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">식빵 위에 오믈렛 올리기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">치즈 올려 녹이기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">케찹 뿌려 완성</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">분식소년단도 먹고 감탄! 오믈렛은 촉촉하게 반숙으로. 치즈는 불 끄고 잔열에 녹여요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이경규+오믈렛토스트" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이경규" data-dish="달고나커피"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#34c759,#007aff)"> </div><div><div class="py-chef-name">이경규 (규든램지)</div><div class="py-ep">19회 · 2020.02.28</div></div></div><div class="py-dish">달고나커피</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--green)"></span>재료</div><div class="py-ings"><span class="py-ing">인스턴트커피 2T</span><span class="py-ing">설탕 2T</span><span class="py-ing">뜨거운 물 2T</span><span class="py-ing">우유 1컵</span><span class="py-ing">얼음</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">커피:설탕:물 = 2:2:2 비율로 믹스</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">400회 이상 저어 크림 만들기 (또는 핸드믹서)</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">크림이 부드럽게 올라올 때까지</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">컵에 얼음+우유 넣기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">크림 올려 완성</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">마카오에서 정일우가 발견한 후 소개! 커피:설탕:물 = 1:1:1. 핸드믹서 쓰면 30초면 완성.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+달고나커피" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> </div> <!-- ══════════════════════════════════════ 박솔미 / 이찬원 / 차예련 섹션 ══════════════════════════════════════ --> <div class="py-sec"> <div class="py-sec-dot" style="background:#ff9500"></div> <h2>박솔미 · 이찬원 · 차예련</h2> <div class="py-sec-count" id="cnt-박솔미">시즌2</div> </div> <div class="py-cards" id="sec-박솔미"> <div class="py-card" data-chef="박솔미" data-dish="부미녀 오징어볶음"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff2d55)"> </div><div><div class="py-chef-name">박솔미 (부미녀)</div><div class="py-ep">135회 · 2022.07.01</div></div></div><div class="py-dish">부미녀 오징어볶음</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div><div class="py-ings"><span class="py-ing">오징어 1마리</span><span class="py-ing">고추장 2T</span><span class="py-ing">고춧가루 1T</span><span class="py-ing">간장 1T</span><span class="py-ing">설탕 1T</span><span class="py-ing">물엿 1T</span><span class="py-ing">양파</span><span class="py-ing">대파</span><span class="py-ing">청양고추</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">오징어 내장 제거, 칼집 넣어 한입 크기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">양념장 만들기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">팬에 양파 먼저 볶기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">오징어+양념장 센 불에 빠르게 볶기 (2~3분)</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">대파·참기름·깨 마무리</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">오징어는 센 불 2~3분이 전부! 오래 볶으면 고무처럼 질겨져요. 물엿이 윤기의 비결.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+박솔미+오징어볶음" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="박솔미" data-dish="부미녀 뼈해장국"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#ff9500,#ff2d55)"> </div><div><div class="py-chef-name">박솔미 (부미녀)</div><div class="py-ep">148회 · 2022.10.07 </div></div></div><div class="py-dish">부미녀 뼈해장국 </div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot"></span>재료</div><div class="py-ings"><span class="py-ing">돼지 등뼈 1kg</span><span class="py-ing">우거지 한 줌</span><span class="py-ing">들깻가루 3T</span><span class="py-ing">된장 2T</span><span class="py-ing">고춧가루 2T</span><span class="py-ing">다진마늘 1T</span><span class="py-ing">대파</span><span class="py-ing">소금</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">등뼈 찬물에 1시간 핏물 제거</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">끓는 물에 데쳐 잡내 제거</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">물 2L + 등뼈 넣고 1시간 이상 끓이기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">된장·고춧가루·마늘 넣기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">우거지+들깻가루 넣고 30분 더</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">들깻가루가 국물을 걸쭉하고 구수하게! 핏물 제거와 데치기 두 단계를 꼭 해야 잡내가 없어요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+박솔미+뼈해장국" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이찬원" data-dish="진또배기 맵싹갈비"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#007aff,#34c759)"> </div><div><div class="py-chef-name">이찬원</div><div class="py-ep">140회 · 2022.08.12 </div></div></div><div class="py-dish">진또배기 맵싹갈비 250만개 판매</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot b"></span>재료</div><div class="py-ings"><span class="py-ing">갈비 (짧은 뼈) 500g</span><span class="py-ing">동인동 매운찜갈비 양념</span><span class="py-ing">고추장 3T</span><span class="py-ing">고춧가루 3T</span><span class="py-ing">간장 2T</span><span class="py-ing">설탕 2T</span><span class="py-ing">물엿 1T</span><span class="py-ing">밥 2공기</span><span class="py-ing">옥수수 마요네즈</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">갈비 핏물 제거</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">대구 스타일 매운 찜갈비 양념에 1시간 재우기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">오븐 or 에어프라이어 180℃ 25분</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">갈비 살 발라내어 고추장 밥과 볶기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">삼각김밥 모양으로 만들어 옥수수마요 넣기</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">전국 편의점 250만개 판매 메가히트! 대구 동인동 스타일 매운맛+옥수수마요의 극적인 조화.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이찬원+진또배기맵싹갈비" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="이찬원" data-dish="이찬원 해물탕"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#007aff,#34c759)"> </div><div><div class="py-chef-name">이찬원</div><div class="py-ep">155회 · 2022.12.09</div></div></div><div class="py-dish">이찬원 해물탕</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot b"></span>재료</div><div class="py-ings"><span class="py-ing">꽃게 1마리</span><span class="py-ing">새우 8마리</span><span class="py-ing">홍합 한 줌</span><span class="py-ing">낙지 1마리</span><span class="py-ing">고춧가루 4T</span><span class="py-ing">고추장 2T</span><span class="py-ing">간장 2T</span><span class="py-ing">다진마늘 2T</span><span class="py-ing">대파</span><span class="py-ing">다시마 육수</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">다시마 육수 끓이기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">고춧가루·고추장·간장·마늘로 양념장</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">육수에 양념 풀기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">꽃게·새우·홍합 넣고 끓이기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">낙지·대파 넣고 5분 더</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">이찬원이 직접 해산물 고르는 법부터 배워 만든 레시피! 낙지는 마지막에 넣어야 안 질겨요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+이찬원+해물탕" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="차예련" data-dish="차예련 김치볶음밥"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#ff2d55,#af52de)"> </div><div><div class="py-chef-name">차예련</div><div class="py-ep">137회 · 2022.07.22 </div></div></div><div class="py-dish">차예련 김치볶음밥 </div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--pink)"></span>재료</div><div class="py-ings"><span class="py-ing">묵은지 1/2포기</span><span class="py-ing">밥 2공기</span><span class="py-ing">참치캔 1개</span><span class="py-ing">간장 1T</span><span class="py-ing">참기름</span><span class="py-ing">버터 1T</span><span class="py-ing">달걀 2개</span><span class="py-ing">치즈 2장</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">묵은지 꼭 짜서 송송 썰기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">버터에 김치 볶다 참치 넣기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">밥+간장 넣고 강불 볶기</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">치즈 올려 녹이기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">달걀 프라이 올리고 참기름 마무리</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">묵은지가 핵심! 신김치의 산미가 볶음밥을 살려요. 김치 물기를 꼭 짜야 밥이 뭉치지 않아요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+차예련+김치볶음밥" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> <div class="py-card" data-chef="차예련" data-dish="차예련 떡갈비"><div class="py-card-top"><div class="py-avatar" style="background:linear-gradient(135deg,#ff2d55,#af52de)"> </div><div><div class="py-chef-name">차예련</div><div class="py-ep">168회 · 2023.03.10</div></div></div><div class="py-dish">차예련 떡갈비</div><div class="py-div"></div><div class="py-row"><div class="py-label"><span class="py-dot" style="background:var(--pink)"></span>재료</div><div class="py-ings"><span class="py-ing">소고기 다짐육 300g</span><span class="py-ing">돼지 다짐육 200g</span><span class="py-ing">두부 1/4모</span><span class="py-ing">간장 3T</span><span class="py-ing">설탕 2T</span><span class="py-ing">참기름 1T</span><span class="py-ing">마늘 1T</span><span class="py-ing">생강 0.5T</span><span class="py-ing">깨</span></div></div><div class="py-row"><div class="py-label"><span class="py-dot g"></span>순서</div><div class="py-steps"><div class="py-step"><div class="py-snum">1</div><div class="py-stxt">두부 으깨어 물기 꼭 짜기</div></div><div class="py-step"><div class="py-snum">2</div><div class="py-stxt">다짐육+두부+양념 모두 섞어 치대기</div></div><div class="py-step"><div class="py-snum">3</div><div class="py-stxt">동그랗게 빚어 냉장 30분</div></div><div class="py-step"><div class="py-snum">4</div><div class="py-stxt">팬에 중불로 앞뒤 각 4분씩 굽기</div></div><div class="py-step"><div class="py-snum">5</div><div class="py-stxt">남은 양념 발라 윤기 내기</div></div></div></div><div class="py-row"><div class="py-label"><span class="py-dot o"></span>팁</div><div class="py-tip">두부가 촉촉함의 비결! 소:돼지 = 6:4 비율이 황금. 치댈수록 결이 좋아져요.</div></div><a class="py-yt" href="https://www.youtube.com/results?search_query=편스토랑+차예련+떡갈비" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.8 15.5V8.5l6.2 3.5-6.2 3.5z"/></svg>유튜브 레시피 영상 보기</a></div> </div> <!-- ══════════════════ EMPTY STATE ══════════════════ --> <div class="py-empty" id="pyEmpty"> <div style="font-size:40px;margin-bottom:12px"> </div> <div>검색 결과가 없어요.<br>다른 검색어로 시도해보세요!</div> </div> <!-- ══════════════════════════════════════ 티스토리 HTML 붙여넣기 가이드 ══════════════════════════════════════ --> <div style="background:#fff;border-radius:18px;padding:24px;margin:16px 20px 0;box-shadow:0 2px 12px rgba(0,0,0,0.08);max-width:620px;margin-left:auto;margin-right:auto"> <div style="font-size:16px;font-weight:900;color:#1c1c1e;margin-bottom:12px"> 티스토리 붙여넣기 방법</div> <div style="display:flex;flex-direction:column;gap:10px"> <div style="display:flex;gap:10px;align-items:flex-start"><div style="min-width:24px;height:24px;background:#ff3b30;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0">1</div><div style="font-size:14px;line-height:1.6;color:#1c1c1e">티스토리 글쓰기 페이지 열기</div></div> <div style="display:flex;gap:10px;align-items:flex-start"><div style="min-width:24px;height:24px;background:#ff3b30;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0">2</div><div style="font-size:14px;line-height:1.6;color:#1c1c1e">오른쪽 상단 <strong>[HTML]</strong> 탭 클릭</div></div> <div style="display:flex;gap:10px;align-items:flex-start"><div style="min-width:24px;height:24px;background:#ff3b30;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0">3</div><div style="font-size:14px;line-height:1.6;color:#1c1c1e">이 HTML 파일 전체 <strong>Ctrl+A → Ctrl+C</strong></div></div> <div style="display:flex;gap:10px;align-items:flex-start"><div style="min-width:24px;height:24px;background:#ff3b30;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0">4</div><div style="font-size:14px;line-height:1.6;color:#1c1c1e">HTML 탭에서 <strong>Ctrl+V</strong> 붙여넣기</div></div> <div style="display:flex;gap:10px;align-items:flex-start"><div style="min-width:24px;height:24px;background:#ff3b30;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0">5</div><div style="font-size:14px;line-height:1.6;color:#1c1c1e"><strong>[기본]</strong> 탭으로 돌아와 미리보기 확인 후 발행!</div></div> </div> <div style="margin-top:14px;background:#fff1f0;border-radius:10px;padding:12px;font-size:13px;color:#c0392b;border-left:3px solid #ff3b30"> <strong>폰트 깨짐 주의:</strong> 이 파일은 Google Fonts CDN으로 한국어 폰트(Noto Sans KR)를 불러와요. 인터넷 연결 상태에서 미리보기하면 폰트가 정상 표시됩니다. </div> </div> <!-- ══════════════════ FOOTER ══════════════════ --> <div class="py-footer"> <span>신상출시 편스토랑</span> · KBS 2TV 매주 금요일 밤 8:30<br> ✅ 시즌1(CU) · 시즌2(GS25) · 판매 수익금 → 결식아동 기부<br> <span style="color:var(--t3)">레시피 저작권은 해당 출연자 및 KBS에 있습니다</span> </div> <!-- ══════════════════ JS ══════════════════ --> <script> var activeChef = '전체'; function pySetChef(chef, el) { activeChef = chef; document.querySelectorAll('.py-chip').forEach(function(c){ c.classList.remove('on'); }); el.classList.add('on'); document.getElementById('pySearch').value = ''; document.getElementById('pyClear').style.display = 'none'; pyFilter(); } function pyClearSearch() { document.getElementById('pySearch').value = ''; document.getElementById('pyClear').style.display = 'none'; pyFilter(); } function pyFilter() { var q = document.getElementById('pySearch').value.trim().toLowerCase(); document.getElementById('pyClear').style.display = q ? 'inline' : 'none'; var cards = document.querySelectorAll('.py-card'); var total = 0; var counts = {}; cards.forEach(function(card) { var chef = card.dataset.chef || ''; var dish = card.dataset.dish || ''; var matchChef = (activeChef === '전체') || (chef === activeChef); var matchQ = !q || chef.toLowerCase().includes(q) || dish.toLowerCase().includes(q) || card.innerText.toLowerCase().includes(q); if (matchChef && matchQ) { card.classList.remove('hidden'); total++; counts[chef] = (counts[chef] || 0) + 1; } else { card.classList.add('hidden'); } }); document.getElementById('pyStatN').textContent = total; var empty = document.getElementById('pyEmpty'); empty.style.display = (total === 0) ? 'block' : 'none'; // Update section counts ['류수영','이영자','이경규'].forEach(function(chef) { var el = document.getElementById('cnt-' + chef); if (el) el.textContent = (counts[chef] || 0) + '개'; }); } // Init total count (function(){ document.getElementById('pyStatN').textContent = document.querySelectorAll('.py-card').length; })(); </script> </body> </html> 레시피모음 레시피 요리 편스토랑 최매슨생 https://0-1.kr/104 https://0-1.kr/104#entry104comment Sat, 21 Feb 2026 11:06:47 +0900 https://0-1.kr/100 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>모두의 사진첩 책자 만들기</title> <link href="https://fonts.googleapis.com/css2?family=Gmarket+Sans:wght@500;700&family=Noto+Sans+KR:wght@300;400;500;700&family=Noto+Serif+KR:wght@400;700&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <style> /* ===================================================== 모두의 사진첩 책자 만들기 v3 window.PB 전역 / no all:initial / no 100vh / no sticky 모든 클래스 pb_ 접두사 격리 ===================================================== */ #pb-app { --w: #ffffff; --g0: #f7f9ff; --g1: #f0f3fb; --g2: #e4eaf6; --g3: #d5ddef; --bd: #c4ceea; --bd2: #adbad8; --ac: #3b6ef0; --acl: #eaefff; --acm: #b0c4ff; --ac2: #d96b0a; --ac2l: #fff2e6; --ac3: #0b8f5a; --ac3l: #e4f8f0; --ac3m: #65cda0; --pur: #6530d0; --purl: #f0eaff; --red: #d42e2e; --tx: #16203c; --tx2: #424f70; --tx3: #8494b8; --sh: 0 2px 14px rgba(25,45,110,.09); --sh2: 0 6px 36px rgba(25,45,110,.14); --r: 14px; display: block; box-sizing: border-box; background: var(--g0); color: var(--tx); font-family: 'Noto Sans KR', sans-serif; font-size: 14px; border-radius: var(--r); overflow: hidden; width: 100%; border: 1.5px solid var(--bd); box-shadow: var(--sh2); } #pb-app *, #pb-app *::before, #pb-app *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Noto Sans KR', sans-serif; } #pb-app button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; line-height: 1.4; } #pb-app input, #pb-app select, #pb-app textarea { font-family: inherit; } /* ════════════════════════ 헤더 ════════════════════════ */ .pb_hdr { background: linear-gradient(135deg, #0f2258 0%, #1b3c8a 55%, #111e5a 100%); padding: 28px 30px 24px; position: relative; overflow: hidden; } .pb_hdr::before { content: ''; position: absolute; top: -60px; right: -60px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 65%); pointer-events: none; } .pb_hdr_row { display: flex; align-items: center; gap: 18px; position: relative; flex-wrap: wrap; } .pb_hdr_icon { font-size: 46px; flex-shrink: 0; filter: drop-shadow(0 3px 10px rgba(0,0,0,.35)); } .pb_hdr_info { flex: 1; min-width: 0; } .pb_hdr_ttl { font-family: 'Gmarket Sans', sans-serif; font-size: 22px; font-weight: 700; color: #fff; display: block; margin-bottom: 5px; text-shadow: 0 2px 8px rgba(0,0,0,.3); } .pb_hdr_sub { font-size: 12px; color: rgba(255,255,255,.72); line-height: 1.7; } .pb_hdr_badge { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); border-radius: 20px; padding: 6px 16px; font-size: 11px; color: rgba(255,255,255,.92); font-weight: 600; white-space: nowrap; flex-shrink: 0; } /* ════════════════════════ 사용 설명서 배너 (접기/펼치기) ════════════════════════ */ .pb_guide { background: linear-gradient(135deg, #edf1ff 0%, #f5f7ff 100%); border-bottom: 1.5px solid var(--acm); } .pb_guide_hdr { display: flex; align-items: center; gap: 16px; padding: 20px 26px; cursor: pointer; user-select: none; transition: background .15s; } .pb_guide_hdr:hover { background: rgba(59,110,240,.05); } .pb_guide_hdr_icon { font-size: 26px; flex-shrink: 0; } .pb_guide_hdr_text { flex: 1; min-width: 0; } .pb_guide_hdr_ttl { font-family: 'Gmarket Sans', sans-serif; font-size: 14px; font-weight: 700; color: var(--ac); display: block; margin-bottom: 3px; } .pb_guide_hdr_sub { font-size: 12px; color: var(--tx2); } .pb_guide_arr { width: 32px; height: 32px; border-radius: 8px; background: var(--w); border: 1.5px solid var(--bd); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--tx3); flex-shrink: 0; transition: transform .22s; } .pb_guide_arr.open { transform: rotate(180deg); } .pb_guide_body { display: none; padding: 0 26px 26px; } .pb_guide_body.open { display: block; } .pb_guide_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 14px; margin-top: 20px; } .pb_gcard { background: var(--w); border: 1.5px solid var(--bd); border-radius: 11px; padding: 18px 20px; box-shadow: var(--sh); } .pb_gcard_ttl { font-size: 13px; font-weight: 700; color: var(--ac); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1.5px solid var(--g2); display: flex; align-items: center; gap: 7px; } .pb_gcard ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .pb_gcard li { font-size: 12px; color: var(--tx2); line-height: 1.7; padding-left: 16px; position: relative; } .pb_gcard li::before { content: '›'; position: absolute; left: 3px; color: var(--ac2); font-weight: 700; font-size: 15px; top: -2px; } .pb_gcard li b { color: var(--tx); font-weight: 700; } .pb_guide_tip { margin-top: 18px; padding: 16px 20px; background: var(--ac3l); border: 1.5px solid var(--ac3m); border-radius: 11px; font-size: 12px; color: var(--tx2); line-height: 2.1; } .pb_guide_tip b { color: var(--ac3); font-weight: 700; } .pb_guide_tip code { background: rgba(0,0,0,.07); padding: 2px 7px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 11px; color: var(--tx); } /* ════════════════════════ 4단계 스텝 바 ════════════════════════ */ .pb_steps { background: var(--w); border-bottom: 2px solid var(--bd); display: flex; overflow-x: auto; scrollbar-width: none; } .pb_steps::-webkit-scrollbar { display: none; } .pb_step { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 22px 18px; border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--tx3); cursor: pointer; transition: all .15s; position: relative; border-right: 1px solid var(--g2); } .pb_step:last-child { border-right: none; } .pb_step:hover { background: var(--g0); } .pb_step.on { border-bottom-color: var(--ac); color: var(--tx); background: var(--acl); } .pb_step.done { color: var(--ac3); background: var(--ac3l); } .pb_step.done:hover { background: #d0f5e8; } .pb_snum { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--g2); color: var(--tx3); font-family: 'Gmarket Sans', sans-serif; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all .15s; border: 2px solid transparent; } .pb_step.on .pb_snum { background: var(--ac); color: #fff; border-color: var(--acm); box-shadow: 0 3px 12px rgba(59,110,240,.35); } .pb_step.done .pb_snum { background: var(--ac3); color: #fff; border-color: var(--ac3m); } .pb_step_info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pb_step_title { font-size: 13px; font-weight: 700; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb_step_hint { font-size: 10px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb_step.on .pb_step_title { color: var(--ac); } .pb_step.on .pb_step_hint { color: var(--acm); } .pb_step.done .pb_step_title { color: var(--ac3); } .pb_step.done .pb_step_hint { color: var(--ac3m); } /* ════════════════════════ 콘텐츠 영역 ════════════════════════ */ .pb_body { padding: 36px 32px 50px; } .pb_sec { display: none; } .pb_sec.on { display: block; } .pb_stitle { font-family: 'Gmarket Sans', sans-serif; font-size: 21px; font-weight: 700; color: var(--tx); margin-bottom: 12px; display: flex; align-items: center; gap: 11px; } .pb_ssub { font-size: 13px; color: var(--tx2); line-height: 2.1; margin-bottom: 32px; padding: 16px 20px; background: var(--g1); border-radius: 11px; border-left: 4px solid var(--acm); } .pb_ssub strong { color: var(--tx); font-weight: 700; } /* ════════════════════════ 업로드 영역 ════════════════════════ */ .pb_drop { border: 2.5px dashed var(--bd2); border-radius: var(--r); padding: 64px 24px; text-align: center; cursor: pointer; background: var(--g1); transition: all .15s; position: relative; } .pb_drop:hover, .pb_drop.over { border-color: var(--ac); background: var(--acl); } .pb_drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .pb_drop_icon { font-size: 60px; display: block; margin-bottom: 16px; } .pb_drop_ttl { font-family: 'Gmarket Sans', sans-serif; font-size: 18px; font-weight: 700; color: var(--tx2); margin-bottom: 8px; } .pb_drop_sub { font-size: 12px; color: var(--tx3); margin-bottom: 22px; line-height: 1.8; } .pb_sel_btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 32px; border-radius: 11px; background: var(--ac); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 4px 16px rgba(59,110,240,.32); transition: all .15s; position: relative; z-index: 1; } .pb_sel_btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(59,110,240,.42); } .pb_photo_hdr { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; } .pb_pcnt { font-size: 14px; color: var(--tx2); font-weight: 700; } .pb_pacts { display: flex; gap: 8px; flex-wrap: wrap; } .pb_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 12px; } .pb_pcard { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--bd); background: var(--g2); cursor: grab; transition: all .14s; box-shadow: var(--sh); } .pb_pcard:hover { transform: translateY(-3px); box-shadow: var(--sh2); border-color: var(--acm); } .pb_pcard img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .pb_pcard .pb_xbtn { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.68); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .13s; } .pb_pcard:hover .pb_xbtn { opacity: 1; } .pb_pcard .pb_pnum { position: absolute; bottom: 6px; left: 7px; background: rgba(0,0,0,.62); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 8px; } .pb_pcard .pb_pdate { position: absolute; bottom: 6px; right: 7px; background: rgba(0,0,0,.52); color: #fff; font-size: 8px; padding: 2px 6px; border-radius: 6px; } .pb_pcard.dragging { opacity: .35; border: 2px dashed var(--ac); } .pb_pcard.dragover { outline: 2px solid var(--ac3); transform: scale(1.05); } /* ════════════════════════ 설정 카드 ════════════════════════ */ .pb_cfg_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 26px; } @media(max-width:580px){ .pb_cfg_grid { grid-template-columns: 1fr; } } .pb_card { background: var(--w); border: 1.5px solid var(--bd); border-radius: var(--r); padding: 24px 26px; box-shadow: var(--sh); } .pb_ctitle { font-size: 14px; font-weight: 700; color: var(--tx); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1.5px solid var(--g2); display: flex; align-items: center; gap: 8px; } .pb_lbl { font-size: 12px; color: var(--tx2); font-weight: 700; margin-bottom: 9px; display: block; letter-spacing: .3px; } /* 판형 버튼 */ .pb_fmt_row { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; } .pb_fmtbtn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 10px; border: 1.5px solid var(--bd); background: var(--g0); cursor: pointer; transition: all .13s; } .pb_fmtbtn:hover { border-color: var(--ac); background: var(--acl); } .pb_fmtbtn.on { border-color: var(--ac); background: var(--acl); } .pb_fmtico { font-size: 30px; } .pb_fmtnm { font-size: 11px; font-weight: 700; color: var(--tx2); } .pb_fmtsz { font-size: 9px; color: var(--tx3); } .pb_fmtbtn.on .pb_fmtnm { color: var(--ac); } /* 슬라이더 */ .pb_sl_wrap { margin-bottom: 20px; } .pb_sl_row { display: flex; align-items: center; gap: 12px; } .pb_sl { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: var(--g3); outline: none; cursor: pointer; } .pb_sl::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ac); border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(59,110,240,.35); cursor: pointer; } .pb_sl::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ac); border: 2.5px solid #fff; cursor: pointer; } .pb_slv { min-width: 48px; text-align: right; font-size: 13px; font-weight: 700; color: var(--ac); font-family: 'Courier New', monospace; } .pb_slhint { font-size: 11px; color: var(--tx3); margin-top: 7px; } /* 토글 */ .pb_tog_row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .pb_tog { position: relative; width: 46px; height: 26px; background: var(--g3); border-radius: 13px; cursor: pointer; transition: background .15s; flex-shrink: 0; } .pb_tog.on { background: var(--ac3); } .pb_tog::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 5px rgba(0,0,0,.22); } .pb_tog.on::after { transform: translateX(20px); } .pb_toglbl { font-size: 13px; color: var(--tx2); font-weight: 500; } /* 레이아웃 선택 */ .pb_lay_row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .pb_laybtn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 10px; border: 1.5px solid var(--bd); background: var(--g0); cursor: pointer; transition: all .13s; font-size: 11px; color: var(--tx2); font-weight: 600; } .pb_laybtn:hover { border-color: var(--ac); background: var(--acl); } .pb_laybtn.on { border-color: var(--ac); background: var(--acl); color: var(--ac); } .pb_layico { font-size: 24px; } /* 텍스트 입력 */ .pb_inp { width: 100%; padding: 11px 14px; border-radius: 8px; border: 1.5px solid var(--bd); background: var(--g0); color: var(--tx); font-size: 13px; outline: none; caret-color: var(--ac); transition: all .13s; margin-bottom: 10px; } .pb_inp:focus { border-color: var(--ac); background: var(--w); box-shadow: 0 0 0 3px rgba(59,110,240,.10); } .pb_inp::placeholder { color: var(--tx3); } .pb_inp:last-child { margin-bottom: 0; } /* 캡션 그리드 */ .pb_cap_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 14px; } .pb_cap_item { display: flex; flex-direction: column; gap: 7px; } .pb_cap_thumb { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--bd); display: block; } /* ════════════════════════ 미리보기 (책 넘기기) ════════════════════════ */ .pb_viewer_bg { background: linear-gradient(160deg, #0c1730 0%, #122040 40%, #0b1d38 100%); border-radius: var(--r); padding: 44px 20px 32px; position: relative; overflow: hidden; } .pb_viewer_bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 20% 60%, rgba(59,110,240,.12) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 80% 30%, rgba(255,180,80,.07) 0%, transparent 60%); } .pb_viewer_bg::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 44px; background: linear-gradient(to top, rgba(0,0,0,.3), transparent); pointer-events: none; } .pb_book_wrap { display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; } .pb_book { display: flex; align-items: stretch; position: relative; perspective: 2000px; transform-style: preserve-3d; } .pb_book_shadow { position: absolute; bottom: -20px; left: 8%; right: 8%; height: 32px; background: rgba(0,0,0,.42); filter: blur(16px); border-radius: 50%; z-index: 0; } .pb_spine { width: 14px; background: linear-gradient(to right, #8a92a8, #c0c8d8 40%, #d8dde8 60%, #9aa2b8); flex-shrink: 0; position: relative; z-index: 3; box-shadow: 2px 0 8px rgba(0,0,0,.15), -2px 0 8px rgba(0,0,0,.10); } .pb_pg { background: var(--w); overflow: hidden; position: relative; transition: box-shadow .3s; } .pb_pg_left { border-radius: 6px 0 0 6px; box-shadow: -4px 0 18px rgba(0,0,0,.28), inset -8px 0 18px rgba(0,0,0,.06); } .pb_pg_right { border-radius: 0 6px 6px 0; box-shadow: 4px 0 18px rgba(0,0,0,.22), inset 8px 0 18px rgba(0,0,0,.04); } @keyframes pb_ff { from{transform:rotateY(0);transform-origin:left center;} to{transform:rotateY(-180deg);transform-origin:left center;} } @keyframes pb_fb { from{transform:rotateY(-180deg);transform-origin:left center;} to{transform:rotateY(0);transform-origin:left center;} } .pb_pg.aff { animation:pb_ff .48s cubic-bezier(.4,0,.2,1) forwards; transform-style:preserve-3d; } .pb_pg.afb { animation:pb_fb .48s cubic-bezier(.4,0,.2,1) forwards; transform-style:preserve-3d; } .pb_pg_inner { width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden; } .pb_pg_imgs_1 { flex:1; } .pb_pg_imgs_1 img { width:100%;height:100%;object-fit:cover;display:block; } .pb_pg_imgs_2 { flex:1;display:grid;grid-template-rows:1fr 1fr;gap:2px; } .pb_pg_imgs_2 img { width:100%;height:100%;object-fit:cover;display:block; } .pb_pg_imgs_4 { flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px; } .pb_pg_imgs_4 img { width:100%;height:100%;object-fit:cover;display:block; } .pb_pg_caption { padding:9px 13px; font-family:'Noto Serif KR',serif; font-size:10px; color:var(--tx2); line-height:1.7; text-align:center; background:var(--g0); border-top:1px solid var(--g2); flex-shrink:0; } .pb_pg_num { position:absolute;bottom:8px;font-size:9px;color:var(--tx3);font-style:italic; } .pb_pg_num.l { left:13px; } .pb_pg_num.r { right:13px; } .pb_cover_inner { width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;text-align:center;gap:12px; } .pb_cover_inner.front { background:linear-gradient(160deg,#0c2868,#1a469e,#0c2868); } .pb_cover_inner.back { background:linear-gradient(160deg,#1a469e,#0c2868); } .pb_cov_ico { font-size:38px; } .pb_cov_ttl { font-family:'Noto Serif KR',serif; color:#fff; font-weight:700; line-height:1.35; } .pb_cov_sub { font-size:11px; color:rgba(255,255,255,.72); } .pb_cov_auth { font-size:10px; color:rgba(255,255,255,.52); } .pb_cov_line { width:44px;height:2px;background:rgba(255,255,255,.3);border-radius:2px; } .pb_blank_pg { background:var(--g0);display:flex;align-items:center;justify-content:center; } .pb_ctrl { display:flex;align-items:center;justify-content:space-between; margin-top:22px;position:relative;z-index:2;flex-wrap:wrap;gap:12px; } .pb_navbtn { display:flex;align-items:center;gap:9px;padding:13px 24px; border-radius:11px;border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1);color:rgba(255,255,255,.88); font-size:14px;font-weight:600;transition:all .15s;backdrop-filter:blur(8px); } .pb_navbtn:hover:not(:disabled) { background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.38);transform:translateY(-1px); } .pb_navbtn:disabled { opacity:.3;cursor:not-allowed; } .pb_pginfo { font-family:'Gmarket Sans',sans-serif;font-size:14px;color:rgba(255,255,255,.72);font-weight:500; } .pb_dots { display:flex;gap:7px;justify-content:center;margin-top:16px;position:relative;z-index:2;flex-wrap:wrap; } .pb_dot { width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;transition:all .15s; } .pb_dot.on { background:rgba(255,255,255,.88);transform:scale(1.3); } /* ════════════════════════ PDF 내보내기 ════════════════════════ */ .pb_exp_wrap { display:flex;justify-content:center; } .pb_exp_card { max-width:480px;width:100%;background:var(--w); border:1.5px solid var(--bd);border-radius:var(--r); padding:36px 30px;box-shadow:var(--sh);text-align:center; } .pb_exp_ico { font-size:58px;display:block;margin-bottom:16px; } .pb_exp_ttl { font-family:'Gmarket Sans',sans-serif;font-size:20px;font-weight:700;color:var(--tx);margin-bottom:9px; } .pb_exp_desc { font-size:13px;color:var(--tx2);line-height:1.9;margin-bottom:26px; } .pb_info_grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px;text-align:left; } .pb_info_item { background:var(--g1);border:1px solid var(--bd);border-radius:10px;padding:13px 15px; } .pb_info_lbl { font-size:9px;color:var(--tx3);font-weight:700;letter-spacing:.7px;display:block;margin-bottom:4px;text-transform:uppercase; } .pb_info_val { font-size:15px;font-weight:700;color:var(--tx); } .pb_pdf_btn { width:100%;padding:18px;border-radius:12px; background:linear-gradient(135deg,#0d8644,#096632); border:2px solid #18b55a;color:#fff; font-size:16px;font-weight:700; display:flex;align-items:center;justify-content:center;gap:11px; box-shadow:0 4px 20px rgba(13,134,68,.3);transition:all .15s;margin-bottom:14px; } .pb_pdf_btn:hover:not(:disabled) { transform:translateY(-2px);box-shadow:0 8px 28px rgba(13,134,68,.42); } .pb_pdf_btn:disabled { opacity:.45;cursor:not-allowed;transform:none;box-shadow:none; } .pb_prog_wrap { width:100%;margin-top:18px;display:none; } .pb_prog_wrap.on { display:block; } .pb_prog_bar { width:100%;height:8px;background:var(--g2);border-radius:4px;overflow:hidden;margin-bottom:8px; } .pb_prog_fill { height:100%;background:linear-gradient(90deg,var(--ac3),var(--ac));border-radius:4px;transition:width .3s;width:0; } .pb_prog_txt { font-size:12px;color:var(--tx2);text-align:center;font-weight:600; } .pb_pdf_note { font-size:11px;color:var(--tx3);line-height:2.1;margin-top:16px;text-align:left; } /* ════════════════════════ 하단 네비게이션 버튼 (크게, 눈에 띄게) ════════════════════════ */ .pb_nav_row { display: flex; align-items: stretch; gap: 12px; margin-top: 40px; padding-top: 28px; border-top: 2px solid var(--g2); } .pb_nav_prev { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-radius: 12px; border: 2px solid var(--bd2); background: var(--w); color: var(--tx2); font-size: 14px; font-weight: 600; transition: all .15s; white-space: nowrap; } .pb_nav_prev:hover { border-color: var(--tx2); color: var(--tx); background: var(--g1); } .pb_nav_next { flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 28px; border-radius: 12px; background: linear-gradient(135deg, var(--ac), #2856d4); border: 2px solid var(--acm); color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 4px 18px rgba(59,110,240,.32); transition: all .15s; white-space: nowrap; } .pb_nav_next:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(59,110,240,.42); } .pb_nav_next:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; } .pb_nav_next_icon { font-size: 22px; } .pb_nav_next_text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .pb_nav_next_label { font-size: 16px; font-weight: 700; line-height: 1; } .pb_nav_next_sub { font-size: 11px; font-weight: 400; opacity: .82; } /* 공통 소형 버튼 */ .pb_btn { padding: 10px 18px; border-radius: 9px; border: 1.5px solid var(--bd); background: var(--w); color: var(--tx2); font-size: 12px; font-weight: 500; transition: all .13s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .pb_btn:hover { background: var(--g1); border-color: var(--bd2); color: var(--tx); } .pb_btn.sm { padding: 7px 14px; font-size: 11px; } /* ════════════════════════ 토스트 ════════════════════════ */ .pb_toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(16px); background: var(--tx); color: #fff; padding: 12px 26px; border-radius: 11px; font-size: 13px; font-weight: 500; z-index: 9999; opacity: 0; transition: all .22s; pointer-events: none; white-space: nowrap; box-shadow: 0 8px 28px rgba(0,0,0,.24); } .pb_toast.on { opacity: 1; transform: translateX(-50%) translateY(0); } @media(max-width:500px){ .pb_hdr { padding: 20px 18px; } .pb_hdr_ttl { font-size: 17px; } .pb_body { padding: 24px 18px 36px; } .pb_grid { grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); gap: 9px; } .pb_step { padding: 18px 10px; gap: 8px; } .pb_nav_next_sub { display: none; } } </style> </head> <body> <div id="pb-app"> <!-- ════ 헤더 ════ --> <div class="pb_hdr"> <div class="pb_hdr_row"> <span class="pb_hdr_icon"> </span> <div class="pb_hdr_info"> <span class="pb_hdr_ttl">모두의 사진첩 책자 만들기</span> <span class="pb_hdr_sub">사진을 업로드 → PDF 책자로 저장 · 서버 전송 없음 · 완전 무료</span> </div> <span class="pb_hdr_badge"> 내 기기에서만 처리</span> </div> </div> <!-- ════ 사용 설명서 (접기/펼치기) ════ --> <div class="pb_guide"> <div class="pb_guide_hdr" onclick="PB.togGuide()"> <span class="pb_guide_hdr_icon"> </span> <div class="pb_guide_hdr_text"> <span class="pb_guide_hdr_ttl">사용 설명서 — 처음이라면 먼저 읽어보세요!</span> <span class="pb_guide_hdr_sub">클릭하면 기능 설명과 사용 팁을 볼 수 있어요 ▾</span> </div> <span class="pb_guide_arr" id="pb_garr">▾</span> </div> <div class="pb_guide_body" id="pb_gbody"> <div class="pb_guide_grid"> <div class="pb_gcard"> <div class="pb_gcard_ttl"> 1단계 · 사진 업로드</div> <ul> <li>사진을 <b>끌어다 놓거나</b> 파일 선택 버튼으로 업로드</li> <li>JPG, PNG, HEIC, WebP 형식 지원</li> <li><b>여러 장 동시</b> 선택 가능 (폰 갤러리에서도 OK)</li> <li>썸네일을 <b>드래그</b>해서 순서 변경</li> <li><b> 날짜순 정렬</b> 버튼으로 자동 정렬</li> </ul> </div> <div class="pb_gcard"> <div class="pb_gcard_ttl">⚙ 2단계 · 설정</div> <ul> <li><b>판형</b>: 정사각형(SNS), A5 가로(앨범), A4 세로 선택</li> <li><b>해상도 슬라이더</b>: 낮추면 파일 작아짐, 높이면 선명</li> <li><b>JPEG 품질</b>: 80% 권장 · 모바일은 60~70%도 OK</li> <li><b>표지 페이지</b>: 토글로 켜면 제목·부제목·이름 입력</li> <li><b>레이아웃</b>: 1장·2장·4장·캡션형 중 선택</li> </ul> </div> <div class="pb_gcard"> <div class="pb_gcard_ttl"> 3단계 · 미리보기</div> <ul> <li>책을 <b>펼친 형태</b>로 미리 확인</li> <li><b>◀ ▶ 버튼</b> 또는 아래 점으로 페이지 이동</li> <li>페이지 넘길 때 <b>3D 플립 애니메이션</b> 효과</li> <li>마음에 안 들면 <b>← 설정으로</b> 돌아가서 수정</li> </ul> </div> <div class="pb_gcard"> <div class="pb_gcard_ttl"> 4단계 · PDF 저장</div> <ul> <li><b>PDF 다운로드</b> 버튼 한 번으로 저장</li> <li>사진 수에 따라 <b>몇 초~1분</b> 소요</li> <li>저장된 PDF는 <b>카카오톡 전송, 프린트</b> 가능</li> <li>모든 처리는 <b>내 기기에서만</b> — 서버 전송 없음</li> </ul> </div> </div> <div class="pb_guide_tip"> <b> 모바일 팁</b> — 폰 갤러리 앱에서 사진을 선택해서 공유 → "파일로 저장" 후 업로드하거나, 브라우저에서 직접 파일 선택 시 <code>갤러리</code>를 선택하세요<br> <b> 파일 크기 줄이기</b> — 해상도를 <code>800px</code>, 품질을 <code>65%</code>로 낮추면 고품질 대비 파일이 약 4배 작아져요 </div> </div> </div> <!-- ════ 4단계 스텝 바 ════ --> <div class="pb_steps"> <div class="pb_step on" id="pbs1" onclick="PB.go(1)"> <span class="pb_snum" id="pbn1">1</span> <div class="pb_step_info"> <span class="pb_step_title"> 사진 업로드</span> <span class="pb_step_hint">사진 선택 · 순서 정렬</span> </div> </div> <div class="pb_step" id="pbs2" onclick="PB.go(2)"> <span class="pb_snum" id="pbn2">2</span> <div class="pb_step_info"> <span class="pb_step_title">⚙ 설정</span> <span class="pb_step_hint">판형 · 품질 · 표지</span> </div> </div> <div class="pb_step" id="pbs3" onclick="PB.go(3)"> <span class="pb_snum" id="pbn3">3</span> <div class="pb_step_info"> <span class="pb_step_title"> 미리보기</span> <span class="pb_step_hint">책 넘기기 확인</span> </div> </div> <div class="pb_step" id="pbs4" onclick="PB.go(4)"> <span class="pb_snum" id="pbn4">4</span> <div class="pb_step_info"> <span class="pb_step_title"> PDF 저장</span> <span class="pb_step_hint">다운로드 · 완성</span> </div> </div> </div> <!-- ════ 본문 ════ --> <div class="pb_body"> <!-- ▶ Step 1: 사진 업로드 --> <div class="pb_sec on" id="sec1"> <div class="pb_stitle"> 사진 업로드</div> <p class="pb_ssub"> 폰이나 PC에서 사진을 선택하거나 끌어다 놓으세요. 여러 장을 한꺼번에 선택할 수 있어요.<br> <strong>모든 처리는 이 기기에서만 이뤄져요 — 서버로 전송되지 않아요.</strong> </p> <div class="pb_drop" id="pb_drop" ondragover="PB.onDragOver(event)" ondragleave="PB.onDragLeave(event)" ondrop="PB.onDrop(event)"> <input type="file" id="pb_finp" accept="image/*" multiple onchange="PB.onFiles(event)"> <span class="pb_drop_icon"> </span> <div class="pb_drop_ttl">사진을 끌어다 놓거나 클릭해서 선택하세요</div> <div class="pb_drop_sub">JPG · PNG · HEIC · WebP<br>한 번에 여러 장 선택 가능</div> <button class="pb_sel_btn" onclick="document.getElementById('pb_finp').click();event.stopPropagation();"> 사진 선택하기 </button> </div> <div id="pb_grid_sec" style="display:none;"> <div class="pb_photo_hdr"> <span class="pb_pcnt" id="pb_pcnt">0장</span> <div class="pb_pacts"> <button class="pb_btn sm" onclick="PB.sortDate()"> 날짜순 정렬</button> <button class="pb_btn sm" onclick="document.getElementById('pb_finp').click()"> 더 추가</button> <button class="pb_btn sm" onclick="PB.clearAll()"> 전체 삭제</button> </div> </div> <div class="pb_grid" id="pb_grid"></div> </div> <div class="pb_nav_row"> <div style="flex:1;display:flex;align-items:center;font-size:12px;color:var(--tx3);"> 사진을 추가하면 다음 단계로 이동할 수 있어요 </div> <button class="pb_nav_next" id="pb_n1" onclick="PB.go(2)" disabled> <span class="pb_nav_next_icon">⚙</span> <span class="pb_nav_next_text"> <span class="pb_nav_next_label">다음 단계 — 설정</span> <span class="pb_nav_next_sub">판형 · 압축 · 표지 설정하기</span> </span> <span style="font-size:20px;margin-left:4px;">→</span> </button> </div> </div> <!-- ▶ Step 2: 설정 --> <div class="pb_sec" id="sec2"> <div class="pb_stitle">⚙ 책자 설정</div> <p class="pb_ssub"> 판형·품질·레이아웃·표지를 설정해요. 설정 후 미리보기에서 결과를 바로 확인할 수 있어요. </p> <div class="pb_cfg_grid"> <!-- 판형 --> <div class="pb_card"> <div class="pb_ctitle"> 판형 선택</div> <div class="pb_fmt_row"> <button class="pb_fmtbtn" id="pfmt_sq" onclick="PB.setFmt('sq')"> <span class="pb_fmtico">⬜</span> <span class="pb_fmtnm">정사각형</span> <span class="pb_fmtsz">200×200mm</span> </button> <button class="pb_fmtbtn on" id="pfmt_a5" onclick="PB.setFmt('a5')"> <span class="pb_fmtico"> </span> <span class="pb_fmtnm">A5 가로</span> <span class="pb_fmtsz">앨범형 추천</span> </button> <button class="pb_fmtbtn" id="pfmt_a4" onclick="PB.setFmt('a4')"> <span class="pb_fmtico"> </span> <span class="pb_fmtnm">A4 세로</span> <span class="pb_fmtsz">210×297mm</span> </button> </div> </div> <!-- 압축 --> <div class="pb_card"> <div class="pb_ctitle"> 사진 압축 & 품질</div> <div class="pb_sl_wrap"> <span class="pb_lbl">해상도 (긴 변 최대 크기)</span> <div class="pb_sl_row"> <input type="range" class="pb_sl" id="pb_res" min="600" max="2400" step="200" value="1200" oninput="PB.updSlider()"> <span class="pb_slv" id="pb_resv">1200px</span> </div> <div class="pb_slhint">낮을수록 파일 작음 · 높을수록 선명 · 800px 권장</div> </div> <div class="pb_sl_wrap"> <span class="pb_lbl">JPEG 압축 품질</span> <div class="pb_sl_row"> <input type="range" class="pb_sl" id="pb_qual" min="40" max="95" step="5" value="80" oninput="PB.updSlider()"> <span class="pb_slv" id="pb_qualv">80%</span> </div> <div class="pb_slhint" id="pb_sizeest">예상 크기: 사진 추가 후 표시</div> </div> </div> <!-- 표지 --> <div class="pb_card"> <div class="pb_ctitle"> 표지 & 제목 페이지</div> <div class="pb_tog_row"> <div class="pb_tog on" id="pb_covtog" onclick="PB.togCover()"></div> <span class="pb_toglbl">표지 페이지 추가</span> </div> <div id="pb_covfields"> <input class="pb_inp" id="pb_ttl" placeholder="책자 제목 (예: 2024 가족 여행)" value="나의 사진첩"> <input class="pb_inp" id="pb_sub" placeholder="부제목 (예: 제주도 여름 여행)"> <input class="pb_inp" id="pb_auth" placeholder="만든 이 (예: 홍길동)"> </div> </div> <!-- 레이아웃 --> <div class="pb_card"> <div class="pb_ctitle"> 사진 레이아웃</div> <div class="pb_lay_row"> <button class="pb_laybtn on" id="play_1" onclick="PB.setLay('1')"><span class="pb_layico"> </span>1장/페이지</button> <button class="pb_laybtn" id="play_2" onclick="PB.setLay('2')"><span class="pb_layico">⊞</span>2장/페이지</button> <button class="pb_laybtn" id="play_4" onclick="PB.setLay('4')"><span class="pb_layico">⊟</span>4장/페이지</button> <button class="pb_laybtn" id="play_c" onclick="PB.setLay('c')"><span class="pb_layico"> </span>사진+캡션</button> </div> <div class="pb_tog_row" style="margin-top:18px;"> <div class="pb_tog" id="pb_captog" onclick="PB.togCaption()"></div> <span class="pb_toglbl">사진마다 캡션 입력</span> </div> </div> </div> <!-- 캡션 입력 --> <div id="pb_cap_sec" style="display:none;margin-bottom:26px;"> <div class="pb_card"> <div class="pb_ctitle"> 캡션 입력</div> <div class="pb_cap_grid" id="pb_capgrid"></div> </div> </div> <div class="pb_nav_row"> <button class="pb_nav_prev" onclick="PB.go(1)"> ← 이전 </button> <button class="pb_nav_next" onclick="PB.go(3)"> <span class="pb_nav_next_icon"> </span> <span class="pb_nav_next_text"> <span class="pb_nav_next_label">다음 단계 — 미리보기</span> <span class="pb_nav_next_sub">책 펼침 형태로 확인하기</span> </span> <span style="font-size:20px;margin-left:4px;">→</span> </button> </div> </div> <!-- ▶ Step 3: 미리보기 --> <div class="pb_sec" id="sec3"> <div class="pb_stitle"> 미리보기</div> <p class="pb_ssub"> 책을 펼쳤을 때의 모습이에요. ◀ ▶ 버튼이나 아래 점을 클릭해 페이지를 넘겨보세요. </p> <div class="pb_viewer_bg"> <div class="pb_book_wrap"> <div class="pb_book_shadow"></div> <div class="pb_book" id="pb_book"></div> </div> <div class="pb_ctrl"> <button class="pb_navbtn" id="pb_prevbtn" onclick="PB.prevPg()" disabled>◀ 이전</button> <span class="pb_pginfo" id="pb_pginfo">- / -</span> <button class="pb_navbtn" id="pb_nextbtn" onclick="PB.nextPg()">다음 ▶</button> </div> <div class="pb_dots" id="pb_dots"></div> </div> <div class="pb_nav_row"> <button class="pb_nav_prev" onclick="PB.go(2)"> ← 설정으로 </button> <button class="pb_nav_next" onclick="PB.go(4)"> <span class="pb_nav_next_icon"> </span> <span class="pb_nav_next_text"> <span class="pb_nav_next_label">다음 단계 — PDF 저장</span> <span class="pb_nav_next_sub">PDF 파일로 다운로드하기</span> </span> <span style="font-size:20px;margin-left:4px;">→</span> </button> </div> </div> <!-- ▶ Step 4: PDF 저장 --> <div class="pb_sec" id="sec4"> <div class="pb_stitle"> PDF 책자 저장</div> <p class="pb_ssub"> 모든 사진을 하나의 PDF 파일로 만들어 저장해요. 완성된 파일은 폰·PC 어디서나 열 수 있어요. </p> <div class="pb_exp_wrap"> <div class="pb_exp_card"> <span class="pb_exp_ico"> </span> <div class="pb_exp_ttl">PDF 책자 생성 준비 완료</div> <div class="pb_exp_desc" id="pb_expdesc"> 사진 0장을 PDF 책자로 만들어요.<br> 이 기기에서만 처리되고 어디에도 전송되지 않아요. </div> <div class="pb_info_grid"> <div class="pb_info_item"><span class="pb_info_lbl">사진 수</span><span class="pb_info_val" id="pei_cnt">0장</span></div> <div class="pb_info_item"><span class="pb_info_lbl">판형</span><span class="pb_info_val" id="pei_fmt">A5 가로</span></div> <div class="pb_info_item"><span class="pb_info_lbl">레이아웃</span><span class="pb_info_val" id="pei_lay">1장/페이지</span></div> <div class="pb_info_item"><span class="pb_info_lbl">예상 크기</span><span class="pb_info_val" id="pei_sz">계산 중</span></div> </div> <button class="pb_pdf_btn" id="pb_pdfbtn" onclick="PB.makePDF()"> <span style="font-size:22px;"> </span> PDF 책자 다운로드 </button> <div class="pb_prog_wrap" id="pb_prog"> <div class="pb_prog_bar"><div class="pb_prog_fill" id="pb_pfill"></div></div> <div class="pb_prog_txt" id="pb_ptxt">처리 중...</div> </div> <div class="pb_pdf_note"> 생성된 PDF는 카카오톡 전송, 스마트폰 파일 앱, 프린트 등으로 활용 가능해요<br> 해상도를 높이면 파일이 커지고 시간이 더 걸려요<br> 사진이 많으면 (50장 이상) 1~2분 걸릴 수 있어요 </div> </div> </div> <div class="pb_nav_row"> <button class="pb_nav_prev" onclick="PB.go(3)"> ← 미리보기로 </button> <button class="pb_nav_prev" onclick="PB.restart()" style="border-color:var(--bd2);"> 처음부터 </button> </div> </div> </div><!-- /pb_body --> <div class="pb_toast" id="pb_toast"></div> <script> // ==================================================== // window.PB — 모두의 사진첩 책자 만들기 v3 // 100% 클라이언트 사이드 · 서버 전송 없음 // window.PB 전역 등록 · 티스토리 완전 호환 // no all:initial · no 100vh · no position:sticky // ==================================================== window.PB = (function(){ 'use strict'; var photos = []; var step = 1; var curSpread = 0; var pages = []; var isFlipping = false; var guideOpen = false; var cfg = { fmt: 'a5', res: 1200, qual: 0.80, cover: true, title: '나의 사진첩', subtitle: '', author: '', layout: '1', captionMode: false, }; /* ── 설명서 토글 ── */ function togGuide(){ guideOpen = !guideOpen; var b = el('pb_gbody'), a = el('pb_garr'); if(b){ b.classList.toggle('open', guideOpen); } if(a){ a.classList.toggle('open', guideOpen); a.textContent = guideOpen ? '▴' : '▾'; } } /* ── 스텝 이동 ── */ function go(n){ if(n > 1 && photos.length === 0){ toast('⚠ 먼저 사진을 추가해주세요'); return; } if(n === 3){ buildPages(); renderBook(); } if(n === 4){ buildPages(); updExpInfo(); } step = n; for(var i=1;i<=4;i++){ var s=el('pbs'+i), nm=el('pbn'+i), sc=el('sec'+i); if(!s||!nm||!sc) continue; s.className = 'pb_step' + (i===n?' on': i<n?' done':''); nm.textContent = i < n ? '✓' : i; sc.className = 'pb_sec' + (i===n?' on':''); } // 스크롤 상단 var app = document.getElementById('pb-app'); if(app) app.scrollIntoView({behavior:'smooth', block:'start'}); } /* ── 파일 처리 ── */ function onFiles(e){ loadFiles(Array.from(e.target.files)); } function onDragOver(e){ e.preventDefault(); el('pb_drop').classList.add('over'); } function onDragLeave(){ el('pb_drop').classList.remove('over'); } function onDrop(e){ e.preventDefault(); el('pb_drop').classList.remove('over'); loadFiles(Array.from(e.dataTransfer.files).filter(function(f){ return f.type.startsWith('image/'); })); } function loadFiles(files){ if(!files.length) return; toast(' ' + files.length + '장 불러오는 중...'); var done=0, total=files.length; files.forEach(function(file){ var reader = new FileReader(); reader.onload = function(ev){ photos.push({ dataUrl: ev.target.result, date: new Date(file.lastModified||Date.now()), caption: '', origSize: file.size }); done++; if(done === total){ renderGrid(); updSizeEst(); toast('✅ ' + total + '장 추가 완료!'); } }; reader.readAsDataURL(file); }); } /* ── 그리드 ── */ function renderGrid(){ var grid=el('pb_grid'), sec=el('pb_grid_sec'), cnt=el('pb_pcnt'), nbtn=el('pb_n1'); if(!grid) return; grid.innerHTML = ''; if(!photos.length){ sec.style.display='none'; if(nbtn) nbtn.disabled=true; return; } sec.style.display = 'block'; if(nbtn) nbtn.disabled = false; cnt.textContent = photos.length + '장'; photos.forEach(function(ph, idx){ var card = document.createElement('div'); card.className = 'pb_pcard'; card.dataset.idx = idx; card.draggable = true; var dt = ph.date instanceof Date ? ph.date.toLocaleDateString('ko-KR',{month:'short',day:'numeric'}) : ''; card.innerHTML = '<img src="'+ph.dataUrl+'" loading="lazy"><span class="pb_pnum">'+(idx+1)+'</span>'+(dt?'<span class="pb_pdate">'+dt+'</span>':'')+'<button class="pb_xbtn" onclick="PB.delPhoto('+idx+');event.stopPropagation();">✕</button>'; setupDrag(card, idx); grid.appendChild(card); }); if(cfg.captionMode) renderCapGrid(); } var dragIdx = null; function setupDrag(card, idx){ card.addEventListener('dragstart', function(e){ dragIdx=idx; card.classList.add('dragging'); e.dataTransfer.effectAllowed='move'; }); card.addEventListener('dragend', function(){ card.classList.remove('dragging'); document.querySelectorAll('.pb_pcard').forEach(function(c){c.classList.remove('dragover');}); }); card.addEventListener('dragover', function(e){ e.preventDefault(); card.classList.add('dragover'); }); card.addEventListener('dragleave', function(){ card.classList.remove('dragover'); }); card.addEventListener('drop', function(e){ e.preventDefault(); card.classList.remove('dragover'); if(dragIdx!==null && dragIdx!==idx){ var tmp=photos.splice(dragIdx,1)[0]; photos.splice(idx,0,tmp); renderGrid(); } dragIdx = null; }); } function delPhoto(idx){ photos.splice(idx,1); renderGrid(); toast(' 삭제'); } function clearAll(){ if(!confirm('사진을 전부 삭제할까요?')) return; photos=[]; renderGrid(); toast(' 전체 삭제'); } function sortDate(){ photos.sort(function(a,b){ return a.date-b.date; }); renderGrid(); toast(' 날짜순 정렬 완료!'); } /* ── 설정 ── */ function setFmt(f){ cfg.fmt=f; ['sq','a5','a4'].forEach(function(x){ var b=el('pfmt_'+x); if(b) b.classList.toggle('on',x===f); }); } function setLay(l){ cfg.layout=l; ['1','2','4','c'].forEach(function(x){ var b=el('play_'+x); if(b) b.classList.toggle('on',x===l); }); } function togCover(){ cfg.cover = !cfg.cover; var t=el('pb_covtog'), f=el('pb_covfields'); if(t) t.classList.toggle('on',cfg.cover); if(f) f.style.display = cfg.cover?'block':'none'; } function togCaption(){ cfg.captionMode = !cfg.captionMode; var t=el('pb_captog'), s=el('pb_cap_sec'); if(t) t.classList.toggle('on',cfg.captionMode); if(s){ s.style.display = cfg.captionMode?'block':'none'; if(cfg.captionMode) renderCapGrid(); } } function updSlider(){ var r=el('pb_res'), q=el('pb_qual'); cfg.res=parseInt(r.value); cfg.qual=parseInt(q.value)/100; var rv=el('pb_resv'), qv=el('pb_qualv'); if(rv) rv.textContent=r.value+'px'; if(qv) qv.textContent=q.value+'%'; updSizeEst(); } function updSizeEst(){ if(!photos.length) return; var avg=photos.reduce(function(s,p){return s+p.origSize;},0)/photos.length; var est=(avg*Math.pow(cfg.res/2000,2)*cfg.qual*0.28*photos.length)/1024/1024; var h=el('pb_sizeest'); if(h) h.textContent='예상 PDF 크기: 약 '+est.toFixed(1)+'MB ('+photos.length+'장 기준)'; } function setCaption(idx,val){ if(photos[idx]) photos[idx].caption=val; } function renderCapGrid(){ var cg=el('pb_capgrid'); if(!cg) return; cg.innerHTML=''; photos.forEach(function(ph,idx){ var w=document.createElement('div'); w.className='pb_cap_item'; w.innerHTML='<img class="pb_cap_thumb" src="'+ph.dataUrl+'" loading="lazy"><input class="pb_inp" style="margin-bottom:0" placeholder="캡션 입력 (선택)" value="'+(ph.caption||'')+'" oninput="PB.setCaption('+idx+',this.value)">'; cg.appendChild(w); }); } /* ── 페이지 빌드 ── */ function getFmtPx(){ var base=260; if(cfg.fmt==='sq') return {w:base,h:base}; if(cfg.fmt==='a5') return {w:base,h:Math.round(base*148/210)}; if(cfg.fmt==='a4') return {w:Math.round(base*210/297),h:base}; return {w:base,h:Math.round(base*148/210)}; } function buildPages(){ pages=[]; var t=el('pb_ttl'),s=el('pb_sub'),a=el('pb_auth'); cfg.title=(t&&t.value)||'나의 사진첩'; cfg.subtitle=(s&&s.value)||''; cfg.author=(a&&a.value)||''; if(cfg.cover) pages.push({type:'cover'}); var per=cfg.layout==='1'?1:cfg.layout==='2'?2:cfg.layout==='4'?4:1; for(var i=0;i<photos.length;i+=per){ pages.push({type:'photo',phs:photos.slice(i,i+per),layout:cfg.layout,pnum:pages.length+1}); } if(cfg.cover) pages.push({type:'back'}); if(pages.length%2!==0) pages.push({type:'blank'}); } /* ── 책 렌더 ── */ function renderBook(){ var book=el('pb_book'); if(!book||!pages.length) return; curSpread=0; drawSpread(); } function drawSpread(animate, dir){ var book=el('pb_book'); if(!book) return; var sz=getFmtPx(); book.style.cssText='height:'+sz.h+'px;transform-style:preserve-3d;perspective:2000px;'; var li=curSpread*2, ri=curSpread*2+1; var lEl=mkPgEl(pages[li]||null, sz, true); var rEl=mkPgEl(pages[ri]||null, sz, false); if(animate && dir==='next'){ lEl.classList.add('aff'); } else if(animate && dir==='prev'){ rEl.classList.add('afb'); } book.innerHTML=''; book.appendChild(lEl); book.appendChild(mkSpine()); book.appendChild(rEl); var tot=Math.ceil(pages.length/2); el('pb_pginfo').textContent=(curSpread+1)+' / '+tot; var pb=el('pb_prevbtn'),nb=el('pb_nextbtn'); if(pb) pb.disabled=curSpread===0; if(nb) nb.disabled=curSpread>=tot-1; renderDots(tot); } function mkPgEl(page, sz, isLeft){ var pg=document.createElement('div'); pg.className='pb_pg '+(isLeft?'pb_pg_left':'pb_pg_right'); pg.style.cssText='width:'+sz.w+'px;height:'+sz.h+'px;position:relative;overflow:hidden;flex-shrink:0;'; if(!page){ pg.classList.add('pb_blank_pg'); return pg; } if(page.type==='cover'){ pg.innerHTML='<div class="pb_cover_inner front"><span class="pb_cov_ico"> </span><div class="pb_cov_line"></div><div class="pb_cov_ttl" style="font-size:'+Math.max(12,Math.round(sz.w*.08))+'px">'+esc(cfg.title)+'</div>'+(cfg.subtitle?'<div class="pb_cov_sub">'+esc(cfg.subtitle)+'</div>':'')+(cfg.author?'<div class="pb_cov_auth">— '+esc(cfg.author)+' —</div>':'')+'</div>'; } else if(page.type==='back'){ pg.innerHTML='<div class="pb_cover_inner back"><span style="font-size:26px;"> </span><div style="font-size:10px;color:rgba(255,255,255,.5);margin-top:8px;">모두의 사진첩 책자 만들기</div></div>'; } else if(page.type==='blank'){ pg.classList.add('pb_blank_pg'); } else if(page.type==='photo'){ var inner=document.createElement('div'); inner.className='pb_pg_inner'; var phs=page.phs, lay=page.layout; var iw=document.createElement('div'); iw.style.cssText='flex:1;overflow:hidden;'; if(lay==='1'||lay==='c'){ iw.className='pb_pg_imgs_1'; if(phs[0]){ var im=document.createElement('img');im.src=phs[0].dataUrl;im.style.cssText='width:100%;height:100%;object-fit:cover;display:block;';iw.appendChild(im); } inner.appendChild(iw); if(lay==='c'&&phs[0]&&phs[0].caption){ var cp=document.createElement('div');cp.className='pb_pg_caption';cp.textContent=phs[0].caption;inner.appendChild(cp); } } else if(lay==='2'){ iw.className='pb_pg_imgs_2'; phs.slice(0,2).forEach(function(p){ if(p){var im=document.createElement('img');im.src=p.dataUrl;im.style.cssText='width:100%;height:100%;object-fit:cover;display:block;';iw.appendChild(im);} }); inner.appendChild(iw); } else if(lay==='4'){ iw.className='pb_pg_imgs_4'; phs.slice(0,4).forEach(function(p){ if(p){var im=document.createElement('img');im.src=p.dataUrl;im.style.cssText='width:100%;height:100%;object-fit:cover;display:block;';iw.appendChild(im);} }); inner.appendChild(iw); } pg.appendChild(inner); var pn=document.createElement('span'); pn.className='pb_pg_num '+(isLeft?'l':'r'); pn.textContent=page.pnum; pg.appendChild(pn); } return pg; } function mkSpine(){ var s=document.createElement('div'); s.className='pb_spine'; return s; } function renderDots(total){ var d=el('pb_dots'); if(!d) return; d.innerHTML=''; var show=Math.min(total,12); for(var i=0;i<show;i++){ var dot=document.createElement('span'); dot.className='pb_dot'+(i===curSpread?' on':''); (function(ii){ dot.onclick=function(){ if(!isFlipping){ curSpread=ii; drawSpread(); } }; })(i); d.appendChild(dot); } } function prevPg(){ if(isFlipping||curSpread===0) return; isFlipping=true; curSpread--; drawSpread(true,'prev'); setTimeout(function(){ isFlipping=false; },520); } function nextPg(){ var tot=Math.ceil(pages.length/2); if(isFlipping||curSpread>=tot-1) return; isFlipping=true; curSpread++; drawSpread(true,'next'); setTimeout(function(){ isFlipping=false; },520); } /* ── 내보내기 정보 ── */ function updExpInfo(){ var fmtN={sq:'정사각형',a5:'A5 가로',a4:'A4 세로'}; var layN={'1':'1장/페이지','2':'2장/페이지','4':'4장/페이지','c':'사진+캡션'}; setTxt('pei_cnt', photos.length+'장'); setTxt('pei_fmt', fmtN[cfg.fmt]||''); setTxt('pei_lay', layN[cfg.layout]||''); setTxt('pb_expdesc', '사진 '+photos.length+'장을 PDF 책자로 만들어요.\n이 기기에서만 처리되고 어디에도 전송되지 않아요.'); updSizeEst(); var sh=el('pb_sizeest'); if(sh) setTxt('pei_sz', sh.textContent.replace('예상 PDF 크기: ','')); } /* ── PDF 생성 ── */ async function makePDF(){ if(!photos.length){ toast('⚠ 사진을 먼저 추가해주세요'); return; } var btn=el('pb_pdfbtn'), prog=el('pb_prog'), pfill=el('pb_pfill'), ptxt=el('pb_ptxt'); if(btn) btn.disabled=true; if(prog) prog.classList.add('on'); function setP(pct,txt){ if(pfill) pfill.style.width=pct+'%'; if(ptxt) ptxt.textContent=txt; } try{ var jsPDF=window.jspdf.jsPDF; var fmtCfg={ sq:{w:200,h:200,ori:'portrait'}, a5:{w:210,h:148,ori:'landscape'}, a4:{w:210,h:297,ori:'portrait'} }; var fc=fmtCfg[cfg.fmt]||fmtCfg.a5; var doc=new jsPDF({orientation:fc.ori,unit:'mm',format:[fc.w,fc.h]}); var W=fc.ori==='landscape'?fc.h:fc.w, H=fc.ori==='landscape'?fc.w:fc.h, mg=5; buildPages(); var ttl=(el('pb_ttl')&&el('pb_ttl').value)||'사진첩'; for(var pi=0;pi<pages.length;pi++){ setP(Math.round(pi/pages.length*88),(pi+1)+' / '+pages.length+' 페이지 생성 중...'); if(pi>0) doc.addPage([fc.w,fc.h],fc.ori); var pg=pages[pi]; if(pg.type==='cover'){ doc.setFillColor(12,40,104); doc.rect(0,0,W,H,'F'); doc.setFillColor(26,70,158); doc.circle(W*.85,H*.15,H*.5,'F'); doc.setFillColor(8,28,88); doc.circle(W*.1,H*.85,H*.35,'F'); doc.setTextColor(255,255,255); doc.setFont('helvetica','bold'); var ts=Math.min(20,W/7); doc.setFontSize(ts); var lines=doc.splitTextToSize(cfg.title,W*.78); var ty=H*.38; lines.forEach(function(l){doc.text(l,W/2,ty,{align:'center'});ty+=ts*.55;}); if(cfg.subtitle){doc.setFontSize(11);doc.setTextColor(200,215,255);doc.text(cfg.subtitle,W/2,ty+6,{align:'center'});} if(cfg.author){doc.setFontSize(9);doc.setTextColor(160,185,230);doc.text('— '+cfg.author+' —',W/2,H*.84,{align:'center'});} } else if(pg.type==='back'){ doc.setFillColor(12,40,104); doc.rect(0,0,W,H,'F'); doc.setFontSize(8);doc.setTextColor(120,150,210);doc.text('모두의 사진첩 책자 만들기',W/2,H/2,{align:'center'}); } else if(pg.type==='blank'){ doc.setFillColor(247,249,255); doc.rect(0,0,W,H,'F'); } else if(pg.type==='photo'){ doc.setFillColor(255,255,255); doc.rect(0,0,W,H,'F'); var phs=pg.phs, lay=pg.layout, capH=0; if((lay==='1'||lay==='c')&&phs[0]&&phs[0].caption) capH=12; if(lay==='1'||lay==='c'){ if(phs[0]){ var id=await compress(phs[0].dataUrl,cfg.res,cfg.qual); doc.addImage(id,'JPEG',mg,mg,W-mg*2,H-mg*2-capH,'','FAST'); if(capH){doc.setFontSize(8);doc.setTextColor(80,80,80);doc.text(phs[0].caption,W/2,H-mg-2,{align:'center'});} } } else if(lay==='2'){ var ch2=(H-mg*3)/2; for(var ci=0;ci<Math.min(phs.length,2);ci++){ var id2=await compress(phs[ci].dataUrl,cfg.res,cfg.qual); doc.addImage(id2,'JPEG',mg,mg+ci*(ch2+mg),W-mg*2,ch2,'','FAST'); } } else if(lay==='4'){ var cw=(W-mg*3)/2,ch4=(H-mg*3)/2; for(var ci=0;ci<Math.min(phs.length,4);ci++){ var id4=await compress(phs[ci].dataUrl,cfg.res,cfg.qual); var cx=mg+(ci%2)*(cw+mg),cy=mg+Math.floor(ci/2)*(ch4+mg); doc.addImage(id4,'JPEG',cx,cy,cw,ch4,'','FAST'); } } doc.setFontSize(7);doc.setTextColor(180,180,180);doc.text(String(pg.pnum),W-mg,H-2,{align:'right'}); } await yld(); } setP(94,'PDF 파일 저장 중...'); await yld(120); doc.save(toSafe(ttl)+'_사진첩.pdf'); setP(100,'✅ 완료!'); toast(' PDF 다운로드 완료! ',3000); setTimeout(function(){ if(prog)prog.classList.remove('on');if(pfill)pfill.style.width='0'; },2200); }catch(e){ console.error(e); toast('❌ 오류: '+e.message); if(prog)prog.classList.remove('on'); } if(btn) btn.disabled=false; } /* ── 이미지 압축 ── */ function compress(dataUrl, maxSz, qual){ return new Promise(function(res){ var img=new Image(); img.onload=function(){ var w=img.width,h=img.height; if(w>maxSz||h>maxSz){ if(w>h){h=Math.round(h*maxSz/w);w=maxSz;}else{w=Math.round(w*maxSz/h);h=maxSz;} } var c=document.createElement('canvas'); c.width=w; c.height=h; c.getContext('2d').drawImage(img,0,0,w,h); res(c.toDataURL('image/jpeg',qual)); }; img.src=dataUrl; }); } /* ── 유틸 ── */ function restart(){ if(!confirm('처음부터 다시 시작할까요?')) return; photos=[]; renderGrid(); go(1); toast(' 새로 시작!'); } function yld(ms){ return new Promise(function(r){setTimeout(r,ms||0);}); } function el(id){ return document.getElementById(id); } function setTxt(id,t){ var e=el(id); if(e) e.textContent=t; } function toSafe(s){ return (s||'').replace(/[<>:"/\\|?*\s]/g,'_'); } function esc(s){ return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); } function toast(msg,dur){ dur=dur||2400; var t=el('pb_toast'); if(!t) return; t.textContent=msg; t.classList.add('on'); setTimeout(function(){ t.classList.remove('on'); },dur); } /* ── 공개 API ── */ return { togGuide:togGuide, go:go, onFiles:onFiles, onDragOver:onDragOver, onDragLeave:onDragLeave, onDrop:onDrop, delPhoto:delPhoto, clearAll:clearAll, sortDate:sortDate, setFmt:setFmt, setLay:setLay, togCover:togCover, togCaption:togCaption, updSlider:updSlider, setCaption:setCaption, prevPg:prevPg, nextPg:nextPg, makePDF:makePDF, restart:restart, }; }()); </script> </body> </html> 모두의계산기 모두의계산기 사진 사진첩 사진첩책자 앨범 최매슨생 https://0-1.kr/100 https://0-1.kr/100#entry100comment Sun, 15 Feb 2026 21:08:43 +0900 https://0-1.kr/99 <div id="mfg-expert-ios" style="max-width: 600px; margin: 20px auto; padding: 25px; border-radius: 45px; font-family: -apple-system, sans-serif; background: #f2f2f7; color: #1d1d1f; box-shadow: 0 25px 60px rgba(0,0,0,0.15); overflow: hidden; line-height: 1.5;"> <div style="background: white; padding: 25px; border-radius: 30px; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);"> <h2 style="font-size: 22px; font-weight: 700; margin-bottom: 15px; color:#007aff;"> 지원 필수 확인서</h2> <div style="display: grid; gap: 10px;"> <button onclick="toggleInfo('cert1')" class="cert-btn"> 창업기업 확인서 (발급방법)</button> <div id="cert1" class="cert-info"> 중기부에서 창업 7년 이내임을 증명하는 서류입니다.<br> <b>방법:</b> 창업기업확인시스템 접속 → 신청서 작성<br> <a href="https://cert.k-startup.go.kr" target="_blank" class="ios-link">공식 사이트 바로가기 →</a> </div> <button onclick="toggleInfo('cert2')" class="cert-btn"> 중소기업 확인서 (발급방법)</button> <div id="cert2" class="cert-info"> 중소기업 범위에 해당함을 증명(자금신청 필수).<br> <b>방법:</b> 중소기업현황정보시스템(SMINFO) → 온라인 제출<br> <a href="https://sminfo.mss.go.kr" target="_blank" class="ios-link">공식 사이트 바로가기 →</a> </div> </div> </div> <div style="margin-bottom: 20px;"> <h2 style="font-size: 19px; font-weight: 600; margin: 0 0 15px 15px;"> 제조업으로 오인하기 쉬운 업종</h2> <div id="sector-container" style="display: flex; flex-direction: column; gap: 15px;"> </div> </div> <div id="youth-quiz" style="background: white; padding: 25px; border-radius: 30px; margin-bottom: 20px;"> <h2 style="font-size: 20px; font-weight: 700; margin-bottom: 15px;"> ♂️ 청년자금 자격 테스트</h2> <div id="quiz-step"> <p id="quiz-q" style="font-size: 16px; font-weight: 500; margin-bottom: 20px;">Q. 본인의 연령은 만 39세 이하인가요?</p> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;"> <button onclick="answerQuiz(true)" class="quiz-opt">네</button> <button onclick="answerQuiz(false)" class="quiz-opt">아니오</button> </div> </div> </div> <div style="background: #1d1d1f; padding: 25px; border-radius: 30px; color: white;"> <h2 style="font-size: 18px; font-weight: 600; margin-bottom: 10px;"> 표준산업분류코드 확인</h2> <input type="text" id="ksic-code" placeholder="코드 5자리 입력 (예: 20423)" style="width: 100%; padding: 15px; border-radius: 15px; border: none; margin-bottom: 15px;"> <button onclick="checkKsic()" style="width: 100%; padding: 15px; background: #007aff; color: white; border: none; border-radius: 15px; font-weight: 600; cursor: pointer;">제조업 가능성 확인</button> <p id="ksic-res" style="margin-top: 15px; font-size: 14px; color: #a1a1a6;"></p> </div> </div> <style> .cert-btn { width: 100%; padding: 15px; background: #f2f2f7; border: none; border-radius: 15px; text-align: left; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.2s; } .cert-info { display: none; padding: 15px; font-size: 14px; color: #424245; line-height: 1.6; } .ios-link { display: inline-block; margin-top: 5px; color: #007aff; text-decoration: none; font-weight: 600; } .sector-card { background: white; border-radius: 25px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); } .tab-bar { display: flex; background: #f2f2f7; border-radius: 12px; padding: 3px; margin-bottom: 15px; } .tab-btn { flex: 1; padding: 8px; border: none; border-radius: 9px; font-size: 12px; font-weight: 600; cursor: pointer; background: transparent; color: #86868b; transition: 0.3s; } .tab-btn.active { background: white; color: #1d1d1f; box-shadow: 0 3px 8px rgba(0,0,0,0.1); } .quiz-opt { padding: 15px; background: #f2f2f7; border: none; border-radius: 15px; font-weight: 600; cursor: pointer; } .quiz-opt:hover { background: #e8e8ed; } </style> <script> // 1. 섹터 정보 (주요 업종 20개) const sectors = [ { name: "커피숍(로스터리)", x: "원두를 볶아 매장에서 커피로 파는 행위는 '음식점업'입니다. 제조가 아닙니다.", o: "볶은 원두를 포장하여 마트나 타 카페에 '납품'하는 B2B 매출이 발생할 때.", docs: "식품제조가공업 신고증", link: "https://www.foodsafetykorea.go.kr" }, { name: "비누/캔들 공방", x: "수강생 교육(원데이 클래스)이 메인이면 '교육 서비스업'입니다.", o: "직접 레시피로 대량 생산하여 온라인/오프라인 유통 채널에 판매할 때.", docs: "화장품제조업 등록필증", link: "https://nedrug.mfds.go.kr" }, { name: "OEM 위탁생산", x: "단순히 남이 만든 물건에 내 로고만 붙여서 파는 '유통업'인 경우.", o: "직접 설계/디자인을 하고 자기 명의로 제조 공정을 관리할 때(기술력 입증 필수).", docs: "위탁제조 계약서 및 설계도", link: "https://www.kosmes.or.kr" }, { name: "의류 제작", x: "기성복을 가져와 수선하거나 소량 리폼하여 판매하는 행위.", o: "원단 구매부터 패턴 제작, 봉제 공정을 직접 수행하거나 관리하여 완제품 생산 시.", docs: "사업자등록증(제조)", link: "https://www.hometax.go.kr" }, { name: "앱/SW 개발", x: "단순 IT 컨설팅이나 유지보수 서비스는 '서비스업'입니다.", o: "자체 패키징된 소프트웨어 솔루션을 제품화하여 판매할 때(정보통신업 내 제조 성격).", docs: "직접생산확인증명서", link: "https://www.smpp.go.kr" }, { name: "목수/가구제작", x: "현장에서 인테리어 공사의 일부로 목공 작업을 하는 것은 '건설업'입니다.", o: "일정한 제조 시설에서 완제품 가구를 제작하여 판매용으로 출고할 때.", docs: "공장등록증(500㎡ 이상)", link: "https://www.factoryon.go.kr" }, { name: "전자상거래", x: "해외 직구나 도매 꾹 등에서 물건을 떼어 파는 것은 '소매업'입니다.", o: "본인이 기획한 제품을 제조사에 발주하여 본인 브랜드로 판매하는 경우(제조업 간주).", docs: "품목제조보고서", link: "https://www.foodsafetykorea.go.kr" }, { name: "컨설팅/경영자문", x: "무형의 지식 서비스만 제공하는 형태는 절대 제조업이 아닙니다.", o: "기업/소기업 요건 충족 시 '지식서비스업 자금'으로 신청 가능(제조업 자금은 불가).", docs: "전문인력 보유 증명", link: "#" }, { name: "프랜차이즈 본부", x: "가맹점 관리 및 로열티 수익은 '서비스업'입니다.", o: "가맹점에 납품하는 소스나 식자재를 직접 공장에서 제조하는 경우만 해당 섹터 인정.", docs: "식품제조가공업 신고증", link: "#" } // ... 나머지 업종도 유사 패턴으로 추가 가능 ]; // 섹터 생성 함수 function renderSectors() { const container = document.getElementById('sector-container'); sectors.forEach((s, idx) => { const card = document.createElement('div'); card.className = 'sector-card'; card.innerHTML = ` <div style="font-weight:700; font-size:16px; margin-bottom:12px;">${idx+1}. ${s.name}</div> <div class="tab-bar"> <button onclick="showTab(${idx}, 'x')" id="tab-${idx}-x" class="tab-btn active">제조업 X</button> <button onclick="showTab(${idx}, 'o')" id="tab-${idx}-o" class="tab-btn">제조업 O</button> <button onclick="showTab(${idx}, 'docs')" id="tab-${idx}-docs" class="tab-btn">증빙/링크</button> </div> <div id="content-${idx}" style="font-size:14px; color:#424245; min-height:60px;"> <b>예시:</b> ${s.x} </div> `; container.appendChild(card); }); } function showTab(idx, type) { const s = sectors[idx]; const content = document.getElementById('content-'+idx); const tabs = document.querySelectorAll(`#tab-${idx}-x, #tab-${idx}-o, #tab-${idx}-docs`); tabs.forEach(t => t.classList.remove('active')); document.getElementById(`tab-${idx}-${type}`).classList.add('active'); if(type === 'x') content.innerHTML = `<b>부적합 예시:</b> ${s.x}`; else if(type === 'o') content.innerHTML = `<b>인정 예시:</b> ${s.o}`; else content.innerHTML = `<b>필수서류:</b> ${s.docs}<br><a href="${s.link}" target="_blank" class="ios-link">공식 링크 바로가기 →</a>`; } // 퀴즈 로직 let quizStep = 1; function answerQuiz(isYes) { const q = document.getElementById('quiz-q'); if(quizStep === 1) { if(!isYes) return alert("청년자금은 만 39세 이하만 가능합니다."); quizStep = 2; q.innerText = "Q. 사업을 시작한 지 3년 미만인가요?"; } else { if(!isYes) return alert("청년자금은 업력 3년 미만 창업자만 가능합니다."); document.getElementById('youth-quiz').innerHTML = "✅ <b>기본 요건 충족!</b><br>연령과 업력 요건을 모두 만족합니다. 이제 업종 요건을 확인하세요."; } } // KSIC 체크 function checkKsic() { const code = document.getElementById('ksic-code').value; const res = document.getElementById('ksic-res'); if(code.startsWith('10') || code.startsWith('11') || (code >= '13' && code <= '34')) { res.innerHTML = " 해당 코드는 <b>제조업 범위</b>에 속합니다. 시설 요건 확인이 필요합니다."; res.style.color = "#34c759"; } else { res.innerHTML = " 해당 코드는 일반적인 제조업 범위를 벗어납니다(서비스/소매 등)."; res.style.color = "#ff3b30"; } } function toggleInfo(id) { const el = document.getElementById(id); el.style.display = (el.style.display === 'block') ? 'none' : 'block'; } renderSectors(); </script> 스타트업 운영TIP/정부지원사업 TIP 최매슨생 https://0-1.kr/99 https://0-1.kr/99#entry99comment Wed, 4 Feb 2026 08:58:32 +0900 https://0-1.kr/98 <!-- ★ 벌써가계부 V20 (261002) ★ --> <!-- 출처: 스타트업ex _ cds1981@naver.com --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> <title>벌써가계부</title> <style> :root{ --gb-blue:#2f6fed; --gb-blue-light:#eaf1ff; --gb-green:#1aa260; --gb-red:#e0483f; --gb-gray:#8a8f98; --gb-border:#dfe2e8; --gb-bg:#f4f6f9; --gb-card:#ffffff; --gb-text:#22262e; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html,body{margin:0;padding:0;background:var(--gb-bg);color:var(--gb-text); font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;-webkit-text-size-adjust:100%;} body{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);touch-action:pan-y;} .gb-wrap{max-width:680px;margin:0 auto;padding:0 10px 50px 10px;} button{font-family:inherit;-webkit-appearance:none;appearance:none;border:none;cursor:pointer;touch-action:manipulation;background:transparent;} input,textarea{font-family:inherit;-webkit-appearance:none;appearance:none;touch-action:manipulation;} /* ===== 타이틀바 ===== */ .gb-titlebar{background:linear-gradient(135deg,#eaf2ff 0%,#fff8e8 100%);border-radius:0 0 14px 14px;padding:12px 12px 8px 12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);} .gb-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;} .gb-title-left{min-width:0;} .gb-title-main{font-size:22px;font-weight:900;line-height:1.3;word-break:keep-all;} .gb-title-sub{font-size:11px;color:#667;margin-top:3px;line-height:1.4;} .gb-emph{font-weight:900;color:var(--gb-blue);} .gb-title-right{display:flex;gap:6px;flex-shrink:0;} .gb-icon-btn{position:relative;background:rgba(255,255,255,0.7);color:var(--gb-blue);width:38px;height:38px;border-radius:10px;font-size:16px;display:flex;align-items:center;justify-content:center;} .gb-icon-btn:active{background:#fff;} .gb-basebtns{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center;} .gb-basebtn{position:relative;background:rgba(255,255,255,0.6);border:1px solid rgba(0,0,0,0.08);color:var(--gb-text);font-size:11px;font-weight:600;padding:7px 9px;border-radius:8px;} .gb-basebtn:active{background:#fff;} .gb-fontgroup{margin-left:auto;display:flex;align-items:center;gap:5px;} .gb-unitbtn{position:relative;background:#fff7e6;border:1px solid #f0c96b;color:#8a6300;font-size:11px;font-weight:800;padding:7px 9px;border-radius:8px;} .gb-unitbtn:active{background:#ffefc7;} .gb-fontbtn{position:relative;background:rgba(255,255,255,0.6);border:1px solid rgba(0,0,0,0.08);color:var(--gb-text);width:28px;height:28px;border-radius:8px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;} .gb-fontbtn:active{background:#fff;} .gb-tip{display:none;position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);background:#222;color:#fff;font-size:10px;padding:5px 7px;border-radius:7px;white-space:nowrap;z-index:50;pointer-events:none;} .gb-tip:after{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid #222;} body.gb-help-on .gb-tip{display:block;} /* ===== 년월 이동바 ===== */ .gb-monthbar{display:flex;align-items:center;justify-content:center;gap:14px;background:#fff;margin-top:8px;border-radius:12px;padding:9px;box-shadow:0 2px 8px rgba(0,0,0,0.05);} .gb-month-arrow{width:32px;height:32px;border-radius:8px;background:var(--gb-bg);color:var(--gb-text);font-size:16px;font-weight:800;} .gb-month-arrow:active{background:#e6e9ee;} .gb-month-label{font-size:15px;font-weight:800;min-width:110px;text-align:center;} /* ===== 사용설명서 ===== */ .gb-guide{background:#fff;border:1px solid var(--gb-border);border-radius:12px;margin-top:10px;overflow:hidden;} .gb-guide-head{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;font-size:13px;font-weight:800;} .gb-guide-arrow{transition:transform 0.2s;color:var(--gb-gray);} .gb-guide.open .gb-guide-arrow{transform:rotate(180deg);} .gb-guide-body{display:none;padding:0 13px 13px 13px;} .gb-guide.open .gb-guide-body{display:block;} .gb-guide-tabs{display:flex;gap:6px;margin-bottom:9px;} .gb-guide-tab{flex:1;font-size:11px;font-weight:700;padding:7px 4px;border-radius:8px;background:var(--gb-bg);color:var(--gb-gray);text-align:center;} .gb-guide-tab.active{background:var(--gb-blue);color:#fff;} .gb-guide-pane{display:none;font-size:12.5px;line-height:1.6;color:#444;} .gb-guide-pane.active{display:block;} .gb-guide-pane ul{padding-left:17px;margin:4px 0;} /* ===== 문서 제목 ===== */ .gb-doctitle-wrap{display:flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:10px 12px;margin-top:10px;box-shadow:0 2px 8px rgba(0,0,0,0.05);} .gb-doctitle-label{font-size:12px;font-weight:800;color:var(--gb-gray);flex-shrink:0;} .gb-doctitle-input{flex:1;border:none;background:transparent;font-size:13px;font-weight:700;color:var(--gb-text);padding:4px 2px;min-width:0;} .gb-doctitle-input:focus{outline:none;border-bottom:1.5px solid var(--gb-blue);} /* ===== 요약바 ===== */ .gb-summary{display:flex;background:#fff;margin-top:10px;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.05);} .gb-sum-item{flex:1;text-align:center;padding:9px 4px;border-right:1px solid var(--gb-border);} .gb-sum-item:last-child{border-right:none;} .gb-sum-label{font-size:10px;color:var(--gb-gray);} .gb-sum-value{font-size:18px;font-weight:900;margin-top:3px;} .gb-sum-value.income{color:var(--gb-blue);} .gb-sum-value.expense{color:var(--gb-red);} .gb-sum-value.balance{color:var(--gb-green);} .gb-undobar{display:flex;justify-content:flex-end;gap:6px;margin-top:6px;} .gb-undobtn{background:#fff;border:1px solid var(--gb-border);font-size:11px;padding:5px 9px;border-radius:7px;color:var(--gb-gray);} .gb-undobtn:active{background:#eee;} .gb-undobtn:disabled{opacity:0.4;} /* ===== 섹션 헤드 ===== */ .gb-section{margin-top:16px;} .gb-section-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px;background:#fff;border-radius:12px;padding:9px 10px;box-shadow:0 2px 8px rgba(0,0,0,0.05);} .gb-section-head-income{background:linear-gradient(135deg,#eaf2ff 0%,#f7faff 100%);} .gb-section-head-expense{background:linear-gradient(135deg,#fff0ef 0%,#fff9f8 100%);} .gb-section-title-left{display:flex;align-items:center;gap:8px;min-width:0;} .gb-accordion-btn{position:relative;width:36px;height:36px;border-radius:10px;background:#fff;color:var(--gb-text);flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,0.08);} .gb-accordion-btn:active{background:#e6e9ee;} .gb-accordion-btn .gb-accordion-arrow{display:inline-block;font-size:19px;font-weight:900;transition:transform 0.2s;} .gb-accordion-btn.closed .gb-accordion-arrow{transform:rotate(-90deg);} .gb-section-title-text{min-width:0;} .gb-section-title{font-size:16px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .gb-section-title.income{color:var(--gb-blue);} .gb-section-title.expense{color:var(--gb-red);} .gb-section-total{font-size:13px;font-weight:700;color:var(--gb-text);} .gb-section-desc{font-size:9.5px;color:var(--gb-gray);margin-top:2px;} .gb-section-tools{display:flex;gap:4px;flex-shrink:0;} .gb-mini-icon-btn{position:relative;width:28px;height:28px;border-radius:8px;background:var(--gb-bg);border:1px solid var(--gb-border);font-size:14px;color:var(--gb-text);} .gb-mini-icon-btn:active{background:#e6e9ee;} /* ===== 엑셀형 테이블 ===== */ .gb-tablewrap{overflow:visible;position:relative;border:1px solid var(--gb-border);border-radius:12px;background:#fff;margin-bottom:10px;box-shadow:0 2px 8px rgba(0,0,0,0.05);touch-action:pan-y;} .gb-table{border-collapse:collapse;width:100%;table-layout:fixed;} .gb-table th,.gb-table td{border-bottom:1px solid var(--gb-border);border-right:1px solid #eef0f3;padding:0;font-size:12.5px;vertical-align:top;} .gb-table th:last-child,.gb-table td:last-child{border-right:none;} .gb-table tr:last-child td{border-bottom:none;} .gb-table thead th{background:#fafbfd;font-size:10.5px;color:var(--gb-gray);font-weight:700;padding:6px 5px;text-align:center;} .gb-sort-ic{font-size:9px;color:#c7cad0;margin-left:2px;} .gb-th-name[data-act],.gb-th-sum[data-act]{cursor:pointer;} .gb-th-total{display:block;font-size:9.5px;color:var(--gb-blue);font-weight:800;margin-top:1px;} .gb-th-detail-row{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;} .gb-allbtn{position:relative;background:#fff;border:1px solid var(--gb-border);color:var(--gb-gray);font-size:12px;padding:2px 6px;border-radius:6px;line-height:1.3;} .gb-allbtn:active{background:#eee;} .gb-th-name,.gb-td-name{text-align:center;} .gb-th-sum,.gb-td-sum{text-align:right;font-weight:700;padding:7px 5px !important;} .gb-table thead .gb-th-sum{text-align:center;} .gb-td-sum.income{color:var(--gb-blue);} .gb-td-sum.expense{color:var(--gb-red);} .gb-td-sum{cursor:pointer;} .gb-th-remark,.gb-td-remark{text-align:center;} .gb-remark-input{width:100%;border:none;background:transparent;font-size:11px;color:#555;padding:8px 5px;text-align:center;} .gb-remark-input:focus{outline:1px solid var(--gb-blue);background:#fff;} .gb-th-del,.gb-td-del{width:22px;text-align:center;} .gb-del-btn{position:relative;color:var(--gb-red);font-size:15px;padding:6px;font-weight:900;} .gb-toggle-btn{width:20px;height:20px;font-size:11px;font-weight:800;color:var(--gb-text);background:var(--gb-bg);border:1px solid var(--gb-border);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;} .gb-toggle-btn:active{background:#e6e9ee;} .gb-td-name-inner{padding:5px 4px;display:block;} .gb-name-input{border:none;background:transparent;font-size:12.5px;font-weight:700;width:100%;padding:3px 1px;min-width:0;text-align:center;} .gb-detail-add{position:relative;width:20px;height:20px;border-radius:6px;background:var(--gb-blue-light);color:var(--gb-blue);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0;} .gb-detail-del{position:relative;width:20px;height:20px;border-radius:6px;background:#fdeceb;color:var(--gb-red);font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0;} .gb-detail-lead{flex-shrink:0;display:flex;align-items:center;} .gb-detail-lead .gb-tip{left:auto;right:0;-webkit-transform:none;transform:none;} .gb-detail-lead .gb-tip:after{left:auto;right:6px;-webkit-transform:none;transform:none;} .gb-detail-row{display:block;padding:4px 5px 5px 5px;border-bottom:1px dotted #f0f1f4;} .gb-detail-row:last-child{border-bottom:none;} .gb-detail-row:nth-child(odd){background:#f4f8ff;} .gb-detail-row:nth-child(even){background:#fffdf3;} .gb-detail-top{display:flex;align-items:center;gap:3px;} .gb-detail-num{font-size:9px;color:#b5b9c0;flex-shrink:0;} .gb-entry-desc{flex:1;min-width:0;width:100%;border:none;border-bottom:1px solid var(--gb-border);background:transparent;font-size:11.5px;color:var(--gb-gray);padding:4px 2px;} .gb-entry-desc:focus{outline:none;border-bottom:1.5px solid var(--gb-blue);} .gb-entry-amt{display:block;width:100%;min-width:0;border:none;border-bottom:1px solid var(--gb-border);background:transparent;font-size:13px;font-weight:600;text-align:right;padding:5px 3px;} .gb-entry-amt:focus{outline:none;border-bottom:1.5px solid var(--gb-blue);} .gb-detail-del:active{opacity:0.7;} /* V16: 선택삭제 */ .gb-sortlabel{display:inline-block;cursor:pointer;padding:2px 0;} .gb-selbtn{position:relative;background:#fff;border:1px solid var(--gb-border);color:var(--gb-gray);font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;margin-top:3px;} .gb-selbtn.on{background:var(--gb-blue);border-color:var(--gb-blue);color:#fff;} .gb-selbtn .gb-tip{left:0;-webkit-transform:none;transform:none;} .gb-selbtn .gb-tip:after{left:14px;} .gb-selbar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:7px 8px;background:#fff4f3;border-bottom:1px solid var(--gb-border);border-radius:11px 11px 0 0;} .gb-selbar-info{flex:1 1 100%;font-size:12px;font-weight:800;color:var(--gb-red);} .gb-selbar-btn{position:relative;flex:1;font-size:12px;font-weight:700;padding:8px 4px;border-radius:8px;background:var(--gb-bg);color:var(--gb-text);} .gb-selbar-btn.danger{background:var(--gb-red);color:#fff;} .gb-chk{-webkit-appearance:checkbox;-moz-appearance:checkbox;appearance:auto;width:20px;height:20px;margin:0;flex-shrink:0;touch-action:manipulation;accent-color:var(--gb-red);} .gb-td-name-top{display:flex;align-items:center;justify-content:center;gap:6px;padding:5px 4px 0 4px;} .gb-row-sel td{background:#ffecec !important;} .gb-row-sel .gb-detail-row{background:#ffecec !important;} .gb-td-catnote{text-align:center;vertical-align:middle !important;font-size:10.5px;color:var(--gb-gray);font-weight:600 !important;} .gb-table thead th:first-child{border-top-left-radius:11px;} .gb-table thead th:last-child{border-top-right-radius:11px;} .gb-row-add .gb-add-row-btn{border-radius:0 0 11px 11px;} .gb-row-cat td{background:#fff6f5;font-weight:800;} .gb-row-cat .gb-name-input{color:var(--gb-red);font-weight:800;} .gb-row-add td{padding:0 !important;} .gb-add-row-btn{width:100%;padding:7px;background:var(--gb-bg);color:var(--gb-gray);font-size:11.5px;font-weight:700;} .gb-add-row-btn:active{background:#e9edf3;} .gb-add-cat{width:100%;background:#fff;border:1px dashed var(--gb-red);color:var(--gb-red);font-size:12.5px;font-weight:700;padding:9px;border-radius:10px;} /* ===== 메모 / 브리핑 ===== */ .gb-memo-wrap{margin-top:4px;} .gb-memo-label{font-size:11.5px;font-weight:700;color:var(--gb-gray);margin-bottom:5px;padding-left:2px;} .gb-memo{width:100%;min-height:64px;border:1px solid var(--gb-border);border-radius:10px;padding:9px 10px;font-size:12.5px;background:#fff;resize:vertical;line-height:1.5;} .gb-memo:focus{outline:1.5px solid var(--gb-blue);} .gb-divider{border:none;border-top:1px dashed var(--gb-border);margin:14px 0;} .gb-briefing-wrap{margin-bottom:12px;} .gb-briefing-btn{width:100%;background:#fff;border:1px solid var(--gb-border);color:var(--gb-text);font-size:13px;font-weight:700;padding:11px;border-radius:10px;} .gb-briefing-btn:active{background:#f0f2f5;} /* ===== 요약공유 버튼 ===== */ .gb-summary-share-btn{width:100%;background:#111827;color:#fff;font-size:13px;font-weight:800;padding:13px;border-radius:12px;margin-top:10px;} .gb-summary-share-btn:active{background:#000;} .gb-summary-share-sub{display:block;font-size:10px;font-weight:600;color:#c7ccd6;margin-top:2px;} .gb-summary-pre{white-space:pre-wrap;word-break:break-word;font-size:12px;line-height:1.6;background:var(--gb-bg);border-radius:10px;padding:12px;max-height:44vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--gb-border);} /* ===== 팝업/모달 ===== */ .gb-modal-bg{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.45);z-index:2147483000;touch-action:none;} body.gb-popup-open{overflow:hidden;} .gb-modal-bg.show{display:block;} .gb-modal{position:fixed;left:10px;right:10px;bottom:0;max-width:600px;margin:0 auto;background:#fff;border-radius:16px 16px 0 0;padding:15px 15px calc(18px + env(safe-area-inset-bottom,0px)) 15px;z-index:2147483001;max-height:82%;overflow-y:auto;-webkit-overflow-scrolling:touch;} .gb-modal-title{font-size:15px;font-weight:800;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;} .gb-modal-close{width:28px;height:28px;border-radius:50%;background:var(--gb-bg);color:var(--gb-gray);font-size:15px;} .gb-share-url{width:100%;border:1px solid var(--gb-border);border-radius:9px;padding:9px;font-size:11.5px;background:var(--gb-bg);margin-bottom:8px;word-break:break-all;} .gb-modal-btns{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px;} .gb-modal-btn{flex:1;min-width:96px;background:var(--gb-blue);color:#fff;font-weight:700;font-size:12.5px;padding:10px;border-radius:9px;text-align:center;} .gb-modal-btn.secondary{background:var(--gb-bg);color:var(--gb-text);} .gb-modal-btn.danger{background:var(--gb-red);} .gb-modal-desc{font-size:13px;color:#555;margin-bottom:14px;line-height:1.5;} .gb-qr-box{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;} .gb-hint{font-size:10.5px;color:var(--gb-gray);margin-top:4px;} .gb-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#222;color:#fff;font-size:12.5px;padding:10px 16px;border-radius:22px;z-index:2147483002;opacity:0;transition:opacity 0.25s;pointer-events:none;max-width:85%;text-align:center;} .gb-toast.show{opacity:1;} /* ===== V17: 선택 동그라미 ===== */ .gb-circ{display:inline-block;width:18px;height:18px;border:2px solid #b8bdc7;border-radius:50%;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:middle;} .gb-circ-btn{width:30px;height:30px;padding:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;background:transparent;} .gb-circ-btn.on .gb-circ{border-color:var(--gb-red);background:var(--gb-red);-webkit-box-shadow:inset 0 0 0 3px #fff;box-shadow:inset 0 0 0 3px #fff;} .gb-selcircle{position:relative;display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:3px 4px;background:transparent;color:var(--gb-gray);font-size:11px;font-weight:700;} .gb-selcircle.on{color:var(--gb-blue);} .gb-selcircle.on .gb-circ{border-color:var(--gb-blue);background:var(--gb-blue);-webkit-box-shadow:inset 0 0 0 3px #fff;box-shadow:inset 0 0 0 3px #fff;} .gb-selcircle .gb-tip{left:0;-webkit-transform:none;transform:none;} .gb-selcircle .gb-tip:after{left:14px;} /* ===== V17: 티스토리 스킨이 입력칸에 덮어씌우는 박스 스타일 제거 → 밑줄만 ===== */ .gb-wrap input.gb-name-input,.gb-wrap input.gb-entry-desc,.gb-wrap input.gb-entry-amt{ -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important; background:transparent !important;background-image:none !important; border:0 !important;border-bottom:1px solid #d5d9e0 !important;border-radius:0 !important; -webkit-box-shadow:none !important;box-shadow:none !important;outline:none !important; height:auto !important;min-height:0 !important;margin:0 !important; -webkit-box-sizing:border-box !important;box-sizing:border-box !important; width:100% !important;max-width:100% !important;min-width:0 !important; font-family:inherit !important;color:var(--gb-text) !important;line-height:1.3 !important;} .gb-wrap input.gb-name-input{padding:4px 2px !important;font-size:12.5px !important;font-weight:700 !important;text-align:center !important;} .gb-wrap input.gb-entry-desc{padding:4px 2px !important;font-size:11.5px !important;color:var(--gb-gray) !important;text-align:left !important;} .gb-wrap input.gb-entry-amt{padding:5px 3px !important;font-size:13px !important;font-weight:600 !important;text-align:right !important;} .gb-wrap input.gb-name-input:focus,.gb-wrap input.gb-entry-desc:focus,.gb-wrap input.gb-entry-amt:focus{border-bottom:2px solid var(--gb-blue) !important;} .gb-wrap .gb-row-cat input.gb-name-input{color:var(--gb-red) !important;} .gb-wrap input::-webkit-input-placeholder{color:#c3c7ce;} .gb-wrap input::-moz-placeholder{color:#c3c7ce;} /* ===== V17: 한 화면에 가두기 (스킨 표 스타일 방어) ===== */ .gb-wrap{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;} .gb-wrap table.gb-table{width:100% !important;max-width:100% !important;table-layout:fixed !important;margin:0 !important;border-collapse:collapse !important;border-spacing:0 !important;} .gb-wrap .gb-table th,.gb-wrap .gb-table td{min-width:0;-webkit-box-sizing:border-box;box-sizing:border-box;} .gb-wrap .gb-td-sum,.gb-wrap .gb-sum-value{word-break:break-all;overflow-wrap:break-word;} .gb-title-left{-webkit-flex:1 1 auto;flex:1 1 auto;} .gb-title-main{word-break:normal;overflow-wrap:anywhere;word-wrap:break-word;} .gb-section-head{min-width:0;} .gb-section-title-left{-webkit-flex:1 1 auto;flex:1 1 auto;min-width:0;} .gb-section-title{white-space:normal;} .gb-sum-item{min-width:0;} @media (max-width:480px){ .gb-wrap{padding:0 6px 40px 6px;} .gb-titlebar{padding:10px 8px 8px 8px;} .gb-title-main{font-size:18px;} .gb-title-right{gap:4px;} .gb-icon-btn{width:34px;height:34px;font-size:15px;} .gb-basebtns{gap:4px;} .gb-basebtn,.gb-unitbtn{padding:6px 7px;} .gb-sum-value{font-size:14.5px;} .gb-sum-label{font-size:10px;} .gb-section-head{padding:8px 7px;gap:5px;} .gb-accordion-btn{width:32px;height:32px;} .gb-section-title{font-size:14.5px;} .gb-section-total{font-size:11.5px;} .gb-section-desc{font-size:9px;} .gb-mini-icon-btn{width:26px;height:26px;font-size:12px;} .gb-table thead th{font-size:10px;padding:6px 2px;} .gb-table .gb-th-sum,.gb-table .gb-td-sum{font-size:11.5px;padding:7px 3px !important;} .gb-allbtn{font-size:11px;padding:2px 4px;} .gb-wrap input.gb-name-input{font-size:12px !important;} .gb-wrap input.gb-entry-desc{font-size:11px !important;} .gb-wrap input.gb-entry-amt{font-size:12.5px !important;} .gb-detail-row{padding:4px 3px 5px 3px;} .gb-modal{left:6px;right:6px;} } /* ===== V18 ===== */ .gb-icon-btn{width:auto;min-width:42px;padding:0 9px;font-size:12.5px;font-weight:800;} .gb-title-right .gb-tip{left:auto;right:0;-webkit-transform:none;transform:none;} .gb-title-right .gb-tip:after{left:auto;right:14px;-webkit-transform:none;transform:none;} .gb-wrap input.gb-name-input{border-bottom:0 !important;} .gb-wrap input.gb-name-input:focus{border-bottom:0 !important;background:#eef3ff !important;border-radius:6px !important;} .gb-wrap .gb-table td.gb-td-name,.gb-wrap .gb-table td.gb-td-sum{vertical-align:middle !important;} .gb-td-name-inner{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;gap:0;padding:4px 2px;} .gb-td-name-inner .gb-name-input{-webkit-flex:1 1 auto;flex:1 1 auto;} .gb-td-toggle-row{text-align:center;padding:0 0 5px 0;} .gb-circ-btn{width:28px;height:30px;-webkit-flex-shrink:0;flex-shrink:0;position:relative;} .gb-circ-btn .gb-tip{left:0;-webkit-transform:none;transform:none;} .gb-circ-btn .gb-tip:after{left:10px;-webkit-transform:none;transform:none;} .gb-selbar{display:none;} .gb-selbar.show{display:-webkit-flex;display:flex;} .gb-share-guide{font-size:12.5px;line-height:1.65;background:#f4f8ff;border:1px solid #d6e4ff;border-radius:10px;padding:9px 11px;margin-bottom:8px;color:#334;} .gb-share-len{font-size:12px;font-weight:700;margin:0 0 8px 2px;} .gb-share-len.ok{color:var(--gb-green);} .gb-share-len.warn{color:var(--gb-red);} @media (max-width:480px){ .gb-icon-btn{height:34px;min-width:38px;padding:0 7px;font-size:12px;} .gb-circ-btn{width:24px;height:28px;} .gb-circ{width:16px;height:16px;} .gb-wrap input.gb-name-input{padding:4px 1px !important;} } /* ===== V19 ===== */ .gb-name-lead{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;gap:2px;-webkit-flex-shrink:0;flex-shrink:0;} .gb-th-name-wrap{display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;gap:1px;} .gb-th-name .gb-circ-btn{height:26px;} .gb-th-name .gb-circ-btn .gb-tip{bottom:-34px;} @media (max-width:480px){ .gb-wrap input.gb-name-input{font-size:11.5px !important;} } /* ===== V20: 광고 배너 ===== */ .gb-banner{position:relative;margin-top:10px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--gb-border);-webkit-box-shadow:0 2px 8px rgba(0,0,0,0.05);box-shadow:0 2px 8px rgba(0,0,0,0.05);} .gb-banner-link{display:block;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;} .gb-banner-stage{position:relative;width:100%;height:0;padding-bottom:25%;overflow:hidden;} .gb-banner-img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:100%;margin:0;padding:0;border:0;display:block;-o-object-fit:contain;object-fit:contain;opacity:0;-webkit-transition:opacity 0.35s;transition:opacity 0.35s;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;} .gb-banner-img.on{opacity:1;} .gb-banner-label{position:absolute;top:6px;right:6px;font-size:10px;line-height:1.4;font-weight:700;color:#fff;background:rgba(0,0,0,0.45);padding:1px 7px;border-radius:8px;pointer-events:none;} .gb-banner-dots{display:none;position:absolute;left:0;right:0;bottom:3px;text-align:center;height:14px;line-height:0;} .gb-banner-dot{position:relative;display:inline-block;width:18px;height:14px;padding:0;margin:0;background:transparent;border:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;} .gb-banner-dot:after{content:'';position:absolute;top:3px;left:5px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.75);border:1px solid rgba(0,0,0,0.3);-webkit-box-sizing:border-box;box-sizing:border-box;} .gb-banner-dot.on:after{background:var(--gb-blue);border-color:#fff;} </style> </head> <body> <div class="gb-wrap"> <div class="gb-titlebar"> <div class="gb-title-row"> <div class="gb-title-left"> <div class="gb-title-main" id="gbTitleMain">벌써가계부_V20_(261002)</div> <div class="gb-title-sub"><span class="gb-emph">벌</span> 수 있는 만큼 <span class="gb-emph">써</span>야할 곳을 미리 계산해봅시다</div> </div> <div class="gb-title-right"> <button class="gb-icon-btn" id="btnShare">공유<span class="gb-tip">공유 링크·QR코드 만들기</span></button> <button class="gb-icon-btn" id="btnSave">저장<span class="gb-tip">엑셀 파일로 내보내기</span></button> <button class="gb-icon-btn" id="btnHelp">설명<span class="gb-tip">버튼 설명 보기/끄기</span></button> </div> </div> <div class="gb-basebtns"> <button class="gb-basebtn" id="btnResetTop">전체초기화<span class="gb-tip">이번 달 입력을 처음 상태로 되돌려요</span></button> <div class="gb-fontgroup"> <button class="gb-unitbtn" id="btnUnit">[단위:원]<span class="gb-tip">합계 표시 단위를 원/천원/백만원으로 바꿔요</span></button> <button class="gb-fontbtn" id="btnFontDown" style="font-size:11px;">가<span class="gb-tip">글자 작게</span></button> <button class="gb-fontbtn" id="btnFontUp" style="font-size:16px;">가<span class="gb-tip">글자 크게</span></button> </div> </div> </div> <div class="gb-monthbar"> <button class="gb-month-arrow" id="btnPrevMonth">◀</button> <div class="gb-month-label" id="monthLabel">2026년 9월</div> <button class="gb-month-arrow" id="btnNextMonth">▶</button> </div> <div class="gb-guide" id="guideBox"> <div class="gb-guide-head" id="guideHead"><span> 사용설명서</span><span class="gb-guide-arrow">▾</span></div> <div class="gb-guide-body"> <div class="gb-guide-tabs"> <div class="gb-guide-tab active" data-tab="1">기본 사용법</div> <div class="gb-guide-tab" data-tab="2">세부내역·정렬</div> <div class="gb-guide-tab" data-tab="3">년월·저장·공유</div> </div> <div class="gb-guide-pane active" data-pane="1"> <ul> <li>세부내역 칸 아래 금액을 입력하면 합계에 바로 반영돼요. 합계 칸은 직접 입력하는 칸이 아니라 세부내역을 모아 보여주는 칸이에요(눌러보면 안내가 떠요).</li> <li>표는 항목·합계·세부내역 3칸이에요. 항목 이름 앞 동그라미(○)를 누르면 ●로 바뀌고(맨 위 "항목" 글자 앞 ○는 전체선택), 표 위에 [전체선택] [선택삭제] [선택해제] 버튼이 나타나요. [선택삭제]로 한 번에 지울 수 있고, ↺ 되돌리기로 복구할 수 있어요(대분류를 고르면 안의 항목도 함께 지워져요).</li> </ul> </div> <div class="gb-guide-pane" data-pane="2"> <ul> <li>세부내역 칸은 위에 내용, 아래에 금액을 적어요. 첫 줄 오른쪽 ＋ 를 누르면 방금 금액을 그대로 복제해서 아래로 한 줄 더 생겨요(항목이 많으면 높이가 늘어나는 게 정상이에요). 이름과 금액 모두 수정 가능하고, 추가된 줄 오른쪽 × 로 그 줄만 지울 수 있어요.</li> <li>항목명 앞 동그라미 아래 작은 네모(▸/▾)로 그 항목의 2번째 이후 세부내역을 접고 펼 수 있어요. 표 머리글의 ⏬(전체펼침)/⏫(전체접힘)으로 표 전체를 한번에 조절해요.</li> <li>표 머리글의 "항목"이나 "합계"를 누르면 그 기준으로 정렬돼요(다시 누르면 오름↔내림 전환).</li> </ul> </div> <div class="gb-guide-pane" data-pane="3"> <ul> <li>타이틀 아래 ◀ 2026년 9월 ▶ 로 월을 넘기면 그 달 데이터가 따로 저장·불러오기 돼요.</li> <li>사용설명서 아래 Title란에 문서 제목을 적으면, 엑셀·QR 이미지 파일명에 [연월_제목]으로 그대로 쓰여요.</li> <li>입력 내용은 4초마다 자동 저장돼요. 상단 [저장]으로 지금 내용을 엑셀 파일로 바로 내보낼 수 있어요.</li> <li>[공유]에서 만든 링크를 즐겨찾기나 댓글(999자 이내)에 저장해두면 바로 이어서 작업할 수 있어요. 길면 [짧은 URL 만들기]를 쓰세요. 주소창도 입력할 때마다 최신 내용으로 자동 갱신돼서 그냥 즐겨찾기(북마크)만 해도 돼요.</li> <li>맨 아래 "내용요약"이나 "요약 공유하기"를 누르면 요약 팝업에서 공유(모바일)·PDF저장·복사를 모두 할 수 있어요.</li> </ul> </div> </div> </div> <!-- ============ 광고 배너 사용법 (스타트업ex _ cds1981@naver.com) ============ 1) 배너 그림 크기 : 가로 1200 x 세로 300 px (비율 4:1), PNG 파일, 200KB 이하 권장. 글자는 크게(40px 이상), 오른쪽 위 구석과 아래 가운데는 비워두세요 (광고 표시, 점 표시가 올라옴). 2) 파일 이름 : Gb_banner1.png, Gb_banner2.png, Gb_banner3.png ... (영문 대소문자 정확히). 번호는 1번부터 빠짐없이 차례로 올려야 합니다. 중간 번호가 비면 그 뒤 번호는 찾지 않아요. 3) 올리는 곳 : 티스토리 관리 - 꾸미기 - 스킨 편집 - HTML 편집 - 파일 업로드 (Gb_js 파일을 올린 곳과 같은 images 폴더). 블로그가 두 개면 각각 올려야 합니다. 4) 켜기 / 끄기 : 파일을 올리면 배너가 나타나고, 스킨 편집에서 파일을 삭제하면 배너와 빈 공간까지 사라지고 예전 화면 그대로 돌아옵니다. 보통 1시간 이내에 반영됩니다 (data-cache 분 단위). 5) 클릭 링크 : 아래 data-link1, data-link2 ... 에 https:// 주소를 적으면 그 번호 배너를 눌렀을 때 새 창으로 열립니다. 비워두면 눌러도 아무 일도 없습니다. (7번 이상을 쓰려면 data-link7 처럼 직접 추가) 6) 종료일 : data-until1="2026-12-31" 처럼 적으면 그 다음 날부터 그 번호 배너가 자동으로 빠집니다. data-until 은 모든 배너 공통 종료일입니다. 형식은 YYYY-MM-DD (월, 일은 두 자리). 7) 여러 장 : 2장 이상이면 data-sec 초마다 자동으로 넘어가고, 아래 점을 눌러 직접 이동할 수 있습니다. 8) 옵션 : data-label="광고" (구석 표시 글자, 지우면 표시 안 함) / data-max (찾을 최대 장수 1~10, 기본 6) data-sec (넘어가는 초, 최소 2, 기본 5) / data-cache (캐시 분, 기본 60, 0이면 매번 새로 확인) data-base (배너 폴더 주소를 직접 지정할 때만. 비워두면 Gb_js 파일 주소로 자동 인식) ※ 이 주석과 아래 배너 영역은 지우지 마세요. 배너 파일이 없으면 화면에 아무것도 나타나지 않습니다. --> <div class="gb-banner" id="gbBanner" style="display:none;" data-max="6" data-sec="5" data-cache="60" data-label="광고" data-base="" data-until="" data-link1="" data-link2="" data-link3="" data-link4="" data-link5="" data-link6="" data-until1="" data-until2="" data-until3="" data-until4="" data-until5="" data-until6=""> <a class="gb-banner-link" id="gbBannerLink" target="_blank" rel="noopener noreferrer sponsored"><div class="gb-banner-stage" id="gbBannerStage"></div></a> <span class="gb-banner-label" id="gbBannerLabel"></span> <div class="gb-banner-dots" id="gbBannerDots"></div> </div> <div class="gb-doctitle-wrap"> <span class="gb-doctitle-label">Title :</span> <input class="gb-doctitle-input" id="docTitleInput" data-act="doctitle" placeholder="OOO의 9월 수입지출내역"> </div> <div class="gb-summary"> <div class="gb-sum-item"><div class="gb-sum-label">총수익</div><div class="gb-sum-value income" id="sumIncome">0원</div></div> <div class="gb-sum-item"><div class="gb-sum-label">총지출</div><div class="gb-sum-value expense" id="sumExpense">0원</div></div> <div class="gb-sum-item"><div class="gb-sum-label">잔액</div><div class="gb-sum-value balance" id="sumBalance">0원</div></div> </div> <div class="gb-undobar"> <button class="gb-undobtn" id="btnUndo">↺ 되돌리기</button> <button class="gb-undobtn" id="btnRedo">↻ 다시실행</button> </div> <div class="gb-section"> <div class="gb-section-head gb-section-head-income"> <div class="gb-section-title-left"> <button class="gb-accordion-btn" id="btnIncomeAccordion"><span class="gb-accordion-arrow">▾</span><span class="gb-tip">눌러서 표 접기/펼치기</span></button> <div class="gb-section-title-text"> <div class="gb-section-title income">수익 <span class="gb-section-total" id="incomeSectionTotal">: 총 0원</span></div> <div class="gb-section-desc">각 항목의 세부내역 칸에 금액을 입력하세요</div> </div> </div> <div class="gb-section-tools"> <button class="gb-mini-icon-btn" id="btnUndoIncome">↩️<span class="gb-tip">되돌리기</span></button> <button class="gb-mini-icon-btn" id="btnRedoIncome">↪️<span class="gb-tip">다시실행</span></button> </div> </div> <div id="incomeList"></div> </div> <div class="gb-section"> <div class="gb-section-head gb-section-head-expense"> <div class="gb-section-title-left"> <button class="gb-accordion-btn" id="btnExpenseAccordion"><span class="gb-accordion-arrow">▾</span><span class="gb-tip">눌러서 표 접기/펼치기</span></button> <div class="gb-section-title-text"> <div class="gb-section-title expense">지출 <span class="gb-section-total" id="expenseSectionTotal">: 총 0원</span></div> <div class="gb-section-desc">대분류별로 표가 나뉘며, 세부내역에 금액을 입력하세요</div> </div> </div> <div class="gb-section-tools"> <button class="gb-mini-icon-btn" id="btnUndoExpense">↩️<span class="gb-tip">되돌리기</span></button> <button class="gb-mini-icon-btn" id="btnRedoExpense">↪️<span class="gb-tip">다시실행</span></button> </div> </div> <div id="expenseList"></div> <div class="gb-memo-wrap"> <div class="gb-memo-label"> 이번 달 메모</div> <textarea class="gb-memo" id="memoBox" data-act="memo" placeholder="이번 달 지출 특이사항이나 메모를 적어보세요"></textarea> </div> <hr class="gb-divider"> <div class="gb-briefing-wrap"> <div class="gb-memo-label"> 이번 달 브리핑</div> <button class="gb-briefing-btn" id="btnBriefing">내용요약 보기 (공유 · PDF저장 · 복사)</button> </div> <button class="gb-add-cat" id="btnAddCatBottom">＋ 대분류 더하기 (예: 고정비, 변동비)</button> <button class="gb-summary-share-btn" id="btnSummaryShare"> 이번 달 요약 공유하기<span class="gb-summary-share-sub">(모바일 전용 · 카카오톡/문자/이메일로 바로 보내기)</span></button> </div> </div> <div class="gb-modal-bg" id="confirmBg"> <div class="gb-modal" id="confirmModal"> <div class="gb-modal-title"><span>전체 초기화</span><button class="gb-modal-close" id="confirmCloseBtn">✕</button></div> <div class="gb-modal-desc">정말 이번 달 입력을 모두 초기화할까요?<br>초기화 후에도 상단 ↺ 되돌리기로 복구할 수 있어요.</div> <div class="gb-modal-btns"> <button class="gb-modal-btn secondary" id="btnConfirmCancel">취소</button> <button class="gb-modal-btn danger" id="btnConfirmOk">초기화할게요</button> </div> </div> </div> <div class="gb-modal-bg" id="modalBg"> <div class="gb-modal" id="shareModal"> <div class="gb-modal-title"><span>공유하기</span><button class="gb-modal-close" id="modalCloseBtn">✕</button></div> <div class="gb-share-guide"> 이 링크를 <b>즐겨찾기</b> 또는 <b>댓글</b>에 저장 시 바로 이어서 작업이 가능합니다.<br>✏️ 댓글은 <b>999자 이내</b>만 가능해요. 초과하면 아래 <b>[짧은 URL 만들기]</b>를 사용하세요.</div> <div class="gb-share-len" id="shareLen"></div> <div class="gb-share-url" id="shareUrlBox">-</div> <div class="gb-modal-btns"> <button class="gb-modal-btn" id="btnCopyUrl">링크 복사</button> <button class="gb-modal-btn secondary" id="btnShortUrl">짧은 URL 만들기</button> <button class="gb-modal-btn secondary" id="btnMakeQr">QR코드 만들기</button> </div> <div class="gb-hint" id="shareHint"></div> <div class="gb-qr-box" id="qrBox"></div> </div> </div> <div class="gb-modal-bg" id="summaryBg"> <div class="gb-modal" id="summaryModal"> <div class="gb-modal-title"><span>이번 달 요약</span><button class="gb-modal-close" id="summaryCloseBtn">✕</button></div> <div class="gb-summary-pre" id="summaryPre"></div> <div class="gb-modal-btns" style="margin-top:10px;"> <button class="gb-modal-btn" id="btnDoShare"> 공유(모바일)</button> <button class="gb-modal-btn secondary" id="btnDoPdf"> ️ PDF저장</button> <button class="gb-modal-btn secondary" id="btnCopySummary"> 복사</button> </div> <div class="gb-hint" id="summaryHint"></div> </div> </div> <div class="gb-toast" id="toast"></div> <script src="https://tistory1.daumcdn.net/tistory/4330872/skin/images/Gb_js_v20.js"></script> <!-- <script src="https://tistory1.daumcdn.net/tistory/4330872/skin/images/Gb_js_v20.js"></script> --> </body> </html> 모두의계산기 모두의계산기 출력 출력계산기 최매슨생 https://0-1.kr/98 https://0-1.kr/98#entry98comment Sun, 1 Feb 2026 11:53:43 +0900 https://0-1.kr/97 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>모두의 폴더구조 생성기</title> <link href="https://fonts.googleapis.com/css2?family=Gmarket+Sans:wght@500;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> <style> /* ===================================================== 모두의 폴더구조 생성기 v8 - 밝은 테마 (라이트) - 티스토리 완벽 호환: window.FG 전역 등록 / no all:initial / no 100vh / no sticky - 모든 클래스 fg_ 접두사로 격리 ===================================================== */ #fg-app { --w: #ffffff; --g0: #f8f9fc; --g1: #f1f3f8; --g2: #e8ecf4; --g3: #dde2ed; --bd: #d0d7e6; --bd2: #c0c9db; --ac: #3b7ef8; --ac-l: #eef3ff; --ac-m: #c5d8ff; --ac2: #f08c00; --ac2-l:#fff4e2; --ac3: #2a9e5c; --ac3-l:#e8f9f0; --ac3-m:#a3e6c0; --red: #e53e3e; --pur: #7048e8; --pur-l:#f0ecff; --tx: #1a2035; --tx2: #4a5568; --tx3: #9aa3b4; --sh: 0 2px 12px rgba(60,80,140,.10); --sh2: 0 4px 24px rgba(60,80,140,.14); display: block; box-sizing: border-box; background: var(--g0); color: var(--tx); font-family: 'Noto Sans KR', -apple-system, sans-serif; font-size: 14px; border-radius: 14px; overflow: hidden; width: 100%; border: 1.5px solid var(--bd); box-shadow: var(--sh2); } #fg-app *, #fg-app *::before, #fg-app *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Noto Sans KR', -apple-system, sans-serif; } #fg-app button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; line-height: 1.4; } #fg-app input, #fg-app select, #fg-app textarea { font-family: inherit; } /* ── 설명서 배너 ── */ .fg_guide { background: linear-gradient(135deg, #eef3ff 0%, #f5f8ff 100%); border-bottom: 1.5px solid var(--ac-m); } .fg_guide_hdr { display: flex; align-items: center; gap: 14px; padding: 18px 24px; cursor: pointer; user-select: none; transition: background .15s; } .fg_guide_hdr:hover { background: rgba(59,126,248,.06); } .fg_guide_icon { font-size: 22px; flex-shrink: 0; } .fg_guide_info { flex: 1; min-width: 0; } .fg_guide_ttl { font-family: 'Gmarket Sans', sans-serif; font-size: 14px; font-weight: 700; color: var(--ac); display: block; margin-bottom: 3px; } .fg_guide_sub { font-size: 12px; color: var(--tx2); } .fg_guide_arr { font-size: 14px; color: var(--tx3); flex-shrink: 0; transition: transform .2s; background: var(--w); border: 1px solid var(--bd); border-radius: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } .fg_guide_arr.open { transform: rotate(180deg); } .fg_guide_body { display: none; padding: 0 24px 24px; border-top: 1px solid var(--ac-m); } .fg_guide_body.open { display: block; } .fg_guide_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; } .fg_gcard { background: var(--w); border: 1.5px solid var(--bd); border-radius: 10px; padding: 16px 17px; box-shadow: var(--sh); } .fg_gcard_ttl { font-size: 13px; font-weight: 700; color: var(--ac); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1.5px solid var(--g2); } .fg_gcard ul { list-style: none; display: flex; flex-direction: column; gap: 7px; } .fg_gcard li { font-size: 12px; color: var(--tx2); line-height: 1.6; padding-left: 16px; position: relative; } .fg_gcard li::before { content: '›'; position: absolute; left: 3px; color: var(--ac2); font-weight: 700; font-size: 14px; top: -1px; } .fg_gcard li b { color: var(--tx); font-weight: 600; } .fg_guide_tip { margin-top: 16px; padding: 14px 17px; background: var(--ac3-l); border: 1.5px solid var(--ac3-m); border-radius: 10px; font-size: 12px; color: var(--tx2); line-height: 2.0; } .fg_guide_tip b { color: var(--ac3); } .fg_guide_tip code { background: rgba(0,0,0,.06); padding: 2px 7px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 11px; color: var(--tx); } /* ── 툴바 ── */ .fg_toolbar { background: var(--w); border-bottom: 1.5px solid var(--bd); padding: 16px 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fg_proj_box { display: flex; align-items: center; gap: 12px; background: var(--g0); border: 1.5px solid var(--bd); border-radius: 10px; padding: 12px 18px; flex: 1; min-width: 200px; max-width: 320px; transition: border-color .15s, box-shadow .15s; } .fg_proj_box:focus-within { border-color: var(--ac); box-shadow: 0 0 0 3px rgba(59,126,248,.12); } .fg_proj_ico { font-size: 20px; flex-shrink: 0; } .fg_proj_inp { flex: 1; background: none; border: none; outline: none; font-family: 'Gmarket Sans', sans-serif; font-size: 15px; font-weight: 700; color: var(--tx); caret-color: var(--ac); min-width: 0; } .fg_proj_inp::placeholder { color: var(--tx3); } .fg_save_badge { font-size: 11px; color: var(--ac3); padding: 6px 13px; background: var(--ac3-l); border: 1.5px solid var(--ac3-m); border-radius: 20px; white-space: nowrap; flex-shrink: 0; font-weight: 600; } .fg_sep { width: 1.5px; height: 28px; background: var(--bd); flex-shrink: 0; } .fg_tbtn { padding: 9px 15px; border-radius: 9px; border: 1.5px solid var(--bd); background: var(--w); color: var(--tx2); font-size: 12px; font-weight: 500; transition: all .14s; white-space: nowrap; } .fg_tbtn:hover { background: var(--g1); border-color: var(--bd2); color: var(--tx); } .fg_tbtn.pur { background: var(--pur-l); border-color: var(--pur); color: var(--pur); font-weight: 600; } .fg_tbtn.pur:hover { background: var(--pur); color: #fff; } .fg_tbtn.ora { background: var(--ac2-l); border-color: var(--ac2); color: var(--ac2); font-weight: 600; } .fg_tbtn.ora:hover { background: var(--ac2); color: #fff; } .fg_tbtn.blu { background: var(--ac-l); border-color: var(--ac); color: var(--ac); font-weight: 600; } .fg_tbtn.blu:hover { background: var(--ac); color: #fff; } /* ── 템플릿 & 말머리 통합 액션바 ── */ .fg_actionbar { background: var(--w); border-bottom: 1.5px solid var(--bd); padding: 0 24px; display: flex; align-items: stretch; position: relative; gap: 0; } /* 템플릿 드롭다운 트리거 */ .fg_tmpl_trig { display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; transition: all .14s; border: none; background: none; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; white-space: nowrap; flex-shrink: 0; } .fg_tmpl_trig:hover { background: var(--g0); } .fg_tmpl_trig.on { border-bottom-color: var(--ac2); background: var(--ac2-l); } .fg_tmpl_icon { font-size: 18px; } .fg_tmpl_info { display: flex; flex-direction: column; align-items: flex-start; } .fg_tmpl_lbl { font-size: 10px; color: var(--tx3); font-weight: 600; letter-spacing: .5px; } .fg_tmpl_val { font-size: 13px; font-weight: 700; color: var(--ac2); } .fg_tmpl_arr { font-size: 10px; color: var(--tx3); margin-left: 2px; } .fg_ab_sep { width: 1.5px; background: var(--bd); margin: 10px 0; flex-shrink: 0; } /* 말머리 트리거 */ .fg_pfx_trig { display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; transition: all .14s; border: none; background: none; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; white-space: nowrap; flex-shrink: 0; } .fg_pfx_trig:hover { background: var(--g0); } .fg_pfx_trig.on { border-bottom-color: var(--ac); background: var(--ac-l); } .fg_pfx_icon { font-size: 16px; } .fg_pfx_info { display: flex; flex-direction: column; align-items: flex-start; } .fg_pfx_lbl { font-size: 10px; color: var(--tx3); font-weight: 600; letter-spacing: .5px; } .fg_pfx_val { font-family: 'Courier New', monospace; font-size: 14px; font-weight: 700; color: var(--ac); line-height: 1; } .fg_pfx_arr { font-size: 10px; color: var(--tx3); margin-left: 2px; } /* 직접입력 트리거 */ .fg_cust_trig { display: flex; align-items: center; gap: 8px; padding: 16px 16px; cursor: pointer; transition: all .14s; border: none; background: none; font-size: 12px; color: var(--tx2); font-weight: 500; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; white-space: nowrap; flex-shrink: 0; } .fg_cust_trig:hover { background: var(--g0); color: var(--tx); } .fg_cust_trig.on { border-bottom-color: var(--ac3); color: var(--ac3); background: var(--ac3-l); font-weight: 600; } /* ZIP 버튼 (액션바 오른쪽 끝) */ .fg_zip_inline { margin-left: auto; display: flex; align-items: center; padding: 0 0 0 12px; flex-shrink: 0; } .fg_zip_btn_sm { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 9px; background: linear-gradient(135deg, #1e9e52, #167a3e); border: 1.5px solid #28c462; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 2px 12px rgba(30,158,82,.3); transition: all .15s; white-space: nowrap; } .fg_zip_btn_sm:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(30,158,82,.4); } .fg_zip_btn_sm:active { transform: translateY(0); } .fg_zip_btn_sm:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } /* ── 드롭다운 공통 ── */ .fg_dd { position: absolute; top: calc(100% + 5px); background: var(--w); border: 1.5px solid var(--bd); border-radius: 14px; box-shadow: 0 12px 44px rgba(60,80,140,.18); z-index: 600; display: none; overflow: hidden; } .fg_dd.open { display: block; } .fg_dd_hdr { font-size: 11px; color: var(--tx2); font-weight: 700; padding: 14px 18px; background: var(--g1); border-bottom: 1px solid var(--bd); letter-spacing: .4px; } /* 템플릿 드롭다운 */ .fg_tmpl_dd { left: 24px; min-width: 520px; } .fg_tmpl_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 16px 18px; } .fg_tmpl_card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 9px; border: 1.5px solid var(--bd); background: var(--g0); cursor: pointer; transition: all .13s; text-align: left; } .fg_tmpl_card:hover { border-color: var(--ac2); background: var(--ac2-l); transform: translateY(-1px); box-shadow: var(--sh); } .fg_tmpl_card.cur { border-color: var(--ac2); background: var(--ac2-l); } .fg_tmpl_card_ico { font-size: 20px; flex-shrink: 0; } .fg_tmpl_card_name { font-size: 12px; font-weight: 600; color: var(--tx); } .fg_tmpl_card_sub { font-size: 10px; color: var(--tx3); margin-top: 1px; } .fg_tmpl_card.cur .fg_tmpl_card_name { color: var(--ac2); } /* 말머리 드롭다운 */ .fg_pfx_dd { left: 200px; min-width: 480px; } .fg_pfx_grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 16px 18px 14px; } .fg_pfx_card { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 8px; border-radius: 9px; border: 1.5px solid var(--bd); background: var(--g0); cursor: pointer; transition: all .13s; } .fg_pfx_card:hover { border-color: var(--ac); background: var(--ac-l); transform: translateY(-1px); } .fg_pfx_card.cur { border-color: var(--ac); background: var(--ac-l); } .fg_pfx_card_p { font-family: 'Courier New', monospace; font-size: 15px; font-weight: 700; color: var(--ac); line-height: 1; } .fg_pfx_card_n { font-size: 11px; color: var(--tx2); font-weight: 600; } .fg_pfx_card_e { font-size: 9px; color: var(--tx3); } .fg_pfx_card.cur .fg_pfx_card_n { color: var(--ac); } .fg_digit_row { display: flex; align-items: center; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--bd); } .fg_digit_lbl { font-size: 11px; color: var(--tx2); font-weight: 600; white-space: nowrap; } .fg_digit_wrap { display: flex; gap: 6px; } .fg_digit_opt { padding: 5px 13px; border-radius: 6px; border: 1.5px solid var(--bd); background: var(--g0); font-family: 'Courier New', monospace; font-size: 11px; color: var(--tx2); transition: all .13s; font-weight: 600; } .fg_digit_opt:hover { border-color: var(--ac); color: var(--ac); background: var(--ac-l); } .fg_digit_opt.cur { border-color: var(--ac); background: var(--ac-l); color: var(--ac); } /* 직접입력 드롭다운 */ .fg_cust_dd { left: 390px; width: 320px; } .fg_cust_body { padding: 14px 18px 18px; } .fg_cust_chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; } .fg_cust_chip { padding: 5px 13px; border-radius: 16px; border: 1.5px solid var(--bd); background: var(--g0); color: var(--tx2); font-size: 12px; font-weight: 600; transition: all .12s; } .fg_cust_chip:hover { border-color: var(--ac3); color: var(--ac3); background: var(--ac3-l); } .fg_cust_row { display: flex; gap: 8px; margin-bottom: 9px; } .fg_cust_input { flex: 1; padding: 10px 13px; border-radius: 8px; border: 1.5px solid var(--bd); background: var(--g0); color: var(--tx); font-size: 13px; outline: none; caret-color: var(--ac); transition: border-color .13s; } .fg_cust_input:focus { border-color: var(--ac); background: var(--w); box-shadow: 0 0 0 3px rgba(59,126,248,.10); } .fg_cust_input::placeholder { color: var(--tx3); } .fg_cust_apply { padding: 10px 14px; border-radius: 8px; background: var(--ac3); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; transition: all .13s; } .fg_cust_apply:hover { background: #228a4f; transform: translateY(-1px); } .fg_cust_res { font-size: 11px; color: var(--ac3); min-height: 16px; font-weight: 600; } /* ── 단축키 바 ── */ .fg_kb_bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 10px 24px; background: var(--g1); border-bottom: 1px solid var(--bd); } .fg_kb_item { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 16px; font-size: 11px; color: var(--tx2); } .fg_kb_key { padding: 2px 8px; border-radius: 4px; border: 1px solid var(--bd2); background: var(--w); font-family: 'Courier New', monospace; font-size: 10px; color: var(--tx); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .fg_kb_div { color: var(--bd2); font-size: 16px; margin: 0 4px; } .fg_kb_lpfx { color: var(--ac2); font-weight: 700; font-size: 14px; } /* ── 메인 레이아웃 ── */ .fg_main { display: flex; overflow: hidden; } /* ── 에디터 ── */ .fg_editor { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .fg_editor_body { flex: 1; overflow-y: auto; padding: 22px 24px 36px; background: var(--g0); } .fg_editor_body::-webkit-scrollbar { width: 6px; } .fg_editor_body::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 4px; } .fg_editor_body::-webkit-scrollbar-track { background: var(--g1); } /* ── 트리 ── */ .fg_tree { display: flex; flex-direction: column; gap: 2px; } .fg_fnode { display: flex; flex-direction: column; } .fg_frow { display: flex; align-items: center; border-radius: 9px; min-height: 42px; padding-right: 8px; transition: background .12s; } .fg_frow:hover { background: var(--w); box-shadow: var(--sh); } .fg_frow.sel { background: var(--ac-l); outline: 1.5px solid var(--ac-m); } .fg_fnode.dragging { opacity: .35; } .fg_drag_top::before { content:''; display:block; height:2px; background:var(--ac); border-radius:2px; margin:0 10px; } .fg_drag_bot::after { content:''; display:block; height:2px; background:var(--ac); border-radius:2px; margin:0 10px; } .fg_drag_in > .fg_frow { outline: 2px dashed var(--ac3) !important; border-radius:9px; } .fg_ctrl_drag .fg_frow { outline: 2px dashed var(--ac2) !important; } .fg_indent { flex-shrink: 0; display: flex; align-items: stretch; } .fg_iseg { width: 22px; display: flex; justify-content: center; position: relative; } .fg_iseg::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--g3); transform:translateX(-50%); } .fg_iseg.last::after { content:''; position:absolute; left:50%; top:50%; width:9px; height:1px; background:var(--g3); } .fg_tgl { width: 22px; height: 22px; flex-shrink: 0; border: none; background: none; color: var(--tx3); font-size: 10px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all .12s; margin-right: 2px; } .fg_tgl:hover { background: var(--g2); color: var(--tx); } .fg_tgl.leaf { opacity: 0; pointer-events: none; } .fg_handle { width: 18px; flex-shrink: 0; cursor: grab; color: var(--tx3); font-size: 13px; opacity: 0; transition: opacity .12s; display: flex; align-items: center; justify-content: center; user-select: none; margin-right: 4px; } .fg_frow:hover .fg_handle { opacity: 1; } .fg_ficon { font-size: 17px; margin-right: 7px; flex-shrink: 0; transition: transform .12s; line-height: 1; } .fg_frow:hover .fg_ficon { transform: scale(1.08); } .fg_badge { font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700; color: var(--ac); flex-shrink: 0; margin-right: 2px; min-width: 6px; line-height: 1; } .fg_fname { flex: 1; background: none; border: 1.5px solid transparent; outline: none; padding: 5px 8px; border-radius: 7px; cursor: pointer; color: var(--tx); font-size: 14px; font-weight: 500; caret-color: var(--ac); min-width: 0; transition: all .12s; } .fg_fname:focus { background: var(--w); border-color: var(--ac); cursor: text; box-shadow: 0 0 0 3px rgba(59,126,248,.12); } .fg_fname::placeholder { color: var(--tx3); } .fg_acts { display: flex; gap: 3px; margin-left: auto; opacity: 0; transition: opacity .12s; flex-shrink: 0; } .fg_frow:hover .fg_acts { opacity: 1; } .fg_ab { width: 28px; height: 28px; border-radius: 6px; border: none; background: none; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--tx3); transition: all .12s; } .fg_ab:hover { background: var(--g2); color: var(--tx); } .fg_ab.pfx:hover { background: var(--ac2-l); color: var(--ac2); } .fg_ab.add:hover { background: var(--ac-l); color: var(--ac); } .fg_ab.dup:hover { background: var(--g2); color: var(--pur); } .fg_ab.del:hover { background: #fff0f0; color: var(--red); } .fg_ab.pfx_on { color: var(--ac2) !important; opacity: 1 !important; } .fg_children { display: flex; flex-direction: column; gap: 2px; overflow: hidden; transition: max-height .2s ease; } .fg_children.closed { max-height: 0 !important; } .fg_add_root { display: flex; align-items: center; gap: 11px; padding: 14px 18px; margin-top: 16px; border: 2px dashed var(--bd); border-radius: 11px; color: var(--tx2); font-size: 13px; font-weight: 500; transition: all .14s; background: none; width: 100%; } .fg_add_root:hover { border-color: var(--ac); color: var(--ac); background: var(--ac-l); } /* ── 우측 패널 ── */ .fg_side { width: 240px; flex-shrink: 0; background: var(--w); border-left: 1.5px solid var(--bd); display: flex; flex-direction: column; overflow: hidden; } .fg_side_scroll { flex: 1; overflow-y: auto; padding: 20px 16px 28px; display: flex; flex-direction: column; gap: 22px; } .fg_side_scroll::-webkit-scrollbar { width: 5px; } .fg_side_scroll::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; } .fg_sec_hdr { font-size: 11px; color: var(--tx2); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1.5px solid var(--g2); margin-bottom: 12px; } /* 미리보기 */ .fg_prev_box { background: var(--g0); border: 1.5px solid var(--bd); border-radius: 9px; padding: 13px 14px; font-family: 'Courier New', monospace; font-size: 11px; line-height: 2.0; white-space: pre; overflow-x: auto; min-height: 120px; color: var(--tx2); } .fg_prev_box::-webkit-scrollbar { height: 4px; } .fg_prev_box::-webkit-scrollbar-thumb { background: var(--bd); border-radius:2px; } .fg_pc_root { color: var(--ac); font-weight: 700; } .fg_pc_br { color: var(--bd); } .fg_pc_folder { color: var(--ac2); font-weight: 600; } /* 통계 */ .fg_stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fg_stat { background: var(--g0); border: 1.5px solid var(--bd); border-radius: 9px; padding: 13px 12px; } .fg_stat_lbl { font-size: 10px; color: var(--tx3); font-weight: 600; display: block; margin-bottom: 5px; } .fg_stat_val { font-family: 'Gmarket Sans', sans-serif; font-size: 24px; font-weight: 700; display: block; } /* ZIP 강조 블록 */ .fg_zip_block { background: linear-gradient(135deg, var(--ac3-l), #f0fdf5); border: 2px solid var(--ac3-m); border-radius: 12px; padding: 18px 16px; } .fg_zip_block_lbl { font-size: 12px; font-weight: 700; color: var(--ac3); text-align: center; display: block; margin-bottom: 4px; letter-spacing: .4px; } .fg_zip_block_desc { font-size: 11px; color: var(--tx2); text-align: center; display: block; margin-bottom: 14px; line-height: 1.7; } .fg_zip_btn_main { width: 100%; padding: 14px 12px; background: linear-gradient(135deg, #1c9e50, #15773c); border: 2px solid #25ba5e; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 9px; transition: all .15s; letter-spacing: .3px; box-shadow: 0 3px 16px rgba(28,158,80,.28); } .fg_zip_btn_main:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(28,158,80,.38); } .fg_zip_btn_main:active { transform: translateY(0); } .fg_zip_btn_main:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .fg_exp_btns { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .fg_ebtn { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1.5px solid var(--bd); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 7px; transition: all .13s; } .fg_ebtn.e_txt { background: var(--ac-l); border-color: var(--ac-m); color: var(--ac); } .fg_ebtn.e_txt:hover { background: var(--ac); color: #fff; border-color: var(--ac); } .fg_ebtn.e_mail { background: var(--ac2-l); border-color: #ffd09e; color: var(--ac2); } .fg_ebtn.e_mail:hover { background: var(--ac2); color: #fff; border-color: var(--ac2); } .fg_ebtn.e_bk { background: var(--pur-l); border-color: #c5b5f5; color: var(--pur); } .fg_ebtn.e_bk:hover { background: var(--pur); color: #fff; border-color: var(--pur); } /* ── 하위 말머리 팝오버 ── */ .fg_lpop { position: fixed; z-index: 9800; background: var(--w); border: 1.5px solid var(--bd); border-radius: 12px; padding: 8px; box-shadow: 0 12px 40px rgba(60,80,140,.2); min-width: 170px; } .fg_lpop_hdr { font-size: 10px; color: var(--tx3); font-weight: 700; padding: 4px 10px 9px; border-bottom: 1px solid var(--bd); margin-bottom: 5px; letter-spacing: .5px; } .fg_lopt { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 7px; border: none; background: none; color: var(--tx2); font-size: 12px; cursor: pointer; text-align: left; width: 100%; transition: all .12s; white-space: nowrap; } .fg_lopt:hover { background: var(--g1); color: var(--tx); } .fg_lopt.on { background: var(--ac-l); color: var(--ac); font-weight: 700; } .fg_lopt_p { font-family: 'Courier New', monospace; font-size: 12px; color: var(--ac); min-width: 44px; font-weight: 700; } /* ── 모달 ── */ .fg_modal_bg { position: fixed; inset: 0; background: rgba(20,30,60,.55); z-index: 9000; display: flex; align-items: center; justify-content: center; } .fg_modal { background: var(--w); border: 1.5px solid var(--bd); border-radius: 16px; padding: 28px 30px; max-width: 460px; width: 93%; box-shadow: 0 24px 64px rgba(60,80,140,.22); } .fg_modal_t { font-family: 'Gmarket Sans', sans-serif; font-size: 17px; font-weight: 700; color: var(--tx); display: block; margin-bottom: 10px; } .fg_modal_b { font-size: 13px; color: var(--tx2); line-height: 1.8; } .fg_modal_row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; } .fg_mbtn { padding: 9px 20px; border-radius: 9px; border: 1.5px solid var(--bd); background: var(--g0); color: var(--tx2); font-size: 13px; font-weight: 500; transition: all .13s; } .fg_mbtn:hover { color: var(--tx); background: var(--g2); } .fg_mbtn.p { background: var(--ac); border-color: var(--ac); color: #fff; font-weight: 700; } .fg_mbtn.p:hover { background: #2a6fe0; } .fg_bk_ta { display: block; width: 100%; height: 130px; margin-top: 14px; background: var(--g0); border: 1.5px solid var(--bd); border-radius: 9px; padding: 12px; color: var(--tx); font-size: 11px; font-family: 'Courier New', monospace; outline: none; resize: vertical; caret-color: var(--ac); } .fg_bk_ta:focus { border-color: var(--ac); box-shadow: 0 0 0 3px rgba(59,126,248,.10); } /* ── 토스트 ── */ .fg_toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(16px); background: var(--tx); color: #fff; padding: 10px 22px; border-radius: 10px; font-size: 13px; font-weight: 500; z-index: 9999; opacity: 0; transition: all .22s; pointer-events: none; white-space: nowrap; box-shadow: 0 6px 24px rgba(0,0,0,.22); } .fg_toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } @keyframes fg_in { from{opacity:0;transform:translateX(-4px);} to{opacity:1;transform:translateX(0);} } .fg_fnode { animation: fg_in .14s ease; } </style> </head> <body> <div id="fg-app"> <!-- ██ 설명서 ██ --> <div class="fg_guide"> <div class="fg_guide_hdr" onclick="FG.toggleGuide()"> <span class="fg_guide_icon"> </span> <div class="fg_guide_info"> <span class="fg_guide_ttl"> 모두의 폴더구조 생성기 — 기능 안내 & 사용법</span> <span class="fg_guide_sub">클릭하면 전체 기능 설명과 티스토리 삽입 팁을 볼 수 있어요</span> </div> <span class="fg_guide_arr" id="g_arr">▾</span> </div> <div class="fg_guide_body" id="g_body"> <div class="fg_guide_grid"> <div class="fg_gcard"> <div class="fg_gcard_ttl"> 기본 사용법</div> <ul> <li>상단 <b>예시 템플릿 ▾</b> 버튼 → 11가지 업종 선택</li> <li>폴더명 클릭 후 바로 수정 (띄어쓰기 → <b>_</b> 자동 변환)</li> <li><b> +</b> 버튼으로 하위 폴더 추가, <b>✕</b>로 삭제</li> <li>하단 <b>최상위 폴더 추가</b> 버튼으로 루트 폴더 생성</li> <li>작업은 브라우저에 <b>자동 저장</b>돼요</li> </ul> </div> <div class="fg_gcard"> <div class="fg_gcard_ttl"> 말머리 기능</div> <ul> <li><b>말머리 형식 ▾</b> 버튼 → 8가지 형식 카드로 선택</li> <li>선택 즉시 <b>모든 폴더명 앞</b>에 자동 적용</li> <li>말머리는 <b>위치(순서) 기준</b>으로 번호 자동 매김</li> <li>드래그로 순서 바꾸면 번호가 <b>자동 재정렬</b></li> <li><b>¶ 버튼</b>으로 해당 폴더 하위만 다른 말머리 설정</li> <li><b>직접입력</b>: 가, A, ①, §, 一 등 자유 입력</li> </ul> </div> <div class="fg_gcard"> <div class="fg_gcard_ttl"> ZIP 다운로드 (핵심!)</div> <ul> <li>상단 <b>녹색 ZIP 버튼</b> 또는 우측 패널 ZIP 버튼 클릭</li> <li>압축 풀면 <b>실제 빈 폴더 구조</b>가 그대로 생성</li> <li>각 폴더 안에 <b>_README 파일</b>이 자동 포함</li> <li>ZIP 안에 <b>백업 JSON</b>도 자동으로 들어가요</li> </ul> </div> <div class="fg_gcard"> <div class="fg_gcard_ttl"> 드래그앤드롭</div> <ul> <li>폴더 왼쪽 <b>⠿ 핸들</b>을 드래그하면 위치 이동</li> <li><b>Ctrl 누른 채 드래그</b>하면 복사 (주황 테두리)</li> <li>드롭 위치: 위쪽=위에, 아래쪽=아래에, 중간=안쪽 삽입</li> <li>이동/복사 후 말머리 번호 자동 재정렬</li> </ul> </div> <div class="fg_gcard"> <div class="fg_gcard_ttl">⌨ 단축키</div> <ul> <li><b>F2</b> — 선택된 폴더 이름 편집</li> <li><b>Delete</b> — 선택된 폴더 삭제</li> <li><b>Ctrl + D</b> — 선택된 폴더 복제</li> <li>폴더 클릭 → 선택 → 단축키 사용</li> </ul> </div> <div class="fg_gcard"> <div class="fg_gcard_ttl"> 백업 / 복원</div> <ul> <li><b>백업/복원</b> 버튼 → JSON 코드 복사 또는 파일 저장</li> <li>JSON 붙여넣기 후 복원 → 그대로 복구</li> <li><b>메일 보내기</b> → 구조 + 복원 링크를 메일로 전송</li> <li>ZIP 파일 안에도 백업 JSON 자동 포함</li> </ul> </div> </div> <div class="fg_guide_tip"> <b> 티스토리 삽입</b> — 글쓰기 → 우측 상단 <code>&lt;/&gt;</code> HTML 편집 클릭 → 전체 코드 붙여넣기<br> <b> 전체화면 깨짐 방지</b> — 코드 전체를 <code>&lt;div style="overflow:hidden;max-width:100%"&gt;&lt;/div&gt;</code>로 한 번 더 감싸주세요 </div> </div> </div> <!-- ██ 툴바 ██ --> <div class="fg_toolbar"> <div class="fg_proj_box"> <span class="fg_proj_ico"> </span> <input class="fg_proj_inp" id="fg_pname" placeholder="프로젝트명" value="새_프로젝트" oninput="FG.onNameInput(this); FG.autoSave();"> </div> <span class="fg_save_badge" id="fg_save"> 자동저장됨</span> <div class="fg_sep"></div> <button class="fg_tbtn" onclick="FG.clearAll()"> 초기화</button> <button class="fg_tbtn" onclick="FG.copyTree()"> 복사</button> <button class="fg_tbtn pur" onclick="FG.showBackup()"> 백업/복원</button> <button class="fg_tbtn ora" onclick="FG.sendMail()">✉ 메일</button> <button class="fg_tbtn blu" onclick="FG.dlTxt()"> TXT</button> </div> <!-- ██ 액션바 (템플릿 + 말머리 + ZIP) ██ --> <div class="fg_actionbar" id="fg_actionbar"> <!-- 예시 템플릿 드롭다운 --> <button class="fg_tmpl_trig" id="fg_tmpl_trig" onclick="FG.toggleTmplDD()"> <span class="fg_tmpl_icon"> </span> <span class="fg_tmpl_info"> <span class="fg_tmpl_lbl">예시 템플릿</span> <span class="fg_tmpl_val" id="fg_tmpl_val">새_프로젝트</span> </span> <span class="fg_tmpl_arr" id="fg_tmpl_arr">▾</span> </button> <div class="fg_ab_sep"></div> <!-- 말머리 드롭다운 --> <button class="fg_pfx_trig" id="fg_pfx_trig" onclick="FG.togglePfxDD()"> <span class="fg_pfx_icon"> </span> <span class="fg_pfx_info"> <span class="fg_pfx_lbl">말머리 형식</span> <span class="fg_pfx_val" id="fg_pfx_val">[01]</span> </span> <span class="fg_pfx_arr" id="fg_pfx_arr">▾</span> </button> <div class="fg_ab_sep"></div> <!-- 직접입력 --> <button class="fg_cust_trig" id="fg_cust_trig" onclick="FG.toggleCustDD()"> ✏ 직접입력 </button> <!-- 드롭다운들 --> <div class="fg_dd" id="fg_tmpl_dd" style="left:24px;"> <div class="fg_dd_hdr"> 예시 템플릿 선택 — 업종에 맞는 기본 폴더 구조를 불러와요</div> <div class="fg_tmpl_grid" id="fg_tmpl_grid"></div> </div> <div class="fg_dd fg_pfx_dd" id="fg_pfx_dd"> <div class="fg_dd_hdr"> 말머리 형식 선택 — 선택 즉시 모든 폴더에 자동 적용됩니다</div> <div class="fg_pfx_grid" id="fg_pfx_grid"></div> <div class="fg_digit_row"> <span class="fg_digit_lbl">숫자 자릿수:</span> <div class="fg_digit_wrap" id="fg_digit_wrap"></div> </div> </div> <div class="fg_dd" id="fg_cust_dd" style="left:390px;"> <div class="fg_dd_hdr">✏ 커스텀 말머리 직접 입력</div> <div class="fg_cust_body"> <div class="fg_cust_chips" id="fg_cust_chips"></div> <div class="fg_cust_row"> <input class="fg_cust_input" id="fg_cust" placeholder="예: A, 가, ①, §, 一, 1 2 3"> <button class="fg_cust_apply" onclick="FG.applyCustom()">적용 ✓</button> </div> <div class="fg_cust_res" id="fg_cust_res"></div> </div> </div> <!-- ZIP 버튼 (오른쪽 끝) --> <div class="fg_zip_inline"> <button class="fg_zip_btn_sm" id="fg_zip_btn" onclick="FG.dlZip()"> ZIP 다운로드 </button> </div> </div> <!-- ██ 단축키 바 ██ --> <div class="fg_kb_bar"> <div class="fg_kb_item"><span class="fg_kb_key">F2</span><span>이름변경</span></div> <div class="fg_kb_item"><span class="fg_kb_key">Del</span><span>삭제</span></div> <div class="fg_kb_item"><span class="fg_kb_key">Ctrl+D</span><span>복제</span></div> <div class="fg_kb_item"><span class="fg_kb_key">Ctrl+드래그</span><span>복사</span></div> <span class="fg_kb_div">|</span> <div class="fg_kb_item"><span class="fg_kb_lpfx">¶</span><span>폴더별 말머리</span></div> </div> <!-- ██ 메인 ██ --> <div class="fg_main"> <!-- 에디터 --> <div class="fg_editor"> <div class="fg_editor_body"> <div class="fg_tree" id="fg_tree"></div> <button class="fg_add_root" onclick="FG.addRoot()"> <span style="font-size:18px;"> </span> <span>+ 최상위 폴더 추가</span> </button> </div> </div> <!-- 우측 패널 --> <div class="fg_side"> <div class="fg_side_scroll"> <div> <div class="fg_sec_hdr"> 구조 미리보기</div> <div class="fg_prev_box" id="fg_prev">...</div> </div> <div> <div class="fg_sec_hdr"> 통계</div> <div class="fg_stats"> <div class="fg_stat"> <span class="fg_stat_lbl"> 폴더 수</span> <span class="fg_stat_val" id="fg_sf" style="color:var(--ac2)">0</span> </div> <div class="fg_stat"> <span class="fg_stat_lbl"> 최대 깊이</span> <span class="fg_stat_val" id="fg_sd" style="color:var(--ac)">0</span> </div> </div> </div> <div> <div class="fg_sec_hdr"> 내보내기</div> <div class="fg_zip_block"> <span class="fg_zip_block_lbl">⬇ 폴더 구조 ZIP 다운로드</span> <span class="fg_zip_block_desc">압축 풀면 실제 빈 폴더가<br>그대로 생성됩니다</span> <button class="fg_zip_btn_main" id="fg_zip_btn2" onclick="FG.dlZip()"> <span style="font-size:18px;"> </span> ZIP 다운로드 </button> </div> <div class="fg_exp_btns"> <button class="fg_ebtn e_txt" onclick="FG.dlTxt()"> TXT 텍스트로 저장</button> <button class="fg_ebtn e_mail" onclick="FG.sendMail()">✉ 메일로 보내기</button> <button class="fg_ebtn e_bk" onclick="FG.showBackup()"> 백업 / 복원</button> </div> </div> </div> </div> </div> <div class="fg_toast" id="fg_toast"></div> <script> // ============================================== // window.FG — 티스토리 onclick 완전 호환 // no all:initial / no 100vh / no sticky // 모든 클래스 fg_ 접두사 격리 // ============================================== window.FG = (function() { 'use strict'; var uid = 1000, tree = [], currentTmpl = 0; var prefixMode = 'bracket_bare', digitCount = 2, customSeq = null; var selectedId = null, dragId = null, ctrlDrag = false; // ── 말머리 정의 ── var PFX_LIST = [ {m:'bracket_bare',p:'[01]', n:'대괄호', e:'[01]폴더'}, {m:'bracket', p:'[01]_',n:'대괄호_', e:'[01]_폴더'}, {m:'none', p:'없음', n:'번호없음', e:'폴더명'}, {m:'dot', p:'01.', n:'숫자점', e:'01.폴더'}, {m:'under', p:'01_', n:'숫자언더', e:'01_폴더'}, {m:'paren', p:'01)', n:'숫자괄호', e:'01)폴더'}, {m:'kor', p:'가.', n:'한글', e:'가.나.다.'}, {m:'roman', p:'I.', n:'로마자', e:'I.II.III.'}, ]; var DIGIT_LIST = [{d:1,e:'1'},{d:2,e:'01'},{d:3,e:'001'},{d:4,e:'0001'}]; var CUST_PRESETS = ['가','A','a','①','一','§','◆','★']; var LPFX_LIST = PFX_LIST.concat([{m:'__inherit__',p:' ',n:'전역 설정 따름',e:''}]); // ── 말머리 생성 ── function mkPfx(n, mode) { var s = String(n).padStart(digitCount, '0'); if (mode==='bracket_bare') return '['+s+']'; if (mode==='bracket') return '['+s+']_'; if (mode==='none') return ''; if (mode==='dot') return s+'.'; if (mode==='under') return s+'_'; if (mode==='paren') return s+')'; if (mode==='kor') { var K=['가','나','다','라','마','바','사','아','자','차','카','타','파','하']; return (K[n-1]||'('+n+')')+'.'; } if (mode==='roman'){ var R=['I','II','III','IV','V','VI','VII','VIII','IX','X','XI','XII','XIII','XIV','XV','XVI','XVII','XVIII','XIX','XX']; return (R[n-1]||'('+n+')')+'.'; } if (mode==='custom'&&customSeq) return customSeq[n-1]||'('+n+')'; return ''; } function getPfxPreview(mode) { if (mode==='custom') return customSeq?customSeq[0]:'?'; var o = PFX_LIST.find(function(p){return p.m===mode;}); return o?o.p:mode; } function stripPfx(name) { return (name||'').replace(/^\[\d+\]_?/,'').replace(/^\d+\._?/,'').replace(/^\d+__?/,'') .replace(/^\d+\)_?/,'').replace(/^\d+_/,'') .replace(/^[가나다라마바사아자차카타파하]\._?/,'') .replace(/^(?:I{1,3}|IV|VI{0,3}|IX|X{1,2}I{0,3}|XIV|XV|XVI{0,3}|XIX|XX)\._?/,'') .replace(/^_/,''); } function toSafe(s){ return (s||'').replace(/\s+/g,'_'); } // ── 말머리 적용 ── function applyPfx(nodes, parent) { var mode = (parent&&parent._lpfx) ? parent._lpfx : prefixMode; var fi=0; nodes.forEach(function(node){ if(node.type!=='folder') return; fi++; var raw = node._raw||stripPfx(node.name)||node.name; node._raw = raw; node.name = mkPfx(fi,mode)+raw; if(node.children&&node.children.length) applyPfx(node.children,node); }); } function applyAll(){ applyPfx(tree,null); } // ── 커스텀 파서 ── function parseCustom(raw) { var input=raw.trim(); if(!input) return null; var parts=input.split(/[\s,\/\n]+/).filter(Boolean); if(parts.length===1){ var ch=parts[0]; if(/^\d+$/.test(ch)) return {type:'num',note:'숫자 시퀀스'}; var korA=['가','나','다','라','마','바','사','아','자','차','카','타','파','하']; if(korA.includes(ch)){var si=korA.indexOf(ch);return{type:'arr',arr:korA.slice(si).map(function(v){return v+'.'}),note:'한글 '+ch+'부터'};} if(/^[A-Z]$/.test(ch)){var si=ch.charCodeAt(0)-65;return{type:'arr',arr:'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.slice(si).split('').map(function(v){return v+'_'}),note:'알파벳 대 '+ch+'부터'};} if(/^[a-z]$/.test(ch)){var si=ch.charCodeAt(0)-97;return{type:'arr',arr:'abcdefghijklmnopqrstuvwxyz'.slice(si).split('').map(function(v){return v+'_'}),note:'알파벳 소 '+ch+'부터'};} var circA=['①','②','③','④','⑤','⑥','⑦','⑧','⑨','⑩','⑪','⑫','⑬','⑭','⑮','⑯','⑰','⑱','⑲','⑳']; if(circA.includes(ch)){var si=circA.indexOf(ch);return{type:'arr',arr:circA.slice(si),note:'원문자 '+ch+'부터'};} var hanjA=['一','二','三','四','五','六','七','八','九','十']; if(hanjA.includes(ch)){var si=hanjA.indexOf(ch);return{type:'arr',arr:hanjA.slice(si),note:'한자 '+ch+'부터'};} return{type:'prefix',prefix:ch,note:'"'+ch+'" + 번호'}; } var isNum=parts.every(function(p){return /^\d+$/.test(p);}); if(isNum){var nums=parts.map(Number);var ok=nums.every(function(v,i){return i===0||v===nums[i-1]+1;});if(!ok)return{error:'숫자가 연속되지 않아요 ('+nums.join(', ')+')'}; return{type:'arr',arr:parts.map(function(v){return v+'_'}),note:'숫자 '+parts[0]+'~'};} return{type:'arr',arr:parts,note:'직접 시퀀스 ('+parts.length+'개)'}; } function applyCustom(){ var raw=document.getElementById('fg_cust').value.trim(); if(!raw){toast('⚠ 입력값이 없어요');return;} var r=parseCustom(raw); if(!r){showAlert('⚠ 인식 불가','유효한 순서 패턴을 입력해주세요.\n예) 가, A, ①, 1 2 3');return;} if(r.error){showAlert('⚠ 순서 오류',r.error);return;} if(r.type==='num'){prefixMode='bracket_bare';} else if(r.type==='prefix'){customSeq=Array.from({length:50},function(_,i){return r.prefix+String(i+1).padStart(digitCount,'0')+'_';});prefixMode='custom';} else{customSeq=r.arr;prefixMode='custom';} var res=document.getElementById('fg_cust_res'); if(res) res.textContent='✓ '+r.note+' → '+(customSeq?customSeq.slice(0,4).join(' / '):''); applyAll();renderTree();autoSave();updatePfxBtn(); toast('✅ 커스텀 말머리 적용! '+r.note); } // ── 드롭다운 ── function buildTmplGrid(){ var g=document.getElementById('fg_tmpl_grid'); if(!g) return; g.innerHTML=''; TMPLS.forEach(function(t,i){ var btn=document.createElement('button'); btn.className='fg_tmpl_card'+(i===currentTmpl?' cur':''); btn.innerHTML='<span class="fg_tmpl_card_ico">'+t.icon+'</span><div><div class="fg_tmpl_card_name">'+t.name+'</div></div>'; btn.onclick=function(){loadTmpl(i);closeDDs();}; g.appendChild(btn); }); } function buildPfxGrid(){ var g=document.getElementById('fg_pfx_grid'); if(!g) return; g.innerHTML=''; PFX_LIST.forEach(function(opt){ var btn=document.createElement('button'); btn.className='fg_pfx_card'+(prefixMode===opt.m?' cur':''); btn.innerHTML='<span class="fg_pfx_card_p">'+opt.p+'</span><span class="fg_pfx_card_n">'+opt.n+'</span><span class="fg_pfx_card_e">'+opt.e+'</span>'; btn.onclick=function(){prefixMode=opt.m;customSeq=null;applyAll();renderTree();autoSave();buildPfxGrid();updatePfxBtn();closeDDs();}; g.appendChild(btn); }); var dw=document.getElementById('fg_digit_wrap'); if(!dw) return; dw.innerHTML=''; DIGIT_LIST.forEach(function(opt){ var btn=document.createElement('button'); btn.className='fg_digit_opt'+(digitCount===opt.d?' cur':''); btn.textContent=opt.e; btn.onclick=function(){digitCount=opt.d;applyAll();renderTree();autoSave();buildPfxGrid();}; dw.appendChild(btn); }); } function buildCustChips(){ var c=document.getElementById('fg_cust_chips'); if(!c) return; c.innerHTML=''; CUST_PRESETS.forEach(function(ch){ var btn=document.createElement('button'); btn.className='fg_cust_chip';btn.textContent=ch; btn.onclick=function(){document.getElementById('fg_cust').value=ch;applyCustom();}; c.appendChild(btn); }); } function updatePfxBtn(){ var v=document.getElementById('fg_pfx_val'); if(v) v.textContent=getPfxPreview(prefixMode); } function updateTmplBtn(){ var v=document.getElementById('fg_tmpl_val'); if(v&&TMPLS[currentTmpl]) v.textContent=TMPLS[currentTmpl].name; } var _tmplOpen=false,_pfxOpen=false,_custOpen=false; function closeDDs(){ _tmplOpen=false;_pfxOpen=false;_custOpen=false; ['fg_tmpl_dd','fg_pfx_dd','fg_cust_dd'].forEach(function(id){var el=document.getElementById(id);if(el)el.classList.remove('open');}); ['fg_tmpl_trig','fg_pfx_trig','fg_cust_trig'].forEach(function(id){var el=document.getElementById(id);if(el)el.classList.remove('on');}); var arr=document.getElementById('fg_tmpl_arr');if(arr)arr.textContent='▾'; var arr2=document.getElementById('fg_pfx_arr');if(arr2)arr2.textContent='▾'; } function toggleTmplDD(){ var was=_tmplOpen; closeDDs(); if(!was){_tmplOpen=true;var dd=document.getElementById('fg_tmpl_dd');if(dd)dd.classList.add('open');var t=document.getElementById('fg_tmpl_trig');if(t)t.classList.add('on');var a=document.getElementById('fg_tmpl_arr');if(a)a.textContent='▴';buildTmplGrid();} } function togglePfxDD(){ var was=_pfxOpen; closeDDs(); if(!was){_pfxOpen=true;var dd=document.getElementById('fg_pfx_dd');if(dd)dd.classList.add('open');var t=document.getElementById('fg_pfx_trig');if(t)t.classList.add('on');var a=document.getElementById('fg_pfx_arr');if(a)a.textContent='▴';buildPfxGrid();} } function toggleCustDD(){ var was=_custOpen; closeDDs(); if(!was){_custOpen=true;var dd=document.getElementById('fg_cust_dd');if(dd)dd.classList.add('open');var t=document.getElementById('fg_cust_trig');if(t)t.classList.add('on');buildCustChips();} } function toggleGuide(){ var b=document.getElementById('g_body'),a=document.getElementById('g_arr');if(!b)return; var open=b.classList.toggle('open');if(a){a.classList.toggle('open',open);a.textContent=open?'▴':'▾';} } document.addEventListener('click',function(e){ var bar=document.getElementById('fg_actionbar'); if(bar&&!bar.contains(e.target)) closeDDs(); }); // ── 템플릿 데이터 ── function mkF(n,c){return{id:uid++,type:'folder',name:n,_raw:n,open:false,children:c||[]};} function mkRm(d){return{id:uid++,type:'file',name:'_README_'+toSafe(d)+'.txt'};} var TMPLS=[ {icon:'✨',name:'새_프로젝트',proj:'새_프로젝트',b:function(){return[mkF('자료',[mkRm('자료')]),mkF('진행',[mkRm('진행')]),mkF('완료',[mkRm('완료')])];}}, {icon:' ',name:'스타트업',proj:'스타트업_창업',b:function(){return[ mkF('경영_전략',[mkRm('경영전략'),mkF('창업_계획서',[]),mkF('비즈니스_모델',[]),mkF('IR_피칭_자료',[]),mkF('비전_미션_밸류',[])]), mkF('조직_인사',[mkRm('조직인사'),mkF('조직도',[]),mkF('업무분장',[]),mkF('채용_공고',[]),mkF('출결_근태',[]),mkF('교육_훈련',[])]), mkF('재무_회계',[mkRm('재무회계'),mkF('예산_계획',[]),mkF('정산_지출',[]),mkF('세금_세무',[]),mkF('투자_유치',[])]), mkF('법무_계약',[mkRm('법무계약'),mkF('사업자_등록',[]),mkF('계약서',[]),mkF('지식재산권',[]),mkF('NDA_비밀유지',[])]), mkF('결재_문서',[mkRm('결재문서'),mkF('품의서',[]),mkF('기안서',[]),mkF('보고서',[])]), mkF('마케팅_홍보',[mkRm('마케팅'),mkF('브랜드_아이덴티티',[]),mkF('SNS_콘텐츠',[]),mkF('보도자료',[])]), mkF('제품_서비스',[mkRm('제품'),mkF('기획서',[]),mkF('개발_일정',[]),mkF('테스트_QA',[])]), ];}}, {icon:' ',name:'크리에이터',proj:'크리에이터_채널',b:function(){return[ mkF('콘텐츠_기획',[mkRm('기획'),mkF('아이디어_뱅크',[]),mkF('촬영_스크립트',[]),mkF('콘텐츠_캘린더',[])]), mkF('촬영_제작',[mkRm('촬영'),mkF('원본_영상',[]),mkF('음성_녹음',[]),mkF('이미지_사진',[]),mkF('자막_스크립트',[])]), mkF('편집_후반',[mkRm('편집'),mkF('편집_프로젝트',[]),mkF('썸네일_디자인',[]),mkF('음악_효과음',[]),mkF('최종_완성본',[])]), mkF('채널_플랫폼',[mkRm('채널'),mkF('유튜브',[]),mkF('인스타그램',[]),mkF('틱톡',[])]), mkF('수익_재무',[mkRm('수익'),mkF('광고_수익',[]),mkF('협찬_스폰서',[]),mkF('세금_정산',[])]), mkF('협업_업무분장',[mkRm('협업'),mkF('팀원_역할',[]),mkF('외주_계약',[]),mkF('미팅_회의록',[])]), mkF('분석_성과',[mkRm('성과'),mkF('조회수_통계',[]),mkF('댓글_피드백',[]),mkF('경쟁사_분석',[])]), ];}}, {icon:' ',name:'중소기업_제조업',proj:'중소기업_제조업',b:function(){return[ mkF('경영_기획',[mkRm('경영'),mkF('경영계획서',[]),mkF('이사회_회의록',[]),mkF('목표_KPI',[])]), mkF('인사_총무',[mkRm('인사'),mkF('근태_출결',[]),mkF('휴가_관리',[]),mkF('출장_관리',[]),mkF('급여_대장',[]),mkF('채용_관리',[]),mkF('교육_훈련',[]),mkF('퇴직_관리',[])]), mkF('생산_제조',[mkRm('생산'),mkF('생산계획',[]),mkF('공정관리',[]),mkF('품질관리_QC',[]),mkF('설비_유지보수',[]),mkF('원자재_입고',[])]), mkF('구매_자재',[mkRm('구매'),mkF('구매_발주',[]),mkF('거래처_관리',[]),mkF('재고_관리',[])]), mkF('영업_수주',[mkRm('영업'),mkF('견적서',[]),mkF('수주_계약',[]),mkF('납품_관리',[]),mkF('고객사_관리',[])]), mkF('재무_회계',[mkRm('재무'),mkF('예산_편성',[]),mkF('결산',[]),mkF('세무_신고',[]),mkF('지출_결의',[])]), mkF('결재_문서',[mkRm('결재'),mkF('품의서',[]),mkF('기안서',[]),mkF('보고서',[]),mkF('공문서',[])]), mkF('공유_자료실',[mkRm('자료실'),mkF('사규_규정',[]),mkF('양식_서식',[]),mkF('안전_관리',[])]), ];}}, {icon:' ',name:'중소기업_IT디자인',proj:'중소기업_IT디자인',b:function(){return[ mkF('경영_기획',[mkRm('경영'),mkF('사업계획서',[]),mkF('목표_OKR',[])]), mkF('인사_총무',[mkRm('인사'),mkF('근태_출결',[]),mkF('휴가_관리',[]),mkF('출장_관리',[]),mkF('급여_대장',[]),mkF('채용_관리',[])]), mkF('프로젝트_관리',[mkRm('프로젝트'),mkF('진행중_프로젝트',[]),mkF('완료_프로젝트',[]),mkF('제안_영업',[])]), mkF('개발',[mkRm('개발'),mkF('요구사항_분석',[]),mkF('설계_문서',[]),mkF('소스코드_관리',[]),mkF('테스트_QA',[]),mkF('배포_운영',[])]), mkF('디자인',[mkRm('디자인'),mkF('브랜드_가이드',[]),mkF('UI_UX',[]),mkF('시안_히스토리',[]),mkF('최종_에셋',[])]), mkF('영업_계약',[mkRm('영업'),mkF('견적서',[]),mkF('계약서',[]),mkF('고객사_관리',[])]), mkF('재무_회계',[mkRm('재무'),mkF('예산',[]),mkF('정산_지출',[]),mkF('세무',[])]), mkF('결재_문서',[mkRm('결재'),mkF('품의서',[]),mkF('기안서',[]),mkF('보고서',[])]), mkF('공유_자료실',[mkRm('자료실'),mkF('사규_규정',[]),mkF('양식_서식',[]),mkF('기술_문서',[])]), ];}}, {icon:' ',name:'서비스업',proj:'서비스업_운영',b:function(){return[ mkF('경영_기획',[mkRm('경영'),mkF('사업계획',[]),mkF('목표_KPI',[])]), mkF('인사_총무',[mkRm('인사'),mkF('근태_출결',[]),mkF('휴가_관리',[]),mkF('출장_관리',[]),mkF('급여_대장',[]),mkF('채용',[])]), mkF('고객_관리',[mkRm('고객'),mkF('고객DB',[]),mkF('상담_이력',[]),mkF('VOC_불만',[]),mkF('만족도_조사',[])]), mkF('서비스_운영',[mkRm('운영'),mkF('매뉴얼',[]),mkF('스케줄_예약',[]),mkF('현장_관리',[])]), mkF('영업_마케팅',[mkRm('영업'),mkF('견적서',[]),mkF('제안서',[]),mkF('계약서',[]),mkF('홍보_자료',[])]), mkF('재무_회계',[mkRm('재무'),mkF('매출_관리',[]),mkF('지출_결의',[]),mkF('세무',[])]), mkF('결재_문서',[mkRm('결재'),mkF('품의서',[]),mkF('기안서',[]),mkF('보고서',[])]), ];}}, {icon:' ',name:'부동산_건설',proj:'부동산_건설',b:function(){return[ mkF('인허가_법무',[mkRm('인허가'),mkF('건축허가',[]),mkF('관련_법규',[]),mkF('계약_법무',[])]), mkF('설계',[mkRm('설계'),mkF('기본설계',[]),mkF('실시설계',[]),mkF('도면',[])]), mkF('시공_현장',[mkRm('시공'),mkF('공정표',[]),mkF('현장_일지',[]),mkF('검사_서류',[]),mkF('안전_관리',[])]), mkF('구매_자재',[mkRm('구매'),mkF('발주서',[]),mkF('거래처',[]),mkF('재고',[])]), mkF('재무_원가',[mkRm('재무'),mkF('예산',[]),mkF('원가_분석',[]),mkF('정산',[])]), mkF('준공_사후',[mkRm('준공'),mkF('준공도서',[]),mkF('하자_관리',[]),mkF('유지_보수',[])]), ];}}, {icon:' ',name:'교육기관',proj:'교육기관_운영',b:function(){return[ mkF('교무_행정',[mkRm('교무'),mkF('학사일정',[]),mkF('수업계획서',[]),mkF('성적_관리',[])]), mkF('학생_관리',[mkRm('학생'),mkF('출결_관리',[]),mkF('상담_이력',[]),mkF('장학_관리',[])]), mkF('강의_자료',[mkRm('강의'),mkF('교안',[]),mkF('시험_문제',[]),mkF('과제',[])]), mkF('인사_총무',[mkRm('인사'),mkF('근태_출결',[]),mkF('휴가',[]),mkF('급여',[])]), mkF('재무_회계',[mkRm('재무'),mkF('예산',[]),mkF('수납_관리',[]),mkF('지출_결의',[])]), ];}}, {icon:' ',name:'병의원_의료',proj:'병의원_운영',b:function(){return[ mkF('진료_임상',[mkRm('진료'),mkF('진료_프로토콜',[]),mkF('처방_기록',[]),mkF('검사_결과',[])]), mkF('원무_행정',[mkRm('원무'),mkF('환자_접수',[]),mkF('보험_청구',[]),mkF('수납_관리',[])]), mkF('인사_총무',[mkRm('인사'),mkF('근태_출결',[]),mkF('휴가',[]),mkF('당직_스케줄',[]),mkF('급여',[])]), mkF('구매_재고',[mkRm('구매'),mkF('의약품_관리',[]),mkF('의료소모품',[]),mkF('발주서',[])]), mkF('재무_회계',[mkRm('재무'),mkF('매출_현황',[]),mkF('지출_결의',[]),mkF('세무',[])]), ];}}, {icon:' ',name:'유통_물류',proj:'유통_물류_운영',b:function(){return[ mkF('수주_영업',[mkRm('수주'),mkF('견적서',[]),mkF('주문서',[]),mkF('고객사_관리',[])]), mkF('구매_조달',[mkRm('구매'),mkF('발주서',[]),mkF('거래처_관리',[]),mkF('입고_관리',[])]), mkF('창고_재고',[mkRm('창고'),mkF('재고현황',[]),mkF('입출고_대장',[]),mkF('위치_관리',[])]), mkF('배송_물류',[mkRm('배송'),mkF('배송계획',[]),mkF('배차_관리',[]),mkF('배송완료_확인',[])]), mkF('인사_총무',[mkRm('인사'),mkF('근태',[]),mkF('휴가',[]),mkF('급여',[])]), mkF('재무_회계',[mkRm('재무'),mkF('매출_현황',[]),mkF('지출_결의',[]),mkF('세무',[])]), ];}}, {icon:' ‍ ',name:'프리랜서',proj:'프리랜서_업무',b:function(){return[ mkF('클라이언트_관리',[mkRm('클라이언트'),mkF('클라이언트_목록',[]),mkF('미팅_회의록',[]),mkF('요구사항',[])]), mkF('프로젝트',[mkRm('프로젝트'),mkF('진행중',[]),mkF('완료',[]),mkF('대기',[])]), mkF('계약_견적',[mkRm('계약'),mkF('견적서',[]),mkF('계약서',[]),mkF('납품확인서',[])]), mkF('포트폴리오',[mkRm('포트폴리오'),mkF('작업물',[]),mkF('SNS_링크',[])]), mkF('재무_세무',[mkRm('재무'),mkF('수입_현황',[]),mkF('지출_내역',[]),mkF('세금계산서',[]),mkF('종합소득세',[])]), ];}}, ]; function loadTmpl(idx){ currentTmpl=idx; tree=TMPLS[idx].b(); applyAll(); document.getElementById('fg_pname').value=TMPLS[idx].proj; updateTmplBtn(); renderTree(); autoSave(); } // ── 렌더 ── function renderTree(){ var el=document.getElementById('fg_tree'); el.innerHTML=''; tree.forEach(function(n){var e=mkEl(n,0);if(e)el.appendChild(e);}); renderPrev(); } function mkEl(node,depth){ if(node.type==='file') return null; var wrap=document.createElement('div'); wrap.className='fg_fnode'; wrap.dataset.id=node.id; wrap.draggable=true; setupDrag(wrap,node.id); var row=document.createElement('div'); row.className='fg_frow'+(selectedId===node.id?' sel':''); row.onclick=function(e){if(!e.target.closest('input')&&!e.target.closest('button'))selectNode(node.id);}; row.appendChild(mkIndent(depth)); var h=document.createElement('span');h.className='fg_handle';h.textContent='⠿';h.title='드래그(이동)/Ctrl+드래그(복사)';row.appendChild(h); var hasSub=node.children.some(function(c){return c.type==='folder';}); var tgl=document.createElement('button');tgl.className='fg_tgl'+(hasSub?'':' leaf'); tgl.textContent=node.open?'▾':'▸';tgl.onclick=function(e){e.stopPropagation();toggleNode(node.id);};row.appendChild(tgl); var ico=document.createElement('span');ico.className='fg_ficon';ico.textContent=node.open?' ':' ';row.appendChild(ico); var badge=document.createElement('span');badge.className='fg_badge'; badge.textContent=node.name.replace(node._raw||'','');row.appendChild(badge); var inp=document.createElement('input');inp.className='fg_fname'; inp.value=node._raw||stripPfx(node.name);inp.placeholder='폴더명'; inp.onclick=function(e){e.stopPropagation();}; inp.oninput=function(){ var safe=toSafe(inp.value);if(safe!==inp.value)inp.value=safe; node._raw=safe;applyAll();inp.value=node._raw; badge.textContent=node.name.replace(node._raw,''); renderPrev();autoSave(); }; inp.onkeydown=function(e){if(e.key==='Enter')inp.blur();if(e.key==='F2'){e.preventDefault();inp.focus();inp.select();}}; row.appendChild(inp); var acts=document.createElement('div');acts.className='fg_acts'; function mkAb(cls,txt,title,cb){var b=document.createElement('button');b.className='fg_ab '+cls;b.textContent=txt;b.title=title;b.onclick=function(e){e.stopPropagation();cb();};acts.appendChild(b);} mkAb('pfx'+(node._lpfx?' pfx_on':''),'¶','하위 말머리 개별 설정',function(){showLPfx(node.id,acts.querySelector('.fg_ab.pfx'));}); mkAb('add',' +','하위폴더 추가',function(){addChild(node.id);}); mkAb('dup','⧉','복제 (Ctrl+D)',function(){dupNode(node.id);}); mkAb('del','✕','삭제 (Del)',function(){delNode(node.id);}); row.appendChild(acts);wrap.appendChild(row); var ch=document.createElement('div');ch.className='fg_children'+(node.open?'':' closed'); if(node.open)ch.style.maxHeight='9999px'; node.children.forEach(function(c){var e=mkEl(c,depth+1);if(e)ch.appendChild(e);}); wrap.appendChild(ch); return wrap; } function mkIndent(d){ var w=document.createElement('div');w.className='fg_indent'; for(var i=0;i<d;i++){var s=document.createElement('div');s.className='fg_iseg'+(i===d-1?' last':'');w.appendChild(s);} return w; } // ── 드래그앤드롭 ── function setupDrag(el,nodeId){ el.addEventListener('dragstart',function(e){ dragId=nodeId;ctrlDrag=e.ctrlKey||e.metaKey; el.classList.add('dragging');if(ctrlDrag)el.classList.add('fg_ctrl_drag'); e.dataTransfer.effectAllowed=ctrlDrag?'copy':'move'; e.dataTransfer.setData('text/plain',String(nodeId));e.stopPropagation(); }); el.addEventListener('dragend',function(){ el.classList.remove('dragging','fg_ctrl_drag'); document.querySelectorAll('.fg_drag_top,.fg_drag_bot,.fg_drag_in').forEach(function(x){x.classList.remove('fg_drag_top','fg_drag_bot','fg_drag_in');}); dragId=null;ctrlDrag=false; }); el.addEventListener('dragover',function(e){ if(!dragId||dragId===nodeId)return; e.preventDefault();e.stopPropagation(); var rect=el.getBoundingClientRect(),y=e.clientY-rect.top,h=rect.height; document.querySelectorAll('.fg_drag_top,.fg_drag_bot,.fg_drag_in').forEach(function(x){x.classList.remove('fg_drag_top','fg_drag_bot','fg_drag_in');}); if(y<h*.25)el.classList.add('fg_drag_top'); else if(y>h*.75)el.classList.add('fg_drag_bot'); else el.classList.add('fg_drag_in'); }); el.addEventListener('dragleave',function(){el.classList.remove('fg_drag_top','fg_drag_bot','fg_drag_in');}); el.addEventListener('drop',function(e){ e.preventDefault();e.stopPropagation(); if(!dragId||dragId===nodeId)return; var isCopy=e.ctrlKey||e.metaKey; var rect=el.getBoundingClientRect(),y=e.clientY-rect.top,h=rect.height; var pos=y<h*.25?'before':y>h*.75?'after':'inside'; moveNode(dragId,nodeId,pos,isCopy); el.classList.remove('fg_drag_top','fg_drag_bot','fg_drag_in'); }); } function moveNode(srcId,tgtId,pos,copy){ var srcNode=null; function ext(nodes){for(var i=0;i<nodes.length;i++){if(nodes[i].id===srcId){srcNode=nodes.splice(i,1)[0];return true;}if(nodes[i].type==='folder'&&ext(nodes[i].children))return true;}return false;} if(copy){var r=findNode(tree,srcId);if(!r)return;srcNode=JSON.parse(JSON.stringify(r.node));function reId(n){n.id=uid++;if(n.children)n.children.forEach(reId);}reId(srcNode);srcNode._raw=(srcNode._raw||'')+'_복사';} else ext(tree); if(!srcNode)return; function ins(nodes){for(var i=0;i<nodes.length;i++){if(nodes[i].id===tgtId){if(pos==='before'){nodes.splice(i,0,srcNode);return true;}if(pos==='after'){nodes.splice(i+1,0,srcNode);return true;}if(pos==='inside'&&nodes[i].type==='folder'){nodes[i].children.unshift(srcNode);nodes[i].open=true;return true;}}if(nodes[i].type==='folder'&&ins(nodes[i].children))return true;}return false;} if(!ins(tree))tree.push(srcNode); applyAll();renderTree();autoSave();toast(copy?' 복사 완료!':' 이동 완료!'); } // ── 선택 & 키보드 ── function selectNode(id){selectedId=id;renderTree();} document.addEventListener('keydown',function(e){ if(!selectedId)return; if(e.target.tagName==='INPUT'||e.target.tagName==='TEXTAREA'){if(e.key==='F2'){var el=document.querySelector('[data-id="'+selectedId+'"] input');if(el){e.preventDefault();el.focus();el.select();}}return;} if(e.key==='F2'){var el=document.querySelector('[data-id="'+selectedId+'"] input');if(el){e.preventDefault();el.focus();el.select();}} if(e.key==='Delete'){e.preventDefault();delNode(selectedId);} if((e.ctrlKey||e.metaKey)&&e.key==='d'){e.preventDefault();dupNode(selectedId);} }); // ── 트리 조작 ── function findNode(nodes,id){for(var i=0;i<nodes.length;i++){if(nodes[i].id===id)return{node:nodes[i],siblings:nodes,idx:i};if(nodes[i].type==='folder'){var r=findNode(nodes[i].children,id);if(r)return r;}}return null;} function toggleNode(id){var r=findNode(tree,id);if(r){r.node.open=!r.node.open;renderTree();}} function addChild(pId){ var r=findNode(tree,pId);if(!r)return; var raw='새폴더';var n={id:uid++,type:'folder',name:raw,_raw:raw,open:true,children:[mkRm(raw)]}; r.node.open=true;r.node.children.push(n);applyAll();renderTree();autoSave(); setTimeout(function(){var el=document.querySelector('[data-id="'+n.id+'"] input');if(el){el.focus();el.select();}},60); } function addRoot(){ var raw='새폴더';var n={id:uid++,type:'folder',name:raw,_raw:raw,open:true,children:[mkRm(raw)]}; tree.push(n);applyAll();renderTree();autoSave(); setTimeout(function(){var el=document.querySelector('[data-id="'+n.id+'"] input');if(el){el.focus();el.select();}},60); } function delNode(id){ function del(nodes){var i=nodes.findIndex(function(n){return n.id===id;});if(i!==-1){nodes.splice(i,1);return true;}for(var i2=0;i2<nodes.length;i2++)if(nodes[i2].type==='folder'&&del(nodes[i2].children))return true;return false;} del(tree);if(selectedId===id)selectedId=null;applyAll();renderTree();autoSave(); } function dupNode(id){ var r=findNode(tree,id);if(!r)return; var clone=JSON.parse(JSON.stringify(r.node)); function reId(n){n.id=uid++;if(n.children)n.children.forEach(reId);}reId(clone); clone._raw=(clone._raw||'')+'_복사'; r.siblings.splice(r.idx+1,0,clone);applyAll();renderTree();autoSave();toast(' 복제 완료!'); } // ── 하위 말머리 팝오버 ── function showLPfx(nodeId,anchor){ closeLPfx(); var r=findNode(tree,nodeId);if(!r)return;var node=r.node; var pop=document.createElement('div');pop.id='fg_lpop';pop.className='fg_lpop'; var hdr=document.createElement('div');hdr.className='fg_lpop_hdr';hdr.textContent='하위 폴더 말머리 설정';pop.appendChild(hdr); LPFX_LIST.forEach(function(opt){ var btn=document.createElement('button');btn.className='fg_lopt'; var cur=(opt.m==='__inherit__')?!node._lpfx:(node._lpfx===opt.m); if(cur)btn.classList.add('on'); var pv=document.createElement('span');pv.className='fg_lopt_p';pv.textContent=opt.p; var lb=document.createElement('span');lb.textContent=(cur?'✓ ':'')+opt.n; btn.append(pv,lb); btn.onclick=function(e){ e.stopPropagation(); if(opt.m==='__inherit__')delete node._lpfx;else node._lpfx=opt.m; applyPfx(node.children,node);renderTree();autoSave();closeLPfx(); toast('¶ 하위 말머리 → '+opt.n); }; pop.appendChild(btn); }); document.body.appendChild(pop); var rect=anchor.getBoundingClientRect(); var top=rect.bottom+4,left=rect.left; if(top+340>window.innerHeight)top=rect.top-340; if(left+180>window.innerWidth)left=window.innerWidth-185; pop.style.top=top+'px';pop.style.left=left+'px'; setTimeout(function(){document.addEventListener('click',closeLPfx,{once:true});},10); } function closeLPfx(){var p=document.getElementById('fg_lpop');if(p)p.remove();} // ── 미리보기 ── function renderPrev(){ var proj=toSafe(document.getElementById('fg_pname').value||'프로젝트'); var lines=[],fc=0,maxD=0; function walk(nodes,pfx,d){ if(d>maxD)maxD=d; var fl=nodes.filter(function(n){return n.type==='folder';}); fl.forEach(function(node,i){ var last=i===fl.length-1;fc++; lines.push('<span class="fg_pc_br">'+pfx+(last?'└─ ':'├─ ')+'</span><span class="fg_pc_folder"> '+node.name+'/</span>'); if(node.children&&node.children.length)walk(node.children,pfx+(last?' ':'│ '),d+1); }); } lines.push('<span class="fg_pc_root"> '+proj+'/</span>'); walk(tree,'',1); document.getElementById('fg_prev').innerHTML=lines.join('\n'); document.getElementById('fg_sf').textContent=fc; document.getElementById('fg_sd').textContent=maxD; } // ── 자동저장 ── var _st=null; function autoSave(){ clearTimeout(_st); _st=setTimeout(function(){ try{ var data={tree:JSON.parse(JSON.stringify(tree)),proj:document.getElementById('fg_pname').value,pfx:prefixMode,digits:digitCount,customSeq:customSeq,tmpl:currentTmpl}; localStorage.setItem('fg_v8',JSON.stringify(data)); var b=document.getElementById('fg_save'); if(b)b.textContent=' 저장됨 '+new Date().toLocaleTimeString('ko-KR',{hour:'2-digit',minute:'2-digit'}); }catch(e){} },600); } function loadSaved(){ try{ var raw=localStorage.getItem('fg_v8');if(!raw)return false; var d=JSON.parse(raw); tree=d.tree||[];prefixMode=d.pfx||'bracket_bare';digitCount=d.digits||2;customSeq=d.customSeq||null;currentTmpl=d.tmpl||0; document.getElementById('fg_pname').value=d.proj||'새_프로젝트'; return true; }catch(e){return false;} } // ── 백업/복원 ── function getBackup(){return JSON.stringify({v:8,proj:document.getElementById('fg_pname').value,pfx:prefixMode,digits:digitCount,customSeq:customSeq,tmpl:currentTmpl,tree:JSON.parse(JSON.stringify(tree))});} function showBackup(){ var json=getBackup(); var m=mkModal(' 백업 / 복원','<p class="fg_modal_b">아래 JSON을 복사해두면 언제든 복원할 수 있어요.</p><textarea class="fg_bk_ta" id="fg_bk_ta">'+json+'</textarea>', [{l:' 복사',c:'p',cb:function(){var ta=document.getElementById('fg_bk_ta');if(navigator.clipboard)navigator.clipboard.writeText(ta.value).then(function(){toast(' 복사!');});else{ta.select();document.execCommand('copy');toast(' 복사!');};}}, {l:' 파일 저장',c:'',cb:function(){var ta=document.getElementById('fg_bk_ta');dlBlob(new Blob([ta.value],{type:'application/json'}),toSafe(document.getElementById('fg_pname').value||'프로젝트')+'_백업.json');toast(' 저장!');}}, {l:'♻ 복원',c:'',cb:function(){restoreJson(document.getElementById('fg_bk_ta').value);closeModal();}}, {l:'닫기',c:'',cb:closeModal}]); document.body.appendChild(m); } function restoreJson(s){ try{ var d=JSON.parse(s);if(!d.tree){showAlert('⚠ 오류','유효한 백업이 아니에요.');return;} tree=d.tree;prefixMode=d.pfx||'bracket_bare';digitCount=d.digits||2;customSeq=d.customSeq||null;currentTmpl=d.tmpl||0; document.getElementById('fg_pname').value=d.proj||'새_프로젝트'; updatePfxBtn();updateTmplBtn();renderTree();autoSave();toast('✅ 복원 완료!'); }catch(e){showAlert('⚠ 파싱 오류',e.message);} } function tryRestoreUrl(){ var p=new URLSearchParams(window.location.search).get('fg');if(!p)return false; try{restoreJson(decodeURIComponent(atob(p)));window.history.replaceState({},'',window.location.pathname);toast(' 메일 링크에서 복원!');return true;}catch(e){return false;} } // ── 내보내기 ── function setZipBtns(loading){ ['fg_zip_btn','fg_zip_btn2'].forEach(function(id){ var b=document.getElementById(id);if(!b)return; b.disabled=loading; if(loading){b.innerHTML='⏳ 생성 중...';} else if(id==='fg_zip_btn'){b.innerHTML=' ZIP 다운로드';} else{b.innerHTML='<span style="font-size:18px;"> </span> ZIP 다운로드';} }); } async function dlZip(){ setZipBtns(true); try{ var zip=new JSZip(); var proj=toSafe(document.getElementById('fg_pname').value||'프로젝트'); var root=zip.folder(sf(proj)); function addZ(nodes,zf){nodes.forEach(function(n){if(n.type==='folder'){var sub=zf.folder(sf(n.name));sub.file('.gitkeep','');if(n.children&&n.children.length)addZ(n.children,sub);}else zf.file(sf(n.name),'');});} addZ(tree,root);root.file('_폴더구조_백업.json',getBackup()); var blob=await zip.generateAsync({type:'blob'});dlBlob(blob,proj+'_폴더구조.zip'); toast(' ZIP 다운로드 완료! '); }catch(e){toast('❌ '+e.message);} setZipBtns(false); } function dlTxt(){ var proj=toSafe(document.getElementById('fg_pname').value||'프로젝트'); var lines=[' '+proj+'/']; function walk(nodes,pfx){var fl=nodes.filter(function(n){return n.type==='folder';});fl.forEach(function(n,i){var last=i===fl.length-1;lines.push(pfx+(last?'└─ ':'├─ ')+' '+n.name+'/');if(n.children&&n.children.length)walk(n.children,pfx+(last?' ':'│ '));});} walk(tree,'');lines.push('');lines.push('생성: '+new Date().toLocaleString('ko-KR')); dlBlob(new Blob([lines.join('\n')],{type:'text/plain;charset=utf-8'}),proj+'_폴더구조.txt');toast(' TXT 다운로드!'); } function sendMail(){ var proj=toSafe(document.getElementById('fg_pname').value||'프로젝트'); var lines=['[폴더구조] '+proj+'\n']; function walk(nodes,pfx){var fl=nodes.filter(function(n){return n.type==='folder';});fl.forEach(function(n,i){var last=i===fl.length-1;lines.push(pfx+(last?'└─ ':'├─ ')+' '+n.name+'/');if(n.children&&n.children.length)walk(n.children,pfx+(last?' ':'│ '));});} walk(tree,''); var b64=btoa(encodeURIComponent(getBackup())); lines.push('\n─────────────');lines.push(' 복원 링크: '+location.origin+location.pathname+'?fg='+b64);lines.push('생성: 모두의 폴더구조 생성기'); window.location.href='mailto:?subject='+encodeURIComponent('[폴더구조] '+proj)+'&body='+encodeURIComponent(lines.join('\n')); toast('✉ 메일 앱 열기...'); } function copyTree(){ var el=document.getElementById('fg_prev');var text=el.innerText||el.textContent; if(navigator.clipboard)navigator.clipboard.writeText(text).then(function(){toast(' 복사!');}); else{var ta=document.createElement('textarea');ta.value=text;document.body.appendChild(ta);ta.select();document.execCommand('copy');ta.remove();toast(' 복사!');} } function clearAll(){if(!confirm('전체 초기화할까요?'))return;tree=[];selectedId=null;document.getElementById('fg_pname').value='새_프로젝트';renderTree();autoSave();toast(' 초기화!');} function onNameInput(inp){var s=toSafe(inp.value);if(s!==inp.value)inp.value=s;} // ── 유틸 ── function sf(s){return(s||'').replace(/[<>:"/\\|?*\x00-\x1f]/g,'_')||'_';} function dlBlob(blob,fn){var url=URL.createObjectURL(blob);var a=document.createElement('a');a.href=url;a.download=fn;document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);} function toast(msg,dur){dur=dur||2400;var t=document.getElementById('fg_toast');t.textContent=msg;t.classList.add('show');setTimeout(function(){t.classList.remove('show');},dur);} function mkModal(title,bodyHtml,buttons){ var bg=document.createElement('div');bg.className='fg_modal_bg';bg.id='fg_modal_bg'; bg.onclick=function(e){if(e.target===bg)closeModal();}; var m=document.createElement('div');m.className='fg_modal'; var t=document.createElement('span');t.className='fg_modal_t';t.textContent=title; var b=document.createElement('div');b.innerHTML=bodyHtml; var row=document.createElement('div');row.className='fg_modal_row'; buttons.forEach(function(btn){var el=document.createElement('button');el.className='fg_mbtn '+(btn.c==='p'?'p':'');el.textContent=btn.l;el.onclick=btn.cb;row.appendChild(el);}); m.append(t,b,row);bg.appendChild(m);return bg; } function closeModal(){var m=document.getElementById('fg_modal_bg');if(m)m.remove();} function showAlert(t,msg){var m=mkModal(t,'<p class="fg_modal_b" style="white-space:pre-wrap;">'+msg+'</p>',[{l:'확인',c:'p',cb:closeModal}]);document.body.appendChild(m);} // ── 초기화 ── function init(){ updatePfxBtn();updateTmplBtn(); if(!tryRestoreUrl()){ var ok=loadSaved(); if(ok&&tree.length>0){updatePfxBtn();updateTmplBtn();renderTree();toast(' 이전 작업 불러옴!');} else loadTmpl(0); } } return{ toggleGuide,toggleTmplDD,togglePfxDD,toggleCustDD,applyCustom, loadTmpl,addRoot,clearAll,copyTree,showBackup,sendMail,dlTxt,dlZip, onNameInput,autoSave,init }; }()); FG.init(); </script> </body> </html> 모두의계산기 계산기 모두의계산기 폴더구조 폴더구조생성계산기 폴더구조생성기 폴더생성기 최매슨생 https://0-1.kr/97 https://0-1.kr/97#entry97comment Sun, 1 Feb 2026 11:51:15 +0900 https://0-1.kr/96 <div class="photo-editor-container"> <div class="photo-header"> <h1> 모두의 사진가공출력 계산기</h1> <div class="security-notice"> <strong>사진·그림 파일들은 서버에 저장되지 않으니 안심하고 사용하세요.</strong><br> (저장소: 본인의 장치 내 브라우저 메모리에서만 안전하게 가공됩니다) </div> </div> <div class="photo-card upload-section" id="dropZone"> <input type="file" id="photoUpload" accept="image/*" style="display:none;" onchange="handleImage(event)"> <button class="action-btn upload-btn" onclick="document.getElementById('photoUpload').click()"> 사진 업로드 또는 파일을 여기로 끌어오세요</button> <div class="quick-tools" id="editTools" style="display:none; text-align:center; margin-top:10px;"> <button onclick="rotateImage()" class="tool-btn"> 사진 90도 회전</button> </div> </div> <div class="photo-main-grid"> <div class="photo-card preview-area"> <h3 class="card-title"> ️ 실시간 가공 미리보기</h3> <div id="previewContainer" class="preview-box"> <p id="placeholderText">사진을 업로드해주세요.</p> <canvas id="mainCanvas" style="display:none;"></canvas> </div> <p id="resultInfo" class="small-info">설정값 대기 중...</p> </div> <div class="photo-card control-area"> <div class="control-group"> <label>↔️ 1. 사진/용지 방향</label> <div class="btn-group"> <button onclick="setOrientation('P')" class="sub-btn active" id="btnP">세로방향</button> <button onclick="setOrientation('L')" class="sub-btn" id="btnL">가로방향</button> </div> </div> <div class="control-group"> <label> 2. 가공 사이즈 선택</label> <select id="targetSize" onchange="processImage()"> <option value="35x45">여권사진 (35x45mm)</option> <option value="30x40">반명함 (30x40mm)</option> <option value="50x70">명함판 (50x70mm)</option> <option value="89x127">일반인화 (3.5x5인치)</option> <option value="102x152">4x6 사진 (102x152mm)</option> <option value="127x178">5x7 사진 (127x178mm)</option> </select> </div> <div class="control-group"> <label> 3. 출력 용지 선택 (규격/직접)</label> <select id="paperSize" onchange="togglePaperInput()"> <option value="A4" selected>A4 (210x297mm)</option> <option value="A3">A3 (297x420mm)</option> <option value="A5">A5 (148x210mm)</option> <option value="A6">A6 (105x148mm)</option> <option value="B4">B4 (257x364mm)</option> <option value="B5">B5 (176x250mm)</option> <option value="B6">B6 (125x176mm)</option> <option value="4x6">4x6 인치 인화지</option> <option value="5x7">5x7 인치 인화지</option> <option value="SINGLE">가공사진 단독 저장</option> <option value="CUSTOM">직접 입력 (mm)</option> </select> <div id="customPaperInput" style="display:none; margin-top:8px; gap:5px;"> <input type="number" id="customW" placeholder="가로mm" style="width:45%; padding:8px;" oninput="processImage()"> <input type="number" id="customH" placeholder="세로mm" style="width:45%; padding:8px;" oninput="processImage()"> </div> </div> <div class="control-group"> <label>✍️ 4. 텍스트 삽입 (선택사항)</label> <input type="text" id="photoText" placeholder="사진 하단 문구 입력" oninput="processImage()" style="width:100%; padding:8px; margin-bottom:5px; border-radius:8px; border:1px solid #ddd;"> <div style="display:flex; align-items:center; gap:10px;"> <span style="font-size:11px;">크기:</span> <input type="range" id="fontSize" min="10" max="100" value="30" oninput="processImage()"> </div> </div> <div class="control-group"> <label> ️ 5. 테두리 설정</label> <div style="display: flex; gap: 8px;"> <select id="borderToggle" onchange="processImage()" style="flex:1;"> <option value="N">테두리 없음</option> <option value="Y" selected>흰색 테두리</option> </select> <input type="number" id="borderWidth" value="2" min="1" max="15" oninput="processImage()" style="width:60px; padding:8px; border-radius:8px; border:1px solid #ddd;"> </div> </div> <button onclick="checkQuality()" class="check-btn"> 출력 깨짐 테스트</button> <div id="qualityResult" class="quality-box">사진 업로드 후 테스트 진행</div> </div> </div> <div class="photo-card save-section"> <div class="save-grid"> <select id="fileFormat" class="format-select"> <option value="image/jpeg">JPG (일반 사진용)</option> <option value="image/png">PNG (고품질 그래픽용)</option> </select> <button onclick="saveImage()" class="action-btn save-btn"> 가공사진 다운로드</button> </div> </div> </div> <style> .photo-editor-container { max-width: 950px; margin: 20px auto; font-family: 'Pretendard', sans-serif; background: #eff3f7; padding: 20px; border-radius: 20px; color: #333; } .photo-card { background: white; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); margin-bottom: 15px; } .security-notice { background: #e3f2fd; border: 1px solid #bbdefb; padding: 10px; border-radius: 10px; font-size: 13px; color: #1976d2; text-align: center; line-height: 1.5; margin-bottom: 15px; } .photo-header h1 { color: #2c3e50; font-size: 24px; text-align: center; margin-bottom: 15px; font-weight: 800; } .photo-main-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; } .card-title { font-size: 15px; font-weight: 700; margin: 0 0 12px 0; color: #2d3436; } .preview-box { width: 100%; min-height: 450px; background: #dfe6e9; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px dashed #b2bec3; position: relative; } #mainCanvas { max-width: 95%; max-height: 600px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); background: white; } .control-group { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f1f2f6; } .control-group label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 8px; } select, input[type="number"], .sub-btn { border-radius: 8px; border: 1px solid #ddd; font-size: 13px; padding: 10px; } select { width: 100%; background: #fff; } .btn-group { display: flex; gap: 5px; } .sub-btn { flex: 1; cursor: pointer; background: #fff; } .sub-btn.active { background: #3498db; color: white; border-color: #3498db; } .tool-btn { background: #636e72; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 12px; } .check-btn { width: 100%; padding: 12px; background: #27ae60; color: white; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; } .quality-box { background: #f8f9fa; padding: 10px; border-radius: 8px; font-size: 12px; margin-top: 8px; text-align: center; border: 1px solid #eee; } .save-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 10px; } .action-btn { border: none; border-radius: 10px; color: white; font-weight: 700; height: 50px; cursor: pointer; font-size: 15px; } .upload-btn { background: #2c3e50; width: 100%; } .save-btn { background: #3498db; } .small-info { font-size: 11px; text-align: center; margin-top: 10px; color: #7f8c8d; font-weight: 600; } #dropZone.dragover { background: #f0f3f5; border: 2px solid #3498db; } @media (max-width: 768px) { .photo-main-grid { grid-template-columns: 1fr; } .save-grid { grid-template-columns: 1fr; } } </style> <script> let uploadedImg = null; let currentOrientation = 'P'; let rotation = 0; // 드래그 앤 드롭 지원 const dropZone = document.getElementById('dropZone'); ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(evt => { dropZone.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); }, false); }); dropZone.addEventListener('dragover', () => dropZone.classList.add('dragover')); dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover')); dropZone.addEventListener('drop', (e) => { dropZone.classList.remove('dragover'); handleImage({ target: { files: e.dataTransfer.files } }); }); function handleImage(e) { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(event) { const img = new Image(); img.onload = function() { uploadedImg = img; rotation = 0; document.getElementById('placeholderText').style.display = 'none'; document.getElementById('mainCanvas').style.display = 'block'; document.getElementById('editTools').style.display = 'block'; processImage(); }; img.src = event.target.result; }; reader.readAsDataURL(file); } function rotateImage() { rotation = (rotation + 90) % 360; processImage(); } function setOrientation(o) { currentOrientation = o; document.getElementById('btnP').classList.toggle('active', o === 'P'); document.getElementById('btnL').classList.toggle('active', o === 'L'); processImage(); } function togglePaperInput() { const val = document.getElementById('paperSize').value; document.getElementById('customPaperInput').style.display = (val === 'CUSTOM') ? 'flex' : 'none'; processImage(); } function processImage() { if (!uploadedImg) return; const canvas = document.getElementById('mainCanvas'); const ctx = canvas.getContext('2d'); const dpi = 300; const mmToPx = (mm) => Math.round((mm / 25.4) * dpi); // 1. 가공 사이즈 설정 const targetSize = document.getElementById('targetSize').value.split('x'); const tW = mmToPx(parseFloat(targetSize[0])); const tH = mmToPx(parseFloat(targetSize[1])); // 2. 용지 사이즈 설정 const paperType = document.getElementById('paperSize').value; let pW, pH; const paperMap = { 'A3': [297, 420], 'A4': [210, 297], 'A5': [148, 210], 'A6': [105, 148], 'B4': [257, 364], 'B5': [176, 250], 'B6': [125, 176], '4x6': [101.6, 152.4], '5x7': [127, 177.8] }; if (paperType === 'SINGLE') { const borderVal = document.getElementById('borderToggle').value === 'Y' ? mmToPx(parseFloat(document.getElementById('borderWidth').value)) : 0; pW = tW + (borderVal * 2); pH = tH + (borderVal * 2); } else if (paperType === 'CUSTOM') { pW = mmToPx(parseFloat(document.getElementById('customW').value) || 210); pH = mmToPx(parseFloat(document.getElementById('customH').value) || 297); } else { pW = mmToPx(paperMap[paperType][0]); pH = mmToPx(paperMap[paperType][1]); } if (currentOrientation === 'L' && paperType !== 'SINGLE') [pW, pH] = [pH, pW]; canvas.width = pW; canvas.height = pH; // 배경 채우기 ctx.fillStyle = "white"; ctx.fillRect(0, 0, pW, pH); const useBorder = document.getElementById('borderToggle').value === 'Y'; const borderPx = useBorder ? mmToPx(parseFloat(document.getElementById('borderWidth').value)) : 0; const cellW = tW + (borderPx * 2); const cellH = tH + (borderPx * 2); const maxCols = Math.floor(pW / cellW); const maxRows = Math.floor(pH / cellH); const count = (paperType === 'SINGLE') ? 1 : maxCols * maxRows; const padding = (paperType === 'SINGLE') ? 0 : 30; // 용지 끝 여백 for (let i = 0; i < count; i++) { const col = i % maxCols; const row = Math.floor(i / maxCols); const x = col * cellW + padding; const y = row * cellH + padding; if (y + cellH > pH || x + cellW > pW) break; if (useBorder) { ctx.fillStyle = "white"; ctx.fillRect(x, y, cellW, cellH); ctx.strokeStyle = "#eee"; ctx.lineWidth = 1; ctx.strokeRect(x, y, cellW, cellH); } drawPhoto(ctx, uploadedImg, x + borderPx, y + borderPx, tW, tH, rotation); // 텍스트 삽입 const text = document.getElementById('photoText').value; if (text) { const fSize = document.getElementById('fontSize').value; ctx.fillStyle = "black"; ctx.font = `${fSize}px Pretendard`; ctx.textAlign = "center"; ctx.fillText(text, x + cellW/2, y + cellH - borderPx/2 - 5); } } document.getElementById('resultInfo').innerText = `최종: ${canvas.width}x${canvas.height}px (300DPI)`; } function drawPhoto(ctx, img, x, y, w, h, rot) { ctx.save(); ctx.translate(x + w / 2, y + h / 2); ctx.rotate((rot * Math.PI) / 180); let rW = w, rH = h; if (rot === 90 || rot === 270) [rW, rH] = [h, w]; const r = Math.min(img.width / rW, img.height / rH); const sW = rW * r, sH = rH * r; ctx.drawImage(img, (img.width - sW) / 2, (img.height - sH) / 2, sW, sH, -rW / 2, -rH / 2, rW, rH); ctx.restore(); } function checkQuality() { if (!uploadedImg) return alert('사진을 먼저 업로드해주세요.'); const targetW = parseFloat(document.getElementById('targetSize').value.split('x')[0]); const reqPx = Math.round((targetW / 25.4) * 300); const isGood = Math.max(uploadedImg.width, uploadedImg.height) >= reqPx; document.getElementById('qualityResult').innerHTML = isGood ? "<span style='color:green; font-weight:bold;'>✅ 선명하게 출력 가능</span>" : "<span style='color:red; font-weight:bold;'>⚠️ 사진이 작아 흐릴 수 있음</span>"; } function saveImage() { if (!uploadedImg) return alert('이미지가 없습니다.'); const canvas = document.getElementById('mainCanvas'); const link = document.createElement('a'); link.download = `두성계산기1_완성_${Date.now()}.jpg`; link.href = canvas.toDataURL("image/jpeg", 0.9); link.click(); } </script> 모두의계산기 계산기 사진 사진가공 사진가공출력 사진출력 여권사진 증명사진 최매슨생 https://0-1.kr/96 https://0-1.kr/96#entry96comment Wed, 28 Jan 2026 13:35:59 +0900 https://0-1.kr/95 <!-- ✅ 05. 모두의 간단출첵계산기 v3 - 티스토리 전용 핵심: 스크립트 동적로드 / 전역함수 / 인라인CSS / z-index 최대값 --> <!-- ① 스타일 (인라인 - CDN link 없음) --> <style> #mc5w{font-family:"Malgun Gothic","맑은 고딕",sans-serif;background:#f5f6fa;border:2px solid #4a6fa5;border-radius:10px;padding:8px;margin:10px 0;box-sizing:border-box;position:relative;} #mc5w.tm-mint{--th:#d4f0e8;--tb:#f0faf7;--bo:#a8dfd1;--hv:#e0f7f1;--ac:#b2ead8;--fc:#1a4a3a;--chk:#1abc9c;} #mc5w.tm-warm{--th:#f5e6d3;--tb:#fdf8f3;--bo:#e0c8a8;--hv:#fdf0e2;--ac:#f5d9b0;--fc:#5a3a1a;--chk:#c07b3a;} #mc5w.tm-slate{--th:#2d3748;--tb:#3d4a5c;--bo:#4a5568;--hv:#4a5568;--ac:#667eea;--fc:#e2e8f0;--chk:#a0aec0;} #mc5w.tm-rose{--th:#fce4ec;--tb:#fff5f8;--bo:#f8bbd0;--hv:#fde8f0;--ac:#f48fb1;--fc:#5a1a2e;--chk:#e91e63;} #mc5tb{background:#fff;border:1px solid #dde3ef;border-radius:7px;padding:6px 8px;margin-bottom:7px;display:flex;flex-direction:column;gap:5px;} .mc5row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;} .mc5b{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border:1px solid #c5cfe0;border-radius:5px;background:#f0f4fb;color:#334;font-size:12px;font-weight:bold;cursor:pointer;white-space:nowrap;transition:background .13s;} .mc5b:hover,.mc5b:active{background:#4a6fa5;color:#fff;border-color:#4a6fa5;} .mc5blu{background:#4a6fa5!important;color:#fff!important;border-color:#2e5090!important;} .mc5grn{background:#27ae60!important;color:#fff!important;border-color:#1e8449!important;} .mc5org{background:#e67e22!important;color:#fff!important;border-color:#ca6f1e!important;} .mc5red{background:#e74c3c!important;color:#fff!important;border-color:#c0392b!important;} .mc5pur{background:#8e44ad!important;color:#fff!important;border-color:#6c3483!important;} .mc5drk{background:#2c3e50!important;color:#fff!important;border-color:#1a252f!important;} .mc5tel{background:#16a085!important;color:#fff!important;border-color:#0e6655!important;} .mc5div{width:1px;height:24px;background:#e0e6f0;margin:0 2px;flex-shrink:0;} .mc5lbl{font-size:10px;color:#aaa;white-space:nowrap;} select.mc5sel{padding:5px 6px;border:1px solid #c5cfe0;border-radius:5px;background:#f0f4fb;font-size:12px;font-weight:bold;cursor:pointer;height:28px;} #mc5zlbl{font-size:12px;font-weight:bold;color:#4a6fa5;min-width:36px;text-align:center;} .mc5sw{display:inline-block;width:19px;height:19px;border-radius:50%;border:2px solid #bbb;cursor:pointer;vertical-align:middle;transition:transform .15s;} .mc5sw:hover{transform:scale(1.2);} .mc5sw.on{border-color:#333;transform:scale(1.15);} .sw0{background:linear-gradient(135deg,#4a6fa5,#e8eef8);} .sw1{background:linear-gradient(135deg,#1abc9c,#d4f0e8);} .sw2{background:linear-gradient(135deg,#c07b3a,#f5e6d3);} .sw3{background:linear-gradient(135deg,#2d3748,#667eea);} .sw4{background:linear-gradient(135deg,#e91e63,#fce4ec);} #mc5gw{width:100%;overflow:hidden;border-radius:6px;border:1px solid #c5cfe0;background:#fff;} #mc5g{width:100%!important;height:460px!important;} #mc5sb{font-size:11px;color:#666;margin-top:5px;padding:4px 8px;background:#eef1f7;border-radius:4px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:3px;} /* HOT 셀 테마 */ #mc5w .handsontable th{background:var(--th,#e8eef8)!important;color:var(--fc,#2c3e50)!important;border:1px solid var(--bo,#d0d9ec)!important;vertical-align:middle!important;text-align:center!important;box-shadow:none!important;font-weight:bold;} #mc5w .handsontable tbody tr:nth-child(even) td{background:var(--tb,#f7f9fd)!important;} #mc5w .handsontable td{border:1px solid var(--bo,#d0d9ec)!important;vertical-align:middle!important;text-align:center!important;box-shadow:none!important;-webkit-box-shadow:none!important;} #mc5w .handsontable td.htCheckboxRendererInput{box-shadow:none!important;background:transparent!important;} #mc5w .handsontable td input[type=checkbox]{width:15px!important;height:15px!important;cursor:pointer;vertical-align:middle;margin:0;accent-color:var(--chk,#4a6fa5);} #mc5w .handsontable tr:hover td{background:var(--hv,#ebf2ff)!important;} #mc5w .handsontable td.area,#mc5w .handsontable td.current{background:var(--ac,#c4d9f8)!important;} #mc5w.tm-slate .handsontable td{color:#e2e8f0!important;background:#2d3748!important;} /* 모달 - z-index 최대값으로 티스토리 레이어 돌파 */ .mc5mbg{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);z-index:2147483647;align-items:center;justify-content:center;} .mc5mbg.show{display:flex!important;} .mc5md{background:#fff;border-radius:12px;padding:18px;max-width:540px;width:94vw;max-height:88vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,.3);position:relative;} .mc5md h3{margin:0 0 13px;font-size:15px;color:#2c3e50;border-bottom:2px solid #4a6fa5;padding-bottom:8px;} .mc5mx{position:absolute;top:10px;right:13px;background:none;border:none;font-size:21px;cursor:pointer;color:#aaa;line-height:1;} .mc5mx:hover{color:#e74c3c;} .mc5ci{display:inline-flex;align-items:center;margin:3px;padding:5px 10px;border:1px solid #c5cfe0;border-radius:5px;cursor:pointer;font-size:12px;user-select:none;background:#f0f4fb;} .mc5ci.on{background:#4a6fa5;color:#fff;border-color:#2e5090;} .mc5mgi{background:#eef3fb;border-radius:6px;padding:9px 11px;font-size:12px;color:#2c3e50;margin-bottom:10px;line-height:1.7;} .mc5mgi b{color:#4a6fa5;} /* 전화번호 */ .mc5tel-a{color:#27ae60;text-decoration:none;font-weight:bold;} /* 전체화면 */ #mc5w.mc5fs{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:2147483646!important;border-radius:0!important;padding:8px!important;background:#f5f6fa!important;overflow-y:auto;} #mc5w.mc5fs #mc5g{height:calc(100vh - 130px)!important;} /* 반응형 */ @media(max-width:600px){.mc5div{display:none;}.mc5lbl{display:none;}.mc5b{font-size:11px;padding:4px 6px;}select.mc5sel{font-size:11px;}} @media(max-width:400px){.mc5b{font-size:10px;padding:3px 5px;}} /* PDF 미리보기 */ #mc5pv{border:1px solid #ccc;margin-top:8px;overflow:hidden;background:#fff;max-width:100%;} #mc5pv img{max-width:100%;} </style> <!-- ② HTML 구조 --> <div id="mc5w"> <div id="mc5tb"> <!-- 1행 --> <div class="mc5row"> <span class="mc5lbl"> </span> <button class="mc5b mc5blu" onclick="mc5LoadExcel()"> 불러오기</button> <button class="mc5b mc5grn" onclick="mc5SaveExcel()"> 엑셀저장</button> <button class="mc5b mc5tel" onclick="mc5DevSave()"> 기기저장</button> <button class="mc5b mc5org" onclick="mc5OpenPdf()"> PDF</button> <div class="mc5div"></div> <span class="mc5lbl"> </span> <select class="mc5sel" id="mc5fzs" onchange="mc5Freeze()"> <option value="0"> 해제</option><option value="1" selected>A고정</option> <option value="2">B까지</option><option value="3">C까지</option> <option value="4">D까지</option><option value="5">E까지</option> </select> <button class="mc5b" onclick="mc5Zoom(-1)">➖</button> <span id="mc5zlbl">100%</span> <button class="mc5b" onclick="mc5Zoom(1)">➕</button> <button class="mc5b mc5blu" id="mc5fsb" onclick="mc5Fullscreen()"> 전체보기</button> <div class="mc5div"></div> <span class="mc5lbl"> </span> <span class="mc5sw sw0 on" title="블루" onclick="mc5Theme('',this)"></span> <span class="mc5sw sw1" title="민트" onclick="mc5Theme('tm-mint',this)"></span> <span class="mc5sw sw2" title="베이지" onclick="mc5Theme('tm-warm',this)"></span> <span class="mc5sw sw3" title="다크" onclick="mc5Theme('tm-slate',this)"></span> <span class="mc5sw sw4" title="로즈" onclick="mc5Theme('tm-rose',this)"></span> </div> <!-- 2행 --> <div class="mc5row"> <span class="mc5lbl">✏️</span> <button class="mc5b mc5pur" onclick="mc5OpenChk()">☑️ 체크열</button> <button class="mc5b mc5drk" onclick="mc5OpenMerge()">⊞ 셀병합</button> <button class="mc5b mc5red" onclick="mc5SplitCell()">⊟ 병합해제</button> <div class="mc5div"></div> <span class="mc5lbl"> </span> <button class="mc5b" onclick="mc5Share()"> 링크복사</button> <button class="mc5b mc5tel" onclick="mc5OpenQr()"> QR공유</button> <button class="mc5b mc5grn" onclick="mc5GoGs()"> 구글시트</button> <button class="mc5b mc5org" onclick="mc5Mail()"> 메일</button> <button class="mc5b mc5red" onclick="mc5Reset()"> ️ 리셋</button> </div> </div> <div id="mc5gw"> <div id="mc5g"></div> </div> <div id="mc5sb"> <span id="mc5sc">선택: -</span> <span id="mc5sn">행: 0 / 열: 0</span> <span id="mc5ss">합계: -</span> </div> </div> <input type="file" id="mc5fi" accept=".xlsx,.xls,.csv,.json" style="display:none" onchange="mc5HandleFile(event)"> <!-- 체크열 모달 --> <div id="mc5chkbg" class="mc5mbg"> <div class="mc5md"> <button class="mc5mx" onclick="mc5CloseM('mc5chkbg')">✕</button> <h3>☑️ 체크박스 열 설정</h3> <p style="font-size:12px;color:#666;margin:0 0 9px">체크박스를 적용할 열을 선택하세요.</p> <div id="mc5cc"></div> <div style="margin-top:12px;display:flex;gap:7px;justify-content:flex-end"> <button class="mc5b" onclick="mc5CloseM('mc5chkbg')">취소</button> <button class="mc5b mc5blu" onclick="mc5ApplyChk()">✅ 적용</button> </div> </div> </div> <!-- 셀병합 모달 --> <div id="mc5mgbg" class="mc5mbg"> <div class="mc5md"> <button class="mc5mx" onclick="mc5CloseM('mc5mgbg')">✕</button> <h3>⊞ 셀 병합 / 해제</h3> <div class="mc5mgi"> <b>사용법:</b><br> 1. 그리드에서 병합할 범위를 드래그 선택<br> 2. [선택 셀 병합] 클릭<br> 3. 병합 셀 선택 후 [병합 해제] 클릭<br><br> <b>현재 선택:</b> <span id="mc5si" style="color:#e67e22">없음</span> </div> <div style="display:flex;gap:7px;flex-wrap:wrap"> <button class="mc5b mc5drk" onclick="mc5DoMerge()">⊞ 선택 셀 병합</button> <button class="mc5b mc5red" onclick="mc5DoUnmerge()">⊟ 병합 해제</button> <button class="mc5b mc5org" onclick="mc5RefreshSel()"> 선택갱신</button> </div> <div style="margin-top:10px"> <p style="font-size:11px;color:#888;margin:0 0 5px">병합된 셀 목록</p> <div id="mc5ml" style="font-size:11px;color:#555;max-height:130px;overflow-y:auto;background:#f8fafc;border-radius:4px;padding:5px"></div> </div> <div style="margin-top:10px;display:flex;justify-content:flex-end"> <button class="mc5b" onclick="mc5CloseM('mc5mgbg')">닫기</button> </div> </div> </div> <!-- PDF 모달 --> <div id="mc5pdfbg" class="mc5mbg"> <div class="mc5md" style="max-width:600px"> <button class="mc5mx" onclick="mc5CloseM('mc5pdfbg')">✕</button> <h3> PDF 변환</h3> <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px;align-items:center;font-size:13px"> 방향: <select id="mc5po" class="mc5sel"><option value="l">가로</option><option value="p" selected>세로</option></select> 크기: <select id="mc5ps" class="mc5sel"><option value="a4" selected>A4</option><option value="a3">A3</option></select> <label style="display:flex;align-items:center;gap:4px"><input type="checkbox" id="mc5pf" checked> 1장맞춤</label> </div> <div style="display:flex;gap:7px"> <button class="mc5b mc5blu" onclick="mc5PdfPrev(this)"> 미리보기</button> <button class="mc5b mc5grn" onclick="mc5PdfDl(this)">⬇️ PDF다운</button> </div> <div id="mc5pv"></div> </div> </div> <!-- QR 모달 --> <div id="mc5qrbg" class="mc5mbg"> <div class="mc5md" style="max-width:360px;text-align:center"> <button class="mc5mx" onclick="mc5CloseM('mc5qrbg')">✕</button> <h3> QR 코드 공유</h3> <p style="font-size:12px;color:#666;margin:0 0 8px">카메라로 스캔하면 데이터를 공유합니다.</p> <div style="display:flex;flex-direction:column;align-items:center;gap:9px;padding:8px 0"> <div id="mc5qrbox"></div> <div id="mc5qrurl" style="font-size:11px;color:#666;word-break:break-all;background:#f5f6fa;padding:5px 9px;border-radius:4px;max-width:100%;text-align:left"></div> </div> <div style="display:flex;gap:7px;justify-content:center"> <button class="mc5b mc5blu" onclick="mc5CopyQr()"> 링크복사</button> <button class="mc5b mc5grn" onclick="mc5DlQr()">⬇️ QR저장</button> <button class="mc5b" onclick="mc5CloseM('mc5qrbg')">닫기</button> </div> </div> </div> <!-- ③ 스크립트 동적 로드 (티스토리 차단 우회) --> <script> // 라이브러리 순차 동적 로드 후 앱 초기화 (function(){ var libs = [ 'https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js' ]; // HOT CSS도 동적 삽입 var lnk = document.createElement('link'); lnk.rel='stylesheet'; lnk.href='https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css'; document.head.appendChild(lnk); var idx = 0; function loadNext(){ if(idx >= libs.length){ mc5Init(); return; } var s = document.createElement('script'); s.src = libs[idx++]; s.onload = loadNext; s.onerror = loadNext; // 실패해도 계속 진행 document.head.appendChild(s); } loadNext(); })(); </script> <!-- ④ 앱 로직 (전역 함수 - IIFE 없음) --> <script> /* ───── 상수 & 상태 ───── */ var MC5_SK = 'mc5ts_v1'; var MC5_BF = 13; var MC5_BH = 34; var mc5hot = null; var mc5zoom = 100; var mc5chk = []; // 체크박스 열 var mc5mc = []; // mergeCells var mc5tm = ''; // 테마 var mc5qUrl = ''; /* ───── 유틸 ───── */ function mc5Empty(r,c){ return Array.from({length:r},function(){return Array(c).fill('');}); } function mc5IsTel(v){ if(typeof v!=='string')return false; var c=v.replace(/[-s]/g,''); return /^(0d{1,2}d{3,4}d{4}|01[016789]d{7,8})$/.test(c); } /* ───── 렌더러 ───── */ function mc5TelRender(hi,td,r,c,p,v,cp){ Handsontable.renderers.TextRenderer.apply(this,arguments); var s=String(v||''); if(mc5IsTel(s)){ td.innerHTML='<a class="mc5tel-a" href="tel:'+s.replace(/[-s]/g,'')+'" onclick="event.stopPropagation()"> '+s+'</a>'; } } function mc5Cells(r,c){ if(mc5chk.indexOf(c)>-1) return {type:'checkbox',className:'htCenter htMiddle'}; return {renderer:mc5TelRender}; } /* ───── 폰트 주입 ───── */ function mc5ApplyFont(){ var fs=Math.round(MC5_BF*mc5zoom/100); var rh=Math.round(MC5_BH*mc5zoom/100); var tds=document.querySelectorAll('#mc5g .handsontable tbody td'); for(var i=0;i<tds.length;i++){tds[i].style.fontSize=fs+'px';tds[i].style.lineHeight=rh+'px';} var ths=document.querySelectorAll('#mc5g .handsontable thead th'); for(var i=0;i<ths.length;i++){ths[i].style.fontSize=Math.max(9,fs-1)+'px';} } /* ───── HOT 초기화 ───── */ function mc5InitHot(data){ var el=document.getElementById('mc5g'); if(mc5hot){mc5hot.destroy();mc5hot=null;} var rh=Math.round(MC5_BH*mc5zoom/100); mc5hot=new Handsontable(el,{ data:data, colHeaders:true,rowHeaders:true, width:'100%',height:'100%',stretchH:'all', rowHeights:rh,minSpareRows:2,minSpareCols:1, manualColumnMove:true,manualColumnResize:true,manualRowResize:true, contextMenu:true,copyPaste:true,undo:true,filters:true,dropdownMenu:true, mergeCells:mc5mc,fixedColumnsLeft:1,wordWrap:true, licenseKey:'non-commercial-and-evaluation', cells:function(r,c){return mc5Cells(r,c);}, afterRender:function(){mc5ApplyFont();}, /* ★ 붙여넣기 후 행높이 균일화 */ afterPaste:function(){ var trh=Math.round(MC5_BH*mc5zoom/100); var n=mc5hot.countRows(); var arr=[];for(var i=0;i<n;i++)arr.push(trh); mc5hot.updateSettings({rowHeights:arr}); requestAnimationFrame(function(){ mc5hot.updateSettings({rowHeights:trh}); mc5hot.render(); }); mc5Save();mc5UpdateSb(); }, /* ★ 복사 시 체크박스 → 1/0 */ beforeCopy:function(data,coords){ if(!coords)return; for(var ci=0;ci<coords.length;ci++){ var rng=coords[ci]; for(var r=rng.startRow;r<=rng.endRow;r++){ for(var c=rng.startCol;c<=rng.endCol;c++){ var ri=r-rng.startRow,col=c-rng.startCol; if(data[ri]&&mc5chk.indexOf(c)>-1){ var v=data[ri][col]; data[ri][col]=(v===true||v==='true')?'1':(v===false||v==='false')?'0':v; } } } } }, /* ★ 붙여넣기 시 1/0 → boolean 복원 */ afterChange:function(changes){ if(!changes)return; var nr=false; for(var i=0;i<changes.length;i++){ var r=changes[i][0],c=changes[i][1],nv=changes[i][3]; if(mc5chk.indexOf(c)>-1){ if(nv==='1'||nv===1){mc5hot.setDataAtCell(r,c,true,'norm');nr=true;} else if(nv==='0'||nv===0){mc5hot.setDataAtCell(r,c,false,'norm');nr=true;} } } if(nr)mc5hot.render(); mc5Save();mc5UpdateSb(); }, afterSelectionEnd:function(r,c,r2,c2){mc5UpdateSb(r,c,r2,c2);} }); } /* ───── 저장 / 불러오기 ───── */ function mc5Save(){ if(!mc5hot)return; try{ localStorage.setItem(MC5_SK,JSON.stringify({ data:mc5hot.getData(),chk:mc5chk,mc:mc5mc,zoom:mc5zoom,tm:mc5tm, frz:parseInt(document.getElementById('mc5fzs').value)||1 })); }catch(e){} } function mc5LoadSaved(){ try{ var s=localStorage.getItem(MC5_SK); if(!s)return null; var st=JSON.parse(s); mc5chk=st.chk||[];mc5mc=st.mc||[];mc5zoom=st.zoom||100;mc5tm=st.tm||''; document.getElementById('mc5fzs').value=st.frz||1; if(mc5tm)mc5ApplyTmCls(mc5tm); return st.data; }catch(e){return null;} } function mc5LoadUrl(){ try{ var d=new URLSearchParams(window.location.search).get('mc5d'); if(!d)return null; var st=JSON.parse(LZString.decompressFromEncodedURIComponent(d)); mc5chk=st.chk||st.chkCols||[];mc5mc=st.mc||st.mCells||[];mc5tm=st.tm||''; if(mc5tm)mc5ApplyTmCls(mc5tm); return st.data; }catch(e){return null;} } /* ───── 상태바 ───── */ function mc5UpdateSb(r,c,r2,c2){ if(!mc5hot)return; document.getElementById('mc5sn').textContent='행: '+mc5hot.countRows()+' / 열: '+mc5hot.countCols(); if(r===undefined)return; var cl=Handsontable.helper.spreadsheetColumnLabel; document.getElementById('mc5sc').textContent='선택: '+cl(c)+(r+1)+(r!==r2||c!==c2?' ~ '+cl(c2)+(r2+1):''); var sum=0,has=false; for(var rr=r;rr<=r2;rr++)for(var cc=c;cc<=c2;cc++){var v=parseFloat(mc5hot.getDataAtCell(rr,cc));if(!isNaN(v)){sum+=v;has=true;}} document.getElementById('mc5ss').textContent=has?'합계: '+sum.toLocaleString():'합계: -'; } /* ───── 줌 ───── */ function mc5ApplyZoom(){ var rh=Math.round(MC5_BH*mc5zoom/100); document.getElementById('mc5zlbl').textContent=mc5zoom+'%'; if(!mc5hot)return; mc5hot.updateSettings({rowHeights:rh,cells:function(r,c){return mc5Cells(r,c);}}); mc5hot.render(); } function mc5Zoom(d){mc5zoom=Math.min(200,Math.max(50,mc5zoom+d*10));mc5ApplyZoom();mc5Save();} /* ───── 열 고정 ───── */ function mc5Freeze(){if(mc5hot)mc5hot.updateSettings({fixedColumnsLeft:parseInt(document.getElementById('mc5fzs').value)});mc5Save();} /* ───── 테마 ───── */ function mc5ApplyTmCls(t){ var w=document.getElementById('mc5w'); ['tm-mint','tm-warm','tm-slate','tm-rose'].forEach(function(x){w.classList.remove(x);}); if(t)w.classList.add(t); } function mc5Theme(t,el){ mc5tm=t;mc5ApplyTmCls(t); document.querySelectorAll('.mc5sw').forEach(function(s){s.classList.remove('on');}); if(el)el.classList.add('on'); if(mc5hot)mc5hot.render(); mc5Save(); } /* ───── 전체화면 ───── */ function mc5Fullscreen(){ var w=document.getElementById('mc5w');var b=document.getElementById('mc5fsb'); w.classList.toggle('mc5fs'); b.textContent=w.classList.contains('mc5fs')?'↩ 돌아오기':' 전체보기'; setTimeout(function(){if(mc5hot)mc5hot.render();},200); } /* ───── 엑셀 불러오기 ───── */ function mc5LoadExcel(){document.getElementById('mc5fi').click();} function mc5ParseXlsx(buf){ var wb=XLSX.read(buf,{type:'array'}); var ws=wb.Sheets[wb.SheetNames[0]]; var json=XLSX.utils.sheet_to_json(ws,{header:1,defval:''}); var mx=Math.max.apply(null,json.map(function(r){return r.length;}).concat([10])); return json.map(function(r){while(r.length<mx)r.push('');return r;}); } function mc5HandleFile(ev){ var file=ev.target.files[0];if(!file)return; if(file.name.toLowerCase().endsWith('.json')){ var rd=new FileReader(); rd.onload=function(e){ try{ var st=JSON.parse(e.target.result); mc5chk=st.chk||st.chkCols||[];mc5mc=st.mc||st.mCells||[]; mc5zoom=st.zoom||100;mc5tm=st.tm||st.theme||''; if(st.frz||st.freeze)document.getElementById('mc5fzs').value=st.frz||st.freeze; mc5ApplyTmCls(mc5tm);mc5InitHot(st.data||mc5Empty(20,10));mc5ApplyZoom();mc5Save(); alert('✅ 파일 복원 완료! 저장일시: '+(st.savedAt||'알 수 없음')); }catch(err){alert('오류: '+err.message);} };rd.readAsText(file); }else{ var rd=new FileReader(); rd.onload=function(e){ try{mc5chk=[];mc5mc=[];mc5InitHot(mc5ParseXlsx(e.target.result));mc5Save();alert('✅ 엑셀 불러오기 완료!');} catch(err){alert('오류: '+err.message);} };rd.readAsArrayBuffer(file); } ev.target.value=''; } /* ───── 엑셀 저장 ───── */ function mc5SaveExcel(){ if(!mc5hot)return; var ws=XLSX.utils.aoa_to_sheet(mc5hot.getData()); var wb=XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb,ws,'출석체크'); XLSX.writeFile(wb,'출석체크_'+new Date().toISOString().slice(0,10)+'.xlsx'); } /* ───── 기기저장 ───── */ function mc5DevSave(){ if(!mc5hot)return; var st={data:mc5hot.getData(),chk:mc5chk,mc:mc5mc,zoom:mc5zoom,tm:mc5tm, frz:parseInt(document.getElementById('mc5fzs').value)||1,savedAt:new Date().toISOString()}; var blob=new Blob([JSON.stringify(st)],{type:'application/json'}); var a=document.createElement('a');a.href=URL.createObjectURL(blob); a.download='출첵저장_'+new Date().toISOString().slice(0,16).replace('T','_')+'.json'; a.click();URL.revokeObjectURL(a.href); alert('✅ 기기에 저장 완료! [불러오기]로 복원 가능합니다.'); } /* ───── 체크열 ───── */ function mc5OpenChk(){ if(!mc5hot)return; var n=mc5hot.countCols(),d=document.getElementById('mc5cc');d.innerHTML=''; for(var i=0;i<n;i++){ var l=Handsontable.helper.spreadsheetColumnLabel(i); var sp=document.createElement('span'); sp.className='mc5ci'+(mc5chk.indexOf(i)>-1?' on':''); sp.textContent=l+'열';sp.setAttribute('data-col',i); sp.onclick=(function(el){return function(){el.classList.toggle('on');};})(sp); d.appendChild(sp); } document.getElementById('mc5chkbg').classList.add('show'); } function mc5ApplyChk(){ mc5chk=[]; document.querySelectorAll('#mc5cc .mc5ci').forEach(function(x){if(x.classList.contains('on'))mc5chk.push(parseInt(x.getAttribute('data-col')));}); mc5hot.updateSettings({cells:function(r,c){return mc5Cells(r,c);}});mc5hot.render();mc5Save();mc5CloseM('mc5chkbg'); } /* ───── 셀 병합 ───── */ function mc5OpenMerge(){mc5RefreshSel();mc5RenderMl();document.getElementById('mc5mgbg').classList.add('show');} function mc5RefreshSel(){ if(!mc5hot)return; var sel=mc5hot.getSelectedLast(),si=document.getElementById('mc5si'); if(!sel){si.textContent='없음 (그리드에서 먼저 선택)';return;} var r1=sel[0],c1=sel[1],r2=sel[2],c2=sel[3]; var cl=Handsontable.helper.spreadsheetColumnLabel; si.textContent=cl(Math.min(c1,c2))+(Math.min(r1,r2)+1)+' ~ '+cl(Math.max(c1,c2))+(Math.max(r1,r2)+1); } function mc5DoMerge(){ if(!mc5hot)return;var sel=mc5hot.getSelectedLast(); if(!sel){alert('셀을 먼저 선택하세요.');return;} var minR=Math.min(sel[0],sel[2]),maxR=Math.max(sel[0],sel[2]); var minC=Math.min(sel[1],sel[3]),maxC=Math.max(sel[1],sel[3]); if(minR===maxR&&minC===maxC){alert('2개 이상 선택하세요.');return;} mc5mc=mc5mc.filter(function(m){return!(m.row===minR&&m.col===minC&&m.rowspan===(maxR-minR+1)&&m.colspan===(maxC-minC+1));}); mc5mc.push({row:minR,col:minC,rowspan:maxR-minR+1,colspan:maxC-minC+1}); mc5hot.updateSettings({mergeCells:mc5mc});mc5hot.render();mc5Save();mc5RefreshSel();mc5RenderMl();alert('✅ 병합 완료!'); } function mc5DoUnmerge(){ if(!mc5hot)return;var sel=mc5hot.getSelectedLast(); if(!sel){alert('해제할 셀을 선택하세요.');return;} var minR=Math.min(sel[0],sel[2]),maxR=Math.max(sel[0],sel[2]); var minC=Math.min(sel[1],sel[3]),maxC=Math.max(sel[1],sel[3]); var before=mc5mc.length; mc5mc=mc5mc.filter(function(m){ var er=m.row+m.rowspan-1,ec=m.col+m.colspan-1; return er<minR||m.row>maxR||ec<minC||m.col>maxC; }); if(mc5mc.length===before){alert('병합된 셀이 없습니다.');return;} mc5hot.updateSettings({mergeCells:mc5mc});mc5hot.render();mc5Save();mc5RenderMl();alert('✅ 해제 완료!'); } function mc5SplitCell(){mc5DoUnmerge();} function mc5RenderMl(){ var d=document.getElementById('mc5ml');var cl=Handsontable.helper.spreadsheetColumnLabel; if(!mc5mc.length){d.textContent='병합 없음';return;} d.innerHTML=mc5mc.map(function(m,i){ return '<span style="display:inline-block;margin:2px 3px;padding:2px 6px;background:#e8f0fe;border-radius:3px">'+ cl(m.col)+(m.row+1)+'~'+cl(m.col+m.colspan-1)+(m.row+m.rowspan)+'</span>'; }).join(''); } /* ───── PDF ───── */ function mc5OpenPdf(){document.getElementById('mc5pdfbg').classList.add('show');} async function mc5GetCanvas(){return await html2canvas(document.getElementById('mc5gw'),{scale:2,useCORS:true,backgroundColor:'#fff'});} async function mc5PdfPrev(btn){ var ot=btn.textContent;btn.textContent='⏳...'; try{var c=await mc5GetCanvas();var p=document.getElementById('mc5pv');p.innerHTML='';var img=new Image();img.src=c.toDataURL('image/png');img.style.maxWidth='100%';p.appendChild(img);} catch(e){alert('미리보기 실패: '+e.message);} btn.textContent=ot; } async function mc5PdfDl(btn){ var ot=btn.textContent;btn.textContent='⏳...'; try{ var or=document.getElementById('mc5po').value,sz=document.getElementById('mc5ps').value,ft=document.getElementById('mc5pf').checked; var c=await mc5GetCanvas();var{jsPDF}=window.jspdf; var pdf=new jsPDF({orientation:or,unit:'mm',format:sz}); var pw=pdf.internal.pageSize.getWidth(),ph=pdf.internal.pageSize.getHeight(); var iw=pw-10,ih=(c.height/c.width)*iw; if(ft&&ih>ph-10){ih=ph-10;iw=(c.width/c.height)*ih;} pdf.addImage(c.toDataURL('image/png'),'PNG',5,5,iw,ih); pdf.save('출석체크_'+new Date().toISOString().slice(0,10)+'.pdf'); }catch(e){alert('PDF 실패: '+e.message);} btn.textContent=ot; } /* ───── QR ───── */ function mc5OpenQr(){ if(!mc5hot)return; var st={data:mc5hot.getData(),chk:mc5chk,mc:mc5mc,tm:mc5tm}; var comp=LZString.compressToEncodedURIComponent(JSON.stringify(st)); var url=window.location.origin+window.location.pathname+'?mc5d='+comp; if(url.length>2953){alert('⚠️ 데이터가 너무 많아 QR 생성이 어렵습니다. [기기저장]을 이용하세요.');return;} mc5qUrl=url; document.getElementById('mc5qrbox').innerHTML=''; document.getElementById('mc5qrurl').textContent=url; new QRCode(document.getElementById('mc5qrbox'),{text:url,width:200,height:200,colorDark:'#2c3e50',colorLight:'#ffffff',correctLevel:QRCode.CorrectLevel.M}); document.getElementById('mc5qrbg').classList.add('show'); } function mc5CopyQr(){navigator.clipboard.writeText(mc5qUrl).then(function(){alert('✅ 링크 복사 완료!');});} function mc5DlQr(){var c=document.querySelector('#mc5qrbox canvas');if(!c){alert('QR을 먼저 생성하세요.');return;}var a=document.createElement('a');a.href=c.toDataURL('image/png');a.download='QR공유.png';a.click();} /* ───── 공유 링크 ───── */ function mc5Share(){ if(!mc5hot)return; var st={data:mc5hot.getData(),chk:mc5chk,mc:mc5mc,tm:mc5tm}; var comp=LZString.compressToEncodedURIComponent(JSON.stringify(st)); var url=window.location.origin+window.location.pathname+'?mc5d='+comp; if(url.length>8000){alert('⚠️ 데이터가 너무 많습니다. 기기저장을 이용하세요.');return;} navigator.clipboard.writeText(url).then(function(){alert('✅ 링크 복사 완료!');}); } /* ───── 구글시트 / 메일 ───── */ function mc5GoGs(){ if(!mc5hot)return; mc5hot.selectCells([[0,0,mc5hot.countRows()-1,mc5hot.countCols()-1]]); document.execCommand('copy'); alert(' 복사 완료! 구글 시트에서 Ctrl+V 하세요.'); window.open('https://docs.google.com/spreadsheets/u/0/create','_blank'); } function mc5Mail(){window.location.href='mailto:?subject=출석체크 데이터&body=출첵 데이터를 확인하세요.';} /* ───── 리셋 ───── */ function mc5Reset(){ if(!confirm('⚠️ 모든 데이터를 초기화할까요?'))return; localStorage.removeItem(MC5_SK);mc5chk=[];mc5mc=[];mc5zoom=100;mc5tm=''; mc5ApplyTmCls('');mc5ApplyZoom();mc5InitHot(mc5Empty(20,10)); } /* ───── 모달 ───── */ function mc5CloseM(id){document.getElementById(id).classList.remove('show');} document.querySelectorAll('.mc5mbg').forEach(function(bg){ bg.addEventListener('click',function(e){if(e.target===this)this.classList.remove('show');}); }); /* ───── 드래그앤드롭 ───── */ var mc5gw=document.getElementById('mc5gw'); mc5gw.addEventListener('dragover',function(e){e.preventDefault();this.style.border='2px dashed #4a6fa5';}); mc5gw.addEventListener('dragleave',function(){this.style.border='1px solid #c5cfe0';}); mc5gw.addEventListener('drop',function(e){ e.preventDefault();this.style.border='1px solid #c5cfe0'; var file=e.dataTransfer.files[0];if(!file)return; if(file.name.toLowerCase().endsWith('.json')){ var rd=new FileReader();rd.onload=function(ev){ try{var st=JSON.parse(ev.target.result);mc5chk=st.chk||[];mc5mc=st.mc||[];mc5zoom=st.zoom||100;mc5tm=st.tm||''; if(st.frz)document.getElementById('mc5fzs').value=st.frz; mc5ApplyTmCls(mc5tm);mc5InitHot(st.data||mc5Empty(20,10));mc5ApplyZoom();mc5Save();alert('✅ 복원 완료!');} catch(err){alert('오류: '+err.message);} };rd.readAsText(file); }else if(file.name.match(/.(xlsx|xls|csv)$/i)){ var rd=new FileReader();rd.onload=function(ev){ try{mc5chk=[];mc5mc=[];mc5InitHot(mc5ParseXlsx(ev.target.result));mc5Save();alert('✅ 엑셀 불러오기 완료!');} catch(err){alert('오류: '+err.message);} };rd.readAsArrayBuffer(file); } }); /* ───── 자동저장 5초 ───── */ setInterval(function(){if(mc5hot)mc5Save();},5000); /* ───── 앱 초기화 (라이브러리 로드 완료 후 호출됨) ───── */ function mc5Init(){ var ud=mc5LoadUrl(); if(ud){mc5InitHot(ud);} else{var sd=mc5LoadSaved();mc5InitHot(sd||mc5Empty(20,10));} mc5ApplyZoom();mc5UpdateSb(); } </script> 모두의계산기 계산기 발표 채점 출석체크 출첵 최매슨생 https://0-1.kr/95 https://0-1.kr/95#entry95comment Tue, 27 Jan 2026 17:07:50 +0900 https://0-1.kr/90 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>단축키 검색 계산기_V6_(260904)</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <style> * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin:0; padding:0; background:#f0f2f5; } body { font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; color:#222; padding-bottom: 40px; } .sk-wrap { max-width: 760px; margin: 0 auto; padding: 12px 12px 24px 12px; } .sk-title-bar { display:flex; align-items:center; justify-content:space-between; background:#2b3a55; color:#fff; padding:14px 16px; border-radius:14px; margin-bottom: 12px; } .sk-title-bar h1 { font-size: 17px; margin:0; font-weight:700; line-height:1.3; } .sk-title-bar .sk-ver { font-size: 11px; opacity:0.75; font-weight:400; display:block; margin-top:2px; } .sk-share-btn { background:#4a63a3; color:#fff; border:none; border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight:600; touch-action: manipulation; -webkit-appearance: none; appearance:none; } .sk-share-btn:active { background:#3a4f85; } .sk-section-label { font-size:13px; font-weight:700; color:#5a6478; margin: 14px 4px 8px 4px; display:flex; justify-content:space-between; align-items:center; } .sk-reset-btn { background:#fff; color:#c0392b; border:1.5px solid #f0c4bd; border-radius:999px; padding: 4px 12px; font-size:12px; font-weight:700; touch-action:manipulation; -webkit-appearance:none; } .sk-guide-box { background:#fff; border-radius:14px; padding: 22px 16px; text-align:center; color:#8993a8; font-size:14.5px; line-height:1.6; margin-top: 10px; } /* ----- 프로그램 탭 + 즐겨찾기 ----- */ .sk-progtab-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom: 4px; } .sk-progtab-btn { flex:1; min-width:15%; font-size: 13.5px; font-weight:800; padding: 12px 4px; border-radius: 12px; background:#fff; color:#2b3a55; border: 2px solid #dbe0ea; touch-action: manipulation; -webkit-appearance:none; appearance:none; text-align:center; } .sk-progtab-btn.sk-active { background:#2b3a55; color:#fff; border-color:#2b3a55; } .sk-progtab-btn.sk-fav-btn { background:#fff9e6; color:#8a6d00; border-color:#f0d878; } .sk-progtab-btn.sk-fav-btn.sk-active { background:#f0b90b; color:#fff; border-color:#f0b90b; } /* ----- 아코디언(필터 패널) ----- */ .sk-filter-panel { max-height: 2000px; opacity:1; overflow:hidden; transition: max-height 0.25s ease, opacity 0.2s ease; } .sk-filter-panel.sk-collapsed { max-height:0; opacity:0; } /* ----- 모드 선택 ----- */ .sk-mode-row { display:flex; gap:8px; margin-bottom: 4px; } .sk-mode-btn { flex:1; font-size: 14.5px; font-weight:700; padding: 12px 10px; border-radius: 12px; background:#fff; color:#2b3a55; border: 2px solid #dbe0ea; touch-action: manipulation; -webkit-appearance:none; appearance:none; text-align:center; } .sk-mode-btn.sk-active { background:#2b3a55; color:#fff; border-color:#2b3a55; } .sk-mode-hint2 { font-size:12.5px; color:#8993a8; margin: 8px 4px 6px 4px; } /* ----- 태그(수정키/키토큰/분류) ----- */ .sk-tag-row { display:flex; flex-wrap:wrap; gap:7px; margin-bottom: 4px; } .sk-tag { font-size: 13.5px; font-weight:700; padding: 8px 13px; border-radius: 999px; background:#fff; color:#2b3a55; border: 2px solid #dbe0ea; touch-action: manipulation; -webkit-appearance:none; appearance:none; user-select:none; -webkit-user-select:none; } .sk-tag.sk-active { background:#e0862a; border-color:#e0862a; color:#fff; } .sk-tag-t2 { font-size: 12.5px; font-weight:700; padding: 7px 12px; border-radius: 999px; background:#fff; color:#1f6a8a; border: 2px solid #cfe3ec; touch-action: manipulation; -webkit-appearance:none; appearance:none; } .sk-tag-t2.sk-active { background:#1f8a5c; border-color:#1f8a5c; color:#fff; } .sk-tag-t3 { font-size: 12.5px; font-weight:700; padding: 7px 11px; border-radius: 999px; background:#fff; color:#555; border: 2px solid #e2e2e2; touch-action: manipulation; -webkit-appearance:none; appearance:none; } .sk-tag-t3.sk-active { background:#5a6478; border-color:#5a6478; color:#fff; } .sk-tag.sk-mid.sk-active { background:#1f8a5c; border-color:#1f8a5c; color:#fff; } .sk-tag.sk-sub.sk-active { background:#8a3fc4; border-color:#8a3fc4; color:#fff; } .sk-tag:disabled { opacity:0.4; } .sk-tag-subtle { font-size:11.5px; color:#a3abbb; margin: 2px 4px 8px 4px; } /* ----- 단축키 리스트 (항상 표시) ----- */ .sk-list-box { background:#fff; border-radius:14px; padding: 14px; margin-top: 8px; } .sk-list-count { font-size:13px; color:#5a6478; margin: 0 2px 12px 2px; font-weight:700; } .sk-list-count b { color:#e0862a; } .sk-group-block { margin-bottom: 16px; } .sk-group-block:last-child { margin-bottom: 0; } .sk-group-header { font-size:13.5px; font-weight:800; color:#fff; margin: 0 0 8px 0; padding: 6px 12px; border-radius:8px; display:inline-block; } .sk-group-header.sk-g-ctrl { background:#2b3a55; } .sk-group-header.sk-g-alt { background:#e0862a; } .sk-group-header.sk-g-shift { background:#1f8a5c; } .sk-group-header.sk-g-etc { background:#8a3fc4; } .sk-group-header.sk-g-fav { background:#f0b90b; } .sk-grid3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:7px; } .sk-item-mini { background:#f7f8fb; border-radius:9px; padding: 8px 26px 8px 9px; border:1px solid #eaedf3; display:flex; flex-direction:column; gap:3px; min-width:0; position:relative; } .sk-item-mini .sk-item-keys { font-family: "SFMono-Regular", Consolas, Menlo, monospace; font-weight:700; font-size:12.5px; color:#2b3a55; word-break: break-word; } .sk-item-mini .sk-item-desc { font-size:11px; color:#3a4356; line-height:1.4; } .sk-star-btn { position:absolute; top:4px; right:4px; background:none; border:none; font-size:16px; line-height:1; padding:2px; touch-action:manipulation; -webkit-appearance:none; color:#d8ac1f; } .sk-fav-list { display:flex; flex-direction:column; gap:8px; } .sk-fav-item { background:#fffdf5; border:1px solid #f0d878; border-radius:12px; padding: 10px 34px 10px 12px; position:relative; } .sk-fav-item .sk-item-keys { font-family: "SFMono-Regular", Consolas, Menlo, monospace; font-weight:700; font-size:14px; color:#2b3a55; } .sk-fav-item .sk-item-desc { font-size:13px; color:#3a4356; line-height:1.4; margin-top:3px; } .sk-fav-item .sk-star-btn { top:8px; right:8px; font-size:19px; } .sk-fav-note { width:100%; margin-top:8px; font-size:13px; padding:8px 10px; border-radius:8px; border:1px solid #e5dcb8; background:#fff; -webkit-appearance:none; } .sk-toast { position:fixed; left:50%; bottom:24px; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background:#222; color:#fff; padding:12px 18px; border-radius: 10px; font-size:14px; z-index:2147483647; opacity:0; pointer-events:none; transition: opacity 0.2s; } .sk-toast.sk-show { opacity:0.95; } .sk-modal-overlay { position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.5); z-index:2147483647; display:none; touch-action:none; } .sk-modal-overlay.sk-open { display:flex; align-items:center; justify-content:center; } .sk-modal-box { background:#fff; border-radius:16px; padding:20px; width:88%; max-width:380px; max-height:80%; overflow-y:auto; } .sk-modal-box h3 { margin:0 0 12px 0; font-size:16px; color:#2b3a55; } .sk-modal-row { display:flex; gap:8px; margin-bottom:10px; } .sk-modal-link { flex:1; min-width:0; font-size:13px; padding:10px; border-radius:8px; border:1px solid #dbe0ea; background:#f7f8fb; color:#333; word-break: break-all; } .sk-modal-copy-btn { background:#2b3a55; color:#fff; border:none; border-radius:8px; padding: 0 14px; font-size:13px; font-weight:700; touch-action:manipulation; -webkit-appearance:none; } .sk-modal-qr { text-align:center; margin: 12px 0; } .sk-modal-note { font-size:12px; color:#8993a8; line-height:1.5; margin-bottom:10px; } .sk-modal-close { display:block; width:100%; text-align:center; background:#eef1f7; color:#2b3a55; border:none; border-radius:10px; padding:12px; font-size:14px; font-weight:700; margin-top:6px; touch-action:manipulation; -webkit-appearance:none; } .sk-footer-note { text-align:center; font-size:11px; color:#a3abbb; margin-top: 26px; line-height:1.6; } @media (max-width: 420px) { .sk-grid3 { grid-template-columns: repeat(3, 1fr); gap:5px; } .sk-item-mini .sk-item-keys { font-size:11.5px; } .sk-item-mini .sk-item-desc { font-size:10px; } .sk-progtab-btn { font-size:12px; padding:10px 3px; } } </style> </head> <body> <div class="sk-wrap"> <div class="sk-title-bar"> <h1>단축키 검색 계산기<span class="sk-ver">단축키검색계산기_V6_(260904)</span></h1> <button type="button" class="sk-share-btn" id="skShareBtn">공유</button> </div> <div class="sk-section-label"><span>① 프로그램 선택 (먼저 골라주세요)</span></div> <div class="sk-progtab-row" id="skProgRow"></div> <div class="sk-filter-panel" id="skFilterPanel"> <div class="sk-section-label"><span>② 찾는 방식</span></div> <div class="sk-mode-row"> <button type="button" class="sk-mode-btn" id="skModeKeys"> 단축키로 찾기</button> <button type="button" class="sk-mode-btn" id="skModeCat"> 분류(상 · 중 · 하)로 찾기</button> </div> <div class="sk-mode-hint2" id="skModeHint"></div> <div id="skTagArea"></div> </div> <div class="sk-list-box"> <div id="skListGuide" class="sk-guide-box" style="display:none;"></div> <div id="skListCount" class="sk-list-count" style="display:none;"></div> <div id="skListBody"></div> </div> <div class="sk-footer-note">스타트업EX · cds1981@naver.com</div> </div> <div class="sk-toast" id="skToast"></div> <div class="sk-modal-overlay" id="skModalOverlay"> <div class="sk-modal-box"> <h3>결과 공유하기</h3> <div class="sk-modal-note" id="skModalSizeNote"></div> <div class="sk-modal-row"> <input type="text" class="sk-modal-link" id="skModalLink" readonly> <button type="button" class="sk-modal-copy-btn" id="skModalCopyBtn">복사</button> </div> <div class="sk-modal-qr" id="skModalQr"></div> <button type="button" class="sk-modal-close" id="skModalCloseBtn">닫기</button> </div> </div> <script> (function(){ "use strict"; var CATS = [ { id:"win", label:"윈도우" }, { id:"excel", label:"엑셀" }, { id:"hangul", label:"한글" }, { id:"ppt", label:"ppt" }, { id:"chrome", label:"크롬" } ]; var CAT_LABEL = {}; for (var _i=0; _i<CATS.length; _i++){ CAT_LABEL[CATS[_i].id] = CATS[_i].label; } var GROUP_ORDER = ["ctrl","alt","shift","etc"]; var GROUP_LABEL = { ctrl:"Ctrl 조합", alt:"Alt 조합", shift:"Shift 조합", etc:"기타 (Win · 기능키 등)" }; function groupOf(item){ if (item.mods.indexOf("ctrl") > -1) { return "ctrl"; } if (item.mods.indexOf("alt") > -1) { return "alt"; } if (item.mods.indexOf("shift") > -1) { return "shift"; } return "etc"; } var TIER1_SET = ["Ctrl","Alt","Win","Shift","Tab"]; var TIER2_SET = ["Home","End","PageUp","PageDown","Page Up","Page Down","Insert","Delete","Esc", "Space","↑","↓","←","→","Pause","Print Screen","방향키","화살표"]; function classifyTier(tok){ if (TIER1_SET.indexOf(tok) > -1) { return 1; } if (/^F\d{1,2}$/.test(tok)) { return 2; } if (TIER2_SET.indexOf(tok) > -1) { return 2; } return 3; } function deriveTags(keysStr){ var alts = keysStr.split("/"); var seen = {}; var order = []; for (var a=0; a<alts.length; a++){ var alt = alts[a].replace(/\([^)]*\)/g, "").trim(); if (!alt) { continue; } var parts = alt.split("+"); for (var p=0; p<parts.length; p++){ var tok = parts[p].trim(); if (!tok) { continue; } if (!seen[tok]) { seen[tok] = true; order.push(tok); } } } return order; } // 프로그램별 중분류(중) / 소분류(하) 트리 var CAT_TREE = { win: [ { id:"win_screen", label:"창·화면관리", subs:[ { id:"win_screen_switch", label:"창 전환·정렬" }, { id:"win_screen_capture", label:"캡처·화면보기" } ]}, { id:"win_file", label:"파일·탐색기", subs:[ { id:"win_file_explore", label:"탐색·열기" }, { id:"win_file_manage", label:"삭제·정리" } ]}, { id:"win_edit", label:"편집·선택", subs:[ { id:"win_edit_copy", label:"복사·붙여넣기" }, { id:"win_edit_undo", label:"실행취소·선택" } ]}, { id:"win_sys", label:"시스템·보안", subs:[ { id:"win_sys_taskmgr", label:"작업관리자·잠금" }, { id:"win_sys_settings", label:"설정·메뉴" } ]}, { id:"win_window", label:"창 제어", subs:[ { id:"win_window_tab", label:"탭·가상데스크톱" }, { id:"win_window_close", label:"닫기·속성" } ]}, { id:"win_winkey", label:"Win 키 전체(A~Z)", subs:[ { id:"win_winkey_am", label:"A~M" }, { id:"win_winkey_nz", label:"N~Z" }, { id:"win_winkey_etc", label:"숫자·기타" } ]} ], excel: [ { id:"excel_format", label:"서식", subs:[ { id:"excel_format_cell", label:"셀 서식·테두리" }, { id:"excel_format_font", label:"글꼴 서식" } ]}, { id:"excel_edit", label:"복사·편집", subs:[ { id:"excel_edit_copy", label:"복사·붙여넣기" }, { id:"excel_edit_undo", label:"실행취소·지우기" } ]}, { id:"excel_fill", label:"채우기·계산", subs:[ { id:"excel_fill_fill", label:"채우기" }, { id:"excel_fill_calc", label:"계산·재계산" } ]}, { id:"excel_nav", label:"선택·이동", subs:[ { id:"excel_nav_range", label:"범위 선택" }, { id:"excel_nav_sheet", label:"시트·셀 이동" } ]}, { id:"excel_find", label:"찾기·필터", subs:[ { id:"excel_find_find", label:"찾기·바꾸기" }, { id:"excel_find_filter", label:"필터·메뉴" } ]}, { id:"excel_file", label:"파일·삽입", subs:[ { id:"excel_file_save", label:"저장·인쇄" }, { id:"excel_file_insert", label:"삽입·기타" } ]} ], hangul: [ { id:"hangul_doc", label:"문서 만들기", subs:[ { id:"hangul_doc_new", label:"새문서·쪽나누기" }, { id:"hangul_doc_insert", label:"표·그림 삽입" } ]}, { id:"hangul_style", label:"서식", subs:[ { id:"hangul_style_char", label:"글자모양" }, { id:"hangul_style_para", label:"문단·용지" } ]}, { id:"hangul_save", label:"저장·인쇄", subs:[ { id:"hangul_save_save", label:"저장" }, { id:"hangul_save_print", label:"인쇄·미리보기" } ]}, { id:"hangul_edit", label:"편집·선택", subs:[ { id:"hangul_edit_select", label:"선택·이동" }, { id:"hangul_edit_undo", label:"실행취소·복사" } ]}, { id:"hangul_input", label:"특수 입력", subs:[ { id:"hangul_input_special", label:"특수문자·한자" }, { id:"hangul_input_object", label:"수식·개체" } ]} ], ppt: [ { id:"ppt_show", label:"슬라이드 쇼 진행", subs:[ { id:"ppt_show_start", label:"쇼 시작·종료" }, { id:"ppt_show_control", label:"쇼 중 조작" } ]}, { id:"ppt_edit", label:"슬라이드 편집", subs:[ { id:"ppt_edit_insert", label:"삽입·복제" }, { id:"ppt_edit_group", label:"그룹화" } ]}, { id:"ppt_object", label:"개체 선택·서식", subs:[ { id:"ppt_object_select", label:"개체 선택" }, { id:"ppt_object_format", label:"서식 복사" } ]}, { id:"ppt_format", label:"텍스트 서식", subs:[ { id:"ppt_format_align", label:"정렬" }, { id:"ppt_format_font", label:"글꼴" } ]}, { id:"ppt_file", label:"파일·편집", subs:[ { id:"ppt_file_save", label:"저장·인쇄" }, { id:"ppt_file_edit", label:"복사·붙여넣기" } ]} ], chrome: [ { id:"chrome_tab", label:"탭 관리", subs:[ { id:"chrome_tab_open", label:"열기·닫기" }, { id:"chrome_tab_move", label:"탭 이동·검색" } ]}, { id:"chrome_window", label:"창·탐색", subs:[ { id:"chrome_window_new", label:"새 창" }, { id:"chrome_window_nav", label:"페이지 이동" } ]}, { id:"chrome_edit", label:"찾기·북마크", subs:[ { id:"chrome_edit_find", label:"찾기·북마크" }, { id:"chrome_edit_manage", label:"기록 관리" } ]}, { id:"chrome_view", label:"화면", subs:[ { id:"chrome_view_zoom", label:"확대·축소" }, { id:"chrome_view_screen", label:"전체화면·기타" }, { id:"chrome_view_scroll", label:"스크롤·이동" }, { id:"chrome_view_split", label:"분할 보기(Split View)" } ]}, { id:"chrome_history", label:"기록·인쇄", subs:[ { id:"chrome_history_dl", label:"기록·다운로드" }, { id:"chrome_history_etc", label:"인쇄·작업관리" } ]}, { id:"chrome_dev", label:"개발자 도구", subs:[ { id:"chrome_dev_tools", label:"DevTools·검사" } ]} ] }; /* ====================================================================== ▼▼▼ 단축키를 직접 추가하고 싶을 때 (수작업 가이드) ▼▼▼ ====================================================================== 아래 DATA 배열 안에, 원하는 위치(해당 프로그램 구역)에 아래 형식대로 한 줄(중괄호 { } 하나)을 복사해서 붙여넣고 값만 바꾸면 됩니다. 맨 끝에 쉼표(,)를 꼭 붙여주세요(마지막 줄이 아니라면). { cat:"win", keys:"Ctrl+Alt+T", mods:["ctrl","alt"], mid:"win_edit", sub:"win_edit_copy", desc:"여기에 이 단축키가 하는 일을 자세히 설명해주세요." }, ▷ cat : 어느 프로그램인지 (아래 5개 중 하나만 입력) "win"(윈도우) / "excel"(엑셀) / "hangul"(한글) / "ppt"(PPT) / "chrome"(크롬) ▷ keys : 화면에 보일 단축키 표기. 예) "Ctrl+Alt+T", "F9", "Win+Shift+S" 여러 키를 함께 누르면 + 로 연결, 대체키가 있으면 " / " 로 구분 (예: "Win+↑ / ↓" 처럼 쓰면 자동으로 #Win #↑ #↓ 3개 태그가 만들어져요) ▷ mods : "단축키로 찾기" 태그의 1단(수정키) 자동 분류에 쓰이는 배열입니다. keys 안에 포함된 수정키를 소문자로 그대로 나열하면 됩니다. 사용 가능한 값: "ctrl", "alt", "win", "shift", "tab" 수정키가 전혀 없는 단독 키(F5, Esc 등)라면 빈 배열 [] 로 둡니다. ※ 이 배열은 상단 Ctrl조합/Alt조합/Shift조합/기타 그룹 나누기에도 사용돼요 (ctrl이 있으면 Ctrl그룹, 없고 alt가 있으면 Alt그룹, 없고 shift가 있으면 Shift그룹, 아무 것도 없으면 기타그룹 — 이 우선순위로 자동 분류) ▷ mid : "분류로 찾기"의 중분류 id. 위쪽 CAT_TREE 안에서 해당 프로그램의 중분류 id 중 하나를 그대로 적으면 됩니다(예: "win_edit"). 새 중분류를 만들고 싶다면 CAT_TREE의 해당 프로그램 배열 안에 { id:"win_예시", label:"화면표시이름", subs:[ {id:"win_예시_a", label:"소분류1"} ] } 형태로 새 항목을 추가한 뒤, 여기 mid/sub에 그 id를 적으면 됩니다. ▷ sub : "분류로 찾기"의 소분류 id. mid로 지정한 중분류의 subs 배열 안에 있는 id 중 하나를 적습니다(예: "win_edit_copy"). ▷ desc : 화면에 보일 설명 문장. "무엇을 하는 단축키인지"를 완전한 문장으로 풀어 써주세요. (예: "선택한 내용을 클립보드에 복사합니다.") ※ 별(즐겨찾기) 아이콘과 태그는 keys 값을 기준으로 자동 연결되니 별도로 추가할 항목은 없습니다. 저장 후 파일을 다시 열면 바로 반영돼요. ====================================================================== */ // shortcut data (설명을 조금 더 자세하게 작성) var DATA = [ // ================= 윈도우 ================= { cat:"win", keys:"Ctrl+C", mods:["ctrl"], mid:"win_edit", sub:"win_edit_copy", desc:"선택한 파일이나 텍스트를 클립보드에 복사합니다. 이후 Ctrl+V로 다른 곳에 붙여넣을 수 있어요." }, { cat:"win", keys:"Ctrl+V", mods:["ctrl"], mid:"win_edit", sub:"win_edit_copy", desc:"클립보드에 복사되어 있는 내용을 현재 위치에 붙여넣습니다." }, { cat:"win", keys:"Ctrl+X", mods:["ctrl"], mid:"win_edit", sub:"win_edit_copy", desc:"선택한 항목을 잘라내어 클립보드로 이동시킵니다(원본은 붙여넣기 전까지 사라지지 않음)." }, { cat:"win", keys:"Ctrl+Z", mods:["ctrl"], mid:"win_edit", sub:"win_edit_undo", desc:"직전에 수행한 작업을 취소하고 이전 상태로 되돌립니다." }, { cat:"win", keys:"Ctrl+Y", mods:["ctrl"], mid:"win_edit", sub:"win_edit_undo", desc:"Ctrl+Z로 취소했던 작업을 다시 실행합니다." }, { cat:"win", keys:"Ctrl+A", mods:["ctrl"], mid:"win_edit", sub:"win_edit_undo", desc:"현재 창이나 문서의 모든 항목을 한 번에 선택합니다." }, { cat:"win", keys:"Ctrl+Esc", mods:["ctrl"], mid:"win_sys", sub:"win_sys_settings", desc:"Win 키를 누른 것과 같이 시작 메뉴를 엽니다(Win 키가 없는 키보드에서 유용)." }, { cat:"win", keys:"Ctrl+Shift+Esc", mods:["ctrl","shift"], mid:"win_sys", sub:"win_sys_taskmgr", desc:"작업 관리자를 바로 실행합니다. 응답 없는 프로그램을 강제 종료할 때 유용해요." }, { cat:"win", keys:"Ctrl+Alt+Delete", mods:["ctrl","alt"], mid:"win_sys", sub:"win_sys_taskmgr", desc:"잠금·로그아웃·작업 관리자 등을 선택할 수 있는 보안 옵션 화면을 엽니다." }, { cat:"win", keys:"Ctrl+Shift+N", mods:["ctrl","shift"], mid:"win_file", sub:"win_file_manage", desc:"현재 폴더(또는 바탕화면) 안에 이름 없는 새 폴더를 만듭니다." }, { cat:"win", keys:"Ctrl+Tab", mods:["ctrl","tab"], mid:"win_window", sub:"win_window_tab", desc:"같은 프로그램 안에서 열려 있는 다음 탭으로 이동합니다." }, { cat:"win", keys:"Ctrl+Shift+Tab", mods:["ctrl","shift","tab"], mid:"win_window", sub:"win_window_tab", desc:"같은 프로그램 안에서 열려 있는 이전 탭으로 이동합니다." }, { cat:"win", keys:"Win+Ctrl+D", mods:["win","ctrl"], mid:"win_window", sub:"win_window_tab", desc:"새로운 가상 데스크톱을 하나 추가합니다. 업무별로 화면을 분리해 쓸 때 편해요." }, { cat:"win", keys:"Win+Ctrl+← / →", mods:["win","ctrl"], mid:"win_window", sub:"win_window_tab", desc:"만들어 둔 가상 데스크톱 사이를 좌우로 전환합니다." }, { cat:"win", keys:"Win+Ctrl+F4", mods:["win","ctrl"], mid:"win_window", sub:"win_window_tab", desc:"현재 사용 중인 가상 데스크톱을 닫습니다(열려 있던 창은 이전 데스크톱으로 이동)." }, { cat:"win", keys:"Alt+Tab", mods:["alt","tab"], mid:"win_screen", sub:"win_screen_switch", desc:"현재 실행 중인 창들의 미리보기를 보여주며, 누르고 있는 동안 Tab을 더 눌러 원하는 창으로 전환합니다." }, { cat:"win", keys:"Alt+Shift+Tab", mods:["alt","shift","tab"], mid:"win_screen", sub:"win_screen_switch", desc:"Alt+Tab과 같은 창 전환 목록을 반대(이전) 방향으로 넘깁니다." }, { cat:"win", keys:"Alt+F4", mods:["alt"], mid:"win_window", sub:"win_window_close", desc:"현재 활성화된 창(프로그램)을 종료합니다. 바탕화면에서 누르면 종료 메뉴가 뜹니다." }, { cat:"win", keys:"Alt+Esc", mods:["alt"], mid:"win_screen", sub:"win_screen_switch", desc:"미리보기 없이 열려 있던 순서대로 창을 차례차례 전환합니다." }, { cat:"win", keys:"Alt+Space", mods:["alt"], mid:"win_sys", sub:"win_sys_settings", desc:"현재 창의 이동·크기 조정·최소화·닫기 등을 모아 둔 시스템(컨트롤) 메뉴를 엽니다." }, { cat:"win", keys:"Alt+Enter", mods:["alt"], mid:"win_window", sub:"win_window_close", desc:"선택한 파일이나 폴더의 속성(자세히) 창을 바로 엽니다." }, { cat:"win", keys:"Alt+Print Screen", mods:["alt"], mid:"win_screen", sub:"win_screen_capture", desc:"전체 화면이 아니라 현재 활성화된 창만 캡처해 클립보드에 저장합니다." }, { cat:"win", keys:"Shift+Delete", mods:["shift"], mid:"win_file", sub:"win_file_manage", desc:"선택한 항목을 휴지통을 거치지 않고 즉시, 완전히 삭제합니다(복구 불가하니 주의)." }, { cat:"win", keys:"Shift+F10", mods:["shift"], mid:"win_sys", sub:"win_sys_settings", desc:"마우스 오른쪽 버튼을 클릭한 것과 같은 상황(컨텍스트) 메뉴를 키보드로 엽니다." }, { cat:"win", keys:"Shift+Insert", mods:["shift"], mid:"win_edit", sub:"win_edit_copy", desc:"일부 프로그램에서 Ctrl+V 대신 사용할 수 있는 붙여넣기 단축키입니다." }, { cat:"win", keys:"Shift+방향키", mods:["shift"], mid:"win_edit", sub:"win_edit_undo", desc:"방향키를 누르는 대로 선택 범위를 한 칸씩 넓혀갑니다." }, { cat:"win", keys:"Win+Shift+S", mods:["win","shift"], mid:"win_screen", sub:"win_screen_capture", desc:"캡처 도구를 열어 화면 일부(사각형·자유형·창·전체)를 골라 캡처합니다." }, { cat:"win", keys:"Win+Shift+M", mods:["win","shift"], mid:"win_window", sub:"win_window_close", desc:"Win+M으로 모두 최소화했던 창들을 한 번에 원래대로 복구합니다." }, { cat:"win", keys:"Win+Shift+↑", mods:["win","shift"], mid:"win_screen", sub:"win_screen_switch", desc:"현재 창의 좌우 폭은 유지한 채 세로 길이만 화면 전체로 늘립니다." }, { cat:"win", keys:"Win+Tab", mods:["win","tab"], mid:"win_screen", sub:"win_screen_switch", desc:"작업 보기를 열어 실행 중인 모든 창과 가상 데스크톱을 한눈에 보여줍니다." }, { cat:"win", keys:"Win+↑ / ↓", mods:["win"], mid:"win_screen", sub:"win_screen_switch", desc:"현재 창을 화면 최대 크기로 키우거나(↑) 최소화·이전 크기로 줄입니다(↓)." }, { cat:"win", keys:"Win+← / →", mods:["win"], mid:"win_screen", sub:"win_screen_switch", desc:"현재 창을 화면 왼쪽 또는 오른쪽 절반에 붙여 두 창을 나란히 배치할 때 씁니다." }, { cat:"win", keys:"Win+.", mods:["win"], mid:"win_screen", sub:"win_screen_capture", desc:"이모지·기호·이모티콘을 고를 수 있는 입력창을 엽니다(마침표 또는 세미콜론 키)." }, { cat:"win", keys:"Win+,", mods:["win"], mid:"win_screen", sub:"win_screen_capture", desc:"키를 누르고 있는 동안만 잠깐 바탕화면을 살짝 보여줍니다(손을 떼면 원래 화면으로 복귀)." }, { cat:"win", keys:"F2", mods:[], mid:"win_file", sub:"win_file_explore", desc:"선택한 파일이나 폴더의 이름을 바로 편집할 수 있는 상태로 만듭니다." }, { cat:"win", keys:"F5", mods:[], mid:"win_file", sub:"win_file_explore", desc:"탐색기나 웹페이지 등 현재 화면의 내용을 최신 상태로 새로 고칩니다." }, { cat:"win", keys:"F11", mods:[], mid:"win_screen", sub:"win_screen_capture", desc:"현재 창(주로 브라우저)을 제목표시줄 없는 전체 화면 모드로 전환합니다." }, // Win 키 A~M { cat:"win", keys:"Win+A", mods:["win"], mid:"win_winkey", sub:"win_winkey_am", desc:"Wi-Fi·블루투스·볼륨·밝기 등을 한 번에 조절하는 빠른 설정 패널을 엽니다." }, { cat:"win", keys:"Win+B", mods:["win"], mid:"win_winkey", sub:"win_winkey_am", desc:"화면 오른쪽 아래 시스템 트레이(숨겨진 아이콘 영역)로 포커스를 이동합니다." }, { cat:"win", keys:"Win+C", mods:["win"], mid:"win_winkey", sub:"win_winkey_am", desc:"Chat(Teams) 앱을 엽니다. 이전 Windows 버전에서는 음성비서 Cortana가 실행됐습니다." }, { cat:"win", keys:"Win+D", mods:["win"], mid:"win_winkey", sub:"win_winkey_am", desc:"열려 있는 모든 창을 최소화해 바탕화면을 보여주고, 다시 누르면 원래대로 복원합니다." }, { cat:"win", keys:"Win+E", mods:["win"], mid:"win_winkey", sub:"win_winkey_am", desc:"파일 탐색기 새 창을 엽니다. 파일·폴더 관리를 시작할 때 가장 많이 쓰는 조합입니다." }, { cat:"win", keys:"Win+F", mods:["win"], mid:"win_winkey", sub:"win_winkey_am", desc:"Windows에 문제나 개선 아이디어를 보낼 수 있는 피드백 허브를 엽니다." }, { cat:"win", keys:"Win+G", mods:["win"], mid:"win_winkey", sub:"win_winkey_am", desc:"화면 녹화·캡처·성능 확인이 가능한 Xbox 게임 바를 엽니다." }, { cat:"win", keys:"Win+H", mods:["win"], mid:"win_winkey", sub:"win_winkey_am", desc:"마이크로 말한 내용을 텍스트로 바로 입력해주는 음성 입력(받아쓰기)을 시작합니다." }, { cat:"win", keys:"Win+I", mods:["win"], mid:"win_winkey", sub:"win_winkey_am", desc:"디스플레이·네트워크·개인 설정 등을 바꿀 수 있는 설정 앱을 엽니다." }, { cat:"win", keys:"Win+J", mods:["win"], mid:"win_winkey", sub:"win_winkey_am", desc:"화면에 표시된 Windows 추천·제안 항목으로 포커스를 이동합니다(사용 빈도가 낮은 편)." }, { cat:"win", keys:"Win+K", mods:["win"], mid:"win_winkey", sub:"win_winkey_am", desc:"다른 PC나 무선 디스플레이(Miracast 등)로 화면을 보내는 캐스트 패널을 엽니다." }, { cat:"win", keys:"Win+L", mods:["win"], mid:"win_winkey", sub:"win_winkey_am", desc:"자리를 비울 때 즉시 화면을 잠급니다. 다시 사용하려면 로그인이 필요합니다." }, { cat:"win", keys:"Win+M", mods:["win"], mid:"win_winkey", sub:"win_winkey_am", desc:"열려 있는 모든 창을 한 번에 최소화합니다(Win+D와 달리 다시 눌러도 자동 복원되지 않음)." }, // Win 키 N~Z { cat:"win", keys:"Win+N", mods:["win"], mid:"win_winkey", sub:"win_winkey_nz", desc:"알림 센터와 달력을 함께 열어 오늘 날짜와 최근 알림을 바로 확인합니다." }, { cat:"win", keys:"Win+O", mods:["win"], mid:"win_winkey", sub:"win_winkey_nz", desc:"태블릿 등에서 화면이 자동으로 회전되지 않도록 방향을 잠급니다." }, { cat:"win", keys:"Win+P", mods:["win"], mid:"win_winkey", sub:"win_winkey_nz", desc:"PC 화면만/복제/확장/두 번째 화면만 중 프레젠테이션(디스플레이) 모드를 고릅니다. 발표·외부 모니터 연결 시 유용해요." }, { cat:"win", keys:"Win+Q", mods:["win"], mid:"win_winkey", sub:"win_winkey_nz", desc:"앱·파일·웹을 한 번에 찾을 수 있는 검색창을 엽니다." }, { cat:"win", keys:"Win+R", mods:["win"], mid:"win_winkey", sub:"win_winkey_nz", desc:"프로그램 이름이나 경로를 입력해 바로 실행하는 '실행' 창을 엽니다(예: cmd, notepad)." }, { cat:"win", keys:"Win+S", mods:["win"], mid:"win_winkey", sub:"win_winkey_nz", desc:"Win+Q와 같은 검색창을 여는 또 다른 단축키입니다." }, { cat:"win", keys:"Win+T", mods:["win"], mid:"win_winkey", sub:"win_winkey_nz", desc:"작업표시줄에 있는 앱들을 하나씩 순환하며 미리보기로 선택합니다." }, { cat:"win", keys:"Win+U", mods:["win"], mid:"win_winkey", sub:"win_winkey_nz", desc:"화면 확대, 고대비 등 접근성(사용 편의) 관련 설정으로 바로 이동합니다." }, { cat:"win", keys:"Win+V", mods:["win"], mid:"win_winkey", sub:"win_winkey_nz", desc:"최근에 복사했던 여러 항목을 목록으로 보여주는 클립보드 기록을 엽니다(기능을 먼저 켜야 함)." }, { cat:"win", keys:"Win+W", mods:["win"], mid:"win_winkey", sub:"win_winkey_nz", desc:"날씨·뉴스·일정 등을 모아 보여주는 위젯 패널을 엽니다." }, { cat:"win", keys:"Win+X", mods:["win"], mid:"win_winkey", sub:"win_winkey_nz", desc:"설정·장치 관리자·작업 관리자 등으로 바로 이동하는 빠른 링크(고급 사용자) 메뉴를 엽니다." }, { cat:"win", keys:"Win+Y", mods:["win"], mid:"win_winkey", sub:"win_winkey_nz", desc:"혼합현실(Windows Mixed Reality) 전용 기기에서 입력을 데스크톱과 전환합니다(일반 PC에서는 해당 없음)." }, { cat:"win", keys:"Win+Z", mods:["win"], mid:"win_winkey", sub:"win_winkey_nz", desc:"창을 화면에 여러 구획으로 나눠 배치할 수 있는 스냅 레이아웃 패널을 보여줍니다." }, // Win 숫자·기타 { cat:"win", keys:"Win+0~9", mods:["win"], mid:"win_winkey", sub:"win_winkey_etc", desc:"작업표시줄에 고정해 둔 순서대로 해당 번호의 앱을 실행하거나 전환합니다." }, { cat:"win", keys:"Win+Home", mods:["win"], mid:"win_winkey", sub:"win_winkey_etc", desc:"현재 활성 창을 제외한 나머지 모든 창을 최소화하고, 다시 누르면 복원합니다." }, { cat:"win", keys:"Win+Pause", mods:["win"], mid:"win_winkey", sub:"win_winkey_etc", desc:"PC 이름·사양·Windows 버전을 확인할 수 있는 시스템 속성 창을 엽니다." }, { cat:"win", keys:"Win+Space", mods:["win"], mid:"win_winkey", sub:"win_winkey_etc", desc:"여러 개 등록된 키보드 입력 언어(한/영 등)를 순서대로 전환합니다." }, { cat:"win", keys:"Win+Ctrl+Q", mods:["win","ctrl"], mid:"win_winkey", sub:"win_winkey_etc", desc:"원격으로 도움을 주고받을 수 있는 빠른 지원(Quick Assist)을 엽니다." }, { cat:"win", keys:"Win+Alt+R", mods:["win","alt"], mid:"win_winkey", sub:"win_winkey_etc", desc:"Xbox 게임 바로 현재 게임 창의 화면 녹화를 시작하거나 멈춥니다." }, { cat:"win", keys:"Win+Ctrl+C", mods:["win","ctrl"], mid:"win_winkey", sub:"win_winkey_etc", desc:"색맹 보조 등을 위한 색 필터를 켜거나 끕니다(설정에서 이 단축키를 먼저 활성화해야 함)." }, { cat:"win", keys:"Win+Ctrl+Enter", mods:["win","ctrl"], mid:"win_winkey", sub:"win_winkey_etc", desc:"화면 내용을 음성으로 읽어주는 내레이터를 켜거나 끕니다." }, { cat:"win", keys:"Win++ / Win+-", mods:["win"], mid:"win_winkey", sub:"win_winkey_etc", desc:"돋보기를 켜고 화면을 확대(+)하거나 축소(-)합니다." }, { cat:"win", keys:"Win+Esc", mods:["win"], mid:"win_winkey", sub:"win_winkey_etc", desc:"켜져 있던 돋보기를 닫습니다." }, { cat:"win", keys:"Win+Ctrl+Shift+B", mods:["win","ctrl","shift"], mid:"win_sys", sub:"win_sys_settings", desc:"화면이 까맣게 멈췄을 때 그래픽을 다시 초기화해 PC를 깨웁니다." }, { cat:"win", keys:"Win+PrtScr", mods:["win"], mid:"win_screen", sub:"win_screen_capture", desc:"전체 화면을 캡처해 '사진 > 스크린샷' 폴더에 파일로 자동 저장합니다." }, { cat:"win", keys:"Win+Shift+V", mods:["win","shift"], mid:"win_sys", sub:"win_sys_settings", desc:"화면에 뜬 알림들 사이로 포커스를 이동해 키보드로 확인할 수 있게 합니다." }, { cat:"win", keys:"Alt+F8", mods:["alt"], mid:"win_sys", sub:"win_sys_settings", desc:"로그인 화면에서 입력 중인 비밀번호를 잠깐 화면에 보여줍니다." }, { cat:"win", keys:"F3", mods:[], mid:"win_file", sub:"win_file_explore", desc:"파일 탐색기에서 파일이나 폴더를 검색하는 검색창으로 이동합니다." }, { cat:"win", keys:"F4", mods:[], mid:"win_file", sub:"win_file_explore", desc:"파일 탐색기 주소창의 최근 경로 목록을 펼쳐 보여줍니다." }, { cat:"win", keys:"F10", mods:[], mid:"win_sys", sub:"win_sys_settings", desc:"현재 프로그램 창 위쪽의 메뉴 모음(파일·편집 등)을 활성화합니다." }, { cat:"win", keys:"Alt+P", mods:["alt"], mid:"win_file", sub:"win_file_explore", desc:"파일 탐색기에서 선택한 파일의 미리보기 창을 표시하거나 숨깁니다." }, { cat:"win", keys:"Alt+↑", mods:["alt"], mid:"win_file", sub:"win_file_explore", desc:"파일 탐색기에서 현재 폴더의 상위(부모) 폴더로 이동합니다." }, { cat:"win", keys:"Ctrl+Backspace", mods:["ctrl"], mid:"win_edit", sub:"win_edit_undo", desc:"커서 바로 앞에 입력된 단어 전체를 한 번에 지웁니다." }, // ================= 엑셀 ================= { cat:"excel", keys:"Ctrl+1", mods:["ctrl"], mid:"excel_format", sub:"excel_format_cell", desc:"선택한 셀의 표시 형식·글꼴·테두리·채우기를 한 번에 설정하는 셀 서식 창을 엽니다." }, { cat:"excel", keys:"Ctrl+Shift+&", mods:["ctrl","shift"], mid:"excel_format", sub:"excel_format_cell", desc:"선택한 셀 범위 바깥쪽에 윤곽 테두리를 한 번에 적용합니다." }, { cat:"excel", keys:"Ctrl+Shift+_", mods:["ctrl","shift"], mid:"excel_format", sub:"excel_format_cell", desc:"선택한 셀에 적용돼 있던 테두리를 모두 제거합니다." }, { cat:"excel", keys:"Ctrl+9", mods:["ctrl"], mid:"excel_format", sub:"excel_format_cell", desc:"선택한 행을 화면에서 숨깁니다(데이터는 삭제되지 않음)." }, { cat:"excel", keys:"Ctrl+0", mods:["ctrl"], mid:"excel_format", sub:"excel_format_cell", desc:"선택한 열을 화면에서 숨깁니다(데이터는 삭제되지 않음)." }, { cat:"excel", keys:"Ctrl+Shift+9", mods:["ctrl","shift"], mid:"excel_format", sub:"excel_format_cell", desc:"Ctrl+9로 숨겼던 행을 선택 범위 안에서 다시 표시합니다." }, { cat:"excel", keys:"Ctrl+B", mods:["ctrl"], mid:"excel_format", sub:"excel_format_font", desc:"선택한 텍스트를 굵게(볼드) 표시하거나 해제합니다." }, { cat:"excel", keys:"Ctrl+I", mods:["ctrl"], mid:"excel_format", sub:"excel_format_font", desc:"선택한 텍스트를 기울임꼴(이탤릭)로 표시하거나 해제합니다." }, { cat:"excel", keys:"Ctrl+U", mods:["ctrl"], mid:"excel_format", sub:"excel_format_font", desc:"선택한 텍스트에 밑줄을 넣거나 뺍니다." }, { cat:"excel", keys:"Ctrl+C", mods:["ctrl"], mid:"excel_edit", sub:"excel_edit_copy", desc:"선택한 셀이나 범위를 클립보드에 복사합니다." }, { cat:"excel", keys:"Ctrl+V", mods:["ctrl"], mid:"excel_edit", sub:"excel_edit_copy", desc:"복사하거나 잘라낸 내용을 현재 선택한 셀 위치에 붙여넣습니다." }, { cat:"excel", keys:"Ctrl+X", mods:["ctrl"], mid:"excel_edit", sub:"excel_edit_copy", desc:"선택한 셀 내용을 잘라내어 클립보드로 이동시킵니다." }, { cat:"excel", keys:"Ctrl+Z", mods:["ctrl"], mid:"excel_edit", sub:"excel_edit_undo", desc:"직전 입력·서식 변경 등의 작업을 취소하고 이전 상태로 되돌립니다." }, { cat:"excel", keys:"Ctrl+D", mods:["ctrl"], mid:"excel_fill", sub:"excel_fill_fill", desc:"선택 범위의 맨 위 셀 내용과 서식을 아래쪽 셀들에 그대로 채웁니다." }, { cat:"excel", keys:"Ctrl+R", mods:["ctrl"], mid:"excel_fill", sub:"excel_fill_fill", desc:"선택 범위의 맨 왼쪽 셀 내용과 서식을 오른쪽 셀들에 그대로 채웁니다." }, { cat:"excel", keys:"Ctrl+화살표", mods:["ctrl"], mid:"excel_nav", sub:"excel_nav_range", desc:"데이터가 입력된 영역의 끝(다음 빈 셀 직전)까지 커서를 한 번에 이동합니다." }, { cat:"excel", keys:"Ctrl+Shift+화살표", mods:["ctrl","shift"], mid:"excel_nav", sub:"excel_nav_range", desc:"현재 셀부터 데이터가 이어지는 끝까지 범위를 한 번에 선택합니다." }, { cat:"excel", keys:"Ctrl+Space", mods:["ctrl"], mid:"excel_nav", sub:"excel_nav_range", desc:"현재 셀이 속한 열 전체를 선택합니다." }, { cat:"excel", keys:"Ctrl+PageDown", mods:["ctrl"], mid:"excel_nav", sub:"excel_nav_sheet", desc:"통합 문서의 다음 시트 탭으로 이동합니다." }, { cat:"excel", keys:"Ctrl+PageUp", mods:["ctrl"], mid:"excel_nav", sub:"excel_nav_sheet", desc:"통합 문서의 이전 시트 탭으로 이동합니다." }, { cat:"excel", keys:"Ctrl+F", mods:["ctrl"], mid:"excel_find", sub:"excel_find_find", desc:"시트 안에서 특정 값이나 텍스트를 찾는 찾기 대화상자를 엽니다." }, { cat:"excel", keys:"Ctrl+H", mods:["ctrl"], mid:"excel_find", sub:"excel_find_find", desc:"특정 값을 다른 값으로 한 번에 바꿔주는 바꾸기 대화상자를 엽니다." }, { cat:"excel", keys:"Ctrl+Shift+L", mods:["ctrl","shift"], mid:"excel_find", sub:"excel_find_filter", desc:"표 머리글에 자동 필터 버튼을 켜거나 끕니다." }, { cat:"excel", keys:"Ctrl+S", mods:["ctrl"], mid:"excel_file", sub:"excel_file_save", desc:"현재 통합 문서를 저장합니다. 처음 저장 시 파일명·위치를 지정합니다." }, { cat:"excel", keys:"Ctrl+P", mods:["ctrl"], mid:"excel_file", sub:"excel_file_save", desc:"인쇄 미리보기와 인쇄 설정 화면을 엽니다." }, { cat:"excel", keys:"Ctrl+N", mods:["ctrl"], mid:"excel_file", sub:"excel_file_save", desc:"빈 통합 문서를 새로 만듭니다." }, { cat:"excel", keys:"Ctrl+K", mods:["ctrl"], mid:"excel_file", sub:"excel_file_insert", desc:"선택한 셀이나 텍스트에 웹 주소·파일 등으로 연결되는 하이퍼링크를 삽입합니다." }, { cat:"excel", keys:"Ctrl+;", mods:["ctrl"], mid:"excel_file", sub:"excel_file_insert", desc:"오늘 날짜를 현재 셀에 값으로 입력합니다(수식이 아닌 고정 값)." }, { cat:"excel", keys:"Ctrl+Shift+;", mods:["ctrl","shift"], mid:"excel_file", sub:"excel_file_insert", desc:"현재 시각을 현재 셀에 값으로 입력합니다(수식이 아닌 고정 값)." }, { cat:"excel", keys:"Alt+=", mods:["alt"], mid:"excel_fill", sub:"excel_fill_calc", desc:"선택 범위 인접 셀의 합계를 구하는 SUM 함수를 자동으로 삽입합니다." }, { cat:"excel", keys:"Alt+Enter", mods:["alt"], mid:"excel_fill", sub:"excel_fill_fill", desc:"셀을 나누지 않고 같은 셀 안에서 다음 줄로 줄바꿈합니다." }, { cat:"excel", keys:"Alt+F1", mods:["alt"], mid:"excel_file", sub:"excel_file_insert", desc:"현재 선택 범위를 기준으로 같은 시트에 기본 차트를 즉시 삽입합니다." }, { cat:"excel", keys:"Alt+F11", mods:["alt"], mid:"excel_file", sub:"excel_file_insert", desc:"매크로를 작성·편집할 수 있는 VBA(비주얼 베이직) 편집기를 엽니다." }, { cat:"excel", keys:"Alt", mods:["alt"], mid:"excel_find", sub:"excel_find_filter", desc:"리본 메뉴 각 탭·버튼 위에 알파벳 단축키 표시를 나타내 마우스 없이 메뉴를 조작할 수 있게 합니다." }, { cat:"excel", keys:"Shift+Space", mods:["shift"], mid:"excel_nav", sub:"excel_nav_range", desc:"현재 셀이 속한 행 전체를 선택합니다." }, { cat:"excel", keys:"Shift+F2", mods:["shift"], mid:"excel_file", sub:"excel_file_insert", desc:"현재 셀에 메모(comment)를 새로 달거나 기존 메모를 편집합니다." }, { cat:"excel", keys:"Shift+F3", mods:["shift"], mid:"excel_find", sub:"excel_find_filter", desc:"원하는 함수를 검색하고 인수를 입력할 수 있는 함수 마법사를 엽니다." }, { cat:"excel", keys:"Shift+F11", mods:["shift"], mid:"excel_nav", sub:"excel_nav_sheet", desc:"현재 시트 앞에 빈 시트를 새로 삽입합니다." }, { cat:"excel", keys:"Shift+방향키", mods:["shift"], mid:"excel_nav", sub:"excel_nav_range", desc:"방향키를 누르는 방향으로 선택 범위를 한 칸씩 확장합니다." }, { cat:"excel", keys:"F2", mods:[], mid:"excel_edit", sub:"excel_edit_undo", desc:"현재 셀을 직접 입력·수정할 수 있는 편집 모드로 진입합니다." }, { cat:"excel", keys:"F4", mods:[], mid:"excel_fill", sub:"excel_fill_calc", desc:"직전 서식·입력 동작을 그대로 반복하거나, 수식 입력 중이면 셀참조의 절대/상대($) 표시를 순서대로 바꿉니다." }, { cat:"excel", keys:"F9", mods:[], mid:"excel_fill", sub:"excel_fill_calc", desc:"모든 시트의 수식을 즉시 다시 계산합니다(자동 계산이 꺼져 있을 때 특히 유용)." }, { cat:"excel", keys:"Tab", mods:["tab"], mid:"excel_nav", sub:"excel_nav_sheet", desc:"현재 셀에서 오른쪽 다음 셀로 커서를 이동합니다." }, { cat:"excel", keys:"Delete", mods:[], mid:"excel_edit", sub:"excel_edit_undo", desc:"서식은 그대로 두고 선택한 셀의 내용(값)만 지웁니다." }, // ================= 한글 ================= { cat:"hangul", keys:"Ctrl+N,N", mods:["ctrl"], mid:"hangul_doc", sub:"hangul_doc_new", desc:"현재 문서를 유지한 채 새 빈 문서 창을 하나 더 엽니다." }, { cat:"hangul", keys:"Ctrl+N,B", mods:["ctrl"], mid:"hangul_doc", sub:"hangul_doc_new", desc:"현재 커서 위치에 강제로 다음 쪽으로 넘어가는 쪽 나누기를 삽입합니다." }, { cat:"hangul", keys:"Ctrl+Enter", mods:["ctrl"], mid:"hangul_doc", sub:"hangul_doc_new", desc:"커서 위치를 기준으로 페이지(쪽)를 나눠 다음 페이지로 넘깁니다." }, { cat:"hangul", keys:"Ctrl+N,T", mods:["ctrl"], mid:"hangul_doc", sub:"hangul_doc_insert", desc:"행과 열 개수를 지정해 표를 만들어 문서에 삽입합니다." }, { cat:"hangul", keys:"Ctrl+N,P", mods:["ctrl"], mid:"hangul_doc", sub:"hangul_doc_insert", desc:"내 컴퓨터에 있는 사진(그림) 파일을 불러와 문서에 삽입합니다." }, { cat:"hangul", keys:"Ctrl+G,C", mods:["ctrl"], mid:"hangul_style", sub:"hangul_style_char", desc:"선택한 글자의 글꼴·크기·색·속성을 지정하는 글자 모양 창을 엽니다." }, { cat:"hangul", keys:"Ctrl+S", mods:["ctrl"], mid:"hangul_save", sub:"hangul_save_save", desc:"현재 편집 중인 문서를 저장합니다." }, { cat:"hangul", keys:"Ctrl+F12", mods:["ctrl"], mid:"hangul_save", sub:"hangul_save_save", desc:"현재 문서를 PDF 파일로 내보내 저장합니다." }, { cat:"hangul", keys:"Ctrl+P", mods:["ctrl"], mid:"hangul_save", sub:"hangul_save_print", desc:"프린터로 인쇄하기 위한 인쇄 설정 창을 엽니다." }, { cat:"hangul", keys:"Ctrl+Shift+P", mods:["ctrl","shift"], mid:"hangul_save", sub:"hangul_save_print", desc:"실제로 인쇄되는 모양을 화면에서 미리 확인합니다." }, { cat:"hangul", keys:"Ctrl+A", mods:["ctrl"], mid:"hangul_edit", sub:"hangul_edit_select", desc:"현재 문서(또는 표 안)의 모든 내용을 한 번에 선택합니다." }, { cat:"hangul", keys:"Ctrl+Home", mods:["ctrl"], mid:"hangul_edit", sub:"hangul_edit_select", desc:"커서를 문서 맨 처음 위치로 즉시 이동합니다." }, { cat:"hangul", keys:"Ctrl+End", mods:["ctrl"], mid:"hangul_edit", sub:"hangul_edit_select", desc:"커서를 문서 맨 끝 위치로 즉시 이동합니다." }, { cat:"hangul", keys:"Ctrl+Z", mods:["ctrl"], mid:"hangul_edit", sub:"hangul_edit_undo", desc:"직전 입력·편집 작업을 취소하고 이전 상태로 되돌립니다." }, { cat:"hangul", keys:"Ctrl+C", mods:["ctrl"], mid:"hangul_edit", sub:"hangul_edit_undo", desc:"선택한 내용을 클립보드에 복사합니다." }, { cat:"hangul", keys:"Ctrl+V", mods:["ctrl"], mid:"hangul_edit", sub:"hangul_edit_undo", desc:"클립보드에 복사된 내용을 현재 커서 위치에 붙여넣습니다." }, { cat:"hangul", keys:"Ctrl+X", mods:["ctrl"], mid:"hangul_edit", sub:"hangul_edit_undo", desc:"선택한 내용을 잘라내어 클립보드로 이동시킵니다." }, { cat:"hangul", keys:"Ctrl+F10", mods:["ctrl"], mid:"hangul_input", sub:"hangul_input_special", desc:"문자표를 열어 자판에 없는 특수문자·기호를 찾아 입력합니다." }, { cat:"hangul", keys:"Alt+X", mods:["alt"], mid:"hangul_style", sub:"hangul_style_char", desc:"입력한 유니코드 값을 한글·기호로 바꾸거나, 반대로 글자를 유니코드 값으로 바꿔 보여줍니다." }, { cat:"hangul", keys:"Alt+Shift+E", mods:["alt","shift"], mid:"hangul_style", sub:"hangul_style_char", desc:"두 글자를 한 칸에 겹쳐 넣는 글자 겹치기 기능을 삽입합니다(단위 기호 등에 사용)." }, { cat:"hangul", keys:"Alt+L", mods:["alt"], mid:"hangul_style", sub:"hangul_style_para", desc:"줄 간격·정렬·여백 등 문단 전체의 모양을 설정하는 창을 엽니다." }, { cat:"hangul", keys:"Alt+N", mods:["alt"], mid:"hangul_style", sub:"hangul_style_para", desc:"미리 정의한 스타일(글자+문단 모양 묶음)을 현재 문단에 적용합니다." }, { cat:"hangul", keys:"Alt+S", mods:["alt"], mid:"hangul_save", sub:"hangul_save_save", desc:"현재 문서를 새 이름이나 다른 형식으로 저장합니다." }, { cat:"hangul", keys:"Alt+M", mods:["alt"], mid:"hangul_input", sub:"hangul_input_object", desc:"분수·수식 기호 등을 입력할 수 있는 수식 편집기를 엽니다." }, { cat:"hangul", keys:"Alt+V", mods:["alt"], mid:"hangul_input", sub:"hangul_input_object", desc:"선택한 그리기 개체(도형 등)의 색·선·크기 등 속성 창을 엽니다." }, { cat:"hangul", keys:"Shift+방향키", mods:["shift"], mid:"hangul_edit", sub:"hangul_edit_select", desc:"커서 위치부터 방향키 방향으로 블록(선택) 영역을 지정합니다." }, { cat:"hangul", keys:"Shift+Delete", mods:["shift"], mid:"hangul_edit", sub:"hangul_edit_undo", desc:"선택한 영역을 잘라내어 클립보드로 이동시킵니다(Ctrl+X와 동일)." }, { cat:"hangul", keys:"Shift+Insert", mods:["shift"], mid:"hangul_edit", sub:"hangul_edit_undo", desc:"클립보드 내용을 현재 위치에 붙여넣습니다(Ctrl+V와 동일)." }, { cat:"hangul", keys:"한자 키", mods:[], mid:"hangul_input", sub:"hangul_input_special", desc:"바로 앞 글자(음절)나 선택한 단어를 한자로 바꿔주는 변환 목록을 띄웁니다." }, { cat:"hangul", keys:"F5", mods:[], mid:"hangul_edit", sub:"hangul_edit_select", desc:"방향키로 범위를 지정할 수 있는 블록 선택 모드를 시작합니다." }, { cat:"hangul", keys:"F7", mods:[], mid:"hangul_style", sub:"hangul_style_para", desc:"용지 크기·여백·방향 등을 설정하는 편집 용지 창을 엽니다." }, // ================= PPT ================= { cat:"ppt", keys:"Ctrl+M", mods:["ctrl"], mid:"ppt_edit", sub:"ppt_edit_insert", desc:"현재 슬라이드 다음에 새 슬라이드를 삽입합니다." }, { cat:"ppt", keys:"Ctrl+D", mods:["ctrl"], mid:"ppt_edit", sub:"ppt_edit_insert", desc:"선택한 슬라이드나 개체를 그대로 복제해 바로 옆(뒤)에 추가합니다." }, { cat:"ppt", keys:"Ctrl+N", mods:["ctrl"], mid:"ppt_edit", sub:"ppt_edit_insert", desc:"새 프레젠테이션 파일을 만듭니다." }, { cat:"ppt", keys:"Ctrl+G", mods:["ctrl"], mid:"ppt_edit", sub:"ppt_edit_group", desc:"선택한 여러 개체를 하나로 묶어 함께 이동·크기 조정되게 합니다." }, { cat:"ppt", keys:"Ctrl+Shift+G", mods:["ctrl","shift"], mid:"ppt_edit", sub:"ppt_edit_group", desc:"묶여 있던 그룹을 해제해 개별 개체로 되돌립니다." }, { cat:"ppt", keys:"Ctrl+Shift+C", mods:["ctrl","shift"], mid:"ppt_object", sub:"ppt_object_format", desc:"선택한 개체의 서식(색·글꼴·효과)만 따로 복사합니다." }, { cat:"ppt", keys:"Ctrl+Shift+V", mods:["ctrl","shift"], mid:"ppt_object", sub:"ppt_object_format", desc:"복사해 둔 서식을 다른 개체에 붙여 똑같이 적용합니다." }, { cat:"ppt", keys:"Ctrl+A", mods:["ctrl"], mid:"ppt_object", sub:"ppt_object_select", desc:"현재 슬라이드 안의 모든 개체를 한 번에 선택합니다." }, { cat:"ppt", keys:"Ctrl+E", mods:["ctrl"], mid:"ppt_format", sub:"ppt_format_align", desc:"선택한 텍스트를 가운데로 정렬합니다." }, { cat:"ppt", keys:"Ctrl+L", mods:["ctrl"], mid:"ppt_format", sub:"ppt_format_align", desc:"선택한 텍스트를 왼쪽으로 정렬합니다." }, { cat:"ppt", keys:"Ctrl+R", mods:["ctrl"], mid:"ppt_format", sub:"ppt_format_align", desc:"선택한 텍스트를 오른쪽으로 정렬합니다." }, { cat:"ppt", keys:"Ctrl+J", mods:["ctrl"], mid:"ppt_format", sub:"ppt_format_align", desc:"선택한 텍스트를 양쪽 끝에 맞춰 정렬합니다." }, { cat:"ppt", keys:"Ctrl+B", mods:["ctrl"], mid:"ppt_format", sub:"ppt_format_font", desc:"선택한 글자를 굵게(볼드) 표시하거나 해제합니다." }, { cat:"ppt", keys:"Ctrl+I", mods:["ctrl"], mid:"ppt_format", sub:"ppt_format_font", desc:"선택한 글자를 기울임꼴로 표시하거나 해제합니다." }, { cat:"ppt", keys:"Ctrl+U", mods:["ctrl"], mid:"ppt_format", sub:"ppt_format_font", desc:"선택한 글자에 밑줄을 넣거나 뺍니다." }, { cat:"ppt", keys:"Ctrl+S", mods:["ctrl"], mid:"ppt_file", sub:"ppt_file_save", desc:"현재 프레젠테이션 파일을 저장합니다." }, { cat:"ppt", keys:"Ctrl+P", mods:["ctrl"], mid:"ppt_file", sub:"ppt_file_save", desc:"인쇄 설정과 미리보기 화면을 엽니다." }, { cat:"ppt", keys:"Ctrl+K", mods:["ctrl"], mid:"ppt_file", sub:"ppt_file_save", desc:"선택한 텍스트나 개체에 하이퍼링크를 삽입합니다." }, { cat:"ppt", keys:"Ctrl+C", mods:["ctrl"], mid:"ppt_file", sub:"ppt_file_edit", desc:"선택한 슬라이드나 개체를 클립보드에 복사합니다." }, { cat:"ppt", keys:"Ctrl+V", mods:["ctrl"], mid:"ppt_file", sub:"ppt_file_edit", desc:"복사·잘라낸 내용을 현재 위치에 붙여넣습니다." }, { cat:"ppt", keys:"Ctrl+X", mods:["ctrl"], mid:"ppt_file", sub:"ppt_file_edit", desc:"선택한 개체를 잘라내어 클립보드로 이동시킵니다." }, { cat:"ppt", keys:"Ctrl+Z", mods:["ctrl"], mid:"ppt_file", sub:"ppt_file_edit", desc:"직전 편집 작업을 취소하고 이전 상태로 되돌립니다." }, { cat:"ppt", keys:"Alt+F5", mods:["alt"], mid:"ppt_show", sub:"ppt_show_start", desc:"발표자 화면(메모·다음 슬라이드 미리보기 포함)과 함께 슬라이드 쇼를 시작합니다." }, { cat:"ppt", keys:"Shift+F5", mods:["shift"], mid:"ppt_show", sub:"ppt_show_start", desc:"처음이 아닌 현재 선택한 슬라이드부터 쇼를 시작합니다." }, { cat:"ppt", keys:"Shift+Tab", mods:["shift","tab"], mid:"ppt_object", sub:"ppt_object_select", desc:"슬라이드 안에서 이전 개체로 선택을 이동합니다." }, { cat:"ppt", keys:"Shift+F10", mods:["shift"], mid:"ppt_object", sub:"ppt_object_format", desc:"선택한 개체에서 마우스 오른쪽 클릭 메뉴를 키보드로 엽니다." }, { cat:"ppt", keys:"F5", mods:[], mid:"ppt_show", sub:"ppt_show_start", desc:"첫 슬라이드부터 전체 화면 슬라이드 쇼를 시작합니다." }, { cat:"ppt", keys:"Esc", mods:[], mid:"ppt_show", sub:"ppt_show_start", desc:"진행 중인 슬라이드 쇼를 종료하고 편집 화면으로 돌아갑니다." }, { cat:"ppt", keys:"B", mods:[], mid:"ppt_show", sub:"ppt_show_control", desc:"쇼를 재생하는 도중 화면을 검은색으로 잠깐 가립니다(다시 누르면 복귀)." }, { cat:"ppt", keys:"W", mods:[], mid:"ppt_show", sub:"ppt_show_control", desc:"쇼를 재생하는 도중 화면을 흰색으로 잠깐 가립니다(다시 누르면 복귀)." }, { cat:"ppt", keys:"Page Up", mods:[], mid:"ppt_show", sub:"ppt_show_control", desc:"쇼가 재생되는 동안 이전 슬라이드로 이동합니다." }, { cat:"ppt", keys:"Page Down", mods:[], mid:"ppt_show", sub:"ppt_show_control", desc:"쇼가 재생되는 동안 다음 슬라이드로 이동합니다." }, { cat:"ppt", keys:"Tab", mods:["tab"], mid:"ppt_object", sub:"ppt_object_select", desc:"슬라이드 안에서 다음 개체로 선택을 이동합니다." }, // ================= 크롬 ================= { cat:"chrome", keys:"Ctrl+T", mods:["ctrl"], mid:"chrome_tab", sub:"chrome_tab_open", desc:"새 빈 탭을 엽니다." }, { cat:"chrome", keys:"Ctrl+W", mods:["ctrl"], mid:"chrome_tab", sub:"chrome_tab_open", desc:"현재 보고 있는 탭을 닫습니다." }, { cat:"chrome", keys:"Ctrl+Shift+T", mods:["ctrl","shift"], mid:"chrome_tab", sub:"chrome_tab_open", desc:"방금 닫은 탭(또는 창)을 순서대로 다시 엽니다." }, { cat:"chrome", keys:"Ctrl+Tab", mods:["ctrl","tab"], mid:"chrome_tab", sub:"chrome_tab_move", desc:"오른쪽에 있는 다음 탭으로 이동합니다." }, { cat:"chrome", keys:"Ctrl+Shift+Tab", mods:["ctrl","shift","tab"], mid:"chrome_tab", sub:"chrome_tab_move", desc:"왼쪽에 있는 이전 탭으로 이동합니다." }, { cat:"chrome", keys:"Ctrl+PageDown", mods:["ctrl"], mid:"chrome_tab", sub:"chrome_tab_move", desc:"Ctrl+Tab과 같이 다음 탭으로 이동하는 대체 단축키입니다." }, { cat:"chrome", keys:"Ctrl+PageUp", mods:["ctrl"], mid:"chrome_tab", sub:"chrome_tab_move", desc:"Ctrl+Shift+Tab과 같이 이전 탭으로 이동하는 대체 단축키입니다." }, { cat:"chrome", keys:"Ctrl+1~8", mods:["ctrl"], mid:"chrome_tab", sub:"chrome_tab_move", desc:"탭 목록에서 왼쪽부터 해당 번호(1~8번째) 탭으로 바로 이동합니다." }, { cat:"chrome", keys:"Ctrl+9", mods:["ctrl"], mid:"chrome_tab", sub:"chrome_tab_move", desc:"열려 있는 탭 중 맨 마지막 탭으로 바로 이동합니다." }, { cat:"chrome", keys:"Ctrl+Shift+A", mods:["ctrl","shift"], mid:"chrome_tab", sub:"chrome_tab_move", desc:"현재 열려 있는 탭들을 이름으로 검색해 빠르게 찾아 이동합니다." }, { cat:"chrome", keys:"Ctrl+N", mods:["ctrl"], mid:"chrome_window", sub:"chrome_window_new", desc:"새 크롬 브라우저 창을 엽니다." }, { cat:"chrome", keys:"Ctrl+Shift+N", mods:["ctrl","shift"], mid:"chrome_window", sub:"chrome_window_new", desc:"방문 기록·쿠키가 남지 않는 시크릿 모드 창을 엽니다." }, { cat:"chrome", keys:"Ctrl+L", mods:["ctrl"], mid:"chrome_window", sub:"chrome_window_nav", desc:"주소창(URL 입력줄) 내용을 선택 상태로 만들어 바로 새 주소를 입력할 수 있게 합니다." }, { cat:"chrome", keys:"Ctrl+K", mods:["ctrl"], mid:"chrome_window", sub:"chrome_window_nav", desc:"주소창에 검색어 입력 모드를 켜서 구글 검색을 바로 시작할 수 있게 합니다." }, { cat:"chrome", keys:"Ctrl+R", mods:["ctrl"], mid:"chrome_window", sub:"chrome_window_nav", desc:"현재 페이지를 새로 고칩니다(F5와 동일)." }, { cat:"chrome", keys:"Ctrl+F", mods:["ctrl"], mid:"chrome_edit", sub:"chrome_edit_find", desc:"현재 페이지 안에서 원하는 단어나 문구를 찾습니다." }, { cat:"chrome", keys:"Ctrl+D", mods:["ctrl"], mid:"chrome_edit", sub:"chrome_edit_find", desc:"현재 페이지를 북마크(즐겨찾기)에 추가합니다." }, { cat:"chrome", keys:"Ctrl+Shift+B", mods:["ctrl","shift"], mid:"chrome_edit", sub:"chrome_edit_find", desc:"주소창 아래 북마크 모음 바를 표시하거나 숨깁니다." }, { cat:"chrome", keys:"Ctrl+Shift+Delete", mods:["ctrl","shift"], mid:"chrome_edit", sub:"chrome_edit_manage", desc:"방문 기록·쿠키·캐시 등 인터넷 사용 기록을 삭제하는 창을 엽니다." }, { cat:"chrome", keys:"Ctrl++", mods:["ctrl"], mid:"chrome_view", sub:"chrome_view_zoom", desc:"페이지 전체 콘텐츠를 한 단계 확대합니다." }, { cat:"chrome", keys:"Ctrl+-", mods:["ctrl"], mid:"chrome_view", sub:"chrome_view_zoom", desc:"페이지 전체 콘텐츠를 한 단계 축소합니다." }, { cat:"chrome", keys:"Ctrl+0", mods:["ctrl"], mid:"chrome_view", sub:"chrome_view_zoom", desc:"확대·축소 배율을 기본값 100%로 되돌립니다." }, { cat:"chrome", keys:"Ctrl+P", mods:["ctrl"], mid:"chrome_history", sub:"chrome_history_etc", desc:"현재 페이지를 인쇄하는 설정 창을 엽니다." }, { cat:"chrome", keys:"Ctrl+H", mods:["ctrl"], mid:"chrome_history", sub:"chrome_history_dl", desc:"최근 방문한 웹사이트 목록(방문 기록)을 새 탭으로 엽니다." }, { cat:"chrome", keys:"Ctrl+J", mods:["ctrl"], mid:"chrome_history", sub:"chrome_history_dl", desc:"지금까지 내려받은 파일 목록(다운로드)을 새 탭으로 엽니다." }, { cat:"chrome", keys:"Shift+Alt+N", mods:["shift","alt"], mid:"chrome_view", sub:"chrome_view_split", desc:"현재 탭을 기준으로 화면을 좌우로 나눠 두 탭을 동시에 보는 분할 보기(Split View)를 엽니다. 2026년 2월 Chrome 145 버전에서 정식 출시된 기능입니다." }, { cat:"chrome", keys:"Alt+←", mods:["alt"], mid:"chrome_window", sub:"chrome_window_nav", desc:"방문 기록상 이전 페이지로 이동합니다(뒤로 가기)." }, { cat:"chrome", keys:"Alt+→", mods:["alt"], mid:"chrome_window", sub:"chrome_window_nav", desc:"뒤로 가기 이후 방문 기록상 다음 페이지로 이동합니다(앞으로 가기)." }, { cat:"chrome", keys:"Alt+Home", mods:["alt"], mid:"chrome_window", sub:"chrome_window_nav", desc:"설정에 지정해 둔 홈페이지로 이동합니다." }, { cat:"chrome", keys:"Shift+Esc", mods:["shift"], mid:"chrome_history", sub:"chrome_history_etc", desc:"탭·확장 프로그램별 메모리·CPU 사용량을 볼 수 있는 크롬 자체 작업 관리자를 엽니다." }, { cat:"chrome", keys:"F5", mods:[], mid:"chrome_window", sub:"chrome_window_nav", desc:"현재 페이지를 새로 고칩니다." }, { cat:"chrome", keys:"F6", mods:[], mid:"chrome_view", sub:"chrome_view_screen", desc:"주소창·북마크바·페이지 영역 사이로 포커스를 순서대로 이동합니다." }, { cat:"chrome", keys:"F11", mods:[], mid:"chrome_view", sub:"chrome_view_screen", desc:"주소창·탭 표시줄까지 숨기는 전체 화면 모드로 전환합니다." }, { cat:"chrome", keys:"Esc", mods:[], mid:"chrome_view", sub:"chrome_view_screen", desc:"페이지를 불러오는 중이라면 로딩을 중단합니다." }, { cat:"chrome", keys:"Home", mods:[], mid:"chrome_view", sub:"chrome_view_scroll", desc:"현재 페이지의 맨 위로 스크롤을 이동합니다." }, { cat:"chrome", keys:"End", mods:[], mid:"chrome_view", sub:"chrome_view_scroll", desc:"현재 페이지의 맨 아래로 스크롤을 이동합니다." }, { cat:"chrome", keys:"Space", mods:[], mid:"chrome_view", sub:"chrome_view_scroll", desc:"페이지를 한 화면 분량 아래로 스크롤합니다(Shift+Space는 위로)." }, { cat:"chrome", keys:"Alt+D", mods:["alt"], mid:"chrome_window", sub:"chrome_window_nav", desc:"Ctrl+L과 같이 주소창 내용을 선택 상태로 만들어 새 주소를 바로 입력할 수 있게 합니다." }, { cat:"chrome", keys:"Ctrl+Shift+R", mods:["ctrl","shift"], mid:"chrome_window", sub:"chrome_window_nav", desc:"저장된 캐시를 무시하고 페이지를 처음 방문한 것처럼 강력 새로고침합니다. 업데이트가 화면에 반영되지 않을 때 유용해요." }, { cat:"chrome", keys:"Ctrl+F5", mods:["ctrl"], mid:"chrome_window", sub:"chrome_window_nav", desc:"Ctrl+Shift+R과 같은 캐시 무시 새로고침의 대체 단축키입니다." }, { cat:"chrome", keys:"Ctrl+Shift+I", mods:["ctrl","shift"], mid:"chrome_dev", sub:"chrome_dev_tools", desc:"HTML·CSS·콘솔·네트워크 등을 확인할 수 있는 개발자 도구(DevTools)를 엽니다." }, { cat:"chrome", keys:"Ctrl+Shift+J", mods:["ctrl","shift"], mid:"chrome_dev", sub:"chrome_dev_tools", desc:"개발자 도구 중 자바스크립트 오류·로그를 확인하는 콘솔 탭을 바로 엽니다." }, { cat:"chrome", keys:"Ctrl+Shift+C", mods:["ctrl","shift"], mid:"chrome_dev", sub:"chrome_dev_tools", desc:"페이지의 특정 요소를 클릭해 해당 HTML·CSS를 바로 검사하는 요소 선택 모드를 켭니다."} ]; var state = { cat:"win", mode:"keys", keyTags:[], mid:null, sub:null, favOpen:false, favorites:{} }; var progRow = document.getElementById("skProgRow"); var filterPanel = document.getElementById("skFilterPanel"); var modeKeysBtn = document.getElementById("skModeKeys"); var modeCatBtn = document.getElementById("skModeCat"); var modeHint = document.getElementById("skModeHint"); var tagArea = document.getElementById("skTagArea"); var listGuide = document.getElementById("skListGuide"); var listCount = document.getElementById("skListCount"); var listBody = document.getElementById("skListBody"); var toastEl = document.getElementById("skToast"); var STORAGE_KEY = "sk_shortcut_calc_state_v5"; var _touching = false; function bindTap(el, fn){ el.addEventListener("touchend", function(e){ _touching = true; e.preventDefault(); fn(e); setTimeout(function(){ _touching = false; }, 350); }, { passive:false }); el.addEventListener("click", function(e){ if (_touching) { return; } fn(e); }); } function showToast(msg){ toastEl.textContent = msg; toastEl.className = "sk-toast sk-show"; setTimeout(function(){ toastEl.className = "sk-toast"; }, 1800); } function needProgramFirst(){ showToast("프로그램을 먼저 선택해주세요"); } function isFav(cat, keys){ return !!(state.favorites[cat] && Object.prototype.hasOwnProperty.call(state.favorites[cat], keys)); } function toggleFav(cat, keys){ if (!state.favorites[cat]) { state.favorites[cat] = {}; } if (isFav(cat, keys)) { delete state.favorites[cat][keys]; } else { state.favorites[cat][keys] = ""; } saveState(); } function setFavNote(cat, keys, note){ if (!state.favorites[cat]) { state.favorites[cat] = {}; } if (isFav(cat, keys)) { state.favorites[cat][keys] = note; saveState(); } } function makeStarBtn(cat, keys, sizeClass){ var star = document.createElement("button"); star.type = "button"; star.className = "sk-star-btn"; star.textContent = isFav(cat, keys) ? "★" : "☆"; bindTap(star, function(){ toggleFav(cat, keys); render(); }); return star; } // ----- ① 프로그램 탭 + 즐겨찾기 ----- function buildProgRow(){ progRow.innerHTML = ""; for (var i=0; i<CATS.length; i++){ (function(c){ var btn = document.createElement("button"); btn.type = "button"; btn.className = "sk-progtab-btn" + (!state.favOpen && state.cat === c.id ? " sk-active" : ""); btn.textContent = c.label; bindTap(btn, function(){ state.favOpen = false; state.cat = (state.cat === c.id) ? null : c.id; state.keyTags = []; state.mid = null; state.sub = null; saveState(); render(); }); progRow.appendChild(btn); })(CATS[i]); } var favBtn = document.createElement("button"); favBtn.type = "button"; favBtn.className = "sk-progtab-btn sk-fav-btn" + (state.favOpen ? " sk-active" : ""); favBtn.textContent = "⭐ 즐겨찾기"; bindTap(favBtn, function(){ state.favOpen = !state.favOpen; saveState(); render(); }); progRow.appendChild(favBtn); } // ----- ② 모드 ----- bindTap(modeKeysBtn, function(){ if (!state.cat) { needProgramFirst(); return; } state.mode = (state.mode === "keys") ? null : "keys"; state.keyTags = []; state.mid = null; state.sub = null; saveState(); render(); }); bindTap(modeCatBtn, function(){ if (!state.cat) { needProgramFirst(); return; } state.mode = (state.mode === "cat") ? null : "cat"; state.keyTags = []; state.mid = null; state.sub = null; saveState(); render(); }); function buildModeButtons(){ modeKeysBtn.className = "sk-mode-btn" + (state.mode === "keys" ? " sk-active" : ""); modeCatBtn.className = "sk-mode-btn" + (state.mode === "cat" ? " sk-active" : ""); if (!state.cat) { modeHint.textContent = "위에서 프로그램을 먼저 선택해주세요."; } else if (state.mode === "keys") { modeHint.textContent = "태그를 여러 개 누르면 AND 조건으로 좁혀져요. 다시 누르면 방식이 해제되고 전체가 보여요."; } else if (state.mode === "cat") { modeHint.textContent = "중분류 → 소분류 순서로 눌러 좁혀보세요. 다시 누르면 방식이 해제돼요."; } else { modeHint.textContent = "찾는 방식을 선택하면 태그로 좁힐 수 있어요. 지금은 전체 목록이 보여요."; } } // ----- 태그 영역 ----- function makeTagRow(){ var row = document.createElement("div"); row.className = "sk-tag-row"; return row; } function buildTagArea(){ tagArea.innerHTML = ""; if (!state.cat) { return; } if (state.mode === "keys") { var progItems = []; for (var i=0; i<DATA.length; i++){ if (DATA[i].cat === state.cat) { progItems.push(DATA[i]); } } var seen = {}; var t1 = [], t2 = [], t3 = []; for (var j=0; j<progItems.length; j++){ var toks = deriveTags(progItems[j].keys); for (var k=0; k<toks.length; k++){ var t = toks[k]; if (seen[t]) { continue; } seen[t] = true; var tier = classifyTier(t); if (tier === 1) { t1.push(t); } else if (tier === 2) { t2.push(t); } else { t3.push(t); } } } t1.sort(function(a,b){ return TIER1_SET.indexOf(a) - TIER1_SET.indexOf(b); }); t2.sort(function(a,b){ return a.localeCompare(b); }); t3.sort(function(a,b){ return a.localeCompare(b); }); var label = document.createElement("div"); label.className = "sk-section-label"; var labelSpan = document.createElement("span"); labelSpan.textContent = "③ 단축키 태그 (여러 개 선택 시 AND)"; var resetBtn = document.createElement("button"); resetBtn.type = "button"; resetBtn.className = "sk-reset-btn"; resetBtn.textContent = "초기화"; bindTap(resetBtn, function(){ state.keyTags = []; saveState(); render(); }); label.appendChild(labelSpan); label.appendChild(resetBtn); tagArea.appendChild(label); function appendTagRow(list, cls, prefix){ if (!list.length) { return; } var row = makeTagRow(); for (var x=0; x<list.length; x++){ (function(tag){ var btn = document.createElement("button"); btn.type = "button"; var active = state.keyTags.indexOf(tag) > -1; btn.className = cls + (active ? " sk-active" : ""); btn.textContent = prefix + tag; bindTap(btn, function(){ var pos = state.keyTags.indexOf(tag); if (pos > -1) { state.keyTags.splice(pos,1); } else { state.keyTags.push(tag); } saveState(); render(); }); row.appendChild(btn); })(list[x]); } tagArea.appendChild(row); } appendTagRow(t1, "sk-tag", "#"); var sub1 = document.createElement("div"); sub1.className = "sk-tag-subtle"; sub1.textContent = "↑ 수정키 · ↓ 기능·방향키 / 문자·기호"; tagArea.appendChild(sub1); appendTagRow(t2, "sk-tag-t2", ""); appendTagRow(t3, "sk-tag-t3", ""); return; } if (state.mode === "cat") { var label2 = document.createElement("div"); label2.className = "sk-section-label"; var label2Span = document.createElement("span"); label2Span.textContent = "③ 중분류 선택"; var resetBtn2 = document.createElement("button"); resetBtn2.type = "button"; resetBtn2.className = "sk-reset-btn"; resetBtn2.textContent = "초기화"; bindTap(resetBtn2, function(){ state.mid = null; state.sub = null; saveState(); render(); }); label2.appendChild(label2Span); label2.appendChild(resetBtn2); tagArea.appendChild(label2); var row2 = makeTagRow(); var mids = CAT_TREE[state.cat] || []; for (var m=0; m<mids.length; m++){ (function(midObj){ var btn = document.createElement("button"); btn.type = "button"; btn.className = "sk-tag sk-mid" + (state.mid === midObj.id ? " sk-active" : ""); btn.textContent = midObj.label; bindTap(btn, function(){ state.mid = (state.mid === midObj.id) ? null : midObj.id; state.sub = null; saveState(); render(); }); row2.appendChild(btn); })(mids[m]); } tagArea.appendChild(row2); if (state.mid) { var label3 = document.createElement("div"); label3.className = "sk-section-label"; label3.innerHTML = "<span>④ 소분류 선택</span>"; tagArea.appendChild(label3); var row3 = makeTagRow(); var midObj2 = null; for (var q=0; q<mids.length; q++){ if (mids[q].id === state.mid) { midObj2 = mids[q]; break; } } var subs = midObj2 ? midObj2.subs : []; for (var s=0; s<subs.length; s++){ (function(subObj){ var btn = document.createElement("button"); btn.type = "button"; btn.className = "sk-tag sk-sub" + (state.sub === subObj.id ? " sk-active" : ""); btn.textContent = subObj.label; bindTap(btn, function(){ state.sub = (state.sub === subObj.id) ? null : subObj.id; saveState(); render(); }); row3.appendChild(btn); })(subs[s]); } tagArea.appendChild(row3); } } } // ----- 하단 통합 리스트 ----- function getVisibleList(){ if (!state.cat) { return null; } var list = []; for (var i=0; i<DATA.length; i++){ var item = DATA[i]; if (item.cat !== state.cat) { continue; } if (state.mode === "keys") { var toks = deriveTags(item.keys); var ok = true; for (var j=0; j<state.keyTags.length; j++){ if (toks.indexOf(state.keyTags[j]) === -1) { ok = false; break; } } if (!ok) { continue; } } else if (state.mode === "cat") { if (state.mid && item.mid !== state.mid) { continue; } if (state.sub && item.sub !== state.sub) { continue; } } list.push(item); } return list; } function renderNormalList(){ var list = getVisibleList(); if (!list.length) { listGuide.style.display = "block"; listGuide.textContent = "조건에 맞는 단축키가 없어요. 선택한 태그나 분류를 줄여보세요."; return; } listCount.style.display = "block"; listCount.innerHTML = "#" + CAT_LABEL[state.cat] + " · 총 <b>" + list.length + "개</b>"; var grouped = { ctrl:[], alt:[], shift:[], etc:[] }; for (var i=0; i<list.length; i++){ grouped[groupOf(list[i])].push(list[i]); } for (var g=0; g<GROUP_ORDER.length; g++){ var gid = GROUP_ORDER[g]; var arr = grouped[gid]; if (!arr.length) { continue; } arr.sort(function(a,b){ return a.keys.localeCompare(b.keys); }); var block = document.createElement("div"); block.className = "sk-group-block"; var header = document.createElement("div"); header.className = "sk-group-header sk-g-" + gid; header.textContent = GROUP_LABEL[gid] + " (" + arr.length + "개)"; block.appendChild(header); var grid = document.createElement("div"); grid.className = "sk-grid3"; for (var k=0; k<arr.length; k++){ var it = arr[k]; var mini = document.createElement("div"); mini.className = "sk-item-mini"; var ks = document.createElement("span"); ks.className = "sk-item-keys"; ks.textContent = it.keys; var ds = document.createElement("span"); ds.className = "sk-item-desc"; ds.textContent = it.desc; mini.appendChild(ks); mini.appendChild(ds); mini.appendChild(makeStarBtn(it.cat, it.keys)); grid.appendChild(mini); } block.appendChild(grid); listBody.appendChild(block); } } function renderFavList(){ var any = false; for (var c=0; c<CATS.length; c++){ var cid = CATS[c].id; var favMap = state.favorites[cid]; if (!favMap) { continue; } var keysArr = Object.keys(favMap); if (!keysArr.length) { continue; } any = true; var itemsForCat = []; for (var i=0; i<DATA.length; i++){ if (DATA[i].cat === cid && Object.prototype.hasOwnProperty.call(favMap, DATA[i].keys)) { itemsForCat.push(DATA[i]); } } var block = document.createElement("div"); block.className = "sk-group-block"; var header = document.createElement("div"); header.className = "sk-group-header sk-g-fav"; header.textContent = "#" + CAT_LABEL[cid] + " (" + itemsForCat.length + "개)"; block.appendChild(header); var favList = document.createElement("div"); favList.className = "sk-fav-list"; for (var k=0; k<itemsForCat.length; k++){ (function(it){ var card = document.createElement("div"); card.className = "sk-fav-item"; var ks = document.createElement("div"); ks.className = "sk-item-keys"; ks.textContent = it.keys; var ds = document.createElement("div"); ds.className = "sk-item-desc"; ds.textContent = it.desc; var noteInput = document.createElement("input"); noteInput.type = "text"; noteInput.className = "sk-fav-note"; noteInput.placeholder = "메모 (선택, 전달할 때 참고용)"; noteInput.value = favMap[it.keys] || ""; noteInput.addEventListener("change", function(){ setFavNote(it.cat, it.keys, noteInput.value); }); card.appendChild(ks); card.appendChild(ds); card.appendChild(noteInput); card.appendChild(makeStarBtn(it.cat, it.keys)); favList.appendChild(card); })(itemsForCat[k]); } block.appendChild(favList); listBody.appendChild(block); } if (!any) { listGuide.style.display = "block"; listGuide.textContent = "아직 즐겨찾기한 단축키가 없어요. 목록에서 별(☆) 아이콘을 눌러 추가해보세요."; } else { listCount.style.display = "block"; listCount.innerHTML = "⭐ 즐겨찾기한 단축키"; } } function renderList(){ listGuide.style.display = "none"; listCount.style.display = "none"; listBody.innerHTML = ""; if (state.favOpen) { renderFavList(); return; } if (!state.cat) { listGuide.style.display = "block"; listGuide.textContent = "위에서 프로그램(윈도우/엑셀/한글/PPT/크롬)을 먼저 선택해주세요."; return; } renderNormalList(); } function render(){ buildProgRow(); if (state.favOpen) { filterPanel.className = "sk-filter-panel sk-collapsed"; } else { filterPanel.className = "sk-filter-panel"; buildModeButtons(); buildTagArea(); } renderList(); } function saveState(){ try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); var hashObj = { c:state.cat, mo:state.mode, kt:state.keyTags, mi:state.mid, su:state.sub, fo:state.favOpen, fv:state.favorites }; history.replaceState(null, "", "#s=" + LZString.compressToEncodedURIComponent(JSON.stringify(hashObj))); } catch(e) {} } function applyLoaded(obj){ state.cat = obj.c || obj.cat || null; state.mode = (obj.mo !== undefined) ? obj.mo : (obj.mode !== undefined ? obj.mode : "keys"); state.keyTags = obj.kt || obj.keyTags || []; state.mid = obj.mi || obj.mid || null; state.sub = obj.su || obj.sub || null; state.favOpen = obj.fo || obj.favOpen || false; state.favorites = obj.fv || obj.favorites || {}; } function loadStateFromHashOrStorage(){ try { if (location.hash && location.hash.indexOf("#s=") === 0) { var raw = location.hash.substring(3); var json = LZString.decompressFromEncodedURIComponent(raw); if (json) { applyLoaded(JSON.parse(json)); return; } } } catch(e) {} try { var stored = localStorage.getItem(STORAGE_KEY); if (stored) { applyLoaded(JSON.parse(stored)); } } catch(e) {} } // ----- 공유 ----- var modalOverlay = document.getElementById("skModalOverlay"); var modalLink = document.getElementById("skModalLink"); var modalSizeNote = document.getElementById("skModalSizeNote"); var modalQr = document.getElementById("skModalQr"); function copyToClipboard(text){ if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(function(){ showToast("링크가 복사되었습니다"); }).catch(function(){ fallbackCopy(text); }); } else { fallbackCopy(text); } } function fallbackCopy(text){ var ta = document.createElement("textarea"); ta.value = text; ta.style.position = "fixed"; ta.style.left = "-9999px"; document.body.appendChild(ta); ta.select(); try { document.execCommand("copy"); showToast("링크가 복사되었습니다"); } catch(e) { showToast("복사에 실패했어요"); } document.body.removeChild(ta); } function buildShareUrl(){ var payload = JSON.stringify({ c:state.cat, mo:state.mode, kt:state.keyTags, mi:state.mid, su:state.sub, fo:state.favOpen, fv:state.favorites }); var compressed = LZString.compressToEncodedURIComponent(payload); var base = location.href.split("#")[0].split("?")[0]; return base + "?key=" + compressed; } function openShareModal(){ var longUrl = buildShareUrl(); modalLink.value = longUrl; modalQr.innerHTML = ""; modalSizeNote.textContent = "링크 길이: " + longUrl.length + "자 (즐겨찾기·메모 포함)"; if (longUrl.length > 300) { modalSizeNote.textContent += " · 길이가 길어 짧은 URL을 추천드려요"; var api = "https://tinyurl.com/api-create.php?url=" + encodeURIComponent(longUrl); fetch(api).then(function(res){ return res.text(); }).then(function(shortUrl){ if (shortUrl && shortUrl.indexOf("http") === 0) { modalLink.value = shortUrl; new QRCode(modalQr, { text: shortUrl, width:150, height:150 }); } else { new QRCode(modalQr, { text: longUrl, width:150, height:150 }); } }).catch(function(){ new QRCode(modalQr, { text: longUrl, width:150, height:150 }); }); } else { new QRCode(modalQr, { text: longUrl, width:150, height:150 }); } modalOverlay.className = "sk-modal-overlay sk-open"; document.body.style.overflow = "hidden"; } function closeShareModal(){ modalOverlay.className = "sk-modal-overlay"; document.body.style.overflow = ""; } document.getElementById("skShareBtn").addEventListener("click", openShareModal); document.getElementById("skModalCloseBtn").addEventListener("click", closeShareModal); document.getElementById("skModalCopyBtn").addEventListener("click", function(){ copyToClipboard(modalLink.value); }); modalOverlay.addEventListener("click", function(e){ if (e.target === modalOverlay) { closeShareModal(); } }); window.addEventListener("hashchange", function(){ if (modalOverlay.className.indexOf("sk-open") > -1) { closeShareModal(); } }); // ----- URL 파라미터(key)로 복원 ----- function loadFromUrlParam(){ try { var params = new URLSearchParams(location.search); var key = params.get("key"); if (key) { var json = LZString.decompressFromEncodedURIComponent(key); if (json) { applyLoaded(JSON.parse(json)); return true; } } } catch(e) {} return false; } // ----- 초기화 ----- var loadedFromUrl = loadFromUrlParam(); if (!loadedFromUrl) { loadStateFromHashOrStorage(); } render(); })(); </script> </body> </html> 모두의계산기 계산기 단축키 업무 엑셀 윈도우 크롬 최매슨생 https://0-1.kr/90 https://0-1.kr/90#entry90comment Sat, 24 Jan 2026 13:48:38 +0900 https://0-1.kr/88 <!-- 나레시피저장소_V18_261005 | 출처: 스타트업EX _ cds1981@naver.com | 티스토리 본문용(HTML 모드) 시안 --> <style> #nr-app{max-width:720px;margin:0 auto;padding:8px 8px 90px;font-family:-apple-system,BlinkMacSystemFont,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;color:#1f2a37;font-size:17px;line-height:1.5;-webkit-text-size-adjust:100%;text-align:left} #nr-app *{box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-tap-highlight-color:transparent} #nr-app button,#nr-app input,#nr-app textarea{font-family:inherit;font-size:16px;touch-action:manipulation;-webkit-appearance:none;appearance:none;border-radius:12px} .nr-bar{background:#f3f9ff;border:2px solid #cfe3f7;border-radius:6px;padding:12px} .nr-top,.nr-row,.nr-rw,.nr-tm,.nr-set,.nr-ctl{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center} .nr-top{-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;align-items:flex-start} .nr-title{font-size:24px;font-weight:800;line-height:1.2;word-break:keep-all} .nr-sub{font-size:12px;color:#1769d1;margin-top:2px} .nr-tb{display:-webkit-flex;display:flex;-webkit-flex-shrink:0;flex-shrink:0} .nr-tb button{margin-left:5px;padding:7px 10px;border:1px solid #9fc4ee;background:#fff;color:#14508f;font-weight:700;font-size:15px} .nr-set,.nr-btns,.nr-ctl{-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-top:8px;font-size:14px;font-weight:700} .nr-btns{display:-webkit-flex;display:flex} .nr-set button,.nr-dr button,.nr-tabs button{margin:0 5px 4px 0;padding:6px 11px;border:1px solid #9fc4ee;background:#fff;color:#14508f;font-weight:700;font-size:15px} .nr-set button.nr-on,.nr-dr button.nr-on,.nr-tabs button.nr-on{background:#1769d1;color:#fff;border-color:#1769d1} .nr-btns button{margin:0 6px 6px 0;padding:9px 14px;border:0;background:#2e8b57;color:#fff;font-weight:700} .nr-acc{margin-top:10px;border:2px solid #d9e2ec;border-radius:12px;background:#fff;overflow:hidden} .nr-acc .nr-acc{margin:8px 0;border-width:1px} .nr-act{border-color:#2e8b57!important} .nr-ah{display:block;width:100%;text-align:left;padding:14px 40px 14px 14px;border:0;background:#f7f9fb;font-weight:800;border-radius:0;position:relative} .nr-ah:after{content:'\25BC';position:absolute;right:14px;top:50%;margin-top:-10px;font-size:15px;color:#1769d1;-webkit-transition:-webkit-transform .2s;transition:transform .2s} .nr-open>.nr-ah:after{-webkit-transform:rotate(180deg);transform:rotate(180deg)} .nr-ab{display:none;padding:12px} .nr-open>.nr-ab{display:block} .nr-tabs{display:-webkit-flex;display:flex;margin-bottom:8px} .nr-tp{display:none;font-size:15px;color:#444} .nr-tp.nr-on{display:block} .nr-pills{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap} .nr-pill{display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;margin:0 6px 8px 0;padding:8px 14px;border-radius:999px;background:#e8f5ee;border:1px solid #9dd1b4;color:#18623a;font-weight:700} button.nr-sel,.nr-chp.nr-sel{background:#2e8b57;color:#fff;border-color:#2e8b57} .nr-ing{background:#fff7e6;border-color:#f0c36d;color:#7a4b00;padding:4px 6px 4px 8px;margin-bottom:6px} .nr-ing b{margin:0 4px;font-size:14px} .nr-ing button{border:0;background:rgba(0,0,0,.08);width:28px;height:28px;border-radius:50%;padding:0;margin:0 2px;font-weight:800} .nr-ing .nr-x{background:#e5484d;color:#fff} .nr-chip{display:inline-block;padding:2px 10px;margin:0 2px;font-size:15px;background:#fff7e6;border:1px solid #f0c36d;border-radius:999px;color:#7a4b00} .nr-hs{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);gap:5px;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;padding-bottom:6px} .nr-chp{white-space:nowrap;padding:5px 10px;border:1px solid #cdd8e3;background:#f7f9fb;font-size:14px;border-radius:999px} .nr-lb{font-size:14px;font-weight:700;color:#5b6b7b;margin:8px 0 4px} .nr-hint{font-size:14px;color:#8a97a6} .nr-box{border:2px solid #f0c36d;background:#fffaf0;border-radius:12px;padding:10px 10px 2px} .nr-row{margin:6px 0} .nr-row input,.nr-sh input{-webkit-flex:1;flex:1;min-width:0;padding:10px;border:1px solid #bcd;margin-right:6px;width:100%} .nr-nm{white-space:nowrap;margin-right:8px;color:#2e8b57} .nr-rw{-webkit-justify-content:space-between;justify-content:space-between;margin-top:10px} .nr-sbtn,.nr-row button{padding:10px 14px;border:0;background:#1769d1;color:#fff;font-weight:700;margin:4px 6px 0 0} .nr-gr{background:#e8eef5;color:#234} .nr-sw.nr-h{display:-webkit-flex;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y} .nr-h .nr-sec,.nr-h .nr-gap{min-width:250px;-webkit-flex-shrink:0;flex-shrink:0;margin-right:6px} .nr-sec{border:2px solid #9fc4ee;border-radius:12px;padding:8px;background:#fbfdff;margin-top:6px} .nr-sh{display:-webkit-flex;display:flex;margin-bottom:6px} .nr-sh input{font-weight:800} .nr-sh button{border:0;background:#eee;padding:0 12px} .nr-ed{min-height:84px;padding:10px;border:1px solid #bcd;border-radius:10px;background:#fff;-webkit-user-select:text;user-select:text;word-break:break-all} .nr-ed:empty:before{content:attr(data-ph);color:#9aa8b6} .nr-gap{text-align:center;padding:6px 4px;color:#1769d1;font-size:14px} .nr-ar{font-weight:800;letter-spacing:2px} .nr-gap input[type=text]{width:100%;padding:8px;border:1px dashed #9fc4ee;margin:4px 0;text-align:center} .nr-tm input{-webkit-flex:1;flex:1;margin:0 8px;touch-action:pan-y;-webkit-appearance:auto;appearance:auto;min-width:0} .nr-gt,.nr-gap u{font-weight:800;text-decoration:underline;cursor:pointer;white-space:nowrap} .nr-ta{width:100%;height:200px;padding:10px;border:1px solid #bcd;margin-top:8px;font-size:15px} .nr-out{white-space:pre-wrap;background:#f3f5f7;border-radius:10px;padding:8px;font-size:13px;margin-top:6px;max-height:90px;overflow:auto} .nr-warn{background:#fff3cd;border-radius:10px;padding:8px 10px;font-size:14px;margin-bottom:8px} #nr-tip{position:fixed;z-index:2147483647;display:none;max-width:240px;background:#1f2a37;color:#fff;font-size:14px;padding:8px 12px;border-radius:10px;line-height:1.4} #nr-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:2147483647;display:none;background:#111827;color:#fff;padding:12px 18px;border-radius:999px;font-size:15px;max-width:90%} .nr-sp{-webkit-flex:0 0 100%;flex:0 0 100%;margin-top:4px} .nr-two button{-webkit-flex:1;flex:1} .nr-cell{border:2px solid #cfe3f7;border-radius:10px;padding:10px;background:#fbfdff} .nr-fr{border-bottom:2px solid #e3eaf1;padding:4px 0 8px} .nr-fr:last-child{border-bottom:0} .nr-ing{position:relative;margin-top:8px} .nr-bd{position:absolute;top:-9px;right:-4px;min-width:20px;height:20px;border-radius:50%;background:#e5484d;color:#fff;font-size:12px;font-style:normal;font-weight:800;text-align:center;line-height:20px;padding:0 4px;z-index:1} .nr-box .nr-pills,#nr-bar{padding-top:8px} .nr-sh button{margin-left:4px} .nr-ar{line-height:1.1} .nr-sw.nr-h .nr-sec,.nr-sw.nr-h .nr-gap{min-width:0;-webkit-flex:0 0 100%;flex:0 0 100%;margin-right:8px} .nr-sw.nr-h.nr-v1 .nr-sec,.nr-sw.nr-h.nr-v1 .nr-gap{-webkit-flex:0 0 66%;flex:0 0 66%} .nr-sw.nr-v1:not(.nr-h) .nr-sec,.nr-sw.nr-v1:not(.nr-h) .nr-gap{width:66%;margin-left:auto;margin-right:auto} .nr-scr{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;padding:4px 0;margin-top:4px} .nr-scr b{position:-webkit-sticky;position:sticky;left:0;background:#fff;-webkit-flex-shrink:0;flex-shrink:0;font-size:12px;color:#5b6b7b;margin-right:6px;padding-right:2px;z-index:1} #nr-hi{display:-webkit-flex;display:flex} .nr-mini{white-space:nowrap;-webkit-flex-shrink:0;flex-shrink:0;padding:2px 9px;margin-right:4px;border:1px solid #9dd1b4;background:#e8f5ee;color:#18623a;font-size:12px;font-weight:700;border-radius:999px} .nr-set{-webkit-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y} .nr-set button,.nr-set b{-webkit-flex-shrink:0;flex-shrink:0;white-space:nowrap} .nr-sp{-webkit-flex:0 0 auto;flex:0 0 auto;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin:0 0 0 2px;-webkit-animation:nrIn .2s;animation:nrIn .2s} @-webkit-keyframes nrIn{from{opacity:0;-webkit-transform:translateX(-14px)}to{opacity:1;-webkit-transform:none}} @keyframes nrIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}} .nr-hs1{display:-webkit-flex;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;padding:8px 0 4px} .nr-hs1 .nr-pill{white-space:nowrap;-webkit-flex-shrink:0;flex-shrink:0} .nr-note{font-size:12px;color:#1769d1;margin-top:6px} .nr-rs{font-size:13px;padding:4px 12px;margin:0;background:#fff;border-color:#e5484d;color:#e5484d} .nr-run{background:#fff0f0;box-shadow:0 0 0 2px #f6b3b5;border-radius:8px} .nr-tmt{font-size:19px;font-weight:800;color:#c2410c;word-break:keep-all;min-height:28px} .nr-tmb{margin-top:10px} #nr-pop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;display:none;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;padding:12px;background:rgba(0,0,0,.5);font-family:-apple-system,BlinkMacSystemFont,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;color:#1f2a37;font-size:16px;line-height:1.5} #nr-pop *{box-sizing:border-box;-webkit-box-sizing:border-box} #nr-pop button,#nr-pop textarea{font-family:inherit;font-size:16px;border-radius:12px;touch-action:manipulation;-webkit-appearance:none;appearance:none} .nr-card{width:100%;max-width:520px;max-height:92%;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;border-radius:16px;padding:14px;text-align:left} body.nr-popup-open{overflow:hidden} #nr-app{font-size:14px;padding:6px 6px 80px} #nr-app button,#nr-app input,#nr-app textarea{font-size:13px} #nr-app .nr-title{font-size:19px} #nr-app .nr-sub{font-size:11px} #nr-app .nr-bar{padding:8px} #nr-app .nr-tb button{padding:3px 7px;font-size:12px;margin-left:3px;border-radius:8px} #nr-app .nr-set button,#nr-app .nr-dr button,#nr-app .nr-tabs button{padding:3px 8px;font-size:12px;margin:0 4px 3px 0;border-radius:8px} #nr-app .nr-ah{padding:9px 34px 9px 11px;font-size:14px} #nr-app .nr-ab{padding:8px} #nr-app .nr-acc{margin-top:7px} #nr-app .nr-lb{font-size:12px;margin:6px 0 3px} #nr-app .nr-hint{font-size:11px} #nr-app .nr-note{font-size:11px} #nr-app .nr-sbtn,#nr-app .nr-row button{padding:5px 10px;font-size:12px;margin:3px 5px 0 0;border-radius:9px} #nr-app .nr-row input{padding:6px 8px;font-size:13px} #nr-app .nr-pill{padding:3px 9px;font-size:12px;margin:0 4px 4px 0} #nr-app .nr-ing{padding:1px 8px;margin-top:7px;margin-bottom:2px} #nr-app .nr-ing button{width:20px;height:20px;font-size:12px;margin:0 2px;line-height:1} #nr-app .nr-bd{min-width:16px;height:16px;line-height:16px;font-size:10px;top:-8px;right:-3px;padding:0 3px} #nr-app .nr-chp{padding:2px 8px;font-size:11px} #nr-app .nr-mini{padding:1px 7px;font-size:11px} #nr-app .nr-rs{font-size:11px;padding:2px 9px} #nr-app .nr-box{padding:6px 6px 0} #nr-app .nr-cell{padding:7px} #nr-app .nr-sec{padding:5px;margin-top:5px} #nr-app .nr-sh input{padding:5px 8px;font-size:13px} #nr-app .nr-sh button{margin-left:6px;padding:0 10px;font-size:13px} #nr-app .nr-ed{min-height:58px;padding:7px;font-size:13px} #nr-app .nr-chip{font-size:12px;padding:0 7px} #nr-app .nr-tmt{font-size:15px;min-height:22px} #nr-app .nr-ta{font-size:12px} #nr-app .nr-gap{background:#f5f8fb;border:1px dashed #b9cde2;border-radius:10px;padding:3px 6px;margin-top:5px;font-size:11px;color:#4b6a8a} #nr-app .nr-gl{font-size:10px;font-weight:700;color:#1769d1;line-height:1.3} #nr-app .nr-gap input[type=text]{font-size:11px;padding:3px 6px;margin:2px 0;border:1px solid #cdd8e3;border-radius:7px;text-align:left} #nr-app .nr-tm{font-size:11px;margin-top:2px} #nr-app .nr-tm input{margin:0 6px 0 0} #nr-app .nr-mx{font-size:10px;color:#8a97a6;text-align:right} #nr-app .nr-sw.nr-h .nr-gap{-webkit-flex:0 0 150px;flex:0 0 150px;-webkit-align-self:center;align-self:center} #nr-app .nr-sw.nr-h.nr-v1 .nr-gap{-webkit-flex:0 0 150px;flex:0 0 150px} #nr-app .nr-sw.nr-v1:not(.nr-h) .nr-gap{width:60%} #nr-app .nr-sw.nr-h .nr-sec{-webkit-align-self:flex-start;align-self:flex-start} #nr-app .nr-tb button.nr-on{background:#1769d1;color:#fff;border-color:#1769d1} #nr-pop{font-size:14px} #nr-pop button,#nr-pop textarea{font-size:13px} #nr-pop .nr-sbtn{padding:6px 11px;font-size:13px} #nr-app .nr-bar{background:#fafdff;border-color:#e3f0fb} .nr-ver{font-size:9px;color:#1769d1;font-weight:600;margin-left:1px} #nr-app .nr-sub1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} #nr-app .nr-set{-webkit-align-items:center;align-items:center;margin-top:6px} #nr-app .nr-svt{font-size:11px;color:#6b7b8c;white-space:nowrap;overflow:hidden;display:inline-block;max-width:150px;margin:0 4px 3px 2px} .nr-svout{-webkit-animation:nrOut .25s forwards;animation:nrOut .25s forwards} .nr-svin{-webkit-animation:nrSvIn .25s;animation:nrSvIn .25s} @-webkit-keyframes nrOut{from{opacity:1;-webkit-transform:translateX(0);max-width:150px}to{opacity:0;-webkit-transform:translateX(18px);max-width:0;margin:0}} @keyframes nrOut{from{opacity:1;transform:translateX(0);max-width:150px}to{opacity:0;transform:translateX(18px);max-width:0;margin:0}} @-webkit-keyframes nrSvIn{from{opacity:0;-webkit-transform:translateX(18px)}to{opacity:1;-webkit-transform:none}} @keyframes nrSvIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}} #nr-app .nr-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #nr-app .nr-mini{padding:5px 9px;line-height:1.2} #nr-app .nr-rs{padding:2px 9px} #nr-app .nr-scr{padding:5px 0} #nr-app .nr-dr{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center} #nr-app .nr-dr button{height:26px;padding:0 9px;margin:0 0 0 4px;line-height:1;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;font-size:12px} #nr-app .nr-gap{background:none;border:0;border-left:2px dashed #9fc4ee;border-radius:0;padding:2px 0 2px 8px;margin:0 0 0 14px;font-size:10px;color:#6b86a3} #nr-app .nr-gi{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center} #nr-app .nr-gar{font-style:normal;font-weight:800;color:#1769d1;font-size:12px;margin-right:4px} #nr-app .nr-gap input[type=text]{-webkit-flex:1;flex:1;min-width:0;width:auto;height:22px;font-size:11px;padding:0 8px;margin:0;border:1px solid #d5e2ef;border-radius:11px;background:#fff;text-align:left} #nr-app .nr-tm{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin-top:3px;font-size:10px} #nr-app .nr-tm input{-webkit-flex:1;flex:1;min-width:0;height:14px;margin:0 6px 0 0} #nr-app .nr-gt{font-size:10px;font-weight:700;color:#1769d1;background:#eaf3fc;border-radius:9px;padding:0 6px;text-decoration:none} #nr-app .nr-gap u{font-size:9px;color:#9bb0c6;margin-left:3px;text-decoration:none;white-space:nowrap} #nr-app .nr-sw.nr-h .nr-gap,#nr-app .nr-sw.nr-h.nr-v1 .nr-gap{-webkit-flex:0 0 118px;flex:0 0 118px;-webkit-align-self:center;align-self:center;border-left:0;border-top:2px dashed #9fc4ee;margin:0 6px 0 0;padding:4px 2px 0} #nr-app .nr-sw.nr-v1:not(.nr-h) .nr-gap{width:66%;margin-left:auto;margin-right:auto} #nr-app .nr-ph{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;padding:6px 34px 6px 8px;cursor:pointer} #nr-app .nr-ph .nr-nm{font-size:12px;white-space:nowrap;margin:0} #nr-app .nr-ph input{-webkit-flex:1;flex:1;min-width:0;height:26px;margin:0 6px;padding:0 8px;font-size:13px;border:1px solid #cdd8e3;border-radius:8px;background:#fff} #nr-app .nr-hbtn{height:24px;padding:0 9px;font-size:11px;font-weight:700;border:0;border-radius:8px;background:#1769d1;color:#fff;white-space:nowrap} #nr-app .nr-gap textarea.nr-gta{-webkit-flex:1;flex:1;min-width:0;display:block;height:22px;font-size:11px;line-height:1.3;padding:3px 8px;margin:0;border:1px solid #d5e2ef;border-radius:11px;background:#fff;resize:none;overflow:hidden;box-sizing:border-box} #nr-app .nr-chs{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-top:6px} #nr-app .nr-ch{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;min-width:56px;margin:0 5px 5px 0;padding:3px 8px;border:1.5px solid #9fc4ee;background:#fff;border-radius:8px} #nr-app .nr-ch i{font-style:normal;font-size:9px;color:#6b86a3;line-height:1.1} #nr-app .nr-ch b{font-size:14px;color:#1769d1;line-height:1.2} #nr-app .nr-ch.nr-run{border-color:#e5484d;background:#fff0f0} #nr-app .nr-ch.nr-run b{color:#c2410c} #nr-app .nr-ch.nr-ps{opacity:.7} #nr-app .nr-ch.nr-dn{background:#eef2f6;border-color:#cfd8e1} #nr-app .nr-ch.nr-dn b{color:#8a97a6} #nr-app .nr-tmz{margin-top:10px} #nr-app .nr-tws{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;padding-top:8px} #nr-app .nr-tw{position:relative;margin:0 12px 14px 0} #nr-app .nr-tcd{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;min-width:92px;padding:8px 14px;border:0;border-radius:14px;box-shadow:0 2px 6px rgba(0,0,0,.14)} #nr-app .nr-tcd i{font-style:normal;font-size:10px;font-weight:700;color:#506070;line-height:1.1} #nr-app .nr-tcd b{font-size:26px;line-height:1.15;color:#1f2a37;letter-spacing:-.5px} #nr-app .nr-tcd.nr-run{outline:3px solid #e5484d} #nr-app .nr-tcd.nr-ps{opacity:.7;outline-style:dashed} #nr-app .nr-tcd.nr-dn{opacity:.5} #nr-app .nr-tcd.nr-dn b{text-decoration:line-through} #nr-app .nr-tx{position:absolute;top:-8px;right:-8px;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:#e5484d;color:#fff;font-size:12px;line-height:22px;text-align:center} #nr-app .nr-tadd{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-top:2px} #nr-app .nr-tin{width:46px;height:28px;margin:0 4px 0 0;padding:0;text-align:center;font-size:14px;border:1px solid #cdd8e3;border-radius:8px;background:#fff} #nr-app .nr-tctl{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-top:8px} #nr-app .nr-topt{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-top:6px} #nr-app .nr-topt button{height:26px;padding:0 10px;margin:0 6px 0 0;font-size:12px;border:1px solid #9fc4ee;background:#fff;color:#14508f;border-radius:13px;font-weight:700} #nr-app .nr-topt button.nr-on{background:#1769d1;color:#fff;border-color:#1769d1} #nr-app .nr-tn{font-size:9px;font-weight:600;color:#1769d1;margin-left:5px} #nr-app .nr-div{height:0;border-top:1px solid #dbe5ef;margin:14px 0 2px} #nr-app .nr-tmz{margin-top:8px;padding:8px;border:1.5px solid #d3e3f3;border-radius:14px;background:#fafcff} #nr-app .nr-stp{background:#e5484d} #nr-app .nr-hbtn.nr-rr{background:#eef2f6;color:#445;margin-right:4px} #nr-app .nr-ph .nr-hbtn{margin:0} #nr-app .nr-how{margin-top:6px;padding:6px 9px;border:1px solid #f0dca0;border-radius:10px;background:#fffbea;color:#5a4a10;font-size:12px;line-height:1.5} #nr-app .nr-pill.nr-hb{position:relative;margin-top:9px} #nr-app .nr-radd{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin:0 0 8px} #nr-app .nr-rai{-webkit-flex:1;flex:1;min-width:0;height:28px;margin:0 6px 0 0;padding:0 9px;font-size:13px;border:1px solid #cdd8e3;border-radius:9px;background:#fff} #nr-app .nr-cta{-webkit-justify-content:center;justify-content:center;margin-top:16px} #nr-app .nr-cta .nr-sbtn{padding:8px 18px;font-size:13px;margin:0 5px} #nr-app .nr-sw:not(.nr-h) .nr-gap{width:66%;min-width:170px;margin-left:14px;margin-right:0} #nr-app .nr-sw.nr-v1:not(.nr-h) .nr-gap{width:44%;min-width:170px;margin-left:auto;margin-right:auto} #nr-app .nr-chip{padding-right:6px} #nr-app .nr-chip::after{content:'×';margin-left:5px;font-weight:800;color:#c2410c} .nr-fsx{display:none} #nr-app .nr-acc.nr-fs{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;margin:0;border:0;border-radius:0;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:env(safe-area-inset-top)} #nr-app .nr-acc.nr-fs>.nr-ab{display:block;padding:8px 8px 60px} #nr-app .nr-acc.nr-fs .nr-fsx{display:block;position:-webkit-sticky;position:sticky;top:0;z-index:2;width:100%;margin:0 0 8px;padding:7px;border:0;border-radius:10px;background:#1f2a37;color:#fff;font-weight:700;font-size:13px} body.nr-fsb{overflow:hidden} #nr-app .nr-bar{position:relative;overflow:hidden;background:linear-gradient(110deg,#2c4a80 0%,#4468a8 50%,#2c4a80 100%);background-size:220% 100%;border-color:#5b80bd;-webkit-animation:nrBg 9s ease-in-out infinite;animation:nrBg 9s ease-in-out infinite} @-webkit-keyframes nrBg{0%,100%{background-position:0 0}50%{background-position:100% 0}} @keyframes nrBg{0%,100%{background-position:0 0}50%{background-position:100% 0}} #nr-app .nr-bar::after{content:'';position:absolute;top:0;left:-45%;width:35%;height:100%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);-webkit-transform:skewX(-18deg);transform:skewX(-18deg);-webkit-animation:nrShine 4.2s ease-in-out infinite;animation:nrShine 4.2s ease-in-out infinite} @-webkit-keyframes nrShine{0%{left:-45%}60%,100%{left:125%}} @keyframes nrShine{0%{left:-45%}60%,100%{left:125%}} @media (prefers-reduced-motion:reduce){#nr-app .nr-bar,#nr-app .nr-bar::after{-webkit-animation:none;animation:none}} #nr-app .nr-bar .nr-title{color:#fff} #nr-app .nr-bar .nr-sub{color:#a9d0ff} #nr-app .nr-bar .nr-ver{color:#8fc4ff} #nr-app .nr-bar .nr-svt{color:#d6e4f7} #nr-app .nr-tb button{min-height:34px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center} #nr-app .nr-bi{font-size:14px;line-height:1} #nr-app .nr-bc{font-size:8px;line-height:1.1;margin-top:1px;font-weight:700} #nr-app #nr-lt{-webkit-filter:grayscale(1);filter:grayscale(1);opacity:.7} #nr-app #nr-lt.nr-on{-webkit-filter:none;filter:none;opacity:1;background:#fff0a6;border-color:#ffd43b;color:#7a5a00;box-shadow:0 0 10px #ffd43b} #nr-app .nr-sec{position:relative;padding:4px} #nr-app .nr-sec.nr-bg0{background:#f3f8ff} #nr-app .nr-sec.nr-bg1{background:#fff7f0} #nr-app .nr-sec.nr-bg2{background:#f2fbf5} #nr-app .nr-sec.nr-bg3{background:#fff5fa} #nr-app .nr-sec.nr-bg4{background:#f7f4ff} #nr-app .nr-sec.nr-bg5{background:#fffcec} #nr-app .nr-sec .nr-ed{border:0;background:transparent;padding:8px 26px 8px 8px;min-height:64px} #nr-app .nr-ed:empty:before{white-space:pre-line;line-height:1.5} #nr-app .nr-ed:focus:empty:before{content:''} #nr-app .nr-sxb{position:absolute;top:4px;right:4px;z-index:1;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.08);color:#555;font-size:11px;line-height:20px;text-align:center} #nr-app .nr-sep{font-style:normal;color:#9bb0c6;margin:0 6px 0 2px;-webkit-align-self:center;align-self:center} #nr-app .nr-tctl{-webkit-align-items:center;align-items:center} #nr-app .nr-tg{height:26px;padding:0 10px;margin:3px 5px 0 0;font-size:12px;font-weight:700;border:1px solid #9fc4ee;background:#fff;color:#14508f;border-radius:13px} #nr-app .nr-tg.nr-on{background:#1769d1;color:#fff;border-color:#1769d1} #nr-app .nr-sumrow{text-align:center;margin-top:8px} #nr-app .nr-sumb{width:66%;padding:9px 6px;font-size:13px;margin:0} #nr-app .nr-sumh{font-size:10px;font-weight:600;opacity:.9} #nr-app .nr-cta2{-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;margin-top:10px} #nr-app .nr-adr{font-weight:800;color:#fff;letter-spacing:.2px} #nr-app .nr-svt{max-width:210px} #nr-app .nr-sndb{padding:0 9px} #nr-tip{max-width:280px} </style> <div id="nr-app"> <div class="nr-bar"> <div class="nr-top"> <div><div class="nr-title" data-a="ttl" data-tip="나만의 레시피를 댓글에 저장하고 꺼내보아요" style="cursor:pointer">나레시피저장소<span class="nr-ver">_V18_261005</span></div></div> <div class="nr-tb"> <button data-a="opsh" title="공유: 원본 링크 / 짧은 링크 / QR코드" data-tip="공유: 원본 링크 / 짧은 링크 / QR코드">공유</button> <button data-a="opsv" title="저장: 엑셀 붙여넣기 / CSV / HTML 파일" data-tip="저장: 엑셀 붙여넣기 / CSV / HTML 파일">저장</button> <button data-a="kbd" id="nr-kb" title="키보드 모드: 켜면 화상키보드가 안 나와요" data-tip="키보드: 켜면 화상키보드가 안 나와요 (블루투스 키보드용)"><span class="nr-bi">⌨️</span><span class="nr-bc">키보드</span></button><button data-a="lit" id="nr-lt" title="항상켜짐: 켜면 화면이 꺼지지 않아요" data-tip="항상켜짐: 켜면 화면이 꺼지지 않아요 (켜지면 노란색)"><span class="nr-bi"> </span><span class="nr-bc">항상켜짐</span></button> </div> </div> <div class="nr-sub nr-sub1">클릭 몇 번으로 나만의 레시피를 정리하고, 댓글이나 링크로 저장해요</div> <div class="nr-set" id="nr-set"><button class="nr-on" data-a="setp" id="nr-setb" data-tip="누르면 스푼/ml를 바꿀 수 있어요"></button><span id="nr-sv" class="nr-svt"></span><div class="nr-sp" id="nr-sp" style="display:none"><button data-a="unit" data-u="스푼" id="nr-u1" data-tip="스푼 기준으로 적어요"> </button><button data-a="unit" data-u="ml" id="nr-u2" data-tip="ml 기준으로 적어요">ml</button></div></div> </div> <div class="nr-acc"><button class="nr-ah" data-a="acc">1. 사용설명서</button> <div class="nr-ab"> <div class="nr-tabs"><button class="nr-on" data-a="tab" data-i="0">1.00</button><button data-a="tab" data-i="1">2.00</button><button data-a="tab" data-i="2">3.00</button></div> <div class="nr-tp nr-on">1.00 : 맨 위 [세팅] 버튼을 눌러 스푼/ml를 정해요. 정한 값이 버튼에 보여요(옆 시각은 마지막으로 저장된 시각). 입력한 내용은 4초마다 이 기기에 자동저장되고, 새로고침해도 다시 불러와요. 블루투스 키보드를 쓸 때는 맨 위 ⌨️(키보드)를 누르면 화상키보드가 안 나와요(다시 누르면 켜져요). (항상켜짐)을 누르면 화면이 꺼지지 않아요.</div> <div class="nr-tp">2.00 : 메뉴나 식재료를 고르면 재료 후보가 생겨요. 후보를 누르면 재료상태바에 들어가요. 나레시피의 [재료가져오기]로 가져가요. 3번의 분류는 한식·양식·중식·반찬·소스레시피, 식재료는 야채·소스·고기·생선·음료·기타예요. 재료 수량 바꾸기·지우기는 재료칸의 [편집]을 눌러서 하고, 직접 넣으려면 5번 나레시피의 [+추가]를 눌러요. 3번에서 메뉴를 누르면 간단한 요리방법이 나오고, 소스레시피의 숫자는 큰술 수예요. 재료상태바의 [ 공유]로 장보기 목록을 카톡 등으로 보낼 수 있어요. 캡처사진은 인식된 글자를 고친 뒤 [이 글자로 다시 찾기]로 재료를 다시 뽑을 수 있어요.</div> <div class="nr-tp">3.00 : 재료를 누르면 열려 있는 글칸에 들어가요. 섹션 사이 보조설명에서 설명과 시간을 정해요(시간을 누르면 5, 1:30, 90초처럼 입력해요. 시·분·초는 [직접 추가]로 타이머를 더 만들 수 있어요. 시간 슬라이더는 30분까지 1분씩, 그 뒤는 1시간씩(최대 6시간)이고 더 길면 [직접입력]이에요. 조리순서 줄 맨 끝 ⛶로 그 나레시피만 전체화면으로 볼 수 있고, 글칸 안 재료 알약은 오른쪽 ×를 누르면 지워져요. 재료는 쉼표(,)로 여러 개를 한 번에 넣을 수 있고, 요약은 아래 [요약]을 눌러야 채워지며 요약 후 내용을 바꾸면 [요약]을 다시 눌러요. 맨 위 버튼들은 꾹 누르면 설명이 나와요. [타인링크공유]는 0-1.kr/88 로 시작하는 긴 링크·짧은 링크를 만들어요(받은 사람은 링크 그대로 0-1.kr/88 에서 확인·공유해요))(섹션추가 아래 타이머 카드를 누르면 그 타이머만 시작/정지하고, [시작]은 카드 순서대로 카운트다운해요. 끝나면 소리·진동이 나고 카드 아래에서 켜고 끌 수 있어요. 새로고침하면 타이머는 멈춰요). 맨 위 [공유]는 링크·QR, [저장]은 엑셀 복사·CSV·HTML 파일이에요. 나레시피의 [댓글저장]은 999자 안으로 줄여 담고, [링크저장]은 짧은 링크를 만들어요. 뷰1/뷰2로 섹션 크기를 바꿔요.</div> </div> </div> <div class="nr-acc"><button class="nr-ah" data-a="acc">2. 캡처사진 보기 (참고용, 저장 안 됨)</button> <div class="nr-ab"> <div class="nr-warn">⚠ 사진 속 글자 인식은 잘 안 될 수 있어요. 처음에는 인식 데이터를 받느라 1분쯤 걸리고, 결과가 틀릴 수 있으니 참고만 하세요.</div> <input type="file" accept="image/*" id="nr-file"> <div><button class="nr-sbtn" data-a="ocr" data-tip="사진에서 식재료 글자를 찾아요 (실험)">재료 뽑기 (실험)</button></div> <div class="nr-hint" id="nr-st"></div> <img id="nr-prev" alt="" style="display:none;max-width:100%;border-radius:10px;margin-top:8px"> <div class="nr-lb">뽑은 재료 (누르면 재료상태바에 들어가요)</div> <div class="nr-pills" id="nr-oc"></div> <div class="nr-ctl"><button class="nr-sbtn" data-a="ocall" data-tip="찾은 재료를 모두 재료상태바에 넣어요">찾은 재료 모두 상태바로</button></div> <div id="nr-rawb" style="display:none"><div class="nr-lb">인식된 글자 (틀린 곳은 고친 뒤 다시 찾기)</div><textarea class="nr-ta" id="nr-rawt" style="height:110px;margin-top:0"></textarea><button class="nr-sbtn nr-gr" data-a="ocf" data-tip="위 글자에서 재료를 다시 찾아요">이 글자로 다시 찾기</button></div> </div> </div> <div class="nr-acc nr-open"><button class="nr-ah" data-a="acc">3. 기본레시피&amp;식재료(간단재료 뽑아내기)</button> <div class="nr-ab"> <div class="nr-tabs nr-two" id="nr-rbt"><button class="nr-on" data-a="rb" data-i="0">기본레시피</button><button data-a="rb" data-i="1">식재료</button></div> <div class="nr-cell"><div class="nr-tp nr-on" id="nr-rb0"><div id="nr-cm"></div></div> <div class="nr-tp" id="nr-rb1"><div id="nr-fd"></div></div></div> <div class="nr-cell" style="margin-top:10px"><div class="nr-rw" style="margin:0 0 6px"><span class="nr-lb" style="margin:0">재료 후보</span><span><button class="nr-sbtn nr-gr" data-a="cdr" style="margin:0 4px 0 0" data-tip="재료 후보를 모두 비워요">초기화</button><button class="nr-sbtn" id="nr-all" data-a="addall" style="margin:0;font-size:11px;padding:4px 7px;white-space:nowrap" data-tip="후보를 재료상태바로 옮겨요">재료상태바로이동</button></span></div><div class="nr-pills" id="nr-cd"></div><div class="nr-note">[재료상태바로이동]클릭시 재료상태바로 메뉴들이 이동합니다.</div></div> </div> </div> <div class="nr-acc nr-open"><button class="nr-ah" data-a="acc">4. 재료상태바</button> <div class="nr-ab"><div class="nr-hint">담은 재료는 각 나레시피의 [재료가져오기]로 가져가요.</div><div class="nr-cell" style="margin-top:6px"><div class="nr-rw" style="margin:0 0 4px"><span class="nr-lb" style="margin:0">담은 재료 <span id="nr-cnt">0</span>개</span><span><button class="nr-mini nr-rs" style="border-color:#2e8b57;color:#2e8b57;margin-right:4px" data-a="bsh" data-tip="재료상태바 목록을 카톡 등으로 공유해요 (장보기용)"> 공유</button><button class="nr-mini nr-rs" style="border-color:#1769d1;color:#1769d1;margin-right:4px" data-a="edt" data-p="-1" data-tip="재료 수량을 바꾸거나 지울 때 켜요">✎편집</button><button class="nr-mini nr-rs" data-a="rst" data-tip="재료상태바를 모두 비워요">초기화</button></span></div><div class="nr-pills" id="nr-bar"></div></div> <div class="nr-row"><input id="nr-in" type="text" placeholder="재료 직접 입력 (쉼표로 여러 개)"><button data-a="addm" data-tip="입력한 재료를 재료상태바에 넣어요">추가</button></div><div class="nr-scr"><b>(자주)</b><span id="nr-hi"></span></div> </div> </div> <div class="nr-acc nr-open"><button class="nr-ah" data-a="acc">5. 나레시피저장소<span class="nr-tn">(재료직접입력시 여기서부터)</span></button> <div class="nr-ab"><div id="nr-pj"></div> <button class="nr-sbtn" data-a="addp" data-tip="새 나레시피 프로젝트를 추가해요">+ 프로젝트 추가</button> </div> </div> <div style="margin-top:14px;font-size:12px;color:#8a97a6;text-align:center;white-space:nowrap">스타트업EX _ cds1981@naver.com</div> </div> <div id="nr-pop"><div class="nr-card"><div class="nr-rw" style="margin:0 0 8px"><b id="nr-popt" style="font-size:19px"></b><button class="nr-sbtn nr-gr" data-a="pcl" style="margin:0">닫기 ✕</button></div><div id="nr-popb"></div></div></div> <div id="nr-tip"></div><div id="nr-toast"></div> <script> (function(){ function sp(s){return s.split(',')} var FD={'야채':sp('양파,대파,마늘,생강,당근,감자,고구마,애호박,버섯,표고버섯,팽이버섯,양배추,배추,무,콩나물,시금치,상추,깻잎,오이,고추,청양고추,파프리카,브로콜리,토마토,가지,부추,숙주,미나리,나물,양송이,청경채,셀러리,옥수수,단호박,도라지,고사리,방울토마토,피망,아스파라거스,열무,얼갈이,우엉,마늘종,꽈리고추'), '소스':sp('간장,고추장,된장,고춧가루,설탕,소금,후추,참기름,들기름,식초,굴소스,맛술,올리고당,케첩,마요네즈,토마토소스,쌈장,다진마늘,올리브유,식용유,깨,새우젓,액젓,매실청,물엿,꿀,카레가루,돈가스소스,머스터드,발사믹식초,데리야끼소스,두반장,춘장,칠리소스,겨자,와사비'), '고기':sp('소고기,돼지고기,닭고기,베이컨,햄,소시지,삼겹살,목살,닭가슴살,다짐육,갈비,양지,사태,안심,등심,우삼겹,닭다리,닭날개,오리고기,앞다리살,돼지갈비,차돌박이'), '생선':sp('고등어,갈치,연어,오징어,새우,멸치,조개,참치,황태,꽃게,삼치,꽁치,명태,동태,대구,광어,낙지,문어,주꾸미,홍합,굴,바지락,전복,맛살'), '음료':sp('소주,맥주,막걸리,와인,청주,사이다,콜라,탄산수,커피,녹차,홍차,오렌지주스,두유,요거트,코코넛밀크'), '기타':sp('계란,두부,밥,면,쌀,치즈,버터,우유,김치,김,어묵,떡,당면,밀가루,물,육수,로즈마리,레몬,양상추,미역,식빵,라면,연근,콩,진미채,순두부,유부,곤약,생크림,모짜렐라,크림치즈,또띠아,우동면,만두,부침가루,빵가루,전분,들깨가루,다시마,파래')}; var AM={}; function mk(s){var o={},a=s.split('|'),i,p,q,j,t,r;for(i=0;i<a.length;i++){p=a[i].split(':');q=p[1].split(',');r=[];for(j=0;j<q.length;j++){t=q[j].split('*');r.push(t[0]);if(t[1]){AM[p[0]]=AM[p[0]]||{};AM[p[0]][t[0]]=+t[1]}}o[p[0]]=r}return o} function mh(s){var o={},a=s.split('|'),i,k;for(i=0;i<a.length;i++){k=a[i].indexOf(':');o[a[i].slice(0,k)]=a[i].slice(k+1)}return o} var DB={'한식':mk('김치찌개:김치,돼지고기,두부,대파|된장찌개:된장,애호박,두부,양파|불고기:소고기,양파,간장,설탕|비빔밥:밥,고추장,나물,계란|순두부찌개:두부,고춧가루,대파,계란|부대찌개:김치,햄,소시지,라면|제육볶음:돼지고기,고추장,양파,대파|김치볶음밥:밥,김치,계란,대파|잡채:당면,당근,시금치,간장|갈비찜:소고기,당근,감자,간장|미역국:미역,소고기,참기름,간장|떡볶이:떡,어묵,고추장,대파|닭볶음탕:닭고기,감자,당근,고추장|계란찜:계란,대파,소금,육수|콩나물국:콩나물,대파,마늘,소금|오징어볶음:오징어,양파,고춧가루,대파|닭갈비:닭고기,양배추,고구마,고추장|비빔국수:면,고추장,오이,계란|어묵탕:어묵,무,대파,육수|칼국수:밀가루,애호박,감자,육수|삼겹살구이:삼겹살,상추,쌈장,마늘|김밥:밥,김,계란,당근,시금치|육개장:소고기,고사리,대파,숙주,고춧가루|갈비탕:소고기,무,대파,당면,마늘|북엇국:황태,계란,대파,무,참기름|닭죽:닭고기,쌀,당근,대파,참기름|잔치국수:면,애호박,당근,계란,멸치|수제비:밀가루,감자,애호박,멸치,대파|김치전:김치,부침가루,양파,식용유|해물파전:대파,부침가루,오징어,새우,계란|떡국:떡,소고기,계란,대파,김|만두국:만두,계란,대파,육수|보쌈:돼지고기,배추,마늘,된장,새우젓|두부김치:두부,김치,돼지고기,대파|낙지볶음:낙지,양파,고춧가루,대파,깨|고등어조림:고등어,무,대파,고춧가루,간장|김치찜:김치,돼지고기,양파,대파|곰탕:소고기,무,대파,마늘,소금|감자전:감자,양파,식용유,소금|떡갈비:소고기,양파,간장,설탕,참기름'), '양식':mk('파스타:면,올리브유,마늘,토마토소스|스테이크:소고기,버터,로즈마리,소금|리조또:쌀,양파,치즈,육수|샐러드:양상추,토마토,올리브유,레몬|까르보나라:면,베이컨,계란,치즈|알리오올리오:면,마늘,올리브유,고추|토마토파스타:면,토마토소스,양파,치즈|크림파스타:면,우유,버섯,치즈|피자:밀가루,치즈,토마토소스,햄|햄버거:소고기,양상추,토마토,치즈|오믈렛:계란,버터,치즈,양파|크림수프:우유,버터,양파,밀가루|그라탕:감자,치즈,우유,버터|라자냐:면,다짐육,토마토소스,치즈|치킨커틀릿:닭고기,밀가루,계란,식용유|스크램블에그:계란,버터,우유,소금|샌드위치:식빵,햄,치즈,양상추|프렌치토스트:식빵,계란,우유,버터|감바스:새우,마늘,올리브유,고추|팬케이크:밀가루,계란,우유,버터|미트볼:다짐육,양파,계란,빵가루,토마토소스|볼로네제:다짐육,양파,당근,토마토소스,면|뇨끼:감자,밀가루,계란,치즈,버터|봉골레:면,바지락,마늘,올리브유,고추|해산물파스타:면,새우,오징어,마늘,올리브유|치킨스테이크:닭고기,버터,마늘,로즈마리|연어스테이크:연어,버터,레몬,소금,후추|함박스테이크:다짐육,양파,계란,빵가루,케첩|돈가스:돼지고기,빵가루,계란,밀가루,식용유|카레라이스:카레가루,감자,당근,양파,밥|오므라이스:밥,계란,양파,케첩,버터|토마토스튜:소고기,토마토,양파,감자,당근|감자수프:감자,양파,우유,버터,소금|양송이수프:양송이,양파,우유,버터,밀가루|콘샐러드:옥수수,마요네즈,양파,설탕|시저샐러드:양상추,베이컨,치즈,빵가루,마요네즈|브루스케타:식빵,토마토,마늘,올리브유,치즈|핫도그:소시지,밀가루,빵가루,식용유,케첩|치즈오븐구이:치즈,감자,베이컨,올리브유|치킨너겟:닭가슴살,빵가루,계란,밀가루,식용유'), '중식':mk('짜장면:면,춘장,돼지고기,양파,식용유|짬뽕:면,오징어,새우,양배추,고춧가루|탕수육:돼지고기,전분,식초,설탕,당근|볶음밥:밥,계란,대파,식용유,굴소스|마파두부:두부,다짐육,두반장,대파,전분|깐풍기:닭고기,전분,대파,식초,고추|유린기:닭고기,전분,대파,간장,식초|고추잡채:돼지고기,피망,파프리카,굴소스,양파|팔보채:새우,오징어,양배추,당근,굴소스|양장피:오징어,새우,당근,오이,겨자|짜장밥:밥,춘장,돼지고기,양파|잡탕밥:밥,새우,오징어,배추,굴소스|울면:면,오징어,새우,계란,전분|군만두:만두,식용유,간장,식초|물만두:만두,간장,식초,고춧가루|꿔바로우:돼지고기,전분,식초,설탕,당근|멘보샤:식빵,새우,전분,식용유,계란|동파육:삼겹살,간장,설탕,대파,생강|토마토계란볶음:토마토,계란,대파,설탕,소금|라조기:닭고기,고추,양배추,두반장,전분|난자완스:다짐육,계란,전분,배추,굴소스|깐쇼새우:새우,전분,케첩,고추,대파|크림새우:새우,전분,마요네즈,우유,설탕|마라탕:두반장,청경채,숙주,소고기,당면|마라샹궈:두반장,청경채,양송이,소고기,피망|계란탕:계란,대파,육수,전분,참기름|새우볶음밥:밥,새우,계란,대파,굴소스|해물볶음밥:밥,오징어,새우,계란,굴소스|중국식냉면:면,오이,계란,햄,식초|쟁반짜장:면,춘장,오징어,새우,양파|간짜장:면,춘장,양파,돼지고기,식용유|유산슬:새우,오징어,표고버섯,전분,굴소스|어향가지:가지,다짐육,두반장,대파,전분|홍쇼두부:두부,돼지고기,굴소스,대파,전분|춘권:밀가루,양배추,당근,돼지고기,식용유|오향장육:돼지고기,간장,설탕,생강,대파|샤오롱바오:밀가루,다짐육,대파,생강,간장|짬뽕밥:밥,오징어,새우,양배추,고춧가루|굴짬뽕:면,굴,양배추,고춧가루,대파|삼선짜장:면,춘장,새우,오징어,양파'), '반찬':mk('계란말이:계란,대파,당근,소금|시금치나물:시금치,참기름,마늘,소금|멸치볶음:멸치,간장,올리고당,깨|감자조림:감자,간장,설탕,양파|콩나물무침:콩나물,참기름,마늘,소금|두부조림:두부,간장,고춧가루,대파|어묵볶음:어묵,양파,간장,올리고당|진미채볶음:진미채,고추장,올리고당,마요네즈|장조림:소고기,간장,설탕,계란|호박볶음:애호박,양파,참기름,소금|가지볶음:가지,간장,마늘,참기름|무생채:무,고춧가루,설탕,식초|오이무침:오이,고춧가루,식초,설탕|버섯볶음:버섯,양파,간장,참기름|깻잎장아찌:깻잎,간장,설탕,식초|연근조림:연근,간장,올리고당,깨|소시지볶음:소시지,양파,케첩,식용유|김무침:김,참기름,깨,간장|감자볶음:감자,양파,소금,식용유|콩자반:콩,간장,설탕,올리고당|숙주나물:숙주,참기름,마늘,소금|고사리나물:고사리,들기름,간장,마늘|도라지무침:도라지,고추장,식초,설탕,오이|무나물:무,들기름,대파,소금|가지나물:가지,간장,참기름,마늘|애호박전:애호박,부침가루,계란,식용유|동그랑땡:다짐육,두부,계란,양파,부침가루|두부부침:두부,계란,식용유,소금|깻잎전:깻잎,다짐육,부침가루,계란|오이소박이:오이,부추,고춧가루,마늘,액젓|깍두기:무,고춧가루,마늘,새우젓,설탕|배추겉절이:배추,고춧가루,마늘,액젓,설탕|파김치:대파,고춧가루,액젓,마늘,설탕|무말랭이무침:무,고춧가루,간장,물엿,깨|꽈리고추조림:꽈리고추,멸치,간장,올리고당|마늘종볶음:마늘종,간장,올리고당,식용유|감자채볶음:감자,당근,양파,소금,식용유|우엉조림:우엉,간장,올리고당,식용유,깨|미역줄기볶음:미역,마늘,식용유,깨|파래무침:파래,식초,설탕,참기름,깨'), '소스레시피':mk('만능간장소스:간장*6,설탕*2,맛술*3,다진마늘*1,물*6|비빔장:고추장*3,고춧가루*1,설탕*1,식초*2,다진마늘*1,참기름*1|초고추장:고추장*3,식초*3,설탕*2,올리고당*1,다진마늘*1|쌈장:된장*3,고추장*1,다진마늘*1,참기름*1,깨*1|불고기양념:간장*6,설탕*3,맛술*2,다진마늘*1,참기름*1,후추*0.5|갈비양념:간장*6,설탕*3,맛술*3,양파*3,다진마늘*1,참기름*1|제육양념:고추장*2,고춧가루*2,간장*2,설탕*1,다진마늘*1,맛술*2|데리야끼소스:간장*4,맛술*3,설탕*2,물엿*1,생강*0.5|돈가스소스:케첩*4,간장*1,설탕*1,식초*1,물*2|탕수육소스:식초*4,설탕*4,간장*2,전분*1,물*6|칠리소스:케첩*3,고추*1,설탕*2,식초*1,다진마늘*1|양념치킨소스:케첩*4,고추장*1,올리고당*2,다진마늘*1,설탕*1|간장치킨소스:간장*4,설탕*2,물엿*2,다진마늘*1,맛술*2|떡볶이소스:고추장*3,고춧가루*2,설탕*2,간장*1,물*10|볶음고추장:고추장*4,다짐육*5,설탕*1,참기름*1,깨*1|다대기:고춧가루*3,간장*2,다진마늘*1,참기름*1,대파*1|겨자소스:겨자*1,식초*2,설탕*1,간장*1,물*2|오리엔탈드레싱:간장*3,식초*3,설탕*2,올리브유*3,양파*2|발사믹드레싱:발사믹식초*3,올리브유*3,꿀*1,소금*0.5,후추*0.5|시저드레싱:마요네즈*3,치즈*1,레몬*1,다진마늘*0.5,올리브유*2|참깨드레싱:깨*3,마요네즈*2,설탕*1,식초*2,간장*1|요거트소스:요거트*4,마요네즈*1,레몬*1,꿀*1,소금*0.5|타르타르소스:마요네즈*4,양파*1,계란*1,식초*1,설탕*0.5|허니머스터드:머스터드*2,꿀*2,마요네즈*2,레몬*1|바비큐소스:케첩*4,간장*2,설탕*2,다진마늘*1,식초*1|토마토소스:토마토,양파*2,다진마늘*1,올리브유*2,소금*0.5|크림소스:생크림*6,우유*3,버터*1,밀가루*1,소금*0.5|알프레도소스:생크림*6,버터*2,치즈*3,다진마늘*1,후추*0.5|바질페스토:올리브유*5,치즈*2,다진마늘*1,소금*0.5|폰즈소스:간장*3,식초*2,레몬*2,맛술*1|만능쯔유:간장*6,맛술*4,설탕*2,다시마,물*10|덮밥소스:간장*3,맛술*2,설탕*1,물*5,전분*1|레몬드레싱:레몬*2,올리브유*3,꿀*1,소금*0.5,후추*0.5|유린기소스:간장*3,식초*2,설탕*1,대파*2,고추*1|꿔바로우소스:식초*4,설탕*4,케첩*2,전분*1,물*5|스리라차마요:마요네즈*3,칠리소스*1,꿀*0.5|어니언드레싱:양파*3,식초*2,올리브유*2,설탕*1,소금*0.5|칠리마요:마요네즈*3,칠리소스*1,꿀*0.5,레몬*0.5|마늘버터소스:버터*2,다진마늘*1,간장*1,후추*0.5|고추냉이간장:간장*3,와사비*0.5,식초*1,설탕*0.5')}; var HOW=mh('김치찌개:김치와 돼지고기를 볶고 물을 부어 끓여요|된장찌개:멸치육수에 된장을 풀고 채소와 두부를 넣어 끓여요|불고기:양념에 재워 센불에 볶아요|비빔밥:밥에 나물과 고추장을 올려 비벼요|순두부찌개:양념을 볶고 물과 순두부를 넣어 끓여요|부대찌개:김치 햄 소시지를 넣고 육수를 부어 끓여요|제육볶음:양념한 돼지고기를 센불에 볶아요|김치볶음밥:김치를 볶다가 밥을 넣고 볶아요|잡채:당면을 삶고 채소를 볶아 간장양념에 버무려요|갈비찜:핏물 뺀 갈비를 양념과 푹 졸여요|미역국:불린 미역을 볶고 물을 부어 끓여요|떡볶이:고추장 양념에 떡과 어묵을 넣고 졸여요|닭볶음탕:닭과 감자를 고추장 양념에 졸여요|계란찜:계란에 육수를 섞어 중약불에 쪄요|콩나물국:물에 콩나물을 넣고 뚜껑 덮어 끓여요|오징어볶음:양념한 오징어와 채소를 센불에 볶아요|닭갈비:양념한 닭과 양배추 고구마를 볶아요|비빔국수:삶은 면에 비빔장을 넣고 비벼요|어묵탕:멸치육수에 무와 어묵을 넣고 끓여요|칼국수:육수에 면을 넣고 애호박과 끓여요|삼겹살구이:팬에 노릇하게 구워 쌈장과 먹어요|김밥:간한 밥을 김에 펴고 재료를 말아요|육개장:소고기와 고사리를 볶고 고춧가루 육수에 끓여요|갈비탕:핏물 뺀 갈비를 푹 삶아 간해요|북엇국:북어를 볶고 물을 부어 끓인 뒤 계란을 풀어요|닭죽:삶은 닭을 찢고 쌀과 푹 끓여요|잔치국수:멸치육수에 삶은 면과 고명을 올려요|수제비:반죽을 떼어 멸치육수에 끓여요|김치전:김치에 부침가루를 섞어 노릇하게 부쳐요|해물파전:반죽에 파와 해물을 올려 부쳐요|떡국:육수에 떡을 넣고 끓여 계란과 김을 올려요|만두국:육수에 만두를 넣고 끓여요|보쌈:돼지고기를 삶아 썰어 김치와 먹어요|두부김치:두부를 데치고 볶음김치를 곁들여요|낙지볶음:양념한 낙지와 채소를 센불에 빨리 볶아요|고등어조림:무를 깔고 고등어에 양념을 부어 졸여요|김치찜:김치와 돼지고기를 물 조금 넣고 푹 끓여요|곰탕:사골과 양지를 오래 끓여 소금으로 간해요|감자전:간 감자를 팬에 노릇하게 부쳐요|떡갈비:다진 고기를 양념해 빚어 구워요|파스타:면을 삶아 소스와 볶아 섞어요|스테이크:고기에 소금 후추를 해 센불에 굽고 버터를 끼얹어요|리조또:쌀을 볶고 육수를 나눠 부으며 저어요|샐러드:채소를 씻어 물기를 빼고 드레싱에 버무려요|까르보나라:삶은 면에 베이컨과 계란 치즈 소스를 섞어요|알리오올리오:올리브유에 마늘을 볶아 면과 섞어요|토마토파스타:양파를 볶고 토마토소스를 끓여 면과 섞어요|크림파스타:우유와 치즈 소스에 삶은 면을 넣고 졸여요|피자:도우에 소스와 치즈를 올려 오븐에 구워요|햄버거:패티를 굽고 빵에 채소와 끼워요|오믈렛:푼 계란을 부쳐 속재료를 넣고 접어요|크림수프:양파를 볶고 우유와 밀가루로 걸쭉하게 끓여요|그라탕:재료에 소스와 치즈를 올려 오븐에 구워요|라자냐:면 소스 치즈를 겹겹이 쌓아 구워요|치킨커틀릿:닭고기에 튀김옷을 입혀 튀겨요|스크램블에그:계란을 풀어 약불에서 저으며 익혀요|샌드위치:빵에 재료를 올려 덮어요|프렌치토스트:계란우유물에 식빵을 적셔 버터에 구워요|감바스:올리브유에 마늘과 새우를 끓이듯 익혀요|팬케이크:반죽을 약불에 앞뒤로 구워요|미트볼:다진 고기 반죽을 빚어 굽고 소스에 졸여요|볼로네제:다진 고기와 채소를 토마토소스에 푹 끓여요|뇨끼:삶은 감자 반죽을 빚어 삶고 소스에 버무려요|봉골레:바지락을 마늘과 볶고 면을 섞어요|해산물파스타:해산물을 볶다가 면과 섞어요|치킨스테이크:닭을 눌러가며 구워 버터를 끼얹어요|연어스테이크:연어에 소금 후추를 해 버터에 굽고 레몬을 뿌려요|함박스테이크:반죽을 빚어 굽고 소스를 곁들여요|돈가스:고기에 튀김옷을 입혀 튀겨요|카레라이스:채소와 고기를 볶아 물을 붓고 카레를 풀어 끓여요|오므라이스:볶음밥을 계란 지단으로 감싸요|토마토스튜:고기와 채소를 토마토와 오래 끓여요|감자수프:감자와 양파를 끓여 갈고 우유를 넣어요|양송이수프:양송이를 볶아 우유와 갈아 끓여요|콘샐러드:옥수수에 마요네즈를 버무려요|시저샐러드:양상추에 드레싱 베이컨 치즈를 올려요|브루스케타:구운 빵에 토마토와 올리브유를 올려요|핫도그:소시지를 꽂아 반죽을 입혀 튀겨요|치즈오븐구이:재료에 치즈를 올려 오븐에 구워요|치킨너겟:다진 닭고기에 빵가루를 입혀 튀겨요|짜장면:춘장을 볶아 고기 양파와 끓여 면에 얹어요|짬뽕:고춧가루 채소 해물을 볶아 육수를 붓고 끓여요|탕수육:튀긴 고기에 새콤달콤 소스를 부어요|볶음밥:센불에 계란과 밥을 볶아요|마파두부:다진 고기와 두반장을 볶고 두부를 넣어 졸여요|깐풍기:튀긴 닭을 매콤달콤 소스에 볶아요|유린기:튀긴 닭에 간장 식초 소스를 부어요|고추잡채:채 썬 고기와 피망을 굴소스로 볶아요|팔보채:해물과 채소를 볶아 전분물로 걸쭉하게 해요|양장피:해물과 채소를 접시에 담고 겨자소스를 곁들여요|짜장밥:짜장소스를 밥에 얹어요|잡탕밥:해물과 채소 볶음을 밥에 얹어요|울면:해물 육수에 전분을 풀어 걸쭉하게 해 면에 부어요|군만두:팬에 기름을 둘러 만두를 노릇하게 구워요|물만두:끓는 물에 만두를 삶아 소스에 찍어요|꿔바로우:전분옷을 입혀 두 번 튀기고 소스에 버무려요|멘보샤:식빵 사이에 새우살을 넣어 튀겨요|동파육:삼겹살을 간장에 오래 졸여요|토마토계란볶음:계란을 볶고 토마토를 넣어 같이 볶아요|라조기:튀긴 닭을 고추 채소와 매콤하게 볶아요|난자완스:다진 고기를 빚어 튀기고 소스에 졸여요|깐쇼새우:튀긴 새우를 케첩 소스에 볶아요|크림새우:튀긴 새우를 마요네즈 소스에 버무려요|마라탕:육수에 두반장과 재료를 넣고 끓여요|마라샹궈:재료를 마라 양념에 센불로 볶아요|계란탕:끓는 육수에 계란을 풀어요|새우볶음밥:새우와 계란을 넣고 밥을 볶아요|해물볶음밥:해물과 밥을 센불에 볶아요|중국식냉면:차가운 면에 채소와 계란을 올리고 소스를 부어요|쟁반짜장:해물과 채소 짜장을 큰 접시에 면과 담아요|간짜장:물 없이 볶은 짜장을 면에 얹어요|유산슬:해물과 채소를 볶아 전분물로 걸쭉하게 해요|어향가지:튀기듯 익힌 가지를 매콤 소스에 볶아요|홍쇼두부:부친 두부를 굴소스에 졸여요|춘권:속재료를 얇은 피에 말아 튀겨요|오향장육:삶은 돼지고기를 간장 향신료에 졸여 썰어요|샤오롱바오:육즙 만두를 빚어 쪄요|짬뽕밥:짬뽕 국물을 밥에 부어요|굴짬뽕:굴을 넣어 짬뽕을 끓여요|삼선짜장:새우 오징어 등을 넣어 짜장을 볶아요|계란말이:계란을 풀어 채소를 넣고 돌돌 말아요|시금치나물:데친 시금치를 양념에 무쳐요|멸치볶음:멸치를 볶고 간장 올리고당에 버무려요|감자조림:감자를 간장 설탕 물에 졸여요|콩나물무침:데친 콩나물을 양념에 무쳐요|두부조림:부친 두부에 양념장을 끼얹어 졸여요|어묵볶음:어묵과 양파를 간장에 볶아요|진미채볶음:진미채를 양념에 볶아 마요네즈를 버무려요|장조림:소고기와 계란을 간장에 졸여요|호박볶음:애호박을 소금 간해 볶아요|가지볶음:가지를 마늘 간장에 볶아요|무생채:채 썬 무를 고춧가루 식초에 무쳐요|오이무침:오이를 소금에 절여 양념에 무쳐요|버섯볶음:버섯과 양파를 간장에 볶아요|깻잎장아찌:깻잎에 간장물을 부어 절여요|연근조림:연근을 간장 올리고당에 졸여요|소시지볶음:소시지와 양파를 케첩에 볶아요|김무침:김을 양념에 가볍게 무쳐요|감자볶음:채 썬 감자를 소금 간해 볶아요|콩자반:불린 콩을 간장 설탕에 졸여요|숙주나물:데친 숙주를 양념에 무쳐요|고사리나물:삶은 고사리를 간장 들기름에 볶아요|도라지무침:도라지를 초고추장에 무쳐요|무나물:무를 볶다가 물을 넣고 익혀요|가지나물:찐 가지를 양념에 무쳐요|애호박전:애호박에 부침옷을 입혀 부쳐요|동그랑땡:다진 고기와 두부 반죽을 빚어 부쳐요|두부부침:두부를 노릇하게 부쳐요|깻잎전:깻잎에 고기 반죽을 넣어 부쳐요|오이소박이:오이에 칼집을 내고 양념 속을 채워요|깍두기:깍둑 썬 무를 절여 양념에 버무려요|배추겉절이:배추를 양념에 바로 버무려요|파김치:파를 액젓에 절여 양념에 버무려요|무말랭이무침:불린 무말랭이를 양념에 무쳐요|꽈리고추조림:꽈리고추와 멸치를 간장에 졸여요|마늘종볶음:마늘종을 간장에 볶아요|감자채볶음:감자채와 당근을 소금 간해 볶아요|우엉조림:우엉을 간장 올리고당에 졸여요|미역줄기볶음:데친 미역줄기를 마늘과 볶아요|파래무침:파래를 양념에 가볍게 무쳐요|만능간장소스:재료를 끓여 식혀 병에 보관해요|비빔장:모두 섞어 냉장 보관해요|초고추장:모두 섞어 설탕이 녹을 때까지 저어요|쌈장:모두 섞어요|불고기양념:모두 섞어 고기를 30분 재워요|갈비양념:양파를 갈아 섞어 고기를 재워요|제육양념:모두 섞어 고기에 버무려요|데리야끼소스:팬에 넣고 끓여 걸쭉하게 졸여요|돈가스소스:모두 섞어 한소끔 끓여요|탕수육소스:끓여 전분물로 걸쭉하게 해요|칠리소스:끓여 졸이거나 모두 섞어요|양념치킨소스:끓여 섞어 튀긴 닭에 버무려요|간장치킨소스:끓여 졸여 튀긴 닭에 버무려요|떡볶이소스:물에 풀어 끓이며 떡을 넣어요|볶음고추장:고기를 볶다가 양념을 넣어 졸여요|다대기:모두 섞어 국에 넣어요|겨자소스:겨자를 물에 개어 섞어요|오리엔탈드레싱:양파를 갈아 모두 섞어요|발사믹드레싱:모두 섞어요|시저드레싱:모두 섞어요|참깨드레싱:깨를 갈아 모두 섞어요|요거트소스:모두 섞어 차게 두어요|타르타르소스:다진 재료를 마요네즈에 섞어요|허니머스터드:모두 섞어요|바비큐소스:끓여 졸여요|토마토소스:양파와 마늘을 볶고 토마토를 넣어 졸여요|크림소스:버터에 밀가루를 볶고 우유 크림을 넣어 끓여요|알프레도소스:크림에 버터와 치즈를 녹여요|바질페스토:재료를 곱게 갈아요|폰즈소스:모두 섞어요|만능쯔유:끓인 뒤 식혀 병에 보관해요|덮밥소스:끓여 전분물로 걸쭉하게 해요|레몬드레싱:모두 섞어요|유린기소스:모두 섞어 튀긴 닭에 부어요|꿔바로우소스:끓여 졸여요|스리라차마요:모두 섞어요|어니언드레싱:양파를 갈아 모두 섞어요|칠리마요:모두 섞어요|마늘버터소스:팬에 녹여 섞어요|고추냉이간장:모두 섞어요'); var S={u:'스푼',m:1,n:2,bar:[],cand:[],cat:'한식',cur:'',ps:[],act:0,so:0,fc:'야채',camt:{}},fe=null,rg=null,tt=0,tm=0; function $(s){return document.querySelector(s)} function A(s){return document.querySelectorAll(s)} function E(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/"/g,'&quot;')} function fm(m){return m>=60?Math.floor(m/60)+'시간'+(m%60?' '+(m%60)+'분':''):m+'분'} function ns(i){return {t:'섹션'+i,h:'',g:{n:'',m:5,x:180}}} function np(){return {nm:'나레시피'+(S.ps.length+1),dish:'',o:1,d:'h',vw:1,tm:[],ing:[],sc:[ns(1)],sm:0,sh:0}} function st(){return 1} var HI=[],WD=[','].concat(sp('→,강불,중불,약불,ml,꼬집,수저,인분,0,1,2,3,4,5,6,7,8,9,중탕,끓이기,볶기,썰기,섞기,데치기,굽기,튀기기,재우기,다지기,졸이기')),WDH=''; try{HI=JSON.parse(localStorage.getItem('nr_hi')||'[]')}catch(x){HI=[]} (function(){for(var i=0;i<WD.length;i++)WDH+='<button class="nr-mini" data-a="wd" data-n="'+WD[i]+'">'+WD[i]+'</button>'})(); function hAdd(n,nr){var i,f=0;for(i=0;i<HI.length;i++)if(HI[i].n===n){HI[i].c++;f=1}if(!f)HI.push({n:n,c:1});HI.sort(function(a,b){return b.c-a.c});HI=HI.slice(0,50);try{localStorage.setItem('nr_hi',JSON.stringify(HI))}catch(x){}if(!nr)rHi()} function rHi(){var h='',i;for(i=0;i<HI.length;i++)h+='<button class="nr-mini" data-a="hi" data-n="'+E(HI[i].n)+'">'+E(HI[i].n)+'</button>';$('#nr-hi').innerHTML=h||'<span class="nr-hint">쓴 재료가 여기 쌓여요</span>'} function sv(){return S.m===1?'1인분 기준':S.n+'인분 기준'} function anyIng(){var i;if(S.bar.length)return 1;for(i=0;i<S.ps.length;i++)if(S.ps[i].ing.length)return 1;return 0} function toast(t){var e=$('#nr-toast');e.textContent=t;e.style.display='block';clearTimeout(tm);tm=setTimeout(function(){e.style.display='none'},1900)} function tip(el,x){var t=x||el.getAttribute('data-tip'),b=$('#nr-tip'),r=el.getBoundingClientRect();b.textContent=t;b.style.display='block';b.style.left=Math.max(8,Math.min(r.left,window.innerWidth-b.offsetWidth-8))+'px';b.style.top=(r.top-b.offsetHeight-8<8?r.bottom+8:r.top-b.offsetHeight-8)+'px';clearTimeout(tt);tt=setTimeout(function(){b.style.display='none'},2200)} function add(a,n,q){var i;for(i=0;i<a.length;i++)if(a[i].n===n){a[i].q+=q||st();return}a.push({n:n,q:q||st()})} function addBar(n,q){add(S.bar,n,q);hAdd(n);rBar()} var EDM={}; function ip(a,p){var h='',i,e=EDM[p],b='data-p="'+p+'" data-k="';for(i=0;i<a.length;i++)h+='<span class="nr-pill nr-ing">'+(a[i].q!==1?'<i class="nr-bd">'+a[i].q+'</i>':'')+(e?'<button data-a="im" '+b+i+'" data-tip="수량 줄이기">−</button>':'')+'<span'+(p>=0?' data-a="ins" data-n="'+E(a[i].n)+'" '+b+i+'"':'')+'>'+E(a[i].n)+'</span>'+(e?'<button data-a="iu" '+b+i+'" data-tip="수량 늘리기">+</button><button class="nr-x" data-a="id" '+b+i+'" data-tip="재료 지우기">×</button>':'')+'</span>';return h||'<span class="nr-hint">재료가 없어요</span>'} function rBar(){$('#nr-bar').innerHTML=ip(S.bar,-1);$('#nr-cnt').textContent=S.bar.length} function rPI(p){var e=$('#nr-pi'+p);if(e)e.innerHTML=ip(S.ps[p].ing,p)} function rSet(){var o=S.so;$('#nr-setb').textContent='⚙ 세팅_'+(S.u==='스푼'?' ':'ml')+(o?' ◀':' ▶');$('#nr-sp').style.display=o?'flex':'none';$('#nr-sv').className='nr-svt '+(o?'nr-svout':'nr-svin');$('#nr-sv').innerHTML=svHtml();$('#nr-u1').className=S.u==='스푼'?'nr-on':'';$('#nr-u2').className=S.u==='ml'?'nr-on':''} function rCm(){var h='<div class="nr-tabs">',c,m;for(c in DB)h+='<button class="'+(S.cat===c?'nr-on':'')+'" data-a="cat" data-c="'+c+'">'+c+'</button>';h+='</div><div class="nr-hs1">';for(m in DB[S.cat])h+='<button class="nr-pill'+(S.cur===m?' nr-sel':'')+'" data-a="menu" data-m="'+m+'">'+m+'</button>';h+='</div>';if(S.cur&&DB[S.cat][S.cur]&&HOW[S.cur])h+='<div class="nr-how"><b> '+E(S.cur)+'</b> '+E(HOW[S.cur])+'</div>';$('#nr-cm').innerHTML=h} function rFd(){var h='<div class="nr-tabs">',c,a,i;for(c in FD)h+='<button class="'+(S.fc===c?'nr-on':'')+'" data-a="fcat" data-c="'+c+'">'+c+'</button>';h+='</div><div class="nr-hs">';a=FD[S.fc];for(i=0;i<a.length;i++)h+='<button class="nr-chp'+(S.cand.indexOf(a[i])>-1?' nr-sel':'')+'" data-a="fd" data-n="'+a[i]+'">'+a[i]+'</button>';$('#nr-fd').innerHTML=h+'</div>'} function rCd(){var h='',i,q,am=0;for(i=0;i<S.cand.length;i++){q=S.camt&&S.camt[S.cand[i]];if(q)am=1;h+='<button class="nr-pill'+(q?' nr-hb':'')+'" data-a="cd" data-n="'+E(S.cand[i])+'">'+(q?'<i class="nr-bd">'+q+'</i>':'')+'+ '+E(S.cand[i])+'</button>'}if(am)h+='<div class="nr-hint" style="width:100%">숫자는 큰술(스푼) 기준 양이에요 (다진 재료 포함)</div>';$('#nr-cd').innerHTML=h||'<span class="nr-hint">메뉴나 식재료를 골라보세요</span>';$('#nr-all').style.display=S.cand.length?'inline-block':'none'} function pl(h){var d=document.createElement('div'),c,i;d.innerHTML=h.replace(/<br\s*\/?>/gi,'\n').replace(/<\/div>/gi,'\n').replace(/<div>/gi,'');c=d.querySelectorAll('.nr-chip');for(i=0;i<c.length;i++)c[i].textContent='['+c[i].textContent+']';return d.textContent.replace(/\u00A0/g,' ').replace(/\s+$/,'')} function tx(p){var P=S.ps[p],l=S.u==='스푼'?'스푼':'ml',t='['+P.nm+'] '+(P.dish||'요리이름 없음')+' ('+S.u+' 기준)\n■ 재료: ',i,s,tot=0;for(i=0;i<P.ing.length;i++)t+=(i?', ':'')+P.ing[i].n+(P.ing[i].q!==1?' x'+P.ing[i].q:'');if(!P.ing.length)t+='-';t+='\n■ 순서';for(i=0;i<P.sc.length;i++){s=P.sc[i];t+='\n'+(i+1)+'. '+(pl(s.h)||'-');if(i<P.sc.length-1){tot+=gsec(s.g);t+='\n ▼ '+(s.g.n||'다음 단계').replace(/\n+/g,' ')+(gsec(s.g)?' ⏱'+fmg(s.g):'')}}return t+'\n■ 타이머 합계: '+fmg({m:Math.floor(tot/60),sc:tot%60})} function stx(p,i){var P=S.ps[p],s=P.sc[i],t='['+P.nm+'] '+(P.dish||'')+' - '+(i+1)+'번\n'+(pl(s.h)||'-');if(i<P.sc.length-1)t+='\n▼ '+(s.g.n||'다음 단계').replace(/\n+/g,' ')+(gsec(s.g)?' ⏱'+fmg(s.g):'');return t} function toH(t){return E(t).replace(/\[([^\]]+)\]/g,'<span class="nr-chip" contenteditable="false">$1</span>').replace(/\n/g,'<br>')} function sumIn(p,v){var sq,P=S.ps[p],L=v.split('\n'),i,l,m,cur=-1,bf={},e,a,k,tm,mn,nm,g,c;SMT[p]=v;if(SSG[p]===undefined)return;if(sig(p)!==SSG[p]){e=$('#nr-sc'+p);if(e)e.textContent='⚠ 요약 이후 내용이 바뀌어 위 섹션에는 반영되지 않아요. [요약]을 다시 눌러 새로 작성해요';return} for(i=0;i<L.length;i++){l=L[i]; if(i===0){m=l.match(/^\[[^\]]*\]\s*(.*?)\s*\(/);if(m){P.dish=m[1]==='요리이름 없음'?'':m[1];e=document.querySelector('[data-f="dish"][data-p="'+p+'"]');if(e)e.value=P.dish}continue} if(l.indexOf('■ 재료:')===0){a=l.slice(5).replace(/^\s+/,'');P.ing=[];if(a!=='-'&&a){a=a.split(', ');for(k=0;k<a.length;k++){m=a[k].match(/^(.*?)(?: x([\d.]+))?$/);if(m&&m[1])P.ing.push({n:m[1],q:+m[2]||1})}}rPI(p);cur=-1;continue} if(l.indexOf('■')===0){cur=-1;continue} m=l.match(/^(\d+)\.\s?(.*)$/); if(m&&+m[1]-1<P.sc.length){cur=+m[1]-1;bf[cur]=[m[2]==='-'?'':m[2]];continue} m=l.match(/^\s*▼ (.*)$/); if(m&&cur>-1){nm=m[1];mn=0;tm=nm.match(/\s*⏱(?:(\d+)시간)?\s*(?:(\d+)분)?\s*(?:(\d+)초)?\s*$/);sq=0;if(tm){mn=(+tm[1]||0)*60+(+tm[2]||0);sq=+tm[3]||0;nm=nm.slice(0,tm.index)}g=P.sc[cur].g;g.n=nm==='다음 단계'?'':nm;g.m=mn;g.sc=sq;if(mn>g.x)g.x=mn;cur=-1;continue} if(cur>-1)bf[cur].push(l)} for(c in bf)P.sc[+c].h=toH(bf[c].join('\n').replace(/\s+$/,'')); rS(p);SSG[p]=sig(p);e=$('#nr-sc'+p);if(e)e.textContent=cc(v.length)} function resizeG(p){var e=A('#nr-ps'+p+' .nr-gta'),i;for(i=0;i<e.length;i++){e[i].style.height='auto';e[i].style.height=Math.max(22,e[i].scrollHeight)+'px'}} function rS(p){var P=S.ps[p],ar=P.d==='v'?'↓':'→',h='<div class="nr-sw'+(P.d==='h'?' nr-h':'')+(P.vw===1?' nr-v1':'')+'">',i,s,g,b;for(i=0;i<P.sc.length;i++){s=P.sc[i];b='data-p="'+p+'" data-i="'+i+'"';h+='<div class="nr-sec nr-bg'+(i%6)+'">'+(P.sc.length>1?'<button class="nr-sxb" data-a="sx" '+b+' data-tip="이 섹션을 지워요">✕</button>':'')+'<div class="nr-ed" contenteditable="true" data-ph="(위 재료 클릭 시 첨부됨, 화상키보드 꺼짐버튼 활용)&#10;여기를 누르고 위 재료를 눌러 넣은 뒤, 어떻게 하는지 적어요" '+b+'>'+s.h+'</div></div>';if(i<P.sc.length-1){g=s.g;h+='<div class="nr-gap"><div class="nr-gi"><i class="nr-gar">'+ar+'</i><textarea class="nr-gta" rows="1" data-f="gn" '+b+' placeholder="보조설명">'+E(g.n)+'</textarea></div><div class="nr-tm"><input type="range" min="0" max="36" value="'+gpos(g)+'" data-f="gs" '+b+'><span class="nr-gt" id="nr-gt'+p+'_'+i+'" data-a="gm" '+b+' data-tip="눌러서 시간을 직접 입력해요">'+fmg(g)+'</span><u data-a="gm" '+b+' data-tip="30분까지는 1분씩, 그 뒤는 1시간씩(최대 6시간) 움직여요. 그 이상은 눌러서 직접 입력해요">직접입력</u></div></div>'}}$('#nr-ps'+p).innerHTML=h+'</div>';hlRun(p);rCh(p);resizeG(p)} function rP(){var h='',p,P,t,b;for(p=0;p<S.ps.length;p++){P=S.ps[p];t=SMT[p]||'';b='data-p="'+p+'"';h+='<div class="nr-acc'+(P.o?' nr-open':'')+(p===S.act?' nr-act':'')+(FS[p]?' nr-fs':'')+'"><div class="nr-ah nr-ph" data-a="po" '+b+'><b class="nr-nm">'+E(P.nm)+'</b><input type="text" data-f="dish" '+b+' value="'+E(P.dish)+'" placeholder="요리 이름 (예: 김치찌개)"><button class="nr-hbtn nr-rr" data-a="prs" '+b+' data-tip="이 나레시피에 입력한 내용을 모두 지워요">초기화</button><button class="nr-hbtn" data-a="shr" '+b+' data-tip="링크 또는 내용으로 공유해요">공유</button></div><div class="nr-ab"><button class="nr-fsx" data-a="fsb" '+b+'>⤡ 전체보기 닫기</button>'+(P.sh?'<div class="nr-ctl">어떻게 공유할까요? <button class="nr-sbtn" data-a="slk" '+b+'>링크공유</button><button class="nr-sbtn" data-a="sct" '+b+'>내용공유</button></div>':'')+'<div class="nr-rw" style="margin:4px 0 10px;-webkit-flex-wrap:wrap;flex-wrap:wrap"><span class="nr-lb" style="margin:0">재료</span><span><button class="nr-sbtn nr-gr" data-a="rat" '+b+' data-tip="재료를 직접 입력해요" style="margin:0 3px 0 0">+추가</button><button class="nr-sbtn nr-gr" data-a="rcl" '+b+' data-tip="이 나레시피의 재료를 모두 지워요" style="margin:0 3px 0 0">초기화</button><button class="nr-sbtn nr-gr" data-a="edt" '+b+' data-tip="재료 수량을 바꾸거나 지울 때 켜요" style="margin:0 3px 0 0">'+(EDM[p]?'✔완료':'✎편집')+'</button><button class="nr-sbtn" data-a="pad" '+b+' data-tip="재료상태바에 담은 재료를 이 나레시피로 가져와요" style="margin:0">재료가져오기</button></span></div><div class="nr-radd" id="nr-ra'+p+'" style="display:none"><input type="text" class="nr-rai" id="nr-rai'+p+'" placeholder="재료 직접 입력 (쉼표로 여러 개: 간장,고추장)"><button class="nr-sbtn" data-a="raa" '+b+'>추가</button></div><div class="nr-box"><div class="nr-pills" id="nr-pi'+p+'"></div></div><div class="nr-scr" style="margin-top:6px"><b>(요리말)</b>'+WDH+'</div><div class="nr-rw"><span class="nr-lb">조리순서</span><span class="nr-dr"><button class="nr-on" data-a="dir" '+b+' data-tip="누르면 세로/가로가 바뀌어요">'+(P.d==='v'?'세로':'가로')+'</button><button class="nr-on" data-a="vw" '+b+' data-tip="누르면 섹션 크기(뷰1/뷰2)가 바뀌어요">뷰'+P.vw+'</button><button data-a="und" data-tip="되돌리기">↩️</button><button data-a="red" data-tip="되살리기">↪️</button><button data-a="fsb" '+b+' data-tip="이 나레시피만 전체화면으로 봐요 (타이머도 계속 돌아가요)">⛶</button></span></div><div id="nr-ps'+p+'"></div><button class="nr-sbtn" data-a="adds" '+b+' data-tip="조리순서 섹션을 하나 더 추가해요">+ 섹션 추가</button><div class="nr-div"></div><div class="nr-tmz" id="nr-tz'+p+'"></div><textarea class="nr-ta" data-f="sum" '+b+' placeholder="[요약] 버튼을 누르면 여기에 요약이 채워져요">'+E(t)+'</textarea><div class="nr-hint" id="nr-sc'+p+'">'+cc(t.length)+'</div><div class="nr-sumrow"><button class="nr-sbtn nr-sumb" data-a="sum" '+b+' data-tip="위 요약창에 이 나레시피의 요약을 작성해요">요약<span class="nr-sumh"> (버튼 클릭시 위 요약문장 작성_공유시 참고)</span></button></div><div class="nr-ctl nr-cta2"><button class="nr-sbtn" data-a="cp" '+b+'>복사</button><button class="nr-sbtn" data-a="pdf" '+b+'>PDF</button><button class="nr-sbtn nr-gr" data-a="sml" '+b+' data-tip="짧은 링크를 만들어 위 글의 커서 위치에 넣어요">짧은링크 추가</button></div><div class="nr-ctl nr-cta2"><button class="nr-sbtn" data-a="cmo" '+b+' data-tip="댓글(999자 이내)용으로 줄여서 만들어요" style="background:#2e8b57">댓글저장</button><button class="nr-sbtn nr-gr" data-a="lsv" '+b+' data-tip="이 나레시피를 짧은 링크로 만들어요">링크저장</button><i class="nr-sep">|</i><button class="nr-sbtn" data-a="sct" '+b+' data-tip="요약 글(비어 있으면 새로 작성한 요약)을 카톡 등으로 공유해요" style="background:#f7c600;color:#222">내용공유</button><button class="nr-sbtn" data-a="tlk" '+b+' data-tip="타인링크공유: 이 나레시피를 0-1.kr/88 로 시작하는 링크(긴 링크·짧은 링크)로 만들어요. 받은 사람은 링크 그대로 0-1.kr/88 에서 확인하고 다시 공유할 수 있어요" style="background:#6a4fc2">타인링크공유</button></div></div></div>'}$('#nr-pj').innerHTML=h;for(p=0;p<S.ps.length;p++){rPI(p);rS(p);tUi(p)}} function hl(){var e=A('#nr-pj>.nr-acc'),i;for(i=0;i<e.length;i++)e[i].className=e[i].className.replace(' nr-act','')+(i===S.act?' nr-act':'')} function cpy(t){function fb(){var a=document.createElement('textarea');a.value=t;a.style.cssText='position:fixed;top:0;left:0;opacity:0';document.body.appendChild(a);a.select();try{document.execCommand('copy');toast('복사했어요')}catch(x){toast('복사에 실패했어요')}document.body.removeChild(a)} if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(t).then(function(){toast('복사했어요')}).catch(fb)}else fb()} function ins(n,pl){var s=window.getSelection(),r,c,x,ok=false;if(!fe||!document.body.contains(fe)){toast('먼저 조리순서의 글칸을 눌러주세요');return}fe.focus();if(rg){s.removeAllRanges();s.addRange(rg)}if(!s.rangeCount)return; try{ok=pl?document.execCommand('insertText',false,n+' '):document.execCommand('insertHTML',false,'<span class="nr-chip" contenteditable="false">'+E(n)+'</span>&nbsp;')}catch(e){} if(!ok){r=s.getRangeAt(0);r.deleteContents();if(pl){x=document.createTextNode(n+' ');r.insertNode(x)}else{c=document.createElement('span');c.className='nr-chip';c.contentEditable='false';c.textContent=n;r.insertNode(c);x=document.createTextNode('\u00A0');c.parentNode.insertBefore(x,c.nextSibling)}r.setStartAfter(x);r.collapse(true);s.removeAllRanges();s.addRange(r)} if(s.rangeCount)rg=s.getRangeAt(0).cloneRange();sy(fe)} function ur(c){var s=window.getSelection();if(!fe||!document.body.contains(fe)){toast('먼저 조리순서의 글칸을 눌러주세요');return}fe.focus();if(rg){s.removeAllRanges();s.addRange(rg)}document.execCommand(c);if(s.rangeCount)rg=s.getRangeAt(0).cloneRange();sy(fe)} function sy(el){var p=+el.getAttribute('data-p');S.ps[p].sc[+el.getAttribute('data-i')].h=el.innerHTML;stl(p)} var AL={'달걀':'계란','쪽파':'대파','올리브오일':'올리브유','진간장':'간장','국간장':'간장','후춧가루':'후추','양송이버섯':'버섯','새송이':'버섯','소면':'면','스파게티':'면','파스타면':'면'}; function lev1(a,b){var la=a.length,lb=b.length,i=0,j=0,d=0;if(Math.abs(la-lb)>1)return false;while(i<la&&j<lb){if(a[i]===b[j]){i++;j++}else{if(++d>1)return false;if(la>lb)i++;else if(lb>la)j++;else{i++;j++}}}if(i<la||j<lb)d++;return d<=1} function hit(t,w,fz){var n=w.length,i,k;if(t.indexOf(w)>-1)return 1;if(!fz||n<4)return 0;for(k=n-1;k<=n+1;k++)for(i=0;i+k<=t.length;i++)if(lev1(t.substr(i,k),w))return 1;return 0} function findIng(raw){var t=raw.replace(/\s+/g,''),all=[],seen={},c,m,i,k,fd=[],o='',e=$('#nr-st'),w,nm,fz=t.length<4000; for(c in FD)all=all.concat(FD[c]);for(c in DB)for(m in DB[c])all=all.concat(DB[c][m]);for(k in AL)all.push(k); for(i=0;i<all.length;i++){w=all[i];if(seen[w])continue;seen[w]=1;nm=AL[w]||w;if(fd.indexOf(nm)<0&&hit(t,w,fz))fd.push(nm)} fd=fd.filter(function(a){return !fd.some(function(b){return b!==a&&b.indexOf(a)>-1})}); for(i=0;i<fd.length;i++)o+='<button class="nr-pill" data-a="cd" data-n="'+E(fd[i])+'">+ '+E(fd[i])+'</button>'; $('#nr-oc').innerHTML=o||'<span class="nr-hint">찾은 재료가 없어요. 아래 글자를 고쳐서 다시 찾아보세요.</span>';e.textContent=fd.length?fd.length+'개 찾았어요 (틀릴 수 있어요)':'찾은 재료가 없어요'} function prep(f,cb){var im=new Image(),u=URL.createObjectURL(f);im.onload=function(){var mx=Math.max(im.width,im.height),sc=mx>1600?1600/mx:(mx<1000?1400/mx:1),c=document.createElement('canvas'),x,d,i,g;c.width=Math.round(im.width*sc);c.height=Math.round(im.height*sc);x=c.getContext('2d');x.drawImage(im,0,0,c.width,c.height); try{d=x.getImageData(0,0,c.width,c.height);for(i=0;i<d.data.length;i+=4){g=0.299*d.data[i]+0.587*d.data[i+1]+0.114*d.data[i+2];g=(g-128)*1.4+128;g=g<0?0:g>255?255:g;d.data[i]=d.data[i+1]=d.data[i+2]=g}x.putImageData(d,0,0)}catch(e){} URL.revokeObjectURL(u);cb(c)};im.onerror=function(){cb(f)};im.src=u} function ocrGo(){var f=$('#nr-file').files[0],e=$('#nr-st');if(!f){toast('사진을 먼저 골라주세요');return} $('#nr-prev').src=URL.createObjectURL(f);$('#nr-prev').style.display='block';e.textContent='사진을 다듬는 중...'; prep(f,function(src){e.textContent='글자 인식 도구를 불러오는 중...';lib('Tesseract','https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/5.1.1/tesseract.min.js',function(){ window.Tesseract.recognize(src,'kor',{logger:function(m){if(m.status==='recognizing text')e.textContent='읽는 중 '+Math.round(m.progress*100)+'%'}}).then(function(r){$('#nr-rawb').style.display='block';$('#nr-rawt').value=r.data.text;findIng(r.data.text)}).catch(function(){e.textContent='인식에 실패했어요. 인터넷 연결이나 사진을 확인해주세요.'})})})} var RT={},CT={},TS={},SQ={},aC=null,wl=null,tk=0,SND=1,VIB=1,CP=['#dbeafe','#ffe4cc','#d7f5e0','#fcdcec','#e6defc','#fff3bf','#d0f2f2','#ffdcd5'],LC=-1; try{SND=localStorage.getItem('nr_snd')==='0'?0:1;VIB=localStorage.getItem('nr_vib')==='0'?0:1}catch(x){} function tfmt(x){x=Math.max(0,Math.ceil(x));var h=Math.floor(x/3600),m=Math.floor(x%3600/60);return (h?h+':'+p2(m):m)+':'+p2(x%60)} function unlock(){try{aC=aC||new (window.AudioContext||window.webkitAudioContext)();if(aC.state==='suspended')aC.resume()}catch(x){}} function beep(t){var i,o,g;if(SND||t){try{if(aC)for(i=0;i<(t?1:3);i++){o=aC.createOscillator();g=aC.createGain();o.frequency.value=880;g.gain.value=.25;o.connect(g);g.connect(aC.destination);o.start(aC.currentTime+i*.35);o.stop(aC.currentTime+i*.35+.2)}}catch(x){}}if(VIB&&!t){try{if(navigator.vibrate)navigator.vibrate([300,150,300,150,300])}catch(y){}}} function wk(on){try{if(on&&navigator.wakeLock&&!wl){navigator.wakeLock.request('screen').then(function(l){wl=l;l.addEventListener('release',function(){wl=null})}).catch(function(){})}else if(!on&&wl&&!AON){wl.release();wl=null}}catch(x){}} function anyRun(){var k;for(k in TS)if(TS[k]&&TS[k].st!=='done')return 1;return 0} function rl(){if(!anyRun())wk(0)} function clr(p){var k;for(k in TS)if(k.indexOf(p+'_')===0)TS[k]=null} function ens(){if(!tk)tk=setInterval(tick,250)} function tlist(p){var P=S.ps[p],a=[],i,g,j;for(i=0;i<P.sc.length-1;i++){g=P.sc[i].g;if(gsec(g)>0)a.push({id:'g'+i,sec:gsec(g),cl:CP[(i+p)%8],lb:(i+1)+'→'+(i+2),k:'g',i:i})} for(j=0;j<(P.tm||[]).length;j++)a.push({id:'c'+j,sec:P.tm[j].s,cl:CP[P.tm[j].c%8],lb:'타이머'+(j+1),k:'c',i:j});return a} function ti(p,id){var a=tlist(p),i;for(i=0;i<a.length;i++)if(a[i].id===id)return a[i];return null} function ropt(){var a=A('.nr-sndb'),b=A('.nr-vibb'),i;for(i=0;i<a.length;i++){a[i].className='nr-sndb nr-tg'+(SND?' nr-on':'');a[i].textContent=SND?' ':' '}for(i=0;i<b.length;i++)b[i].className='nr-vibb nr-tg'+(VIB?' nr-on':'')} function tUi(p){var q=SQ[p],e=$('#nr-ti'+p);if(e)e.textContent=q?(q.paused?'⏸ 전체 ':'▶ 전체 ')+(q.k+1)+'/'+q.ids.length+'번째':'카드를 누르면 그 타이머만 시작/정지해요'} function rTm(p){var e=$('#nr-tz'+p),a=tlist(p),h='<div class="nr-lb" style="margin:0 0 2px">⏱ 타이머</div>',i,x,st,cls,t,b='data-p="'+p+'"',ids=['nr-th','nr-tmn','nr-ts'],v=[],k,el,run=0,ps=0,b1,b2;if(!e)return; for(k=0;k<3;k++){el=$('#'+ids[k]+p);v.push(el?el.value:'')} for(k in TS)if(TS[k]&&k.indexOf(p+'_')===0){if(TS[k].st==='run')run=1;else if(TS[k].st==='pause')ps=1} if(a.length){h+='<div class="nr-tws">';for(i=0;i<a.length;i++){x=a[i];st=TS[p+'_'+x.id];cls='nr-tcd';t=x.sec;if(st){if(st.st==='run'){cls+=' nr-run';t=(st.end-Date.now())/1000}else if(st.st==='pause'){cls+=' nr-run nr-ps';t=st.left}else cls+=' nr-dn'} h+='<div class="nr-tw"><button class="'+cls+'" style="background:'+x.cl+'" id="nr-tc'+p+'_'+x.id+'" data-a="tcs" '+b+' data-id="'+x.id+'" data-tip="눌러서 이 타이머만 시작/정지해요"><i>'+x.lb+'</i><b>'+tfmt(t)+'</b></button><button class="nr-tx" data-a="tcx" '+b+' data-id="'+x.id+'" data-tip="이 타이머를 지워요">✕</button></div>'}h+='</div>'} else h+='<div class="nr-hint" style="margin:6px 0">섹션 사이 시간을 정하거나 아래에서 시·분·초를 추가하면 타이머 카드가 생겨요</div>'; b1=run?'<button class="nr-sbtn nr-stp" data-a="tst" '+b+' data-tip="진행을 멈추고 처음 시간으로 돌려요">■ 종료</button>':'<button class="nr-sbtn" data-a="tgo" '+b+' data-tip="위 타이머들을 순서대로 시작해요">'+(ps?'▶ 이어서':'▶ 시작')+'</button>'; b2=(ps&&!run)?'<button class="nr-sbtn nr-gr" data-a="tst" '+b+' data-tip="진행을 멈추고 처음 시간으로 돌려요">■ 종료</button>':'<button class="nr-sbtn nr-gr" data-a="tps" '+b+' data-tip="진행 중인 타이머를 잠시 멈춰요 (▶ 이어서로 계속해요)">⏸ 정지</button>'; h+='<div class="nr-tadd"><span class="nr-lb" style="margin:0 6px 0 0">직접 추가</span><input type="text" class="nr-tin" id="nr-th'+p+'" inputmode="numeric" data-im="numeric" placeholder="시"><input type="text" class="nr-tin" id="nr-tmn'+p+'" inputmode="numeric" data-im="numeric" placeholder="분"><input type="text" class="nr-tin" id="nr-ts'+p+'" inputmode="numeric" data-im="numeric" placeholder="초"><button class="nr-sbtn" data-a="tadd" '+b+' data-tip="입력한 시·분·초로 타이머를 추가해요">+ 추가</button></div>' +'<div class="nr-tctl">'+b1+b2+'<button class="nr-sbtn nr-gr" data-a="trs" '+b+' data-tip="모든 타이머를 처음 시간으로 되돌려요">↺ 리셋</button><i class="nr-sep">|</i><button class="nr-sndb nr-tg'+(SND?' nr-on':'')+'" data-a="tsd" data-tip="끝날 때 종소리를 낼지 정해요 ( 켜짐 / 꺼짐)">'+(SND?' ':' ')+'</button><button class="nr-vibb nr-tg'+(VIB?' nr-on':'')+'" data-a="tvb" data-tip="끝날 때 진동을 낼지 정해요 (안드로이드용)"> 진동</button></div><div class="nr-topt"><span class="nr-hint" id="nr-ti'+p+'"></span></div>'; e.innerHTML=h;for(k=0;k<3;k++){el=$('#'+ids[k]+p);if(el&&v[k])el.value=v[k]}tUi(p)} function rCh(p){rTm(p)} function hlRun(p){var gs=A('#nr-ps'+p+' .nr-gap'),P=S.ps[p],i,st,l;for(i=0;i<gs.length;i++){gs[i].className=gs[i].className.replace(' nr-run','');l=$('#nr-gt'+p+'_'+i);st=TS[p+'_g'+i];if(st&&(st.st==='run'||st.st==='pause')){gs[i].className+=' nr-run';if(l)l.textContent=(st.st==='pause'?'⏸ ':'')+tfmt(st.st==='run'?(st.end-Date.now())/1000:st.left)}else if(l&&P.sc[i])l.textContent=fmg(P.sc[i].g)}} function fin(k){var p=+k.split('_')[0],id=k.slice(k.indexOf('_')+1),x=ti(p,id),q=SQ[p],nx;TS[k]={st:'done'};beep(); if(q&&q.ids[q.k]===id){q.k++;nx=q.k<q.ids.length?ti(p,q.ids[q.k]):null;if(nx){TS[p+'_'+nx.id]={st:'run',end:Date.now()+nx.sec*1000};toast('⏱ '+(x?x.lb:'')+' 끝! 다음 타이머가 시작돼요')}else{SQ[p]=null;toast(' 모든 타이머가 끝났어요!')}}else toast('⏱ '+(x?x.lb:'타이머')+' 시간이 끝났어요!'); rTm(p);hlRun(p);rl()} function tick(){var k,st,l,any=0,e,p,id;for(k in TS){st=TS[k];if(!st||st.st!=='run')continue;any=1;l=(st.end-Date.now())/1000;if(l<=0){fin(k)}else{e=$('#nr-tc'+k+' b');if(e)e.textContent=tfmt(l);p=k.split('_')[0];id=k.slice(k.indexOf('_')+1);if(id.charAt(0)==='g'){e=$('#nr-gt'+p+'_'+id.slice(1));if(e)e.textContent=tfmt(l)}}}if(!any&&tk){clearInterval(tk);tk=0}} var LZU='https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js',PKU='https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js',QRU='https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js',PU={},LIM=2000,QRM=700,TNM=5000; function lib(nm,u,cb){if(window[nm]){cb();return}var e=document.createElement('script');e.src=u;e.onload=cb;e.onerror=function(){toast('필요한 도구를 불러오지 못했어요. 인터넷 연결을 확인해주세요')};document.head.appendChild(e)} function base(){return location.href.split('#')[0].split('?')[0]} function fname(){return $('.nr-title').textContent.replace(/\s+/g,'')} function pack(only){var o={},ps=[],i,j,P,x,g,a,dd,f;if(S.u!=='스푼')o.u=S.u;if(S.m!==1){o.m=S.m;o.n=S.n} for(i=0;i<S.ps.length;i++){if(only!=null&&only!==i)continue;P=S.ps[i];x={};if(only!=null||P.nm!=='나레시피'+(i+1))x.a=P.nm;if(P.dish)x.b=P.dish;if(P.d!=='h')x.c=P.d;if(P.vw!==1)x.e=P.vw; if(P.ing.length){x.f=[];for(j=0;j<P.ing.length;j++)x.f.push(P.ing[j].q!==1?[P.ing[j].n,P.ing[j].q]:P.ing[j].n)} x.s=[];for(j=0;j<P.sc.length;j++){g=P.sc[j].g;a=['',pl(P.sc[j].h),g.n,g.m,g.x,g.sc||0];dd=['','','',5,180,0];while(a.length&&a[a.length-1]===dd[a.length-1])a.pop();x.s.push(a)} if(P.tm&&P.tm.length){x.t=[];for(j=0;j<P.tm.length;j++)x.t.push([P.tm[j].s,P.tm[j].c])}ps.push(x)}o.p=ps;if(only!=null)o.a=1;return o} function unpack(o,off){var r=[],i,j,x,P,a,s,f;for(i=0;i<o.p.length;i++){x=o.p[i];P=np();P.nm=String(x.a||'나레시피'+(off+i+1));P.dish=String(x.b||'');P.d=x.c==='v'?'v':'h';P.vw=x.e===2?2:1;P.ing=[];f=x.f||[]; for(j=0;j<f.length;j++)P.ing.push(typeof f[j]==='string'?{n:f[j],q:1}:{n:String(f[j][0]),q:(+f[j][1]>0?+f[j][1]:1)}); P.sc=[];s=x.s||[];for(j=0;j<s.length;j++){a=s[j];P.sc.push({t:String(a[0]||'섹션'+(j+1)),h:toH(String(a[1]||'')),g:{n:String(a[2]||''),m:a[3]===undefined?5:(+a[3]||0),sc:+a[5]||0,x:Math.max(+a[4]||180,+a[3]||0)}})} if(!P.sc.length)P.sc=[ns(1)];P.tm=[];f=x.t||[];for(j=0;j<f.length;j++)P.tm.push({s:Math.max(1,+f[j][0]||1),c:(+f[j][1]||0)%8});r.push(P)}return r} function b64e(u){var t='',i;for(i=0;i<u.length;i+=8192)t+=String.fromCharCode.apply(null,u.subarray(i,i+8192));return btoa(t).replace(/\+/g,'-').replace(/\//g,'_').replace(/=+$/,'')} function b64d(t){var r,u,i;t=t.replace(/-/g,'+').replace(/_/g,'/');while(t.length%4)t+='=';r=atob(t);u=new Uint8Array(r.length);for(i=0;i<r.length;i++)u[i]=r.charCodeAt(i);return u} function u8s(u){var t='',i;try{return new TextDecoder('utf-8').decode(u)}catch(e){for(i=0;i<u.length;i+=8192)t+=String.fromCharCode.apply(null,u.subarray(i,i+8192));return decodeURIComponent(escape(t))}} function enc(o){return 'P1.'+b64e(window.pako.deflateRaw(JSON.stringify(o)))} function dec(t){var j=null;if(t.indexOf('P1.')===0)j=u8s(window.pako.inflateRaw(b64d(t.slice(3))));else if(t.indexOf('L1.')===0)j=window.LZString.decompressFromEncodedURIComponent(t.slice(3).replace(/ /g,'+'));return j?JSON.parse(j):null} function hasData(){var i,P;if(S.bar.length)return 1;for(i=0;i<S.ps.length;i++){P=S.ps[i];if(P.dish||P.ing.length||P.sc.length>1||P.sc[0].h)return 1}return 0} function applyO(o){var off;try{localStorage.setItem('nr_bak',JSON.stringify({v:1,u:S.u,m:S.m,n:S.n,bar:S.bar,ps:S.ps,act:S.act}))}catch(x){} if(o.a){off=S.ps.length;S.ps=S.ps.concat(unpack(o,off));S.act=S.ps.length-1}else{RT={};TS={};SQ={};rl();S.u=o.u||'스푼';S.m=o.m||1;S.n=o.n||2;S.ps=unpack(o,0);S.act=0} if(!S.ps.length)S.ps.push(np());rSet();rP();toast('공유받은 내용을 불러왔어요')} function fromUrl(){var m=location.search.match(/[?&]nr=([^&#]*)/)||location.hash.match(/[#&]nr=(.*)$/),raw;if(!m)return;raw=m[1];try{raw=decodeURIComponent(raw.replace(/\+/g,'%2B'))}catch(x){} lib(raw.indexOf('L1.')===0?'LZString':'pako',raw.indexOf('L1.')===0?LZU:PKU,function(){var o=null;try{o=dec(raw)}catch(x){}if(!o||!o.p){toast('공유 링크를 읽지 못했어요');return} if(hasData()&&!confirm(o.a?'공유받은 나레시피를 추가할까요?':'공유받은 내용으로 바꿀까요?\n(지금 내용은 이 기기에 백업돼요)'))return; applyO(o);try{history.replaceState(null,'',base())}catch(y){}})} function popOpen(t,h){$('#nr-popt').textContent=t;$('#nr-popb').innerHTML=h;$('#nr-pop').style.display='flex';document.body.classList.add('nr-popup-open');if(location.hash!=='#nr-pop')location.hash='nr-pop'} function popHide(){$('#nr-pop').style.display='none';if(!anyFs())document.body.classList.remove('nr-popup-open')} function popClose(){popHide();if(location.hash==='#nr-pop')history.back()} function pops(){var p=$('#nr-pop');document.body.appendChild(p);document.body.appendChild($('#nr-toast'));document.body.appendChild($('#nr-tip')); p.addEventListener('click',function(e){if(e.target===p){popClose();return}var t=up(e.target);if(t)act(t)}); p.addEventListener('input',function(e){if(e.target.id==='nr-cmt')cnt()}); window.addEventListener('hashchange',function(){if(location.hash!=='#nr-pop'&&$('#nr-pop').style.display!=='none')popHide()})} var SVC=[['is.gd','https://is.gd/create.php?format=simple&url='],['v.gd','https://v.gd/create.php?format=simple&url='],['da.gd','https://da.gd/s?url='],['clck.ru','https://clck.ru/--?url=']]; function shorten(u,cb,i){i=i||0;if(!window.fetch||i>=SVC.length){cb('');return}var done=0,sv=SVC[i],tm=setTimeout(function(){nx()},7000); function nx(){if(done)return;done=1;clearTimeout(tm);shorten(u,cb,i+1)} fetch(sv[1]+encodeURIComponent(u)).then(function(r){return r.text()}).then(function(t){t=(t||'').replace(/\s+$/,'');if(done)return;if(/^https?:\/\/\S+$/.test(t)&&t.length<u.length){done=1;clearTimeout(tm);cb(t,sv[0])}else nx()}).catch(function(){nx()})} function openShare(p,bs){lib('pako',PKU,function(){var one=p!==undefined&&p!==null,u=(bs||base())+'?nr='+enc(pack(one?p:null)),n=u.length,h='',ttl=bs?S.ps[p].nm+' 타인링크공유':(one?S.ps[p].nm+' 공유':'공유');PU={}; h+=(bs?'<div class="nr-warn" style="background:#e8f5ee">✅ 이 링크는 0-1.kr/88 에서 그대로 확인하고 공유할 수 있어요! 긴 링크와 짧은 링크를 모두 만들어 드려요.</div>':'');h+='<div class="nr-hint">내용을 압축했어요 (링크 '+n+'자). '+(one?'받는 사람 화면에 이 나레시피가 추가돼요. ':'')+'재료상태바·자주 쓰는 재료 같은 내 기기용 정보는 담기지 않아요.</div>'; if(n>TNM){h+='<div class="nr-warn" style="margin-top:8px">내용이 많아 링크가 길어요. 일부 앱에서는 링크가 잘릴 수 있으니 짧은 링크나 [저장]의 HTML 파일을 써주세요.</div>'} if(n>LIM){h+='<div class="nr-warn" style="margin-top:8px">링크가 길어서 원본 링크는 숨기고, 짧은 링크만 만들어요.</div>'} else{PU.o=u;h+='<div class="nr-lb">1) '+(bs?'긴 링크 (0-1.kr/88)':'원본 URL')+'</div><textarea class="nr-ta" readonly style="height:70px;margin-top:0">'+E(u)+'</textarea><div class="nr-ctl"><button class="nr-sbtn" data-a="pcp" data-n="o">복사</button>'+(n<=QRM?'<button class="nr-sbtn" data-a="pqr" data-n="o">QR 만들기</button>':'')+'</div>'+(n<=QRM?'':'<div class="nr-hint">QR은 링크가 길어 만들지 않아요. 짧은 링크로 만들어요.</div>')+'<div class="nr-hint">링크가 길수록 짧은 링크를 추천해요.</div>'} h+='<div class="nr-lb">2) 짧은 링크</div><div id="nr-tu" class="nr-hint">만드는 중...</div><div style="text-align:center;margin-top:8px"><div id="nr-qr" style="display:inline-block"></div></div><div class="nr-ctl" id="nr-qrs" style="display:none;-webkit-justify-content:center;justify-content:center"><button class="nr-sbtn nr-gr" data-a="pqs">QR 이미지 저장</button></div>'; popOpen(ttl,h); shorten(u,function(t,svc){var e=$('#nr-tu');if(!e)return;if(!t){PU.o=u;e.className='';e.innerHTML='<div class="nr-hint">짧은 링크를 만들지 못해서 원본 링크를 드려요'+(n>LIM?' (길어서 일부 앱에서 잘릴 수 있어요)':'')+'.</div><textarea class="nr-ta" readonly style="height:70px;margin-top:4px">'+E(u)+'</textarea><div class="nr-ctl"><button class="nr-sbtn" data-a="pcp" data-n="o">원본 링크 복사</button><button class="nr-sbtn nr-gr" data-a="psh" data-n="o">공유창</button></div>';return}PU.t=t;e.className='';e.innerHTML='<textarea class="nr-ta" readonly style="height:50px;margin-top:0">'+E(t)+'</textarea><div class="nr-ctl"><button class="nr-sbtn" data-a="pcp" data-n="t">복사</button><button class="nr-sbtn" data-a="pqr" data-n="t">QR 만들기</button><button class="nr-sbtn nr-gr" data-a="psh" data-n="t">공유창</button></div>'+'<div class="nr-hint">'+E(svc||'')+' 로 만든 짧은 링크예요.</div>'})})} function cl(c){c=String(c==null?'':c);return /["\n\t,]/.test(c)?'"'+c.replace(/"/g,'""')+'"':c} function tbl(sp){var R=[['나레시피','요리이름','구분','이름','수량/내용','사이설명','시간(분)']],i,j,P,r=[],L;for(i=0;i<S.ps.length;i++){P=S.ps[i];for(j=0;j<P.ing.length;j++)R.push([P.nm,P.dish,'재료',P.ing[j].n,P.ing[j].q,'','']);for(j=0;j<P.sc.length;j++){L=j<P.sc.length-1;R.push([P.nm,P.dish,'섹션',P.sc[j].t,pl(P.sc[j].h),L?P.sc[j].g.n:'',L?P.sc[j].g.m:''])}} for(i=0;i<R.length;i++)r.push(R[i].map(cl).join(sp));return r.join('\n')} function dl(name,text,mime){var ios=/iPad|iPhone|iPod/.test(navigator.userAgent)||(navigator.platform==='MacIntel'&&navigator.maxTouchPoints>1),w,b,u,a; if(ios){w=window.open('');if(w){w.document.write('<meta name="viewport" content="width=device-width"><p style="font:14px sans-serif">'+E(name)+' : 전체를 복사해서 파일로 저장하세요</p><pre style="white-space:pre-wrap;word-break:break-all;font:13px monospace">'+E(text)+'</pre>');w.document.close()}else toast('팝업을 허용해주세요');return} b=new Blob([mime.indexOf('csv')>-1?'\uFEFF'+text:text],{type:mime+';charset=utf-8'});u=URL.createObjectURL(b);a=document.createElement('a');a.href=u;a.download=name;document.body.appendChild(a);a.click();document.body.removeChild(a);setTimeout(function(){URL.revokeObjectURL(u)},2000)} function openSave(){var fn=E(fname()),bt='class="nr-sbtn" style="display:block;width:100%;margin:10px 0 2px"';popOpen('저장','<div class="nr-hint">파일 이름: '+fn+'</div><button '+bt+' data-a="sx1"> 1) 엑셀 붙여넣기용 복사</button><div class="nr-hint">복사한 뒤 엑셀·구글시트에 붙여넣으면 칸으로 나뉘어요.</div><button '+bt+' data-a="sx2"> 2) CSV 파일 저장</button><div class="nr-hint">글이 길 때 안전해요. 엑셀에서 바로 열려요.</div><button '+bt+' data-a="sx3"> 3) HTML 파일 저장</button><div class="nr-hint">파일을 누르면 바로 이 앱으로 이동하고 내용이 복원돼요.</div>')} function mkHtml(){var u=base()+'#nr='+enc(pack(null)),t=E(fname()),h='[[!DOCTYPE html]][[html lang="ko"]][[head]][[meta charset="utf-8"]][[meta name="viewport" content="width=device-width,initial-scale=1"]][[title]]'+t+'[[/title]][[/head]][[body style="font-family:sans-serif;padding:24px;text-align:center"]][[h2]]'+t+'[[/h2]][[p]]잠시 후 자동으로 열려요. 안 열리면 아래 버튼을 눌러주세요.[[/p]][[p]][[a href='+JSON.stringify(u)+' style="display:inline-block;padding:14px 24px;background:#1769d1;color:#fff;border-radius:12px;text-decoration:none;font-size:18px"]]▶ 열어서 복원하기[[/a]][[/p]][[scr'+'ipt]]location.replace('+JSON.stringify(u)+')[[/scr'+'ipt]][[/body]][[/html]]';return h.replace(/\[\[/g,'<').replace(/\]\]/g,'>')} function ct(p,L){var P=S.ps[p],t='['+P.nm+'] '+(P.dish||'')+' ('+S.u+' 기준)',a=[],i,s,g,x; for(i=0;i<P.ing.length;i++)a.push(P.ing[i].n+(P.ing[i].q!==1?'x'+P.ing[i].q:''));if(a.length)t+='\n재료: '+a.join(', '); for(i=0;i<P.sc.length;i++){s=P.sc[i];g=s.g;x=(pl(s.h)||'-').replace(/\s*\n+\s*/g,' ');t+='\n'+(i+1)+') '+x;if(i<P.sc.length-1&&(gsec(g)||g.n))t+=L===1?'\n ▼'+(g.n?g.n.replace(/\n+/g,' ')+' ':'')+(gsec(g)?fmg(g):''):' ▼'+(gsec(g)?fmg(g):'')}return t} var CL=0; function cnt(){var e=$('#nr-cmt'),c=$('#nr-cc'),n;if(!e||!c)return;n=e.value.length;c.textContent=n+'/999자'+(n>999?' · '+(n-999)+'자 초과! 글을 줄이거나 링크저장을 써주세요':(CL?' · 999자에 맞게 자동으로 줄여 담았어요':''));c.style.color=n>999?'#e5484d':'#5b6b7b'} function openCmt(p){var t=tx(p);CL=0;if(t.length>999){t=ct(p,1);CL=1}if(t.length>999){t=ct(p,2);CL=2} popOpen(S.ps[p].nm+' 댓글저장','<textarea id="nr-cmt" class="nr-ta" style="height:240px;margin-top:0">'+E(t)+'</textarea><div id="nr-cc" class="nr-hint"></div><div class="nr-ctl"><button class="nr-sbtn nr-gr" data-a="cml" data-p="'+p+'" data-tip="짧은 링크를 글 끝에 붙여요 (눌러서 이 나레시피를 추가할 수 있어요)">링크 붙이기</button><button class="nr-sbtn" data-a="cmc">복사</button></div><div class="nr-hint" style="margin-top:8px">(상단댓글을 꾹 눌러 열기)</div><div class="nr-hint">댓글은 999자까지 쓸 수 있어요. 위 글은 고칠 수 있어요.</div>');cnt()} var TIPS={acc:'눌러서 접고 펴요',po:'눌러서 이 나레시피를 접고 펴요',tab:'설명 탭을 바꿔요',rb:'탭을 바꿔요',cat:'분류를 바꿔요',im:'수량 줄이기',iu:'수량 늘리기',id:'재료 지우기',sx:'이 섹션을 지워요',gm:'눌러서 시간을 직접 입력해요',gx:'눌러서 최대 시간을 바꿔요',edt:'재료 수량을 바꾸거나 지울 때 켜요',pcl:'팝업을 닫아요',pcp:'복사해요',pqr:'QR코드를 만들어요',pqs:'QR 이미지를 저장해요',psh:'공유창을 열어요',cmc:'글을 복사해요',sx1:'엑셀에 붙여넣을 수 있게 복사해요',sx2:'CSV 파일로 저장해요',sx3:'눌러서 복원되는 HTML 파일로 저장해요',slk:'링크로 공유해요',sct:'내용을 글로 공유해요',addp:'새 나레시피 프로젝트를 추가해요',pad:'재료상태바의 재료를 가져와요',cp:'요약을 복사해요',pdf:'PDF로 인쇄/저장해요',ocf:'위 글자에서 재료를 다시 찾아요',ocr:'사진에서 재료를 찾아요'}; var KB=0,AON=0;try{KB=localStorage.getItem('nr_kb')==='1'?1:0}catch(x){} document.addEventListener('visibilitychange',function(){if(!document.hidden&&(AON||tk))wk(1)}); function applyKb(){var e=document.querySelectorAll('#nr-app input[type=text],#nr-app textarea,#nr-app .nr-ed,#nr-pop textarea'),i,b=$('#nr-kb');for(i=0;i<e.length;i++){if(KB)e[i].setAttribute('inputmode','none');else{if(e[i].getAttribute('data-im'))e[i].setAttribute('inputmode',e[i].getAttribute('data-im'));else e[i].removeAttribute('inputmode')}}if(b)b.className=KB?'nr-on':''} if(window.MutationObserver){new MutationObserver(function(ms){var i,j;if(!KB)return;for(i=0;i<ms.length;i++)for(j=0;j<ms[i].addedNodes.length;j++)if(ms[i].addedNodes[j].nodeType===1){applyKb();return}}).observe(document.body,{childList:true,subtree:true})} $('#nr-app').addEventListener('keydown',function(e){var i=e.target.id||'';if(e.key==='Enter'&&i.indexOf('nr-rai')===0){e.preventDefault();H.raa(null,+i.slice(6))}else if(e.key==='Enter'&&i==='nr-in'){e.preventDefault();H.addm()}}); var FS={},SMT={},SSG={},OB='https://0-1.kr/88'; function cc(n){return n+'자 (댓글 999자까지) · 요약 직후에는 여기서 고치면 위 섹션에 반영돼요'} function sig(p){var P=S.ps[p],i,a=[P.dish,JSON.stringify(P.ing)];for(i=0;i<P.sc.length;i++)a.push(P.sc[i].h,P.sc[i].g.n,P.sc[i].g.m,P.sc[i].g.sc||0);return a.join('\u0001')} function stl(p){var c=$('#nr-sc'+p);if(c&&SSG[p]!==undefined&&sig(p)!==SSG[p])c.textContent='⚠ 요약 이후 내용이 바뀌었어요. [요약]을 다시 누르면 새로 작성돼요'} function sumTxt(p){var ta=$('textarea[data-f="sum"][data-p="'+p+'"]');return ta&&ta.value?ta.value:tx(p)} function anyFs(){var k;for(k in FS)if(FS[k])return 1;return 0} function fsApply(){var on=anyFs();document.body.classList[on?'add':'remove']('nr-fsb');if(on)document.body.classList.add('nr-popup-open');else if($('#nr-pop').style.display!=='flex')document.body.classList.remove('nr-popup-open')} $('#nr-app').addEventListener('click',function(e){var c=e.target,ed,r,sl,ok=false;if(!c||!c.className||String(c.className).indexOf('nr-chip')<0)return;if(e.clientX<c.getBoundingClientRect().right-18)return;ed=c.parentNode;while(ed&&!(ed.className&&String(ed.className).indexOf('nr-ed')>-1))ed=ed.parentNode;if(!ed)return;ed.focus();r=document.createRange();sl=window.getSelection();r.selectNode(c);sl.removeAllRanges();sl.addRange(r);try{ok=document.execCommand('delete')}catch(x){}if(!ok&&c.parentNode)c.parentNode.removeChild(c);sy(ed);toast('재료를 지웠어요 (↩️로 되돌릴 수 있어요)')}); var H={ tlk:function(t,p){openShare(p,OB)}, bsh:function(){if(!S.bar.length){toast('공유할 재료가 없어요');return}var t=' 재료 목록 ('+S.bar.length+'개)',i,a;for(i=0;i<S.bar.length;i++){a=S.bar[i];t+='\n□ '+a.n+(a.q!==1?' '+a.q:'')}if(navigator.share){navigator.share({title:'재료 목록',text:t}).catch(function(){})}else cpy(t)}, fsb:function(t,p){var e=t;while(e&&!(String(e.className).indexOf('nr-acc')>-1&&e.parentNode&&e.parentNode.id==='nr-pj'))e=e.parentNode;if(!e)return;FS[p]=!FS[p];e.className=e.className.replace(' nr-fs','');if(FS[p]){e.className+=' nr-fs';if(e.className.indexOf('nr-open')<0)e.className+=' nr-open'}fsApply();if(FS[p])toast('전체보기: 타이머도 계속 작동해요')}, sml:function(t,p){var ta=$('textarea[data-f="sum"][data-p="'+p+'"]');if(!ta){toast('요약을 먼저 열어주세요');return}lib('pako',PKU,function(){var u=base()+'?nr='+enc(pack(p)),at=ta.selectionStart,en=ta.selectionEnd;toast('짧은 링크를 만드는 중...');shorten(u,function(l){var ins=l||(u.length<=TNM?u:'');if(!ins){toast('링크가 너무 길어 만들 수 없어요');return}ta.value=ta.value.slice(0,at)+ins+ta.value.slice(en);ta.selectionStart=ta.selectionEnd=at+ins.length;ta.dispatchEvent(new Event('input',{bubbles:true}));toast(l?'짧은 링크를 커서 위치에 넣었어요':'짧은 링크를 못 만들어 원본 링크를 넣었어요')})})}, lit:function(){var b=$('#nr-lt');if(AON){AON=0;rl();b.className='';toast('항상켜짐 꺼짐');return} if(!navigator.wakeLock){toast('이 브라우저는 화면 켜짐 유지를 지원하지 않아요');return} AON=1;b.className='nr-on';if(wl){toast('항상켜짐: 화면이 꺼지지 않아요');return} navigator.wakeLock.request('screen').then(function(l){wl=l;l.addEventListener('release',function(){wl=null});toast('항상켜짐: 화면이 꺼지지 않아요')}).catch(function(){AON=0;b.className='';toast('화면 켜짐 유지를 켜지 못했어요')})}, kbd:function(){KB=KB?0:1;try{localStorage.setItem('nr_kb',KB?'1':'0')}catch(x){}applyKb();if(KB&&document.activeElement&&document.activeElement.blur)document.activeElement.blur();toast(KB?'키보드 모드 켜짐: 화상키보드가 나오지 않아요':'키보드 모드 꺼짐: 화상키보드를 써요')}, edt:function(t,p){EDM[p]=!EDM[p];t.textContent=EDM[p]?'✔완료':'✎편집';if(p<0)rBar();else rPI(p)}, cmo:function(t,p){openCmt(p)},lsv:function(t,p){openShare(p)}, cmc:function(){var v=$('#nr-cmt').value;if(v.length>999){v=v.slice(0,999);toast('999자를 넘어서 앞 999자만 복사했어요')}cpy(v)}, cml:function(t,p){lib('pako',PKU,function(){var u=base()+'?nr='+enc(pack(p));if(u.length>TNM){toast('내용이 많아 링크를 만들 수 없어요');return}toast('짧은 링크를 만드는 중...');shorten(u,function(l){var e=$('#nr-cmt');if(!l||!e){toast('짧은 링크를 만들지 못했어요');return}e.value=e.value.replace(/\s+$/,'')+'\n'+l;cnt()})})}, ocf:function(){findIng($('#nr-rawt').value)}, ocall:function(){var b=A('#nr-oc [data-n]'),i;if(!b.length){toast('먼저 재료를 찾아주세요');return}for(i=0;i<b.length;i++)addBar(b[i].getAttribute('data-n'));toast(b.length+'개를 재료상태바에 넣었어요')}, opsh:function(){openShare()},opsv:function(){openSave()},pcl:function(){popClose()}, pcp:function(t){cpy(PU[t.getAttribute('data-n')])}, psh:function(t){var u=PU[t.getAttribute('data-n')];if(navigator.share){navigator.share({title:fname(),url:u}).catch(function(){})}else cpy(u)}, pqr:function(t){var u=PU[t.getAttribute('data-n')];lib('QRCode',QRU,function(){var c=$('#nr-qr');c.innerHTML='';new window.QRCode(c,{text:u,width:220,height:220,correctLevel:window.QRCode.CorrectLevel.L});$('#nr-qrs').style.display='flex'})}, pqs:function(){var c=$('#nr-qr canvas'),w,u;if(!c){toast('먼저 QR을 만들어주세요');return}u=c.toDataURL('image/png');w=window.open('');if(w){w.document.write('<meta name="viewport" content="width=device-width"><p style="font:14px sans-serif">이미지를 길게 눌러 저장하세요</p><img alt="" src="'+u+'" style="width:100%;max-width:320px">');w.document.close()}else toast('팝업을 허용해주세요')}, sx1:function(){cpy(tbl('\t'))}, sx2:function(){dl(fname()+'.csv',tbl(','),'text/csv')}, sx3:function(){lib('pako',PKU,function(){dl(fname()+'.html',mkHtml(),'text/html')})}, ttl:function(){}, rat:function(t,p){var e=$('#nr-ra'+p),on=e.style.display==='none',i;e.style.display=on?'flex':'none';if(on){i=$('#nr-rai'+p);if(i)i.focus()}}, raa:function(t,p){var i=$('#nr-rai'+p),a=i.value.split(/[,，、]/),k,v,n=0;for(k=0;k<a.length;k++){v=a[k].replace(/^\s+|\s+$/g,'');if(v){add(S.ps[p].ing,v);hAdd(v);n++}}if(!n){toast('재료 이름을 입력해주세요');return}i.value='';rPI(p);i.focus();if(n>1)toast(n+'개를 넣었어요')}, rcl:function(t,p){if(!S.ps[p].ing.length){toast('지울 재료가 없어요');return}if(!confirm('이 나레시피의 재료를 모두 지울까요?'))return;S.ps[p].ing=[];rPI(p)}, prs:function(t,p){if(!confirm('이 나레시피에 입력한 내용(제목·재료·섹션·타이머)을 모두 지울까요?'))return;var n=np();n.nm=S.ps[p].nm;clr(p);SQ[p]=null;EDM[p]=0;delete SMT[p];delete SSG[p];S.ps[p]=n;rl();rP()}, tgo:function(t,p){var q=SQ[p],a,k,pz=0;unlock();for(k in TS)if(TS[k]&&TS[k].st==='pause'&&k.indexOf(p+'_')===0)pz=1; if(pz){if(q)q.paused=0;for(k in TS)if(TS[k]&&TS[k].st==='pause'&&k.indexOf(p+'_')===0){TS[k].st='run';TS[k].end=Date.now()+TS[k].left*1000}} else if(q){toast('이미 진행 중이에요');return} else{a=tlist(p);if(!a.length){toast('먼저 타이머를 만들어주세요');return}clr(p);SQ[p]={ids:a.map(function(z){return z.id}),k:0,paused:0};TS[p+'_'+a[0].id]={st:'run',end:Date.now()+a[0].sec*1000}} wk(1);ens();rTm(p);hlRun(p)}, tps:function(t,p){var k,n=0,st;for(k in TS){st=TS[k];if(st&&st.st==='run'&&k.indexOf(p+'_')===0){st.left=(st.end-Date.now())/1000;st.st='pause';n++}}if(!n){toast('진행 중인 타이머가 없어요');return}if(SQ[p])SQ[p].paused=1;rTm(p);hlRun(p)}, tst:function(t,p){var k,n=0;for(k in TS)if(TS[k]&&TS[k].st!=='done'&&k.indexOf(p+'_')===0){TS[k]=null;n++}if(!n&&!SQ[p]){toast('진행 중인 타이머가 없어요');return}SQ[p]=null;rl();rTm(p);hlRun(p)}, trs:function(t,p){clr(p);SQ[p]=null;rl();rTm(p);hlRun(p);toast('타이머를 처음 시간으로 되돌렸어요')}, tcs:function(t,p){var id=t.getAttribute('data-id'),k=p+'_'+id,st=TS[k],x=ti(p,id),q=SQ[p];if(!x)return;unlock(); if(st&&st.st==='run'){st.left=(st.end-Date.now())/1000;st.st='pause';if(q&&q.ids[q.k]===id)q.paused=1;toast('정지했어요. 다시 누르면 이어서 해요')} else if(st&&st.st==='pause'){st.st='run';st.end=Date.now()+st.left*1000;if(q&&q.ids[q.k]===id)q.paused=0} else{if(q&&!q.paused){toast('전체 진행 중이에요. 잠시정지나 정지를 눌러주세요');return}TS[k]={st:'run',end:Date.now()+x.sec*1000}} wk(1);ens();rTm(p);hlRun(p)}, tcx:function(t,p){var id=t.getAttribute('data-id'),x=ti(p,id),P=S.ps[p];if(!x)return;if(SQ[p]){SQ[p]=null;clr(p);toast('진행 중이던 전체 타이머를 멈췄어요')}TS[p+'_'+id]=null; if(x.k==='c'){clr(p);P.tm.splice(x.i,1)}else{P.sc[x.i].g.m=0;P.sc[x.i].g.sc=0} rl();if(x.k==='g')rS(p);else{rTm(p);hlRun(p)}}, tadd:function(t,p){var h=+($('#nr-th'+p).value)||0,m=+($('#nr-tmn'+p).value)||0,c=+($('#nr-ts'+p).value)||0,s=h*3600+m*60+c,P=S.ps[p],k,ids=['nr-th','nr-tmn','nr-ts'];if(s<=0){toast('시·분·초를 입력해주세요');return}if(s>359999){toast('99시간까지 입력할 수 있어요');return} P.tm=P.tm||[];LC=(LC+1+Math.floor(Math.random()*7))%8;P.tm.push({s:s,c:LC});for(k=0;k<3;k++)$('#'+ids[k]+p).value='';rTm(p)}, tsd:function(){SND=SND?0:1;try{localStorage.setItem('nr_snd',SND?'1':'0')}catch(x){}unlock();ropt();if(SND)beep(1);toast(SND?'소리 켜짐':'소리 꺼짐')}, tvb:function(){VIB=VIB?0:1;try{localStorage.setItem('nr_vib',VIB?'1':'0')}catch(x){}ropt();if(!VIB){toast('진동 꺼짐');return}if(navigator.vibrate){navigator.vibrate(120);toast('진동 켜짐')}else toast('이 브라우저는 진동을 지원하지 않아요 (아이폰은 진동이 안 돼요)')}, acc:function(t){var p=t.parentNode;p.className=p.className.indexOf('nr-open')>-1?p.className.replace(' nr-open',''):p.className+' nr-open'}, btn:function(){toast('준비중이에요')}, tab:function(t,p,i){var b=t.parentNode.children,q=A('.nr-tp'),k;for(k=0;k<3;k++){b[k].className=k===i?'nr-on':'';q[k].className='nr-tp'+(k===i?' nr-on':'')}}, rb:function(t,p,i){var b=t.parentNode.children;b[0].className=i?'':'nr-on';b[1].className=i?'nr-on':'';$('#nr-rb0').className='nr-tp'+(i?'':' nr-on');$('#nr-rb1').className='nr-tp'+(i?' nr-on':'')}, setp:function(){var y=window.pageYOffset;S.so=S.so?0:1;rSet();setTimeout(function(){window.scrollTo(0,y)},0)}, unit:function(t){var y=window.pageYOffset;S.u=t.getAttribute('data-u');rSet();setTimeout(function(){window.scrollTo(0,y)},0)}, fcat:function(t){S.fc=t.getAttribute('data-c');rFd()}, cdr:function(){S.cand=[];S.camt={};S.cur='';rCd();rFd();rCm();toast('재료 후보를 비웠어요')}, sv1:function(){S.m=1;rSet()},svn:function(){S.m=2;rSet()}, sm:function(){S.n=Math.max(2,S.n-1);rSet()},sp:function(){S.n=Math.min(30,S.n+1);rSet()}, cat:function(t){S.cat=t.getAttribute('data-c');rCm()}, menu:function(t){var m=t.getAttribute('data-m'),P=S.ps[S.act];S.cur=m;S.cand=DB[S.cat][m].slice();S.camt=AM[m]||{};if(!P.dish){P.dish=m;rP()}rCm();rFd();rCd()}, fd:function(t){var n=t.getAttribute('data-n'),i=S.cand.indexOf(n);if(i>-1)S.cand.splice(i,1);else S.cand.push(n);rFd();rCd()}, cd:function(t){var n=t.getAttribute('data-n'),i=S.cand.indexOf(n);addBar(n,S.camt&&S.camt[n]);if(i>-1){S.cand.splice(i,1);rCd();rFd()}}, addall:function(){var i;for(i=0;i<S.cand.length;i++)addBar(S.cand[i],S.camt&&S.camt[S.cand[i]]);S.cand=[];S.camt={};S.cur='';rCd();rFd();rCm();toast('재료상태바로 옮겼어요')}, addm:function(){var a=$('#nr-in').value.split(/[,，、]/),k,v,n=0;for(k=0;k<a.length;k++){v=a[k].replace(/^\s+|\s+$/g,'');if(v){addBar(v);n++}}if(n){$('#nr-in').value='';if(n>1)toast(n+'개를 넣었어요')}}, im:function(t,p,i,k){var a=p<0?S.bar:S.ps[p].ing;a[k].q=Math.max(st(),a[k].q-st());p<0?rBar():rPI(p)}, iu:function(t,p,i,k){var a=p<0?S.bar:S.ps[p].ing;a[k].q+=st();p<0?rBar():rPI(p)}, id:function(t,p,i,k){var a=p<0?S.bar:S.ps[p].ing;a.splice(k,1);p<0?rBar():rPI(p)}, ins:function(t,p,i,k){var q=S.ps[p].ing[k].q,n=t.getAttribute('data-n');ins(q!==1?n+'('+q+')':n)}, wd:function(t){ins(t.getAttribute('data-n'),1)}, und:function(){ur('undo')},red:function(){ur('redo')}, rst:function(){if(S.bar.length&&!confirm('재료상태바를 모두 비울까요?'))return;S.bar=[];rBar()}, hi:function(t){var n=t.getAttribute('data-n');add(S.bar,n);hAdd(n,1);rBar()}, po:function(t,p){S.ps[p].o=S.ps[p].o?0:1;S.act=p;rP()}, dir:function(t,p){S.ps[p].d=S.ps[p].d==='v'?'h':'v';rP()}, vw:function(t,p){S.ps[p].vw=S.ps[p].vw===2?1:2;rP()}, pad:function(t,p){var i,b,a=S.ps[p].ing,j;for(i=0;i<S.bar.length;i++){b=S.bar[i];for(j=0;j<a.length;j++)if(a[j].n===b.n){a[j].q=b.q;break}if(j===a.length)a.push({n:b.n,q:b.q})}rPI(p);toast('재료를 가져왔어요')}, ssh:function(t,p,i){var x=stx(p,i);if(navigator.share){navigator.share({title:S.ps[p].nm+' '+S.ps[p].sc[i].t,text:x}).catch(function(){})}else cpy(x)}, adds:function(t,p){var P=S.ps[p];P.sc.push(ns(P.sc.length+1));rP()}, sx:function(t,p,i){clr(p);SQ[p]=null;rl();S.ps[p].sc.splice(i,1);rP()}, addp:function(){S.ps.push(np());S.act=S.ps.length-1;rP()}, gm:function(t,p,i){var g=S.ps[p].sc[i].g,v=prompt('시간을 입력해요 (예: 5 → 5분, 1:30 → 1분30초, 90초)',g.sc?g.m+':'+p2(g.sc):g.m),s;if(v===null)return;s=ps2s(v);g.m=Math.floor(s/60);g.sc=s%60;if(g.m>g.x)g.x=g.m;rS(p)}, gx:function(t,p,i){var g=S.ps[p].sc[i].g,v=prompt('최대 시간은 몇 시간으로 할까요? (예: 10)',g.x/60);if(v===null)return;v=Math.max(1,Math.round((+v||0)*60));g.x=v;if(g.m>v)g.m=v;rS(p)}, sum:function(t,p){var x=tx(p),ta=$('textarea[data-f="sum"][data-p="'+p+'"]'),c=$('#nr-sc'+p);SMT[p]=x;SSG[p]=sig(p);if(ta)ta.value=x;if(c)c.textContent=cc(x.length);toast('요약을 작성했어요')}, shr:function(t,p){S.ps[p].sh=S.ps[p].sh?0:1;rP()}, slk:function(t,p){openShare(p)}, sct:function(t,p){var x=sumTxt(p);if(navigator.share){navigator.share({title:S.ps[p].nm,text:x}).catch(function(){})}else cpy(x)}, cp:function(t,p){cpy(sumTxt(p))}, pdf:function(t,p){var w=window.open('','_blank');if(!w){toast('팝업을 허용해주세요');return}w.document.write('<meta name="viewport" content="width=device-width"><pre style="white-space:pre-wrap;font:16px sans-serif">'+E(sumTxt(p))+'</pre>');w.document.close();setTimeout(function(){w.print()},300)}, ocr:function(){ocrGo()}}; function num(t,k){var v=t.getAttribute('data-'+k);return v===null?null:+v} function up(e){while(e&&e!==document){if(e.getAttribute&&e.getAttribute('data-a'))return e;e=e.parentNode}return null} function act(t){var a=t.getAttribute('data-a'),p=num(t,'p');var tp=t.getAttribute('data-tip')||TIPS[a];if(tp)tip(t,tp);if(p!==null&&p>=0&&a!=='po'&&S.act!==p){S.act=p;hl()}if(H[a])H[a](t,p,num(t,'i'),num(t,'k'))} var root=$('#nr-app'),_touching=false,sy0=0,mv=false,hT=0,HOLD=null; root.addEventListener('touchstart',function(e){var el=up(e.target);sy0=e.touches[0].clientY;mv=false;clearTimeout(hT);HOLD=null;if(el&&el.parentNode&&el.parentNode.className==='nr-tb'){hT=setTimeout(function(){HOLD=el;tip(el,el.getAttribute('data-tip'))},450)}},{passive:true}); root.addEventListener('touchmove',function(e){if(Math.abs(e.touches[0].clientY-sy0)>10){mv=true;clearTimeout(hT)}},{passive:true}); root.addEventListener('touchend',function(e){var t=up(e.target),n=e.target.tagName;clearTimeout(hT);if(HOLD&&HOLD===t){HOLD=null;e.preventDefault();return}if(!t||mv||n==='INPUT'||n==='TEXTAREA')return;_touching=true;setTimeout(function(){_touching=false},500);e.preventDefault();act(t)}); root.addEventListener('click',function(e){if(_touching||e.target.tagName==='INPUT'||e.target.tagName==='TEXTAREA')return;var t=up(e.target);if(t)act(t)}); root.addEventListener('mousedown',function(e){var t=up(e.target);if(t&&' ins wd und red '.indexOf(' '+t.getAttribute('data-a')+' ')>-1)e.preventDefault()}); root.addEventListener('input',function(e){var t=e.target,f=t.getAttribute('data-f'),p=num(t,'p'),i=num(t,'i'),v=t.value; if(t.className.indexOf('nr-ed')>-1){sy(t);return}if(!f)return; if(f==='dish'){S.ps[p].dish=v} else if(f==='t')S.ps[p].sc[i].t=v;else if(f==='gn'){S.ps[p].sc[i].g.n=v;t.style.height='auto';t.style.height=Math.max(22,t.scrollHeight)+'px'} else if(f==='sum')sumIn(p,v);else if(f==='gs'){var gg=S.ps[p].sc[i].g,nv=+v;gg.m=nv<=30?nv:(nv-30)*60;gg.sc=0;if(gg.m>gg.x)gg.x=gg.m;$('#nr-gt'+p+'_'+i).textContent=fmg(gg);rCh(p)}}); root.addEventListener('paste',function(e){if(e.target.className.indexOf&&e.target.className.indexOf('nr-ed')>-1){e.preventDefault();document.execCommand('insertText',false,(e.clipboardData||window.clipboardData).getData('text'))}}); document.addEventListener('selectionchange',function(){var s=window.getSelection(),n;if(!s.rangeCount)return;n=s.anchorNode;while(n&&n!==document){if(n.nodeType===1&&String(n.className).indexOf('nr-ed')>-1){fe=n;rg=s.getRangeAt(0).cloneRange();return}n=n.parentNode}}); var LK='nr_st_v1',lastS='',SVT=' 저장 대기'; function gpos(g){var m=g.m||0;return m<=30?m:Math.min(36,30+Math.round(m/60))} function gsec(g){return (g.m||0)*60+(g.sc||0)} function fmg(g){var m=g.m||0,c=g.sc||0;return m?fm(m)+(c?' '+c+'초':''):(c?c+'초':'0분')} function ps2s(v){var t=String(v).replace(/\s+/g,''),a=t.match(/^(\d+):(\d{1,2})$/),h,i,c;if(a)return +a[1]*60+ +a[2];h=t.match(/(\d+)시간/);i=t.match(/(\d+)분/);c=t.match(/(\d+)초/);if(h||i||c)return (h?+h[1]*3600:0)+(i?+i[1]*60:0)+(c?+c[1]:0);return Math.round((+t||0)*60)} function svHtml(){return '<b class="nr-adr">0-1.kr/88</b> '+E(SVT)} function ft(ts){var d=new Date(ts),t=p2(d.getHours())+':'+p2(d.getMinutes())+':'+p2(d.getSeconds()),n=new Date();return (d.toDateString()===n.toDateString()?'':(d.getMonth()+1)+'/'+d.getDate()+' ')+t} function p2(n){return ('0'+n).slice(-2)} function svNow(){var o={v:1,u:S.u,m:S.m,n:S.n,bar:S.bar,ps:S.ps,act:S.act},j=JSON.stringify(o),e=$('#nr-sv'),n=Date.now();if(j===lastS)return;try{localStorage.setItem(LK,j);localStorage.setItem('nr_ts',String(n));lastS=j;SVT=' '+ft(n)}catch(x){SVT='⚠ 저장 불가'}if(e)e.innerHTML=svHtml()} function ldSt(){var j,o,i,k,d;try{j=localStorage.getItem(LK);if(!j)return;o=JSON.parse(j)}catch(x){return}if(!o||o.v!==1||!o.ps||!o.ps.length)return;S.u=o.u||'스푼';S.m=o.m||1;S.n=o.n||2;S.bar=o.bar||[];S.ps=[];for(i=0;i<o.ps.length;i++){d=np();for(k in o.ps[i])d[k]=o.ps[i][k];S.ps.push(d)}S.act=Math.min(o.act||0,S.ps.length-1);lastS=j;try{k=+localStorage.getItem('nr_ts');if(k)SVT=' '+ft(k)}catch(y){}} setInterval(svNow,4000);document.addEventListener('visibilitychange',function(){if(document.hidden)svNow()});window.addEventListener('pagehide',svNow); ldSt();if(!S.ps.length)S.ps.push(np());rSet();rCm();rFd();rCd();rBar();rHi();rP();pops();setTimeout(fromUrl,200);applyKb(); })(); </script> 모두의계산기 나레시피저장소 댓글활용 레시피 링크공유 웹앱 최매슨생 https://0-1.kr/88 https://0-1.kr/88#entry88comment Sun, 11 Jan 2026 14:33:38 +0900 https://0-1.kr/85 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>모두의 채점계산기</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> </head> <body> <p data-ke-size="size16">&nbsp;</p> <div id="master-app-v3"> <style> :root { --primary-color: #4a90e2; --success-color: #2ecc71; --warn-color: #fbc02d; --danger-color: #e74c3c; --bg-color: #f5f7fa; --selected-yellow: #fff176; --completed-black: #333; } body { font-family: 'Pretendard', sans-serif; background-color: var(--bg-color); margin: 0; padding: 5px; color: #333; line-height: 1.4; -webkit-tap-highlight-color: transparent; } .card { background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 15px; box-sizing: border-box; width:100%; } .main-title { font-size: 22px; font-weight: 900; text-align: center; margin: 10px 0; color: #2c3e50; } .top-btn-row { display: flex; gap: 4px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; } .btn-top { flex: 1; padding: 10px 2px; border: none; border-radius: 6px; color: white; font-weight: bold; cursor: pointer; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 전구 아이콘 버튼 */ .btn-wakelock-mini { width: 60px; height: 42px; padding: 4px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 18px; background: #d0d0d0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .btn-wakelock-mini.on { background: #f1c40f; } .wake-icon { font-size: 20px; } .wake-text { font-size: 9px; margin-top: 2px; color: #666; font-weight: bold; } .btn-wakelock-mini.on .wake-text { color: #000; } .share-mini-box { display: flex; gap: 5px; background: #eee; padding: 5px; border-radius: 5px; margin-bottom: 10px; align-items: center; flex-wrap: wrap; } .share-mini-box input { flex: 1; border: 1px solid #ccc; font-size: 10px; height: 22px; padding: 0 5px; min-width: 100px; } .share-url-notice { font-size: 9px; color: #e74c3c; margin-top: 3px; display: none; line-height: 1.5; } .id-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 10px; } .id-box { height: 42px; border: 1px solid #ddd; background: #fff; border-radius: 4px; cursor: pointer; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; } .id-box.selected { background: var(--selected-yellow) !important; border-color: #fbc02d; } .id-box.completed { background: var(--completed-black) !important; color: #fff; } .id-ctrl { height: 42px; border: 1px solid #ddd; background: transparent; border-radius: 4px; font-weight: 900; cursor: pointer; font-size: 16px; } .status-black-box { background: #000; color: #fff; padding: 15px; border-radius: 8px; text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 8px; } .status-n-val { color: var(--warn-color); } .t-info-container { background: #fffde7; padding: 10px; border-radius: 8px; border: 1px solid #fff59d; } .t-input-full { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; margin-bottom: 5px; box-sizing: border-box; background: #fff; } .q-row { display: flex; align-items: center; gap: 3px; margin-bottom: 10px; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px; } .q-label { width: 54px; min-width: 54px; max-width: 54px; height: 38px; max-height: 38px; border: 1px solid #ccc; padding: 2px; text-align: center; border-radius: 4px; font-weight: bold; background: #f9f9f9; line-height: 1.2; overflow: hidden; display: flex; align-items: center; justify-content: center; word-break: break-all; } .q-label-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .score-group { display: flex; gap: 2px; flex: 1; } .btn-score { min-width: 42px; flex: 1; height: 42px; border: 1px solid #ddd; background: #fff; border-radius: 4px; font-size: 18px; font-weight: 900; cursor: pointer; } .btn-score.active { background: #000; color: #fff; } .btn-score.active.pass-active { background: var(--warn-color) !important; color: #000 !important; } .q-text-input { flex: 1; height: 38px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; padding: 0 8px; box-sizing: border-box; } .btn-main-save { width: 100%; padding: 20px; background: var(--primary-color); color: #fff; border: none; border-radius: 12px; font-size: 20px; font-weight: bold; cursor: pointer; margin: 15px 0; } .total-view { width: 35%; background: #000; color: #fff; padding: 15px 5px; border-radius: 10px; text-align: center; font-size: 14px; font-weight: 900; } .total-view.is-pass { background: var(--success-color) !important; } .op-btn { flex: 1; padding: 8px 2px; border: none; background: #e0e0e0; border-radius: 6px; font-size: 11px; cursor: pointer; line-height: 1.3; word-break: keep-all; text-align: center; } .op-btn.active { background: var(--primary-color) !important; color: #fff !important; } /* 불참 버튼 - 회색으로 변경 */ .op-btn-absent { flex: 1; padding: 8px 2px; border: none; background: #e0e0e0; border-radius: 6px; font-size: 11px; cursor: pointer; line-height: 1.3; word-break: keep-all; text-align: center; font-weight: bold; } .op-btn-absent.active { background: #222 !important; color: #fff !important; } .excel-table { width: 100%; border-collapse: collapse; font-size: 11px; background: #fff; table-layout: auto; } .excel-table th, .excel-table td { border: 1px solid #ccc; padding: 4px 2px; text-align: center; word-break: break-word; } .excel-table td.opinion-cell { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bulk-input-cell { width: 100%; border: none; font-size: 11px; text-align: center; padding: 5px 2px; box-sizing: border-box; } .btn-flex-row { display: flex; gap: 5px; margin-top: 5px; } .btn-wakelock { width: 100%; padding: 15px; background: #34495e; color: #fff; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; } .btn-wakelock.on { background: #f1c40f; color: #000; } .manual-container { background: #f0f4f8; border-radius: 8px; padding: 15px; margin-bottom: 15px; } .manual-header { cursor: pointer; font-weight: bold; font-size: 14px; padding: 10px; background: #34495e; color: white; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; } .manual-content { display: none; margin-top: 10px; } .manual-notice { background: #fff3cd; padding: 10px; border-radius: 6px; margin-bottom: 10px; font-size: 12px; line-height: 1.6; } .manual-tabs { display: flex; gap: 5px; margin-bottom: 10px; } .manual-tab { flex: 1; padding: 10px; background: #e0e0e0; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 12px; } .manual-tab.active { background: var(--primary-color); color: white; } .manual-tab-content { display: none; background: white; padding: 15px; border-radius: 6px; font-size: 12px; line-height: 1.8; } .manual-tab-content.active { display: block; } .manual-tab-content ol { margin: 10px 0; padding-left: 20px; } .manual-tab-content li { margin-bottom: 8px; } .data-table-section { border-top: 4px double #34495e; padding-top: 20px; margin-top: 20px; } .btn-del-q { background: none; border: none; color: #e74c3c; cursor: pointer; font-size: 16px; font-weight: bold; padding: 0; line-height: 1; } .btn-del-record { background: #e74c3c; color: #fff; border: none; padding: 2px 6px; border-radius: 3px; cursor: pointer; font-size: 10px; } .bulk-section { background: #f8f9fa; padding: 12px; border-radius: 8px; margin-bottom: 10px; } .bulk-section-title { font-weight: bold; color: #34495e; margin-bottom: 8px; font-size: 13px; } .info-table { width: 100%; border-collapse: collapse; font-size: 11px; background: #fff; margin-top: 8px; table-layout: fixed; } .info-table th, .info-table td { border: 1px solid #ddd; padding: 6px 2px; text-align: center; word-break: break-word; } .info-table th { background: #e8f4f8; font-weight: bold; } .btn-opinion-save { width: 100%; padding: 10px; background: #16a085; color: #fff; border: none; border-radius: 6px; font-size: 12px; font-weight: bold; cursor: pointer; margin-top: 8px; } .mail-option-row { margin-top: 6px; padding: 6px 8px; background: #f8f9fa; border-radius: 6px; font-size: 11px; color: #555; display: flex; align-items: center; gap: 6px; } .mail-option-row input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; } /* 툴팁 말풍선 */ .tooltip-wrap { position: relative; display: inline-block; } .tooltip-wrap .tooltip-box { display: none; position: fixed; bottom: auto; left: auto; background: #2c3e50; color: #fff; font-size: 11px; padding: 10px 12px; border-radius: 8px; white-space: normal; word-break: keep-all; z-index: 9999; line-height: 1.7; width: 220px; max-width: calc(100vw - 24px); box-shadow: 0 4px 16px rgba(0,0,0,0.35); } .tooltip-wrap .tooltip-box::after { content: ''; position: absolute; top: 100%; left: 20px; border: 6px solid transparent; border-top-color: #2c3e50; } .tooltip-wrap:hover .tooltip-box, .tooltip-wrap.active .tooltip-box { display: block; } .tooltip-btn { padding: 8px 12px; background: #8e44ad; color: #fff; border: none; border-radius: 6px; font-size: 11px; cursor: pointer; } .opinion-guide { width: 100%; min-height: 80px; margin-top: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; color: #aaa; cursor: pointer; background: #fafafa; line-height: 1.6; } /* QR 팝업 */ .qr-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 99999; align-items: center; justify-content: center; } .qr-overlay.show { display: flex; } .qr-modal { background: #fff; border-radius: 12px; padding: 20px; max-width: 340px; width: 90%; max-height: 90vh; overflow-y: auto; } .qr-modal h3 { margin: 0 0 12px; font-size: 16px; text-align: center; } .qr-box { text-align: center; margin: 10px 0; } .qr-url-text { font-size: 9px; color: #666; word-break: break-all; margin: 5px 0; text-align: center; } .qr-close { width: 100%; padding: 10px; background: #e74c3c; color: #fff; border: none; border-radius: 6px; cursor: pointer; margin-top: 10px; font-weight: bold; } .qr-tiny-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; } .qr-tiny-label { font-size: 11px; color: #555; display: flex; align-items: center; gap: 6px; } .qr-tiny-label input { width: 16px; height: 16px; cursor: pointer; } .qr-tiny-result { margin-top: 10px; display: none; } .qr-tiny-notice { font-size: 10px; color: #888; text-align: center; margin: 4px 0; } /* 평가의견 + 검토 네비 레이아웃 */ .opinion-nav-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; } .opinion-nav-btns { display: flex; flex-direction: column; gap: 6px; } .nav-btn { width: 38px; height: 38px; border: 1px solid #ddd; background: #f5f5f5; border-radius: 6px; font-size: 18px; font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center; } .nav-btn:hover { background: #e0e0e0; } .opinion-main-area { flex: 1; } /* 외부키보드 버튼 행 */ .ext-kb-row { display: flex; gap: 4px; margin-bottom: 8px; } .btn-ext-kb { flex: 1; padding: 8px 4px; border: 2px solid #bbb; border-radius: 6px; background: #f0f0f0; color: #555; font-weight: bold; font-size: 11px; cursor: pointer; text-align: center; } .btn-ext-kb.on { background: #2ecc71; color: #fff; border-color: #27ae60; } /* 데이터 복사 버튼 하단 설명 */ .btn-sub-text { font-size: 9px; color: #e74c3c; text-align: center; margin-top: 3px; } .btn-sub-text-gray { font-size: 9px; color: #888; text-align: center; margin-top: 3px; } </style> <div class="master-container"> <div class="main-title">모두의 채점계산기_V12(260319)</div> <!-- 상단 버튼 행 --> <div class="top-btn-row"> <!-- A. 공초 버튼: 캐시 삭제+초기화 (링크 없음) --> <div class="tooltip-wrap" style="flex:1;" id="factoryResetWrap"> <button class="btn-top" style="background:var(--danger-color); width:100%;" onclick="factoryReset()"> 공초</button> <div class="tooltip-box">공장초기화 버튼. 입력한 서식과 값들 모두 삭제</div> </div> <!-- 초기화: 평가의견만 삭제 --> <div class="tooltip-wrap" style="flex:1;" id="softResetWrap"> <button class="btn-top" style="background:#7f8c8d; width:100%;" onclick="softReset()">초기화</button> <div class="tooltip-box">⚠️ 점수입력값과 평가의견만 삭제됩니다.<br>소속·성명·서식·대상자정보는 유지됩니다.</div> </div> <!-- 장치저장 --> <button class="btn-top" style="background:#27ae60;" onclick="saveToDevice()">장치저장</button> <!-- 주소복사 --> <button class="btn-top" style="background:var(--primary-color);" onclick="copyShareUrl()">주소복사</button> <!-- QR 버튼 --> <button class="btn-top" style="background:#8e44ad;" onclick="openQR()">QR</button> <!-- 항시켜짐: off=꺼진전구, on=켜진전구 --> <button id="wakeLockBtnMini" class="btn-wakelock-mini" onclick="toggleWakeLock()"> <span id="wakeIcon" class="wake-icon"> </span> <span id="wakeText" class="wake-text">off</span> </button> </div> <!-- 외부키보드 제어 버튼 행 --> <div class="ext-kb-row"> <button id="extKbBtn" class="btn-ext-kb" onclick="toggleExtKb()">⌨️ 외부키보드X &nbsp;<span style="font-size:9px;font-weight:normal;">(클릭 시 내부키보드 차단)</span></button> </div> <!-- 주소 표시 박스 --> <div class="share-mini-box"> <input type="text" id="shareUrlInput" readonly placeholder="장치저장 또는 주소복사 시 생성됩니다."> </div> <div id="shareUrlNotice" class="share-url-notice">*주소가 복사되었습니다. 동일한 브라우저를 오픈하여 타 기기에 붙여 넣으면 서식이 전달됩니다</div> <!-- 1번: 크롬 브라우저 안내 --> <div style="text-align:center; margin-bottom:6px;"> <span style="color:#e74c3c; font-size:11px; font-weight:bold;">※ Chrome(크롬) 브라우저 최적화. 타 브라우저 사용금지</span> </div> <!-- 사용설명서 --> <div class="manual-container"> <div class="manual-header" onclick="toggleManual()"> 사용설명서 <span id="manualArrow">▼</span> </div> <div id="manualContent" class="manual-content"> <div class="manual-notice"> <strong>** 해당 계산기는 서버에 저장되지 않습니다.(입력장치에 임시저장)</strong><br> <strong>** 공정한 심사를 위해 본인에게 맞는 서식 세팅 후 공유해서 태블릿으로 활용. (태블릿 추천)</strong><br> <strong>** PC로 활용 시 엑셀파일저장 기능으로 활용가능 (메일발송 불가)</strong> </div> <!-- 2번: 탭순서 [평가자][담당자][유의사항] --> <div class="manual-tabs"> <button class="manual-tab active" onclick="showManualTab(0)">평가자</button> <button class="manual-tab" onclick="showManualTab(1)">담당자</button> <button class="manual-tab" onclick="showManualTab(2)">유의사항</button> </div> <!-- 3번: 평가자 탭 (0번) - 항목 추가 --> <div id="manualTab0" class="manual-tab-content active"> <strong>1. 평가자 가이드</strong> <ol> <li><strong>[소속입력],[성명]:</strong> 필수 입력</li> <li><strong>평가의견:</strong> 필수 클릭 (없으면 [의견없음] 클릭)</li> <li><strong>합격 표시:</strong> 합격점 도달 시 모든 선택된 점수가 노란색으로 표시</li> <li><strong>저장:</strong> [각 채점 저장 및 다음 이동(필수)] 클릭 필수</li> <li><strong>채점종료 후 메일발송:</strong> [데이터엑셀저장(pc)] 버튼을 반드시 클릭 후 메일 첨부<br> &nbsp;- 첨부파일(클립모양 등) 버튼을 클릭 후 <em>[소속_성함_금일날짜시간]</em>으로 된 최신 파일을 클릭 후 첨부<br> &nbsp;- 태블릿인 경우 대부분 최신파일이 최상단에 배치되어 있으며 최종시간명을 확인 후 첨부 </li> </ol> </div> <!-- 4번: 담당자 탭 (1번) - 안내 추가 --> <div id="manualTab1" class="manual-tab-content"> <strong>2. 담당자 가이드</strong> <ol> <li><strong>인원수:</strong> 발표순번에서 체크(+-로 조정)</li> <li><strong>채점항목 및 점수:</strong> 우측 X 버튼 모두 클릭 후 [채점항목&amp;가산점추가] 버튼으로 조정</li> <li><strong>항목 전체삭제:</strong> Q2항목 15점 버튼 6회 연속 클릭 (채점 저장 전에만 작동)</li> <li><strong>합격기준:</strong> TOTAL 옆 합격기준 점수에 입력 (합격점 도달 시 모든 선택 버튼이 노란색으로 변경됨)</li> <li><strong>서식 공유:</strong> [장치저장] 클릭 후 채점기계에 전달</li> </ol> <div style="background:#fff3cd; border-radius:6px; padding:10px; margin-top:8px; font-size:12px; line-height:1.9;"> <strong>** 채점이 완료되면 [데이터엑셀저장(pc)] 클릭하여 메일로 발송하는 기능으로 활용하세요</strong><br> <strong>** 태블릿 상 이메일 어플이 하나는 설치되어야 가능합니다.</strong><br> <strong>** 반드시 태블릿과 PC가 동일 브라우저를 활용하세요. 현재 크롬 사용을 추천드립니다.</strong><br> <strong>** 모든 테스트 시도 후 활용바랍니다.</strong> </div> </div> <div id="manualTab2" class="manual-tab-content"> <strong>3. 유의사항</strong> <ol> <li>채점 중 [공초] 버튼 클릭 금지</li> <li>태블릿에 최적화되어 있습니다</li> <li>엑셀 여러 셀 복사 시 각 셀에 자동 분배됩니다</li> </ol> </div> </div> </div> <div class="card" style="background:#fff9c4;"> <span style="font-weight:bold;"> 평가 시 전달사항</span> <textarea id="notice" style="width:100%; border:none; background:transparent; min-height:60px; resize:none;" onfocus="clearNoticeDefault(this)" placeholder="내용을 입력하세요.&#10;소속 및 성명 입력 → 각채점 저장 → 완료 시 [데이터엑셀저장] 클릭 후 [메일발송] / 발송 시 저장한 엑셀데이터 첨부 순서로 진행합니다."></textarea> </div> <div class="card"> <span style="font-weight:bold;"> 0. 소속입력 (*엑셀 및 메일 제목)</span> <input type="text" id="eventTitle" class="t-input-full" placeholder="행사명 입력" oninput="autoSaveInputs()"> <span style="font-weight:bold;"> 1. 채점자 성명</span> <input type="text" id="judgeName" class="t-input-full" placeholder="성명 입력" oninput="autoSaveInputs()"> </div> <div class="card"> <span style="font-weight:bold;"> 2. 발표순번(N1:첫번째발표자)</span> <div id="idList" class="id-grid"></div> <div class="status-black-box" style="margin-top:10px;">현재순번: <span id="currentN" class="status-n-val">N1</span></div> <div class="t-info-container"> <input type="text" id="t1_disp" class="t-input-full" placeholder="대상자 정보1" readonly> <input type="text" id="t2_disp" class="t-input-full" style="margin-bottom:0;" placeholder="대상자 정보2" readonly> </div> </div> <div class="card" id="qSection"> <span style="font-weight:bold; display:block; margin-bottom:10px;"> 2-1. 채점항목 입력</span> <div id="qArea"></div> <button onclick="promptAddQ()" style="width:100%; padding:10px; border:2px dashed #ccc; background:none; border-radius:8px; cursor:pointer; font-size:12px; margin-top:10px;">+ 채점항목 or 가산점 추가</button> <p style="font-size:9px; color:#bbb; text-align:center; margin:3px 0 0;">q2항목 15점 6회 클릭시 모두 삭제</p> </div> <!-- 3. 평가의견 (수정: Enter 금지, 직접입력 기본값 파란색, 불참 회색, 검토 화살표 추가) --> <div class="card"> <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px;"> <span style="font-weight:bold;"> 3. 평가의견(필수클릭)</span> <!-- 4번 요청: 순번표기 + 검토용 화살표 --> <div style="display:flex; gap:4px; align-items:center; background:#f0f4f8; border-radius:8px; padding:3px 6px; border:1px solid #ddd;"> <button class="nav-btn" onclick="moveN(-1)" title="이전 순번 검토" style="background:#e8ecf0; border:1px solid #ccc;">◀</button> <span id="reviewNLabel" style="font-size:13px; font-weight:900; color:#2c3e50; min-width:32px; text-align:center; letter-spacing:1px;">N1</span> <button class="nav-btn" onclick="moveN(1)" title="다음 순번 검토" style="background:#e8ecf0; border:1px solid #ccc;">▶</button> </div> </div> <div style="display:flex; gap:4px; margin-top:8px; flex-wrap:nowrap;"> <button class="op-btn" id="opBtn_직접입력" onclick="setOp('직접입력')">직접<br>입력</button> <button class="op-btn" id="opBtn_지원적정함" onclick="setOp('지원적정함')">지원<br>적정함</button> <button class="op-btn" id="opBtn_조정필요" onclick="setOp('조정필요')">조정<br>필요</button> <button class="op-btn" id="opBtn_지원부적정" onclick="setOp('지원부적정')">지원<br>부적정</button> <button class="op-btn" id="opBtn_의견없음" onclick="setOp('의견없음')">의견<br>없음</button> <button class="op-btn-absent" id="absentBtn" onclick="setAbsent()">미출석</button> </div> <!-- 안내문구 --> <div id="opinionGuide" class="opinion-guide" onclick="showOpinionTextarea()"> <span style="color:#e74c3c; font-weight:900; font-size:13px;">⚠️ Enter 키 사용금지</span> 의견을 입력하세요. 상단의 입력값과 평가입력이 완료되면 하단의 파란버튼인 [각 채점 저장 및 다음이동]을 클릭하시고, 기 저장한 평가입력 내용을 수정시에는 평가의견 수정 후 녹색버튼인 [평가의견 수정저장_(반드시 평가의견 수정시에만 클릭)] 버튼을 클릭하세요. </div> <!-- Enter 금지 textarea --> <textarea id="opinion" style="width:100%; height:80px; margin-top:0; padding:10px; box-sizing:border-box; border:1px solid #ddd; display:none;" placeholder="의견을 직접 입력하세요..." oninput="autoSaveOpinion()" onkeydown="return preventEnter(event)"></textarea> <!-- 3번 요청: 버튼명 수정 --> <button class="btn-opinion-save" onclick="saveOpinionOnly()"> 평가의견 수정저장_(반드시 평가의견 수정시에만 클릭)</button> </div> <!-- TOTAL + 합격기준 (5번 요청: 서식저장 버튼 삭제, TOTAL 배치) --> <div class="card"> <div style="display:flex; align-items:center; gap:8px;"> <div id="totalBox" class="total-view">TOTAL: 0</div> <div style="flex:1; font-size:11px;"> 합격기준: <input type="number" id="passLimit" value="60" oninput="recalc()" style="width:60px; height:25px; font-size:14px; font-weight:bold;"> 점 이상<br> <span id="gasunDisplay" style="color:var(--danger-color); font-weight:bold;">가산점: -</span> </div> </div> </div> <button class="btn-main-save" onclick="saveData()">각 채점 저장 및 다음 이동(필수)</button> <div style="text-align:center; margin:-10px 0 8px; line-height:1.8;"> <div style="font-size:10px; color:#e74c3c; font-weight:bold;">※ 채점 종료 후 [데이터엑셀저장(PC)] 클릭 → 메일발송 시 엑셀첨부 요망</div> <div style="font-size:10px; color:#e74c3c;">※ 엑셀파일명은 소속_성함으로 설정됨</div> </div> <!-- 4. 이메일 --> <div class="card"> <span style="font-weight:bold;"> 4. 채점값 이메일전달_엑셀저장 후 메일발송</span> <p style="font-size:11px; color:#e67e22; margin:5px 0 2px;">* 메일 제목은 [소속_성명_날짜_시간_평가표]로 자동 생성됩니다.</p> <p style="font-size:11px; color:#e67e22; margin:2px 0 5px;">* 하단 엑셀저장 클릭 후 메일발송 (발송 시 저장한 엑셀데이터 첨부 후 발송)</p> <input type="text" id="emailTo" class="t-input-full" style="margin-top:5px;" placeholder="다수메일 발송 시 , 로 구분" oninput="autoSaveInputs()"> <div style="display:flex; gap:4px; margin-top:8px;"> <button class="btn-top" style="background:#27ae60" onclick="downloadCSV()"> 데이터엑셀저장(pc)</button> <button class="btn-top" style="background:#8e44ad" onclick="sendEmailWithUpdate()"> 메일발송(태블릿용)</button> </div> <!-- 실험실 접기/펼치기 (체크박스 + 완료&reply + TinyURL 전체 포함) --> <div style="margin-top:8px; border:1px solid #ddd; border-radius:8px; overflow:hidden;"> <div onclick="toggleLabSection()" style="display:flex; justify-content:space-between; align-items:center; padding:9px 12px; background:#ecf0f1; cursor:pointer; font-size:12px; font-weight:bold; color:#555;"> <span> 실험실_(백업용_준비중)</span> <span id="labArrow">▼</span> </div> <div id="labContent" style="display:none; padding:10px; background:#fafafa;"> <!-- 복구가능여부확인 최상단 배치 --> <button onclick="checkRecoverability()" style="width:100%; padding:8px; background:#3498db; color:#fff; border:none; border-radius:6px; font-size:11px; font-weight:bold; cursor:pointer; margin-bottom:8px;"> 복구가능여부 확인 (먼저 클릭 후 하단 기능 사용) </button> <p style="font-size:10px; color:#e74c3c; margin:0 0 8px; line-height:1.6;"> ⚠️ 아래 기능은 URL 길이 제한으로 복구가 불안정할 수 있습니다.<br> 채점 항목이 많을수록 복구 실패 가능성이 높아집니다. 반드시 엑셀 첨부를 우선 활용하세요. </p> <!-- 엑셀 옵션 체크박스 (구분선) --> <div style="border-top:1px solid #ddd; margin:6px 0 8px; padding-top:8px;"> <div style="font-size:10px; color:#888; font-weight:bold; margin-bottom:6px;"> 엑셀 저장 옵션</div> <!-- 체크1: 1-1~정보2 포함 --> <div class="mail-option-row"> <input type="checkbox" id="excelIncludeInfo"> <label for="excelIncludeInfo" style="cursor:pointer;">데이터엑셀저장 시 1-1~정보2 입력내용 포함</label> </div> <!-- 체크2: 첫행 제목 넣기 --> <div class="mail-option-row"> <input type="checkbox" id="excelIncludeTitle" onchange="toggleExcelTitleInput()"> <label for="excelIncludeTitle" style="cursor:pointer;">엑셀 첫행 입력값 넣기</label> </div> <div id="excelTitleInputWrap" style="display:none; margin-top:4px;"> <input type="text" id="excelTitleText" class="t-input-full" placeholder="첫 행에 넣을 제목 입력..." style="margin-bottom:0; font-size:12px;"> </div> </div> <!-- 메일 관련 체크박스 --> <div style="border-top:1px solid #ddd; margin:6px 0 8px; padding-top:8px;"> <div style="font-size:10px; color:#888; font-weight:bold; margin-bottom:6px;"> 메일 옵션</div> <div class="mail-option-row"> <input type="checkbox" id="includeRecoveryUrl"> <label for="includeRecoveryUrl" style="cursor:pointer;">메일상 복구주소 포함 (3-1.데이터복구주소)</label> </div> <div class="mail-option-row"> <input type="checkbox" id="includeScoreDetail"> <label for="includeScoreDetail" style="cursor:pointer;">2.전체 상세 정보리스트 포함 (대상자 1-1~정보2 포함 전체 데이터)</label> </div> </div> <!-- TinyURL --> <div style="display:flex; flex-direction:column; gap:4px;"> <div style="display:flex; align-items:center; gap:6px;"> <input type="checkbox" id="includeTinyUrl"> <label for="includeTinyUrl" style="cursor:pointer; flex:1; font-size:11px;">TinyURL 단축링크 메일본문 포함_압축률 높음</label> </div> <div id="tinyUrlPreview" style="font-size:10px; color:#555; word-break:break-all; display:none; padding:4px 6px; background:#fff3e0; border-radius:4px;"></div> </div> <!-- 완료&reply + 백업용TinyURL 한 줄 두 버튼 --> <div style="display:flex; gap:6px; margin-top:8px;"> <button onclick="generateAndCopyReplyUrl()" style="flex:1; padding:8px; background:#2c3e50; color:#fff; border:none; border-radius:6px; font-size:11px; font-weight:bold; cursor:pointer;"> 완료&amp;reply </button> <button onclick="generateAndCopyTiny()" style="flex:1; padding:8px; background:#e67e22; color:#fff; border:none; border-radius:6px; font-size:11px; font-weight:bold; cursor:pointer;"> 백업용_tinyURL </button> </div> <div style="font-size:9px; color:#e74c3c; text-align:center; margin-top:3px;">*채점브라우저와 동일브라우저로만 작동_(크롬추천)</div> </div> </div> </div> <!-- 5. 실시간 데이터 (8번 요청: 버튼명 수정, 댓글 붙여넣기 기능) --> <div class="card data-table-section" style="overflow-x:auto;"> <span style="font-weight:bold;"> 5. 실시간 데이터 저장 확인표</span> <div style="overflow-x:auto; margin-top:10px;"> <table class="excel-table"> <thead id="thr"></thead> <tbody id="tbr"></tbody> </table> </div> <div style="display:flex; gap:5px; margin-top:10px;"> <div style="flex:1;"> <button onclick="copyTableData()" style="width:100%; padding:10px; background:#95a5a6; color:#fff; border:none; border-radius:6px; font-size:12px;"> 데이터복사(준비중)</button> </div> <div style="flex:1;"> <button onclick="copyForComment()" style="width:100%; padding:10px; background:#95a5a6; color:#fff; border:none; border-radius:6px; font-size:12px;"> 붙여넣기(준비중)</button> </div> </div> <!-- 구간복사 접기/펼치기 --> <div style="margin-top:10px; border:1px solid #ddd; border-radius:8px; overflow:hidden;"> <div onclick="toggleRangeSection()" style="display:flex; justify-content:space-between; align-items:center; padding:9px 12px; background:#ecf0f1; cursor:pointer; font-size:12px; font-weight:bold; color:#555;"> <span> 구간복사[준비중]</span> <span id="rangeArrow">▼</span> </div> <div id="rangeContent" style="display:none; padding:8px; background:#fafafa;"> <div id="commentRangeButtons" style="display:flex; flex-wrap:wrap; gap:4px;"></div> </div> </div> </div> <!-- 6. 담당자전용 --> <div class="card" style="overflow-x:auto;"> <span style="font-weight:bold;"> 6. 채점 서식 및 각 대상자 정보입력_담당자전용</span> <p style="font-size:11px; color:#7f8c8d; margin:5px 0;">엑셀에서 여러 셀 복사 후 첫 셀 클릭하여 붙여넣으면 자동 분배됩니다.</p> <div class="bulk-section"> <div class="bulk-section-title"> 채점항목명 설정</div> <table class="info-table" id="qNameTable"> <thead><tr id="qNameHeader"></tr></thead> </table> <div style="display:flex; gap:5px; margin-top:8px; align-items:center;"> <button onclick="extractQNames()" style="flex:1; padding:8px; background:#3498db; color:#fff; border:none; border-radius:6px; font-size:11px;">항목명 삽입 대체</button> <button onclick="resetQNames()" id="resetQNamesBtn" style="padding:8px 12px; background:#95a5a6; color:#fff; border:none; border-radius:6px; font-size:11px;">초기화</button> <div class="tooltip-wrap" id="descBtnWrap"> <button class="tooltip-btn" onclick="descBtnClick(event)">설명</button> <div class="tooltip-box" id="descTooltipBox"> <strong>채점항목명 설정이란?</strong><br> Q1~Q12 항목명을 원하는 이름으로 바꿀 수 있어요.<br><br> <strong>사용 예시:</strong><br> ① 셀에 직접 항목명 입력<br> ② 엑셀에서 항목명 복사 후 첫 셀에 붙여넣기<br> ③ [항목명 삽입 대체] 버튼 클릭 </div> </div> </div> </div> <div class="bulk-section"> <div class="bulk-section-title"> 대상자 정보 입력</div> <div style="overflow-x:auto;" id="bulkArea"></div> <div class="btn-flex-row"> <button onclick="extractTInfo()" style="flex:1; padding:8px; background:#16a085; color:#fff; border:none; border-radius:6px; font-size:11px;">대상자정보 삽입</button> <button onclick="clearBulkTable()" style="flex:1; padding:8px; background:#e74c3c; color:#fff; border:none; border-radius:6px; font-size:11px;">대상자정보 초기화</button> </div> </div> </div> <button id="wakeLockBtn" class="btn-wakelock" onclick="toggleWakeLock()"> <span id="lockIcon"> </span> <span id="lockText">화면항시켜짐off</span> </button> </div> <!-- QR 팝업 --> <div class="qr-overlay" id="qrOverlay" onclick="closeQROutside(event)"> <div class="qr-modal" id="qrModal"> <h3> QR 코드</h3> <div id="qrMainSection"> <div class="qr-box" id="qrCodeBox"></div> <div class="qr-url-text" id="qrUrlText"></div> </div> <div class="qr-tiny-section"> <label class="qr-tiny-label"> <input type="checkbox" id="qrTinyCheck" onchange="toggleTinyQR()"> 상단 QR코드 접속 불가 시 해당 QR코드 생성 (TinyURL 단축링크) </label> <div class="qr-tiny-result" id="qrTinyResult"> <div class="qr-box" id="qrTinyCodeBox"></div> <div class="qr-url-text" id="qrTinyUrlText"></div> </div> </div> <button class="qr-close" onclick="closeQR()">닫기</button> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script> let qCfgs = [ {n:'Q1',s:[3,6,9,12,15],type:'num'},{n:'Q2',s:[3,6,9,12,15],type:'num'},{n:'Q3',s:[3,6,9,12,15],type:'num'}, {n:'Q4',s:[1,2,3,4,5],type:'num'},{n:'Q5',s:[1,2,3,4,5],type:'num'},{n:'Q6',s:[1,2,3,4,5],type:'num'}, {n:'Q7',s:[1,2,3,4,5],type:'num'},{n:'Q8',s:[1,2,3,4,5],type:'num'},{n:'Q9',s:[1,2,3,4,5],type:'num'}, {n:'Q10',s:[1,2,3,4,5],type:'num'},{n:'Q11',s:[2,4,6,8,10],type:'num'},{n:'Q12',s:[2,4,6,8,10],type:'num'} ]; const defaultQCfgs = JSON.parse(JSON.stringify(qCfgs)); let tMap = {}, recs = {}, selScores = {}, curIdx = 1, idMax = 20, wakeLock = null; let middleClickCount = 0, middleClickTimer = null; let hasFirstSave = false; let currentOpinionBtn = null; let isAbsent = false; let descClickCount = 0, descClickTimer = null; let q2DelClickCount = 0, q2DelClickTimer = null; const secretQNames = ['창업의지','기획력','추진력','차별성','확장성','생산역량','품질관리','시장규모','시장전망','마케팅','수익성','고용창출']; /* ===== Enter 키 차단 (평가의견 textarea) ===== */ function preventEnter(e) { if(e.key === 'Enter' || e.keyCode === 13) { e.preventDefault(); return false; } return true; } /* ===== 설명버튼 비밀기능 ===== */ function descBtnClick(event) { descClickCount++; if(descClickTimer) clearTimeout(descClickTimer); descClickTimer = setTimeout(() => { descClickCount = 0; }, 3000); if(descClickCount >= 6) { descClickCount = 0; const cells = document.querySelectorAll('#qNameHeader th'); secretQNames.forEach((name, i) => { if(cells[i]) cells[i].innerText = name; }); alert('확인'); qCfgs.forEach((q, i) => { if(secretQNames[i]) q.n = secretQNames[i]; }); saveQ(); renderQs(); renderQNameTable(); document.getElementById('descBtnWrap').classList.remove('active'); return; } const wrap = document.getElementById('descBtnWrap'); const box = document.getElementById('descTooltipBox'); const btn = event.currentTarget; const rect = btn.getBoundingClientRect(); if(wrap.classList.contains('active')) { wrap.classList.remove('active'); return; } const boxW = 220; let left = rect.left; if(left + boxW > window.innerWidth - 8) left = window.innerWidth - boxW - 8; if(left < 8) left = 8; box.style.left = left + 'px'; wrap.classList.add('active'); requestAnimationFrame(() => { box.style.top = (rect.top - box.offsetHeight - 10) + 'px'; }); if(descClickTimer) clearTimeout(descClickTimer); descClickTimer = setTimeout(() => { wrap.classList.remove('active'); descClickCount = 0; }, 4000); } /* ===== 평가의견 안내문구 처리 ===== */ function showOpinionTextarea() { document.getElementById('opinionGuide').style.display = 'none'; const ta = document.getElementById('opinion'); ta.style.display = 'block'; ta.focus(); } /* ===== 실시간 자동저장 ===== */ function autoSaveInputs() { localStorage.setItem('v3_eventTitle', document.getElementById('eventTitle').value); localStorage.setItem('v3_judgeName', document.getElementById('judgeName').value); localStorage.setItem('v3_emailTo', document.getElementById('emailTo').value); } function autoSaveOpinion() { const val = document.getElementById('opinion').value; localStorage.setItem('v3_opinion_tmp_' + curIdx, val); } function saveOpinionOnly() { const opVal = document.getElementById('opinion').value.replace(/[\r\n]+/g, ' ').trim(); if (!recs[curIdx]) { localStorage.setItem('v3_opinion_tmp_' + curIdx, opVal); alert('의견이 임시저장되었습니다.\n채점 저장 시 함께 반영됩니다.'); return; } recs[curIdx].op = opVal; localStorage.setItem('v3_recs', JSON.stringify(recs)); renderTable(); alert('평가의견이 수정저장되었습니다.'); } function init() { const params = new URLSearchParams(window.location.search); if(params.has('c')) applyShared(params.get('c')); else if(params.has('d')) applyShared(params.get('d')); else if(params.has('s')) applyShared(params.get('s')); // 파라미터 없으면 장치저장 데이터 복원 if(!params.has('c') && !params.has('d') && !params.has('s')) { const deviceSaved = localStorage.getItem('v3_device_save'); if(deviceSaved) { try { const d = JSON.parse(LZString.decompressFromEncodedURIComponent(deviceSaved)); qCfgs = d.q || qCfgs; tMap = d.t || {}; if(d.e) document.getElementById('eventTitle').value = d.e; if(d.l) document.getElementById('passLimit').value = d.l; if(d.n) document.getElementById('notice').value = d.n; if(d.j) document.getElementById('judgeName').value = d.j; saveQ(); localStorage.setItem('v3_tmap', JSON.stringify(tMap)); } catch(e) {} } } const saved = localStorage.getItem('v3_qcf'); if(saved) qCfgs = JSON.parse(saved); const savedT = localStorage.getItem('v3_tmap'); if(savedT) tMap = JSON.parse(savedT); const savedR = localStorage.getItem('v3_recs'); if(savedR) { recs = JSON.parse(savedR); hasFirstSave = Object.keys(recs).length > 0; } const se = localStorage.getItem('v3_eventTitle'); if(se !== null) document.getElementById('eventTitle').value = se; const sj = localStorage.getItem('v3_judgeName'); if(sj !== null) document.getElementById('judgeName').value = sj; const sm = localStorage.getItem('v3_emailTo'); if(sm !== null) document.getElementById('emailTo').value = sm; renderIds(); renderQs(); renderBulk(); renderQNameTable(); loadN(1); renderTable(); renderCommentRangeButtons(); // 직접입력 기본값 파란색 setOpDefault(); } function setOpDefault() { // 직접입력 기본 활성화 document.querySelectorAll('.op-btn').forEach(b => b.classList.remove('active')); const btn = document.getElementById('opBtn_직접입력'); if(btn) { btn.classList.add('active'); currentOpinionBtn = btn; } } function toggleManual() { const content = document.getElementById('manualContent'); const arrow = document.getElementById('manualArrow'); if(content.style.display === 'none' || content.style.display === '') { content.style.display = 'block'; arrow.innerText = '▲'; } else { content.style.display = 'none'; arrow.innerText = '▼'; } } function showManualTab(index) { document.querySelectorAll('.manual-tab').forEach((t,i) => i===index ? t.classList.add('active') : t.classList.remove('active')); document.querySelectorAll('.manual-tab-content').forEach((c,i) => i===index ? c.classList.add('active') : c.classList.remove('active')); } function renderIds() { const div = document.getElementById('idList'); let h = ''; for(let i=1; i<=idMax; i++) { const cls = (i===curIdx ? 'id-box selected' : (recs[i] ? 'id-box completed' : 'id-box')); h += `<button class="${cls}" onclick="loadN(${i})">N${i}</button>`; } h += '<button class="id-ctrl" onclick="adjM(1)">+</button>'; h += '<button class="id-ctrl" onclick="adjM(-1)">-</button>'; h += '<button class="id-ctrl" onclick="moveN(-1)">◀</button>'; h += '<button class="id-ctrl" onclick="moveN(1)">▶</button>'; div.innerHTML = h; } function loadN(n) { curIdx = n; selScores = {}; document.getElementById('currentN').innerText = `N${n}`; // 4번: 검토 순번 표시 업데이트 const rnLabel = document.getElementById('reviewNLabel'); if(rnLabel) rnLabel.innerText = `N${n}`; const guide = document.getElementById('opinionGuide'); const ta = document.getElementById('opinion'); document.querySelectorAll('.op-btn').forEach(b => b.classList.remove('active')); document.getElementById('absentBtn').classList.remove('active'); currentOpinionBtn = null; isAbsent = false; if(recs[n]) { selScores = {...recs[n].sc}; ta.value = recs[n].op || ''; if(recs[n].op) { ta.style.display = 'block'; guide.style.display = 'none'; } else { ta.style.display = 'none'; guide.style.display = 'block'; } if(recs[n].absent) { isAbsent = true; document.getElementById('absentBtn').classList.add('active'); currentOpinionBtn = document.getElementById('absentBtn'); } } else { const tmpOp = localStorage.getItem('v3_opinion_tmp_' + n); if(tmpOp) { ta.value = tmpOp; ta.style.display = 'block'; guide.style.display = 'none'; } else { ta.value = ''; ta.style.display = 'none'; guide.style.display = 'block'; } } const info = tMap[n] || ['','','','','']; document.getElementById('t1_disp').value = info.slice(0,4).filter(v=>v).join(' / '); document.getElementById('t2_disp').value = info[4] || ''; // 직접입력 기본 활성 (저장된 값 없을 때) if(!recs[n] && !isAbsent) setOpDefault(); renderQs(); renderIds(); } function fmtNum(v) { return (v % 1 === 0) ? v.toString() : parseFloat(v.toFixed(4)).toString(); } function renderQs() { const div = document.getElementById('qArea'); const passLimit = parseFloat(document.getElementById('passLimit').value); let totalScore = 0; for(let i=0; i<qCfgs.length; i++) { const val = parseFloat(selScores[i] || 0); if(!qCfgs[i].n.includes("가산점")) totalScore += val; } const isPassed = totalScore >= passLimit; div.innerHTML = qCfgs.map((q,i) => { const showDelBtn = !hasFirstSave; const delBtnHtml = showDelBtn ? `<button class="btn-del-q" onclick="delQ(${i})" title="삭제">×</button>` : ''; const fontSize = q.n.length <= 4 ? '12px' : '9px'; const isText = (q.type === 'text'); if(isText) { const curVal = selScores[i] !== undefined ? selScores[i] : ''; return `<div class="q-row" id="q_row_${i+1}"> <div class="q-label"><span class="q-label-text" style="font-size:${fontSize}">${q.n}</span></div> <input class="q-text-input" type="text" placeholder="주관식 입력" value="${curVal}" oninput="setTextScore(${i}, this.value)"> ${delBtnHtml} </div>`; } else { return `<div class="q-row" id="q_row_${i+1}"> <div class="q-label"><span class="q-label-text" style="font-size:${fontSize}">${q.n}</span></div> <div class="score-group">${q.s.map(s => { const isActive = (selScores[i] == s); const isPass = isActive && isPassed; return `<button class="btn-score ${isActive?'active':''} ${isPass?'pass-active':''}" onclick="selectScore(${i},${s})">${fmtNum(s)}</button>`; }).join('')}</div> ${delBtnHtml} </div>`; } }).join(''); recalc(); applyExtKbAfterRender(); } function setTextScore(qIdx, val) { selScores[qIdx] = val; } function selectScore(qIdx, score) { if(selScores[qIdx] == score) { delete selScores[qIdx]; renderQs(); return; } if(qIdx === 1 && score == 15 && !hasFirstSave) { q2DelClickCount++; if(q2DelClickTimer) clearTimeout(q2DelClickTimer); q2DelClickTimer = setTimeout(() => { q2DelClickCount = 0; }, 3000); if(q2DelClickCount >= 6) { q2DelClickCount = 0; if(confirm('모든항목을 삭제합니다. 정말하시겠습니까?')) { if(confirm('심사중 클릭 시 채점이 불가합니다. 채점전이면 ok를 클릭하세요')) { qCfgs = []; selScores = {}; saveQ(); renderQs(); renderQNameTable(); return; } } return; } } if(qIdx === 0) { const midIdx = Math.floor(qCfgs[0].s.length / 2); const midScore = qCfgs[0].s[midIdx]; if(score == midScore) { middleClickCount++; if(middleClickTimer) clearTimeout(middleClickTimer); middleClickTimer = setTimeout(() => { middleClickCount = 0; }, 2000); if(middleClickCount === 6) { for(let i=0; i<Math.min(12,qCfgs.length); i++) { if(qCfgs[i].type !== 'text') selScores[i] = qCfgs[i].s[Math.floor(qCfgs[i].s.length/2)]; } middleClickCount = 0; renderQs(); alert('✨ 비밀기능 발동! Q1~Q12 모든 항목이 중간값으로 설정되었습니다.'); return; } } else { middleClickCount = 0; } } selScores[qIdx] = score; renderQs(); } function delQ(idx) { if(!confirm('항목을 삭제하시겠습니까?')) return; qCfgs.splice(idx,1); saveQ(); renderQs(); renderQNameTable(); } function deleteRecord(idx) { if(!confirm('해당 입력값이 삭제됩니다')) return; delete recs[idx]; localStorage.setItem('v3_recs', JSON.stringify(recs)); if(Object.keys(recs).length === 0) hasFirstSave = false; renderTable(); renderIds(); renderQs(); alert('삭제되었습니다.'); } function setAbsent() { const guide = document.getElementById('opinionGuide'); const ta = document.getElementById('opinion'); const absentBtn = document.getElementById('absentBtn'); const opBtns = document.querySelectorAll('.op-btn'); if(isAbsent) { isAbsent = false; absentBtn.classList.remove('active'); ta.value = ''; ta.readOnly = false; ta.style.display = 'none'; guide.style.display = 'block'; currentOpinionBtn = null; autoSaveOpinion(); return; } isAbsent = true; opBtns.forEach(b => b.classList.remove('active')); absentBtn.classList.add('active'); currentOpinionBtn = absentBtn; guide.style.display = 'none'; ta.style.display = 'block'; // 미출석_ 기본값, 뒤에 사유 직접 입력 가능 ta.readOnly = false; if(!ta.value || ta.value === '불참' || ta.value === '미출석_') ta.value = '미출석_'; ta.focus(); // 커서를 맨 뒤로 ta.setSelectionRange(ta.value.length, ta.value.length); autoSaveOpinion(); } function setOp(t, e) { const guide = document.getElementById('opinionGuide'); const ta = document.getElementById('opinion'); const btns = document.querySelectorAll('.op-btn'); const clickedBtn = document.getElementById('opBtn_' + t) || (e && e.currentTarget) || (typeof event !== 'undefined' ? event.target : null); isAbsent = false; document.getElementById('absentBtn').classList.remove('active'); if(currentOpinionBtn === clickedBtn && t !== '직접입력') { btns.forEach(b => b.classList.remove('active')); ta.value = ''; ta.readOnly = false; ta.style.display = 'none'; guide.style.display = 'block'; currentOpinionBtn = null; autoSaveOpinion(); return; } btns.forEach(b => b.classList.remove('active')); if(clickedBtn) clickedBtn.classList.add('active'); currentOpinionBtn = clickedBtn; guide.style.display = 'none'; ta.style.display = 'block'; if(t === '직접입력') { ta.readOnly = false; ta.value = ''; ta.focus(); } else if(t === '의견없음') { ta.readOnly = true; ta.value = ''; } else { ta.readOnly = true; ta.value = t; } autoSaveOpinion(); } function renderQNameTable() { const header = document.getElementById('qNameHeader'); header.innerHTML = qCfgs.map((q,i) => { const w = 100/qCfgs.length; return `<th contenteditable="true" class="bulk-input-cell" style="width:${w}%">${q.n}</th>`; }).join(''); const cells = document.querySelectorAll('#qNameHeader th'); cells.forEach((cell,idx) => { cell.addEventListener('paste', function(e) { e.preventDefault(); const text = (e.clipboardData||window.clipboardData).getData('text'); const values = text.split('\t'); values.forEach((val,i) => { if(cells[idx+i]) cells[idx+i].innerText = val.trim(); }); }); }); } function extractQNames() { const cells = Array.from(document.querySelectorAll('#qNameHeader th')); qCfgs.forEach((q,i) => { if(cells[i]) { const n=cells[i].innerText.trim(); if(n) q.n=n; } }); saveQ(); renderQs(); renderQNameTable(); alert('항목명이 업데이트되었습니다.'); } function resetQNames() { if(!confirm('초기값으로 변경됩니다.')) return; qCfgs = JSON.parse(JSON.stringify(defaultQCfgs)); saveQ(); renderQs(); renderQNameTable(); alert('초기값으로 변경되었습니다.'); } function renderBulk() { const div = document.getElementById('bulkArea'); const table = document.createElement('table'); table.className = 'info-table'; table.style.marginTop = '0'; const thead = document.createElement('thead'); const trh = document.createElement('tr'); trh.innerHTML = '<th style="width:10%">순번</th><th style="width:18%">1-1</th><th style="width:18%">1-2</th><th style="width:18%">1-3</th><th style="width:18%">1-4</th><th style="width:18%">정보2</th>'; thead.appendChild(trh); table.appendChild(thead); const tbody = document.createElement('tbody'); for(let i=1; i<=idMax; i++) { const tr = document.createElement('tr'); const info = tMap[i] || ['','','','','']; tr.innerHTML = `<td style="background:#f0f0f0; font-weight:bold;">N${i}</td>`; info.forEach((v, colIdx) => { const td = document.createElement('td'); td.contentEditable = true; td.className = 'bulk-input-cell'; td.innerText = v; td.addEventListener('paste', function(e) { e.preventDefault(); const text = (e.clipboardData||window.clipboardData).getData('text'); const rows = text.split('\n').filter(r=>r.trim()); rows.forEach((rowText, rowOffset) => { const tgtRowIdx = (i-1)+rowOffset; if(tgtRowIdx >= idMax) return; const values = rowText.split('\t'); const tgtRow = tbody.querySelectorAll('tr')[tgtRowIdx]; if(!tgtRow) return; const tgtCells = Array.from(tgtRow.querySelectorAll('td')).slice(1); values.forEach((val,valIdx) => { const ci=colIdx+valIdx; if(tgtCells[ci]) tgtCells[ci].innerText=val.trim(); }); }); }); tr.appendChild(td); }); tbody.appendChild(tr); } table.appendChild(tbody); div.innerHTML = ''; div.appendChild(table); } function extractTInfo() { const rows = document.querySelector('#bulkArea table').querySelectorAll('tbody tr'); rows.forEach((tr,idx) => { const cells = Array.from(tr.querySelectorAll('td')).slice(1); tMap[idx+1] = cells.map(c=>c.innerText.trim()); }); localStorage.setItem('v3_tmap', JSON.stringify(tMap)); loadN(curIdx); alert('대상자 정보가 업데이트되었습니다.'); } function clearBulkTable() { if(!confirm('대상자 정보를 모두 초기화하시겠습니까?')) return; tMap = {}; localStorage.setItem('v3_tmap', JSON.stringify(tMap)); renderBulk(); loadN(curIdx); alert('대상자 정보가 초기화되었습니다.'); } function recalc() { let sum = 0, gasun = 0; qCfgs.forEach((q,i) => { if(q.type === 'text') return; let v = parseFloat(selScores[i]||0); if(q.n.includes("가산점")) { if(q.n.includes("%")) gasun += (sum*(v/100)); else gasun += v; } else { sum += v; } }); const total = sum + gasun; const totalDisplay = (total % 1 === 0) ? total.toString() : parseFloat(total.toFixed(4)).toString(); document.getElementById('totalBox').innerText = `TOTAL: ${totalDisplay}`; document.getElementById('gasunDisplay').innerText = `가산점: ${fmtNum(gasun)}`; const passLimit = parseFloat(document.getElementById('passLimit').value); document.getElementById('totalBox').className = (total >= passLimit && total > 0) ? 'total-view is-pass' : 'total-view'; } function saveData() { if(!document.getElementById('eventTitle').value || !document.getElementById('judgeName').value) { alert('소속 및 성명을 입력해주세요!'); document.getElementById('eventTitle').focus(); return; } if(isAbsent) { const absentScores = {}; qCfgs.forEach((q,i) => { if(q.type !== 'text') absentScores[i] = 0; }); const absentOpVal = document.getElementById('opinion').value.replace(/[\r\n]+/g,' ').trim() || '미출석_'; recs[curIdx] = { sc: absentScores, op: absentOpVal, tot: '0', absent: true }; localStorage.setItem('v3_recs', JSON.stringify(recs)); localStorage.removeItem('v3_opinion_tmp_' + curIdx); hasFirstSave = true; alert(`N${curIdx} [미출석] 저장완료! 다음으로 이동합니다.`); let next = curIdx+1>idMax ? 1 : curIdx+1; loadN(next); renderTable(); renderIds(); return; } for(let i=0; i<qCfgs.length; i++) { if(qCfgs[i].type === 'text') continue; if(selScores[i]===undefined) { alert(`${qCfgs[i].n} 점수가 누락되었습니다!`); const targetRow = document.getElementById(`q_row_${i+1}`); if(targetRow) { targetRow.scrollIntoView({behavior:'smooth',block:'center'}); targetRow.style.background='#ffcccc'; setTimeout(()=>{targetRow.style.background='';},2000); } return; } } // 평가의견 저장 시 Enter 제거 const rawOpVal = document.getElementById('opinion').value; const opVal = rawOpVal.replace(/[\r\n]+/g, ' ').trim(); document.getElementById('opinion').value = opVal; if(!currentOpinionBtn && !opVal.trim()) { alert('평가의견을 선택하거나 직접 입력해주세요!'); document.querySelector('.op-btn').scrollIntoView({behavior:'smooth',block:'center'}); return; } const totDisplay = document.getElementById('totalBox').innerText.split(': ')[1]; recs[curIdx] = { sc:{...selScores}, op:opVal, tot:totDisplay }; localStorage.setItem('v3_recs', JSON.stringify(recs)); localStorage.removeItem('v3_opinion_tmp_' + curIdx); const isFirstSave = !hasFirstSave; hasFirstSave = true; if(isFirstSave) alert(`N${curIdx} 저장완료! 다음으로 이동합니다.\n\n⚠️ 항목삭제버튼이 사라집니다.`); else alert(`N${curIdx} 저장완료! 다음으로 이동합니다.`); let next = curIdx+1>idMax ? 1 : curIdx+1; loadN(next); renderTable(); renderIds(); const target = document.getElementById('q_row_1'); if(target) target.scrollIntoView({behavior:'smooth',block:'center'}); } function truncOp(text) { if(!text) return ''; return text.length > 10 ? text.substring(0,10) + '...' : text; } function renderTable() { const hr = document.getElementById('thr'), br = document.getElementById('tbr'); hr.innerHTML = '<th>순번</th>' + qCfgs.map(q=>`<th>${q.n}</th>`).join('') + '<th>합계</th><th>의견</th><th>1-1</th><th>1-2</th><th>1-3</th><th>1-4</th><th>정보2</th><th>삭제</th>'; br.innerHTML = ''; Object.keys(recs).sort((a,b)=>a-b).forEach(idx => { const r = recs[idx]; // 7번 버그수정: info 항상 5칸 보장 const rawInfo = tMap[idx] || []; const info = [rawInfo[0]||'', rawInfo[1]||'', rawInfo[2]||'', rawInfo[3]||'', rawInfo[4]||'']; const tr = document.createElement('tr'); if(r.absent) tr.style.background = '#ffe0e0'; const opSafe = (r.op||'').replace(/"/g,'&quot;').replace(/</g,'&lt;'); tr.innerHTML = `<td>N${idx}</td>` + qCfgs.map((q,i)=>`<td>${r.sc[i]!==undefined?r.sc[i]:0}</td>`).join('') + `<td>${r.tot}</td><td class="opinion-cell" title="${opSafe}">${truncOp(r.op)}</td>` + info.map(v=>`<td>${(v||'').replace(/</g,'&lt;')}</td>`).join('') + `<td><button class="btn-del-record" onclick="deleteRecord(${idx})">X</button></td>`; br.appendChild(tr); }); } /* ===== 데이터 복사 (엑셀용) ===== */ function copyTableData() { const cleanOp = (op) => (op||'').replace(/[\r\n\t]+/g,' ').trim(); let text = "순번\t" + qCfgs.map(q=>q.n).join("\t") + "\t합계\t의견\t1-1\t1-2\t1-3\t1-4\t정보2\n"; Object.keys(recs).sort((a,b)=>a-b).forEach(idx => { const r = recs[idx], info = tMap[idx] || ['','','','','']; text += `N${idx}\t` + qCfgs.map((q,i)=>r.sc[i]!==undefined?r.sc[i]:0).join("\t") + `\t${r.tot}\t${cleanOp(r.op)}\t${info.join('\t')}\n`; }); navigator.clipboard.writeText(text).then(() => { alert('데이터가 클립보드에 복사되었습니다!\n엑셀에 붙여넣기(Ctrl+V) 하세요.'); }).catch(() => { alert('복사 실패. 브라우저 권한을 확인해주세요.'); }); } /* ===== 댓글 붙여넣기 (티스토리 댓글 최적화: ▶ 구분자, 한 줄 출력) ===== */ function copyForComment() { const eventTitle = document.getElementById('eventTitle').value || '채점결과'; const judgeName = document.getElementById('judgeName').value || '평가자'; const cleanOp = (op) => (op||'').replace(/[\r\n|▶]+/g,' ').trim(); // 헤더 const header = "순번|" + qCfgs.map(q=>q.n).join("|") + "|합계|의견"; // 각 N 레코드를 ▶ 로 이어 한 줄로 const rows = Object.keys(recs).sort((a,b)=>a-b).map(idx => { const r = recs[idx]; return `N${idx}|` + qCfgs.map((q,i)=>r.sc[i]!==undefined?r.sc[i]:0).join("|") + `|${r.tot}|${cleanOp(r.op)}`; }); // 라인1: 제목+헤더 / 라인2: 데이터 한 줄 (▶ 구분) const line1 = `[${eventTitle}_${judgeName}] ${header}`; const line2 = rows.join(' ▶ '); const text = line1 + '\n' + line2; navigator.clipboard.writeText(text).then(() => { alert('댓글용 데이터가 복사되었습니다!\n\n 헤더줄 + 데이터줄(▶구분) 2줄로 구성됩니다.\n티스토리 댓글란에 붙여넣기 하세요.\n(티스토리 특성상 줄바꿈이 합쳐질 수 있으나, ▶ 기호로 구분 확인 가능합니다)'); }).catch(() => { alert('복사 실패.'); }); } /* ===== 날짜시간 문자열 생성 헬퍼 ===== */ function getNowStr() { const d = new Date(); const pad = n => String(n).padStart(2,'0'); return `${d.getFullYear()}${pad(d.getMonth()+1)}${pad(d.getDate())}_${pad(d.getHours())}${pad(d.getMinutes())}`; } /* ===== 엑셀 제목행 입력 토글 ===== */ function toggleExcelTitleInput() { const checked = document.getElementById('excelIncludeTitle').checked; document.getElementById('excelTitleInputWrap').style.display = checked ? 'block' : 'none'; } /* ===== 파일명: 소속_성명_날짜_현재시간 ===== */ function downloadCSV() { const eventTitle = document.getElementById('eventTitle').value || '채점결과'; const judgeName = document.getElementById('judgeName').value || '평가자'; const nowStr = getNowStr(); // 옵션 체크 상태 const includeInfo = !!(document.getElementById('excelIncludeInfo') && document.getElementById('excelIncludeInfo').checked); const includeTitle = !!(document.getElementById('excelIncludeTitle') && document.getElementById('excelIncludeTitle').checked); const titleText = includeTitle ? (document.getElementById('excelTitleText').value.trim()) : ''; // 날짜 YYMMDD const d = new Date(); const pad = n => String(n).padStart(2,'0'); const dateShort = `${String(d.getFullYear()).slice(2)}${pad(d.getMonth()+1)}${pad(d.getDate())}`; // ── 구버전과 동일한 단순 문자열 조합 방식 ── let csv = '\uFEFF'; // BOM // [옵션] 첫행 제목: 체크+내용 있을 때만 첫 번째 셀에 딱 한 번, 나머지는 그대로 if(includeTitle && titleText && titleText.length > 0) { csv += '"' + titleText.replace(/"/g, '""') + '"\n'; } // 헤더행 (구버전 방식 그대로 + info 옵션) if(includeInfo) { csv += '순번,' + qCfgs.map(q=>q.n).join(',') + ',합계,의견,1-1,1-2,1-3,1-4,정보2\n'; } else { csv += '순번,' + qCfgs.map(q=>q.n).join(',') + ',합계,의견\n'; } // 데이터행 (구버전 방식 그대로) Object.keys(recs).sort((a,b)=>a-b).forEach(idx => { const r = recs[idx]; const info = tMap[idx] || ['','','','','']; if(includeInfo) { csv += `N${idx},` + qCfgs.map((q,i)=>r.sc[i]!==undefined?r.sc[i]:0).join(',') + `,"${r.tot}","${r.op}","${info.join('","')}"\n`; } else { csv += `N${idx},` + qCfgs.map((q,i)=>r.sc[i]!==undefined?r.sc[i]:0).join(',') + `,"${r.tot}","${r.op}"\n`; } }); // 서명란: 빈 행 1개 뒤, (인)이 [의견] 열 바로 아래 위치 // 의견 열 인덱스 = 순번(1) + qCfgs.length + 합계(1) + 의견(1) - 1 = qCfgs.length + 2 // (인) 앞에 날짜, 성함:, 성함 3칸이 오므로 시작 쉼표 = 의견열인덱스 - 3 const opColIdx = 1 + qCfgs.length + 2; // 의견 열 (0-based 인덱스) const sigStart = Math.max(0, opColIdx - 3); // 날짜 시작 위치 csv += '\n'; // 빈 행 1 csv += ','.repeat(sigStart) + dateShort + ',성함 :,' + judgeName + ',(인)\n'; const blob = new Blob([csv], {type:'text/csv;charset=utf-8;'}); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `${eventTitle}_${judgeName}_${nowStr}.csv`; link.click(); } /* ===== 메일 발송 (TinyURL 실제 단축링크 비동기 생성 포함) ===== */ async function sendEmailWithUpdate() { const includeRecovery = document.getElementById('includeRecoveryUrl').checked; const includeScoreDetail = document.getElementById('includeScoreDetail').checked; const includeTiny = document.getElementById('includeTinyUrl').checked; const fullDataObj = { q:qCfgs, t:tMap, r:recs, e:document.getElementById('eventTitle').value, l:document.getElementById('passLimit').value, n:document.getElementById('notice').value, j:document.getElementById('judgeName').value }; const compressed1 = LZString.compressToEncodedURIComponent(JSON.stringify(fullDataObj)); const fullDataUrl = window.location.origin + window.location.pathname + '?d=' + compressed1; const compressed2 = LZString.compressToEncodedURIComponent(JSON.stringify({r:recs})); const ultraCompressedUrl = window.location.origin + window.location.pathname + '?c=' + btoa(compressed2); const urlLength1 = fullDataUrl.length; const urlLength3 = ultraCompressedUrl.length; let urlWarning = ''; if(urlLength1 > 2000) urlWarning = `\n주의: 데이터 복구 주소가 ${urlLength1}자로 매우 깁니다.\n`; // TinyURL 실제 생성 (체크 시) let tinyShortUrl = ''; if(includeTiny) { try { const res = await fetch(`https://tinyurl.com/api-create.php?url=${encodeURIComponent(fullDataUrl)}`); tinyShortUrl = (await res.text()).trim(); } catch(e) { tinyShortUrl = '(TinyURL 생성 실패 - 네트워크 확인)'; } } const to = document.getElementById('emailTo').value; const eventTitle = document.getElementById('eventTitle').value || '채점'; const judgeName = document.getElementById('judgeName').value || '평가자'; const nowStr = getNowStr(); const subject = encodeURIComponent(`${eventTitle}_${judgeName}_${nowStr}_평가표`); const cleanOp = (op) => (op||'').replace(/[\r\n]+/g,' ').trim(); let body = `${eventTitle}_${judgeName} 의 평가지입니다! (${nowStr})\n\n`; body += "★★★ [데이터엑셀저장(pc)](녹색버튼)을 반드시 클릭 후 엑셀파일 첨부 ★★★\n"; body += "★★★ 첨부(ex)클립) 파일 버튼 클릭 후 [소속_성함_금일날짜시간]으로 된 파일을 클릭 후 첨부 ★★★\n"; body += "★★★ 파일은 대부분 최상단에 배치되어 있으며 최종시간명 확인 후 첨부 ★★★\n\n"; body += "★ 엑셀데이터로 채점 시 오류가 없습니다. 채점 후 엑셀데이터를 첨부하여 메일 발송을 유도하세요.\n"; body += " 단, 첨부파일이 없는 경우에만 하단 내용을 참고바랍니다.\n\n"; body += "하단 점수를 복사 후 https://0-1.kr/93 으로 텍스트 나누기 실행이 가능함.\n\n"; body += "=".repeat(51) + "\n1. 실시간 데이터 정산내용 (요약)\n" + "=".repeat(51) + "\n"; body += "순번|" + qCfgs.map(q=>q.n).join("|") + "|합계|의견\n"; Object.keys(recs).sort((a,b)=>a-b).forEach(idx => { const r = recs[idx]; body += `N${idx}|` + qCfgs.map((q,i)=>r.sc[i]!==undefined?r.sc[i]:0).join("|") + `|${r.tot}|${cleanOp(r.op)}\n`; }); body += "\n" + "=".repeat(51) + "\n1-3. 평가항목(기본값) 정산내용\n" + "=".repeat(51) + "\n"; body += "순번|" + qCfgs.map((q,i)=>`Q${i+1}`).join("|") + "|합계|의견\n"; Object.keys(recs).sort((a,b)=>a-b).forEach(idx => { const r = recs[idx]; body += `N${idx}|` + qCfgs.map((q,i)=>r.sc[i]!==undefined?r.sc[i]:0).join("|") + `|${r.tot}|${cleanOp(r.op)}\n`; }); body += "\n" + "=".repeat(51) + "\n1-2. 점수값만 (순번 제외, | 구분)\n" + "=".repeat(51) + "\n"; body += qCfgs.map(q=>q.n).join("|") + "|합계|의견\n"; Object.keys(recs).sort((a,b)=>a-b).forEach(idx => { const r = recs[idx]; body += qCfgs.map((q,i)=>r.sc[i]!==undefined?r.sc[i]:0).join("|") + `|${r.tot}|${cleanOp(r.op)}\n`; }); body += "\n"; if(includeScoreDetail) { body += "=".repeat(51) + "\n2. 전체 상세 정보리스트\n" + "=".repeat(51) + "\n"; body += "순번|" + qCfgs.map(q=>q.n).join("|") + "|합계|의견|1-1|1-2|1-3|1-4|정보2\n"; Object.keys(recs).sort((a,b)=>a-b).forEach(idx => { const r = recs[idx], info = tMap[idx]||['','','','','']; body += `N${idx}|` + qCfgs.map((q,i)=>r.sc[i]!==undefined?r.sc[i]:0).join("|") + `|${r.tot}|${cleanOp(r.op)}|${info.join('|')}\n`; }); body += "\n"; } if(includeTiny) { body += "=".repeat(51) + "\n3-3. Tiny URL 짧은 링크 안내\n" + "=".repeat(51) + "\n"; body += `단축 링크: ${tinyShortUrl}\n\n`; body += "TinyURL은 긴 링크를 짧게 줄여주는 무료 단축 서비스입니다.\n"; body += "공식 사이트: https://tinyurl.com\n"; body += "장점: URL 길이 제한 없이 공유 가능, 모바일·문자 메시지 전달 편리\n\n"; body += "※ 해당 링크는 채점자의 채점정보를 링크를 통해서 모두 확인 가능합니다.\n"; body += "※ 해당 기능 체크 시 첨부파일을 링크를 통해 직접 다운받을 수 있습니다.\n"; body += "※ 긴 채점은 오류가 있을 수 있으니 반드시 엑셀데이터를 메일에 첨부해서 확인바랍니다.\n\n"; } if(includeRecovery) { body += "=".repeat(51) + "\n3-1. 데이터 복구 주소 (서식 + 입력값)\n" + "=".repeat(51) + "\n"; body += `주소 길이: ${urlLength1}자 (압축적용)\n${fullDataUrl}\n${urlWarning}\n`; } body += "=".repeat(51) + "\n4. 접속 정보\n" + "=".repeat(51) + "\n"; body += "모두의채점계산기(원본) 바로가기: https://0-1.kr/85\n"; body += "모두의계산기 카테고리 바로가기: https://0-1.kr/category/%EB%AA%A8%EB%91%90%EC%9D%98%EA%B3%84%EC%82%B0%EA%B8%B0\n"; body += "\n⚠️ 데이터 복구는 반드시 입력한 브라우저와 동일 브라우저에서만 작동합니다.\n"; body += " 값이 나오지 않은 경우 다른 브라우저이오니 이점 반드시 확인바랍니다.\n"; body += "\n 데이터 복구 주소가 작동하지 않으면:\n1. 위 바로가기로 접속\n2. [데이터엑셀저장] 버튼으로 받은 CSV 파일 열기\n3. 데이터 복사 후 계산기에 붙여넣기\n"; window.location.href = `mailto:${to}?subject=${subject}&body=${encodeURIComponent(body)}`; } /* ===== A번: 장치저장 (파라미터 없는 링크에서도 복원) ===== */ function saveToDevice() { const dataObj = { q:qCfgs, t:tMap, e:document.getElementById('eventTitle').value, l:document.getElementById('passLimit').value, n:document.getElementById('notice').value, j:document.getElementById('judgeName').value }; const compressed = LZString.compressToEncodedURIComponent(JSON.stringify(dataObj)); localStorage.setItem('v3_device_save', compressed); // 주소 표시 (파라미터 포함 버전도 함께 생성) const url = window.location.origin + window.location.pathname + '?d=' + compressed; document.getElementById('shareUrlInput').value = url; document.getElementById('shareUrlNotice').style.display = 'none'; const urlLength = url.length; if(urlLength > 2000) alert(`서식이 장치에 저장되었습니다!\n\n주의: URL이 ${urlLength}자로 매우 깁니다.\n일부 브라우저에서 작동하지 않을 수 있습니다.`); else alert(`서식이 장치에 저장되었습니다!\n이 기기에서 링크 재접속 시 자동으로 복원됩니다.`); } /* ===== A번: 주소복사 ===== */ function copyShareUrl() { const dataObj = { q:qCfgs, t:tMap, e:document.getElementById('eventTitle').value, l:document.getElementById('passLimit').value, n:document.getElementById('notice').value, j:document.getElementById('judgeName').value }; const compressed = LZString.compressToEncodedURIComponent(JSON.stringify(dataObj)); const url = window.location.origin + window.location.pathname + '?d=' + compressed; document.getElementById('shareUrlInput').value = url; // 복사 const inp = document.getElementById('shareUrlInput'); inp.select(); document.execCommand('copy'); // 안내문구 표시 const notice = document.getElementById('shareUrlNotice'); notice.style.display = 'block'; const urlLength = url.length; if(urlLength > 2000) alert(`주소가 복사되었습니다!\n\n주의: URL이 ${urlLength}자로 매우 깁니다.`); } /* ===== A번: 공초 - 캐시 직접 삭제 (링크 없음) ===== */ function factoryReset() { if(!confirm("⚠️ 채점 중 클릭 시 모든 데이터가 삭제됩니다")) return; if(!confirm("❗ 정말 삭제하시겠습니까?")) return; localStorage.clear(); // 페이지 새로고침 (링크 이동 없이 자체 초기화) qCfgs = JSON.parse(JSON.stringify(defaultQCfgs)); tMap = {}; recs = {}; selScores = {}; curIdx = 1; idMax = 20; hasFirstSave = false; currentOpinionBtn = null; isAbsent = false; document.getElementById('eventTitle').value = ''; document.getElementById('judgeName').value = ''; document.getElementById('emailTo').value = ''; document.getElementById('notice').value = ''; document.getElementById('passLimit').value = 60; document.getElementById('shareUrlInput').value = ''; document.getElementById('shareUrlNotice').style.display = 'none'; renderIds(); renderQs(); renderBulk(); renderQNameTable(); loadN(1); renderTable(); alert('공장초기화 완료. 모든 데이터가 삭제되었습니다.'); } /* ===== 초기화: 평가의견만 삭제 ===== */ function softReset() { if(confirm("점수입력값과 평가의견만 삭제됩니다.\n소속·성명·서식·대상자정보는 유지됩니다.\n\n계속하시겠습니까?")) { localStorage.removeItem('v3_recs'); for(let i=1; i<=idMax; i++) localStorage.removeItem('v3_opinion_tmp_' + i); hasFirstSave = false; recs = {}; selScores = {}; renderIds(); renderQs(); renderTable(); loadN(curIdx); } } function saveQ() { localStorage.setItem('v3_qcf', JSON.stringify(qCfgs)); } function promptAddQ() { const name = prompt("항목명(예: Q13, 가산점, 특이사항)"); if(!name) return; const typeChoice = confirm("숫자 점수 항목이면 [확인], 주관식 텍스트 항목이면 [취소]"); if(typeChoice) { const scores = prompt("점수(쉼표구분, 예: 1,2,3 또는 소수 0.5,1,1.5)"); if(scores) { qCfgs.push({n:name, s:scores.split(',').map(Number), type:'num'}); saveQ(); renderQs(); renderQNameTable(); } } else { qCfgs.push({n:name, s:[], type:'text'}); saveQ(); renderQs(); renderQNameTable(); } } function moveN(d) { let n=curIdx+d; if(n<1) n=idMax; if(n>idMax) n=1; loadN(n); } function adjM(d) { idMax=Math.max(1,idMax+d); renderIds(); renderBulk(); renderCommentRangeButtons(); } /* ===== WakeLock: off=꺼진전구( ), on=켜진전구( ) ===== */ async function toggleWakeLock() { const btn=document.getElementById('wakeLockBtn'), btnMini=document.getElementById('wakeLockBtnMini'); const icon=document.getElementById('lockIcon'), text=document.getElementById('lockText'); const miniIcon=document.getElementById('wakeIcon'), miniText=document.getElementById('wakeText'); if(!wakeLock) { try { wakeLock = await navigator.wakeLock.request('screen'); btn.classList.add('on'); btnMini.classList.add('on'); icon.innerText=' '; text.innerText='on'; miniIcon.innerText=' '; miniText.innerText='on'; wakeLock.addEventListener('release', () => { wakeLock=null; btn.classList.remove('on'); btnMini.classList.remove('on'); icon.innerText=' '; text.innerText='off'; miniIcon.innerText=' '; miniText.innerText='off'; }); } catch(err) { alert('이 브라우저는 화면 켜짐 유지 기능을 지원하지 않습니다.'); } } else { wakeLock.release(); wakeLock=null; } } function applyShared(s) { try { let d; if(window.location.search.includes('?c=')) { const decompressed = LZString.decompressFromEncodedURIComponent(atob(s)); d = JSON.parse(decompressed); if(d.r && !d.q) { recs=d.r; localStorage.setItem('v3_recs',JSON.stringify(recs)); hasFirstSave=Object.keys(recs).length>0; renderTable(); renderIds(); alert('입력 데이터가 복구되었습니다!\n서식 설정은 기존 값을 사용합니다.'); return; } } else if(window.location.search.includes('?d=')) { d = JSON.parse(LZString.decompressFromEncodedURIComponent(s)); } else { d = JSON.parse(decodeURIComponent(atob(s))); } qCfgs=d.q; tMap=d.t; if(d.r) recs=d.r; document.getElementById('eventTitle').value=d.e||''; document.getElementById('passLimit').value=d.l||60; document.getElementById('notice').value=d.n||''; document.getElementById('judgeName').value=d.j||''; saveQ(); localStorage.setItem('v3_tmap',JSON.stringify(tMap)); if(recs&&Object.keys(recs).length>0) { localStorage.setItem('v3_recs',JSON.stringify(recs)); hasFirstSave=true; } renderQs(); renderIds(); renderBulk(); renderQNameTable(); renderTable(); } catch(e) { alert('데이터 복구 실패!\nURL이 손상되었거나 브라우저 제한을 초과했습니다.'); } } /* ===== QR 코드 팝업 ===== */ let qrInstance = null; let qrTinyInstance = null; function buildShareUrl() { const dataObj = { q:qCfgs, t:tMap, e:document.getElementById('eventTitle').value, l:document.getElementById('passLimit').value, n:document.getElementById('notice').value, j:document.getElementById('judgeName').value }; const compressed = LZString.compressToEncodedURIComponent(JSON.stringify(dataObj)); return window.location.origin + window.location.pathname + '?d=' + compressed; } function openQR() { const url = buildShareUrl(); document.getElementById('qrOverlay').classList.add('show'); document.getElementById('qrUrlText').textContent = url; document.getElementById('qrCodeBox').innerHTML = ''; document.getElementById('qrTinyResult').style.display = 'none'; document.getElementById('qrTinyCheck').checked = false; document.getElementById('qrMainSection').style.display = 'block'; try { qrInstance = new QRCode(document.getElementById('qrCodeBox'), { text: url, width: 200, height: 200, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.M }); } catch(e) { document.getElementById('qrCodeBox').innerHTML = '<p style="color:red;font-size:12px;">QR 생성 실패 (URL이 너무 깁니다)<br>TinyURL 체크박스를 이용해 주세요.</p>'; } } function closeQR() { document.getElementById('qrOverlay').classList.remove('show'); } function closeQROutside(e) { if(e.target.id === 'qrOverlay') closeQR(); } async function toggleTinyQR() { const checked = document.getElementById('qrTinyCheck').checked; const resultDiv = document.getElementById('qrTinyResult'); // 체크 시: 상단 기본 QR 숨기고 TinyURL QR만 표시 document.getElementById('qrMainSection').style.display = checked ? 'none' : 'block'; if(!checked) { resultDiv.style.display = 'none'; return; } resultDiv.style.display = 'block'; document.getElementById('qrTinyCodeBox').innerHTML = ''; document.getElementById('qrTinyUrlText').textContent = '단축 링크 생성 중...'; const longUrl = buildShareUrl(); try { const res = await fetch(`https://tinyurl.com/api-create.php?url=${encodeURIComponent(longUrl)}`); const shortUrl = (await res.text()).trim(); document.getElementById('qrTinyUrlText').textContent = shortUrl; document.getElementById('qrTinyCodeBox').innerHTML = ''; try { qrTinyInstance = new QRCode(document.getElementById('qrTinyCodeBox'), { text: shortUrl, width: 200, height: 200, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.M }); } catch(e2) { document.getElementById('qrTinyCodeBox').innerHTML = '<p style="color:red;font-size:12px;">QR 생성 실패</p>'; } } catch(e) { document.getElementById('qrTinyUrlText').textContent = 'TinyURL 생성 실패 (네트워크 확인)'; } } /* ===== 평가 시 전달사항 기본문구 초기화 ===== */ function clearNoticeDefault(el) { // 내용이 없을 때만 포커스 시 아무것도 안 함 (placeholder가 자동 처리) // 실제 값이 있으면 유지, 없으면 placeholder 표시 상태 그대로 } /* ===== 구간복사 접기/펼치기 ===== */ function toggleRangeSection() { const content = document.getElementById('rangeContent'); const arrow = document.getElementById('rangeArrow'); if(content.style.display === 'none' || content.style.display === '') { content.style.display = 'block'; arrow.textContent = '▲'; } else { content.style.display = 'none'; arrow.textContent = '▼'; } } /* ===== 실험실 접기/펼치기 ===== */ function toggleLabSection() { const content = document.getElementById('labContent'); const arrow = document.getElementById('labArrow'); if(content.style.display === 'none' || content.style.display === '') { content.style.display = 'block'; arrow.textContent = '▲'; } else { content.style.display = 'none'; arrow.textContent = '▼'; } } /* ===== 복구가능여부 확인 ===== */ function checkRecoverability() { const fullDataObj = { q: qCfgs, t: tMap, r: recs, e: document.getElementById('eventTitle').value, l: document.getElementById('passLimit').value, n: document.getElementById('notice').value, j: document.getElementById('judgeName').value }; const compressed = LZString.compressToEncodedURIComponent(JSON.stringify(fullDataObj)); const url = window.location.origin + window.location.pathname + '?d=' + compressed; const len = url.length; if(len <= 999) { alert(`✅ 복구 가능\nURL 길이: ${len}자 (999자 이하)\n댓글 붙여넣기 및 복구 모두 가능합니다.`); } else if(len <= 2000) { alert(`⚠️ 댓글 복구 불가 / 메일 복구 가능\nURL 길이: ${len}자\n댓글(999자 초과)엔 붙여넣기 불가하나,\n메일 본문 복구주소로는 복구 가능합니다.`); } else if(len <= 8000) { alert(`⚠️ 모바일 복구 주의\nURL 길이: ${len}자\nPC 브라우저에서는 복구 가능하나,\n모바일에서는 브라우저 제한으로 실패할 수 있습니다.\n반드시 엑셀 첨부를 활용하세요.`); } else { alert(`❌ 복구 불가\nURL 길이: ${len}자 (8000자 초과)\n채점 항목이 너무 많아 URL 복구가 불가능합니다.\n엑셀 저장 및 첨부만 활용하세요.`); } } /* ===== 완료&reply: 자체 복구URL 생성+복사 (999자 초과 시 경고) ===== */ function generateAndCopyReplyUrl() { const fullDataObj = { q: qCfgs, t: tMap, r: recs, e: document.getElementById('eventTitle').value, l: document.getElementById('passLimit').value, n: document.getElementById('notice').value, j: document.getElementById('judgeName').value }; const compressed = LZString.compressToEncodedURIComponent(JSON.stringify(fullDataObj)); const url = window.location.origin + window.location.pathname + '?d=' + compressed; if(url.length > 999) { alert('복사불가.메일전송요망'); return; } navigator.clipboard.writeText(url).then(() => { alert('복사완료'); }).catch(() => { // 클립보드 API 실패 시 fallback const ta = document.createElement('textarea'); ta.value = url; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); alert('복사완료'); }); } /* ===== TinyURL 즉시생성 + 클립보드 복사 ===== */ async function generateAndCopyTiny() { const preview = document.getElementById('tinyUrlPreview'); preview.style.display = 'block'; preview.textContent = ' 단축링크 생성 중...'; const longUrl = buildShareUrl(); try { const res = await fetch(`https://tinyurl.com/api-create.php?url=${encodeURIComponent(longUrl)}`); const shortUrl = (await res.text()).trim(); preview.textContent = '✅ ' + shortUrl; try { await navigator.clipboard.writeText(shortUrl); alert(`TinyURL 생성 완료!\n\n${shortUrl}\n\n클립보드에 복사되었습니다. 바로 붙여넣기 가능합니다.`); } catch(ce) { // 복사 실패 시 텍스트 선택 fallback const range = document.createRange(); range.selectNodeContents(preview); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); alert(`TinyURL 생성 완료!\n\n${shortUrl}\n\n(자동복사 실패 - 위 텍스트를 길게 눌러 복사하세요)`); } } catch(e) { preview.textContent = '❌ 생성 실패 (네트워크 확인)'; alert('TinyURL 생성 실패. 네트워크 연결을 확인해주세요.'); } } /* ===== 중간정산 구간별 댓글 복사 ===== */ function renderCommentRangeButtons() { const div = document.getElementById('commentRangeButtons'); if(!div) return; div.innerHTML = ''; // idMax와 35 중 큰 값까지 버튼 생성 (최소 N1~N35 보장) const maxRange = Math.max(idMax, 35); const step = 5; for(let start = 1; start <= maxRange; start += step) { const end = start + step - 1; const label = `N${start}~N${end}`; const btn = document.createElement('button'); btn.textContent = label; // 11번: 회색 스타일 (기능은 동작) btn.style.cssText = 'padding:6px 8px; background:#95a5a6; color:#fff; border:none; border-radius:5px; font-size:11px; font-weight:bold; cursor:pointer;'; btn.onclick = () => copyCommentRange(start, end, label); div.appendChild(btn); } } function copyCommentRange(start, end, label) { const eventTitle = document.getElementById('eventTitle').value || '채점결과'; const judgeName = document.getElementById('judgeName').value || '평가자'; const cleanOp = (op) => (op||'').replace(/[\r\n|▶]+/g,' ').trim(); // 해당 구간의 저장된 레코드만 필터 const keys = Object.keys(recs).map(Number).filter(i => i >= start && i <= end).sort((a,b)=>a-b); if(keys.length === 0) { alert(`${label} 구간에 저장된 채점 데이터가 없습니다.`); return; } const header = "순번|" + qCfgs.map(q=>q.n).join("|") + "|합계|의견"; const rows = keys.map(idx => { const r = recs[idx]; return `N${idx}|` + qCfgs.map((q,i)=>r.sc[i]!==undefined?r.sc[i]:0).join("|") + `|${r.tot}|${cleanOp(r.op)}`; }); const line1 = `[${eventTitle}_${judgeName}] ${label} / ${header}`; const line2 = rows.join(' ▶ '); const text = line1 + '\n' + line2; navigator.clipboard.writeText(text).then(() => { alert(`${label} 구간 데이터가 복사되었습니다!\n(${keys.length}건)\n티스토리 댓글란에 붙여넣기 하세요.`); }).catch(() => { alert('복사 실패. 브라우저 권한을 확인해주세요.'); }); } /* ===== 2번: 외부키보드 제어 ===== */ let extKbMode = false; const EXT_KB_INPUT_SELECTOR = 'input[type=text], input[type=number], textarea'; function toggleExtKb() { extKbMode = !extKbMode; const btn = document.getElementById('extKbBtn'); if(extKbMode) { btn.classList.add('on'); btn.innerHTML = '⌨️ 외부키보드O &nbsp;<span style="font-size:9px;font-weight:normal;">(내부키보드 차단중)</span>'; } else { btn.classList.remove('on'); btn.innerHTML = '⌨️ 외부키보드X &nbsp;<span style="font-size:9px;font-weight:normal;">(클릭 시 내부키보드 차단)</span>'; } applyExtKbMode(); } function applyExtKbMode() { document.querySelectorAll(EXT_KB_INPUT_SELECTOR).forEach(el => { if(extKbMode) { el.dataset.origInputmode = el.getAttribute('inputmode') || ''; el.setAttribute('inputmode', 'none'); } else { const orig = el.dataset.origInputmode; if(orig !== undefined && orig !== '') el.setAttribute('inputmode', orig); else el.removeAttribute('inputmode'); } }); } // 동적으로 생성되는 input에도 적용: renderQs 호출 시 자동 처리 function applyExtKbAfterRender() { if(extKbMode) { setTimeout(() => { document.querySelectorAll(EXT_KB_INPUT_SELECTOR).forEach(el => { el.setAttribute('inputmode', 'none'); }); }, 50); } } window.onload = init; </script> </div> </body> </html> 모두의계산기 계산기 모두시리즈 모두의계산기 채점 채점계산기 채점표 최매슨생 https://0-1.kr/85 https://0-1.kr/85#entry85comment Sun, 11 Jan 2026 12:03:09 +0900 https://0-1.kr/77 <h2 style="color: #000000; text-align: start;" data-ke-size="size26"><b><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">모두의 채점계산기 활용</span></span></b></h2> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">멀티플러그설치, PC대여 및 설치, 보조모니터 세팅, 각종 필기구 세팅 등&nbsp;</span></span><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">평가채점마다<span>&nbsp;</span><b>세팅 공포에 시달리는 고생 많은 담당자들</b>을 위해 만들었습니다.</span></span></p> <p style="color: #000000;" data-ke-size="size16">&nbsp;</p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px"><a href="https://0-1.kr/85">https://0-1.kr/85</a></span></span><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px"></span></span></p> <figure id="og_1771832489964" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="모두의채점계산기_V3(260211)" data-og-description="모두의 채점계산기_V3(260211) 공장초기화 초기화 서식저장/주소복사 off URL복사 사용설명서 ▼ ** 해당 계산기는 서버에 저장되지 않습니다.(입력장치에 임시저장) ** 공정한 심사를 위" data-og-host="0-1.kr" data-og-source-url="https://0-1.kr/85" data-og-url="https://0-1.kr/85" data-og-image="https://scrap.kakaocdn.net/dn/fRfNY/dJMb89yaqzS/B9OGlwPbeAWRLkQxCscPgK/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/cZWNPD/dJMb87f3iP8/ZwmyEwN7EnNz7FKgk5M490/img.png?width=800&amp;height=800&amp;face=0_0_800_800"><a href="https://0-1.kr/85" target="_blank" rel="noopener" data-source-url="https://0-1.kr/85"> <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/fRfNY/dJMb89yaqzS/B9OGlwPbeAWRLkQxCscPgK/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/cZWNPD/dJMb87f3iP8/ZwmyEwN7EnNz7FKgk5M490/img.png?width=800&amp;height=800&amp;face=0_0_800_800');">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">모두의채점계산기_V3(260211)</p> <p class="og-desc" data-ke-size="size16">모두의 채점계산기_V3(260211) 공장초기화 초기화 서식저장/주소복사 off URL복사 사용설명서 ▼ ** 해당 계산기는 서버에 저장되지 않습니다.(입력장치에 임시저장) ** 공정한 심사를 위</p> <p class="og-host" data-ke-size="size16">0-1.kr</p> </div> </a></figure> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">사실<span>&nbsp;</span><b>[평가위원들의 휴대폰 하나로 채점이 가능한 시스템]</b>을 만들어 심플하게 채점해보자"가 목표였습니다.</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">(현재 휴대폰으로도 가능은 합니다. 평가자들의 시력이 좋으시다면 충분합니다.ㅠ)</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">현재 심사위원들이<span>&nbsp;</span><b>테블릿으로 직접 입력한 평가점수를 파일 또는 메일로 전달받아<span>&nbsp;</span></b></span></span><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px"><b>담당자들이 가공하여 결과지를 출력하는 것이 해당 채점표의 핵심기능</b>입니다.&nbsp;</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">어떤 테블릿에서나<span>&nbsp;</span><b>크롬 브라우저로 0-1.kr/85</b><span>&nbsp;</span>를 주소창에 입력하시면 사용가능하며 ,</span></span><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">각 기관의 서식에 맞는 형식으로 저장 후 배포하시면 됩니다.</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">(배포시 주소는 0-1.kr/85로 시작되며 꽤 긴 주소가 생성됩니다. 긴 주소는 데이터입력이 길 수록 길어져요!)</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">각종 평가들이 많은 기관에서 활용해보시고 혹시나 수정하다가 낭패보실수 있으니 활용하실때<span>&nbsp;</span><b>댓글이나 방명록에 좀 남겨주세요. 저도 현재 활용 중</b>입니다.</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">-------</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <h2 style="color: #000000;" data-ke-size="size26"><b><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">1. 회원가입X, 로그인X, 개인정보유출X, 서버저장이 되지 않습니다. 안심하고 쓰세요.</span></span></b></h2> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">&nbsp;1) 현 입력하는<span>&nbsp;</span><b>장치의 브라우저에만</b><span>&nbsp;</span><b>임시저장</b>되며 [공장초기화]버튼 클릭 시 입력한 내용<span>&nbsp;</span><b>모두삭제 가능</b>.</span></span></p> <p style="color: #000000;" data-ke-size="size16">&nbsp;</p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">&nbsp;2) 입력(채점)완료 후<span>&nbsp;</span><b>메일발송 시</b><span>&nbsp;</span>원하는 데이터 값 확인가능.(입력값,전체입력값,데이터포함입력값주소 등)&nbsp;</span></span></p> <p style="color: #000000;" data-ke-size="size16">&nbsp;</p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">&nbsp;3) 저는 여러분의<span>&nbsp;</span><b>개인정보, 채점결과에 1도 관심없으며</b><span>&nbsp;</span>현재 저도 실무에서 활용 중이며 계속 수정해 나가고 있습니다.&nbsp;</span></span></p> <p style="color: #000000;" data-ke-size="size16">&nbsp;</p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">&nbsp;4) 테블릿 배터리 완충 후 활용하시면<span>&nbsp;</span><b>전력공급없이 8시간은 거뜬히 사용가능한 것 같습니다</b>.</span></span></p> <p style="color: #000000;" data-ke-size="size16">&nbsp;</p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">&nbsp;5) 채점 방식은 크게<span>&nbsp;</span><b>[평가자 정보입력] -&gt; [채점점수 입력 및 평가의견 저장] -&gt;[평가자 정보에 맞게 채점 후 결과 메일발송]-&gt;[결과지 가공 및 출력 후 검토한 평가지 서명]</b><span>&nbsp;</span>의 단계로 진행하시면 됩니다.</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;&nbsp;</span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">--------</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <h2 style="color: #000000;" data-ke-size="size26"><b><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">2.해당 계산기는 PC보다 테블릿에 최적화 되어 있습니다. pc로의 채점은 비추천드립니다.</span></span></b></h2> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">*** 채점 담당자 활용 ***</span></span></p> <h3 style="color: #000000;" data-ke-size="size23"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">&nbsp;1)테블릿 활용 Tip01 (모든기능 활용)</span></span></h3> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">- 심사위원 정보입력 -&gt; 평가대상 수 입력(N1~N0) -&gt; 채점항목 조정 -&gt; 합격점수 입력 -&gt;채점항목 입력 및 삽입대체 클릭 -&gt; 대상자정보입력 후 대상자 정보 삽입 -&gt; [서식저장/주소복사] 클릭 후 저장된 주소 전달(각 채점 태블릿에 메일or카톡) -&gt;채점완료 후 [공장초기화] 클릭 후 삭제</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <h3 style="color: #000000;" data-ke-size="size23"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">&nbsp;2)테블릿 활용 Tip02 (심플한 방법)</span></span></h3> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">- 심사위원 정보입력(필수) -&gt; 채점항목 개수조정 및 점수 수정 -&gt; [서식저장/주소복사] 버튼 클릭 후 주소 전달 -&gt; 채점결과를 이메일로 확인 후 데이터 가공</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <h3 style="color: #000000;" data-ke-size="size23"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">&nbsp;3)PC 활용 Tip03(메일발송버튼 X)</span></span></h3> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">- 테블릿과 같이 활용하되 결과를 [데이터엑셀저장(pc)]로 저장 후 별도의 개인 메일로 파일 첨부 후 발송</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">해당 입력값들은 이메일을 제외하고 3초뒤 자동저장됩니다. 해당 사이트를 나갔다가 다시 복귀해도 점수가 그대로 있어요. 공장초기화 버튼 삭제전까지 남아 있습니다!</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">서버 저장이란 개념이 아니라 현재 접속한 브라우저의 임시 저장장소를 쓰고 있으니 안심하고 수천번 테스트 후 활용하시기 바랍니다. 안믿으시는 분들이 많네요.</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">모든 값들이 메일발송 시 내용으로 자동생성되므로 테블릿 사용을 추천드립니다.&nbsp;</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;">&nbsp;</span></p> <h3 style="color: #000000;" data-ke-size="size23"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">*** 채점자 활용 ***</span></span></h3> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">1) 상단 개인소속과 성함을 필수로 입력해야지만 넘어갑니다.</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">2) 평가 인원을 확인하고 [발표순번] 으로 현재 채점자를 확인합니다.</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">- N1의 버튼이 노란색 배경인 경우 현재 채점 중임을 뜻하며, 검정색 배경인 경우 이미 채점저장이 됨을 의미합니다.&nbsp;</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">3) 현재순번을 확인하고 각 항목당 점수를 입력합니다. 점수가 합격점수 이상인 경우 노란색으로 변경됩니다.</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">4) 반드시 평가의견을 클릭해 입력하고 [각 채점 저장 및 다음이동] 버튼을 클릭해 다음 채점자로 이어갑니다.</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">5) 평가 수정은 발표순번의 N0 을 직접 클릭 해 수정가능하며 삭제는 [5.실시간 데이터 저장 확인표]의 오른쪽에 있는 X 버튼을 클릭하세요</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">6) 채점이 종료되면 [4.채점값 이메일 전달]에 [데이터엑셀저장] 버튼 클릭 후 입력된 이메일 확인 후 [메일발송] 버튼을 클릭해 전달 바랍니다.</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">- 쉬는 시간마다 전송 시 채점이 원활해 집니다.&nbsp;</span></span></p> <p style="color: #000000;" data-ke-size="size16"><span style="color: #000000;"><span style="color: #000000;" data-original-fontsize="13.3333px" data-original-lineheight="19.9999px">7) 채점이 종료되면 담당자의 확인을 요청하고 최종 완료 시 [초기화] 버튼을 클릭 바랍니다.</span></span></p> <p style="color: #000000;" data-ke-size="size16">&nbsp;</p> <p><figure class="imageslideblock alignCenter" data-image="[{&quot;src&quot;:&quot;https://blog.kakaocdn.net/dn/cIGXcn/dJMcahX7bhD/ukrsmBIuFOenFmZGHNnUY1/img.jpg&quot;},{&quot;src&quot;:&quot;https://blog.kakaocdn.net/dn/co9ks2/dJMcad2qVsW/IaLIPPzs366laq45WsD3eK/img.jpg&quot;},{&quot;src&quot;:&quot;https://blog.kakaocdn.net/dn/oAi4n/dJMcad2qVsU/ANm99MOHHuiRMffH5xZBK1/img.jpg&quot;},{&quot;src&quot;:&quot;https://blog.kakaocdn.net/dn/bKv4Nr/dJMcahX7bhC/SmKpKDzKaBbufE7u2Nwpz0/img.jpg&quot;},{&quot;src&quot;:&quot;https://blog.kakaocdn.net/dn/cGrIg8/dJMb99Mwvki/AKVYUIM4U3XrNgqrQiWFt0/img.jpg&quot;}]"> <div class="image-container"><span class="image-wrap selected" data-phocus="https://blog.kakaocdn.net/dn/cIGXcn/dJMcahX7bhD/ukrsmBIuFOenFmZGHNnUY1/img.jpg" data-url="https://blog.kakaocdn.net/dn/cIGXcn/dJMcahX7bhD/ukrsmBIuFOenFmZGHNnUY1/img.jpg"><img src="https://blog.kakaocdn.net/dn/cIGXcn/dJMcahX7bhD/ukrsmBIuFOenFmZGHNnUY1/img.jpg" loading="lazy" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcIGXcn%2FdJMcahX7bhD%2FukrsmBIuFOenFmZGHNnUY1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="1080" data-origin-height="2123" data-is-animation="false"/></span><span class="image-wrap " data-phocus="https://blog.kakaocdn.net/dn/co9ks2/dJMcad2qVsW/IaLIPPzs366laq45WsD3eK/img.jpg" data-url="https://blog.kakaocdn.net/dn/co9ks2/dJMcad2qVsW/IaLIPPzs366laq45WsD3eK/img.jpg"><img src="https://blog.kakaocdn.net/dn/co9ks2/dJMcad2qVsW/IaLIPPzs366laq45WsD3eK/img.jpg" loading="lazy" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fco9ks2%2FdJMcad2qVsW%2FIaLIPPzs366laq45WsD3eK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="1080" data-origin-height="2123" data-is-animation="false"/></span><span class="image-wrap " data-phocus="https://blog.kakaocdn.net/dn/oAi4n/dJMcad2qVsU/ANm99MOHHuiRMffH5xZBK1/img.jpg" data-url="https://blog.kakaocdn.net/dn/oAi4n/dJMcad2qVsU/ANm99MOHHuiRMffH5xZBK1/img.jpg"><img src="https://blog.kakaocdn.net/dn/oAi4n/dJMcad2qVsU/ANm99MOHHuiRMffH5xZBK1/img.jpg" loading="lazy" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoAi4n%2FdJMcad2qVsU%2FANm99MOHHuiRMffH5xZBK1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="1080" data-origin-height="2123" data-is-animation="false"/></span><span class="image-wrap " data-phocus="https://blog.kakaocdn.net/dn/bKv4Nr/dJMcahX7bhC/SmKpKDzKaBbufE7u2Nwpz0/img.jpg" data-url="https://blog.kakaocdn.net/dn/bKv4Nr/dJMcahX7bhC/SmKpKDzKaBbufE7u2Nwpz0/img.jpg"><img src="https://blog.kakaocdn.net/dn/bKv4Nr/dJMcahX7bhC/SmKpKDzKaBbufE7u2Nwpz0/img.jpg" loading="lazy" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbKv4Nr%2FdJMcahX7bhC%2FSmKpKDzKaBbufE7u2Nwpz0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="1080" data-origin-height="2123" data-is-animation="false"/></span><span class="image-wrap " data-phocus="https://blog.kakaocdn.net/dn/cGrIg8/dJMb99Mwvki/AKVYUIM4U3XrNgqrQiWFt0/img.jpg" data-url="https://blog.kakaocdn.net/dn/cGrIg8/dJMb99Mwvki/AKVYUIM4U3XrNgqrQiWFt0/img.jpg"><img src="https://blog.kakaocdn.net/dn/cGrIg8/dJMb99Mwvki/AKVYUIM4U3XrNgqrQiWFt0/img.jpg" loading="lazy" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcGrIg8%2FdJMb99Mwvki%2FAKVYUIM4U3XrNgqrQiWFt0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="1080" data-origin-height="2123" data-is-animation="false"/></span><button class="btn btn-prev"><span class="ico-prev">이전</span></button><button class="btn btn-next"><span class="ico-next">다음</span></button></div> <div class="mark"><span data-index="0">0</span><span data-index="1">1</span><span data-index="2">2</span><span data-index="3">3</span><span data-index="4">4</span></div> </figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="001.채점종료후001.JPG" data-origin-width="1080" data-origin-height="2123"><span data-url="https://blog.kakaocdn.net/dn/bOnYGy/dJMcahcJZo6/vQ5hWBrTyzcsFSDCWaZlCK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bOnYGy/dJMcahcJZo6/vQ5hWBrTyzcsFSDCWaZlCK/img.jpg"><img src="https://blog.kakaocdn.net/dn/bOnYGy/dJMcahcJZo6/vQ5hWBrTyzcsFSDCWaZlCK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbOnYGy%2FdJMcahcJZo6%2FvQ5hWBrTyzcsFSDCWaZlCK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="2123" data-filename="001.채점종료후001.JPG" data-origin-width="1080" data-origin-height="2123"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="001.채점종료후001-1.jpg" data-origin-width="1080" data-origin-height="2123"><span data-url="https://blog.kakaocdn.net/dn/t0VRP/dJMcahcJZo9/xfXQEqhkQ36r1nYHYSGJn0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/t0VRP/dJMcahcJZo9/xfXQEqhkQ36r1nYHYSGJn0/img.jpg"><img src="https://blog.kakaocdn.net/dn/t0VRP/dJMcahcJZo9/xfXQEqhkQ36r1nYHYSGJn0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Ft0VRP%2FdJMcahcJZo9%2FxfXQEqhkQ36r1nYHYSGJn0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="2123" data-filename="001.채점종료후001-1.jpg" data-origin-width="1080" data-origin-height="2123"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="001.채점종료후002.JPG" data-origin-width="1080" data-origin-height="2123"><span data-url="https://blog.kakaocdn.net/dn/3mzvu/dJMcahcJZo7/ju7ITb7jaJSTM4bXDSjKZk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/3mzvu/dJMcahcJZo7/ju7ITb7jaJSTM4bXDSjKZk/img.jpg"><img src="https://blog.kakaocdn.net/dn/3mzvu/dJMcahcJZo7/ju7ITb7jaJSTM4bXDSjKZk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3mzvu%2FdJMcahcJZo7%2Fju7ITb7jaJSTM4bXDSjKZk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="2123" data-filename="001.채점종료후002.JPG" data-origin-width="1080" data-origin-height="2123"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="001.채점종료후003.JPG" data-origin-width="1080" data-origin-height="2123"><span data-url="https://blog.kakaocdn.net/dn/EcsPE/dJMcahKBm7Q/cLCXKN4wxK6EsKFbRtlKEk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/EcsPE/dJMcahKBm7Q/cLCXKN4wxK6EsKFbRtlKEk/img.jpg"><img src="https://blog.kakaocdn.net/dn/EcsPE/dJMcahKBm7Q/cLCXKN4wxK6EsKFbRtlKEk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEcsPE%2FdJMcahKBm7Q%2FcLCXKN4wxK6EsKFbRtlKEk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="2123" data-filename="001.채점종료후003.JPG" data-origin-width="1080" data-origin-height="2123"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="001.채점종료후004.JPG" data-origin-width="1080" data-origin-height="2123"><span data-url="https://blog.kakaocdn.net/dn/cGHpau/dJMcahcJZo8/BOKSQLbm7eJYNy2CMeWJKk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/cGHpau/dJMcahcJZo8/BOKSQLbm7eJYNy2CMeWJKk/img.jpg"><img src="https://blog.kakaocdn.net/dn/cGHpau/dJMcahcJZo8/BOKSQLbm7eJYNy2CMeWJKk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcGHpau%2FdJMcahcJZo8%2FBOKSQLbm7eJYNy2CMeWJKk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="2123" data-filename="001.채점종료후004.JPG" data-origin-width="1080" data-origin-height="2123"/></span></figure> </p> 모두의계산기 모두의계산기 설명서 최매슨생 https://0-1.kr/77 https://0-1.kr/77#entry77comment Wed, 7 Jan 2026 09:45:17 +0900 https://0-1.kr/73 <style> .bizemo-wrap{max-width:720px;margin:0 auto;padding:16px;font-family:-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;background:#f7f7f9;} .bizemo-title{font-size:20px;font-weight:800;margin-bottom:4px;color:#222;} .bizemo-desc{font-size:13px;color:#777;margin-bottom:16px;} .bizemo-toolbar{display:flex;gap:8px;margin-bottom:10px;} .bizemo-search{flex:1;box-sizing:border-box;padding:11px 14px;border:1px solid #ddd;border-radius:10px;font-size:15px;outline:none;} .bizemo-search:focus{border-color:#6c5ce7;} .bizemo-sectionbar{display:flex;justify-content:flex-end;margin-bottom:10px;} .bizemo-toggleall{flex-shrink:0;padding:0 16px;height:36px;border:1px solid #6c5ce7;border-radius:10px;background:#6c5ce7;color:#fff;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;} .bizemo-toggleall:active{background:#5a4bd4;} .bizemo-tray{background:#fff;border:1px dashed #cfc9f5;border-radius:12px;padding:10px 12px;margin-bottom:14px;} .bizemo-tray-row{min-height:36px;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;} .bizemo-tray-empty{font-size:12.5px;color:#aaa;align-self:center;} .bizemo-tray-item{display:inline-flex;align-items:center;justify-content:center;font-size:20px;width:36px;height:36px;background:#f4f2fe;border:1px solid #e0dbfb;border-radius:8px;cursor:pointer;} .bizemo-tray-item:active{transform:scale(0.9);} .bizemo-tray-actions{display:flex;align-items:center;gap:8px;} .bizemo-tray-count{font-size:12px;color:#999;flex:1;} .bizemo-tray-btn{border:none;border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:700;cursor:pointer;} .bizemo-tray-clear{background:#f1f1f4;color:#777;} .bizemo-tray-clear:active{background:#e5e5e9;} .bizemo-tray-copyall{background:#222;color:#fff;} .bizemo-tray-copyall:active{background:#000;} .bizemo-cat{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.06);align-self:start;} #bizemo-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;} @media (max-width:480px){ #bizemo-list{grid-template-columns:1fr;} } .bizemo-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;user-select:none;} .bizemo-head-l{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#333;} .bizemo-count{font-size:12px;color:#aaa;font-weight:400;} .bizemo-arrow{font-size:12px;color:#999;transition:transform .2s;} .bizemo-cat.open .bizemo-arrow{transform:rotate(90deg);} .bizemo-body{max-height:0;overflow:hidden;transition:max-height .25s ease;} .bizemo-cat.open .bizemo-body{max-height:900px;} .bizemo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px;padding:4px 14px 14px;} .bizemo-item{position:relative;display:flex;align-items:center;justify-content:center;font-size:26px;height:52px;border-radius:10px;background:#fafafa;border:1px solid #eee;cursor:pointer;transition:background .15s,transform .1s;} .bizemo-item:active{transform:scale(0.92);} .bizemo-item:hover{background:#f0eefe;border-color:#d8d2fb;} .bizemo-item.copied{background:#e6f9ec;border-color:#8fe0ab;} .bizemo-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#222;color:#fff;padding:10px 18px;border-radius:20px;font-size:13px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:999;} .bizemo-toast.show{opacity:1;transform:translateX(-50%) translateY(0);} .bizemo-hidden{display:none!important;} .bizemo-footer{margin-top:18px;padding:14px;text-align:center;background:#f4f2fe;border-radius:12px;font-size:13.5px;color:#555;} .bizemo-footer strong{color:#6c5ce7;} </style> <div id="bizemo-root"></div> <script id="bizemo-data" type="text/plain">KGZ1bmN0aW9uKCl7CiAgdmFyIENBVFMgPSBbCiAgICB7IG5hbWU6ICfrp5DrqLjrpqwg6riw7Zi4JywgaWNvbnM6IFsn4pa2Jywn4pa3Jywn4pa4Jywn4pa5Jywn4pePJywn4peLJywn4pagJywn4pahJywn4peGJywn4peHJywn4piFJywn4piGJywn4oC7Jywn4p6kJywn4p6UJywn4pyTJywn4peOJywn4peQJywnwrcnXSB9LAogICAgeyBuYW1lOiAn7JuQ7ZiVIOyIq+yekCAoMX4yMCknLCBpY29uczogWyfikaAnLCfikaEnLCfikaInLCfikaMnLCfikaQnLCfikaUnLCfikaYnLCfikacnLCfikagnLCfikaknLCfikaonLCfikasnLCfikawnLCfika0nLCfika4nLCfika8nLCfikbAnLCfikbEnLCfikbInLCfikbMnXSB9LAogICAgeyBuYW1lOiAn7JuQ7ZiVIOyVjO2MjOuysyAoQX5aKScsIGljb25zOiBbJ+KSticsJ+KStycsJ+KSuCcsJ+KSuScsJ+KSuicsJ+KSuycsJ+KSvCcsJ+KSvScsJ+KSvicsJ+KSvycsJ+KTgCcsJ+KTgScsJ+KTgicsJ+KTgycsJ+KThCcsJ+KThScsJ+KThicsJ+KThycsJ+KTiCcsJ+KTiScsJ+KTiicsJ+KTiycsJ+KTjCcsJ+KTjScsJ+KTjicsJ+KTjycsJ+KTkCcsJ+KTkScsJ+KTkicsJ+KTkycsJ+KTlCcsJ+KTlScsJ+KTlicsJ+KTlycsJ+KTmCcsJ+KTmScsJ+KTmicsJ+KTmycsJ+KTnCcsJ+KTnScsJ+KTnicsJ+KTnycsJ+KToCcsJ+KToScsJ+KToicsJ+KToycsJ+KTpCcsJ+KTpScsJ+KTpicsJ+KTpycsJ+KTqCcsJ+KTqSddIH0sCiAgICB7IG5hbWU6ICfroZzrp4gg7Iir7J6QJywgaWNvbnM6IFsn4oWgJywn4oWhJywn4oWiJywn4oWjJywn4oWkJywn4oWlJywn4oWmJywn4oWnJywn4oWoJywn4oWpJywn4oWqJywn4oWrJywn4oWwJywn4oWxJywn4oWyJywn4oWzJywn4oW0Jywn4oW1Jywn4oW2Jywn4oW3Jywn4oW4Jywn4oW5Jywn4oW6Jywn4oW7J10gfSwKCiAgICB7IG5hbWU6ICfrj4ggLyDsnqzrrLQnLCBpY29uczogWyfwn5KwJywn8J+StScsJ/CfkrQnLCfwn5K2Jywn8J+StycsJ/CfqpknLCfwn5K4Jywn8J+SsycsJ/Cfp74nLCfwn5K5Jywn8J+PpicsJ/CfkrInLCfwn6SRJywn8J+SsScsJ/Cfko4nXSB9LAogICAgeyBuYW1lOiAn6re4656Y7ZSEIC8g642w7J207YSwJywgaWNvbnM6IFsn8J+TiCcsJ/Cfk4knLCfwn5OKJywn8J+nricsJ/CflKInLCfwn5OQJywn8J+TjycsJ/Cfl4LvuI8nLCfwn5OHJ10gfSwKICAgIHsgbmFtZTogJ+yEseyepSAvIOyghOuetScsIGljb25zOiBbJ/CfmoAnLCfwn46vJywn8J+PhicsJ/CfpYcnLCfwn6WIJywn8J+liScsJ/CflJ0nLCfirIbvuI8nLCfirIfvuI8nLCfihpfvuI8nLCfihpjvuI8nLCfwn5O2Jywn8J+nlycsJ/CfqpwnLCfwn46W77iPJywn8J+PhSddIH0sCiAgICB7IG5hbWU6ICfslYTsnbTrlJTslrQgLyDtmIHsi6AnLCBpY29uczogWyfwn5KhJywn8J+noCcsJ+KaoScsJ+KcqCcsJ/CflKYnLCfwn5SNJywn8J+UjicsJ/CflKwnLCfwn6eqJywn8J+nqScsJ/Cfm6DvuI8nLCfimpnvuI8nLCfwn5SnJywn8J+UqCddIH0sCiAgICB7IG5hbWU6ICftjIAgLyDsgqzrnowgKOyXheustCknLCBpY29uczogWyfwn5GlJywn8J+RpCcsJ/CfpJ0nLCfwn5mLJywn8J+Zi+KAjeKZgu+4jycsJ/CfmYvigI3imYDvuI8nLCfwn6eR4oCN8J+SvCcsJ/CfkajigI3wn5K8Jywn8J+RqeKAjfCfkrwnLCfwn5ej77iPJywn8J+RjycsJ/Cfp5HigI3wn4+rJywn8J+RqOKAjfCfj6snLCfwn5Gp4oCN8J+PqycsJ/Cfp5HigI3wn5K7Jywn8J+RqOKAjfCfkrsnLCfwn5Gp4oCN8J+SuyddIH0sCiAgICB7IG5hbWU6ICfsi5zqsIQgLyDsnbzsoJUnLCBpY29uczogWyfij7AnLCfij7HvuI8nLCfij7MnLCfijJsnLCfwn5OFJywn8J+Xk++4jycsJ/CflJQnLCfwn5SVJywn4o+y77iPJywn8J+VkCcsJ/CflZEnLCfwn5WSJywn8J+VkycsJ/CflZQnLCfwn5WVJ10gfSwKICAgIHsgbmFtZTogJ+uqqe2RnCAvIOyytO2BrCcsIGljb25zOiBbJ/Cfjq8nLCfinIUnLCfinJTvuI8nLCfimJHvuI8nLCfwn5OMJywn8J+TjScsJ/Cfj4EnLCfwn5SWJywn4piR77iPJywn8J+ItCddIH0sCiAgICB7IG5hbWU6ICfshozthrUgLyDrhKTtirjsm4ztgawnLCBpY29uczogWyfwn5OiJywn8J+ToycsJ/CfkqwnLCfwn5eo77iPJywn8J+Xr++4jycsJ/Cfk6cnLCfwn5OoJywn8J+TqScsJ/Cfk7EnLCfimI7vuI8nLCfwn5OeJywn8J+MkCcsJ/CflJcnLCfwn5OhJywn8J+TriddIH0sCiAgICB7IG5hbWU6ICfqsr3qs6AgLyDso7zsnZgnLCBpY29uczogWyfimqDvuI8nLCfinZcnLCfinZUnLCfinZMnLCfinZQnLCfinYwnLCfwn5qrJywn8J+UtCcsJ/Cfn6EnLCfwn5uRJywn4puUJywn4pii77iPJywn4pij77iPJ10gfSwKICAgIHsgbmFtZTogJ+usuOyEnCAvIOuztOqzoCcsIGljb25zOiBbJ/Cfk4QnLCfwn5ODJywn8J+TkScsJ/Cfk4snLCfwn5eC77iPJywn8J+TgScsJ/Cfk4InLCfwn5aH77iPJywn8J+TjicsJ/Cfl4PvuI8nLCfwn5OcJywn8J+Xnu+4jycsJ/Cfk7AnLCfwn6e3J10gfSwKICAgIHsgbmFtZTogJ+qxtOusvCAvIOyCsOyXhScsIGljb25zOiBbJ/Cfj6InLCfwn4+tJywn8J+PrCcsJ/Cfj6onLCfwn4+X77iPJywn8J+Pm++4jycsJ/Cfj6snLCfwn4+lJywn8J+PqCcsJ/Cfj6AnLCfwn4+hJywn4pu9Jywn8J+apyddIH0sCgogICAgeyBuYW1lOiAn7ZGc7KCVIC8g7Ja86rW0ICjquI3soJUpJywgaWNvbnM6IFsn8J+YgCcsJ/CfmIEnLCfwn5iCJywn8J+koycsJ/CfmIonLCfwn5iNJywn8J+kqScsJ/CfmI4nLCfwn6WzJywn8J+YhycsJ/CfmYInLCfwn5iJJywn8J+YiycsJ/CfmIQnLCfwn5iDJywn8J+lsCcsJ/CfmJgnLCfwn6SXJywn8J+klCcsJ/CfpbInXSB9LAogICAgeyBuYW1lOiAn7ZGc7KCVIC8g7Ja86rW0ICjrtoDsoJUs6riw7YOAKScsIGljb25zOiBbJ/CfmIUnLCfwn5iiJywn8J+YrScsJ/CfmKEnLCfwn5ixJywn8J+YtCcsJ/CfmYQnLCfwn6W6Jywn8J+YpCcsJ/CfmKknLCfwn5irJywn8J+YlicsJ/CfmJ4nLCfwn5iUJywn8J+YsCcsJ/CfmKgnLCfwn6SvJywn8J+koicsJ/CfpJInLCfwn6SVJywn8J+YtycsJ/CfpbYnLCfwn6W1Jywn8J+YtScsJ/CfpJAnXSB9LAogICAgeyBuYW1lOiAn7IaQIC8g7KCc7Iqk7LKYJywgaWNvbnM6IFsn8J+RjScsJ/CfkY4nLCfwn5GPJywn8J+ZjCcsJ/CfpJ0nLCfwn5mPJywn4pyM77iPJywn8J+knicsJ/CfkYwnLCfwn6SZJywn8J+SqicsJ/CflpDvuI8nLCfinIsnLCfwn5GLJywn4pid77iPJywn8J+RhicsJ/CfkYcnLCfwn5GIJywn8J+RiScsJ+KciicsJ/CfkYonLCfwn6SfJywn8J+rticsJ/CfpLInXSB9LAogICAgeyBuYW1lOiAn66q4IC8g7IKs656MJywgaWNvbnM6IFsn8J+nkScsJ/CfkbYnLCfwn6eSJywn8J+RpicsJ/CfkacnLCfwn6eR4oCN8J+msScsJ/Cfp5HigI3wn6awJywn8J+nkycsJ/CfkbQnLCfwn5G1Jywn8J+aticsJ/Cfj4MnLCfwn6eNJywn8J+njicsJ/CfkaQnLCfwn5GlJ10gfSwKICAgIHsgbmFtZTogJ+uniOydjCAvIO2VmO2KuCcsIGljb25zOiBbJ+KdpO+4jycsJ/Cfp6EnLCfwn5KbJywn8J+SmicsJ/CfkpknLCfwn5KcJywn8J+WpCcsJ/CfpI0nLCfwn6SOJywn8J+SlCcsJ+KdpO+4j+KAjfCflKUnLCfwn5KVJywn8J+SnicsJ/CfkpMnLCfwn5KXJywn8J+SlicsJ/CfkpgnLCfwn5KdJywn8J+SnyddIH0sCiAgICB7IG5hbWU6ICfrj5nrrLwgKOycoeyDgSknLCBpY29uczogWyfwn5C2Jywn8J+QsScsJ/CfkLsnLCfwn5C8Jywn8J+mgScsJ/CfkK8nLCfwn5CwJywn8J+QuCcsJ/CfkLUnLCfwn5C0Jywn8J+QricsJ/CfkLcnLCfwn5CtJywn8J+QuScsJ/CfkKgnLCfwn5C6Jywn8J+miicsJ/Cfpp0nLCfwn5CXJywn8J+mjCcsJ/CfkJAnLCfwn5CRJ10gfSwKICAgIHsgbmFtZTogJ+uPmeusvCAo7IOIIC8g6rOk7LapKScsIGljb25zOiBbJ/CfpoknLCfwn5CUJywn8J+QpicsJ/CfpoUnLCfwn6aGJywn8J+moicsJ/CfkKcnLCfwn6acJywn8J+QnScsJ/CfkJsnLCfwn6aLJywn8J+QnicsJ/CfkJwnLCfwn5W377iPJywn8J+QjCddIH0sCiAgICB7IG5hbWU6ICfrj5nrrLwgKOuwlOuLpCknLCBpY29uczogWyfwn5CfJywn8J+QoCcsJ/CfkKEnLCfwn5CsJywn8J+QsycsJ/CfkIsnLCfwn6aIJywn8J+QmScsJ/CfppEnLCfwn6aAJywn8J+mnicsJ/CfkKInLCfwn5CKJ10gfSwKICAgIHsgbmFtZTogJ+yLneusvCAvIOyekOyXsCcsIGljb25zOiBbJ/CfjLMnLCfwn4yyJywn8J+MtCcsJ/CfjLUnLCfwn4y/Jywn4piY77iPJywn8J+NgCcsJ/CfjLgnLCfwn4y8Jywn8J+MuycsJ/CfjLknLCfwn4y3Jywn8J+MsScsJ/CfjYMnLCfwn42CJywn8J+NgScsJ/CfjL4nLCfwn5KQJ10gfSwKICAgIHsgbmFtZTogJ+qzvOydvCAvIOyxhOyGjCcsIGljb25zOiBbJ/CfjY4nLCfwn42KJywn8J+NiycsJ/CfjYcnLCfwn42TJywn8J+NkScsJ/CfjY0nLCfwn42MJywn8J+NiScsJ/CfjYgnLCfwn6WdJywn8J+NhScsJ/CfpaYnLCfwn6WVJywn8J+MvScsJ/CfpZQnLCfwn6eEJywn8J+nhSddIH0sCiAgICB7IG5hbWU6ICfsnYzsi50nLCBpY29uczogWyfwn42VJywn8J+NlCcsJ/CfjZ8nLCfwn4ytJywn8J+NnCcsJ/CfjbEnLCfwn42jJywn8J+NmScsJ/CfjZonLCfwn42eJywn8J+lkCcsJ/CfpaonLCfwn4yuJywn8J+MrycsJ/CfjbInLCfwn6WXJywn8J+NsycsJ/CfpZMnLCfwn42XJywn8J+NliddIH0sCiAgICB7IG5hbWU6ICfrlJTsoIDtirggLyDsnYzro4wnLCBpY29uczogWyfwn42wJywn8J+OgicsJ/CfjaknLCfwn42qJywn8J+NqycsJ/CfjawnLCfwn42tJywn8J+NricsJ/CfjaYnLCfwn42oJywn4piVJywn8J+NtScsJ/Cfp4MnLCfwn6WkJywn8J+NuicsJ/CfjbsnLCfwn423Jywn8J+lgicsJ/Cfjb4nLCfwn6eLJ10gfSwKICAgIHsgbmFtZTogJ+q1kO2GtSAvIOydtOuPmScsIGljb25zOiBbJ+KciO+4jycsJ/CfmpcnLCfwn5qVJywn8J+amScsJ/CfmownLCfwn5qOJywn8J+ahicsJ/CfmoQnLCfwn5qHJywn8J+btScsJ/CfmrInLCfwn5qAJywn4pu1Jywn8J+aoicsJ/Cfm7PvuI8nLCfwn5qBJywn8J+anCcsJ/CfmqgnXSB9LAogICAgeyBuYW1lOiAn7J6l7IaMIC8g656c65Oc66eI7YGsJywgaWNvbnM6IFsn8J+Plu+4jycsJ/Cfj5TvuI8nLCfwn5e9Jywn8J+XvCcsJ/Cfj68nLCfwn4+d77iPJywn8J+Pn++4jycsJ/CfjqEnLCfwn46iJywn4puw77iPJywn8J+MiycsJ/Cfj5XvuI8nLCfwn6ezJywn8J+Xuu+4jycsJ/Cfp60nXSB9LAogICAgeyBuYW1lOiAn7ZWY64qYIC8g7Jqw7KO8JywgaWNvbnM6IFsn4piA77iPJywn8J+MpO+4jycsJ+KbhScsJ+KYge+4jycsJ/CfjKfvuI8nLCfim4jvuI8nLCfwn4yp77iPJywn4p2E77iPJywn8J+Mqu+4jycsJ/CfjIgnLCfwn4yZJywn4q2QJywn8J+MnycsJ+KcqCcsJ+KYhO+4jycsJ/CfqpAnLCfwn4yNJywn8J+MjicsJ/CfjI8nLCfwn4yMJ10gfSwKICAgIHsgbmFtZTogJ+uCoOyUqCAvIOyekOyXsO2YhOyDgScsIGljb25zOiBbJ/CflKUnLCfwn5KnJywn8J+MiicsJ/CfkqYnLCfwn4yr77iPJywn4piUJywn4pqhJywn8J+Moe+4jycsJ/Cfp4onXSB9LAogICAgeyBuYW1lOiAn7Iqk7Y+s7LigIC8g7Zmc64+ZJywgaWNvbnM6IFsn4pq9Jywn8J+PgCcsJ+KavicsJ/Cfjr4nLCfwn4+IJywn8J+PkCcsJ/Cfj5MnLCfwn4+4Jywn8J+liicsJ/CfpYsnLCfim7MnLCfwn4+5Jywn8J+OoycsJ/Cfj4onLCfwn5q0Jywn8J+Pi++4jycsJ/Cfp5gnLCfwn4+GJ10gfSwKICAgIHsgbmFtZTogJ+qyjOyehCAvIOyYpOudvScsIGljb25zOiBbJ/Cfjq4nLCfwn46yJywn8J+OsCcsJ/Cfg48nLCfwn46vJywn8J+nqScsJ/CfjrMnLCfwn46xJywn8J+Vue+4jycsJ/CfjqgnLCfwn46tJywn8J+OqiddIH0sCiAgICB7IG5hbWU6ICfsnYzslYUgLyDslYXquLAnLCBpY29uczogWyfwn461Jywn8J+OticsJ/CfjqQnLCfwn46nJywn8J+OvCcsJ/CfjrknLCfwn464Jywn8J+OuycsJ/CfpYEnLCfwn466Jywn8J+TryddIH0sCiAgICB7IG5hbWU6ICfsnZjrpZggLyDtjKjshZgnLCBpY29uczogWyfwn5GVJywn8J+RlCcsJ/CfkZcnLCfwn5GWJywn8J+npScsJ/CfkZgnLCfwn5GgJywn8J+RnycsJ/CfkZ4nLCfwn6eiJywn8J+RkicsJ/CfjqknLCfwn5GcJywn8J+OkicsJ/CfkZMnLCfwn5W277iPJywn8J+SjScsJ/CfkoQnXSB9LAogICAgeyBuYW1lOiAn7IKs66y0IC8g7ZWZ6rWQJywgaWNvbnM6IFsn8J+SuycsJ+KMqO+4jycsJ/CflqXvuI8nLCfwn5ao77iPJywn8J+Wse+4jycsJ+Kcj++4jycsJ/CflorvuI8nLCfwn5aL77iPJywn8J+TmicsJ/Cfk5YnLCfwn5OUJywn8J+TkycsJ/Cfk5InLCfwn46TJywn4pyC77iPJywn8J+TkCcsJ/Cfk4wnLCfwn5aM77iPJ10gfSwKICAgIHsgbmFtZTogJ+yghOyekCAvIOyCrOusvCcsIGljb25zOiBbJ/Cfk7cnLCfwn5O4Jywn8J+OpScsJ/Cfk7onLCfwn5O7Jywn8J+UiycsJ/CflIwnLCfwn5KhJywn8J+UpicsJ/Cfla/vuI8nLCfwn5SRJywn8J+UkicsJ/CflJMnLCfwn6eyJywn8J+nsCcsJ+KPsu+4jyddIH0sCiAgICB7IG5hbWU6ICfsnZjro4wgLyDqs7ztlZknLCBpY29uczogWyfwn5KKJywn8J+SiScsJ/CfqbonLCfwn6esJywn8J+UrCcsJ/Cfp6snLCfwn6agJywn8J+puScsJ/CfjKHvuI8nLCfimpfvuI8nXSB9LAogICAgeyBuYW1lOiAn6rOE7KCIIC8g6riw64WQ7J28JywgaWNvbnM6IFsn8J+OiScsJ/CfjoonLCfwn46IJywn8J+OgScsJ/CfjoQnLCfwn46DJywn8J+nqCcsJ/CfjoYnLCfwn46HJywn8J+npycsJ/Cfjo8nLCfwn46QJ10gfSwKICAgIHsgbmFtZTogJ+q1req4sCcsIGljb25zOiBbJ/Cfh7Dwn4e3Jywn8J+HuvCfh7gnLCfwn4ev8J+HtScsJ/Cfh6jwn4ezJywn8J+HrPCfh6cnLCfwn4er8J+HtycsJ/Cfh6nwn4eqJywn8J+HrvCfh7knLCfwn4eq8J+HuCcsJ/Cfh7fwn4e6Jywn8J+HqPCfh6YnLCfwn4em8J+HuicsJ/Cfh6fwn4e3Jywn8J+HrvCfh7MnLCfwn4ey8J+HvScsJ/Cfh67wn4epJywn8J+HufCfh60nLCfwn4e78J+HsycsJ/Cfh7Xwn4etJywn8J+HuPCfh6wnLCfwn4ey8J+HvicsJ/Cfh7Pwn4exJywn8J+HuPCfh6onLCfwn4eo8J+HrScsJ/Cfh6bwn4e5Jywn8J+Hp/Cfh6onLCfwn4e18J+HuScsJ/Cfh6zwn4e3Jywn8J+HtfCfh7EnLCfwn4e58J+HtycsJ/Cfh7jwn4emJywn8J+HpvCfh6onLCfwn4eu8J+HsScsJ/Cfh6rwn4esJywn8J+Hv/Cfh6YnLCfwn4ez8J+HrCcsJ/Cfh7Dwn4eqJywn8J+HpvCfh7cnLCfwn4eo8J+HsScsJ/Cfh7Xwn4eqJywn8J+Hs/Cfh78nLCfwn4ez8J+HtCcsJ/Cfh6nwn4ewJywn8J+Hq/Cfh64nLCfwn4eu8J+HqicsJ/Cfh63wn4ewJywn8J+HufCfh7wnLCfwn4eq8J+HuicsJ/Cfh7rwn4ezJ10gfSwKCiAgICB7IG5hbWU6ICfrj4TtmJUgKOy7rOufrCDssYTsm4ApJywgaWNvbnM6IFsn8J+UtCcsJ/Cfn6AnLCfwn5+hJywn8J+foicsJ/CflLUnLCfwn5+jJywn4pqrJywn4pqqJywn8J+fpScsJ/Cfn6cnLCfwn5+oJywn8J+fqScsJ/Cfn6YnLCfwn5+qJywn4qybJywn4qycJywn8J+UticsJ/CflLcnLCfwn5S4Jywn8J+UuSddIH0sCiAgICB7IG5hbWU6ICfrj4TtmJUgKOudvOyduCAvIOyLrO2UjCknLCBpY29uczogWyfil48nLCfil4snLCfilqAnLCfilqEnLCfilrInLCfilrMnLCfilrwnLCfilr0nLCfil4YnLCfil4cnLCfimIUnLCfimIYnLCfil44nLCfil5AnLCfil5EnLCfilqMnLCfilqQnLCfilqUnLCfilqYnLCfilqcnLCfilqgnLCfilqknLCfilqonLCfilqsnXSB9LAogICAgeyBuYW1lOiAn7ZmU7IK07ZGcJywgaWNvbnM6IFsn4oaSJywn4oaQJywn4oaRJywn4oaTJywn4oaUJywn4oaVJywn4oaXJywn4oaYJywn4oaZJywn4oaWJywn4oeSJywn4oeQJywn4oeRJywn4oeTJywn4oeUJywn4p6UJywn4p6kJywn4p6cJywn4p6hJywn4qyFJywn4qyGJywn4qyHJywn4qS0Jywn4qS1J10gfSwKICAgIHsgbmFtZTogJ+yImO2VmSAvIOuLqOychCDquLDtmLgnLCBpY29uczogWyfCsScsJ8OXJywnw7cnLCfiiaAnLCfiiaQnLCfiiaUnLCfiiJ4nLCfiiLQnLCfiiJonLCfiiJEnLCfiiI8nLCfiiKsnLCfCsCcsJ+KAsicsJ+KAsycsJ+KEgycsJ+KEiScsJ8OFJywn77yFJywn4oCwJ10gfSwKICAgIHsgbmFtZTogJ+2ZlO2PkCDquLDtmLgnLCBpY29uczogWyfigqknLCckJywn4oKsJywnwqMnLCfCpScsJ8KiJywn4oK5Jywn4oK9JywnwqQnXSB9LAogICAgeyBuYW1lOiAn6rSE7Zi4IC8g7J247Jqp67aA7Zi4JywgaWNvbnM6IFsn44CMJywn44CNJywn44COJywn44CPJywn44CQJywn44CRJywn44CUJywn44CVJywn44CKJywn44CLJywn44CIJywn44CJJywn4oCYJywn4oCZJywn4oCcJywn4oCdJ10gfSwKICAgIHsgbmFtZTogJ+q4sO2DgCDtirnsiJjquLDtmLgnLCBpY29uczogWyfimI4nLCfimI8nLCfjib8nLCfihJYnLCfjiJwnLCfihKInLCfihKEnLCfCpycsJ8K2Jywn4oCgJywn4oChJywn4pmgJywn4pmjJywn4pmlJywn4pmmJywn4pmkJywn4pmhJywn4pmnJywn4oqZJywn4peIJywn4paSJywn44+HJywn44+CJywn44+YJywn4pivJywn4piuJywn4pi6Jywn4pi7J10gfQogIF07CgogIHZhciByb290ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2JpemVtby1yb290Jyk7CiAgdmFyIGh0bWwgPSAnPGRpdiBjbGFzcz0iYml6ZW1vLXdyYXAiPic7CiAgaHRtbCArPSAnPGRpdiBjbGFzcz0iYml6ZW1vLXRpdGxlIj7wn5OLIOyciOuPhOyasCDsnbTrqqjti7DsvZgg7KCE67aA67O06riwPC9kaXY+JzsKICBodG1sICs9ICc8ZGl2IGNsYXNzPSJiaXplbW8tZGVzYyI+64iM65+s7IScIOuzteyCrCDihpIgUFBUL+2VnOq4gC/rrLjshJzsl5Ag67CU66GcIOu2meyXrOuEo+q4sCAo7KCA7J6R6raMIOqxseyglSDsl4bripQg7Jyg64uI7L2U65OcIOusuOyekOyeheuLiOuLpCk8L2Rpdj4nOwogIGh0bWwgKz0gJzxkaXYgY2xhc3M9ImJpemVtby10b29sYmFyIj4nOwogIGh0bWwgKz0gJzxpbnB1dCB0eXBlPSJ0ZXh0IiBjbGFzcz0iYml6ZW1vLXNlYXJjaCIgaWQ9ImJpemVtby1zZWFyY2giIHBsYWNlaG9sZGVyPSLsubTthYzqs6Drpqwg6rKA7IOJICjsmIg6IOuPiCwg7ZmU7IK07ZGcLCDtkZzsoJUpIj4nOwogIGh0bWwgKz0gJzwvZGl2Pic7CgogIGh0bWwgKz0gJzxkaXYgY2xhc3M9ImJpemVtby10cmF5IiBpZD0iYml6ZW1vLXRyYXkiPic7CiAgaHRtbCArPSAnPGRpdiBjbGFzcz0iYml6ZW1vLXRyYXktcm93IiBpZD0iYml6ZW1vLXRyYXktcm93Ij48c3BhbiBjbGFzcz0iYml6ZW1vLXRyYXktZW1wdHkiIGlkPSJiaXplbW8tdHJheS1lbXB0eSI+7J2066qo7Yuw7L2Y7J2EIOuIhOultOuptCDsl6zquLDsl5Ag7Iic7ISc64yA66GcIOyMk+yXrOyalCDihpI8L3NwYW4+PC9kaXY+JzsKICBodG1sICs9ICc8ZGl2IGNsYXNzPSJiaXplbW8tdHJheS1hY3Rpb25zIj4nOwogIGh0bWwgKz0gJzxzcGFuIGNsYXNzPSJiaXplbW8tdHJheS1jb3VudCIgaWQ9ImJpemVtby10cmF5LWNvdW50Ij48L3NwYW4+JzsKICBodG1sICs9ICc8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJpemVtby10cmF5LWJ0biBiaXplbW8tdHJheS1jbGVhciIgaWQ9ImJpemVtby10cmF5LWNsZWFyIj7sp4DsmrDquLA8L2J1dHRvbj4nOwogIGh0bWwgKz0gJzxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYml6ZW1vLXRyYXktYnRuIGJpemVtby10cmF5LWNvcHlhbGwiIGlkPSJiaXplbW8tdHJheS1jb3B5YWxsIj7soITssrQg67O17IKsPC9idXR0b24+JzsKICBodG1sICs9ICc8L2Rpdj4nOwogIGh0bWwgKz0gJzwvZGl2Pic7CgogIGh0bWwgKz0gJzxkaXYgY2xhc3M9ImJpemVtby1zZWN0aW9uYmFyIj48YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJpemVtby10b2dnbGVhbGwiIGlkPSJiaXplbW8tdG9nZ2xlYWxsIj7shLnshZgg7KCE7LK0IOyXtOq4sDwvYnV0dG9uPjwvZGl2Pic7CgogIGh0bWwgKz0gJzxkaXYgaWQ9ImJpemVtby1saXN0Ij4nOwoKICBmb3IgKHZhciBpID0gMDsgaSA8IENBVFMubGVuZ3RoOyBpKyspIHsKICAgIHZhciBjYXQgPSBDQVRTW2ldOwogICAgaHRtbCArPSAnPGRpdiBjbGFzcz0iYml6ZW1vLWNhdCIgZGF0YS1uYW1lPSInICsgY2F0Lm5hbWUgKyAnIj4nOwogICAgaHRtbCArPSAnPGRpdiBjbGFzcz0iYml6ZW1vLWhlYWQiIGRhdGEtaWR4PSInICsgaSArICciPic7CiAgICBodG1sICs9ICc8ZGl2IGNsYXNzPSJiaXplbW8taGVhZC1sIj4nICsgY2F0Lm5hbWUgKyAnIDxzcGFuIGNsYXNzPSJiaXplbW8tY291bnQiPignICsgY2F0Lmljb25zLmxlbmd0aCArICcpPC9zcGFuPjwvZGl2Pic7CiAgICBodG1sICs9ICc8ZGl2IGNsYXNzPSJiaXplbW8tYXJyb3ciPuKWtjwvZGl2Pic7CiAgICBodG1sICs9ICc8L2Rpdj4nOwogICAgaHRtbCArPSAnPGRpdiBjbGFzcz0iYml6ZW1vLWJvZHkiPjxkaXYgY2xhc3M9ImJpemVtby1ncmlkIj4nOwogICAgZm9yICh2YXIgaiA9IDA7IGogPCBjYXQuaWNvbnMubGVuZ3RoOyBqKyspIHsKICAgICAgaHRtbCArPSAnPGRpdiBjbGFzcz0iYml6ZW1vLWl0ZW0iIGRhdGEtaWNvbj0iJyArIGNhdC5pY29uc1tqXSArICciPicgKyBjYXQuaWNvbnNbal0gKyAnPC9kaXY+JzsKICAgIH0KICAgIGh0bWwgKz0gJzwvZGl2PjwvZGl2PjwvZGl2Pic7CiAgfQoKICBodG1sICs9ICc8L2Rpdj48L2Rpdj48ZGl2IGNsYXNzPSJiaXplbW8tdG9hc3QiIGlkPSJiaXplbW8tdG9hc3QiPuuzteyCrOuQqCE8L2Rpdj4nOwogIHJvb3QuaW5uZXJIVE1MID0gaHRtbDsKCiAgdmFyIGZvb3RlciA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2RpdicpOwogIGZvb3Rlci5jbGFzc05hbWUgPSAnYml6ZW1vLWZvb3Rlcic7CiAgZm9vdGVyLmlubmVySFRNTCA9ICfwn5KhIOydtOuqqO2LsOy9mOydtCDsg53qsIEg7JWIIOuCoCDrlZAgPHN0cm9uZz4wLTEua3IvNzM8L3N0cm9uZz4g7Jy866GcIOygkeyGje2VmOyEuOyalCc7CiAgcm9vdC5xdWVyeVNlbGVjdG9yKCcuYml6ZW1vLXdyYXAnKS5hcHBlbmRDaGlsZChmb290ZXIpOwoKICBmdW5jdGlvbiBjb3B5VGV4dCh0ZXh0KSB7CiAgICBpZiAobmF2aWdhdG9yLmNsaXBib2FyZCAmJiBuYXZpZ2F0b3IuY2xpcGJvYXJkLndyaXRlVGV4dCkgewogICAgICBuYXZpZ2F0b3IuY2xpcGJvYXJkLndyaXRlVGV4dCh0ZXh0KS5jYXRjaChmdW5jdGlvbigpeyBmYWxsYmFja0NvcHkodGV4dCk7IH0pOwogICAgfSBlbHNlIHsKICAgICAgZmFsbGJhY2tDb3B5KHRleHQpOwogICAgfQogIH0KICBmdW5jdGlvbiBmYWxsYmFja0NvcHkodGV4dCkgewogICAgdmFyIHRhID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgndGV4dGFyZWEnKTsKICAgIHRhLnZhbHVlID0gdGV4dDsKICAgIHRhLnN0eWxlLnBvc2l0aW9uID0gJ2ZpeGVkJzsKICAgIHRhLnN0eWxlLmxlZnQgPSAnLTk5OTlweCc7CiAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHRhKTsKICAgIHRhLnNlbGVjdCgpOwogICAgdHJ5IHsgZG9jdW1lbnQuZXhlY0NvbW1hbmQoJ2NvcHknKTsgfSBjYXRjaCAoZSkge30KICAgIGRvY3VtZW50LmJvZHkucmVtb3ZlQ2hpbGQodGEpOwogIH0KCiAgdmFyIHRvYXN0VGltZXIgPSBudWxsOwogIGZ1bmN0aW9uIHNob3dUb2FzdChtc2cpIHsKICAgIHZhciB0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2JpemVtby10b2FzdCcpOwogICAgdC50ZXh0Q29udGVudCA9IG1zZzsKICAgIHQuY2xhc3NOYW1lID0gJ2JpemVtby10b2FzdCBzaG93JzsKICAgIGlmICh0b2FzdFRpbWVyKSBjbGVhclRpbWVvdXQodG9hc3RUaW1lcik7CiAgICB0b2FzdFRpbWVyID0gc2V0VGltZW91dChmdW5jdGlvbigpeyB0LmNsYXNzTmFtZSA9ICdiaXplbW8tdG9hc3QnOyB9LCAxMTAwKTsKICB9CgogIC8vIOyEoO2DnSDtirjroIjsnbQgKOyInOywqCDshKDtg50gLT4g7ZWc67KI7JeQIOuzteyCrCkKICB2YXIgc2VsZWN0ZWQgPSBbXTsKICB2YXIgdHJheVJvdyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdiaXplbW8tdHJheS1yb3cnKTsKICB2YXIgdHJheUNvdW50ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2JpemVtby10cmF5LWNvdW50Jyk7CgogIGZ1bmN0aW9uIHJlbmRlclRyYXkoKSB7CiAgICBpZiAoc2VsZWN0ZWQubGVuZ3RoID09PSAwKSB7CiAgICAgIHRyYXlSb3cuaW5uZXJIVE1MID0gJzxzcGFuIGNsYXNzPSJiaXplbW8tdHJheS1lbXB0eSI+7J2066qo7Yuw7L2Y7J2EIOuIhOultOuptCDsl6zquLDsl5Ag7Iic7ISc64yA66GcIOyMk+yXrOyalCDihpI8L3NwYW4+JzsKICAgICAgdHJheUNvdW50LnRleHRDb250ZW50ID0gJyc7CiAgICAgIHJldHVybjsKICAgIH0KICAgIHZhciBoID0gJyc7CiAgICBmb3IgKHZhciB0ID0gMDsgdCA8IHNlbGVjdGVkLmxlbmd0aDsgdCsrKSB7CiAgICAgIGggKz0gJzxzcGFuIGNsYXNzPSJiaXplbW8tdHJheS1pdGVtIiBkYXRhLXRpZHg9IicgKyB0ICsgJyI+JyArIHNlbGVjdGVkW3RdICsgJzwvc3Bhbj4nOwogICAgfQogICAgdHJheVJvdy5pbm5lckhUTUwgPSBoOwogICAgdHJheUNvdW50LnRleHRDb250ZW50ID0gc2VsZWN0ZWQubGVuZ3RoICsgJ+qwnCDshKDtg53rkKgnOwogIH0KCiAgdHJheVJvdy5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uKGUpewogICAgdmFyIHRhcmdldCA9IGUudGFyZ2V0OwogICAgaWYgKHRhcmdldC5jbGFzc05hbWUgJiYgdGFyZ2V0LmNsYXNzTmFtZS5pbmRleE9mKCdiaXplbW8tdHJheS1pdGVtJykgIT09IC0xKSB7CiAgICAgIHZhciB0aWR4ID0gcGFyc2VJbnQodGFyZ2V0LmdldEF0dHJpYnV0ZSgnZGF0YS10aWR4JyksIDEwKTsKICAgICAgc2VsZWN0ZWQuc3BsaWNlKHRpZHgsIDEpOwogICAgICByZW5kZXJUcmF5KCk7CiAgICB9CiAgfSk7CgogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdiaXplbW8tdHJheS1jbGVhcicpLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24oKXsKICAgIHNlbGVjdGVkID0gW107CiAgICByZW5kZXJUcmF5KCk7CiAgfSk7CgogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdiaXplbW8tdHJheS1jb3B5YWxsJykuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbigpewogICAgaWYgKHNlbGVjdGVkLmxlbmd0aCA9PT0gMCkgeyBzaG93VG9hc3QoJ+yEoO2DneuQnCDsnbTrqqjti7DsvZjsnbQg7JeG7Ja07JqUJyk7IHJldHVybjsgfQogICAgdmFyIGNvbWJpbmVkID0gc2VsZWN0ZWQuam9pbignJyk7CiAgICBjb3B5VGV4dChjb21iaW5lZCk7CiAgICBzaG93VG9hc3Qoc2VsZWN0ZWQubGVuZ3RoICsgJ+qwnCDtlZzrsojsl5Ag67O17IKs65CoIScpOwogIH0pOwoKICB2YXIgbGlzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdiaXplbW8tbGlzdCcpOwogIGxpc3QuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbihlKXsKICAgIHZhciB0YXJnZXQgPSBlLnRhcmdldDsKICAgIGlmICh0YXJnZXQuY2xhc3NOYW1lICYmIHRhcmdldC5jbGFzc05hbWUuaW5kZXhPZignYml6ZW1vLWhlYWQnKSAhPT0gLTEpIHsKICAgICAgdmFyIHBhcmVudCA9IHRhcmdldC5wYXJlbnROb2RlOwogICAgICBwYXJlbnQuY2xhc3NOYW1lID0gcGFyZW50LmNsYXNzTmFtZS5pbmRleE9mKCdvcGVuJykgIT09IC0xID8gJ2JpemVtby1jYXQnIDogJ2JpemVtby1jYXQgb3Blbic7CiAgICAgIHJldHVybjsKICAgIH0KICAgIGlmICh0YXJnZXQuY2xhc3NOYW1lICYmIHRhcmdldC5jbGFzc05hbWUuaW5kZXhPZignYml6ZW1vLWl0ZW0nKSAhPT0gLTEpIHsKICAgICAgdmFyIGljb24gPSB0YXJnZXQuZ2V0QXR0cmlidXRlKCdkYXRhLWljb24nKTsKICAgICAgY29weVRleHQoaWNvbik7CiAgICAgIHNob3dUb2FzdChpY29uICsgJyDrs7XsgqzrkKghJyk7CiAgICAgIHRhcmdldC5jbGFzc05hbWUgPSAnYml6ZW1vLWl0ZW0gY29waWVkJzsKICAgICAgc2V0VGltZW91dChmdW5jdGlvbigpeyB0YXJnZXQuY2xhc3NOYW1lID0gJ2JpemVtby1pdGVtJzsgfSwgNDAwKTsKICAgICAgc2VsZWN0ZWQucHVzaChpY29uKTsKICAgICAgcmVuZGVyVHJheSgpOwogICAgfQogIH0pOwoKICAvLyBvcGVuIGZpcnN0IGNhdGVnb3J5IGJ5IGRlZmF1bHQKICB2YXIgZmlyc3RDYXQgPSBsaXN0LnF1ZXJ5U2VsZWN0b3IoJy5iaXplbW8tY2F0Jyk7CiAgaWYgKGZpcnN0Q2F0KSBmaXJzdENhdC5jbGFzc05hbWUgPSAnYml6ZW1vLWNhdCBvcGVuJzsKCiAgLy8g7KCE7LK0IOyXtOq4sCAvIOyghOyytCDri6vquLAg7Yag6riACiAgdmFyIHRvZ2dsZUFsbEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdiaXplbW8tdG9nZ2xlYWxsJyk7CiAgdmFyIGFsbE9wZW4gPSBmYWxzZTsKICB0b2dnbGVBbGxCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbigpewogICAgdmFyIGNhdHMgPSBsaXN0LnF1ZXJ5U2VsZWN0b3JBbGwoJy5iaXplbW8tY2F0Jyk7CiAgICBhbGxPcGVuID0gIWFsbE9wZW47CiAgICBmb3IgKHZhciBrID0gMDsgayA8IGNhdHMubGVuZ3RoOyBrKyspIHsKICAgICAgdmFyIGJhc2UgPSBjYXRzW2tdLmNsYXNzTmFtZS5yZXBsYWNlKCcgb3BlbicsICcnKS5yZXBsYWNlKCdvcGVuJywgJ2JpemVtby1jYXQnKTsKICAgICAgY2F0c1trXS5jbGFzc05hbWUgPSBhbGxPcGVuID8gKGJhc2UgKyAnIG9wZW4nKSA6IGJhc2U7CiAgICB9CiAgICB0b2dnbGVBbGxCdG4udGV4dENvbnRlbnQgPSBhbGxPcGVuID8gJ+yEueyFmCDsoITssrQg64ur6riwJyA6ICfshLnshZgg7KCE7LK0IOyXtOq4sCc7CiAgfSk7CgogIHZhciBzZWFyY2ggPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYml6ZW1vLXNlYXJjaCcpOwogIHNlYXJjaC5hZGRFdmVudExpc3RlbmVyKCdpbnB1dCcsIGZ1bmN0aW9uKCl7CiAgICB2YXIgcSA9IHNlYXJjaC52YWx1ZS50cmltKCkudG9Mb3dlckNhc2UoKTsKICAgIHZhciBjYXRzID0gbGlzdC5xdWVyeVNlbGVjdG9yQWxsKCcuYml6ZW1vLWNhdCcpOwogICAgZm9yICh2YXIgazIgPSAwOyBrMiA8IGNhdHMubGVuZ3RoOyBrMisrKSB7CiAgICAgIHZhciBuYW1lID0gY2F0c1trMl0uZ2V0QXR0cmlidXRlKCdkYXRhLW5hbWUnKS50b0xvd2VyQ2FzZSgpOwogICAgICBpZiAocSA9PT0gJycgfHwgbmFtZS5pbmRleE9mKHEpICE9PSAtMSkgewogICAgICAgIGNhdHNbazJdLmNsYXNzTmFtZSA9IGNhdHNbazJdLmNsYXNzTmFtZS5yZXBsYWNlKCdiaXplbW8taGlkZGVuJywgJycpLnRyaW0oKTsKICAgICAgICBpZiAocSAhPT0gJycpIGNhdHNbazJdLmNsYXNzTmFtZSArPSAnIG9wZW4nOwogICAgICB9IGVsc2UgewogICAgICAgIGlmIChjYXRzW2syXS5jbGFzc05hbWUuaW5kZXhPZignYml6ZW1vLWhpZGRlbicpID09PSAtMSkgY2F0c1trMl0uY2xhc3NOYW1lICs9ICcgYml6ZW1vLWhpZGRlbic7CiAgICAgIH0KICAgIH0KICB9KTsKfSkoKTsK</script> <script> (function(){ var el = document.getElementById('bizemo-data'); var b64 = el.textContent; var code = decodeURIComponent(escape(atob(b64))); var s = document.createElement('script'); s.text = code; document.body.appendChild(s); })(); </script> 모두의계산기 win+.키가생각안날때 단축키 메모 문서 업무 이모지 이모티콘 최매슨생 https://0-1.kr/73 https://0-1.kr/73#entry73comment Wed, 7 Jan 2026 00:13:26 +0900 https://0-1.kr/63 <p style="text-align: center;" data-ke-size="size16">모두의 계산기 시리즈들을 소개합니다.</p> <p style="text-align: center;" data-ke-size="size16">모두의 계산기는 이런분들을 위해 만들었어요</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="모두의 00계산기.png" data-origin-width="1024" data-origin-height="1024"><a href="https://startupex.tistory.com/category/%EB%AA%A8%EB%91%90%EC%9D%98%EA%B3%84%EC%82%B0%EA%B8%B0" target="_blank" title="모두의계산기 모두보기"><img src="https://blog.kakaocdn.net/dn/cvAJjM/dJMcadHIfPE/PnjJOPwcTRIGy3r5EcHVb0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcvAJjM%2FdJMcadHIfPE%2FPnjJOPwcTRIGy3r5EcHVb0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="200" height="1024" data-filename="모두의 00계산기.png" data-origin-width="1024" data-origin-height="1024"/></a><figcaption>모두의계산기 모두보기</figcaption> </figure> </p> <h2 style="text-align: center;" data-ke-size="size26"><span style="font-family: 'Noto Serif KR'; color: #006dd7;">가입 X, 로그인X, 설치X, 개인정보X</span></h2> <p style="text-align: center;" data-ke-size="size16">&nbsp;&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">모두의 계산기는 위의 4가지가 없어요</p> <p style="text-align: center;" data-ke-size="size16">이거 싫어하는 분들을 위해 만들었습니다.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">접속쉽고, 링크짧고, 누구나 설치된 앱 중에</p> <p style="text-align: center;" data-ke-size="size16">인터넷 브라우저가 있죠.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">PC 또는 휴대폰과 약간의 기억력(?)만 있음</p> <p style="text-align: center;" data-ke-size="size16">전세계 어디서나 사용이 가능합니다.</p> <p style="text-align: center;" data-ke-size="size16">http? 없이 주소창에 [<span style="color: #006dd7;">0-1.kr]</span> 만 쓰세요</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">서버없이 조금 번거로운 작업은 필요하지만</p> <p style="text-align: center;" data-ke-size="size16">누구나 본인에 맞게 설정 후</p> <p style="text-align: center;" data-ke-size="size16">사용할 수있게 해놨으니 맘껏 테스트하세요</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">꼭 개인용, 사업용이 필요하다면&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">연락주세요.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">***** 모든 정보들은 여러분의 장치에만 저장됩니다. *****</p> <p style="text-align: center;" data-ke-size="size14"><span style="color: #6164c6;">(캐쉬삭제,공장초기화로 데이터가 삭제됩니다.)</span></p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style1" /> <h2 style="text-align: center;" data-ke-size="size26"><span style="font-family: 'Noto Serif KR'; color: #ee2323;">활용팁 1.</span></h2> <p style="text-align: center;" data-ke-size="size16"><b>PC &amp; 모바일을 통해 즐겨찾기 동기화(?)</b></p> <p style="text-align: center;" data-ke-size="size16">엄밀히 말하면 동기화는 아닙니다.</p> <p style="text-align: center;" data-ke-size="size16">PC 작업 후 즐겨찾기에 추가 시 모바일에서 작업 가능</p> <p style="text-align: center;" data-ke-size="size16"><span style="color: #ee2323;">단 동일 브라우저로 작업 시 가능. 반드시 저장 후 변경된 주소로 저장해야 활용가능&nbsp;</span></p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16"><b>클라우드를 활용하기 어려운 곳에서 활용</b></p> <p style="text-align: center;" data-ke-size="size16">구글 or 클라우드 미 가입자들이 은근 많음&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">(크롬 및 웨일브라우저 추천)</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16"><b>모바일 및 테블릿에 최적화</b></p> <p style="text-align: center;" data-ke-size="size16">별도 설치없이 링크 접속만으로도 가능</p> <p style="text-align: center;" data-ke-size="size16">짧은 링크라 외우기도 쉬움. 저장도 입력 시 항시저장됩니다.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16"><a title="모두의 00계산기 모두보기" href="https://0-1.kr/category/%EB%AA%A8%EB%91%90%EC%9D%98%EA%B3%84%EC%82%B0%EA%B8%B0">모두의 땡땡 계산기 모두보기</a></p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style2" /> <h2 style="background-color: #ffffff; color: #22315b; text-align: left;" data-ke-size="size26">1.모두의 채점계산기_V3(260211)</h2> <figure data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin" data-link="http://0-1.kr/85" data-link-islinknewwindow="true"> <figcaption style="display: none;"></figcaption> </figure> <p style="text-align: left;" data-ke-size="size16">1) 링크 : <a title="모두의 채점계산기" href="http://0-1.kr/85" target="_blank" rel="noopener">0-1.kr/85</a> <span style="color: #333333; text-align: left;"><span>&nbsp;</span>[설명서 :<span>&nbsp;</span></span><a style="color: #0070d1; text-align: left;" href="http://0-1.kr/77">0-1.kr/77</a>]</p> <figure id="og_1773539023329" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="모두의채점계산기_V3(260211)" data-og-description="모두의 채점계산기_V3(260211) 공장초기화 초기화 ⚠️ 점수입력값과 평가의견만 삭제됩니다.소속&middot;성명&middot;서식&middot;대상자정보는 유지됩니다. 서식저장/주소복사 off URL복사 사용설명서 ▼ " data-og-host="0-1.kr" data-og-source-url="http://0-1.kr/85" data-og-url="https://0-1.kr/85" data-og-image="https://scrap.kakaocdn.net/dn/5OTDl/dJMb9iaPMQo/vgvrsojPZsJkGvgbuHgXfK/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/FZLuV/dJMb8Rj0zMo/DzwihjocbOBzjzOQYBdFK0/img.png?width=800&amp;height=800&amp;face=0_0_800_800"><a href="http://0-1.kr/85" target="_blank" rel="noopener" data-source-url="http://0-1.kr/85"> <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/5OTDl/dJMb9iaPMQo/vgvrsojPZsJkGvgbuHgXfK/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/FZLuV/dJMb8Rj0zMo/DzwihjocbOBzjzOQYBdFK0/img.png?width=800&amp;height=800&amp;face=0_0_800_800');">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">모두의채점계산기_V3(260211)</p> <p class="og-desc" data-ke-size="size16">모두의 채점계산기_V3(260211) 공장초기화 초기화 ⚠️ 점수입력값과 평가의견만 삭제됩니다.소속&middot;성명&middot;서식&middot;대상자정보는 유지됩니다. 서식저장/주소복사 off URL복사 사용설명서 ▼</p> <p class="og-host" data-ke-size="size16">0-1.kr</p> </div> </a></figure> <p data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">2) 사유 : 평가가 잦고 평가항목이 다양한 기관에서 멀티탭 없이 태블릿(또는 휴대폰)으로 심플하고 공정한 심사를 하기 위해 만듦.</p> <p style="text-align: left;" data-ke-size="size16">3) 기능</p> <p style="text-align: left;" data-ke-size="size16">- 태블릿에 최적화.(배터리 오래가는 태블릿이면 멀티탭없이 채점 가능할듯?)</p> <p style="text-align: left;" data-ke-size="size16">- 채점항목을 자유롭게 수정하여 공유 가능.</p> <p style="text-align: left;" data-ke-size="size16">**수정한 서식을 배포 및 공유.</p> <p style="text-align: left;" data-ke-size="size16">- 각 채점자의 정보를 한페이지에서 쉽게 입력.</p> <p style="text-align: left;" data-ke-size="size16">- 입력값 전달 시 메일, 파일화 가능.(메일 내용 필수 확인요망)</p> <div data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기"><a class="btn-toggle-moreless">더보기</a> <div class="moreless-content"> <p style="text-align: left;" data-ke-size="size16">기본서식 수정 후 공유 시 다소 긴 링크가 생성됩니다. 앞 링크는 0-1.kr로 시작되오니 이점 참고바랍니다.</p> <p style="text-align: left;" data-ke-size="size16">수정 후 서식을 각 채점자에게 공유하는 링크는 아래와 같아요. 테스트 한번 해보세요.&nbsp;</p> <p style="text-align: left;" data-ke-size="size16"><a href="https://0-1.kr/85?d=N4IgjiBcDaoHZRIDCHCoEwRhAGhAZytNTAJkwGZMAWTAVgF1sAXATwAcBTROAVwFsQBfTPESoiWXPhJUAbJgAcmNAAZ6IZu068BqhlGCCQHSCHEAbRMvEJj4gFaIBQA" target="_blank" rel="noopener&nbsp;noreferrer">https://0-1.kr/85?d=N4IgjiBcDaoHZRIDCHCoEwRhAGhAZytNTAJkwGZMAWTAVgF1sAXATwAcBTROAVwFsQBfTPESoiWXPhJUAbJgAcmNAAZ6IZu068BqhlGCCQHSCHEAbRMvEJj4gFaIBQA</a></p> <p data-ke-size="size16">저 링크들을 줄여서 공유하셔도 됩니다.</p> </div> </div> <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/buTqCY/dJMcadHIfzi/EFyQLydT9RNavCYgKvhJkK/01.%EB%AA%A8%EB%91%90%EC%9D%98%20%EC%B1%84%EC%A0%90%EA%B3%84%EC%82%B0%EA%B8%B0%20V3_%EB%8B%B4%EB%8B%B9%EC%9E%90%EC%9A%A9.pdf?attach=1&amp;knm=tfile.pdf" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">01.모두의 채점계산기 V3_담당자용.pdf</span></div> <div class="size">0.07MB</div> </div> </a></figure> <figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/AIXIU/dJMcagxG7Be/QrxVjucOvMFiiR41JCpF21/02.%EB%AA%A8%EB%91%90%EC%9D%98%20%EC%B1%84%EC%A0%90%EA%B3%84%EC%82%B0%EA%B8%B0%20V3_%ED%8F%89%EA%B0%80%EC%9E%90%EC%9A%A9.pdf?attach=1&amp;knm=tfile.pdf" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">02.모두의 채점계산기 V3_평가자용.pdf</span></div> <div class="size">0.06MB</div> </div> </a></figure> </p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <h2 style="background-color: #ffffff; color: #22315b; text-align: left;" data-ke-size="size26">2.모두의 간단메모계산기</h2> <p data-ke-size="size16">1) 링크 : <a href="https://0-1.kr/107" target="_blank" rel="noopener&nbsp;noreferrer">0-1.kr/107</a></p> <figure id="og_1773539772899" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="모두의 간단메모계산기(프롬프트제작기)" data-og-description=" 모두의 간단 메모계산기 드래그앤드롭 &middot; 자동저장 공유가능 | ✏️ 프롬프트 편집기 | 카테고리 사용설명서 (클릭하여 펼치기) ▼ 사용팁 활용 공유 ✏️ 편집기 웹으" data-og-host="0-1.kr" data-og-source-url="https://0-1.kr/107" data-og-url="https://0-1.kr/107" data-og-image="https://scrap.kakaocdn.net/dn/cS5XVG/dJMb89ycd0N/kNuiisapV8NNZ2lP82iOx1/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/dBveY6/dJMb9fZtYZ9/6Gclq2cgYoKNNkl2Ma8B8k/img.png?width=800&amp;height=800&amp;face=0_0_800_800"><a href="https://0-1.kr/107" target="_blank" rel="noopener" data-source-url="https://0-1.kr/107"> <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/cS5XVG/dJMb89ycd0N/kNuiisapV8NNZ2lP82iOx1/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/dBveY6/dJMb9fZtYZ9/6Gclq2cgYoKNNkl2Ma8B8k/img.png?width=800&amp;height=800&amp;face=0_0_800_800');">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">모두의 간단메모계산기(프롬프트제작기)</p> <p class="og-desc" data-ke-size="size16"> 모두의 간단 메모계산기 드래그앤드롭 &middot; 자동저장 공유가능 | ✏️ 프롬프트 편집기 | 카테고리 사용설명서 (클릭하여 펼치기) ▼ 사용팁 활용 공유 ✏️ 편집기 웹으</p> <p class="og-host" data-ke-size="size16">0-1.kr</p> </div> </a></figure> <p data-ke-size="size16"><span style="color: #333333; text-align: left;">2) 사유 :<span> 뉴스를 보면서 프롬프트 쓰다 보니 내가 한 말들이 순서가 뒤죽박죽이고 중복되고 어이가 없더만요. 좀 체계적으로 정리해볼까해서 만들었어요. 근데 기자분들이 휴대폰을 보면서 기사를 읽더만요. </span></span><span style="color: #333333; text-align: left;"><span>작성도 쉽고 보기도 쉽고 읽기도 쉽고 한 메모장! 게다가 휴대폰으로도 쉽게 쓰는 간단메모장을 만들어 볼려고 만들었습니다.</span></span></p> <p data-ke-size="size16"><span style="color: #333333; text-align: left;"><span>&nbsp;</span></span></p> <p data-ke-size="size16">3) 기능</p> <p data-ke-size="size16">- 문장마다 섹션을 나눠 작성. 섹션마다 구분이 쉽게 작성.</p> <p data-ke-size="size16">- 섹션 이동 및 들여쓰기로 아이디어 정리 가능</p> <p data-ke-size="size16">- 발표 기획 및 목차설정(아이디어단계), 강의준비 및 대본으로 활용, 프롬프트 작성기로 활용</p> <p data-ke-size="size16">- 작성 후 리딩이 편한 전체보기 기능<span style="color: #333333; text-align: left;"><span></span></span></p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <h2 style="background-color: #ffffff; color: #22315b; text-align: left;" data-ke-size="size26">3.모두의 출장계산기</h2> <p style="color: #333333; text-align: left;" data-ke-size="size16">1) 링크 : <a href="http://0-1.kr/91" target="_blank" rel="noopener">0-1.kr/91</a></p> <figure id="og_1773539612279" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="모두의 출장계산기_V4(260217)" data-og-description=" ️ 출장계산기 V3 ️ 날씨 QR 즐겨찾기 0 / 0 완료 복사 ️ 초기화 기기저장 화면켜짐 자동저장 대기중 ＋ 섹션 추가 저장 복구 요약 카톡바로가기 메일 사용설" data-og-host="0-1.kr" data-og-source-url="http://0-1.kr/91" data-og-url="https://0-1.kr/91" data-og-image="https://scrap.kakaocdn.net/dn/hMouA/dJMb9jgvRIN/xcdwnuG9aCxfgxyPoxCKL0/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/AbBgr/dJMb9jgvRIO/shKJZw4P6Mn8kMcpRFQ2k0/img.png?width=800&amp;height=800&amp;face=0_0_800_800"><a href="http://0-1.kr/91" target="_blank" rel="noopener" data-source-url="http://0-1.kr/91"> <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/hMouA/dJMb9jgvRIN/xcdwnuG9aCxfgxyPoxCKL0/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/AbBgr/dJMb9jgvRIO/shKJZw4P6Mn8kMcpRFQ2k0/img.png?width=800&amp;height=800&amp;face=0_0_800_800');">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">모두의 출장계산기_V4(260217)</p> <p class="og-desc" data-ke-size="size16"> ️ 출장계산기 V3 ️ 날씨 QR 즐겨찾기 0 / 0 완료 복사 ️ 초기화 기기저장 화면켜짐 자동저장 대기중 ＋ 섹션 추가 저장 복구 요약 카톡바로가기 메일 사용설</p> <p class="og-host" data-ke-size="size16">0-1.kr</p> </div> </a></figure> <p data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">2) 사유 : 출장이 잦은 업무라 한달 출장을 미리 세팅하고자 제작. 용도에 따라 내비를 바꿔쓰는데 주소만 적으면 내비를 선택하고 싶어 제작함. 티비를 보는데 [틈만나면]에 유연석씨가 제가 초딩때 보물처럼 쓰던 자석 전화번호 메모지를 길게 작성해서 다니는 모습을 보고 한참 추억에 빠졌다가 유느님한테 혼나는 거 보고 만들어 봤습니다.ㅎ 혼나지 마시옵소서.</p> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">2) 활용팁 :</p> <p style="text-align: left;" data-ke-size="size16">- 저장 후 공유 가능(동일 브라우저로) | 국내 스마트폰 네비 바로가기 연결가능.</p> <p style="text-align: left;" data-ke-size="size16">- 출장 시 마다 메모 및 체크리스트 저장 가능.</p> <p style="text-align: left;" data-ke-size="size16">- 여행 시 스케쥴 정리용으로도 활용가능.</p> <p style="text-align: left;" data-ke-size="size16">- 버튼 중 작동안하는 기능이 꽤 있으니 필요한 기능만 활용해 쓰세요.</p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <h2 style="background-color: #ffffff; color: #22315b; text-align: left;" data-ke-size="size26">4.모두의 내차어디 계산기</h2> <p style="color: #333333; text-align: left;" data-ke-size="size16">1) 링크 :<span>&nbsp;</span><a href="http://0-1.kr/90">0-1.kr/90</a></p> <figure id="og_1773543006769" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="모두의 내차어디 계산기_V2(260217)" data-og-description=" 모두의 내차어디 계산기 V2.0 &middot; 자동저장 ⏱ 주차 경과시간 --:--:-- 저장된 주차 기록이 없습니다 복귀 예정까지 --:-- 예정시간 미설정 ⚠️ 공장초기화 (전체 데이터 삭제) 사용설명서 " data-og-host="0-1.kr" data-og-source-url="http://0-1.kr/90" data-og-url="https://0-1.kr/90" data-og-image="https://scrap.kakaocdn.net/dn/bJs9Ox/dJMb9cBGLaD/QBKjPwGqmd9w7RKcnLsGwK/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/brt4RQ/dJMb9frD78y/CCxJgrvCYMZHx5k4dUMZG0/img.png?width=800&amp;height=800&amp;face=0_0_800_800"><a href="http://0-1.kr/90" target="_blank" rel="noopener" data-source-url="http://0-1.kr/90"> <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/bJs9Ox/dJMb9cBGLaD/QBKjPwGqmd9w7RKcnLsGwK/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/brt4RQ/dJMb9frD78y/CCxJgrvCYMZHx5k4dUMZG0/img.png?width=800&amp;height=800&amp;face=0_0_800_800');">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">모두의 내차어디 계산기_V2(260217)</p> <p class="og-desc" data-ke-size="size16"> 모두의 내차어디 계산기 V2.0 &middot; 자동저장 ⏱ 주차 경과시간 --:--:-- 저장된 주차 기록이 없습니다 복귀 예정까지 --:-- 예정시간 미설정 ⚠️ 공장초기화 (전체 데이터 삭제) 사용설명서</p> <p class="og-host" data-ke-size="size16">0-1.kr</p> </div> </a></figure> <p data-ke-size="size16">&nbsp;</p> <p style="color: #333333; text-align: left;" data-ke-size="size16">2) 사유 : 운전을 별로 안 좋아해서 차를 자주 방치하는데 내차가 어디 있는지..젤 짜증나는건 몇층에 주차한지 기억이 잘 안나서 만들었습니다. 경찰 부르기 전에 만들어야 겠다고 해서 만들었습니다.</p> <p style="color: #333333; text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="color: #333333; text-align: left;" data-ke-size="size16">2) 활용팁 :</p> <p style="color: #333333; text-align: left;" data-ke-size="size16">- 모든 항목은 필수가 아니니 원하는 기능만 입력.&nbsp;</p> <p style="color: #333333; text-align: left;" data-ke-size="size16">- 입력한 휴대폰 내에서 해당 주소만 클릭하면 입력값을 볼 수 있음.</p> <p style="color: #333333; text-align: left;" data-ke-size="size16">- 내위치 전송 기능으로도 활용가능.</p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <h2 style="background-color: #ffffff; color: #22315b; text-align: left;" data-ke-size="size26">5.모두의 출첵계산기</h2> <p style="text-align: left;" data-ke-size="size16">1) 링크 : <a href="https://0-1.kr/95" target="_blank" rel="noopener">0-1.kr/95</a></p> <figure id="og_1773543200313" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="모두의 간단출첵계산기 엑셀버전_V1" data-og-description="모두의 간단출첵2 해제A 고정 B까지C까지 D까지E까지 전체보기 데이터전송 구글시트 리셋 * 마우스 우클릭으로 행 추가/삭제가 가능합니다. 열 너비도 자유롭게 조절해보세요! " data-og-host="0-1.kr" data-og-source-url="https://0-1.kr/95" data-og-url="https://0-1.kr/95" data-og-image="https://scrap.kakaocdn.net/dn/cwrhEt/dJMb8SXwqWx/rdHKKkaRkl0CQNKeeVELkK/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/b9IMXA/dJMb8Zvz7ns/UnHkTmS3cEVWXO9KUg7mJk/img.png?width=800&amp;height=800&amp;face=0_0_800_800"><a href="https://0-1.kr/95" target="_blank" rel="noopener" data-source-url="https://0-1.kr/95"> <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/cwrhEt/dJMb8SXwqWx/rdHKKkaRkl0CQNKeeVELkK/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/b9IMXA/dJMb8Zvz7ns/UnHkTmS3cEVWXO9KUg7mJk/img.png?width=800&amp;height=800&amp;face=0_0_800_800');">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">모두의 간단출첵계산기 엑셀버전_V1</p> <p class="og-desc" data-ke-size="size16">모두의 간단출첵2 해제A 고정 B까지C까지 D까지E까지 전체보기 데이터전송 구글시트 리셋 * 마우스 우클릭으로 행 추가/삭제가 가능합니다. 열 너비도 자유롭게 조절해보세요! </p> <p class="og-host" data-ke-size="size16">0-1.kr</p> </div> </a></figure> <p style="text-align: left;" data-ke-size="size16">2) 사유 : 발표장에서 대기실에 있는 분들이 폰으로 통제 가능하도록 엑셀 내용을 복붙해서 통제 가능하도록 설계함</p> <figure data-ke-type="image" data-ke-style="alignLeft" data-ke-mobilestyle="widthOrigin" data-link="http://0-1.kr/95" data-link-islinknewwindow="true"> <figcaption style="display: none;"></figcaption> </figure> <p style="text-align: left;" data-ke-size="size16">2) 활용팁 :</p> <p style="text-align: left;" data-ke-size="size16">-&nbsp;</p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <h2 style="background-color: #ffffff; color: #22315b; text-align: left;" data-ke-size="size26">5.모두의 전화메모 계산기</h2> <p data-ke-size="size16">1) 링크 : <a href="http://0-1.kr/73" target="_blank" rel="noopener">0-1.kr/73</a></p> <figure id="og_1773544022253" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="모두의 전화메모 계산기_V1(260208)" data-og-description="모두의 전화메모 계산기ℹ️ [0. 사용설명서] 클릭하여 보기&bull; 공초: 서식 초기화 페이지로 이동합니다.&bull; RE: 질문에 대한 답변을 무한으로 추가할 수 있습니다.&bull; 요약: 모든 작성 내용을 취합" data-og-host="0-1.kr" data-og-source-url="http://0-1.kr/73" data-og-url="https://0-1.kr/73" data-og-image="https://scrap.kakaocdn.net/dn/A3Bd2/dJMb8Zvz7pQ/W0X3EXYOAvBGGBMiIWzxsk/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/B4lQs/dJMb88F3xW2/kkbq4P7N9CeYO0EzHesmA1/img.png?width=800&amp;height=800&amp;face=0_0_800_800"><a href="http://0-1.kr/73" target="_blank" rel="noopener" data-source-url="http://0-1.kr/73"> <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/A3Bd2/dJMb8Zvz7pQ/W0X3EXYOAvBGGBMiIWzxsk/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/B4lQs/dJMb88F3xW2/kkbq4P7N9CeYO0EzHesmA1/img.png?width=800&amp;height=800&amp;face=0_0_800_800');">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">모두의 전화메모 계산기_V1(260208)</p> <p class="og-desc" data-ke-size="size16">모두의 전화메모 계산기ℹ️ [0. 사용설명서] 클릭하여 보기&bull; 공초: 서식 초기화 페이지로 이동합니다.&bull; RE: 질문에 대한 답변을 무한으로 추가할 수 있습니다.&bull; 요약: 모든 작성 내용을 취합</p> <p class="og-host" data-ke-size="size16">0-1.kr</p> </div> </a></figure> <p data-ke-size="size16">2) 사유 :&nbsp;</p> <h2 style="text-align: center;" data-ke-size="size26">&nbsp;</h2> <h2 style="text-align: center;" data-ke-size="size26">&nbsp;</h2> <h2 style="text-align: center;" data-ke-size="size26">&nbsp;</h2> <h2 style="text-align: center;" data-ke-size="size26">&nbsp;</h2> <h2 style="text-align: center;" data-ke-size="size26"><b>활용 시 주의</b></h2> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style3" /> <h3 style="text-align: center;" data-ke-size="size23"><span style="color: #ee2323;">각 장치에 임시폴더로 저장되어 캐시 삭제 시 삭제됨</span></h3> <p style="text-align: center;" data-ke-size="size16">(즐겨찾기로 저장을 추천함)</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <h3 style="text-align: center;" data-ke-size="size23"><span style="color: #ee2323;">PC 및 모바일 활용 시 동일 브라우저 활용</span></h3> <p style="text-align: center;" data-ke-size="size16">(크롬과 웨일브라우저 추천. 안드로이드인 경우 삼성브라우저로 이동이 많네요)</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <h3 style="text-align: center;" data-ke-size="size23"><span style="color: #ee2323;">데이터양이 많은 경우 저장 불가. 보조기구로 활용</span></h3> <p style="text-align: center;" data-ke-size="size16">(A4 10장분량의 텍스트는 가능)</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">업데이트 시마다 수정하겠습니다.</p> <p style="text-align: center;" data-ke-size="size16">아래내용들은 정리되는대로 올려드릴게요!</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="채점계산기_V3.png" data-origin-width="1024" data-origin-height="1024"><span data-url="https://blog.kakaocdn.net/dn/oFu8f/dJMcafeO2ej/355zwENEEPvtiXGvz6vlW0/img.png" data-phocus="https://blog.kakaocdn.net/dn/oFu8f/dJMcafeO2ej/355zwENEEPvtiXGvz6vlW0/img.png"><img src="https://blog.kakaocdn.net/dn/oFu8f/dJMcafeO2ej/355zwENEEPvtiXGvz6vlW0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoFu8f%2FdJMcafeO2ej%2F355zwENEEPvtiXGvz6vlW0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="150" height="1024" data-filename="채점계산기_V3.png" data-origin-width="1024" data-origin-height="1024"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="출장계산기.png" data-origin-width="1024" data-origin-height="1024"><span data-url="https://blog.kakaocdn.net/dn/y73C1/dJMcacbh8KO/ixvK9wvAuOMtnNxz4NYfN1/img.png" data-phocus="https://blog.kakaocdn.net/dn/y73C1/dJMcacbh8KO/ixvK9wvAuOMtnNxz4NYfN1/img.png"><img src="https://blog.kakaocdn.net/dn/y73C1/dJMcacbh8KO/ixvK9wvAuOMtnNxz4NYfN1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fy73C1%2FdJMcacbh8KO%2FixvK9wvAuOMtnNxz4NYfN1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="100" height="100" data-filename="출장계산기.png" data-origin-width="1024" data-origin-height="1024"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="모두의 출첵계산기.png" data-origin-width="1024" data-origin-height="1024"><span data-url="https://blog.kakaocdn.net/dn/bns20T/dJMcaibfgg5/KuoK0T04zVdLDOTYmkuqK1/img.png" data-phocus="https://blog.kakaocdn.net/dn/bns20T/dJMcaibfgg5/KuoK0T04zVdLDOTYmkuqK1/img.png" data-alt="모드의계산기_출첵계산기"><img src="https://blog.kakaocdn.net/dn/bns20T/dJMcaibfgg5/KuoK0T04zVdLDOTYmkuqK1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbns20T%2FdJMcaibfgg5%2FKuoK0T04zVdLDOTYmkuqK1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="100" height="100" data-filename="모두의 출첵계산기.png" data-origin-width="1024" data-origin-height="1024"/></span><figcaption>모드의계산기_출첵계산기</figcaption> </figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="전화메모계산기.png" data-origin-width="1024" data-origin-height="1024"><span data-url="https://blog.kakaocdn.net/dn/wnDgU/dJMcadHIfTy/YC0m4UVGUbVzg6RDMUCiak/img.png" data-phocus="https://blog.kakaocdn.net/dn/wnDgU/dJMcadHIfTy/YC0m4UVGUbVzg6RDMUCiak/img.png" data-alt="모두의계산기_전화메모계산기"><img src="https://blog.kakaocdn.net/dn/wnDgU/dJMcadHIfTy/YC0m4UVGUbVzg6RDMUCiak/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FwnDgU%2FdJMcadHIfTy%2FYC0m4UVGUbVzg6RDMUCiak%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="100" height="100" data-filename="전화메모계산기.png" data-origin-width="1024" data-origin-height="1024"/></span><figcaption>모두의계산기_전화메모계산기</figcaption> </figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="크기비율계산기.png" data-origin-width="1024" data-origin-height="1024"><span data-url="https://blog.kakaocdn.net/dn/tHWNH/dJMcajgQU75/e9P93RuahXrQgKaLYkKt1K/img.png" data-phocus="https://blog.kakaocdn.net/dn/tHWNH/dJMcajgQU75/e9P93RuahXrQgKaLYkKt1K/img.png" data-alt="모두의계산기_크기비율계산기"><img src="https://blog.kakaocdn.net/dn/tHWNH/dJMcajgQU75/e9P93RuahXrQgKaLYkKt1K/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtHWNH%2FdJMcajgQU75%2Fe9P93RuahXrQgKaLYkKt1K%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="100" height="100" data-filename="크기비율계산기.png" data-origin-width="1024" data-origin-height="1024"/></span><figcaption>모두의계산기_크기비율계산기</figcaption> </figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="모두의 날짜계산기_V1.png" data-origin-width="1024" data-origin-height="1024"><span data-url="https://blog.kakaocdn.net/dn/UWF1k/dJMcadnpTmw/TZoZ4zFk7H8GM7OkmYWyAK/img.png" data-phocus="https://blog.kakaocdn.net/dn/UWF1k/dJMcadnpTmw/TZoZ4zFk7H8GM7OkmYWyAK/img.png" data-alt="모두의계산기_날짜계산기"><img src="https://blog.kakaocdn.net/dn/UWF1k/dJMcadnpTmw/TZoZ4zFk7H8GM7OkmYWyAK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FUWF1k%2FdJMcadnpTmw%2FTZoZ4zFk7H8GM7OkmYWyAK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="100" height="100" data-filename="모두의 날짜계산기_V1.png" data-origin-width="1024" data-origin-height="1024"/></span><figcaption>모두의계산기_날짜계산기</figcaption> </figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="모두의 간단엑셀계산기.png" data-origin-width="1024" data-origin-height="1024"><span data-url="https://blog.kakaocdn.net/dn/6MJZJ/dJMcaca16uh/iYfIlXdwU2kkFcttJ1bX2k/img.png" data-phocus="https://blog.kakaocdn.net/dn/6MJZJ/dJMcaca16uh/iYfIlXdwU2kkFcttJ1bX2k/img.png"><img src="https://blog.kakaocdn.net/dn/6MJZJ/dJMcaca16uh/iYfIlXdwU2kkFcttJ1bX2k/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F6MJZJ%2FdJMcaca16uh%2FiYfIlXdwU2kkFcttJ1bX2k%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="100" height="100" data-filename="모두의 간단엑셀계산기.png" data-origin-width="1024" data-origin-height="1024"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스프레드출력계산기.png" data-origin-width="1024" data-origin-height="1024"><span data-url="https://blog.kakaocdn.net/dn/LMGPE/dJMcadVfo2C/xkhQ6MjlgHbt5d3emvWQi0/img.png" data-phocus="https://blog.kakaocdn.net/dn/LMGPE/dJMcadVfo2C/xkhQ6MjlgHbt5d3emvWQi0/img.png"><img src="https://blog.kakaocdn.net/dn/LMGPE/dJMcadVfo2C/xkhQ6MjlgHbt5d3emvWQi0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FLMGPE%2FdJMcadVfo2C%2FxkhQ6MjlgHbt5d3emvWQi0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="100" height="100" data-filename="스프레드출력계산기.png" data-origin-width="1024" data-origin-height="1024"/></span></figure> </p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="사진출력.png" data-origin-width="230" data-origin-height="300"><span data-url="https://blog.kakaocdn.net/dn/c3tsl9/dJMcac9RGB9/dkmGgJS2ZLiRDjPMPikh01/img.png" data-phocus="https://blog.kakaocdn.net/dn/c3tsl9/dJMcac9RGB9/dkmGgJS2ZLiRDjPMPikh01/img.png"><img src="https://blog.kakaocdn.net/dn/c3tsl9/dJMcac9RGB9/dkmGgJS2ZLiRDjPMPikh01/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc3tsl9%2FdJMcac9RGB9%2FdkmGgJS2ZLiRDjPMPikh01%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="100" height="130" data-filename="사진출력.png" data-origin-width="230" data-origin-height="300"/></span></figure> </p> <p data-ke-size="size16">&nbsp;</p> 모두의계산기 모계 모두 모두의계산기 모두의계산기시리즈 시리즈 업무용 최매슨생 https://0-1.kr/63 https://0-1.kr/63#entry63comment Tue, 6 Jan 2026 17:52:51 +0900 https://0-1.kr/59 <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/bd1lH3/dJMcagYqR8j/549fLYhiPoD3C885AEAwo1/25%EB%85%84%20%EC%B0%BD%EC%97%85%EA%B8%B0%EC%97%85%20%EB%B2%94%EC%9C%84%20%ED%95%B4%EC%84%A4%28%EC%B5%9C%EC%A2%85%29_%EC%A4%91%EC%86%8C%EB%B2%A4%EC%B2%98%EA%B8%B0%EC%97%85%EB%B6%80.pdf?attach=1&amp;knm=tfile.pdf" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">25년 창업기업 범위 해설(최종)_중소벤처기업부.pdf</span></div> <div class="size">1.32MB</div> </div> </a></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">창업기업에 대한 기준이 정리된 책자가 있어 공유드립니다.</p> <p data-ke-size="size16">각종 사례들을 중심으로 정리되어 있으니 참고하시구요!</p> <p data-ke-size="size16">한장한장 살펴보시죠</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032928.jpg" data-origin-width="1080" data-origin-height="1465"><span data-url="https://blog.kakaocdn.net/dn/cmOhYg/dJMcagqBeWs/c6TFc1l1o2wVATOH51ZMB0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/cmOhYg/dJMcagqBeWs/c6TFc1l1o2wVATOH51ZMB0/img.jpg"><img src="https://blog.kakaocdn.net/dn/cmOhYg/dJMcagqBeWs/c6TFc1l1o2wVATOH51ZMB0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcmOhYg%2FdJMcagqBeWs%2Fc6TFc1l1o2wVATOH51ZMB0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1465" data-filename="1000032928.jpg" data-origin-width="1080" data-origin-height="1465"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032929.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/0SmMs/dJMcacIwqzq/kkUAndiff0PTcRKKcn5qS1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/0SmMs/dJMcacIwqzq/kkUAndiff0PTcRKKcn5qS1/img.jpg"><img src="https://blog.kakaocdn.net/dn/0SmMs/dJMcacIwqzq/kkUAndiff0PTcRKKcn5qS1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F0SmMs%2FdJMcacIwqzq%2FkkUAndiff0PTcRKKcn5qS1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032929.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032930.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/lCeRr/dJMcadtPGo9/oxOVZ48950DXzkwSGpbCS1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/lCeRr/dJMcadtPGo9/oxOVZ48950DXzkwSGpbCS1/img.jpg"><img src="https://blog.kakaocdn.net/dn/lCeRr/dJMcadtPGo9/oxOVZ48950DXzkwSGpbCS1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlCeRr%2FdJMcadtPGo9%2FoxOVZ48950DXzkwSGpbCS1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032930.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032931.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/ecDFyX/dJMcagqBeWr/MrCDHYLYbXqVzfibuFvCR1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/ecDFyX/dJMcagqBeWr/MrCDHYLYbXqVzfibuFvCR1/img.jpg"><img src="https://blog.kakaocdn.net/dn/ecDFyX/dJMcagqBeWr/MrCDHYLYbXqVzfibuFvCR1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FecDFyX%2FdJMcagqBeWr%2FMrCDHYLYbXqVzfibuFvCR1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032931.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032932.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/clEgpq/dJMcah37eU6/r8zhNOl6Ennr1zWs4aDbqk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/clEgpq/dJMcah37eU6/r8zhNOl6Ennr1zWs4aDbqk/img.jpg"><img src="https://blog.kakaocdn.net/dn/clEgpq/dJMcah37eU6/r8zhNOl6Ennr1zWs4aDbqk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FclEgpq%2FdJMcah37eU6%2Fr8zhNOl6Ennr1zWs4aDbqk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032932.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032933.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/Bg1g8/dJMcadtPGpc/nlmMcxPy0inEGAExkxdvcK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/Bg1g8/dJMcadtPGpc/nlmMcxPy0inEGAExkxdvcK/img.jpg"><img src="https://blog.kakaocdn.net/dn/Bg1g8/dJMcadtPGpc/nlmMcxPy0inEGAExkxdvcK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FBg1g8%2FdJMcadtPGpc%2FnlmMcxPy0inEGAExkxdvcK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032933.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032934.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/MmPNd/dJMcacIwqzt/EuPx8YSC7739NQGvAfDtK0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/MmPNd/dJMcacIwqzt/EuPx8YSC7739NQGvAfDtK0/img.jpg"><img src="https://blog.kakaocdn.net/dn/MmPNd/dJMcacIwqzt/EuPx8YSC7739NQGvAfDtK0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FMmPNd%2FdJMcacIwqzt%2FEuPx8YSC7739NQGvAfDtK0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032934.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032935.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/o27Cf/dJMcagqBeWt/356Jm6DZipfBkIRER7ZrHk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/o27Cf/dJMcagqBeWt/356Jm6DZipfBkIRER7ZrHk/img.jpg"><img src="https://blog.kakaocdn.net/dn/o27Cf/dJMcagqBeWt/356Jm6DZipfBkIRER7ZrHk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fo27Cf%2FdJMcagqBeWt%2F356Jm6DZipfBkIRER7ZrHk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032935.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032936.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/d5ozNb/dJMcai2YkIR/qJkEiW0Uj0NeUMbKreuWlk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/d5ozNb/dJMcai2YkIR/qJkEiW0Uj0NeUMbKreuWlk/img.jpg"><img src="https://blog.kakaocdn.net/dn/d5ozNb/dJMcai2YkIR/qJkEiW0Uj0NeUMbKreuWlk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fd5ozNb%2FdJMcai2YkIR%2FqJkEiW0Uj0NeUMbKreuWlk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032936.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032937.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/Ip2fc/dJMcah37eU7/gdIUZQdVpJ8tLeWL69WEN0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/Ip2fc/dJMcah37eU7/gdIUZQdVpJ8tLeWL69WEN0/img.jpg"><img src="https://blog.kakaocdn.net/dn/Ip2fc/dJMcah37eU7/gdIUZQdVpJ8tLeWL69WEN0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FIp2fc%2FdJMcah37eU7%2FgdIUZQdVpJ8tLeWL69WEN0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032937.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032938.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/Wp2zh/dJMcah37eU5/KTohcWdd7b9nC869INMiv0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/Wp2zh/dJMcah37eU5/KTohcWdd7b9nC869INMiv0/img.jpg"><img src="https://blog.kakaocdn.net/dn/Wp2zh/dJMcah37eU5/KTohcWdd7b9nC869INMiv0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWp2zh%2FdJMcah37eU5%2FKTohcWdd7b9nC869INMiv0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032938.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032939.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bpGAbx/dJMcai2YkIP/KEKGbew6fTtfnHbHELMbD1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bpGAbx/dJMcai2YkIP/KEKGbew6fTtfnHbHELMbD1/img.jpg"><img src="https://blog.kakaocdn.net/dn/bpGAbx/dJMcai2YkIP/KEKGbew6fTtfnHbHELMbD1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbpGAbx%2FdJMcai2YkIP%2FKEKGbew6fTtfnHbHELMbD1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032939.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032940.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/uohbH/dJMcadtPGpb/BsaZyMIzDKTEOezU3sKEL0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/uohbH/dJMcadtPGpb/BsaZyMIzDKTEOezU3sKEL0/img.jpg"><img src="https://blog.kakaocdn.net/dn/uohbH/dJMcadtPGpb/BsaZyMIzDKTEOezU3sKEL0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuohbH%2FdJMcadtPGpb%2FBsaZyMIzDKTEOezU3sKEL0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032940.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032941.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/zqk3z/dJMcacIwqzu/zoxCGtOIrie4WhGxMcQNTK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/zqk3z/dJMcacIwqzu/zoxCGtOIrie4WhGxMcQNTK/img.jpg"><img src="https://blog.kakaocdn.net/dn/zqk3z/dJMcacIwqzu/zoxCGtOIrie4WhGxMcQNTK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fzqk3z%2FdJMcacIwqzu%2FzoxCGtOIrie4WhGxMcQNTK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032941.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032942.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/btJ7lQ/dJMcadtPGpa/VHdZ0uqd3V93K42wKruukk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/btJ7lQ/dJMcadtPGpa/VHdZ0uqd3V93K42wKruukk/img.jpg"><img src="https://blog.kakaocdn.net/dn/btJ7lQ/dJMcadtPGpa/VHdZ0uqd3V93K42wKruukk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbtJ7lQ%2FdJMcadtPGpa%2FVHdZ0uqd3V93K42wKruukk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032942.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032943.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/b95QOn/dJMcacV2pJ7/sFKKQoHmDWntkJ2KxVCfvk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/b95QOn/dJMcacV2pJ7/sFKKQoHmDWntkJ2KxVCfvk/img.jpg"><img src="https://blog.kakaocdn.net/dn/b95QOn/dJMcacV2pJ7/sFKKQoHmDWntkJ2KxVCfvk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb95QOn%2FdJMcacV2pJ7%2FsFKKQoHmDWntkJ2KxVCfvk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032943.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032944.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/dW2pFc/dJMcacV2pJ9/nfTBND4OUrFkLOVPUI4bbk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/dW2pFc/dJMcacV2pJ9/nfTBND4OUrFkLOVPUI4bbk/img.jpg"><img src="https://blog.kakaocdn.net/dn/dW2pFc/dJMcacV2pJ9/nfTBND4OUrFkLOVPUI4bbk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdW2pFc%2FdJMcacV2pJ9%2FnfTBND4OUrFkLOVPUI4bbk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032944.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032945.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bLjqqI/dJMcadUTSUl/zFz2b3qni3YSSqvVlkd6Ok/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bLjqqI/dJMcadUTSUl/zFz2b3qni3YSSqvVlkd6Ok/img.jpg"><img src="https://blog.kakaocdn.net/dn/bLjqqI/dJMcadUTSUl/zFz2b3qni3YSSqvVlkd6Ok/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbLjqqI%2FdJMcadUTSUl%2FzFz2b3qni3YSSqvVlkd6Ok%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032945.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032946.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/exePhY/dJMcadUTSUi/3ZLBepgYUdxSkOnd4TRkGK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/exePhY/dJMcadUTSUi/3ZLBepgYUdxSkOnd4TRkGK/img.jpg"><img src="https://blog.kakaocdn.net/dn/exePhY/dJMcadUTSUi/3ZLBepgYUdxSkOnd4TRkGK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FexePhY%2FdJMcadUTSUi%2F3ZLBepgYUdxSkOnd4TRkGK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032946.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032947.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/B1eOK/dJMcadUTSUm/j6Gev5fxOld4wXRsIyupYk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/B1eOK/dJMcadUTSUm/j6Gev5fxOld4wXRsIyupYk/img.jpg"><img src="https://blog.kakaocdn.net/dn/B1eOK/dJMcadUTSUm/j6Gev5fxOld4wXRsIyupYk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FB1eOK%2FdJMcadUTSUm%2Fj6Gev5fxOld4wXRsIyupYk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032947.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032948.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/2m1Q2/dJMcadUTSUk/CK7k9OQ2srLmCsoBKFlwf1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/2m1Q2/dJMcadUTSUk/CK7k9OQ2srLmCsoBKFlwf1/img.jpg"><img src="https://blog.kakaocdn.net/dn/2m1Q2/dJMcadUTSUk/CK7k9OQ2srLmCsoBKFlwf1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F2m1Q2%2FdJMcadUTSUk%2FCK7k9OQ2srLmCsoBKFlwf1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032948.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032949.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bU3uZj/dJMcadUTSUg/5eQKWo6kBGn45tptqt6HtK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bU3uZj/dJMcadUTSUg/5eQKWo6kBGn45tptqt6HtK/img.jpg"><img src="https://blog.kakaocdn.net/dn/bU3uZj/dJMcadUTSUg/5eQKWo6kBGn45tptqt6HtK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbU3uZj%2FdJMcadUTSUg%2F5eQKWo6kBGn45tptqt6HtK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032949.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032950.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/vPEmI/dJMcadUTSUh/7pgTC4TN6UnwK9zl4EdRgK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/vPEmI/dJMcadUTSUh/7pgTC4TN6UnwK9zl4EdRgK/img.jpg"><img src="https://blog.kakaocdn.net/dn/vPEmI/dJMcadUTSUh/7pgTC4TN6UnwK9zl4EdRgK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvPEmI%2FdJMcadUTSUh%2F7pgTC4TN6UnwK9zl4EdRgK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032950.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032951.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/PrzuH/dJMcadUTSUj/s1SJ3tjkKkBQB83mPjp8V1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/PrzuH/dJMcadUTSUj/s1SJ3tjkKkBQB83mPjp8V1/img.jpg"><img src="https://blog.kakaocdn.net/dn/PrzuH/dJMcadUTSUj/s1SJ3tjkKkBQB83mPjp8V1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPrzuH%2FdJMcadUTSUj%2Fs1SJ3tjkKkBQB83mPjp8V1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032951.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032952.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/cHAt8A/dJMcagRFy2e/j8ZlJjB7Pkq6TuOoOiARa0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/cHAt8A/dJMcagRFy2e/j8ZlJjB7Pkq6TuOoOiARa0/img.jpg"><img src="https://blog.kakaocdn.net/dn/cHAt8A/dJMcagRFy2e/j8ZlJjB7Pkq6TuOoOiARa0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcHAt8A%2FdJMcagRFy2e%2Fj8ZlJjB7Pkq6TuOoOiARa0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032952.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032953.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/BIpgM/dJMcacV2pJ6/M5FuikAHPbTkrdd1JXyUvk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/BIpgM/dJMcacV2pJ6/M5FuikAHPbTkrdd1JXyUvk/img.jpg"><img src="https://blog.kakaocdn.net/dn/BIpgM/dJMcacV2pJ6/M5FuikAHPbTkrdd1JXyUvk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FBIpgM%2FdJMcacV2pJ6%2FM5FuikAHPbTkrdd1JXyUvk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032953.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032954.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/kL2PY/dJMcacV2pKa/RSK4mv10kKlEGbnKlUqaZK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/kL2PY/dJMcacV2pKa/RSK4mv10kKlEGbnKlUqaZK/img.jpg"><img src="https://blog.kakaocdn.net/dn/kL2PY/dJMcacV2pKa/RSK4mv10kKlEGbnKlUqaZK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkL2PY%2FdJMcacV2pKa%2FRSK4mv10kKlEGbnKlUqaZK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032954.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032955.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/c0vqyY/dJMcadUTSUn/sBnWIVasQSBLLwIvqqa38k/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/c0vqyY/dJMcadUTSUn/sBnWIVasQSBLLwIvqqa38k/img.jpg"><img src="https://blog.kakaocdn.net/dn/c0vqyY/dJMcadUTSUn/sBnWIVasQSBLLwIvqqa38k/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc0vqyY%2FdJMcadUTSUn%2FsBnWIVasQSBLLwIvqqa38k%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032955.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032956.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bfrwaE/dJMcacV2pJ8/4kKdeGjZ3dK1OOnOX7zis0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bfrwaE/dJMcacV2pJ8/4kKdeGjZ3dK1OOnOX7zis0/img.jpg"><img src="https://blog.kakaocdn.net/dn/bfrwaE/dJMcacV2pJ8/4kKdeGjZ3dK1OOnOX7zis0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbfrwaE%2FdJMcacV2pJ8%2F4kKdeGjZ3dK1OOnOX7zis0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032956.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032957.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/Dqo7s/dJMcadN7IOf/Bsjhvm2w53NYcq0ZKL6kB1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/Dqo7s/dJMcadN7IOf/Bsjhvm2w53NYcq0ZKL6kB1/img.jpg"><img src="https://blog.kakaocdn.net/dn/Dqo7s/dJMcadN7IOf/Bsjhvm2w53NYcq0ZKL6kB1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDqo7s%2FdJMcadN7IOf%2FBsjhvm2w53NYcq0ZKL6kB1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032957.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032958.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/b3KquB/dJMcai2YkVf/byA0sOcoIKvA4jI7xuA0l0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/b3KquB/dJMcai2YkVf/byA0sOcoIKvA4jI7xuA0l0/img.jpg"><img src="https://blog.kakaocdn.net/dn/b3KquB/dJMcai2YkVf/byA0sOcoIKvA4jI7xuA0l0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb3KquB%2FdJMcai2YkVf%2FbyA0sOcoIKvA4jI7xuA0l0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032958.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032959.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/otrXM/dJMcai2YkVe/yH4KiHrvIFfYLyXPHQqVoK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/otrXM/dJMcai2YkVe/yH4KiHrvIFfYLyXPHQqVoK/img.jpg"><img src="https://blog.kakaocdn.net/dn/otrXM/dJMcai2YkVe/yH4KiHrvIFfYLyXPHQqVoK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FotrXM%2FdJMcai2YkVe%2FyH4KiHrvIFfYLyXPHQqVoK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032959.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032960.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/PSKjr/dJMcag5dTPL/vrfjD5JPEQ0nNCIdUi8kL0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/PSKjr/dJMcag5dTPL/vrfjD5JPEQ0nNCIdUi8kL0/img.jpg"><img src="https://blog.kakaocdn.net/dn/PSKjr/dJMcag5dTPL/vrfjD5JPEQ0nNCIdUi8kL0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPSKjr%2FdJMcag5dTPL%2FvrfjD5JPEQ0nNCIdUi8kL0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032960.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032961.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/p6d6K/dJMcabQmyiY/shW7NWnSJc1Dk835g3Vr00/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/p6d6K/dJMcabQmyiY/shW7NWnSJc1Dk835g3Vr00/img.jpg"><img src="https://blog.kakaocdn.net/dn/p6d6K/dJMcabQmyiY/shW7NWnSJc1Dk835g3Vr00/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fp6d6K%2FdJMcabQmyiY%2FshW7NWnSJc1Dk835g3Vr00%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032961.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032962.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/4Rxly/dJMcag5dTPK/znqc6wKQs2k6bT0jW582Vk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/4Rxly/dJMcag5dTPK/znqc6wKQs2k6bT0jW582Vk/img.jpg"><img src="https://blog.kakaocdn.net/dn/4Rxly/dJMcag5dTPK/znqc6wKQs2k6bT0jW582Vk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F4Rxly%2FdJMcag5dTPK%2Fznqc6wKQs2k6bT0jW582Vk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032962.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032963.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/3kPdt/dJMcadtPGIC/TqAvkLWgN75Mk7tO6nlTxK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/3kPdt/dJMcadtPGIC/TqAvkLWgN75Mk7tO6nlTxK/img.jpg"><img src="https://blog.kakaocdn.net/dn/3kPdt/dJMcadtPGIC/TqAvkLWgN75Mk7tO6nlTxK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3kPdt%2FdJMcadtPGIC%2FTqAvkLWgN75Mk7tO6nlTxK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032963.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032964.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/b6hbDv/dJMcafysClf/pVOGcAmLhkk6KnvugRipDk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/b6hbDv/dJMcafysClf/pVOGcAmLhkk6KnvugRipDk/img.jpg"><img src="https://blog.kakaocdn.net/dn/b6hbDv/dJMcafysClf/pVOGcAmLhkk6KnvugRipDk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb6hbDv%2FdJMcafysClf%2FpVOGcAmLhkk6KnvugRipDk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032964.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032965.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/cPf1wj/dJMcafysClg/ClZkObqkxKjhZf4FYRGR91/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/cPf1wj/dJMcafysClg/ClZkObqkxKjhZf4FYRGR91/img.jpg"><img src="https://blog.kakaocdn.net/dn/cPf1wj/dJMcafysClg/ClZkObqkxKjhZf4FYRGR91/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcPf1wj%2FdJMcafysClg%2FClZkObqkxKjhZf4FYRGR91%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032965.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032966.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/79AZt/dJMcafysCle/dGBh1PB8TNHoyRfR5FnGB0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/79AZt/dJMcafysCle/dGBh1PB8TNHoyRfR5FnGB0/img.jpg"><img src="https://blog.kakaocdn.net/dn/79AZt/dJMcafysCle/dGBh1PB8TNHoyRfR5FnGB0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F79AZt%2FdJMcafysCle%2FdGBh1PB8TNHoyRfR5FnGB0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032966.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032967.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bv6CnI/dJMcahQAvBF/FHlLX57YgpckSyF7KFf8bk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bv6CnI/dJMcahQAvBF/FHlLX57YgpckSyF7KFf8bk/img.jpg"><img src="https://blog.kakaocdn.net/dn/bv6CnI/dJMcahQAvBF/FHlLX57YgpckSyF7KFf8bk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbv6CnI%2FdJMcahQAvBF%2FFHlLX57YgpckSyF7KFf8bk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032967.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032968.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/u6q3h/dJMcadtPGID/2LUVO8U7beovVHOAZHqdM0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/u6q3h/dJMcadtPGID/2LUVO8U7beovVHOAZHqdM0/img.jpg"><img src="https://blog.kakaocdn.net/dn/u6q3h/dJMcadtPGID/2LUVO8U7beovVHOAZHqdM0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fu6q3h%2FdJMcadtPGID%2F2LUVO8U7beovVHOAZHqdM0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032968.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032969.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/DJWQl/dJMcag5dTPM/zIVhtr0ZqmULGp1MbjtTKK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/DJWQl/dJMcag5dTPM/zIVhtr0ZqmULGp1MbjtTKK/img.jpg"><img src="https://blog.kakaocdn.net/dn/DJWQl/dJMcag5dTPM/zIVhtr0ZqmULGp1MbjtTKK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDJWQl%2FdJMcag5dTPM%2FzIVhtr0ZqmULGp1MbjtTKK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032969.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032970.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bbmxRx/dJMcadtPGIB/XHSzKIbQIzs7nb7mklKld0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bbmxRx/dJMcadtPGIB/XHSzKIbQIzs7nb7mklKld0/img.jpg"><img src="https://blog.kakaocdn.net/dn/bbmxRx/dJMcadtPGIB/XHSzKIbQIzs7nb7mklKld0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbbmxRx%2FdJMcadtPGIB%2FXHSzKIbQIzs7nb7mklKld0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032970.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032971.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/OQqJ7/dJMcag5dTPN/O8OVA61pvGLQCkxcb9N8KK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/OQqJ7/dJMcag5dTPN/O8OVA61pvGLQCkxcb9N8KK/img.jpg"><img src="https://blog.kakaocdn.net/dn/OQqJ7/dJMcag5dTPN/O8OVA61pvGLQCkxcb9N8KK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOQqJ7%2FdJMcag5dTPN%2FO8OVA61pvGLQCkxcb9N8KK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032971.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032972.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bazgRU/dJMcahQAvBG/8DAr7cvN7wei0YTFzStm50/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bazgRU/dJMcahQAvBG/8DAr7cvN7wei0YTFzStm50/img.jpg"><img src="https://blog.kakaocdn.net/dn/bazgRU/dJMcahQAvBG/8DAr7cvN7wei0YTFzStm50/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbazgRU%2FdJMcahQAvBG%2F8DAr7cvN7wei0YTFzStm50%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032972.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032979.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/QRwzF/dJMcafysB6T/j1F6kbuCI6fZ73TookxWg1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/QRwzF/dJMcafysB6T/j1F6kbuCI6fZ73TookxWg1/img.jpg"><img src="https://blog.kakaocdn.net/dn/QRwzF/dJMcafysB6T/j1F6kbuCI6fZ73TookxWg1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FQRwzF%2FdJMcafysB6T%2Fj1F6kbuCI6fZ73TookxWg1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032979.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032980.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bwRTrI/dJMcafysB6S/FddhUvC6BiPUJgJCaZ4Q91/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bwRTrI/dJMcafysB6S/FddhUvC6BiPUJgJCaZ4Q91/img.jpg"><img src="https://blog.kakaocdn.net/dn/bwRTrI/dJMcafysB6S/FddhUvC6BiPUJgJCaZ4Q91/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbwRTrI%2FdJMcafysB6S%2FFddhUvC6BiPUJgJCaZ4Q91%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032980.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032981.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/923SV/dJMcafLZ4Gp/XA5VJcCuufIxvk0dlYYFX1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/923SV/dJMcafLZ4Gp/XA5VJcCuufIxvk0dlYYFX1/img.jpg"><img src="https://blog.kakaocdn.net/dn/923SV/dJMcafLZ4Gp/XA5VJcCuufIxvk0dlYYFX1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F923SV%2FdJMcafLZ4Gp%2FXA5VJcCuufIxvk0dlYYFX1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032981.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032982.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/cAmofC/dJMcafysB6Q/4eSljmu0lv5DCdtqPb9cq0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/cAmofC/dJMcafysB6Q/4eSljmu0lv5DCdtqPb9cq0/img.jpg"><img src="https://blog.kakaocdn.net/dn/cAmofC/dJMcafysB6Q/4eSljmu0lv5DCdtqPb9cq0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcAmofC%2FdJMcafysB6Q%2F4eSljmu0lv5DCdtqPb9cq0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032982.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032983.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/vdS6U/dJMcahC2z0u/ZcKk9RGT5RMoslGWNAipzK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/vdS6U/dJMcahC2z0u/ZcKk9RGT5RMoslGWNAipzK/img.jpg"><img src="https://blog.kakaocdn.net/dn/vdS6U/dJMcahC2z0u/ZcKk9RGT5RMoslGWNAipzK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvdS6U%2FdJMcahC2z0u%2FZcKk9RGT5RMoslGWNAipzK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032983.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032984.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/DrLuw/dJMcafysB6O/rKC6pNCLMkj9YzVkoyYGE1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/DrLuw/dJMcafysB6O/rKC6pNCLMkj9YzVkoyYGE1/img.jpg"><img src="https://blog.kakaocdn.net/dn/DrLuw/dJMcafysB6O/rKC6pNCLMkj9YzVkoyYGE1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDrLuw%2FdJMcafysB6O%2FrKC6pNCLMkj9YzVkoyYGE1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032984.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032985.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/MuNFo/dJMcafLZ4Gq/OPSIxpMt9nz3BKXFgXW8v1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/MuNFo/dJMcafLZ4Gq/OPSIxpMt9nz3BKXFgXW8v1/img.jpg"><img src="https://blog.kakaocdn.net/dn/MuNFo/dJMcafLZ4Gq/OPSIxpMt9nz3BKXFgXW8v1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FMuNFo%2FdJMcafLZ4Gq%2FOPSIxpMt9nz3BKXFgXW8v1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032985.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032986.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bT0xA5/dJMcahQAvnK/ELS4arPIrhVPBlhOsdj7c1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bT0xA5/dJMcahQAvnK/ELS4arPIrhVPBlhOsdj7c1/img.jpg"><img src="https://blog.kakaocdn.net/dn/bT0xA5/dJMcahQAvnK/ELS4arPIrhVPBlhOsdj7c1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbT0xA5%2FdJMcahQAvnK%2FELS4arPIrhVPBlhOsdj7c1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032986.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032987.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/og82v/dJMcafysB6P/GzYvp0R1U4N2HWZ0ZIzgtk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/og82v/dJMcafysB6P/GzYvp0R1U4N2HWZ0ZIzgtk/img.jpg"><img src="https://blog.kakaocdn.net/dn/og82v/dJMcafysB6P/GzYvp0R1U4N2HWZ0ZIzgtk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fog82v%2FdJMcafysB6P%2FGzYvp0R1U4N2HWZ0ZIzgtk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032987.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032988.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bfxfbh/dJMcahC2z0v/YWlt944Ef5wVsRDdADvxsK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bfxfbh/dJMcahC2z0v/YWlt944Ef5wVsRDdADvxsK/img.jpg"><img src="https://blog.kakaocdn.net/dn/bfxfbh/dJMcahC2z0v/YWlt944Ef5wVsRDdADvxsK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbfxfbh%2FdJMcahC2z0v%2FYWlt944Ef5wVsRDdADvxsK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032988.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032989.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/9ZLid/dJMcafysB6R/Su11mkSAfP95IivwOzJfhk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/9ZLid/dJMcafysB6R/Su11mkSAfP95IivwOzJfhk/img.jpg"><img src="https://blog.kakaocdn.net/dn/9ZLid/dJMcafysB6R/Su11mkSAfP95IivwOzJfhk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F9ZLid%2FdJMcafysB6R%2FSu11mkSAfP95IivwOzJfhk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032989.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032990.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bNqZub/dJMcaiPrLmn/q1I2u2Zakt6bZlQFegzNlk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bNqZub/dJMcaiPrLmn/q1I2u2Zakt6bZlQFegzNlk/img.jpg"><img src="https://blog.kakaocdn.net/dn/bNqZub/dJMcaiPrLmn/q1I2u2Zakt6bZlQFegzNlk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbNqZub%2FdJMcaiPrLmn%2Fq1I2u2Zakt6bZlQFegzNlk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032990.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032991.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/pLpIU/dJMcafLZ4Gr/OkKYBq03GjMVLnbk0FRJn1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/pLpIU/dJMcafLZ4Gr/OkKYBq03GjMVLnbk0FRJn1/img.jpg"><img src="https://blog.kakaocdn.net/dn/pLpIU/dJMcafLZ4Gr/OkKYBq03GjMVLnbk0FRJn1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpLpIU%2FdJMcafLZ4Gr%2FOkKYBq03GjMVLnbk0FRJn1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032991.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032992.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/baFTXY/dJMcadN7Jf4/rcVUGCjrOoljVRhV852w8K/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/baFTXY/dJMcadN7Jf4/rcVUGCjrOoljVRhV852w8K/img.jpg"><img src="https://blog.kakaocdn.net/dn/baFTXY/dJMcadN7Jf4/rcVUGCjrOoljVRhV852w8K/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbaFTXY%2FdJMcadN7Jf4%2FrcVUGCjrOoljVRhV852w8K%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032992.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032993.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/Ha6af/dJMcadN7Jf5/4jCMfzAbrEXBX5Ssw7n9HK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/Ha6af/dJMcadN7Jf5/4jCMfzAbrEXBX5Ssw7n9HK/img.jpg"><img src="https://blog.kakaocdn.net/dn/Ha6af/dJMcadN7Jf5/4jCMfzAbrEXBX5Ssw7n9HK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHa6af%2FdJMcadN7Jf5%2F4jCMfzAbrEXBX5Ssw7n9HK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032993.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032994.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bbaagX/dJMcaajCUGL/Ynjukowk7OJs0KFNwSYGyk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bbaagX/dJMcaajCUGL/Ynjukowk7OJs0KFNwSYGyk/img.jpg"><img src="https://blog.kakaocdn.net/dn/bbaagX/dJMcaajCUGL/Ynjukowk7OJs0KFNwSYGyk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbbaagX%2FdJMcaajCUGL%2FYnjukowk7OJs0KFNwSYGyk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032994.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032995.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bkD7sW/dJMcaajCUGM/ZKCqqgSXM4LiPzKvWtBzVk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bkD7sW/dJMcaajCUGM/ZKCqqgSXM4LiPzKvWtBzVk/img.jpg"><img src="https://blog.kakaocdn.net/dn/bkD7sW/dJMcaajCUGM/ZKCqqgSXM4LiPzKvWtBzVk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbkD7sW%2FdJMcaajCUGM%2FZKCqqgSXM4LiPzKvWtBzVk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032995.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032996.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bjYrES/dJMcadN7Jf3/tMGoRVoStDQc6BWSUk9fBK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bjYrES/dJMcadN7Jf3/tMGoRVoStDQc6BWSUk9fBK/img.jpg"><img src="https://blog.kakaocdn.net/dn/bjYrES/dJMcadN7Jf3/tMGoRVoStDQc6BWSUk9fBK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbjYrES%2FdJMcadN7Jf3%2FtMGoRVoStDQc6BWSUk9fBK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032996.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032997.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/M5vJk/dJMb99ZkcXt/QtvT9RxtrxHLxAihlej7v1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/M5vJk/dJMb99ZkcXt/QtvT9RxtrxHLxAihlej7v1/img.jpg"><img src="https://blog.kakaocdn.net/dn/M5vJk/dJMb99ZkcXt/QtvT9RxtrxHLxAihlej7v1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FM5vJk%2FdJMb99ZkcXt%2FQtvT9RxtrxHLxAihlej7v1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032997.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032998.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/FLERT/dJMcafLZ5gb/2UE21PyjOBju0mCEVXzYK0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/FLERT/dJMcafLZ5gb/2UE21PyjOBju0mCEVXzYK0/img.jpg"><img src="https://blog.kakaocdn.net/dn/FLERT/dJMcafLZ5gb/2UE21PyjOBju0mCEVXzYK0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FFLERT%2FdJMcafLZ5gb%2F2UE21PyjOBju0mCEVXzYK0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032998.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000032999.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/UDxDY/dJMcahC2Axi/TrqhhcFqWmO1bidVC5GKE1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/UDxDY/dJMcahC2Axi/TrqhhcFqWmO1bidVC5GKE1/img.jpg"><img src="https://blog.kakaocdn.net/dn/UDxDY/dJMcahC2Axi/TrqhhcFqWmO1bidVC5GKE1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FUDxDY%2FdJMcahC2Axi%2FTrqhhcFqWmO1bidVC5GKE1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000032999.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033000.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/lmewt/dJMcafLZ5ga/aQTyMeeEqPBTaqNa5nijUk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/lmewt/dJMcafLZ5ga/aQTyMeeEqPBTaqNa5nijUk/img.jpg"><img src="https://blog.kakaocdn.net/dn/lmewt/dJMcafLZ5ga/aQTyMeeEqPBTaqNa5nijUk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Flmewt%2FdJMcafLZ5ga%2FaQTyMeeEqPBTaqNa5nijUk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033000.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033001.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/c41kbx/dJMcadtPGpy/kQTnSqlLqkztZFoztjzZE1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/c41kbx/dJMcadtPGpy/kQTnSqlLqkztZFoztjzZE1/img.jpg"><img src="https://blog.kakaocdn.net/dn/c41kbx/dJMcadtPGpy/kQTnSqlLqkztZFoztjzZE1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc41kbx%2FdJMcadtPGpy%2FkQTnSqlLqkztZFoztjzZE1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033001.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033002.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/b3CaLS/dJMcadtPGps/4EEZsfKNjuY3k3nKfIbtf1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/b3CaLS/dJMcadtPGps/4EEZsfKNjuY3k3nKfIbtf1/img.jpg"><img src="https://blog.kakaocdn.net/dn/b3CaLS/dJMcadtPGps/4EEZsfKNjuY3k3nKfIbtf1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb3CaLS%2FdJMcadtPGps%2F4EEZsfKNjuY3k3nKfIbtf1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033002.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033003.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/Z6T7e/dJMcadtPGpt/5MzoazK8HKMrUtj2K18lS1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/Z6T7e/dJMcadtPGpt/5MzoazK8HKMrUtj2K18lS1/img.jpg"><img src="https://blog.kakaocdn.net/dn/Z6T7e/dJMcadtPGpt/5MzoazK8HKMrUtj2K18lS1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZ6T7e%2FdJMcadtPGpt%2F5MzoazK8HKMrUtj2K18lS1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033003.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033004.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bJoTF2/dJMcahJPdoN/4UxXS4lsDeHYNhzcphj2Ck/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bJoTF2/dJMcahJPdoN/4UxXS4lsDeHYNhzcphj2Ck/img.jpg"><img src="https://blog.kakaocdn.net/dn/bJoTF2/dJMcahJPdoN/4UxXS4lsDeHYNhzcphj2Ck/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbJoTF2%2FdJMcahJPdoN%2F4UxXS4lsDeHYNhzcphj2Ck%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033004.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033005.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/VQZke/dJMcadtPGpu/5ffKMyk4J32WFilRpdPugk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/VQZke/dJMcadtPGpu/5ffKMyk4J32WFilRpdPugk/img.jpg"><img src="https://blog.kakaocdn.net/dn/VQZke/dJMcadtPGpu/5ffKMyk4J32WFilRpdPugk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVQZke%2FdJMcadtPGpu%2F5ffKMyk4J32WFilRpdPugk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033005.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033006.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bmmGk1/dJMcadtPGpr/V8N4OZGwvzaZjBvOBEXYvK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bmmGk1/dJMcadtPGpr/V8N4OZGwvzaZjBvOBEXYvK/img.jpg"><img src="https://blog.kakaocdn.net/dn/bmmGk1/dJMcadtPGpr/V8N4OZGwvzaZjBvOBEXYvK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbmmGk1%2FdJMcadtPGpr%2FV8N4OZGwvzaZjBvOBEXYvK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033006.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033007.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/FC7kU/dJMcacIwqzG/2z9NBx3bqGehPiRMyY1XkK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/FC7kU/dJMcacIwqzG/2z9NBx3bqGehPiRMyY1XkK/img.jpg"><img src="https://blog.kakaocdn.net/dn/FC7kU/dJMcacIwqzG/2z9NBx3bqGehPiRMyY1XkK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FFC7kU%2FdJMcacIwqzG%2F2z9NBx3bqGehPiRMyY1XkK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033007.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033008.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/rTkX1/dJMcagYqSXd/o0gLXSKzviykmankL6LWg0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/rTkX1/dJMcagYqSXd/o0gLXSKzviykmankL6LWg0/img.jpg"><img src="https://blog.kakaocdn.net/dn/rTkX1/dJMcagYqSXd/o0gLXSKzviykmankL6LWg0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FrTkX1%2FdJMcagYqSXd%2Fo0gLXSKzviykmankL6LWg0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033008.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033009.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/br8E1l/dJMcadtPGpw/uUGjErJg8cLiaVAZccsYnk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/br8E1l/dJMcadtPGpw/uUGjErJg8cLiaVAZccsYnk/img.jpg"><img src="https://blog.kakaocdn.net/dn/br8E1l/dJMcadtPGpw/uUGjErJg8cLiaVAZccsYnk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbr8E1l%2FdJMcadtPGpw%2FuUGjErJg8cLiaVAZccsYnk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033009.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033010.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/XA9wz/dJMcahJPdoP/RS4er4yFK9MLoTBS0hKTaK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/XA9wz/dJMcahJPdoP/RS4er4yFK9MLoTBS0hKTaK/img.jpg"><img src="https://blog.kakaocdn.net/dn/XA9wz/dJMcahJPdoP/RS4er4yFK9MLoTBS0hKTaK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FXA9wz%2FdJMcahJPdoP%2FRS4er4yFK9MLoTBS0hKTaK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033010.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033011.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/q6nea/dJMcadtPGpv/nUqVdmZ6r2lnCTCyYBSHnK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/q6nea/dJMcadtPGpv/nUqVdmZ6r2lnCTCyYBSHnK/img.jpg"><img src="https://blog.kakaocdn.net/dn/q6nea/dJMcadtPGpv/nUqVdmZ6r2lnCTCyYBSHnK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fq6nea%2FdJMcadtPGpv%2FnUqVdmZ6r2lnCTCyYBSHnK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033011.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033012.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/b72tYr/dJMcadtPGpx/VuDOBbgCrcC41V8USVnCwk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/b72tYr/dJMcadtPGpx/VuDOBbgCrcC41V8USVnCwk/img.jpg"><img src="https://blog.kakaocdn.net/dn/b72tYr/dJMcadtPGpx/VuDOBbgCrcC41V8USVnCwk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb72tYr%2FdJMcadtPGpx%2FVuDOBbgCrcC41V8USVnCwk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033012.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033013.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/clc4Vd/dJMcacIwqzF/DPmQKCXY90GbICpaeHyRlK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/clc4Vd/dJMcacIwqzF/DPmQKCXY90GbICpaeHyRlK/img.jpg"><img src="https://blog.kakaocdn.net/dn/clc4Vd/dJMcacIwqzF/DPmQKCXY90GbICpaeHyRlK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fclc4Vd%2FdJMcacIwqzF%2FDPmQKCXY90GbICpaeHyRlK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033013.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033014.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/cYyj6U/dJMcahJPdoM/85Lr17YY04M6bxl0cnc7QK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/cYyj6U/dJMcahJPdoM/85Lr17YY04M6bxl0cnc7QK/img.jpg"><img src="https://blog.kakaocdn.net/dn/cYyj6U/dJMcahJPdoM/85Lr17YY04M6bxl0cnc7QK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcYyj6U%2FdJMcahJPdoM%2F85Lr17YY04M6bxl0cnc7QK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033014.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033015.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/cDSDh6/dJMcahJPdoO/KKFIW3Ddbu9XOT2opqlkp1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/cDSDh6/dJMcahJPdoO/KKFIW3Ddbu9XOT2opqlkp1/img.jpg"><img src="https://blog.kakaocdn.net/dn/cDSDh6/dJMcahJPdoO/KKFIW3Ddbu9XOT2opqlkp1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcDSDh6%2FdJMcahJPdoO%2FKKFIW3Ddbu9XOT2opqlkp1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033015.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="1000033016.jpg" data-origin-width="1080" data-origin-height="1464"><span data-url="https://blog.kakaocdn.net/dn/bcDIKW/dJMcagYqSXc/ZAg3KXkxCskqa8azXz0R20/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bcDIKW/dJMcagYqSXc/ZAg3KXkxCskqa8azXz0R20/img.jpg"><img src="https://blog.kakaocdn.net/dn/bcDIKW/dJMcagYqSXc/ZAg3KXkxCskqa8azXz0R20/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbcDIKW%2FdJMcagYqSXc%2FZAg3KXkxCskqa8azXz0R20%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1464" data-filename="1000033016.jpg" data-origin-width="1080" data-origin-height="1464"/></span></figure> </p> 청년전용창업자금 AtoZ 최매슨생 https://0-1.kr/59 https://0-1.kr/59#entry59comment Mon, 29 Dec 2025 10:03:09 +0900 https://0-1.kr/56 <blockquote data-ke-style="style2"><b>청창자금 자격요건 확인</b></blockquote> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">근데..자격요건을 먼저 소개하지 않은 이유는 뭘까요?</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">공고문만으로 자격요건이 되는지 않되는 지는 접수 후 상담을 진행 한 후에&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">판단해도 늦이 않아서 입니다.</p> <p data-ke-size="size16">&nbsp;</p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style4" /> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">청년전용창업자금 이란 명칭때문에&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">모든 청년들이 접수가 가능한 것은 아닙니다.</p> <p data-ke-size="size16">&nbsp;</p> <blockquote data-ke-style="style3">중소벤처기업진흥공단은 [소기업], [중기업]&nbsp; 이상의 기업만 지원 가능<br /><br />단, 제조업과 중점지원분야는 예외로 [소상공인]도 지원 가능</blockquote> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">소기업 : 짧게 말해 직원 5명 이상을 1년간 유지한 기업 또는 중소기업확인서 상 소기업</p> <p data-ke-size="size16">(매출,종업원 기준으로 나뉨.)</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/bvALGe/btsO8Vaxl9k/QcPfPgs73pBjUVSOo5zkW0/003.%EC%A4%91%EC%A0%90%EC%A7%80%EC%9B%90%EB%B6%84%EC%95%BC%2825%EB%85%84%20%EA%B8%B0%EC%A4%80%29_%28p.1%7Ep.24%EA%B9%8C%EC%A7%80%29.pdf?attach=1&amp;knm=tfile.pdf" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">003.중점지원분야(25년 기준)_(p.1~p.24까지).pdf</span></div> <div class="size">0.63MB</div> </div> </a></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <blockquote style="color: #666666; text-align: left;" data-ke-style="style2">접수완료 및 상담 진행</blockquote> <p data-ke-size="size16">&nbsp;</p> <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/bo4P2o/btsO7HEpWLx/Xm2u6O50Hn7tToWrA4HJD0/001.2025%EB%85%84%20%EC%A0%95%EC%B1%85%EC%9E%90%EA%B8%88%20%EC%98%A8%EB%9D%BC%EC%9D%B8%20%EC%8B%A0%EC%B2%AD%20%EB%A7%A4%EB%89%B4%EC%96%BC%28%EA%B8%B0%EC%97%85%EC%9A%A9%29%20%281%29.pdf?attach=1&amp;knm=tfile.pdf" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">001.2025년 정책자금 온라인 신청 매뉴얼(기업용) (1).pdf</span></div> <div class="size">6.19MB</div> </div> </a></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">접수완료 후&nbsp;</p> <p><iframe src="https://www.youtube.com/embed/8_zuvcjGEiI?si=T2QiMUTnHrHv5Yxe" width="560" height="315" frameborder="" allowfullscreen="true"></iframe></p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">영상은 아래의 링크에서 확인 가능합니다. 다음 페이지에서 자세히 설명드릴게요</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16"><a href="https://youtu.be/8_zuvcjGEiI?si=T2QiMUTnHrHv5Yxe">https://youtu.be/8_zuvcjGEiI?si=T2QiMUTnHrHv5Yxe</a></p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> 청년전용창업자금 AtoZ 청창자금 최매슨생 https://0-1.kr/56 https://0-1.kr/56#entry56comment Tue, 8 Jul 2025 12:23:54 +0900 https://0-1.kr/55 <blockquote data-ke-style="style3">접수가능일 확인(매월 1일 홈페이지) -&gt; 접수일 접속 -&gt; 상담일 선점 -&gt; 공인인증서로 마무리<br />*공인인증서로 마무리를 하지 않은 경우 정상접수가 되지 않은 경우입니다.</blockquote> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">안녕하세요</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">중소벤처기업진흥공단의 청년전용창업자금 접수와 수령까지 가이드를 진행하고자 합니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">많은 분들이 비대면으로 변경되어 어려워 하시고</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">지원대상 및 정확한 정보가 많이 없어 혼란을 겪는 부분들이 많아</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">이렇게 직접 자세히 설명드리려고 합니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">앞으로 소개드릴 영상과 자료들은 모두 중소벤처기업진흥공단 홈페이지에&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">다 업로드 된 내용이오니 안심하시고 공유하시면 됩니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">중진공 홈페이지</p> <p data-ke-size="size16"><a href="https://www.kosmes.or.kr/" target="_blank" rel="noopener&nbsp;noreferrer">https://www.kosmes.or.kr/</a></p> <figure id="og_1751944178190" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="중소벤처기업진흥공단" data-og-description="" data-og-host="www.kosmes.or.kr" data-og-source-url="https://www.kosmes.or.kr/" data-og-url="https://www.kosmes.or.kr/" data-og-image=""><a href="https://www.kosmes.or.kr/" target="_blank" rel="noopener" data-source-url="https://www.kosmes.or.kr/"> <div class="og-image" style="background-image: url();">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">중소벤처기업진흥공단</p> <p class="og-desc" data-ke-size="size16">&nbsp;</p> <p class="og-host" data-ke-size="size16">www.kosmes.or.kr</p> </div> </a></figure> <p data-ke-size="size16">&nbsp;</p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <blockquote data-ke-style="style2"><b>청년전용창업자금 접수 시작</b></blockquote> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">접수가 되어야 뭐든 시작을 하죠?</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">많은 분들이 정상 접수가 되지 않았는데&nbsp;&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">사실 아래의 영상으로 모두 확인이 가능합니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">정말 이대로만 따라하시면 되는데 안보시네요.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">시간이 된다면 분 초로 나눠 설명드리겠습니다.</p> <p data-ke-size="size16">&nbsp;</p> <p><iframe src="https://www.youtube.com/embed/w0Q0eYzHAwk?si=a69RG6VRXKXjcTG6" width="560" height="315" frameborder="" allowfullscreen="true"></iframe></p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">보다 큰 화면은 링크와 함께 아래 영상을 확인하시면 됩니다.(동일영상)</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16"><a href="https://youtu.be/w0Q0eYzHAwk?si=Grb2M176XR8KP1tz" target="_blank" rel="noopener&nbsp;noreferrer">https://youtu.be/w0Q0eYzHAwk?si=Grb2M176XR8KP1tz</a></p> <figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=w0Q0eYzHAwk" data-video-thumbnail="https://scrap.kakaocdn.net/dn/bbU3UL/hyZftvHHu7/ZfT4NV29Wp8k0lzEXgaCi1/img.jpg?width=1280&amp;height=720&amp;face=188_322_278_420,https://scrap.kakaocdn.net/dn/yb4ER/hyZfvUADNs/9d3PEnrHkKsdq3jkOtEl7k/img.jpg?width=1280&amp;height=720&amp;face=188_322_278_420" data-video-width="860" data-video-height="484" data-video-origin-width="860" data-video-origin-height="484" data-ke-mobilestyle="widthContent" data-video-title="[2024ver] 중진공 정책자금 온라인 신청, 이대로 따라하세요 ~!" data-original-url=""><iframe src="https://www.youtube.com/embed/w0Q0eYzHAwk" width="860" height="484" frameborder="" allowfullscreen="true"></iframe> <figcaption style="display: none;"></figcaption> </figure> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">다음 장에선 자격요건에 관해 설명드릴게요!</p> 청년전용창업자금 AtoZ 청창자금 최매슨생 https://0-1.kr/55 https://0-1.kr/55#entry55comment Tue, 8 Jul 2025 12:12:59 +0900 https://0-1.kr/53 <p data-ke-size="size16">초기창업자를 위한 자금확보 로드맵입니다.</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_02.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/We74P/btsMNr3ivXj/2kDEv9mO5WY2Yk0SRfhrP0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/We74P/btsMNr3ivXj/2kDEv9mO5WY2Yk0SRfhrP0/img.jpg"><img src="https://blog.kakaocdn.net/dn/We74P/btsMNr3ivXj/2kDEv9mO5WY2Yk0SRfhrP0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWe74P%2FbtsMNr3ivXj%2F2kDEv9mO5WY2Yk0SRfhrP0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_02.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_03.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/4HYTl/btsMLVLqrin/qJ0QzRrnKtgg8LcSByrKOk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/4HYTl/btsMLVLqrin/qJ0QzRrnKtgg8LcSByrKOk/img.jpg"><img src="https://blog.kakaocdn.net/dn/4HYTl/btsMLVLqrin/qJ0QzRrnKtgg8LcSByrKOk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F4HYTl%2FbtsMLVLqrin%2FqJ0QzRrnKtgg8LcSByrKOk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_03.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_04.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/cKmFQc/btsMMCR0G7e/yxvB5mjlHKQlqZO0IsDyLk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/cKmFQc/btsMMCR0G7e/yxvB5mjlHKQlqZO0IsDyLk/img.jpg"><img src="https://blog.kakaocdn.net/dn/cKmFQc/btsMMCR0G7e/yxvB5mjlHKQlqZO0IsDyLk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcKmFQc%2FbtsMMCR0G7e%2FyxvB5mjlHKQlqZO0IsDyLk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_04.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_05.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/rxiTP/btsMLK4A8AQ/eadToEAYfWyoWJ1gZSjTnk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/rxiTP/btsMLK4A8AQ/eadToEAYfWyoWJ1gZSjTnk/img.jpg"><img src="https://blog.kakaocdn.net/dn/rxiTP/btsMLK4A8AQ/eadToEAYfWyoWJ1gZSjTnk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FrxiTP%2FbtsMLK4A8AQ%2FeadToEAYfWyoWJ1gZSjTnk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_05.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_06.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/mAY3b/btsMNpYIcb1/5U6KmgR3S3ugLWOv6MrQR1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/mAY3b/btsMNpYIcb1/5U6KmgR3S3ugLWOv6MrQR1/img.jpg"><img src="https://blog.kakaocdn.net/dn/mAY3b/btsMNpYIcb1/5U6KmgR3S3ugLWOv6MrQR1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmAY3b%2FbtsMNpYIcb1%2F5U6KmgR3S3ugLWOv6MrQR1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_06.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_07.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/CCSvC/btsMNr3iuB6/ckQRTVyHwDBbRVkhC9sgC0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/CCSvC/btsMNr3iuB6/ckQRTVyHwDBbRVkhC9sgC0/img.jpg"><img src="https://blog.kakaocdn.net/dn/CCSvC/btsMNr3iuB6/ckQRTVyHwDBbRVkhC9sgC0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FCCSvC%2FbtsMNr3iuB6%2FckQRTVyHwDBbRVkhC9sgC0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_07.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> </p> <p data-ke-size="size16">혁신 플랫폼 : <a href="https://www.mssmiv.com/portal/Main" target="_blank" rel="noopener&nbsp;noreferrer">https://www.mssmiv.com/portal/Main</a></p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_08.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/cd1Srb/btsMMHS4vDg/PoIbKaNKHymKFsBJ2fZwW1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/cd1Srb/btsMMHS4vDg/PoIbKaNKHymKFsBJ2fZwW1/img.jpg"><img src="https://blog.kakaocdn.net/dn/cd1Srb/btsMMHS4vDg/PoIbKaNKHymKFsBJ2fZwW1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcd1Srb%2FbtsMMHS4vDg%2FPoIbKaNKHymKFsBJ2fZwW1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_08.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_10.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/ckZUIN/btsMLvTUf4m/msUxUQDPPRAVlUNCOSqGaK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/ckZUIN/btsMLvTUf4m/msUxUQDPPRAVlUNCOSqGaK/img.jpg"><img src="https://blog.kakaocdn.net/dn/ckZUIN/btsMLvTUf4m/msUxUQDPPRAVlUNCOSqGaK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FckZUIN%2FbtsMLvTUf4m%2FmsUxUQDPPRAVlUNCOSqGaK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_10.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> </p> <p style="text-align: left;" data-ke-size="size16"><span style="color: #000000;"><a href="https://www.k-startup.go.kr/web/s/FRAgC7i5n">https://www.k-startup.go.kr/web/s/FRAgC7i5n</a></span></p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_11.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/bSZsZn/btsMMdStY2U/Oib0SDyH0awuEc1GcRWO8k/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bSZsZn/btsMMdStY2U/Oib0SDyH0awuEc1GcRWO8k/img.jpg"><img src="https://blog.kakaocdn.net/dn/bSZsZn/btsMMdStY2U/Oib0SDyH0awuEc1GcRWO8k/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbSZsZn%2FbtsMMdStY2U%2FOib0SDyH0awuEc1GcRWO8k%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_11.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_12.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/b2NUuU/btsMKSoqnOG/9eCnwDx3n2h6Wnm5akKul1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/b2NUuU/btsMKSoqnOG/9eCnwDx3n2h6Wnm5akKul1/img.jpg"><img src="https://blog.kakaocdn.net/dn/b2NUuU/btsMKSoqnOG/9eCnwDx3n2h6Wnm5akKul1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb2NUuU%2FbtsMKSoqnOG%2F9eCnwDx3n2h6Wnm5akKul1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_12.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_13.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/cHXf6G/btsMMzucRwu/KN57AB5PkdkOKzafPJN9rK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/cHXf6G/btsMMzucRwu/KN57AB5PkdkOKzafPJN9rK/img.jpg"><img src="https://blog.kakaocdn.net/dn/cHXf6G/btsMMzucRwu/KN57AB5PkdkOKzafPJN9rK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcHXf6G%2FbtsMMzucRwu%2FKN57AB5PkdkOKzafPJN9rK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_13.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_14.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/boNAYo/btsMME3iYkG/LkwwNYWCNiVn43H5ND586k/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/boNAYo/btsMME3iYkG/LkwwNYWCNiVn43H5ND586k/img.jpg"><img src="https://blog.kakaocdn.net/dn/boNAYo/btsMME3iYkG/LkwwNYWCNiVn43H5ND586k/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FboNAYo%2FbtsMME3iYkG%2FLkwwNYWCNiVn43H5ND586k%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_14.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16"><span style="color: #000000;">25</span><span style="color: #000000;">년 중앙부처 및 지자체 창업지원사업 통합공고 </span><span style="color: #000000;">:</span></p> <p style="text-align: left;" data-ke-size="size16"><span style="color: #000000;"><a href="https://www.k-startup.go.kr/web/s/XhqLSnDO">https://www.k-startup.go.kr/web/s/XhqLSnDO</a></span></p> <p style="text-align: left;" data-ke-size="size16"><span style="color: #000000;">2</span><span style="color: #000000;">5</span><span style="color: #000000;">년&nbsp;생애최초 청년창업 지원 창업자 모집 공고 </span><span style="color: #000000;">: (</span><span style="color: #000000;">중심대학과 </span><span style="color: #000000;">창진원</span><span style="color: #000000;"> 공지 구분</span><span style="color: #000000;">)</span></p> <p style="text-align: left;" data-ke-size="size16"><span style="color: #000000;"><span>&nbsp;</span><a href="https://www.k-startup.go.kr/web/s/Oh4twbQA5">https://www.k-startup.go.kr/web/s/Oh4twbQA5</a> </span></p> <p style="text-align: left;" data-ke-size="size16"><span style="color: #000000;">2</span><span style="color: #000000;">5</span><span style="color: #000000;">년&nbsp;예비창업패키지&nbsp;일반분야 주관기관 모집공고</span></p> <p style="text-align: left;" data-ke-size="size16"><span style="color: #000000;"><a href="https://www.k-startup.go.kr/web/s/dsNewbQA5">https://www.k-startup.go.kr/web/s/dsNewbQA5</a></span></p> <p style="text-align: left;" data-ke-size="size16"><span style="color: #000000;">2</span><span style="color: #000000;">5</span><span style="color: #000000;">년&nbsp;</span><span style="color: #000000;">신사업창업사관학교 예비창업자 모집</span><span style="color: #000000;"> </span><span style="color: #000000;">: </span></p> <p style="text-align: left;" data-ke-size="size16"><span style="color: #000000;"><a href="https://www.k-startup.go.kr/web/s/kHOPibQA5">https://www.k-startup.go.kr/web/s/kHOPibQA5</a> (</span><span style="color: #000000;">소진공</span><span style="color: #000000;">)</span></p> <p style="text-align: left;" data-ke-size="size16"><span style="color: #000000;">2</span><span style="color: #000000;">5</span><span style="color: #000000;">년&nbsp;</span><span style="color: #000000;">초기창업패키지 창업기업 모집</span><span style="color: #000000;"> </span><span style="color: #000000;">: <a href="https://www.k-startup.go.kr/web/s/A5hOibQA5">https://www.k-startup.go.kr/web/s/A5hOibQA5</a></span></p> <p style="text-align: left;" data-ke-size="size16"><span style="color: #000000;">25</span><span style="color: #000000;">년 창업도약패키지 </span><span style="color: #000000;">: <a href="https://www.k-startup.go.kr/web/s/LycOibQA5">https://www.k-startup.go.kr/web/s/LycOibQA5</a></span></p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_15.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/E5MwE/btsMLLbewPS/l8PHyI7oXoyEpuIwkItow0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/E5MwE/btsMLLbewPS/l8PHyI7oXoyEpuIwkItow0/img.jpg"><img src="https://blog.kakaocdn.net/dn/E5MwE/btsMLLbewPS/l8PHyI7oXoyEpuIwkItow0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FE5MwE%2FbtsMLLbewPS%2Fl8PHyI7oXoyEpuIwkItow0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_15.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_16.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/cVlDic/btsMMA7HDk2/MeldSiPULmU0DQZOzMNf0K/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/cVlDic/btsMMA7HDk2/MeldSiPULmU0DQZOzMNf0K/img.jpg"><img src="https://blog.kakaocdn.net/dn/cVlDic/btsMMA7HDk2/MeldSiPULmU0DQZOzMNf0K/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcVlDic%2FbtsMMA7HDk2%2FMeldSiPULmU0DQZOzMNf0K%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_16.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_17.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/b4xrNV/btsMMJQUpcu/8RkN1ULtXKTHWPkfjA8upk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/b4xrNV/btsMMJQUpcu/8RkN1ULtXKTHWPkfjA8upk/img.jpg"><img src="https://blog.kakaocdn.net/dn/b4xrNV/btsMMJQUpcu/8RkN1ULtXKTHWPkfjA8upk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb4xrNV%2FbtsMMJQUpcu%2F8RkN1ULtXKTHWPkfjA8upk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_17.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_19.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/bpqE2O/btsMMGmvfs9/5G8C800zd0PfjUPpPVZfY1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bpqE2O/btsMMGmvfs9/5G8C800zd0PfjUPpPVZfY1/img.jpg"><img src="https://blog.kakaocdn.net/dn/bpqE2O/btsMMGmvfs9/5G8C800zd0PfjUPpPVZfY1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbpqE2O%2FbtsMMGmvfs9%2F5G8C800zd0PfjUPpPVZfY1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_19.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_20.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/bTDdUK/btsMNfaV1Ti/HYomx9E62e7WD1Ubc1xml1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bTDdUK/btsMNfaV1Ti/HYomx9E62e7WD1Ubc1xml1/img.jpg"><img src="https://blog.kakaocdn.net/dn/bTDdUK/btsMNfaV1Ti/HYomx9E62e7WD1Ubc1xml1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbTDdUK%2FbtsMNfaV1Ti%2FHYomx9E62e7WD1Ubc1xml1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_20.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;amp;투자)_VF(250320)_페이지_21.jpg" data-origin-width="2667" data-origin-height="1500"><span data-url="https://blog.kakaocdn.net/dn/CGJIR/btsMMfvZOrf/jJylTXvzZaS4689YeP8HWk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/CGJIR/btsMMfvZOrf/jJylTXvzZaS4689YeP8HWk/img.jpg"><img src="https://blog.kakaocdn.net/dn/CGJIR/btsMMfvZOrf/jJylTXvzZaS4689YeP8HWk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FCGJIR%2FbtsMMfvZOrf%2FjJylTXvzZaS4689YeP8HWk%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2667" height="1500" data-filename="2025 초기창업자의 자금확보 로드맵(창업지원금vs융자&amp;투자)_VF(250320)_페이지_21.jpg" data-origin-width="2667" data-origin-height="1500"/></span></figure> </p> 스타트업 운영TIP/정부지원사업 TIP 최매슨생 https://0-1.kr/53 https://0-1.kr/53#entry53comment Sun, 16 Mar 2025 13:32:39 +0900 https://0-1.kr/52 <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-origin-width="1080" data-origin-height="1080"><span data-url="https://blog.kakaocdn.net/dn/uuPGt/btsKeCHG7cx/M8Yxr8dFQUoreSOoI4kjK1/img.png" data-phocus="https://blog.kakaocdn.net/dn/uuPGt/btsKeCHG7cx/M8Yxr8dFQUoreSOoI4kjK1/img.png"><img src="https://blog.kakaocdn.net/dn/uuPGt/btsKeCHG7cx/M8Yxr8dFQUoreSOoI4kjK1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuuPGt%2FbtsKeCHG7cx%2FM8Yxr8dFQUoreSOoI4kjK1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1080" height="1080" data-origin-width="1080" data-origin-height="1080"/></span></figure> </p> <p style="text-align: center;" data-ke-size="size16"><br />스타트업EX 여요!<br /><br />24년이 마무리 되어가는 시점에서 갑자기 24년자료라<br /><br />많이 당황하셨을건데요<br /><br /></p> <figure data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="friends1" data-emoticon-name="009" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/009.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/009.gif" width="150" /></figure> <p style="text-align: center;" data-ke-size="size16">25년에도 응용할 수 있는<br /><br />창업을 지원하는 기관을 24년 자료로 정리해 볼까 합니다.<br /><br />해당자료는 매년 1월 k-startup이란 사이트에서<br /><br />업로드하고 있으며 방대한 자료다 보니<br /><br />그냥 넘어가는 경우가 있는데<br /><br />본인이 적극 활용할 수 있는 팁을 알려드리고자 합니다.<br /><br /><br /></p> <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/OwtzD/btsKeEL5XCf/cpNlkt2aq1VpSR7GPcmZDK/20241022_131654.pdf?attach=1&amp;knm=tfile.pdf" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">20241022_131654.pdf</span></div> <div class="size">14.28MB</div> </div> </a></figure> </p> <p style="text-align: center;" data-ke-size="size16"><br />해당 자료는 <br />[24년도 중앙부처 및 기초광역지자체 창업지원사업안내]<br /><br />라는 책자인데요.<br /><br />여기 나와있는 센터 및 기관들이 정부가 자금을 지원하여 운영하는 기관이라 보심 됩니다.<br /><br />해당 자료 활용팁은 0-4.co.kr/49 에 <br />자세히 정리해놨으니 참고하시구요<br /><br />이제부터<br />여기 있는 기관들을 앞으로 하나하나 뜯어 볼텐데요<br /><br />해당 자료를 다운 받아 대표님이 운영하는 대표 키워드로 기관을 검색하시면 됩니다.<br /><br />가령 [디자인업] 을 운영하고 있으시면 <br /><br />#<b>콘텐츠, #디자인<br /><br /></b>등 으로 검색해보시구요. <br /><br />스포츠 관련 사업을 운영하시면<br /><br />#<b>스포츠, #운동, #체육, #헬스 </b><br /><br />등으로 키워드를 검색해 보시면<br />대표님 아이템을 지원하고 있는<br /><br />다소 생소한 기관까지 검색이 될겁니다.<br /><br />이제 한번 같이<br />하나하나 뜯어보시죠.ㅎ</p> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <figure data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="friends1" data-emoticon-name="025" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/025.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/025.gif" width="150" /></figure> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> 창업지원기관소개 최매슨생 https://0-1.kr/52 https://0-1.kr/52#entry52comment Tue, 22 Oct 2024 13:31:39 +0900 https://0-1.kr/51 <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드2.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/bMjkHh/btsIRfzipyj/ek5ZulvVOVinbzmHBYnnf0/img.png" data-phocus="https://blog.kakaocdn.net/dn/bMjkHh/btsIRfzipyj/ek5ZulvVOVinbzmHBYnnf0/img.png"><img src="https://blog.kakaocdn.net/dn/bMjkHh/btsIRfzipyj/ek5ZulvVOVinbzmHBYnnf0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbMjkHh%2FbtsIRfzipyj%2Fek5ZulvVOVinbzmHBYnnf0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드2.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드4.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/zBugx/btsIRUOZLKg/9vuBBk4E4OwMkXcg1bde4k/img.png" data-phocus="https://blog.kakaocdn.net/dn/zBugx/btsIRUOZLKg/9vuBBk4E4OwMkXcg1bde4k/img.png"><img src="https://blog.kakaocdn.net/dn/zBugx/btsIRUOZLKg/9vuBBk4E4OwMkXcg1bde4k/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzBugx%2FbtsIRUOZLKg%2F9vuBBk4E4OwMkXcg1bde4k%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드4.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드5.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/qO8GL/btsIRU2wUea/KHKPHInyM0POUl1t4Oy9Wk/img.png" data-phocus="https://blog.kakaocdn.net/dn/qO8GL/btsIRU2wUea/KHKPHInyM0POUl1t4Oy9Wk/img.png"><img src="https://blog.kakaocdn.net/dn/qO8GL/btsIRU2wUea/KHKPHInyM0POUl1t4Oy9Wk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqO8GL%2FbtsIRU2wUea%2FKHKPHInyM0POUl1t4Oy9Wk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드5.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드6.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/rPbm0/btsIPUiFYSG/M3R0xf7hEi6wcNavFKK4qk/img.png" data-phocus="https://blog.kakaocdn.net/dn/rPbm0/btsIPUiFYSG/M3R0xf7hEi6wcNavFKK4qk/img.png"><img src="https://blog.kakaocdn.net/dn/rPbm0/btsIPUiFYSG/M3R0xf7hEi6wcNavFKK4qk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FrPbm0%2FbtsIPUiFYSG%2FM3R0xf7hEi6wcNavFKK4qk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드6.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드7.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/Wkqs6/btsIPwCstda/pfmzJSCZf25SQd97NQG9lK/img.png" data-phocus="https://blog.kakaocdn.net/dn/Wkqs6/btsIPwCstda/pfmzJSCZf25SQd97NQG9lK/img.png"><img src="https://blog.kakaocdn.net/dn/Wkqs6/btsIPwCstda/pfmzJSCZf25SQd97NQG9lK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWkqs6%2FbtsIPwCstda%2FpfmzJSCZf25SQd97NQG9lK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드7.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드8.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/bfAiSH/btsIRupub0o/0ClEh03jvnjF3YRLUbLBlK/img.png" data-phocus="https://blog.kakaocdn.net/dn/bfAiSH/btsIRupub0o/0ClEh03jvnjF3YRLUbLBlK/img.png"><img src="https://blog.kakaocdn.net/dn/bfAiSH/btsIRupub0o/0ClEh03jvnjF3YRLUbLBlK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbfAiSH%2FbtsIRupub0o%2F0ClEh03jvnjF3YRLUbLBlK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드8.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드9.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/cuqRAx/btsIPtFOB27/LsvTKM39qhYk0TkqChW9j1/img.png" data-phocus="https://blog.kakaocdn.net/dn/cuqRAx/btsIPtFOB27/LsvTKM39qhYk0TkqChW9j1/img.png"><img src="https://blog.kakaocdn.net/dn/cuqRAx/btsIPtFOB27/LsvTKM39qhYk0TkqChW9j1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcuqRAx%2FbtsIPtFOB27%2FLsvTKM39qhYk0TkqChW9j1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드9.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드10.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/cXziH9/btsIQy0qelA/4kkjXjCw1IPaWoCwx2XDa0/img.png" data-phocus="https://blog.kakaocdn.net/dn/cXziH9/btsIQy0qelA/4kkjXjCw1IPaWoCwx2XDa0/img.png"><img src="https://blog.kakaocdn.net/dn/cXziH9/btsIQy0qelA/4kkjXjCw1IPaWoCwx2XDa0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcXziH9%2FbtsIQy0qelA%2F4kkjXjCw1IPaWoCwx2XDa0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드10.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드11.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/o7Ok3/btsIPteJb5p/jMWwWjpiIz52wRbYZzJv81/img.png" data-phocus="https://blog.kakaocdn.net/dn/o7Ok3/btsIPteJb5p/jMWwWjpiIz52wRbYZzJv81/img.png"><img src="https://blog.kakaocdn.net/dn/o7Ok3/btsIPteJb5p/jMWwWjpiIz52wRbYZzJv81/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fo7Ok3%2FbtsIPteJb5p%2FjMWwWjpiIz52wRbYZzJv81%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드11.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드12.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/wMB6A/btsIRV1rgJa/Le0PuSHo2GfSx1GrvjNkg1/img.png" data-phocus="https://blog.kakaocdn.net/dn/wMB6A/btsIRV1rgJa/Le0PuSHo2GfSx1GrvjNkg1/img.png"><img src="https://blog.kakaocdn.net/dn/wMB6A/btsIRV1rgJa/Le0PuSHo2GfSx1GrvjNkg1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FwMB6A%2FbtsIRV1rgJa%2FLe0PuSHo2GfSx1GrvjNkg1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드12.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드13.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/ri3Tf/btsIOU4Mm71/dsNyoxZ46foZam0as3jkX1/img.png" data-phocus="https://blog.kakaocdn.net/dn/ri3Tf/btsIOU4Mm71/dsNyoxZ46foZam0as3jkX1/img.png"><img src="https://blog.kakaocdn.net/dn/ri3Tf/btsIOU4Mm71/dsNyoxZ46foZam0as3jkX1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fri3Tf%2FbtsIOU4Mm71%2FdsNyoxZ46foZam0as3jkX1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드13.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드14.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/B3y17/btsIRxsYvUv/L0MPLSQDOR0VgYMzLVHE6K/img.png" data-phocus="https://blog.kakaocdn.net/dn/B3y17/btsIRxsYvUv/L0MPLSQDOR0VgYMzLVHE6K/img.png"><img src="https://blog.kakaocdn.net/dn/B3y17/btsIRxsYvUv/L0MPLSQDOR0VgYMzLVHE6K/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FB3y17%2FbtsIRxsYvUv%2FL0MPLSQDOR0VgYMzLVHE6K%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드14.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드16.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/RtGMR/btsIO1Jx7lY/LZAioKKFMK1BEnlnek8zjk/img.png" data-phocus="https://blog.kakaocdn.net/dn/RtGMR/btsIO1Jx7lY/LZAioKKFMK1BEnlnek8zjk/img.png"><img src="https://blog.kakaocdn.net/dn/RtGMR/btsIO1Jx7lY/LZAioKKFMK1BEnlnek8zjk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FRtGMR%2FbtsIO1Jx7lY%2FLZAioKKFMK1BEnlnek8zjk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드16.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드17.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/bedu4M/btsIQwVRqf6/vV9NQsbKRKQ9EVI3z4Xjb0/img.png" data-phocus="https://blog.kakaocdn.net/dn/bedu4M/btsIQwVRqf6/vV9NQsbKRKQ9EVI3z4Xjb0/img.png"><img src="https://blog.kakaocdn.net/dn/bedu4M/btsIQwVRqf6/vV9NQsbKRKQ9EVI3z4Xjb0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbedu4M%2FbtsIQwVRqf6%2FvV9NQsbKRKQ9EVI3z4Xjb0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드17.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드18.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/LyULx/btsIQwnY41x/tCm1w1PQstMicYYfgSzKP1/img.png" data-phocus="https://blog.kakaocdn.net/dn/LyULx/btsIQwnY41x/tCm1w1PQstMicYYfgSzKP1/img.png"><img src="https://blog.kakaocdn.net/dn/LyULx/btsIQwnY41x/tCm1w1PQstMicYYfgSzKP1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FLyULx%2FbtsIQwnY41x%2FtCm1w1PQstMicYYfgSzKP1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드18.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드19.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/brsOLT/btsIPwCstec/L3en1g8aXu6jUkkxFInmU1/img.png" data-phocus="https://blog.kakaocdn.net/dn/brsOLT/btsIPwCstec/L3en1g8aXu6jUkkxFInmU1/img.png"><img src="https://blog.kakaocdn.net/dn/brsOLT/btsIPwCstec/L3en1g8aXu6jUkkxFInmU1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbrsOLT%2FbtsIPwCstec%2FL3en1g8aXu6jUkkxFInmU1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드19.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드20.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/7Yt5G/btsIPME51Ys/DNqkVRVnuWjQWC3evcqz71/img.png" data-phocus="https://blog.kakaocdn.net/dn/7Yt5G/btsIPME51Ys/DNqkVRVnuWjQWC3evcqz71/img.png"><img src="https://blog.kakaocdn.net/dn/7Yt5G/btsIPME51Ys/DNqkVRVnuWjQWC3evcqz71/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F7Yt5G%2FbtsIPME51Ys%2FDNqkVRVnuWjQWC3evcqz71%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드20.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드21.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/sNAiq/btsIPiRTBVY/z9Afl4rUWccrLNnVzIF0S1/img.png" data-phocus="https://blog.kakaocdn.net/dn/sNAiq/btsIPiRTBVY/z9Afl4rUWccrLNnVzIF0S1/img.png"><img src="https://blog.kakaocdn.net/dn/sNAiq/btsIPiRTBVY/z9Afl4rUWccrLNnVzIF0S1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FsNAiq%2FbtsIPiRTBVY%2Fz9Afl4rUWccrLNnVzIF0S1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드21.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드22.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/bmsGEl/btsIPteJb7r/ISpgd5LcMGNSEswm3oNrL0/img.png" data-phocus="https://blog.kakaocdn.net/dn/bmsGEl/btsIPteJb7r/ISpgd5LcMGNSEswm3oNrL0/img.png"><img src="https://blog.kakaocdn.net/dn/bmsGEl/btsIPteJb7r/ISpgd5LcMGNSEswm3oNrL0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbmsGEl%2FbtsIPteJb7r%2FISpgd5LcMGNSEswm3oNrL0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드22.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드23.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/bCXrHU/btsIOVbxPvx/mK3hT8puoxiUsicIMDdks1/img.png" data-phocus="https://blog.kakaocdn.net/dn/bCXrHU/btsIOVbxPvx/mK3hT8puoxiUsicIMDdks1/img.png"><img src="https://blog.kakaocdn.net/dn/bCXrHU/btsIOVbxPvx/mK3hT8puoxiUsicIMDdks1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbCXrHU%2FbtsIOVbxPvx%2FmK3hT8puoxiUsicIMDdks1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드23.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드24.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/bbokNg/btsIQJm5Uyy/0dbrWYjGLijJOrRq6fRHAK/img.png" data-phocus="https://blog.kakaocdn.net/dn/bbokNg/btsIQJm5Uyy/0dbrWYjGLijJOrRq6fRHAK/img.png"><img src="https://blog.kakaocdn.net/dn/bbokNg/btsIQJm5Uyy/0dbrWYjGLijJOrRq6fRHAK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbbokNg%2FbtsIQJm5Uyy%2F0dbrWYjGLijJOrRq6fRHAK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드24.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드25.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/W6FAZ/btsIRwgvZIB/p3JtCf0KeiHAeZveSS3Ai0/img.png" data-phocus="https://blog.kakaocdn.net/dn/W6FAZ/btsIRwgvZIB/p3JtCf0KeiHAeZveSS3Ai0/img.png"><img src="https://blog.kakaocdn.net/dn/W6FAZ/btsIRwgvZIB/p3JtCf0KeiHAeZveSS3Ai0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FW6FAZ%2FbtsIRwgvZIB%2Fp3JtCf0KeiHAeZveSS3Ai0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드25.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드26.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/lyRlh/btsIRf0mJq0/x3kdUeSALcKGouTy5p6kI1/img.png" data-phocus="https://blog.kakaocdn.net/dn/lyRlh/btsIRf0mJq0/x3kdUeSALcKGouTy5p6kI1/img.png"><img src="https://blog.kakaocdn.net/dn/lyRlh/btsIRf0mJq0/x3kdUeSALcKGouTy5p6kI1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlyRlh%2FbtsIRf0mJq0%2Fx3kdUeSALcKGouTy5p6kI1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드26.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드27.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/doBVZE/btsIRpognRn/KzvnwLDRoeYj0M0a9GEYLK/img.png" data-phocus="https://blog.kakaocdn.net/dn/doBVZE/btsIRpognRn/KzvnwLDRoeYj0M0a9GEYLK/img.png"><img src="https://blog.kakaocdn.net/dn/doBVZE/btsIRpognRn/KzvnwLDRoeYj0M0a9GEYLK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdoBVZE%2FbtsIRpognRn%2FKzvnwLDRoeYj0M0a9GEYLK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드27.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드28.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/HANt0/btsIQeA643E/wwiACsp9mVZLnYGtluUv7K/img.png" data-phocus="https://blog.kakaocdn.net/dn/HANt0/btsIQeA643E/wwiACsp9mVZLnYGtluUv7K/img.png"><img src="https://blog.kakaocdn.net/dn/HANt0/btsIQeA643E/wwiACsp9mVZLnYGtluUv7K/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHANt0%2FbtsIQeA643E%2FwwiACsp9mVZLnYGtluUv7K%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드28.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="슬라이드29.PNG" data-origin-width="1280" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/bpEyP4/btsIQpoW0qS/c76pJKAc03Rlcm02QjSfvK/img.png" data-phocus="https://blog.kakaocdn.net/dn/bpEyP4/btsIQpoW0qS/c76pJKAc03Rlcm02QjSfvK/img.png"><img src="https://blog.kakaocdn.net/dn/bpEyP4/btsIQpoW0qS/c76pJKAc03Rlcm02QjSfvK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbpEyP4%2FbtsIQpoW0qS%2Fc76pJKAc03Rlcm02QjSfvK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="슬라이드29.PNG" data-origin-width="1280" data-origin-height="720"/></span></figure> <figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="2024 지역창업지원 스케쥴링_V8(240728).png" data-origin-width="1280" data-origin-height="720"><a href="https://drive.google.com/file/d/1xMrT5DuJWLsAzvlbJwA48wzNjvFqllmB/view?usp=sharing" target="_blank" title="down"><img src="https://blog.kakaocdn.net/dn/tNh5E/btsIQocuKWa/tg9MKah0KTcURbVI3XQqV0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtNh5E%2FbtsIQocuKWa%2Ftg9MKah0KTcURbVI3XQqV0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1280" height="720" data-filename="2024 지역창업지원 스케쥴링_V8(240728).png" data-origin-width="1280" data-origin-height="720"/></a></figure> <figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/b0q3Z0/btsIO4M3zZw/mK7qONrnDhdsQrz8x3pu3k/2024%20%EC%A7%80%EC%97%AD%EC%B0%BD%EC%97%85%EC%A7%80%EC%9B%90%20%EC%8A%A4%EC%BC%80%EC%A5%B4%EB%A7%81_V8%28240728%29.pdf?attach=1&amp;knm=tfile.pdf" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">2024 지역창업지원 스케쥴링_V8(240728).pdf</span></div> <div class="size">1.42MB</div> </div> </a></figure> </p> 스타트업 운영TIP/정부지원사업 TIP 최매슨생 https://0-1.kr/51 https://0-1.kr/51#entry51comment Mon, 29 Jul 2024 08:10:24 +0900 https://0-1.kr/50 <p style="text-align: center;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">개인적으로 첫 창업의 시작은</span></p> <p style="text-align: center;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">매출세금계산서를</span></p> <p style="text-align: center;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">끊어보는 것이 시작이라 생각합니다.</span><span style="font-family: 'Nanum Gothic';"></span><span style="font-family: 'Nanum Gothic';"></span><span style="font-family: 'Nanum Gothic';"></span></p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">사업자등록증은 첫 세금계산서를</span></p> <p style="text-align: center;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">발행하고자 할때</span></p> <p style="text-align: center;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">내시는 것을 추천드립니다.</span></p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style2" /> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">대출, 투자, 정부지원사업 수주시</span></p> <p style="text-align: center;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">매출증빙을 가장 많이 요청합니다.</span></p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">발표는 내일인데 어제 매출이 났으면</span></p> <p style="text-align: center;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">해당파일로 증빙이 가능합니다.</span></p> <figure contenteditable="false" data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="friends1" data-emoticon-name="001" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/001.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/001.gif" width="150" /></figure> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">[매출전자세금계산서합계표]</span></p> <p style="text-align: center;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">[매출전자세금계산서합계표] 매출처별</span></p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="01.전자세금계산서합계표.jpg" data-origin-width="2339" data-origin-height="1654"><span data-url="https://blog.kakaocdn.net/dn/Hzelg/btsHqjKIsf4/oBpUjmITNGoTGfhR8lUEtK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/Hzelg/btsHqjKIsf4/oBpUjmITNGoTGfhR8lUEtK/img.jpg" data-alt="매출세금계산서합계표"><img src="https://blog.kakaocdn.net/dn/Hzelg/btsHqjKIsf4/oBpUjmITNGoTGfhR8lUEtK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHzelg%2FbtsHqjKIsf4%2FoBpUjmITNGoTGfhR8lUEtK%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2339" height="1654" data-filename="01.전자세금계산서합계표.jpg" data-origin-width="2339" data-origin-height="1654"/></span><figcaption>매출세금계산서합계표</figcaption> </figure> </p> <p style="text-align: center;" data-ke-size="size16">매출세금계산서 합계표는 거래기간동안</p> <p style="text-align: center;" data-ke-size="size16">매출금액만 표기가 가능하죠.</p> <p style="text-align: center;" data-ke-size="size16">매출처 공개가 꺼려지면 이걸로 증빙하시면 되고</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">업종구분, 매출처 표기를 원하는 기관에는</p> <p style="text-align: center;" data-ke-size="size16">아래의 합계표 매출처별로 끊으시면 됩니다.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">걍 두개다 끊어주시면 담당자가&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">알아서 쓰실거에요.ㅎ 가급적</p> <p style="text-align: center;" data-ke-size="size16">둘다 끊어서 보내주세요.</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="02.세금계산서_매출처별계산서합계표(전자).jpg" data-origin-width="1654" data-origin-height="2339"><span data-url="https://blog.kakaocdn.net/dn/7G5Db/btsHqNqXAnu/cqaKu87JNGZnqlFGhRv1C1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/7G5Db/btsHqNqXAnu/cqaKu87JNGZnqlFGhRv1C1/img.jpg" data-alt="매출세금계산서합계표매출처별"><img src="https://blog.kakaocdn.net/dn/7G5Db/btsHqNqXAnu/cqaKu87JNGZnqlFGhRv1C1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F7G5Db%2FbtsHqNqXAnu%2FcqaKu87JNGZnqlFGhRv1C1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1654" height="2339" data-filename="02.세금계산서_매출처별계산서합계표(전자).jpg" data-origin-width="1654" data-origin-height="2339"/></span><figcaption>매출세금계산서합계표매출처별</figcaption> </figure> </p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <p style="text-align: center;" data-ke-size="size16">발급방법은 아래를 따라해주시면&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">됩니다.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">홈텍스가 매년 개편을 해서</p> <p style="text-align: center;" data-ke-size="size16">젤 쉬운 방법은 검색어로 찾는 것입니다.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">아래와 같이</p> <p style="text-align: center;" data-ke-size="size16">"세금계산서합계표" 라고 검색하시면</p> <p style="text-align: center;" data-ke-size="size16">알와 같이 ~ 제출/내역조회가 뜨니 저걸 선택해주세요</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="000001.png" data-origin-width="1336" data-origin-height="524"><span data-url="https://blog.kakaocdn.net/dn/cqaHBv/btsHpNZNKgF/gCAkhE9iK0Z5lNVph8X061/img.png" data-phocus="https://blog.kakaocdn.net/dn/cqaHBv/btsHpNZNKgF/gCAkhE9iK0Z5lNVph8X061/img.png"><img src="https://blog.kakaocdn.net/dn/cqaHBv/btsHpNZNKgF/gCAkhE9iK0Z5lNVph8X061/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcqaHBv%2FbtsHpNZNKgF%2FgCAkhE9iK0Z5lNVph8X061%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1336" height="524" data-filename="000001.png" data-origin-width="1336" data-origin-height="524"/></span></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> 스타트업 운영TIP/문서작성&amp;증빙 TIP 매출세금계산서합계표 매출증빙 최매슨생 https://0-1.kr/50 https://0-1.kr/50#entry50comment Thu, 16 May 2024 11:53:12 +0900 https://0-1.kr/49 <p data-ke-size="size16">매년 1월 초</p> <p data-ke-size="size16">중소벤처기업부에서는 창업자금을 뿌립니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">어떻게 뿌리는 지는 공개해야되겠죠?</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">여기서 안내됩니다. 24년 링크를 공유해 드릴게요.</p> <p data-ke-size="size16"><a href="https://me2.do/GZsLTnyo" target="_blank" rel="noopener&nbsp;noreferrer">https://me2.do/GZsLTnyo</a></p> <figure id="og_1708846428422" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="2024년 중앙부처 및 지자체 창업지원사업 통합공고" data-og-description="2024년 중앙부처 및 지자체 창업지원사업 통합공고" data-og-host="www.k-startup.go.kr" data-og-source-url="https://me2.do/GZsLTnyo" data-og-url="https://www.k-startup.go.kr/web/contents/bizpbanc-ongoing.do?schM=view&amp;pbancSn=167274#none" data-og-image="https://scrap.kakaocdn.net/dn/bqeI2V/hyVqoDA1Fe/cCg96juaEpATlefijC50Kk/img.jpg?width=359&amp;height=250&amp;face=0_0_359_250"><a href="https://me2.do/GZsLTnyo" target="_blank" rel="noopener" data-source-url="https://me2.do/GZsLTnyo"> <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/bqeI2V/hyVqoDA1Fe/cCg96juaEpATlefijC50Kk/img.jpg?width=359&amp;height=250&amp;face=0_0_359_250');">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">2024년 중앙부처 및 지자체 창업지원사업 통합공고</p> <p class="og-desc" data-ke-size="size16">2024년 중앙부처 및 지자체 창업지원사업 통합공고</p> <p class="og-host" data-ke-size="size16">www.k-startup.go.kr</p> </div> </a></figure> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">매년 중기부 홈페이지를 통해 [창업지원사업 통합공고] 라는 제목으로 업로드 하는데요.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">이상하게 중기부 싸이트에선 찾기가 힘들더라구요.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">그래서 k-startup 을 통해 찾는 것을 추천드립니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">매년 k-startup 싸이트의 메인에 업로드를 해 두더군요.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">k-startup을 간단히 소개해 드리자면&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">정부지원기관 및 민간 창업지원프로그램을 소개해주는 사이트입니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">프로그램을 업로드하려면 까다로운 조건을 거쳐야 되기 때문에</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">믿을만한 싸이트라고 할 수 있죠.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">링크는 <a href="https://www.k-startup.go.kr/" target="_blank" rel="noopener&nbsp;noreferrer">https://www.k-startup.go.kr</a> 이오니 꼭 참고하시고&nbsp;</p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <p data-ke-size="size16">우선 24년 포함해서 매년 창업지원사업 통합공고를 통해</p> <p data-ke-size="size16">여러분이 필요한 지원사업을 확인하는 방법부터 안내해드릴게요.</p> <p data-ke-size="size16">여러분께는 몇장 필요없으니 필요한 자료만 스크랩 하세요!</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="그림2.png" data-origin-width="3371" data-origin-height="1901"><span data-url="https://blog.kakaocdn.net/dn/dgVxZD/btsFfUfCR7Y/tB98K3OgTEKg7pkkTCKAZK/img.png" data-phocus="https://blog.kakaocdn.net/dn/dgVxZD/btsFfUfCR7Y/tB98K3OgTEKg7pkkTCKAZK/img.png"><img src="https://blog.kakaocdn.net/dn/dgVxZD/btsFfUfCR7Y/tB98K3OgTEKg7pkkTCKAZK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdgVxZD%2FbtsFfUfCR7Y%2FtB98K3OgTEKg7pkkTCKAZK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="3371" height="1901" data-filename="그림2.png" data-origin-width="3371" data-origin-height="1901"/></span></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16"><a style="color: #606060; text-align: left;">1.<span>&nbsp;</span></a><a style="color: #606060; text-align: left;">(공고문) 2024년도 중앙부처 및 지자체 창업지원사업 통합공고문.hwp 로 된 한글 파일을 다운</a></p> <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/q6bsO/btsFiO6gu5a/ZSo8HG87gpdmhYkFRMIBg0/%E2%98%85%20%28%EA%B3%B5%EA%B3%A0%EB%AC%B8%29%202024%EB%85%84%EB%8F%84%20%EC%A4%91%EC%95%99%EB%B6%80%EC%B2%98%20%EB%B0%8F%20%EC%A7%80%EC%9E%90%EC%B2%B4%20%EC%B0%BD%EC%97%85%EC%A7%80%EC%9B%90%EC%82%AC%EC%97%85%20%ED%86%B5%ED%95%A9%EA%B3%B5%EA%B3%A0%EB%AC%B8.hwp?attach=1&amp;knm=tfile.hwp" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">★ (공고문) 2024년도 중앙부처 및 지자체 창업지원사업 통합공고문.hwp</span></div> <div class="size">0.36MB</div> </div> </a></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">2. 사업별 세부내역에서 본인의 아이템과 맞는 소속부처를 확인</p> <p data-ke-size="size16">3. 확인 후 해당부처에서 운영하는 사업명을 확인</p> <p data-ke-size="size16">4. 사업개요를 확인하고 메모.</p> <p data-ke-size="size16">5. 부처 홈페이지 또는 k-startup을 통해 작년에 공고된 해당프로그램 확인.</p> <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/uCpqR/btsFfd7C8H9/YIp0QGdKVKUrPeY0upztVk/%E2%98%85%20%28%EC%95%88%EB%82%B4%EC%B1%85%EC%9E%90%29%202024%EB%85%84%EB%8F%84%20%EC%A4%91%EC%95%99%EB%B6%80%EC%B2%98%20%EB%B0%8F%20%EA%B8%B0%EC%B4%88%EA%B4%91%EC%97%AD%EC%A7%80%EC%9E%90%EC%B2%B4%20%EC%B0%BD%EC%97%85%EC%A7%80%EC%9B%90%EC%82%AC%EC%97%85%20%EC%95%88%EB%82%B4.pdf?attach=1&amp;knm=tfile.pdf" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">★ (안내책자) 2024년도 중앙부처 및 기초광역지자체 창업지원사업 안내.pdf</span></div> <div class="size">14.28MB</div> </div> </a></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">6. 안내책자를 통해 프로그램 성격 확인 후 하단과 같이 연락처 확인</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="그림3.png" data-origin-width="3371" data-origin-height="1901"><span data-url="https://blog.kakaocdn.net/dn/d73iQ1/btsFjW33eFH/gTaB3b9OKpzbWYcAxxgXjK/img.png" data-phocus="https://blog.kakaocdn.net/dn/d73iQ1/btsFjW33eFH/gTaB3b9OKpzbWYcAxxgXjK/img.png"><img src="https://blog.kakaocdn.net/dn/d73iQ1/btsFjW33eFH/gTaB3b9OKpzbWYcAxxgXjK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fd73iQ1%2FbtsFjW33eFH%2FgTaB3b9OKpzbWYcAxxgXjK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="3371" height="1901" data-filename="그림3.png" data-origin-width="3371" data-origin-height="1901"/></span></figure> </p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">7. 정말 모르겠다 싶음 담당자에게 전화해서 도와달라고 하세요. 전화번호 다~ 있잖아요.ㅎ</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">이런 순서로 활용하시면 됩니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">페이지는 무지하게 많지만 본인에게 필요한 페이지는 6~7장 내외 입니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">만약 본인이 바이오 관련 아이템이라면 첫번째 파일을 통해 바이오 관련된 지원기관을 확인하고</p> <p data-ke-size="size16">두번째 파일의 목차를 우선 검색하여 지원하는 프로그램을 확인하고 지원 받는 것이 순서일 것입니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">솔직히 페이지가 너무 많이 처다보지도 않았다면</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">꼭 이렇게 활용해 보시기 바랍니다.</p> 창업지원프로그램UP/자금&amp;공간&amp;융자 24년 창업지원사업통합공고 최매슨생 https://0-1.kr/49 https://0-1.kr/49#entry49comment Sun, 25 Feb 2024 16:47:42 +0900 https://0-1.kr/48 <p style="text-align: center;" data-ke-size="size18"><span style="font-family: 'Nanum Gothic'; background-color: #fcfcfc; color: #666666; text-align: left;">갚은 돈과 갚지 않아도 되는돈</span></p> <p style="text-align: center;" data-ke-size="size18"><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';"> (하지만 다른 것으로 갚아야 되는 것)</span></p> <p><span class="imageblock"><span data-url="https://blog.kakaocdn.net/dn/WZTeh/btsFfxyaNMv/nxMDVwx9Ner7o6MwxyOVj1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/WZTeh/btsFfxyaNMv/nxMDVwx9Ner7o6MwxyOVj1/img.jpg" data-alt="1.3"><img src="https://blog.kakaocdn.net/dn/WZTeh/btsFfxyaNMv/nxMDVwx9Ner7o6MwxyOVj1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWZTeh%2FbtsFfxyaNMv%2FnxMDVwx9Ner7o6MwxyOVj1%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></span></p> <p style="text-align: center;" data-ke-size="size18"><br /><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">"정부 지원금? 진짜 그냥 주는 돈입니까?"</span></p> <p style="text-align: center;" data-ke-size="size18"><span style="font-family: 'Nanum Gothic';">라는 질문을 가장 많이 받습니다. </span></p> <p style="text-align: center;" data-ke-size="size18"><span style="font-family: 'Nanum Gothic';">사실은 아닙니다. </span></p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18"><span style="font-family: 'Nanum Gothic';">본인이 만든 숫자로 갚아야 됩니다.</span><br /><br /><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';"></span></p> <p style="text-align: center;" data-ke-size="size18"><span style="font-family: 'Nanum Gothic';"><span style="color: #434343; text-align: start;">숫자는 바로 본인 업체의</span><span style="color: #434343; text-align: start;"></span></span></p> <blockquote data-ke-style="style1"><span style="font-family: 'Noto Serif KR';">고용, 매출, 투자, 수출<br /></span></blockquote> <p style="text-align: center;" data-ke-size="size18"><span style="font-family: 'Nanum Gothic';"><span style="color: #434343;">등 우리나라와 본인의 </span></span></p> <p style="text-align: center;" data-ke-size="size18"><span style="font-family: 'Nanum Gothic';"><span style="color: #434343;">경제성장에 이바지 한 수치를 제공하면 됩니다.</span></span></p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18"><span style="font-family: 'Nanum Gothic';">쉽게 말해 본인이 자금 수령 후 </span></p> <p style="text-align: center;" data-ke-size="size18"><span style="font-family: 'Nanum Gothic';">본인이나 사회에게 </span><span style="font-family: 'Nanum Gothic';">이바지한 실적이나 증빙을 제공하면 됩니다.&nbsp;</span></p> <p data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">이 답변엔 필수적으로 달리는 질문이 또 있습니다.</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <blockquote data-ke-style="style1"><span style="font-family: 'Noto Serif KR';">저것도 제출하지 않으면 갚아야 되나요?</span></blockquote> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">명쾌한 답변 드리겠습니다.</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18"><b>안 갚아도 됩니다.&nbsp;</b></p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18"><b>하지만 당신에게 더 이상의 지원은 없을 것입니다.</b></p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">앞으로 이런 초딩같은 질문은 하지 마시죠.</p> <p style="text-align: center;" data-ke-size="size18">사업계획서 상의 약속을</p> <p style="text-align: center;" data-ke-size="size18">꼭 지키시기 바랍니다.</p> <p data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">솔직히 이런 질문을 하는 이유는</p> <p style="text-align: center;" data-ke-size="size18">왜 주는지 이유를 몰라서 이죠.</p> <p style="text-align: center;" data-ke-size="size18">이유는 젤 하단에 기재해 두겠습니다.</p> <p style="text-align: center;" data-ke-size="size18"><br /><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">우선 창업을 지원하는 정부기관 중 가장 우두머리엔&nbsp;</span><br /><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">[중소벤처기업부]가 있습니다.</span></p> <p style="text-align: center;" data-ke-size="size18"><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">매년 중기부에서 창업에 관련된 자금을</span></p> <p style="text-align: center;" data-ke-size="size18">각 창업지원기관에 사업비를<span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">&nbsp;분배합니다.</span></p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">창업지원기관의 종류와 사업비를 알기 위해선</p> <p style="text-align: center;" data-ke-size="size18"><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">매년 1월 초에 배포하는 자료를 보시면&nbsp;</span></p> <p style="text-align: center;" data-ke-size="size18"><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">됩니다.</span></p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18"><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">중기부 홈페이지에선 찾기가 힘드네요.</span></p> <p style="text-align: center;" data-ke-size="size18">그래서 정부와 민간의 모든 지원, 대출 프로그램을</p> <p style="text-align: center;" data-ke-size="size18">업로드 하는</p> <p style="text-align: center;" data-ke-size="size18"><a href="https://www.k-startup.go.kr/" target="_blank" rel="noopener&nbsp;noreferrer">https://www.k-startup.go.kr/</a><br /><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">k-startup 홈페이지에서 </span></p> <figure id="og_1708844697555" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="K-Startup 창업지원포털" data-og-description="중소벤처기업부 운영 창업지원포털 창업지원사업 정보 통합&middot;제공 및 온라인창업교육, 창업공간정보, 온라인법인설립 서비스 제공" data-og-host="www.k-startup.go.kr" data-og-source-url="https://www.k-startup.go.kr/" data-og-url="https://www.k-startup.go.kr/" data-og-image="https://scrap.kakaocdn.net/dn/p2dVh/hyVqszcxR1/2kIn2zsZj3G0JpnyJMrPl1/img.jpg?width=359&amp;height=250&amp;face=0_0_359_250,https://scrap.kakaocdn.net/dn/EohgP/hyVqipP2yx/yDyjFWyVKrJOYZvrA3GfK0/img.png?width=576&amp;height=508&amp;face=0_0_576_508,https://scrap.kakaocdn.net/dn/dQwhWP/hyVm4mt8Yv/6lk9akt5cqIn4TMYHGdBg1/img.png?width=370&amp;height=500&amp;face=0_0_370_500"><a href="https://www.k-startup.go.kr/" target="_blank" rel="noopener" data-source-url="https://www.k-startup.go.kr/"> <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/p2dVh/hyVqszcxR1/2kIn2zsZj3G0JpnyJMrPl1/img.jpg?width=359&amp;height=250&amp;face=0_0_359_250,https://scrap.kakaocdn.net/dn/EohgP/hyVqipP2yx/yDyjFWyVKrJOYZvrA3GfK0/img.png?width=576&amp;height=508&amp;face=0_0_576_508,https://scrap.kakaocdn.net/dn/dQwhWP/hyVm4mt8Yv/6lk9akt5cqIn4TMYHGdBg1/img.png?width=370&amp;height=500&amp;face=0_0_370_500');">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">K-Startup 창업지원포털</p> <p class="og-desc" data-ke-size="size16">중소벤처기업부 운영 창업지원포털 창업지원사업 정보 통합&middot;제공 및 온라인창업교육, 창업공간정보, 온라인법인설립 서비스 제공</p> <p class="og-host" data-ke-size="size16">www.k-startup.go.kr</p> </div> </a></figure> <p style="text-align: center;" data-ke-size="size18"><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">쉽게 찾을 수 있습니다.</span></p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">매년 <b>[창업지원사업 통합공고]</b>라는 제목으로</p> <p style="text-align: center;" data-ke-size="size18">업로드를 하고 있어요</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">우선 24년 링크는&nbsp;</p> <p style="text-align: center;" data-ke-size="size18"><a href="https://me2.do/Fynsk6Pr" target="_blank" rel="noopener&nbsp;noreferrer">https://me2.do/Fynsk6Pr</a></p> <figure id="og_1708844869454" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="2024년 중앙부처 및 지자체 창업지원사업 통합공고" data-og-description="2024년 중앙부처 및 지자체 창업지원사업 통합공고" data-og-host="www.k-startup.go.kr" data-og-source-url="https://me2.do/Fynsk6Pr" data-og-url="https://www.k-startup.go.kr/web/contents/bizpbanc-ongoing.do?schM=view&amp;pbancSn=167274" data-og-image="https://scrap.kakaocdn.net/dn/RoUOC/hyVmPJCTWb/K5spbIoC0IJWt1CFg4XsX1/img.jpg?width=359&amp;height=250&amp;face=0_0_359_250"><a href="https://me2.do/Fynsk6Pr" target="_blank" rel="noopener" data-source-url="https://me2.do/Fynsk6Pr"> <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/RoUOC/hyVmPJCTWb/K5spbIoC0IJWt1CFg4XsX1/img.jpg?width=359&amp;height=250&amp;face=0_0_359_250');">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">2024년 중앙부처 및 지자체 창업지원사업 통합공고</p> <p class="og-desc" data-ke-size="size16">2024년 중앙부처 및 지자체 창업지원사업 통합공고</p> <p class="og-host" data-ke-size="size16">www.k-startup.go.kr</p> </div> </a></figure> <p style="text-align: center;" data-ke-size="size18">로 확인하고 성격 급하신 분은</p> <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/RMYjD/btsFkI5AIiF/Z8RK7ckmTAlKgNzJKOSjlK/%E2%98%85%20%28%EC%95%88%EB%82%B4%EC%B1%85%EC%9E%90%29%202024%EB%85%84%EB%8F%84%20%EC%A4%91%EC%95%99%EB%B6%80%EC%B2%98%20%EB%B0%8F%20%EA%B8%B0%EC%B4%88%EA%B4%91%EC%97%AD%EC%A7%80%EC%9E%90%EC%B2%B4%20%EC%B0%BD%EC%97%85%EC%A7%80%EC%9B%90%EC%82%AC%EC%97%85%20%EC%95%88%EB%82%B4.pdf?attach=1&amp;knm=tfile.pdf" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">★ (안내책자) 2024년도 중앙부처 및 기초광역지자체 창업지원사업 안내.pdf</span></div> <div class="size">14.28MB</div> </div> </a></figure> </p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/K995E/btsFhexDJI9/pYBEOXzUBcXJkVfWXzVYj1/%E2%98%85%20%28%EA%B3%B5%EA%B3%A0%EB%AC%B8%29%202024%EB%85%84%EB%8F%84%20%EC%A4%91%EC%95%99%EB%B6%80%EC%B2%98%20%EB%B0%8F%20%EC%A7%80%EC%9E%90%EC%B2%B4%20%EC%B0%BD%EC%97%85%EC%A7%80%EC%9B%90%EC%82%AC%EC%97%85%20%ED%86%B5%ED%95%A9%EA%B3%B5%EA%B3%A0%EB%AC%B8.hwp?attach=1&amp;knm=tfile.hwp" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">★ (공고문) 2024년도 중앙부처 및 지자체 창업지원사업 통합공고문.hwp</span></div> <div class="size">0.36MB</div> </div> </a></figure> <figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/dera0Q/btsFffqMkWt/kVTJsha2E4VYWTLeWRLKD0/%E2%98%85%20%28%EA%B3%B5%EA%B3%A0%EB%AC%B8%29%202024%EB%85%84%EB%8F%84%20%EC%A4%91%EC%95%99%EB%B6%80%EC%B2%98%20%EB%B0%8F%20%EC%A7%80%EC%9E%90%EC%B2%B4%20%EC%B0%BD%EC%97%85%EC%A7%80%EC%9B%90%EC%82%AC%EC%97%85%20%ED%86%B5%ED%95%A9%EA%B3%B5%EA%B3%A0%EB%AC%B8.pdf?attach=1&amp;knm=tfile.pdf" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">★ (공고문) 2024년도 중앙부처 및 지자체 창업지원사업 통합공고문.pdf</span></div> <div class="size">0.72MB</div> </div> </a></figure> </p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">이 세개의 파일로 확인하시기 바랍니다.</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">사실... 이파일만 보고는 뭐가뭔지 모릅니다.</p> <p style="text-align: center;" data-ke-size="size18"><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">이 엄청난 장수의 pdf를 활용하는 방법은</span></p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18"><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';"> #검색 파트에서 업로드할 예정입니다.</span></p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">본인이 어떤 아이템이고</p> <p style="text-align: center;" data-ke-size="size18">연령이 어떻게 되고 업력과 실적으로</p> <p style="text-align: center;" data-ke-size="size18">나눠 지원기관과 지원프로그램을</p> <p style="text-align: center;" data-ke-size="size18">정해놨으니 추후 업로드 된 글을 통해</p> <p style="text-align: center;" data-ke-size="size18">활용하시기 바랍니다.<span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';"></span></p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18"><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">매년 [창업지원사업 통합공고] 라고 검색하시면 되구요.</span><br /><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">우선 작년자료와 올해 자료를 참고 하세요</span></p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style1" /> <p style="text-align: center;" data-ke-size="size18"><br /><br />여러분들.. 세금은 비보상성이라</p> <p style="text-align: center;" data-ke-size="size18">성격이 있습니다.</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">낸만큼 받지 못한다는 이야기죠.</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">보다 효율적인 곳에 집중해서</p> <p style="text-align: center;" data-ke-size="size18">쓰이는 것이 세금입니다</p> <p style="text-align: center;" data-ke-size="size18">.</p> <p style="text-align: center;" data-ke-size="size18">정부는 창업을 육성하여</p> <p style="text-align: center;" data-ke-size="size18">자립할 수 있도록 지원금을 뿌리고 있고</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">배민과 토스 같은 민간기업의</p> <p style="text-align: center;" data-ke-size="size18">성장 성과를 내고 있습니다</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18"><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">정부가 창업지원금을 주는 목적은 </span></p> <p style="text-align: center;" data-ke-size="size18"><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">창업을 육성하여 스스로 성장하는</span></p> <p style="text-align: center;" data-ke-size="size18"><span style="color: #434343; text-align: start; font-family: 'Nanum Gothic';">마중물을 제공하여</span></p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">경제성장율을 여러분들의 노력만으로</p> <p style="text-align: center;" data-ke-size="size18">공짜(?) 올리려고 하는 것입니다.^^</p> <figure contenteditable="false" data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="niniz" data-emoticon-name="047" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/niniz/large/047.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/niniz/large/047.gif" width="150" /></figure> <p style="text-align: center;" data-ke-size="size18">그냥 이렇게 받아드리는게 편하실 겁니다.</p> <p style="text-align: center;" data-ke-size="size18">&nbsp;</p> <p style="text-align: center;" data-ke-size="size18">뭐.. 정부와 창업자간의 선순환 구조니 뭐니</p> <p style="text-align: center;" data-ke-size="size18">어려운 말은 앞으로 안쓰고</p> <p style="text-align: center;" data-ke-size="size18">저렴한 단어들로 여러분게 다가가겠습니다.^^</p> 스타트업EX란?/첫창업 EX_8주차 24년 스타트업ex란 쌩초보창업EX 최매슨생 https://0-1.kr/48 https://0-1.kr/48#entry48comment Sun, 25 Feb 2024 16:23:12 +0900 https://0-1.kr/47 <p style="text-align: left;" data-ke-size="size16">매년 중소벤처기업진흥공단(이하 중진공)에서 청년을 대상으로<br />청년전용창업자금 (이하 청창자금)이란 대출을 <br />진행하고 있습니다. 하지만 상담끝에<br /><br />"대표님 업체는 지원대상이 아닙니다."<br />"대표님은 지원 업종이 아닙니다."<br /><br />라며 거절당한 경우가 많은데요. 24년에 바뀐 청년전용창업자금<br />지원대상에 대해 상세하게 알아볼게요.</p> <blockquote data-ke-style="style3">모든 내용은 중진공 홈페이지 [지원사업]-[융자대상 및 제한기업] 메뉴를<br />바탕으로 작성되었습니다. 링크는 <a href=" https://www.kosmes.or.kr/nsh/SH/SBI/SHSBI002M0.do" target="_blank" rel="noopener"><span><br />https://www.kosmes.or.kr/nsh/SH/SBI/SHSBI002M0.do</span></a> 참조.</blockquote> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16"><b>대상1 : 소기업과 중기업 가능 (지원제외업종 제외)<br />대상2 : 제조업과 중점지원분야 (소상공인도 가능)<br />대상3 : 중소기업확인서, 창업기업확인서 발급가능 업체<br />대상4 : 만39세이하 업력 3년미만인 업체</b><br /><b><br /></b></p> <hr data-ke-type="horizontalRule" data-ke-style="style1" /> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16"><b><br /></b>우선 중진공은 소상공인을 지원하는 기관은 아닙니다. <br /><br />[소기업], [중기업] 이 지원대상인데요.<br /><br /><b></b></p> <blockquote data-ke-style="style2"><b>대상1. 소기업과 중기업 가능</b></blockquote> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">보통 기업의 규모를 소상공인 소기업, 중기업으로 우선 분류할때 직원수로 구분하면.<br /><br /><b>"소상공인(1년간 5인미만) | 소기업(1년간 5인이상)"</b> <br /><br />으로 구분합니다. 쉽게 말해 1년간 5인이상으로 업체를 유지 시 지원대상이죠.<br />이를 쉽게 증빙하기 위해선 [중소기업확인서] 를 발급하여 [소기업]으로 <br />확인할 수 있는 경우 소기업으로 인정하여 지원대상이 됩니다.<br /><br />중소기업확인서는</p> <p style="text-align: left;" data-ke-size="size16"><a href="https://www.smes.go.kr/pageApplyCertificateSme" target="_blank" rel="noopener&nbsp;noreferrer">https://www.smes.go.kr/pageApplyCertificateSme</a></p> <figure id="og_1704804816727" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="중소벤처24" data-og-description="Home증명서 발급발급중소기업(소상공인)확인서 중소기업(소상공인)확인서 중소기업(소상공인) 확인서 발급 안내 서비스 명 중소기업(소상공인)확인서 발급 서비스 개요 「중소기업기본법」 제2" data-og-host="www.smes.go.kr" data-og-source-url="https://www.smes.go.kr/pageApplyCertificateSme" data-og-url="https://www.smes.go.kr/pageApplyCertificateSme" data-og-image=""><a href="https://www.smes.go.kr/pageApplyCertificateSme" target="_blank" rel="noopener" data-source-url="https://www.smes.go.kr/pageApplyCertificateSme"> <div class="og-image" style="background-image: url();">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">중소벤처24</p> <p class="og-desc" data-ke-size="size16">Home증명서 발급발급중소기업(소상공인)확인서 중소기업(소상공인)확인서 중소기업(소상공인) 확인서 발급 안내 서비스 명 중소기업(소상공인)확인서 발급 서비스 개요 「중소기업기본법」 제2</p> <p class="og-host" data-ke-size="size16">www.smes.go.kr</p> </div> </a></figure> <p style="text-align: left;" data-ke-size="size16">를 통해 발급 가능합니다.<br /><br />단 발급 시 <b>[소상공인(소기업)]</b> 으로 표기가 되는 업체는 소상공인으로 분류되며<br />소기업으로 인정되지 않습니다. 소기업에 해당되는 경우 <b>(소기업)</b>으로만 표기되오니 이점 유의해 주세요.</p> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <blockquote data-ke-style="style2"><b>대상2. 제조업과 중점지원분야</b></blockquote> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">하지만 소상공인으로 발급되어도 업종에 따라 지원이 가능한 경우가 있습니다.<br />바로 [제조업]과 [중점지원분야] 에 해당되는 업종을 영위하는 기업이죠.<br /><br />[제조업]은 식품,금속,성형 등 공장을 구비하며 물건을 생산하는 업종이죠.<br /><br />[중점지원분야]는 매년 바뀌는 업종인데 24년 기준으로 중진공 홈페이지 상<br />파일을 다운받아 본인이 해당되는 업종이 기재되어 있으면 지원이<br />가능합니다. 단 해당업종을 영위한다는 증빙이 있으면 되오니 이점 참고 바랍니다.</p> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">하단의 파일은 중진공 홈페이지 중점지원분야 업종을 확인하는 파일이오니&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">다운받아 본인이 해당하는 업종을 확인바랍니다.</p> <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/bhb8PG/btsDiuazgAc/Fqv1P07KoT4tuU5ClyyJe0/%EC%B0%B8%EA%B3%A01_4.hwp?attach=1&amp;knm=tfile.hwp" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">참고1_4.hwp</span></div> <div class="size">0.06MB</div> </div> </a></figure> </p> <blockquote data-ke-style="style2"><b>대상3. 중소기업확인서, 창업기업확인서 발급</b></blockquote> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16"><br />창업기업확인서는아래의 홈페이지에서 발급이 가능합니다.</p> <p style="text-align: left;" data-ke-size="size16"><a href="https://cert.k-startup.go.kr/" target="_blank" rel="noopener&nbsp;noreferrer">https://cert.k-startup.go.kr</a></p> <figure id="og_1704805207803" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="창업기업 확인시스템" data-og-description="창업기업 확인시스템" data-og-host="cert.k-startup.go.kr" data-og-source-url="https://cert.k-startup.go.kr/" data-og-url="https://cert.k-startup.go.kr/index.do" data-og-image="https://scrap.kakaocdn.net/dn/csY8yQ/hyU2hefgZg/9xNKYFVKkofbjVtBjpEHoK/img.jpg?width=1587&amp;height=1210&amp;face=0_0_1587_1210,https://scrap.kakaocdn.net/dn/MKPUp/hyU2net0u3/XMZtSHKJ8aazghK3wLK2Xk/img.gif?width=400&amp;height=320&amp;face=0_0_400_320"><a href="https://cert.k-startup.go.kr/" target="_blank" rel="noopener" data-source-url="https://cert.k-startup.go.kr/"> <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/csY8yQ/hyU2hefgZg/9xNKYFVKkofbjVtBjpEHoK/img.jpg?width=1587&amp;height=1210&amp;face=0_0_1587_1210,https://scrap.kakaocdn.net/dn/MKPUp/hyU2net0u3/XMZtSHKJ8aazghK3wLK2Xk/img.gif?width=400&amp;height=320&amp;face=0_0_400_320');">&nbsp;</div> <div class="og-text"> <p class="og-title" data-ke-size="size16">창업기업 확인시스템</p> <p class="og-desc" data-ke-size="size16">창업기업 확인시스템</p> <p class="og-host" data-ke-size="size16">cert.k-startup.go.kr</p> </div> </a></figure> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">단 해당 확인서는 최대 14일이 걸리는 확인서로 업체가 창업기업임을 확인하는 증명서입니다.</p> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">청창자금은 창업기업(3년미만) 업체가 지원대상이므로 해당 확인서발급이 필수 입니다. <br />과거 3년이내에 동일업종의 사업을 영위했는지, 이종업종으로 2년이내 사업을 확인하는 것으로</p> <p style="text-align: left;" data-ke-size="size16">창업기업만 지원대상입니다.<br /><br />중소기업확인서는 상단의 링크에서 발급이 가능하며 제조업, 중점지원분야인 경우 소상공인도 가능하며 그 외의 업종인 경우 소기업만 가능함을 참고 바랍니다.</p> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">단 다수의 사업자를 보유한 업체 중 발급이 가능한 사업장과 불가한 사업장이 있을 수 있습니다.</p> <p style="text-align: left;" data-ke-size="size16">반드시 청년전용창업자금을 지원하는 업종의 창업기업확인서로 접수하셔야 문제되지 않습니다.</p> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <blockquote data-ke-style="style2"><b>대상4. 만39세이하 업력 3년미만</b></blockquote> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">이 조건은 필수 조건이며<br /><br />24년 기준 만 39세이하는 <br />1) 84년생인 경우 생일이 지나지 않은자, <br />2) 85년생 이하는 지원대상입니다.<br /><br />24년기준 업력 3년미만은<br />1) 21년 개업일인 경우 : 개업일이 지나지 않은자<br />2) 22년 개업일인 경우 : 지원가능<br />(개인사업자는 사업자등록증명원 상 [사업자등록일], 법인은 법인등기부상 [회사성립연월일 을 말함)<br /><br />입니다.<br /><br />해당 페이지는 계속 수정될 예정이며 <br />더 보기 편하게 수정할 계획이오니 <br />참고 바랍니다.<br /><br />감사합니다!</p> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> <p style="text-align: left;" data-ke-size="size16">&nbsp;</p> 스타트업 운영TIP/정부지원사업 TIP 24년청창자금 지원대상 청년전용창업자금 최매슨생 https://0-1.kr/47 https://0-1.kr/47#entry47comment Tue, 9 Jan 2024 09:34:29 +0900 https://0-1.kr/46 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>모두의 장보기계산기 (시안 v14)</title> <style> :root{ --paper:#FAF7EF; --paper2:#F1ECDD; --ink:#22303F; --ink-soft:#5B6B7A; --green:#3E8E5A; --green-soft:#E4F1E7; --orange:#E8734A; --orange-soft:#FCE7DD; --red:#D64545; --red-soft:#FBE3E3; --line:#DFD8C4; --white:#FFFFFF; --gray:#C7C2B4; } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none;} html,body{margin:0;padding:0;background:var(--paper2);color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic","Apple SD Gothic Neo",sans-serif; overscroll-behavior-y:none;} .num{font-family:"SF Mono","Courier New",Courier,monospace; font-variant-numeric:tabular-nums;} .app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--paper); position:relative; padding-bottom:150px; box-shadow:0 0 24px rgba(0,0,0,0.06);} button, .tag-chip, .subtag-chip, .coin-chip, .sq-card, .completed-pill, .col-ctrl button, .price-reset, .price-confirm, .blank-card, .add-card, .mode-btn, .m2-qty-stack button, .m2-check{ touch-action:manipulation;} /* header */ .head{padding:18px 18px 14px;border-bottom:2px dashed var(--line);} .head-top{display:flex;align-items:center;justify-content:space-between;gap:8px;} .head h1{font-size:18px;margin:0;letter-spacing:-0.3px;font-weight:800;} .share-btn{flex:0 0 auto;display:flex;align-items:center;gap:4px;padding:8px 12px;border-radius:100px; border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:700;cursor:pointer;} .sub{font-size:11px;color:var(--ink-soft);margin-top:2px;} .park-row{display:flex;align-items:center;gap:8px;margin-top:12px;background:var(--white); border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;} .park-row .pin{font-size:15px;} .park-row input{flex:1;border:none;outline:none;font-size:13px;background:transparent;color:var(--ink);} .park-row input::placeholder{color:#A9A392;} .fontsize-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;} .fs-label{font-size:11px;font-weight:700;color:var(--ink-soft);} .memo-box{width:100%;min-height:70px;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px; font-size:13px;font-family:inherit;resize:vertical;background:var(--white);outline:none;color:var(--ink);} .memo-box::placeholder{color:#A9A392;} .calc-display{background:var(--ink);color:#fff;text-align:right;padding:14px;border-radius:10px; font-size:24px;font-weight:800;margin-bottom:10px;font-family:"SF Mono","Courier New",monospace; overflow-x:auto;white-space:nowrap;} .calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;} .calc-grid button{padding:14px 0;border-radius:10px;border:none;background:var(--white); font-size:16px;font-weight:800;cursor:pointer;touch-action:manipulation;} .calc-grid button:active{background:var(--paper2);} .calc-grid .calc-zero{grid-column:span 2;} .calc-grid .calc-eq{background:var(--green);color:#fff;} /* budget accordion */ .budget-box{margin:16px 18px 0;background:var(--white);border-radius:16px;border:1.5px solid var(--line);overflow:hidden;} .accordion-head{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:14px 16px;} .accordion-head .chevron{font-size:11px;color:var(--ink-soft);transition:transform .2s;} .accordion-head.collapsed .chevron{transform:rotate(-90deg);} .budget-val{font-size:20px;font-weight:800;} .budget-body{padding:0 16px 12px;display:block;} .budget-body.collapsed{display:none;} .budget-hint{font-size:10.5px;color:var(--ink-soft);} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:4px 0;} input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:6px; background:linear-gradient(90deg,var(--green),var(--green) var(--_fill,50%),var(--line) var(--_fill,50%));} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%; background:var(--green);border:4px solid var(--white);box-shadow:0 2px 8px rgba(0,0,0,0.25);margin-top:-9px;cursor:grab;} #budgetSlider::-webkit-slider-thumb{background:var(--ink);} .total-bar-wrap{height:14px;border-radius:8px;background:var(--paper2);overflow:hidden;margin-top:8px;border:1px solid var(--line);} .total-bar-fill{height:100%;background:var(--green);width:0%;transition:width .25s ease, background .25s ease;} .total-row2{display:flex;justify-content:space-between;font-size:11px;margin-top:6px;color:var(--ink-soft);} .total-row2 b{color:var(--ink);} .over-warning{display:none;margin-top:8px;background:var(--red-soft);color:var(--red);font-size:12px;font-weight:700;padding:7px 10px;border-radius:10px;} /* shopping section title */ .section-title{font-size:12.5px;font-weight:800;color:var(--ink-soft);margin:20px 18px 8px;letter-spacing:0.2px;} .title-row{display:flex;align-items:center;justify-content:space-between;margin:20px 18px 8px;} .title-row .shop-title{margin:0;font-size:15px;font-weight:800;} .mode-toggle{display:flex;gap:3px;background:var(--paper2);border-radius:100px;padding:3px;} .mode-btn{padding:6px 11px;border-radius:100px;border:none;background:transparent;font-size:11px;font-weight:800;color:var(--ink-soft);cursor:pointer;} .mode-btn.active{background:var(--ink);color:#fff;} .mode-cycle-btn{padding:8px 14px;border-radius:100px;border:none;background:var(--ink);color:#fff; font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;touch-action:manipulation;} .reset-btn{padding:8px 12px;border-radius:100px;border:1.5px solid var(--red);background:var(--red-soft); color:var(--red);font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;touch-action:manipulation;} .preset-row{display:flex;gap:7px;padding:0 18px 12px;overflow-x:auto;} .preset-btn{flex:0 0 auto;padding:8px 14px;border-radius:100px;background:var(--orange-soft);border:1.5px solid transparent; color:var(--orange);font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap;touch-action:manipulation;} .preset-btn.direct{background:var(--paper2);color:var(--ink-soft);} .preset-btn.active{background:var(--orange);color:#fff;} .preset-btn.direct.active{background:var(--ink);color:#fff;} .controls-row{display:flex;align-items:center;justify-content:space-between;margin:0 18px 4px;} .col-ctrl{display:flex;align-items:center;gap:6px;background:var(--paper2);border-radius:100px;padding:3px;} .col-ctrl button{width:22px;height:22px;border:none;border-radius:50%;background:var(--white);font-size:12px;font-weight:800;cursor:pointer;} .col-ctrl span{font-size:11px;font-weight:700;color:var(--ink-soft);min-width:34px;text-align:center;} .purchase-sum{font-size:12.5px;font-weight:700;color:var(--orange);} .purchase-sum .num{font-size:14px;} .grid-hint{margin:0 18px 10px;font-size:10.5px;color:var(--ink-soft);} /* mode1/3 grid (cube) */ .grid{display:grid;grid-template-columns:repeat(var(--cols,2), calc((100% - 8px)/2));gap:8px;padding:0 18px 4px;overflow-x:auto;} .sq-card{position:relative;aspect-ratio:1/1;background:var(--white);border:1.5px solid var(--line); border-radius:12px;padding:9px;display:flex;flex-direction:column;justify-content:space-between; animation:pop .18s ease;transition:transform .1s;} .sq-card.tall{aspect-ratio:auto;min-height:150px;} @keyframes pop{from{opacity:0;transform:scale(0.85);}to{opacity:1;transform:scale(1);}} .sq-card.pressing{transform:scale(0.93);} .sq-name{font-size:11px;font-weight:800;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;} .sq-name-input{width:100%;border:none;outline:none;background:transparent;font-size:18px;font-weight:800; padding:0;color:var(--ink);font-family:inherit;} .sq-name-input::placeholder{color:#A9A392;font-weight:600;} .sq-card.blank{border-style:dashed;} .sq-price{font-size:8.5px;color:var(--ink-soft);cursor:pointer;padding:2px 0;border-bottom:1px dashed var(--line);} .sq-price.set{color:var(--orange);font-weight:700;} .sq-price-input{width:100%;border:none;outline:none;background:transparent;font-size:10px;font-weight:700; color:var(--orange);padding:2px 0;border-bottom:1px dashed var(--line);font-family:inherit;} .sq-price-input::placeholder{color:var(--ink-soft);font-weight:600;} .sq-person-input{width:100%;border:none;outline:none;background:transparent;font-size:10.5px;font-weight:600; color:var(--ink-soft);padding:2px 0;border-bottom:1px dashed var(--line);font-family:inherit;} .sq-person-input::placeholder{color:#C7C2B4;font-weight:500;} .sq-qtyrow{display:flex;align-items:center;justify-content:space-between;} .sq-card.done{opacity:0.6;background:var(--paper2);} .sq-card.done .sq-name-input{ text-decoration:line-through; color:var(--ink-soft) !important;} .sq-qtybtn{width:32px;height:32px;border:none;border-radius:8px;background:var(--paper2);font-size:18px;font-weight:800;cursor:pointer;line-height:1;} .sq-qty{font-size:15px;font-weight:800;} .blank-card{border:1.5px dashed var(--line);background:transparent;display:flex;align-items:center;justify-content:center; color:var(--ink-soft);font-size:10px;font-weight:700;aspect-ratio:1/1;border-radius:12px;cursor:pointer;text-align:center;padding:4px;} .blank-card.pressing{transform:scale(0.93);background:var(--paper2);} .add-card{border:1.5px dashed var(--green);background:var(--green-soft);color:var(--green);display:flex;flex-direction:column; align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:12px;cursor:pointer;font-weight:800;font-size:9.5px;gap:1px;} .add-card .plus{font-size:19px;line-height:1;} .add-card.pressing{transform:scale(0.93);} .divider-row{display:flex;align-items:center;gap:8px;padding:14px 18px 4px;color:var(--ink-soft);font-size:11px;font-weight:700;} .divider-row .line{flex:1;height:1px;background:var(--line);} .completed-row{display:flex;flex-wrap:wrap;gap:6px;padding:6px 18px 4px;} .completed-pill{background:var(--paper2);color:var(--ink-soft);padding:6px 10px;border-radius:8px; font-size:11px;font-weight:700;cursor:pointer;transition:transform .1s;} .completed-pill.pressing{transform:scale(0.92);background:var(--red-soft);color:var(--red);} .completed-pill .chk{margin-right:3px;} /* quick-add (moved below grid) */ .quickadd-wrap{margin-top:16px;padding-top:14px;border-top:2px dashed var(--line);} .tag-row{display:flex;gap:7px;padding:0 18px;overflow-x:auto;} .tag-chip{flex:0 0 auto;padding:8px 13px;border-radius:100px;background:var(--white);border:1.5px solid var(--line); font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;color:var(--ink);} .tag-chip.active{background:var(--green);border-color:var(--green);color:var(--white);} .subtag-panel-wrap{display:none;padding:12px 18px 4px;} .subtag-panel-wrap.open{display:block;} .subtag-summary{font-size:11px;font-weight:800;color:var(--orange);margin-bottom:6px;} .subtag-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:repeat(2,auto); gap:5px;overflow-x:auto;padding-bottom:6px;} .subtag-chip{position:relative;padding:5px 9px;border-radius:8px;background:var(--green-soft); font-size:10.5px;font-weight:700;color:var(--green);cursor:pointer;white-space:nowrap;transition:transform .1s;} .subtag-chip.pinned{background:var(--orange-soft);color:var(--orange);} .subtag-chip .badge{position:absolute;top:-6px;right:-6px;background:var(--orange);color:#fff;border-radius:100px; font-size:9px;padding:1px 4px;font-weight:800;line-height:1.3;} .subtag-chip.pinned .badge{background:var(--green);} .subtag-chip.pressing{transform:scale(0.9);background:var(--red-soft);color:var(--red);} .subtag-unit{opacity:0.6;font-size:9.5px;margin-left:1px;} /* mode2 simple list */ .m2-list{padding:0 18px;} .m2-row{display:flex;align-items:center;gap:8px;background:var(--white);border:1.5px solid var(--line); border-radius:12px;padding:12px 12px;margin-bottom:8px;} .m2-check{width:22px;height:22px;flex:0 0 auto;cursor:pointer;accent-color:var(--green);} .m2-name{flex:1 1 auto;border:none;outline:none;font-size:15px;font-weight:700;background:transparent;min-width:0;color:var(--ink);} .m2-name::placeholder{color:#A9A392;font-weight:500;} .m2-price-input{flex:0 0 auto;width:58px;font-size:12px;font-weight:700;color:var(--orange); background:var(--paper2);padding:6px 5px;border-radius:8px;border:none;outline:none;text-align:right;font-family:inherit;} .m2-price-input::placeholder{color:var(--ink-soft);font-weight:600;font-size:10.5px;} .m2-row.done{opacity:0.6;background:var(--paper2);} .m2-row.done .m2-name{ text-decoration:line-through; color:var(--ink-soft) !important;} .m2-qty-stack{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto;} .m2-qty-stack button{width:30px;height:20px;border:none;border-radius:5px;background:var(--paper2);font-size:12px;font-weight:800;cursor:pointer;line-height:1;} .m2-qty-stack span{font-size:11px;font-weight:800;} .m2-add-btn{width:100%;padding:10px;border-radius:12px;border:1.5px dashed var(--green);background:var(--green-soft); color:var(--green);font-size:12.5px;font-weight:800;cursor:pointer;margin:4px 0 4px;} .m2-empty{text-align:center;color:var(--ink-soft);font-size:12px;padding:16px;} /* price panel */ .price-panel{display:none;margin:10px 18px 0;padding:12px;background:var(--paper2);border-radius:12px;} .price-panel.open{display:block;animation:pop .18s ease;} .price-panel-head{margin-bottom:8px;} .price-panel-head b{font-size:13px;} .price-big{text-align:center;font-size:22px;font-weight:800;margin-bottom:6px;} .chip-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;} .coin-chip{flex:1 1 auto;min-width:50px;text-align:center;padding:7px 4px;border-radius:9px;background:var(--white); border:1.5px solid var(--line);font-size:11.5px;font-weight:700;cursor:pointer;} .price-reset{margin-top:8px;width:100%;padding:7px;border-radius:9px;border:none;background:var(--white); color:var(--ink-soft);font-size:11px;font-weight:700;cursor:pointer;} .qty-label{font-size:11px;font-weight:700;color:var(--ink-soft);margin:12px 0 6px;} .qty-panel-row{display:flex;align-items:center;justify-content:center;gap:14px;} .qty-panel-row button{width:34px;height:34px;border-radius:10px;border:none;background:var(--white);font-size:17px;font-weight:800;cursor:pointer;} .qty-panel-row .qtxt{font-size:16px;font-weight:800;min-width:56px;text-align:center;} .price-confirm{margin-top:12px;width:100%;padding:10px;border-radius:10px;border:none;background:var(--green); color:#fff;font-size:13px;font-weight:800;cursor:pointer;} /* mart shortcuts */ .mart-title{margin:16px 18px 2px;font-size:11.5px;font-weight:800;color:var(--ink-soft);} .mart-hint{margin:0 18px 8px;font-size:9.5px;color:var(--ink-soft);} .mart-row{display:flex;gap:10px;padding:0 18px 14px;overflow-x:auto;} .mart-badge{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;width:56px;cursor:pointer;text-decoration:none;} .mart-badge .circle{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:19px;box-shadow:0 2px 6px rgba(0,0,0,0.15);transition:transform .1s;} .mart-badge.pressing .circle{transform:scale(0.9);} .mart-badge .label{font-size:9.5px;font-weight:800;color:var(--ink-soft);text-align:center;line-height:1.2;} /* receipt */ .receipt{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px; background:var(--ink);color:var(--paper);border-radius:18px 18px 0 0;padding:14px 20px 20px;box-shadow:0 -8px 24px rgba(0,0,0,0.25);} .receipt-tear{width:36px;height:4px;background:rgba(255,255,255,0.25);border-radius:4px;margin:0 auto 10px;} .receipt-row{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;color:#B9C2CC;} .receipt-row.main{font-size:17px;font-weight:800;color:var(--paper);padding-top:6px;border-top:1px dashed rgba(255,255,255,0.2);margin-top:6px;} .receipt-row.main .num{color:var(--orange);} /* modal & toast */ .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:50;align-items:center;justify-content:center;} .overlay.open{display:flex;} .modal{background:var(--white);border-radius:16px;padding:20px;width:260px;text-align:center;} .modal p{font-size:14px;font-weight:700;margin:0 0 14px;} .modal-input{width:100%;padding:10px;border-radius:10px;border:1.5px solid var(--line);font-size:14px; margin-bottom:14px;outline:none;text-align:center;} .modal-input:focus{border-color:var(--green);} .modal-btns{display:flex;gap:8px;} .modal-btns button{flex:1;padding:10px;border-radius:10px;border:none;font-size:13px;font-weight:800;cursor:pointer;touch-action:manipulation;} .modal-yes{background:var(--green);color:#fff;} .modal-no{background:var(--paper2);color:var(--ink-soft);} .toast{position:fixed;bottom:150px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff; padding:10px 16px;border-radius:100px;font-size:12.5px;font-weight:700;z-index:60;opacity:0;transition:opacity .2s;pointer-events:none;} .toast.show{opacity:1;} </style> </head> <body> <div class="app"> <div class="head"> <div class="head-top"> <h1> 모두의 장보기계산기</h1> <button class="share-btn" id="shareBtn"> 공유</button> </div> <div class="sub">숫자 입력 없이, 태그 탭·드래그로만 계산해요</div> <div class="park-row"> <span class="pin"> ️</span> <input id="parkInput" type="text" placeholder="주차 위치 (예: 지하2층 노란기둥 B32)"> </div> <div class="fontsize-row"> <span class="fs-label"> 글자크기</span> <div class="col-ctrl"> <button id="fsMinus">－</button> <span id="fsVal">보통</span> <button id="fsPlus">＋</button> </div> </div> </div> <!-- 예산: 아코디언 --> <div class="budget-box"> <div class="accordion-head" id="budgetHead"> <div> <div style="font-size:12px;color:var(--ink-soft);font-weight:700;">오늘 예산</div> <div class="budget-val num" id="budgetVal">100,000원</div> </div> <span class="chevron" id="budgetChevron">▼</span> </div> <div class="budget-body" id="budgetBody"> <input type="range" id="budgetSlider" min="0" max="300000" step="1000" value="100000"> <div class="budget-hint">슬라이더를 드래그해서 예산을 정해보세요</div> <div class="total-bar-wrap"><div class="total-bar-fill" id="totalBar"></div></div> <div class="total-row2"> <span>현재 합계 <b class="num" id="totalNow">0원</b></span> <span>남은 예산 <b class="num" id="totalLeft">100,000원</b></span> </div> <div class="over-warning" id="overWarn">⚠ 예산을 초과했어요!</div> </div> </div> <!-- 장보기 --> <div class="title-row"> <div class="shop-title"> 장보기</div> <div style="display:flex;gap:6px;"> <button class="reset-btn" id="resetBtn"> 초기화</button> <button class="mode-cycle-btn" id="modeCycleBtn"> 모드1 · 큐브형</button> </div> </div> <div class="controls-row"> <div class="purchase-sum" id="purchaseSum">구매금액 : <span class="num">0원</span></div> <div class="col-ctrl" id="colCtrl"> <button id="colMinus">−</button> <span id="colVal">한 줄 2개</span> <button id="colPlus">+</button> </div> </div> <div class="grid-hint" id="gridHint">칸마다 메뉴·단가·개수를 바로 탭해서 채울 수 있어요 · 칸을 꾹 누르면 바로 구매완료돼요</div> <!-- 모드1/3 공용: 큐브 그리드 (모드3일 때만 프리셋 버튼 노출) --> <div id="cubeWrap"> <div class="preset-row" id="presetRow" style="display:none;"> <button class="preset-btn" data-preset="음료">☕ 음료</button> <button class="preset-btn" data-preset="점심"> 점심</button> <button class="preset-btn" data-preset="간식"> 간식</button> <button class="preset-btn direct" data-preset="직접">✏️ 직접</button> </div> <div class="grid" id="grid"></div> </div> <!-- 모드2: 단순 목록 --> <div id="mode2Wrap" style="display:none;"> <div class="m2-list" id="m2List"></div> <div style="padding:0 18px;"> <button class="m2-add-btn" id="m2AddBtn">+ 항목 추가</button> </div> </div> <div class="section-title"> 메모장</div> <div style="padding:0 18px;"> <textarea class="memo-box" id="memoBox" placeholder="장보면서 메모할 내용을 적어보세요"></textarea> </div> <div class="budget-box" style="margin:16px 18px 0;"> <div class="accordion-head collapsed" id="calcHead"> <div style="font-size:12px;color:var(--ink-soft);font-weight:700;"> 계산기</div> <span class="chevron collapsed" id="calcChevron">▼</span> </div> <div class="budget-body collapsed" id="calcBody"> <div class="calc-display" id="calcDisplay">0</div> <div class="calc-grid"> <button data-k="C">C</button><button data-k="⌫">⌫</button><button data-k="%">%</button><button data-k="/">÷</button> <button data-k="7">7</button><button data-k="8">8</button><button data-k="9">9</button><button data-k="*">×</button> <button data-k="4">4</button><button data-k="5">5</button><button data-k="6">6</button><button data-k="-">−</button> <button data-k="1">1</button><button data-k="2">2</button><button data-k="3">3</button><button data-k="+">+</button> <button data-k="0" class="calc-zero">0</button><button data-k=".">.</button><button data-k="=" class="calc-eq">=</button> </div> </div> </div> <div class="mart-title"> 마트 바로가기</div> <div class="mart-hint">탭하면 해당 마트 온라인몰로 이동해요 (앱이 있으면 앱으로 열릴 수도 있어요)</div> <div class="mart-row" id="martRow"></div> <div class="receipt"> <div class="receipt-tear"></div> <div class="receipt-row"><span id="rPark">주차 위치 미입력</span><span id="rCount">0개 품목</span></div> <div class="receipt-row main"><span>총 예상 금액</span><span class="num" id="rTotal">0원</span></div> </div> </div> <div class="overlay" id="overlay"> <div class="modal"> <p id="modalMsg">확인할까요?</p> <div class="modal-btns"> <button class="modal-no" id="modalNo">아니오</button> <button class="modal-yes" id="modalYes">예</button> </div> </div> </div> <div class="overlay" id="inputOverlay"> <div class="modal" style="width:280px;"> <p id="inputModalTitle">담을 물건 이름을 입력하세요</p> <div id="inputModalFields"></div> <button class="price-reset" id="inputModalAddRow" style="margin-bottom:12px;">+ 입력칸 추가</button> <div class="modal-btns"> <button class="modal-no" id="inputModalCancel">취소</button> <button class="modal-yes" id="inputModalOk">모두 담기</button> </div> </div> </div> <div class="toast" id="toast"></div> <script> (function(){ var MARTS = [ {label:'이X트', emoji:' ', color:'#FFD400', textColor:'#3A2E00', url:'https://emart.ssg.com/'}, {label:'롯데X트', emoji:' ️', color:'#D0021B', textColor:'#fff', url:'https://lottemartzetta.com/'}, {label:'홈플X스', emoji:' ', color:'#E4002B', textColor:'#fff', url:'https://mfront.homeplus.co.kr/'}, {label:'코스X코', emoji:' ', color:'#005DAA', textColor:'#fff', url:'https://www.costco.co.kr/'}, {label:'하나X마트', emoji:' ', color:'#00A651', textColor:'#fff', url:'https://www.nonghyupmall.com/'} ]; // 모드3(취합형) 프리셋: 카테고리별 많이 찾는 메뉴 var PRESETS = { "음료": ["아아","따아","카페라떼","바닐라라떼","아이스티","에이드","콜드브루","카푸치노"], "점심": ["김치찌개","된장찌개","제육볶음","돈까스","짜장면","짬뽕","비빔밥","냉면"], "간식": ["떡볶이","순대","튀김","만두","핫도그","샌드위치","김밥","도넛"] }; var state = { budget:100000, park:"", items:[], items3:[], cols:2, mode:1, budgetOpen:true, fontScale:1, memo:"", activePreset:null }; var idSeq = 1; var grid = document.getElementById('grid'); var m2List = document.getElementById('m2List'); function fmt(n){ return (n||0).toLocaleString('ko-KR') + '원'; } function toast(msg){ var t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); clearTimeout(t._timer); t._timer = setTimeout(function(){ t.classList.remove('show'); }, 2000); } function bindTap(el, onTap){ var sx=0, sy=0, moved=false, active=false; el.addEventListener('pointerdown', function(e){ active=true; moved=false; sx=e.clientX; sy=e.clientY; }); el.addEventListener('pointermove', function(e){ if(!active) return; if(Math.abs(e.clientX-sx)>10||Math.abs(e.clientY-sy)>10) moved=true; }); el.addEventListener('pointerup', function(e){ if(!active) return; active=false; if(!moved) onTap(e); }); el.addEventListener('pointercancel', function(){ active=false; }); } function bindTapAndHold(el, onTap, onHold){ var timer=null, held=false, moved=false, sx=0, sy=0, active=false; el.addEventListener('pointerdown', function(e){ active=true; held=false; moved=false; sx=e.clientX; sy=e.clientY; el.classList.add('pressing'); timer = setTimeout(function(){ held=true; el.classList.remove('pressing'); onHold(); }, 550); }); el.addEventListener('pointermove', function(e){ if(!active) return; if(Math.abs(e.clientX-sx)>12 || Math.abs(e.clientY-sy)>12){ moved=true; clearTimeout(timer); el.classList.remove('pressing'); } }); el.addEventListener('pointerup', function(){ if(!active) return; active=false; clearTimeout(timer); el.classList.remove('pressing'); if(!held && !moved) onTap(); }); el.addEventListener('pointercancel', function(){ active=false; clearTimeout(timer); el.classList.remove('pressing'); }); } function showConfirm(msg, onYes, onNo){ var ov = document.getElementById('overlay'); document.getElementById('modalMsg').textContent = msg; ov.classList.add('open'); var yesBtn = document.getElementById('modalYes'), noBtn = document.getElementById('modalNo'); function cleanup(){ ov.classList.remove('open'); } bindTap(yesBtn, function(){ cleanup(); onYes(); }); bindTap(noBtn, function(){ cleanup(); if(onNo) onNo(); }); } // 여러 칸 직접입력 모달 (제목/기본 칸 수를 상황에 맞게 조정 가능) function showInputModal(opts, onSubmitMany){ if(typeof opts === 'function'){ onSubmitMany = opts; opts = {}; } opts = opts || {}; var ov = document.getElementById('inputOverlay'); var fieldsWrap = document.getElementById('inputModalFields'); document.getElementById('inputModalTitle').textContent = opts.title || '담을 물건 이름을 입력하세요'; fieldsWrap.innerHTML = ''; function addRow(focus, prefill){ var inp = document.createElement('input'); inp.className = 'modal-input'; inp.type = 'text'; inp.placeholder = '예: 요거트'; if(prefill) inp.value = prefill; inp.onkeydown = function(e){ if(e.key==='Enter'){ e.preventDefault(); addRow(true); } }; fieldsWrap.appendChild(inp); if(focus) inp.focus(); return inp; } var rowCount = opts.rows || 3; for(var i=0;i<rowCount;i++) addRow(false, (opts.prefill&&i===0)?opts.prefill:''); ov.classList.add('open'); setTimeout(function(){ fieldsWrap.querySelector('input').focus(); if(opts.prefill) fieldsWrap.querySelector('input').select(); }, 50); bindTap(document.getElementById('inputModalAddRow'), function(){ addRow(true); }); function submit(){ var names = Array.prototype.slice.call(fieldsWrap.querySelectorAll('input')) .map(function(i){ return i.value.trim(); }) .filter(function(v){ return v.length>0; }); ov.classList.remove('open'); if(names.length) onSubmitMany(names); } bindTap(document.getElementById('inputModalOk'), submit); bindTap(document.getElementById('inputModalCancel'), function(){ ov.classList.remove('open'); }); } // 아이템 삭제 function removeItem(it, fromItems3){ if(fromItems3){ state.items3 = state.items3.filter(function(x){return x.id!==it.id;}); } else { state.items = state.items.filter(function(x){return x.id!==it.id;}); } } // 태그(빠르게 담기) 제거로 더 이상 서브패널이 없어 아무 동작 안 함 (호환용 no-op) function refreshOpenPanel(){} // ---------- 글자크기 조절 (어르신 접근성) ---------- var FS_LEVELS = [ {label:'작게', zoom:0.9}, {label:'보통', zoom:1}, {label:'크게', zoom:1.15}, {label:'아주크게', zoom:1.3} ]; var fsIndex = 1; var appEl = document.querySelector('.app'); function applyFontScale(){ appEl.style.zoom = FS_LEVELS[fsIndex].zoom; document.getElementById('fsVal').textContent = FS_LEVELS[fsIndex].label; state.fontScale = FS_LEVELS[fsIndex].zoom; saveLocal(); } bindTap(document.getElementById('fsMinus'), function(){ fsIndex = Math.max(0, fsIndex-1); applyFontScale(); }); bindTap(document.getElementById('fsPlus'), function(){ fsIndex = Math.min(FS_LEVELS.length-1, fsIndex+1); applyFontScale(); }); // ---------- 아코디언: 오늘 예산 ---------- var budgetHead = document.getElementById('budgetHead'); bindTap(budgetHead, function(){ state.budgetOpen = !state.budgetOpen; document.getElementById('budgetBody').classList.toggle('collapsed', !state.budgetOpen); budgetHead.classList.toggle('collapsed', !state.budgetOpen); }); // ---------- 모드 전환 (버튼 하나로 순환) ---------- var MODE_INFO = [ null, {label:' 모드1 · 큐브형', hint:'칸마다 메뉴·단가·개수를 바로 탭해서 채울 수 있어요 · 칸을 꾹 누르면 바로 구매완료돼요'}, {label:' 모드2 · 나열형', hint:'메뉴를 입력하고, 단가/개수는 필요할 때만 채워보세요'}, {label:' 모드3 · 취합형', hint:'위 카테고리를 눌러 메뉴를 미리 채워두고, 누가 주문했는지도 적어보세요'} ]; var modeCycleBtn = document.getElementById('modeCycleBtn'); function setMode(m){ state.mode = m; modeCycleBtn.textContent = MODE_INFO[m].label; document.getElementById('cubeWrap').style.display = (m===1 || m===3) ? 'block' : 'none'; document.getElementById('mode2Wrap').style.display = m===2 ? 'block' : 'none'; document.getElementById('presetRow').style.display = m===3 ? 'flex' : 'none'; document.getElementById('colCtrl').style.display = (m===1 || m===3) ? 'flex' : 'none'; document.getElementById('gridHint').textContent = MODE_INFO[m].hint; renderAll(); } bindTap(modeCycleBtn, function(){ setMode(state.mode>=3 ? 1 : state.mode+1); }); // ---------- 초기화 (현재 보고 있는 목록만 전체 삭제, 확인 팝업 후 진행) ---------- bindTap(document.getElementById('resetBtn'), function(){ var msg = state.mode===3 ? '취합형(모드3) 목록을 모두 삭제할까요?' : '장보기 목록(모드1·모드2)을 모두 삭제할까요?'; showConfirm(msg, function(){ if(state.mode===3){ state.items3 = []; state.activePreset = null; document.querySelectorAll('.preset-btn').forEach(function(b){ b.classList.remove('active'); }); } else { state.items = []; for(var i=0;i<7;i++) state.items.push({ id:idSeq++, name:'', unit:'개', qty:1, unitPrice:null, purchased:false, person:'' }); } renderAll(); toast('초기화했어요'); }); }); // 취합모드 프리셋 버튼 - 모드3 전용 목록(items3)을 해당 카테고리로 완전히 교체 function fillPresetList(key, names){ state.items3 = names.map(function(name){ return { id:idSeq++, name:name, unit:'개', qty:1, unitPrice:null, purchased:false, person:'' }; }); state.activePreset = key; renderAll(); } document.querySelectorAll('.preset-btn').forEach(function(btn){ bindTap(btn, function(){ var key = btn.getAttribute('data-preset'); document.querySelectorAll('.preset-btn').forEach(function(b){ b.classList.remove('active'); }); btn.classList.add('active'); if(key==='직접'){ state.items3 = []; for(var i=0;i<7;i++) state.items3.push({ id:idSeq++, name:'', unit:'개', qty:1, unitPrice:null, purchased:false, person:'' }); state.activePreset = key; renderAll(); } else { fillPresetList(key, PRESETS[key]); toast(key+' 메뉴로 채웠어요'); } }); }); // ---------- 열 개수 (모드1/3 전용, 2~5열) ---------- function refreshColUI(){ document.getElementById('colVal').textContent = '한 줄 ' + state.cols + '개'; grid.style.setProperty('--cols', state.cols); saveLocal(); } bindTap(document.getElementById('colMinus'), function(){ state.cols = Math.max(2,state.cols-1); refreshColUI(); }); bindTap(document.getElementById('colPlus'), function(){ state.cols = Math.min(5,state.cols+1); refreshColUI(); }); refreshColUI(); // ---------- 공통: 렌더 총괄 ---------- function renderAll(){ if(state.mode===1 || state.mode===3) renderGridCube(); else renderListMode2(); updateTotals(); saveLocal(); } // ---------- 모드1/3: 큐브 그리드 (구매완료도 같은 자리에서 이름만 줄긋기로 표시) ---------- // 모드1은 state.items, 모드3은 별도의 state.items3을 사용해 서로 섞이지 않음 function renderGridCube(){ grid.innerHTML = ''; var isMode3 = state.mode===3; var list = isMode3 ? state.items3 : state.items; list.forEach(function(it){ grid.appendChild(buildCard(it, isMode3)); }); grid.appendChild(buildAddCard(isMode3)); } function buildAddCard(isMode3){ var el = document.createElement('div'); el.className = 'add-card'; el.innerHTML = '<div class="plus">＋</div><div>메뉴추가</div>'; bindTap(el, function(){ var list = isMode3 ? state.items3 : state.items; for(var i=0;i<4;i++) list.push({ id:idSeq++, name:'', unit:'개', qty:1, unitPrice:null, purchased:false, person:'' }); renderAll(); }); return el; } function buildCard(it, isMode3){ var showPerson = isMode3; var isBlank = !it.name.trim(); var card = document.createElement('div'); card.className = 'sq-card' + (isBlank ? ' blank' : '') + (it.purchased ? ' done' : '') + (showPerson ? ' tall' : ''); // 1층: 메뉴 입력 var nameInp = document.createElement('input'); nameInp.className = 'sq-name-input'; nameInp.type = 'text'; nameInp.placeholder = '메뉴'; nameInp.value = it.name; nameInp.readOnly = !!it.purchased; // 카드 꾹누르기(구매완료)와 겹치지 않도록 입력창에서는 이벤트 전파 차단 nameInp.addEventListener('pointerdown', function(e){ e.stopPropagation(); }); nameInp.addEventListener('input', function(){ it.name = nameInp.value; }); nameInp.addEventListener('keydown', function(e){ if(e.key==='Enter') nameInp.blur(); }); nameInp.addEventListener('blur', function(){ it.name = nameInp.value.trim(); renderAll(); refreshOpenPanel(); }); // 2층: 단가 - 숫자 직접 입력, 천단위 콤마 자동 표시 var priceInp = document.createElement('input'); priceInp.className = 'sq-price-input'; priceInp.type = 'text'; priceInp.inputMode = 'numeric'; priceInp.placeholder = '단가'; priceInp.value = it.unitPrice ? it.unitPrice.toLocaleString('ko-KR') : ''; priceInp.readOnly = !!it.purchased; priceInp.addEventListener('pointerdown', function(e){ e.stopPropagation(); }); priceInp.addEventListener('input', function(){ var digits = priceInp.value.replace(/[^0-9]/g,''); it.unitPrice = digits ? parseInt(digits,10) : null; priceInp.value = it.unitPrice ? it.unitPrice.toLocaleString('ko-KR') : ''; updateTotals(); refreshOpenPanel(); }); priceInp.addEventListener('keydown', function(e){ if(e.key==='Enter') priceInp.blur(); }); priceInp.addEventListener('blur', function(){ renderAll(); }); // 3층: 개수 var qtyrow = document.createElement('div'); qtyrow.className='sq-qtyrow'; var minus = document.createElement('button'); minus.className='sq-qtybtn'; minus.textContent='−'; var qtyEl = document.createElement('div'); qtyEl.className='sq-qty num'; qtyEl.textContent = it.qty+it.unit; var plus = document.createElement('button'); plus.className='sq-qtybtn'; plus.textContent='+'; bindTap(minus, function(){ if(it.purchased) return; if(it.qty<=1){ showConfirm('"'+(it.name||'이 칸')+'" 삭제할까요?', function(){ removeItem(it, isMode3); renderAll(); refreshOpenPanel(); toast('삭제했어요'); }); return; } it.qty-=1; qtyEl.textContent=it.qty+it.unit; refreshOpenPanel(); updateTotals(); }); bindTap(plus, function(){ if(it.purchased) return; it.qty+=1; qtyEl.textContent=it.qty+it.unit; refreshOpenPanel(); updateTotals(); }); qtyrow.appendChild(minus); qtyrow.appendChild(qtyEl); qtyrow.appendChild(plus); card.appendChild(nameInp); card.appendChild(priceInp); card.appendChild(qtyrow); // 4층(취합모드 전용): 주문자 이름 if(showPerson){ var personInp = document.createElement('input'); personInp.className = 'sq-person-input'; personInp.type = 'text'; personInp.placeholder = '이름'; personInp.value = it.person || ''; personInp.readOnly = !!it.purchased; personInp.addEventListener('pointerdown', function(e){ e.stopPropagation(); }); personInp.addEventListener('input', function(){ it.person = personInp.value; }); personInp.addEventListener('keydown', function(e){ if(e.key==='Enter') personInp.blur(); }); personInp.addEventListener('blur', function(){ saveLocal(); }); card.appendChild(personInp); } bindTapAndHold(card, function(){}, function(){ if(isBlank){ toast('메뉴를 먼저 입력해주세요'); return; } if(it.purchased){ showConfirm('"'+it.name+'"을 다시 되돌릴까요?', function(){ it.purchased=false; renderAll(); toast(it.name+' 구매완료를 취소했어요'); }); } else { it.purchased = true; renderAll(); refreshOpenPanel(); toast(it.name+' 구매완료!'); } }); return card; } // ---------- 모드2: 단순 목록 (구매완료도 같은 자리에서 줄긋기로 표시) ---------- function renderListMode2(){ m2List.innerHTML = ''; if(state.items.length===0){ var empty = document.createElement('div'); empty.className='m2-empty'; empty.textContent = '아래 [+ 항목 추가]로 메뉴를 적어보세요'; m2List.appendChild(empty); } state.items.forEach(function(it, idx){ m2List.appendChild(buildM2Row(it, idx+1)); }); } function buildM2Row(it, idx){ var row = document.createElement('div'); row.className='m2-row' + (it.purchased ? ' done' : ''); // 완료 체크박스 (번호 대신) var check = document.createElement('input'); check.type = 'checkbox'; check.className = 'm2-check'; check.checked = !!it.purchased; check.addEventListener('change', function(){ if(check.checked){ if(!it.name.trim()){ toast('메뉴명을 먼저 입력해주세요'); check.checked=false; return; } it.purchased = true; renderAll(); toast(it.name+' 구매완료!'); } else { showConfirm('"'+it.name+'"을 다시 되돌릴까요?', function(){ it.purchased=false; renderAll(); toast(it.name+' 구매완료를 취소했어요'); }, function(){ check.checked = true; }); } }); var nameInp = document.createElement('input'); nameInp.className='m2-name'; nameInp.type='text'; nameInp.placeholder='메뉴 입력'; nameInp.value = it.name; nameInp.readOnly = !!it.purchased; nameInp.addEventListener('input', function(){ it.name = nameInp.value; updateTotals(); }); nameInp.addEventListener('blur', function(){ if(!it.name.trim() && !it.purchased){ showConfirm('메뉴명이 비어있어요. 이 항목을 삭제할까요?', function(){ removeItem(it); renderAll(); }); } }); // 단가 - 숫자 직접 입력, 천단위 콤마 var priceInp = document.createElement('input'); priceInp.className = 'm2-price-input'; priceInp.type = 'text'; priceInp.inputMode = 'numeric'; priceInp.placeholder = '단가'; priceInp.value = it.unitPrice ? it.unitPrice.toLocaleString('ko-KR') : ''; priceInp.readOnly = !!it.purchased; priceInp.addEventListener('input', function(){ var digits = priceInp.value.replace(/[^0-9]/g,''); it.unitPrice = digits ? parseInt(digits,10) : null; priceInp.value = it.unitPrice ? it.unitPrice.toLocaleString('ko-KR') : ''; updateTotals(); }); priceInp.addEventListener('keydown', function(e){ if(e.key==='Enter') priceInp.blur(); }); // 개수: +/- 세로 배치 var qtyStack = document.createElement('div'); qtyStack.className='m2-qty-stack'; var qp = document.createElement('button'); qp.textContent='+'; var qs = document.createElement('span'); qs.className='num'; qs.textContent = it.qty+it.unit; var qm = document.createElement('button'); qm.textContent='−'; bindTap(qp, function(){ if(it.purchased) return; it.qty+=1; qs.textContent=it.qty+it.unit; updateTotals(); }); bindTap(qm, function(){ if(it.purchased) return; if(it.qty<=1){ showConfirm('"'+(it.name||'이 항목')+'" 삭제할까요?', function(){ removeItem(it); renderAll(); }); return; } it.qty-=1; qs.textContent=it.qty+it.unit; updateTotals(); }); qtyStack.appendChild(qp); qtyStack.appendChild(qs); qtyStack.appendChild(qm); row.appendChild(check); row.appendChild(nameInp); row.appendChild(priceInp); row.appendChild(qtyStack); return row; } bindTap(document.getElementById('m2AddBtn'), function(){ state.items.push({ id:idSeq++, name:'', unit:'개', qty:1, unitPrice:null, purchased:false, person:'' }); renderAll(); var inputs = m2List.querySelectorAll('.m2-name'); if(inputs.length) inputs[inputs.length-1].focus(); }); // ---------- 예산 ---------- var budgetSlider = document.getElementById('budgetSlider'); function refreshBudgetFill(){ budgetSlider.style.setProperty('--_fill', (budgetSlider.value/budgetSlider.max*100)+'%'); } budgetSlider.addEventListener('input', function(){ state.budget = parseInt(budgetSlider.value,10); document.getElementById('budgetVal').textContent = fmt(state.budget); refreshBudgetFill(); updateTotals(); }); refreshBudgetFill(); // ---------- 주차 위치 ---------- document.getElementById('parkInput').addEventListener('input', function(e){ state.park = e.target.value; document.getElementById('rPark').textContent = state.park.trim() ? ' ️ '+state.park : '주차 위치 미입력'; saveLocal(); }); // ---------- 메모장 ---------- document.getElementById('memoBox').addEventListener('input', function(e){ state.memo = e.target.value; saveLocal(); }); // ---------- 계산기 아코디언 + 로직 ---------- var calcHead = document.getElementById('calcHead'); bindTap(calcHead, function(){ var open = calcHead.classList.contains('collapsed'); calcHead.classList.toggle('collapsed', !open); document.getElementById('calcChevron').classList.toggle('collapsed', !open); document.getElementById('calcBody').classList.toggle('collapsed', !open); }); var calcState = { cur:'0', prev:null, op:null, resetNext:false }; function calcUpdateDisplay(){ document.getElementById('calcDisplay').textContent = calcState.cur; } function calcCompute(){ if(calcState.op==null || calcState.prev==null) return; var a=calcState.prev, b=parseFloat(calcState.cur)||0, r=0; switch(calcState.op){ case '+': r=a+b; break; case '-': r=a-b; break; case '*': r=a*b; break; case '/': r = b!==0 ? a/b : 0; break; } r = Math.round(r*10000)/10000; calcState.cur = String(r); calcState.prev = r; calcState.resetNext = true; } function calcInput(k){ if(k>='0' && k<='9'){ if(calcState.resetNext){ calcState.cur='0'; calcState.resetNext=false; } calcState.cur = (calcState.cur==='0') ? k : calcState.cur+k; } else if(k==='.'){ if(calcState.resetNext){ calcState.cur='0'; calcState.resetNext=false; } if(calcState.cur.indexOf('.')===-1) calcState.cur += '.'; } else if(k==='C'){ calcState = { cur:'0', prev:null, op:null, resetNext:false }; } else if(k==='⌫'){ calcState.cur = calcState.cur.length>1 ? calcState.cur.slice(0,-1) : '0'; } else if(k==='%'){ calcState.cur = String((parseFloat(calcState.cur)||0)/100); } else if(k==='+'||k==='-'||k==='*'||k==='/'){ if(calcState.op && !calcState.resetNext){ calcCompute(); } else { calcState.prev = parseFloat(calcState.cur)||0; } calcState.op = k; calcState.resetNext = true; } else if(k==='='){ calcCompute(); calcState.op = null; } calcUpdateDisplay(); } document.querySelectorAll('.calc-grid button').forEach(function(btn){ bindTap(btn, function(){ calcInput(btn.getAttribute('data-k')); }); }); // ---------- 합계 ---------- function updateTotals(){ var total = state.items.reduce(function(s,it){ return s + it.qty*(it.unitPrice||0); }, 0); var count = state.items.reduce(function(s,it){ return s + it.qty; }, 0); var purchased = state.items.filter(function(it){return it.purchased;}) .reduce(function(s,it){ return s + it.qty*(it.unitPrice||0); }, 0); document.getElementById('totalNow').textContent = fmt(total); document.getElementById('totalLeft').textContent = fmt(Math.max(state.budget-total,0)); var bar = document.getElementById('totalBar'); var pct = state.budget>0 ? Math.min(100,(total/state.budget)*100) : (total>0?100:0); bar.style.width = pct+'%'; bar.style.background = pct>=100 ? 'var(--red)' : (pct>=80 ? 'var(--orange)' : 'var(--green)'); document.getElementById('overWarn').style.display = total>state.budget ? 'block' : 'none'; document.getElementById('purchaseSum').innerHTML = '구매금액 : <span class="num">'+fmt(purchased)+'</span>'; document.getElementById('rCount').textContent = count+'개 품목'; document.getElementById('rTotal').textContent = fmt(total); saveLocal(); } // ---------- 공유 (카톡/메일 등 공유시트 우선, 없으면 링크 복사) ---------- function buildShareUrl(){ var payload = { budget:state.budget, park:state.park, items:state.items, items3:state.items3, cols:state.cols, mode:state.mode, memo:state.memo, fontScale:state.fontScale }; var encoded = btoa(unescape(encodeURIComponent(JSON.stringify(payload)))); return location.href.split('#')[0] + '#data=' + encoded; } bindTap(document.getElementById('shareBtn'), function(){ try{ var url = buildShareUrl(); if(navigator.share){ navigator.share({ title:'모두의 장보기계산기', text:'같이 확인해보세요!', url:url }).catch(function(){}); return; } if(navigator.clipboard && navigator.clipboard.writeText){ navigator.clipboard.writeText(url).then(function(){ toast('공유 링크가 복사되었어요! 카톡·메일에 붙여넣기 해보세요'); }); } else { var ta = document.createElement('textarea'); ta.value=url; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); toast('공유 링크가 복사되었어요! 카톡·메일에 붙여넣기 해보세요'); } }catch(err){ toast('공유 링크 생성에 실패했어요'); } }); // ---------- 값 적용 공통 함수 (공유링크 로드 / 로컬저장 로드 공용) ---------- function applyPayload(payload){ state.budget = payload.budget||100000; state.park = payload.park||''; state.items = payload.items||[]; state.items3 = payload.items3||[]; state.cols = payload.cols||2; state.mode = payload.mode||1; state.memo = payload.memo||''; state.fontScale = payload.fontScale||1; state.items.forEach(function(it){ if(it.person===undefined) it.person=''; }); state.items3.forEach(function(it){ if(it.person===undefined) it.person=''; }); idSeq = state.items.concat(state.items3).reduce(function(m,it){return Math.max(m,it.id||0);},0)+1; budgetSlider.value = state.budget; document.getElementById('budgetVal').textContent = fmt(state.budget); document.getElementById('parkInput').value = state.park; document.getElementById('memoBox').value = state.memo; document.getElementById('rPark').textContent = state.park.trim() ? ' ️ '+state.park : '주차 위치 미입력'; refreshBudgetFill(); var lvIdx = FS_LEVELS.map(function(l){return l.zoom;}).indexOf(state.fontScale); fsIndex = lvIdx>=0 ? lvIdx : 1; applyFontScale(); refreshColUI(); } function loadFromHash(){ if(location.hash.indexOf('#data=')===0){ try{ var json = decodeURIComponent(escape(atob(location.hash.replace('#data=','')))); applyPayload(JSON.parse(json)); return true; }catch(e){ return false; } } return false; } // ---------- 기기 저장 (입력 즉시 자동 저장) ---------- var LOCAL_KEY = 'shopping_calc_state_v13'; function saveLocal(){ try{ localStorage.setItem(LOCAL_KEY, JSON.stringify({ budget:state.budget, park:state.park, items:state.items, items3:state.items3, cols:state.cols, mode:state.mode, memo:state.memo, fontScale:state.fontScale })); }catch(e){} } function loadLocal(){ try{ var raw = localStorage.getItem(LOCAL_KEY); if(!raw) return false; applyPayload(JSON.parse(raw)); return true; }catch(e){ return false; } } // ---------- 마트 바로가기 ---------- function renderMartRow(){ var martRow = document.getElementById('martRow'); martRow.innerHTML = ''; MARTS.forEach(function(m){ var badge = document.createElement('a'); badge.className = 'mart-badge'; badge.href = m.url; badge.target = '_blank'; badge.rel = 'noopener'; var circle = document.createElement('div'); circle.className='circle'; circle.style.background = m.color; circle.style.color = m.textColor; circle.textContent = m.emoji; var label = document.createElement('div'); label.className='label'; label.textContent = m.label; badge.appendChild(circle); badge.appendChild(label); badge.addEventListener('pointerdown', function(){ badge.classList.add('pressing'); }); badge.addEventListener('pointerup', function(){ badge.classList.remove('pressing'); }); badge.addEventListener('pointercancel', function(){ badge.classList.remove('pressing'); }); martRow.appendChild(badge); }); } // 공유링크로 들어온 게 아니면 기기에 저장된 이전 내용을 불러오고, // 그것도 없으면 빈 항목 7개를 기본으로 깔아둠 if(!loadFromHash()){ if(!loadLocal()){ for(var i=0;i<7;i++) state.items.push({ id:idSeq++, name:'', unit:'개', qty:1, unitPrice:null, purchased:false, person:'' }); } } setMode(state.mode); renderMartRow(); })(); </script> </body> </html> 모두의계산기 0-1.kr/46 모두 모두의장보기계산기 생활 예산에맞게장보기가능한웹앱 웹앱 장보기 최매슨생 https://0-1.kr/46 https://0-1.kr/46#entry46comment Mon, 18 Dec 2023 01:23:48 +0900 https://0-1.kr/45 <!-- 브라우저탭 알림_V7_261015 출처: 스타트업ex _ cds1981@naver.com 티스토리 HTML 모드 본문용 (DOCTYPE/html/head/body 없음), CSS 접두사 bt- V7 = 티스토리 먹통 수정(금지 태그 문자열 분리), 버튼명 바로적용 V6 = 실제 기능 구현: 알람·타이머·카운트다운·백타임·루틴 동작, 공통 설정 반영, 4초 자동저장, 되돌리기/되살리기, 저장 팝업(엑셀 붙여넣기·CSV·HTML), 사용설명서 갱신 V5 = 미리보기 알약과 설정 알약 탭 연동, 사용설명서 작성, 타이틀바 버튼(완전초기화 / URL생성 / 바로적용) 연결 V4 = 설정 영역(공통 설정, 1~6)을 미리보기 아래 한 줄 알약 탭으로 변경, 적용중 알약은 색이 바뀌고 '적용중' 표시 (기능은 V3와 동일) V3 = 공통 설정을 아코디언으로 변경, 주소 0-1.kr/45 기준으로 공유 주소와 시작페이지 안내 수정 티스토리 주소: 0-1.kr/45 V2 = 공통 설정(초 단위 질문, 문구 움직임 선택: 틀만 있고 아직 미작동) + 아코디언 적용중 표시 + 시작페이지 설정 안내 V1 = 실시간 탭 미리보기 + 공유 팝업(원래 URL / 단축 URL) + 아코디언 색 구분 (알람 동작·저장·타이머 시작 등은 아직 연결 전) V0 기능 유지: 타이틀바, 사용설명서(탭 3개), 아코디언 1~5, 루틴, 복구 안내, 말풍선 --> <style> /* 레이아웃: 가운데 정렬 한 칸. 밝은 직사각형 타이틀바, 아래로 색이 다른 아코디언이 이어지는 구조 */ :root{ --bt-bg:#eaf0f7; --bt-card:#ffffff; --bt-bar:#f8fbff; --bt-ink:#14202e; --bt-sub:#566578; --bt-line:#cfd9e6; --bt-blue:#1b5fd1; --bt-blue-soft:#e3edff; --bt-btn:#ffffff; --bt-btn-hover:#eef4ff; --bt-dis:#eff3f8; --bt-inbg:#ffffff; --bt-tip-bg:#14202e; --bt-tip-ink:#ffffff; --bt-warn:#b4570a; --bt-warn-soft:#fff1e0; --bt-good:#1c7a4d; --bt-t0:#e8eff9; --bt-t1:#fdecea; --bt-t2:#e5f4ec; --bt-t3:#fff2dc; --bt-t4:#eee9fb; --bt-t5:#e2f2f8; --bt-t6:#ebf4db; --bt-t7:#ebe9e6; --bt-t8:#fbe9f2; --bt-onb:#ffffff; --bt-font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Segoe UI",Roboto,sans-serif; --bt-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bt-bg:#0d141d;--bt-card:#161f2b;--bt-bar:#1a2534;--bt-ink:#e8eef7;--bt-sub:#9eacbf; --bt-line:#2c3a4d;--bt-blue:#78acff;--bt-blue-soft:#1e3354;--bt-btn:#1d2938;--bt-btn-hover:#25364b; --bt-dis:#1a2532;--bt-inbg:#0f1822;--bt-tip-bg:#e8eef7;--bt-tip-ink:#0d141d;--bt-warn:#ffb067;--bt-warn-soft:#3a2a17;--bt-good:#6fd3a1; --bt-t0:#1b2638;--bt-t1:#2d1f25;--bt-t2:#1a2e27;--bt-t3:#32281a;--bt-t4:#272138;--bt-t5:#182c35;--bt-t6:#252f1a;--bt-t7:#25241f;--bt-t8:#2e2029;--bt-onb:#0d141d; color-scheme:dark; } } :root[data-theme="dark"]{ --bt-bg:#0d141d;--bt-card:#161f2b;--bt-bar:#1a2534;--bt-ink:#e8eef7;--bt-sub:#9eacbf; --bt-line:#2c3a4d;--bt-blue:#78acff;--bt-blue-soft:#1e3354;--bt-btn:#1d2938;--bt-btn-hover:#25364b; --bt-dis:#1a2532;--bt-inbg:#0f1822;--bt-tip-bg:#e8eef7;--bt-tip-ink:#0d141d;--bt-warn:#ffb067;--bt-warn-soft:#3a2a17;--bt-good:#6fd3a1; --bt-t0:#1b2638;--bt-t1:#2d1f25;--bt-t2:#1a2e27;--bt-t3:#32281a;--bt-t4:#272138;--bt-t5:#182c35;--bt-t6:#252f1a;--bt-t7:#25241f;--bt-t8:#2e2029;--bt-onb:#0d141d; color-scheme:dark; } body{ background:var(--bt-bg);color:var(--bt-ink);font-family:var(--bt-font); font-size:16px;line-height:1.55; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-top:16px;padding-bottom:40px; -webkit-text-size-adjust:100%;text-size-adjust:100%; } body.bt-popup-open{overflow:hidden} .bt-wrap{max-width:720px;margin:0 auto;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:14px} .bt-wrap *,.bt-wrap *::before,.bt-wrap *::after,.bt-pop *,.bt-pop *::before,.bt-pop *::after{-webkit-box-sizing:border-box;box-sizing:border-box} /* 버튼 공통 */ .bt-btn{ -webkit-appearance:none;appearance:none;font-family:inherit;font-size:16px;font-weight:600;color:var(--bt-ink); background:var(--bt-btn);border:1px solid var(--bt-line);border-radius:6px;padding:10px 14px;min-height:44px; cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent; -webkit-user-select:none;user-select:none; } .bt-btn:hover{background:var(--bt-btn-hover)} .bt-btn:active{background:var(--bt-blue-soft)} .bt-btn[aria-pressed="true"]{background:var(--bt-blue-soft);border-color:var(--bt-blue);color:var(--bt-blue)} .bt-btn:focus-visible,.bt-acc-head:focus-visible,.bt-tab:focus-visible{outline:3px solid var(--bt-blue);outline-offset:2px} .bt-sm{font-size:14px;min-height:38px;padding:6px 12px} .bt-ico{padding:0;width:48px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;gap:1px;font-size:12px;line-height:1.1} .bt-ico svg{width:20px;height:20px;display:block;stroke:var(--bt-blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* 타이틀바 */ .bt-bar{background:var(--bt-bar);border:1px solid var(--bt-line);border-radius:0;padding:14px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:12px} .bt-bar-top{display:-webkit-flex;display:flex;-webkit-align-items:flex-start;align-items:flex-start;-webkit-justify-content:space-between;justify-content:space-between;gap:10px} .bt-ttl-wrap{min-width:0;-webkit-flex:1 1 auto;flex:1 1 auto} .bt-ttl{margin:0;font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-0.01em;overflow-wrap:anywhere;word-break:keep-all} .bt-sub{margin:3px 0 0;font-size:12px;line-height:1.4;color:var(--bt-blue);font-weight:600} .bt-top-btns{display:-webkit-flex;display:flex;gap:6px;-webkit-flex:0 0 auto;flex:0 0 auto} .bt-bar-btns{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:8px} .bt-bar-btns .bt-btn{-webkit-flex:1 1 90px;flex:1 1 90px} /* 카드·아코디언 (섹션마다 은은한 색) */ .bt-card{background:var(--bt-card);border:1px solid var(--bt-line);border-radius:6px} .bt-c0{background:var(--bt-t0)} .bt-c1{background:var(--bt-t1)} .bt-c2{background:var(--bt-t2)} .bt-c3{background:var(--bt-t3)} .bt-c4{background:var(--bt-t4)} .bt-c5{background:var(--bt-t5)} .bt-c6{background:var(--bt-t6)} .bt-c7{background:var(--bt-t7)} .bt-c8{background:var(--bt-t8)} .bt-acc-head{ -webkit-appearance:none;appearance:none;width:100%;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:10px; text-align:left;font-family:inherit;font-size:18px;font-weight:700;color:var(--bt-ink);background:transparent;border:0;border-radius:6px; padding:14px;min-height:56px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .bt-acc-name{-webkit-flex:1 1 auto;flex:1 1 auto;min-width:0} .bt-acc-tag{font-size:12px;font-weight:700;color:var(--bt-blue);background:var(--bt-card);border:1px solid var(--bt-line);border-radius:4px;padding:1px 7px;white-space:nowrap} .bt-arrow{-webkit-flex:0 0 auto;flex:0 0 auto;width:22px;height:22px;stroke:var(--bt-sub);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;-webkit-transition:-webkit-transform .2s;transition:transform .2s} .bt-acc-head[aria-expanded="true"] .bt-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)} .bt-acc-body{padding:2px 14px 16px;border-top:1px solid var(--bt-line);display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:12px} .bt-acc-body[hidden]{display:none} .bt-note{margin:12px 0 0;font-size:14px;color:var(--bt-sub)} .bt-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .bt-field{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:5px;min-width:0} .bt-field.bt-wide{grid-column:1 / -1} .bt-lbl{font-size:14px;font-weight:700;color:var(--bt-sub)} .bt-in{ font-family:inherit;font-size:16px;color:var(--bt-ink);background:var(--bt-inbg);border:1px solid var(--bt-line);border-radius:6px; padding:10px 12px;min-height:44px;width:100%;min-width:0;-webkit-appearance:none;appearance:none; } textarea.bt-in{min-height:84px;resize:vertical} .bt-in:focus{outline:2px solid var(--bt-blue);outline-offset:1px} .bt-checks{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:8px 16px} .bt-chk{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:6px;font-size:16px} .bt-chk input{width:20px;height:20px} .bt-actions{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:8px} .bt-chip{font-size:12px;font-weight:700;color:var(--bt-warn);background:var(--bt-warn-soft);border-radius:4px;padding:2px 7px;white-space:nowrap} /* 사용설명서 탭 */ .bt-tabs{display:-webkit-flex;display:flex;gap:6px;padding-top:12px} .bt-tab{ -webkit-appearance:none;appearance:none;-webkit-flex:1 1 0;flex:1 1 0;font-family:inherit;font-size:16px;font-weight:700;color:var(--bt-sub); background:var(--bt-card);border:1px solid var(--bt-line);border-radius:6px;min-height:44px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .bt-tab[aria-selected="true"]{color:var(--bt-blue);background:var(--bt-blue-soft);border-color:var(--bt-blue)} .bt-panel{min-height:96px;border:1px dashed var(--bt-line);border-radius:6px;padding:12px;color:var(--bt-sub);font-size:15px;background:var(--bt-card)} .bt-panel[hidden]{display:none} /* 미리보기 (중앙정렬) */ .bt-prev{padding:14px;text-align:center;border-color:var(--bt-blue);display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;gap:10px} .bt-prev.bt-pin{position:-webkit-sticky;position:sticky;top:env(safe-area-inset-top,0px);z-index:5;-webkit-box-shadow:0 6px 18px rgba(10,20,40,.18);box-shadow:0 6px 18px rgba(10,20,40,.18)} .bt-prev-h{margin:0;font-size:18px;font-weight:800} .bt-chips{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center;gap:6px} .bt-tabbar{width:100%;max-width:460px;background:var(--bt-dis);border:1px solid var(--bt-line);border-bottom:2px solid var(--bt-blue);border-radius:10px 10px 0 0;padding:8px 8px 0;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;gap:4px} .bt-mtab{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;min-width:0;background:var(--bt-card);border-radius:8px 8px 0 0;padding:9px 10px;font-size:13px;text-align:left} .bt-mtab.bt-main{-webkit-flex:1 1 auto;flex:1 1 auto;max-width:250px} .bt-mtab.bt-off{-webkit-flex:0 1 110px;flex:0 1 110px;background:transparent;color:var(--bt-sub)} .bt-mt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;-webkit-flex:1 1 auto;flex:1 1 auto} .bt-x{-webkit-flex:0 0 auto;flex:0 0 auto;color:var(--bt-sub);font-size:15px;line-height:1} .bt-fav{-webkit-flex:0 0 auto;flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:#d93a3a;color:#fff;font-size:11px;font-weight:800;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center} .bt-full{font-size:15px;max-width:100%;overflow-wrap:anywhere} .bt-full b{font-weight:800} .bt-state{font-size:13px;color:var(--bt-sub)} /* V7: 숨김 보장, 도구줄, 읽기 영역, 목록 */ .bt-wrap [hidden],.bt-pop [hidden]{display:none!important} .bt-btn:disabled{opacity:.45;cursor:not-allowed} .bt-stopbtn{background:var(--bt-warn-soft);border-color:var(--bt-warn);color:var(--bt-warn)} .bt-toolrow{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;align-items:center;gap:8px} .bt-saved{font-size:13px;color:var(--bt-sub);margin-left:auto} .bt-readout{font-size:15px;font-weight:700;background:var(--bt-card);border:1px solid var(--bt-line);border-radius:6px;padding:10px 12px;text-align:left;overflow-wrap:anywhere} .bt-readout:empty{display:none} .bt-li-list{list-style:none;margin:0;padding:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:8px} .bt-li{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;background:var(--bt-card);border:1px solid var(--bt-line);border-radius:6px;padding:8px 10px} .bt-li-body{-webkit-flex:1 1 auto;flex:1 1 auto;min-width:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:2px;text-align:left} .bt-li-t{font-weight:800;font-size:16px;overflow-wrap:anywhere} .bt-li-x{font-size:14px;color:var(--bt-sub);overflow-wrap:anywhere} .bt-li-live{font-size:14px;font-weight:700;color:var(--bt-blue)} .bt-li.bt-off .bt-li-body{opacity:.5} .bt-li-empty{font-size:14px;color:var(--bt-sub);padding:4px 2px} /* 위험 버튼, 사용설명서 목록 */ .bt-btn.bt-danger{background:var(--bt-warn-soft);border-color:var(--bt-warn);color:var(--bt-warn)} .bt-steps ul{margin:0;padding-left:20px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:7px;text-align:left} /* 설정 알약 탭 (한 줄, 옆으로 밀어서 이동) */ .bt-settings{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:10px} .bt-pills{position:relative;display:-webkit-flex;display:flex;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;padding:2px 0 6px;scrollbar-width:thin} .bt-pill{-webkit-appearance:none;appearance:none;-webkit-flex:0 0 auto;flex:0 0 auto;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;gap:6px;font-family:inherit;font-size:15px;font-weight:700;color:var(--bt-ink);border:1px solid var(--bt-line);border-radius:999px;padding:8px 14px;min-height:44px;white-space:nowrap;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none} .bt-pill:focus-visible{outline:3px solid var(--bt-blue);outline-offset:2px} .bt-pill.bt-live-on{background:var(--bt-blue);border-color:var(--bt-blue);color:var(--bt-onb)} .bt-pill[aria-selected="true"]{border-color:var(--bt-ink);-webkit-box-shadow:inset 0 0 0 1px var(--bt-ink);box-shadow:inset 0 0 0 1px var(--bt-ink)} .bt-pl-live{font-size:11px;font-weight:800;background:var(--bt-onb);color:var(--bt-blue);border-radius:999px;padding:1px 7px} .bt-pl-live[hidden]{display:none} .bt-sx{border:1px solid var(--bt-line);border-radius:6px;padding:14px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:12px} .bt-sx[hidden]{display:none} .bt-sx-h{margin:0;font-size:18px;font-weight:800;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px} .bt-sx .bt-note{margin:0} .bt-sx .bt-ask{padding-top:0} /* 공통 설정 */ .bt-ask{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:8px;padding-top:12px} .bt-q{margin:0;font-size:17px;font-weight:800} .bt-seg{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:6px} .bt-seg .bt-btn{-webkit-flex:1 1 90px;flex:1 1 90px} .bt-hint{margin:0;font-size:13px;color:var(--bt-sub)} /* 시작페이지 안내 */ .bt-how{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:8px;margin-top:12px;background:var(--bt-card);border:1px solid var(--bt-line);border-radius:6px;padding:12px;font-size:15px;text-align:left} .bt-how p{margin:0} .bt-tabs5{-webkit-flex-wrap:wrap;flex-wrap:wrap} .bt-tabs5 .bt-tab{-webkit-flex:1 1 64px;flex:1 1 64px;font-size:15px;padding:0 6px} .bt-panel.bt-steps{color:var(--bt-ink)} .bt-steps ol{margin:0;padding-left:20px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:6px;text-align:left} .bt-steps .bt-small{margin:10px 0 0;font-size:13px;color:var(--bt-sub);text-align:left} .bt-addr{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:5px;padding-top:12px} .bt-addr-row{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px} .bt-addr-row .bt-btn{-webkit-flex:0 0 auto;flex:0 0 auto} .bt-addrbox{font-family:var(--bt-mono);font-size:15px;color:var(--bt-ink);background:var(--bt-inbg);border:1px solid var(--bt-line);border-radius:6px;padding:10px 12px;min-height:44px;width:100%;min-width:0;-webkit-appearance:none;appearance:none} /* 복구 안내 */ .bt-list{margin:0;padding-left:20px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:6px;font-size:15px;text-align:left} .bt-foot{font-size:12px;color:var(--bt-sub);text-align:center;padding-top:4px} /* 공유 팝업 */ .bt-pop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center; padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));font-family:var(--bt-font);font-size:16px;line-height:1.55;color:var(--bt-ink)} .bt-pop[hidden]{display:none} .bt-pop-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(10,18,30,.6)} .bt-pop-sheet{position:relative;width:100%;max-width:560px;max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;background:var(--bt-card);border:1px solid var(--bt-line);border-radius:10px;padding:14px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:12px} .bt-pop-head{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;gap:10px} .bt-pop-ttl{margin:0;font-size:20px;font-weight:800} .bt-rec{background:var(--bt-warn-soft);color:var(--bt-warn);border-radius:6px;padding:8px 12px;font-size:14px;font-weight:700} .bt-rec[hidden]{display:none} .bt-url{border:1px solid var(--bt-line);border-radius:8px;padding:12px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:8px;background:var(--bt-bar)} .bt-url-h{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;gap:8px;font-weight:800;font-size:17px} .bt-urlbox{font-family:var(--bt-mono);font-size:13px;line-height:1.4;min-height:64px;resize:none;word-break:break-all} .bt-pc{font-size:14px;line-height:1.45;text-align:left} .bt-pc span{display:inline-block;font-weight:800;margin-right:6px} .bt-pro{color:var(--bt-good)} .bt-con{color:var(--bt-warn)} .bt-qr{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;gap:8px;padding:6px 0} .bt-qr[hidden]{display:none} .bt-qrbox{background:#fff;padding:10px;border-radius:6px;line-height:0} .bt-stat{font-size:13px;color:var(--bt-sub);min-height:18px} /* 말풍선·토스트 */ .bt-tip{position:fixed;left:0;top:0;max-width:260px;background:var(--bt-tip-bg);color:var(--bt-tip-ink);font-size:14px;line-height:1.4;font-weight:600;padding:8px 11px;border-radius:8px;z-index:2147483647;pointer-events:none;opacity:0;-webkit-transition:opacity .12s;transition:opacity .12s;text-align:left} .bt-tip.bt-on{opacity:1} .bt-toast{position:fixed;left:0;right:0;bottom:0;padding:0 max(16px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));text-align:center;pointer-events:none;z-index:2147483647} .bt-toast span{display:inline-block;max-width:100%;background:var(--bt-tip-bg);color:var(--bt-tip-ink);font-size:15px;font-weight:600;padding:10px 16px;border-radius:8px;opacity:0;-webkit-transition:opacity .15s;transition:opacity .15s} .bt-toast.bt-on span{opacity:1} @media (prefers-reduced-motion: reduce){.bt-arrow,.bt-tip,.bt-toast span{-webkit-transition:none;transition:none}} </style> <div class="bt-wrap" id="bt-app"> <!-- 타이틀바 --> <header class="bt-bar" id="bt-titlebar"> <div class="bt-bar-top"> <div class="bt-ttl-wrap"> <h1 class="bt-ttl" id="bt-title">브라우저탭 알림_V7_261015</h1> <p class="bt-sub">탭 제목과 아이콘으로 알려주는 알람 · 타이머 · 루틴</p> </div> <div class="bt-top-btns"> <button type="button" class="bt-btn bt-ico" id="bt-share" data-tip="공유: 현재 설정을 원래 URL과 단축 URL로 만들어 공유합니다"> <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="18" cy="5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="19" r="2.5"/><path d="M8.2 10.8l7.6-4.4M8.2 13.2l7.6 4.4"/></svg>공유 </button> <button type="button" class="bt-btn bt-ico" id="bt-save" data-tip="저장: 엑셀 붙여넣기, CSV 파일, HTML 파일로 저장합니다"> <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 3h11l3 3v15H5z"/><path d="M8 3v6h7V3M8 21v-7h8v7"/></svg>저장 </button> <button type="button" class="bt-btn bt-ico" id="bt-bulb" data-tip="전구: 사용설명서를 펼쳐 보여줍니다"> <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z"/></svg>전구 </button> </div> </div> <div class="bt-bar-btns"> <button type="button" class="bt-btn" id="bt-b1" data-tip="완전초기화: 입력한 설정을 모두 지우고 처음 상태로 되돌립니다. 한 번 더 눌러야 실행됩니다">완전초기화</button> <button type="button" class="bt-btn" id="bt-b2" data-tip="URL생성: 입력한 설정을 압축해 공유 링크로 만들고 복사합니다">URL생성</button> <button type="button" class="bt-btn" id="bt-b3" aria-pressed="false" data-tip="바로적용: 미리보기에 보이는 제목과 아이콘을 지금 이 브라우저 탭에 바로 적용합니다. 다시 누르면 해제됩니다">바로적용</button> </div> </header> <!-- 섹션1: 사용설명서 --> <section class="bt-card bt-c0" id="bt-sec1"> <button type="button" class="bt-acc-head" id="bt-h0" aria-expanded="false" aria-controls="bt-p0" data-tip="사용설명서를 펼치거나 접습니다"> <span class="bt-acc-name">사용설명서</span> <svg class="bt-arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg> </button> <div class="bt-acc-body" id="bt-p0" hidden> <div class="bt-tabs" role="tablist" aria-label="사용설명서 탭"> <button type="button" class="bt-tab" data-grp="man" role="tab" id="bt-t1" aria-selected="true" aria-controls="bt-tp1" data-tip="사용법">1.00 사용법</button> <button type="button" class="bt-tab" data-grp="man" role="tab" id="bt-t2" aria-selected="false" aria-controls="bt-tp2" data-tip="버튼 설명">2.00 버튼</button> <button type="button" class="bt-tab" data-grp="man" role="tab" id="bt-t3" aria-selected="false" aria-controls="bt-tp3" data-tip="참고와 한계">3.00 참고</button> </div> <div class="bt-panel bt-steps" role="tabpanel" id="bt-tp1" aria-labelledby="bt-t1"> <ul> <li><b>화면 순서</b> 타이틀바, 사용설명서, 미리보기, 설정 알약, 시작페이지 안내 순서입니다.</li> <li><b>미리보기</b> 위쪽 알약(알람·현재시간·타이머·카운트다운·백타임·루틴)을 누르면 그 항목이 탭 모양으로 보이고, 바로 아래 설정 탭도 같은 항목으로 열립니다. 아래 설정 알약을 눌러도 같습니다.</li> <li><b>파란 알약</b> 파란색에 "적용중"이 붙은 알약이 지금 미리보기와 탭에 보이는 항목입니다. 공통 설정은 표시 항목이 아니라서 파란색이 되지 않습니다.</li> <li><b>알람</b> 시간과 문구를 쓰고 [알람 추가]를 누르면 목록에 쌓입니다. 시각이 되면 탭 제목이 깜빡이며 문구가 나오고, 스크롤 메모가 있으면 메모가 흘러갑니다. [매일 반복]을 끄면 한 번만 울립니다.</li> <li><b>현재시간</b> 년·월일·요일·시·분·초 중 보일 항목을 고르면 탭 제목에 시계가 표시됩니다.</li> <li><b>타이머</b> 시·분·초를 쓰고 [시작]을 누릅니다. [일시정지]한 뒤 [시작]을 누르면 이어서 갑니다. 끝나면 깜빡이고 소리가 납니다.</li> <li><b>카운트다운</b> 목표 날짜·시각을 정하면 D-일수 또는 일·시·분·초로 남은 시간이 보이고, 시각이 되면 알림이 울립니다.</li> <li><b>백타임</b> 목표 시각까지 남은 시간이 거꾸로 흐릅니다. 항목을 여러 개 추가할 수 있고, 가장 가까운 항목이 탭에 보입니다. 시각이 되면 문구가 나옵니다.</li> <li><b>루틴</b> 시각과 반복(매일·평일·요일 선택)을 정해 추가합니다. 시각이 되면 루틴 이름이 탭에 나옵니다.</li> <li><b>알림 끄기</b> 알림이 울리는 동안 미리보기에 [알림 끄기]가 나타납니다. 정한 지속 시간이 지나면 저절로 멈춥니다.</li> </ul> </div> <div class="bt-panel bt-steps" role="tabpanel" id="bt-tp2" aria-labelledby="bt-t2" hidden> <ul> <li><b>공통 설정</b> 초 단위 표시 여부, 평상시 문구 움직임(고정·깜빡임·스크롤·둘 다), 알림 방식·소리·지속 시간을 정합니다. 알람과 타이머는 항목 안에서 따로 정한 깜빡임 방식을 먼저 따릅니다.</li> <li><b>완전초기화</b> 입력한 설정과 목록, 타이머를 모두 지웁니다. 한 번 더 눌러야 실행되고 4초 안에 안 누르면 취소됩니다. 지운 뒤에도 [되돌리기]로 복구할 수 있습니다.</li> <li><b>URL생성</b> 입력한 설정을 압축해 링크로 만들고 바로 복사합니다. 공유 창에서 원래 URL, 단축 URL, QR을 고릅니다. 입력한 설정이 없으면 만들지 않습니다.</li> <li><b>바로적용</b> 미리보기에 보이는 제목과 아이콘을 지금 이 브라우저 탭에 적용합니다. 미리보기의 [이 탭에 적용]과 같은 기능이라 둘이 함께 켜지고 꺼집니다. 알림이 울릴 때는 적용을 켜지 않아도 탭이 바뀝니다.</li> <li><b>공유</b> URL생성과 같은 공유 창을 열지만 복사는 하지 않습니다. 단축 URL은 외부 서비스(is.gd)를 거치므로 인터넷이 필요합니다.</li> <li><b>저장</b> 엑셀에 붙여넣을 표, CSV 파일, 설정이 담긴 이동용 HTML 파일(열면 0-1.kr/45로 이동하며 설정 복원)을 만듭니다. 아이폰은 새 창에 내용이 나오니 복사해서 저장하세요.</li> <li><b>전구</b> 이 사용설명서를 펼쳐 보여줍니다.</li> </ul> </div> <div class="bt-panel bt-steps" role="tabpanel" id="bt-tp3" aria-labelledby="bt-t3" hidden> <ul> <li><b>자동저장</b> 입력할 때마다 4초 안에 이 기기에 저장되고, 다시 열면 이어서 복구됩니다. 타이머가 돌고 있었다면 남은 시간도 이어집니다. 링크로 열면 링크 안의 설정이 우선합니다.</li> <li><b>되돌리기·되살리기</b> 설정 알약 위 두 버튼으로 최근 60단계까지 오갈 수 있습니다.</li> <li><b>탭을 닫았을 때</b> 같은 기기와 브라우저라면 다시 열 때 자동으로 복구됩니다. 다른 기기에서는 [URL생성]으로 만든 링크를 댓글이나 메모에 남겨 두고 그 링크를 여세요.</li> <li><b>알림이 울리려면</b> 이 페이지가 열려 있어야 합니다. 탭을 닫으면 알림도 멈춥니다. 다른 탭을 보고 있어도 탭 제목은 바뀝니다. 컴퓨터가 절전 상태이면 그 사이의 알림은 울리지 않습니다.</li> <li><b>브라우저 제한</b> 탭 글꼴은 바꿀 수 없어서 유니코드 글자, 이모지, 아이콘 숫자로 표현합니다. 브라우저 하단 작업표시줄의 깜빡임은 페이지가 직접 제어할 수 없습니다.</li> <li><b>시작페이지</b> 이 페이지를 브라우저를 켤 때 자동으로 열리게 하는 방법은 맨 아래 [시작페이지로 설정하기]에 있습니다.</li> </ul> <p class="bt-small">이 설명은 V7 기준입니다. 기능이 바뀔 때마다 함께 고칩니다.</p> </div> </div> </section> <!-- 실시간 미리보기 (사용설명서 바로 아래) --> <section class="bt-card bt-prev" id="bt-prev"> <h2 class="bt-prev-h">미리보기</h2> <div class="bt-chips" id="bt-chips"> <button type="button" class="bt-btn bt-sm" data-mode="al" aria-pressed="true" data-tip="알람 설정이 탭에 어떻게 보일지 봅니다">알람</button> <button type="button" class="bt-btn bt-sm" data-mode="ct" aria-pressed="false" data-tip="현재시간 표시를 봅니다">현재시간</button> <button type="button" class="bt-btn bt-sm" data-mode="tm" aria-pressed="false" data-tip="타이머 표시를 봅니다">타이머</button> <button type="button" class="bt-btn bt-sm" data-mode="cd" aria-pressed="false" data-tip="카운트다운 표시를 봅니다">카운트다운</button> <button type="button" class="bt-btn bt-sm" data-mode="bk" aria-pressed="false" data-tip="백타임 표시를 봅니다">백타임</button> <button type="button" class="bt-btn bt-sm" data-mode="rt" aria-pressed="false" data-tip="루틴 표시를 봅니다">루틴</button> </div> <div class="bt-tabbar" aria-hidden="true"> <div class="bt-mtab bt-main"><span class="bt-fav" id="bt-pv-fav">●</span><span class="bt-mt" id="bt-pv-tab"></span><span class="bt-x">×</span></div> <div class="bt-mtab bt-off"><span class="bt-mt">다른 탭</span></div> </div> <div class="bt-full">전체 제목: <b id="bt-pv-full"></b></div> <div class="bt-state" id="bt-pv-state"></div> <div class="bt-actions" style="justify-content:center"> <button type="button" class="bt-btn bt-sm" id="bt-pv-blink" aria-pressed="false" data-tip="알람이 울릴 때 탭이 깜빡이는 모습을 미리 봅니다">깜빡임 보기</button> <button type="button" class="bt-btn bt-sm" id="bt-pv-apply" aria-pressed="false" data-tip="이 브라우저 탭의 제목과 아이콘에 실제로 적용해 봅니다. 한 번 더 누르면 원래대로 돌아갑니다">이 탭에 적용</button> <button type="button" class="bt-btn bt-sm" id="bt-pv-pin" aria-pressed="false" data-tip="미리보기를 화면 위에 고정해 아래 설정을 바꾸며 함께 봅니다">고정</button> <button type="button" class="bt-btn bt-sm bt-stopbtn" id="bt-stop" hidden data-tip="울리고 있는 알림을 모두 끕니다">알림 끄기</button> </div> <div class="bt-state">아래 설정을 바꾸면 바로 반영됩니다. 알림은 이 페이지가 열려 있는 동안 울립니다.</div> </section> <!-- 설정 알약 탭 (미리보기 바로 아래) --> <div class="bt-settings" id="bt-settings"> <div class="bt-toolrow"> <button type="button" class="bt-btn bt-sm" id="bt-undo" disabled data-tip="되돌리기: 직전 설정으로 돌아갑니다">↶ 되돌리기</button> <button type="button" class="bt-btn bt-sm" id="bt-redo" disabled data-tip="되살리기: 되돌린 설정을 다시 적용합니다">↷ 되살리기</button> <span class="bt-saved" id="bt-saved">자동저장 4초마다</span> </div> <div class="bt-pills" id="bt-pills" role="tablist" aria-label="설정 항목"> <button type="button" class="bt-pill bt-c8" role="tab" id="bt-px0" aria-selected="false" aria-controls="bt-sx0" data-tip="공통 설정(초 단위, 문구 움직임)을 엽니다"><span class="bt-pl-n">공통 설정</span><span class="bt-pl-live" hidden>적용중</span></button> <button type="button" class="bt-pill bt-c1" role="tab" id="bt-px1" aria-selected="true" aria-controls="bt-sx1" data-mode="al" data-tip="알람 설정을 엽니다. 누르면 미리보기도 알람으로 바뀝니다"><span class="bt-pl-n">1 알람</span><span class="bt-pl-live" hidden>적용중</span></button> <button type="button" class="bt-pill bt-c2" role="tab" id="bt-px2" aria-selected="false" aria-controls="bt-sx2" data-mode="ct" data-tip="현재시간 설정을 엽니다. 누르면 미리보기도 현재시간으로 바뀝니다"><span class="bt-pl-n">2 현재시간</span><span class="bt-pl-live" hidden>적용중</span></button> <button type="button" class="bt-pill bt-c3" role="tab" id="bt-px3" aria-selected="false" aria-controls="bt-sx3" data-mode="tm" data-tip="타이머 설정을 엽니다. 누르면 미리보기도 타이머로 바뀝니다"><span class="bt-pl-n">3 타이머</span><span class="bt-pl-live" hidden>적용중</span></button> <button type="button" class="bt-pill bt-c4" role="tab" id="bt-px4" aria-selected="false" aria-controls="bt-sx4" data-mode="cd" data-tip="카운트다운 설정을 엽니다. 누르면 미리보기도 카운트다운으로 바뀝니다"><span class="bt-pl-n">4 카운트다운</span><span class="bt-pl-live" hidden>적용중</span></button> <button type="button" class="bt-pill bt-c5" role="tab" id="bt-px5" aria-selected="false" aria-controls="bt-sx5" data-mode="bk" data-tip="백타임 설정을 엽니다. 누르면 미리보기도 백타임으로 바뀝니다"><span class="bt-pl-n">5 백타임</span><span class="bt-pl-live" hidden>적용중</span></button> <button type="button" class="bt-pill bt-c6" role="tab" id="bt-px6" aria-selected="false" aria-controls="bt-sx6" data-mode="rt" data-tip="루틴 설정을 엽니다. 누르면 미리보기도 루틴으로 바뀝니다"><span class="bt-pl-n">6 루틴</span><span class="bt-pl-live" hidden>적용중</span></button> </div> <div class="bt-sx bt-c8" role="tabpanel" id="bt-sx0" aria-labelledby="bt-px0" hidden> <h3 class="bt-sx-h">공통 설정</h3> <div class="bt-ask"> <p class="bt-q">모든 시간 표시에 초 단위를 넣을까요?</p> <div class="bt-seg" role="group" aria-label="초 단위 표시"> <button type="button" class="bt-btn bt-sm bt-segb" id="bt-sec-on" data-grp="sec" aria-pressed="true" data-tip="모든 시간 표시에 초까지 넣습니다 (예: 17:00:05)">초까지 표시</button> <button type="button" class="bt-btn bt-sm bt-segb" id="bt-sec-off" data-grp="sec" aria-pressed="false" data-tip="초를 빼고 분까지만 표시합니다 (예: 17:00)">분까지만</button> </div> <p class="bt-hint">분까지만 고르면 탭 제목이 1분 단위로만 바뀌어 덜 신경 쓰입니다. 현재시간의 [초] 체크와 함께 적용됩니다.</p> </div> <div class="bt-ask"> <p class="bt-q">평상시 문구는 어떻게 움직일까요?</p> <div class="bt-seg" role="group" aria-label="문구 움직임"> <button type="button" class="bt-btn bt-sm bt-segb" id="bt-mv-fix" data-grp="mv" aria-pressed="true" data-tip="문구가 움직이지 않고 그대로 보입니다">고정</button> <button type="button" class="bt-btn bt-sm bt-segb" id="bt-mv-blink" data-grp="mv" aria-pressed="false" data-tip="앞의 이모지가 1초마다 바뀌며 깜빡입니다">깜빡임</button> <button type="button" class="bt-btn bt-sm bt-segb" id="bt-mv-scroll" data-grp="mv" aria-pressed="false" data-tip="긴 문구가 탭 제목에서 옆으로 흘러갑니다">스크롤</button> <button type="button" class="bt-btn bt-sm bt-segb" id="bt-mv-both" data-grp="mv" aria-pressed="false" data-tip="흘러가면서 깜빡입니다">둘 다</button> </div> <p class="bt-hint">스크롤은 16자보다 긴 문구에만 적용됩니다. 알림이 울릴 때는 아래 설정과 항목별 깜빡임 방식을 따릅니다.</p> </div> <div class="bt-fields"> <label class="bt-field"><span class="bt-lbl">알림 깜빡임 방식 (백타임·루틴·카운트다운)</span><select class="bt-in" id="bt-cm-mode"><option value="0">제목 번갈아</option><option value="1">이모지</option><option value="2">파비콘 배지</option></select></label> <label class="bt-field"><span class="bt-lbl">알림 소리 (알람·백타임·루틴·카운트다운)</span><select class="bt-in" id="bt-cm-snd"><option value="0">끔</option><option value="1">벨</option><option value="2">비프</option></select></label> <label class="bt-field"><span class="bt-lbl">알림 지속 시간(초)</span><input class="bt-in" id="bt-cm-dur" type="number" placeholder="30"></label> </div> <div class="bt-actions"><button type="button" class="bt-btn bt-sm" id="bt-snd-test" data-tip="선택한 소리를 한 번 들려줍니다. 브라우저가 소리를 허용하게 하는 역할도 합니다">소리 들어보기</button></div> <p class="bt-hint">소리는 이 페이지를 한 번 눌러 본 뒤부터 울립니다. 폰은 무음 모드와 음량을 확인하세요.</p> </div> <div class="bt-sx bt-c1" role="tabpanel" id="bt-sx1" aria-labelledby="bt-px1"> <h3 class="bt-sx-h">1. 알람 · 스크롤 메모</h3> <p class="bt-note">알람 시간이 되면 탭 제목에 문구가 나오고 깜빡입니다. 문구와 메모를 쓰고 [알람 추가]를 누르면 목록에 쌓입니다.</p> <div class="bt-fields"> <label class="bt-field"><span class="bt-lbl">알람 시간</span><input class="bt-in" id="bt-al-time" type="time"></label> <label class="bt-field"><span class="bt-lbl">깜빡임 시간(초)</span><input class="bt-in" id="bt-al-blink" type="number" placeholder="30"></label> <label class="bt-field"><span class="bt-lbl">깜빡임 방식</span><select class="bt-in" id="bt-al-mode"><option value="0">제목 번갈아</option><option value="1">이모지</option><option value="2">파비콘 배지</option></select></label> <label class="bt-field bt-wide"><span class="bt-lbl">알람 문구</span><input class="bt-in" id="bt-al-text" type="text" placeholder="예: 회의 시작 5분 전"></label> <label class="bt-field bt-wide"><span class="bt-lbl">스크롤 메모 (알람이 울릴 때 탭 제목에 흘러가는 글)</span><textarea class="bt-in" id="bt-al-memo" placeholder="예: 자료 인쇄 · 마이크 점검 · 명단 확인"></textarea></label> </div> <div class="bt-checks"><label class="bt-chk"><input type="checkbox" id="bt-al-daily">매일 반복 (끄면 한 번만 울립니다)</label></div> <div class="bt-actions"><button type="button" class="bt-btn" id="bt-al-add" data-tip="위 내용으로 알람을 목록에 추가합니다">알람 추가</button></div> <div class="bt-readout" id="bt-al-disp"></div> <ul class="bt-li-list" id="bt-al-list"></ul> </div> <div class="bt-sx bt-c2" role="tabpanel" id="bt-sx2" aria-labelledby="bt-px2" hidden> <h3 class="bt-sx-h">2. 현재시간</h3> <p class="bt-note">탭 제목에 현재 시각을 보여줍니다. 표시할 항목을 고릅니다. 공통 설정에서 초 단위를 끄면 [초]를 체크해도 표시하지 않습니다.</p> <div class="bt-checks"> <label class="bt-chk"><input type="checkbox" id="bt-ct-y">년</label> <label class="bt-chk"><input type="checkbox" id="bt-ct-d">월·일</label> <label class="bt-chk"><input type="checkbox" id="bt-ct-w" checked>요일</label> <label class="bt-chk"><input type="checkbox" id="bt-ct-h" checked>시</label> <label class="bt-chk"><input type="checkbox" id="bt-ct-m" checked>분</label> <label class="bt-chk"><input type="checkbox" id="bt-ct-s" checked>초</label> </div> <div class="bt-fields"> <label class="bt-field"><span class="bt-lbl">글자 모양</span><select class="bt-in" id="bt-ct-font"><option value="0">기본</option><option value="1">유니코드 굵은 숫자</option><option value="2">이모지 숫자</option></select></label> </div> <div class="bt-readout" id="bt-ct-disp"></div> </div> <div class="bt-sx bt-c3" role="tabpanel" id="bt-sx3" aria-labelledby="bt-px3" hidden> <h3 class="bt-sx-h">3. 타이머</h3> <p class="bt-note">시간을 정하고 [시작]을 누르면 줄어듭니다. 끝나면 탭이 깜빡이고 소리가 납니다. 일시정지 후 이어서 시작할 수 있습니다.</p> <div class="bt-fields"> <label class="bt-field"><span class="bt-lbl">시</span><input class="bt-in" id="bt-tm-h" type="number" placeholder="0"></label> <label class="bt-field"><span class="bt-lbl">분</span><input class="bt-in" id="bt-tm-m" type="number" placeholder="10"></label> <label class="bt-field"><span class="bt-lbl">초</span><input class="bt-in" id="bt-tm-s" type="number" placeholder="0"></label> <label class="bt-field"><span class="bt-lbl">종료 후 깜빡임</span><select class="bt-in" id="bt-tm-blink"><option value="0">제목 번갈아</option><option value="1">이모지</option><option value="2">파비콘 배지</option></select></label> <label class="bt-field"><span class="bt-lbl">소리</span><select class="bt-in" id="bt-tm-snd"><option value="0">끔</option><option value="1">벨</option><option value="2">비프</option></select></label> </div> <div class="bt-actions"> <button type="button" class="bt-btn" id="bt-tm-start" data-tip="타이머를 시작하거나 이어서 시작합니다">시작</button> <button type="button" class="bt-btn" id="bt-tm-pause" data-tip="타이머를 잠시 멈춥니다">일시정지</button> <button type="button" class="bt-btn" id="bt-tm-reset" data-tip="타이머를 처음 시간으로 되돌립니다">초기화</button> </div> <div class="bt-readout" id="bt-tm-disp"></div> </div> <div class="bt-sx bt-c4" role="tabpanel" id="bt-sx4" aria-labelledby="bt-px4" hidden> <h3 class="bt-sx-h">4. 카운트다운</h3> <p class="bt-note">정한 날짜와 시각까지 남은 시간을 탭 제목에 보여줍니다. 발표일, 접수 마감일에 씁니다. 시각이 되면 알림이 울립니다.</p> <div class="bt-fields"> <label class="bt-field"><span class="bt-lbl">목표 날짜·시각</span><input class="bt-in" id="bt-cd-at" type="datetime-local"></label> <label class="bt-field"><span class="bt-lbl">이름</span><input class="bt-in" id="bt-cd-name" type="text" placeholder="예: 발표 심사"></label> <label class="bt-field"><span class="bt-lbl">표시 형식</span><select class="bt-in" id="bt-cd-fmt"><option value="0">D-일수</option><option value="1">일·시·분·초</option></select></label> </div> <div class="bt-readout" id="bt-cd-disp"></div> </div> <div class="bt-sx bt-c5" role="tabpanel" id="bt-sx5" aria-labelledby="bt-px5" hidden> <h3 class="bt-sx-h">5. 백타임</h3> <p class="bt-note">목표 시각을 정하면 지금부터 그 시각까지 남은 시간이 거꾸로 흐릅니다. 지금 17시에 목표를 18시로 하면 1시간이 흘러갑니다. 항목을 여러 개 추가할 수 있고, 시각이 되면 문구를 띄웁니다.</p> <div class="bt-fields"> <label class="bt-field"><span class="bt-lbl">항목 이름</span><input class="bt-in" id="bt-bk-name" type="text" placeholder="예: 퇴근"></label> <label class="bt-field"><span class="bt-lbl">목표 시각</span><input class="bt-in" id="bt-bk-at" type="time"></label> <label class="bt-field bt-wide"><span class="bt-lbl">도착 시 스크롤 문구</span><input class="bt-in" id="bt-bk-text" type="text" placeholder="예: 퇴근 시간입니다. 수고하셨습니다"></label> </div> <div class="bt-actions"><button type="button" class="bt-btn" id="bt-bk-add" data-tip="위 내용으로 백타임 항목을 추가합니다">항목 추가</button></div> <ul class="bt-li-list" id="bt-bk-list"></ul> </div> <div class="bt-sx bt-c6" role="tabpanel" id="bt-sx6" aria-labelledby="bt-px6" hidden> <h3 class="bt-sx-h">6. 루틴</h3> <p class="bt-note">하루 일정, 약 먹는 시간, 물 주는 시간처럼 반복되는 알림을 모읍니다. 시각이 되면 이름이 탭에 나옵니다.</p> <div class="bt-fields"> <label class="bt-field"><span class="bt-lbl">루틴 이름</span><input class="bt-in" id="bt-rt-name" type="text" placeholder="예: 물 주기"></label> <label class="bt-field"><span class="bt-lbl">시각</span><input class="bt-in" id="bt-rt-at" type="time"></label> <label class="bt-field"><span class="bt-lbl">반복</span><select class="bt-in" id="bt-rt-rep"><option value="0">매일</option><option value="1">평일</option><option value="2">요일 선택</option></select></label> </div> <div class="bt-checks" id="bt-rt-days" hidden> <label class="bt-chk"><input type="checkbox" id="bt-rd0">일</label> <label class="bt-chk"><input type="checkbox" id="bt-rd1">월</label> <label class="bt-chk"><input type="checkbox" id="bt-rd2">화</label> <label class="bt-chk"><input type="checkbox" id="bt-rd3">수</label> <label class="bt-chk"><input type="checkbox" id="bt-rd4">목</label> <label class="bt-chk"><input type="checkbox" id="bt-rd5">금</label> <label class="bt-chk"><input type="checkbox" id="bt-rd6">토</label> </div> <div class="bt-actions"><button type="button" class="bt-btn" id="bt-rt-add" data-tip="위 내용으로 루틴을 추가합니다">루틴 추가</button></div> <ul class="bt-li-list" id="bt-rt-list"></ul> </div> </div> <!-- 닫았을 때 복구 --> <section class="bt-card" style="padding:14px"> <div class="bt-lbl" style="margin-bottom:8px">탭을 실수로 닫았을 때 <span class="bt-chip">안내 초안</span></div> <ol class="bt-list"> <li>같은 기기와 브라우저라면 이 페이지를 다시 열면 4초마다 저장된 설정이 돌아옵니다.</li> <li>[공유]로 만든 링크를 댓글에 남겨 두면, 다른 기기에서도 그 링크로 열어 복구합니다.</li> <li>잘못 바꿨다면 되돌리기로 직전 상태를 불러옵니다.</li> </ol> </section> <!-- 7. 시작페이지로 설정하기 --> <section class="bt-card bt-c7"> <button type="button" class="bt-acc-head" id="bt-h7" aria-expanded="false" aria-controls="bt-p7" data-tip="시작페이지 설정 방법을 펼치거나 접습니다"> <span class="bt-acc-name">7. 시작페이지로 설정하기</span><span class="bt-acc-tag">안내</span> <svg class="bt-arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg> </button> <div class="bt-acc-body" id="bt-p7" hidden> <div class="bt-addr"> <span class="bt-lbl">시작페이지에 넣을 주소</span> <div class="bt-addr-row"> <input class="bt-addrbox" id="bt-addr" type="text" value="https://0-1.kr/45" readonly aria-label="시작페이지에 넣을 주소"> <button type="button" class="bt-btn bt-sm" id="bt-addr-copy" data-tip="이 주소를 복사합니다">주소 복사</button> </div> </div> <div class="bt-how"> <p>이 페이지가 스스로 시작페이지나 고정 탭이 될 수는 없습니다. 브라우저 설정에서 직접 지정해야 하고, 방법은 두 가지입니다.</p> <p><b>방법 A. 시작할 때 열기</b> 브라우저를 켤 때 지정한 주소가 탭으로 열립니다. 주소를 여러 개 넣으면 탭이 여러 개 열리므로, 평소 쓰는 시작페이지 다음에 0-1.kr/45를 두 번째 주소로 넣어 두 번째 탭으로 둘 수 있습니다.</p> <p><b>방법 B. 탭 고정</b> 탭을 우클릭해서 고정하면 맨 앞에 작은 탭으로 붙고, 브라우저를 껐다 켜도 다시 열리는 경우가 많습니다. 브라우저와 시작 설정에 따라 다를 수 있으니 한 번 확인해 보세요.</p> <p><b>주소 팁</b> 주소에는 0-1.kr/45를 넣습니다. 설정까지 함께 열고 싶다면 [공유]로 만든 원래 URL(0-1.kr/45 뒤에 ?bt=…가 붙은 주소)을 넣습니다. 이 경우 설정을 바꿀 때마다 시작페이지 주소도 다시 등록해야 합니다. 블로그 주소가 바뀌면 시작페이지도 다시 등록하세요.</p> <p><b>알림 팁</b> 크롬은 5분 넘게 가려진 탭의 타이머를 1분에 한 번 정도로 늦춥니다. 이때는 깜빡임과 스크롤이 끊길 수 있습니다.</p> </div> <div class="bt-tabs bt-tabs5" role="tablist" aria-label="브라우저 선택"> <button type="button" class="bt-tab" data-grp="sp" role="tab" id="bt-sp1" aria-selected="true" aria-controls="bt-spp1" data-tip="크롬 설정 방법">크롬</button> <button type="button" class="bt-tab" data-grp="sp" role="tab" id="bt-sp2" aria-selected="false" aria-controls="bt-spp2" data-tip="엣지 설정 방법">엣지</button> <button type="button" class="bt-tab" data-grp="sp" role="tab" id="bt-sp3" aria-selected="false" aria-controls="bt-spp3" data-tip="파이어폭스 설정 방법">파이어폭스</button> <button type="button" class="bt-tab" data-grp="sp" role="tab" id="bt-sp4" aria-selected="false" aria-controls="bt-spp4" data-tip="사파리(맥) 설정 방법">사파리</button> <button type="button" class="bt-tab" data-grp="sp" role="tab" id="bt-sp5" aria-selected="false" aria-controls="bt-spp5" data-tip="삼성인터넷(안드로이드) 설정 방법">삼성인터넷</button> </div> <div class="bt-panel bt-steps" role="tabpanel" id="bt-spp1" aria-labelledby="bt-sp1"> <ol> <li>오른쪽 위 점 세 개 [Chrome 맞춤 설정 및 제어]를 누르고 [설정]으로 들어갑니다.</li> <li>아래로 내려 [시작 그룹]을 찾습니다.</li> <li>[특정 페이지 또는 페이지 모음 열기]를 선택하고 [새 페이지 추가]를 누릅니다.</li> <li>주소 칸에 https://0-1.kr/45를 넣고 [추가]를 누릅니다. 다른 주소도 같은 방식으로 더하면 적은 순서대로 탭이 열립니다.</li> <li>탭 고정은 탭 위에서 우클릭한 뒤 [고정]을 고릅니다.</li> </ol> <p class="bt-small">화면 문구는 크롬 버전에 따라 조금 다를 수 있습니다.</p> </div> <div class="bt-panel bt-steps" role="tabpanel" id="bt-spp2" aria-labelledby="bt-sp2" hidden> <ol> <li>오른쪽 위 [더보기] 점 세 개를 누르고 [설정]으로 들어갑니다.</li> <li>왼쪽 메뉴에서 [시작, 홈 및 새 탭]을 누릅니다.</li> <li>[다음 페이지를 열 수 있습니다]를 선택합니다.</li> <li>[새 페이지 추가]를 누르고 https://0-1.kr/45를 넣은 뒤 [추가]를 누릅니다. 여러 개는 같은 방법을 반복합니다.</li> <li>탭 고정은 탭 위에서 우클릭한 뒤 [탭 고정]을 고릅니다.</li> </ol> <p class="bt-small">휴대폰 엣지는 시작할 때 여러 페이지를 여는 설정을 보지 못했습니다. 설정 → 일반에서 시작 화면 방식과 홈페이지 하나를 정할 수 있습니다.</p> </div> <div class="bt-panel bt-steps" role="tabpanel" id="bt-spp3" aria-labelledby="bt-sp3" hidden> <ol> <li>먼저 https://0-1.kr/45를 포함해 시작할 때 열고 싶은 사이트를 각각 탭으로 엽니다.</li> <li>오른쪽 위 메뉴(줄 세 개)에서 설정으로 들어갑니다.</li> <li>왼쪽 [홈]에서 [새 창 및 새 탭] 항목을 찾습니다.</li> <li>[홈페이지 및 새 창]을 [사용자 지정 URL]로 바꾸고 [현재 페이지 사용]을 누릅니다. 열려 있던 주소가 세로줄(|)로 나뉘어 들어갑니다.</li> <li>브라우저를 다시 켜서 확인합니다.</li> </ol> <p class="bt-small">참고한 자료가 2020년 글이라 지금 화면과 문구가 다를 수 있습니다.</p> </div> <div class="bt-panel bt-steps" role="tabpanel" id="bt-spp4" aria-labelledby="bt-sp4" hidden> <ol> <li>메뉴 막대에서 Safari → [설정] → [일반]으로 들어갑니다.</li> <li>[홈페이지]에 https://0-1.kr/45를 넣습니다.</li> <li>새 윈도우와 새 탭이 홈페이지로 열리도록 같은 화면에서 고릅니다.</li> <li>탭 고정은 탭 위에서 우클릭한 뒤 [탭 고정]을 고릅니다.</li> </ol> <p class="bt-small">공식 문서로 확인하지 못한 내용이라 버전에 따라 다를 수 있습니다. 홈페이지는 하나만 넣을 수 있는 것으로 알고 있습니다.</p> </div> <div class="bt-panel bt-steps" role="tabpanel" id="bt-spp5" aria-labelledby="bt-sp5" hidden> <ol> <li>0-1.kr/45 페이지를 열어 둔 채로 메뉴에서 [설정]에 들어갑니다.</li> <li>[인터넷 설정] 화면에서 [홈페이지]를 누릅니다.</li> <li>[현재 페이지]를 고르면 지금 열린 주소가 첫 화면으로 등록됩니다. 다른 주소는 [사용자 설정]에서 직접 넣습니다.</li> </ol> <p class="bt-small">홈페이지는 하나만 정할 수 있습니다. 확인한 범위에서는 휴대폰과 태블릿 브라우저에 여러 페이지를 동시에 시작 탭으로 여는 설정이 없었습니다.</p> </div> </div> </section> <div class="bt-foot">0-1.kr/45 · 출처: 스타트업ex _ cds1981@naver.com</div> </div> <!-- 공유 팝업 --> <div class="bt-pop" id="bt-pop" role="dialog" aria-modal="true" aria-labelledby="bt-pop-ttl" hidden> <div class="bt-pop-bg" id="bt-pop-bg"></div> <div class="bt-pop-sheet"> <div class="bt-pop-head"> <h2 class="bt-pop-ttl" id="bt-pop-ttl">공유</h2> <button type="button" class="bt-btn bt-sm" id="bt-pop-close" data-tip="공유 창을 닫습니다">닫기</button> </div> <div class="bt-note" style="margin:0">현재 설정을 링크에 담았습니다. 받는 사람이 링크를 열면 같은 설정이 채워집니다. 두 방식의 차이를 보고 고르세요.</div> <div class="bt-rec" id="bt-pop-rec" hidden></div> <div class="bt-url"> <div class="bt-url-h"><span>원래 URL</span><span class="bt-chip" id="bt-o-len">0자</span></div> <textarea class="bt-in bt-urlbox" id="bt-o-box" readonly rows="3" aria-label="원래 URL"></textarea> <div class="bt-stat" id="bt-o-cmp"></div> <div class="bt-pc"><span class="bt-pro">장점</span>어떤 서비스도 거치지 않아 오래 열리고, 설정이 외부 서버로 가지 않습니다.</div> <div class="bt-pc"><span class="bt-con">단점</span>주소가 길어 문자나 메신저에서 잘릴 수 있고, QR이 빽빽해져 인식이 어렵습니다.</div> <div class="bt-actions"> <button type="button" class="bt-btn bt-sm" id="bt-o-copy" data-tip="원래 URL을 복사합니다">복사</button> <button type="button" class="bt-btn bt-sm" id="bt-o-qr" data-tip="원래 URL의 QR코드를 보여줍니다. 주소가 길면 만들지 않습니다">QR</button> <button type="button" class="bt-btn bt-sm" id="bt-o-share" data-tip="원래 URL을 공유합니다">공유하기</button> </div> <div class="bt-qr" id="bt-o-qrwrap" hidden><div class="bt-qrbox" id="bt-o-qrbox"></div><button type="button" class="bt-btn bt-sm" id="bt-o-qrsave" data-tip="QR 이미지를 새 창에 열어 저장합니다">QR 저장</button></div> </div> <div class="bt-url"> <div class="bt-url-h"><span>단축 URL</span><span class="bt-chip" id="bt-s-len">만들기 전</span></div> <textarea class="bt-in bt-urlbox" id="bt-s-box" readonly rows="2" placeholder="[단축 URL 만들기]를 누르세요" aria-label="단축 URL"></textarea> <div class="bt-pc"><span class="bt-pro">장점</span>짧아서 문자와 댓글에 붙이기 쉽고, QR이 단순해 잘 인식됩니다.</div> <div class="bt-pc"><span class="bt-con">단점</span>단축 서비스에 의존해서 서비스가 멈추거나 막히면 링크가 열리지 않을 수 있고, 만들 때 설정이 담긴 주소가 그 서비스로 전달됩니다.</div> <div class="bt-actions"> <button type="button" class="bt-btn bt-sm" id="bt-s-make" data-tip="원래 URL을 짧은 주소로 바꿉니다. 인터넷이 필요합니다">단축 URL 만들기</button> <button type="button" class="bt-btn bt-sm" id="bt-s-copy" data-tip="단축 URL을 복사합니다">복사</button> <button type="button" class="bt-btn bt-sm" id="bt-s-qr" data-tip="단축 URL의 QR코드를 보여줍니다">QR</button> <button type="button" class="bt-btn bt-sm" id="bt-s-share" data-tip="단축 URL을 공유합니다">공유하기</button> </div> <div class="bt-stat" id="bt-s-stat"></div> <div class="bt-qr" id="bt-s-qrwrap" hidden><div class="bt-qrbox" id="bt-s-qrbox"></div><button type="button" class="bt-btn bt-sm" id="bt-s-qrsave" data-tip="QR 이미지를 새 창에 열어 저장합니다">QR 저장</button></div> </div> </div> </div> <!-- 저장 팝업 --> <div class="bt-pop" id="bt-spop" role="dialog" aria-modal="true" aria-labelledby="bt-spop-ttl" hidden> <div class="bt-pop-bg" id="bt-spop-bg"></div> <div class="bt-pop-sheet"> <div class="bt-pop-head"> <h2 class="bt-pop-ttl" id="bt-spop-ttl">저장</h2> <button type="button" class="bt-btn bt-sm" id="bt-spop-close" data-tip="저장 창을 닫습니다">닫기</button> </div> <div class="bt-note" style="margin:0">입력한 설정을 파일로 보관합니다. 파일 이름은 앱 이름과 버전으로 정해집니다.</div> <div class="bt-url"> <div class="bt-url-h"><span>1) 엑셀에 붙여넣기</span></div> <textarea class="bt-in bt-urlbox" id="bt-x-box" readonly rows="7" aria-label="엑셀에 붙여넣을 내용"></textarea> <div class="bt-pc"><span class="bt-pro">쓰는 법</span>[복사]를 누르고 엑셀 첫 칸에 붙여넣으면 표로 들어갑니다. 파일로 받으려면 [CSV 파일 저장]을 누르세요.</div> <div class="bt-actions"> <button type="button" class="bt-btn bt-sm" id="bt-x-copy" data-tip="엑셀에 붙여넣을 내용을 복사합니다">복사</button> <button type="button" class="bt-btn bt-sm" id="bt-x-file" data-tip="CSV 파일로 저장합니다. 아이폰은 새 창에 내용이 열립니다">CSV 파일 저장</button> </div> </div> <div class="bt-url"> <div class="bt-url-h"><span>2) HTML 파일 (이동용)</span><span class="bt-chip" id="bt-h-len">0자</span></div> <div class="bt-pc"><span class="bt-pro">쓰는 법</span>파일을 열면 바로 0-1.kr/45로 이동하고 저장한 설정이 채워집니다. 주소가 길면 CSV도 함께 보관하세요.</div> <div class="bt-stat" id="bt-h-stat"></div> <div class="bt-actions"> <button type="button" class="bt-btn bt-sm" id="bt-h-file" data-tip="이동용 HTML 파일로 저장합니다. 아이폰은 새 창에 내용이 열립니다">HTML 파일 저장</button> <button type="button" class="bt-btn bt-sm" id="bt-h-copy" data-tip="HTML 파일 내용을 복사합니다">내용 복사</button> </div> </div> </div> </div> <div class="bt-tip" id="bt-tip" role="tooltip"></div> <div class="bt-toast" id="bt-toast" aria-live="polite"><span id="bt-toast-msg"></span></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script> (function(){ var VER='브라우저탭 알림_V7_261015'; var PFX_LZ='z1.',PFX_JSON='j1.'; var QR_MAX=800,MAXI=20,STORE_KEY='bt45_state_v1'; var APP_URL='https://0-1.kr/45'; var DEF_CHECKED='ct-h,ct-m,ct-s,ct-w'; var MODES={ al:{n:'알람',c:'#d9534f'},ct:{n:'현재시간',c:'#2e9e74'},tm:{n:'타이머',c:'#d98a1c'}, cd:{n:'카운트다운',c:'#7a5bd1'},bk:{n:'백타임',c:'#2a8fb0'},rt:{n:'루틴',c:'#6e9e2a'} }; var WD=['일','월','화','수','목','금','토']; var MODE_NAMES=['제목 번갈아','이모지','파비콘 배지']; var _touching=false; var tick=0,mode='al',blinkOn=false,applyOn=false,tabDirty=false; var tipTimer=null,toastTimer=null; var popOpen=false,curPop='',prevOverflow=''; var origTitle=document.title,origFav=null,favCreated=false,favSaved=false; var shortUrl='',origUrl='',lastRaw=0,lastEnc=0; var uid=1,alarms=[],backs=[],routs=[],rings=[]; var tm={run:false,end:0,rem:0}; var lastTickMs=Date.now(); var dirty=false,restoring=false,histTimer=null,hist=[],hpos=-1; var actx=null,worker=null,fallbackOn=false; var i; function $(id){return document.getElementById(id);} function val(id){var e=$(id);return e?e.value:'';} function pad(n){return (n<10?'0':'')+n;} function num(id,def){var v=parseInt(val(id),10);return isNaN(v)?def:v;} function clip(s,n){return String(s==null?'':s).substring(0,n||60);} function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');} var tipEl=$('bt-tip'),toastEl=$('bt-toast'),toastMsg=$('bt-toast-msg'); /* ---------- 공통: 이중 실행 방지 바인딩 ---------- */ function bind(el,fn){ if(!el){return;} var sy=0,sx=0,moved=false; el.addEventListener('touchstart',function(e){ var t=e.touches&&e.touches[0]; sy=t?t.clientY:0;sx=t?t.clientX:0;moved=false; },false); el.addEventListener('touchmove',function(e){ var t=e.touches&&e.touches[0]; if(t&&(Math.abs(t.clientY-sy)>10||Math.abs(t.clientX-sx)>10)){moved=true;} },false); el.addEventListener('touchend',function(e){ _touching=true; setTimeout(function(){_touching=false;},450); if(moved||el.disabled){return;} fn(e); },false); el.addEventListener('click',function(e){ if(_touching||el.disabled){return;} fn(e); },false); } /* ---------- 말풍선·토스트 ---------- */ function showTip(el){ var msg=el.getAttribute('data-tip'); if(!msg){return;} tipEl.textContent=msg; tipEl.style.left='0px';tipEl.style.top='0px'; var r=el.getBoundingClientRect(); var w=tipEl.offsetWidth,h=tipEl.offsetHeight; var left=r.left+r.width/2-w/2; var maxLeft=window.innerWidth-w-8; if(left>maxLeft){left=maxLeft;} if(left<8){left=8;} var top=r.top-h-8; if(top<8){top=r.bottom+8;} tipEl.style.left=left+'px'; tipEl.style.top=top+'px'; tipEl.className='bt-tip bt-on'; } function hideTip(){clearTimeout(tipTimer);tipEl.className='bt-tip';} function toast(msg){ toastMsg.textContent=msg; toastEl.className='bt-toast bt-on'; clearTimeout(toastTimer); toastTimer=setTimeout(function(){toastEl.className='bt-toast';},2400); } function attachTip(el){ el.addEventListener('mouseenter',function(){showTip(el);},false); el.addEventListener('mouseleave',hideTip,false); el.addEventListener('focus',function(){ try{if(!el.matches(':focus-visible')){return;}}catch(err){} showTip(el); },false); el.addEventListener('blur',hideTip,false); } var tipped=document.querySelectorAll('[data-tip]'); for(i=0;i<tipped.length;i++){attachTip(tipped[i]);} function mkBtn(label,cls,fn,tip){ var b=document.createElement('button'); b.type='button'; b.className='bt-btn bt-sm'+(cls?' '+cls:''); b.textContent=label; if(tip){b.setAttribute('data-tip',tip);attachTip(b);} bind(b,fn); return b; } /* ---------- 복사·공유·파일 ---------- */ function copyText(text,okMsg){ function fallback(){ try{ var ta=document.createElement('textarea'); ta.value=text;ta.setAttribute('readonly',''); ta.style.position='fixed';ta.style.left='0px';ta.style.top='0px';ta.style.opacity='0'; document.body.appendChild(ta); ta.focus();ta.select();ta.setSelectionRange(0,text.length); var ok=document.execCommand('copy'); document.body.removeChild(ta); toast(ok?okMsg:'복사하지 못했습니다. 주소를 길게 눌러 복사하세요'); }catch(e){toast('복사하지 못했습니다. 주소를 길게 눌러 복사하세요');} } if(navigator.clipboard&&navigator.clipboard.writeText){ navigator.clipboard.writeText(text).then(function(){toast(okMsg);}).catch(fallback); }else{fallback();} } function shareText(url){ if(!url){toast('먼저 URL을 만드세요');return;} if(navigator.share){ navigator.share({title:VER,url:url}).then(function(){}).catch(function(err){ if(err&&err.name==='AbortError'){return;} copyText(url,'공유 창을 열 수 없어 주소를 복사했습니다'); }); }else{ copyText(url,'주소를 복사했습니다. 붙여넣어 공유하세요'); } } function isIOS(){ var u=navigator.userAgent||''; return /iP(hone|ad|od)/.test(u)||(/Macintosh/.test(u)&&navigator.maxTouchPoints>1); } function openText(text,name){ var w=null; try{w=window.open('','_blank');}catch(err){} if(w){ w.document.write('<'+'title>'+esc(name)+'</'+'title><'+'body style="margin:12px;font-family:sans-serif"><p>아래 내용을 전체 선택해 복사한 뒤 붙여넣고, 파일 이름을 <b>'+esc(name)+'</b>로 저장하세요.</p><textarea style="width:100%;height:70vh" readonly>'+esc(text)+'</textarea>'); w.document.close(); }else{toast('새 창을 열 수 없습니다. 브라우저의 팝업 차단을 확인하세요');} } function saveFile(name,text,mime){ if(isIOS()){openText(text,name);return;} try{ var blob=new Blob([text],{type:mime}); var url=URL.createObjectURL(blob); var a=document.createElement('a'); a.href=url;a.download=name; document.body.appendChild(a);a.click();document.body.removeChild(a); setTimeout(function(){URL.revokeObjectURL(url);},3000); toast('파일로 저장했습니다: '+name); }catch(err){openText(text,name);} } /* ---------- 소리 ---------- */ function initAudio(){ if(actx){ if(actx.state==='suspended'&&actx.resume){try{actx.resume();}catch(e){}} return; } try{ var AC=window.AudioContext||window.webkitAudioContext; if(AC){actx=new AC();} }catch(e){} } document.addEventListener('touchend',initAudio,false); document.addEventListener('click',initAudio,false); function tone(freq,type,t0,dur,vol){ var o=actx.createOscillator(),g=actx.createGain(); o.type=type;o.frequency.value=freq; g.gain.setValueAtTime(0.0001,t0); g.gain.exponentialRampToValueAtTime(vol,t0+0.02); g.gain.exponentialRampToValueAtTime(0.0001,t0+dur); o.connect(g);g.connect(actx.destination); o.start(t0);o.stop(t0+dur+0.05); } function playSound(kind){ if(!actx||!kind){return;} try{ var t=actx.currentTime; if(kind===1){tone(880,'sine',t,1.0,0.25);tone(1320,'sine',t+0.02,0.8,0.1);} else{tone(1000,'square',t,0.12,0.08);tone(1000,'square',t+0.2,0.12,0.08);} }catch(e){} } function sndKind(id){return parseInt(val(id),10)||0;} /* ---------- 설정값 읽기 ---------- */ function secOn(){return $('bt-sec-on').getAttribute('aria-pressed')==='true';} function getMv(){ var ids=['fix','blink','scroll','both'],k; for(k=0;k<ids.length;k++){if($('bt-mv-'+ids[k]).getAttribute('aria-pressed')==='true'){return ids[k];}} return 'fix'; } function setSeg(grp,id){ var all=document.querySelectorAll('.bt-segb'),k; for(k=0;k<all.length;k++){ if(all[k].getAttribute('data-grp')===grp){all[k].setAttribute('aria-pressed',all[k].id===id?'true':'false');} } } function cmMode(){return parseInt(val('bt-cm-mode'),10)||0;} function cmDur(){var v=num('bt-cm-dur',30);return v>0?v:30;} function selText(id){var e=$(id);return e&&e.options[e.selectedIndex]?e.options[e.selectedIndex].text:'';} /* ---------- 시간 도우미 ---------- */ function atTime(d,hm){ var m=/^(\d{2}):(\d{2})$/.exec(hm||''); if(!m){return null;} return new Date(d.getFullYear(),d.getMonth(),d.getDate(),+m[1],+m[2],0,0).getTime(); } function parseDT(s){ var m=/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/.exec(s||''); if(!m){return null;} return new Date(+m[1],+m[2]-1,+m[3],+m[4],+m[5],0); } function fmtDur(ms,withSec){ if(ms<0){ms=0;} var t,h,m,s; if(withSec){ t=Math.ceil(ms/1000); h=Math.floor(t/3600);m=Math.floor((t%3600)/60);s=t%60; return h>0?(h+':'+pad(m)+':'+pad(s)):(pad(m)+':'+pad(s)); } t=Math.ceil(ms/60000); h=Math.floor(t/60);m=t%60; return h>0?(h+'시간 '+pad(m)+'분'):(m+'분'); } function conv(s,style){ if(style==='0'||!style){return s;} var out='',k,ch,d; for(k=0;k<s.length;k++){ ch=s.charAt(k); if(ch>='0'&&ch<='9'){ d=ch.charCodeAt(0)-48; out+=(style==='1')?String.fromCharCode(0xD835,0xDFCE+d):(ch+'️⃣'); }else{out+=ch;} } return out; } function sc(t,w){ var ch=Array.from(t),n,s,out=[],k; if(ch.length<=w){return t;} ch=ch.concat([' ',' ',' ']); n=ch.length;s=tick%n; for(k=0;k<w;k++){out.push(ch[(s+k)%n]);} return out.join(''); } function tmTotal(){return num('bt-tm-h',0)*3600000+num('bt-tm-m',0)*60000+num('bt-tm-s',0)*1000;} function rtDay(r,day){ if(r.r===1){return day>=1&&day<=5;} if(r.r===2){return r.d.indexOf(day)>-1;} return true; } function rtLabel(r){ if(r.r===1){return '평일';} if(r.r===2){ var k,o=[]; for(k=0;k<r.d.length;k++){o.push(WD[r.d[k]]);} return o.join('·')||'요일 없음'; } return '매일'; } /* ---------- 항목별 탭 표시 문구 ---------- */ function tAl(now,d){ var best=null,bt=0,k,a,T,mins; for(k=0;k<alarms.length;k++){ a=alarms[k]; if(!a.on){continue;} T=atTime(d,a.t); if(T===null){continue;} if(T<=now){T+=86400000;} if(best===null||T<bt){best=a;bt=T;} } if(best){ mins=Math.ceil((bt-now)/60000); return {t:'⏰ '+best.t+' '+(best.x||'알람'),b:mins<100?String(mins):'',s:'다음 알람까지 '+fmtDur(bt-now,secOn())}; } return {t:'⏰ '+(val('bt-al-time')||'--:--')+' '+(val('bt-al-text')||'알람 문구'),b:'알',s:'알람 추가 전 미리보기'}; } function tCt(d){ var sec=secOn()&&$('bt-ct-s').checked,parts=[],tv=[],txt; if($('bt-ct-y').checked){parts.push(d.getFullYear()+'년');} if($('bt-ct-d').checked){parts.push((d.getMonth()+1)+'/'+d.getDate());} if($('bt-ct-w').checked){parts.push(WD[d.getDay()]);} if($('bt-ct-h').checked){tv.push(pad(d.getHours()));} if($('bt-ct-m').checked){tv.push(pad(d.getMinutes()));} if(sec){tv.push(pad(d.getSeconds()));} if(tv.length){parts.push(tv.join(':'));} txt=parts.length?parts.join(' '):'표시할 항목을 고르세요'; return {t:' '+conv(txt,val('bt-ct-font')),b:pad(d.getHours()),s:'평상시 표시'}; } function tTm(now){ var ms,pre='⏳ ',st='대기',mins; if(tm.run){ms=tm.end-now;st='실행 중';} else if(tm.rem>0){ms=tm.rem;pre='⏸ ';st='일시정지';} else{ms=tmTotal();} if(ms<0){ms=0;} mins=Math.ceil(ms/60000); return {t:pre+fmtDur(ms,secOn()),b:(mins>0&&mins<100)?String(mins):'',s:'타이머 '+st}; } function tCd(now){ var name=val('bt-cd-name')||'카운트다운',at=parseDT(val('bt-cd-at')),fmt=val('bt-cd-fmt'),txt,days='',diff,dd,dn; if(at){ diff=at.getTime()-now; if(diff<=0){txt='종료';} else if(fmt==='1'){ dd=Math.floor(diff/86400000); txt=(dd>0?dd+'일 ':'')+fmtDur(diff%86400000,secOn()); days=String(dd); }else if(diff<86400000){ txt='D-DAY '+fmtDur(diff,secOn());days='0'; }else{ dn=Math.ceil(diff/86400000); txt='D-'+dn;days=String(dn); } }else{txt='목표 시각을 정하세요';} return {t:' '+name+' '+txt,b:(days&&days.length<3)?days:'',s:at?'목표 '+val('bt-cd-at').replace('T',' '):'목표 시각 입력 전'}; } function bkRem(b,now){ var T=atTime(new Date(now),b.t); return T===null?-1:T-now; } function tBk(now){ var best=null,br=0,k,r,any=false,hh; for(k=0;k<backs.length;k++){ if(!backs[k].on){continue;} any=true; r=bkRem(backs[k],now); if(r>0&&(best===null||r<br)){best=backs[k];br=r;} } if(best){ hh=Math.ceil(br/3600000); return {t:'⏱ '+(best.n||'백타임')+' '+fmtDur(br,secOn()),b:hh<100?String(hh):'',s:'가장 가까운 백타임'}; } if(any){return {t:'⏱ 오늘 백타임 모두 지남',b:'',s:'오늘 백타임이 모두 지났습니다'};} return {t:'⏱ '+(val('bt-bk-name')||'백타임')+' '+(val('bt-bk-at')||'--:--'),b:'백',s:'백타임 추가 전 미리보기'}; } function tRt(now,d){ var best=null,bt=0,k,r,T,any=false; for(k=0;k<routs.length;k++){ r=routs[k]; if(!r.on||!rtDay(r,d.getDay())){continue;} any=true; T=atTime(d,r.t); if(T!==null&&T>now&&(best===null||T<bt)){best=r;bt=T;} } if(best){return {t:' '+best.n+' '+best.t,b:'루',s:'오늘 다음 루틴까지 '+fmtDur(bt-now,secOn())};} if(any){return {t:' 오늘 루틴 끝',b:'',s:'오늘 루틴이 모두 지났습니다'};} return {t:' '+(val('bt-rt-name')||'루틴')+' '+(val('bt-rt-at')||'--:--'),b:'루',s:'루틴 추가 전 미리보기'}; } function texts(now){ var d=new Date(now); return {al:tAl(now,d),ct:tCt(d),tm:tTm(now),cd:tCd(now),bk:tBk(now),rt:tRt(now,d)}; } /* ---------- 탭 모양 만들기 ---------- */ function mvScroll(){var m=getMv();return m==='scroll'||m==='both';} function applyMv(f){ var mv=getMv(),t=f.t; if(mvScroll()){t=sc(t,16);} if((mv==='blink'||mv==='both')&&tick%2===1){t=t.replace(/^\S+/,' ');} return {t:t,b:f.b||'',c:MODES[mode].c,s:f.s}; } function ringFrame(r){ var lab=mvScroll()?sc(r.label,14):r.label,odd=tick%2===1,red='#d9534f'; if(r.mode===1){return {t:(odd?' ':'⏰ ')+lab,b:'!',c:red};} if(r.mode===2){return {t:' '+lab,b:odd?'':'!',c:odd?r.c:red};} return {t:odd?('▶ '+(r.memo?sc(r.memo,16):lab)):('⏰ '+lab),b:'!',c:red}; } function demoRing(){ var lab,md,memo=''; if(mode==='al'){lab=val('bt-al-text')||'알람 문구';md=parseInt(val('bt-al-mode'),10)||0;memo=val('bt-al-memo');} else if(mode==='tm'){lab='타이머 종료';md=parseInt(val('bt-tm-blink'),10)||0;} else if(mode==='bk'){lab=val('bt-bk-text')||((val('bt-bk-name')||'백타임')+' 시간입니다');md=cmMode();} else if(mode==='rt'){lab=val('bt-rt-name')||'루틴';md=cmMode();} else if(mode==='cd'){lab=(val('bt-cd-name')||'카운트다운')+' 종료';md=cmMode();} else{return null;} return {label:lab,memo:memo,mode:md,c:MODES[mode].c}; } function currentFrame(o){ var f; if(rings.length){ f=ringFrame(rings[rings.length-1]); if(rings.length>1){f.t+=' (+'+(rings.length-1)+')';} return f; } if(blinkOn){ f=demoRing(); if(f){return ringFrame(f);} } return applyMv(o[mode]); } /* ---------- 브라우저 탭에 실제 적용 ---------- */ function favLink(){ var l=document.querySelector('link[rel~="icon"]'); if(!favSaved){ favSaved=true; if(l){origFav=l.getAttribute('href');}else{favCreated=true;} } if(!l){ l=document.createElement('link'); l.setAttribute('rel','icon');l.setAttribute('type','image/png'); (document.head||document.getElementsByTagName('head')[0]).appendChild(l); } return l; } function rr(x,a,b,w,h,r){ x.beginPath(); x.moveTo(a+r,b);x.arcTo(a+w,b,a+w,b+h,r);x.arcTo(a+w,b+h,a,b+h,r); x.arcTo(a,b+h,a,b,r);x.arcTo(a,b,a+w,b,r);x.closePath(); } function setFav(f){ try{ var cv=document.createElement('canvas');cv.width=32;cv.height=32; var x=cv.getContext('2d'),txt=f.b||'●'; x.fillStyle=f.c;rr(x,1,1,30,30,7);x.fill(); x.fillStyle='#ffffff';x.font='bold '+(Array.from(txt).length>1?'17':'21')+'px sans-serif'; x.textAlign='center';x.textBaseline='middle'; x.fillText(txt,16,17); favLink().setAttribute('href',cv.toDataURL('image/png')); }catch(e){} } function restoreTab(){ document.title=origTitle; try{ var l=document.querySelector('link[rel~="icon"]'); if(l){ if(favCreated){l.parentNode.removeChild(l);favCreated=false;} else if(origFav!==null){l.setAttribute('href',origFav);} } }catch(e){} favSaved=false; } /* ---------- 화면 갱신 ---------- */ function updateReadouts(o,now){ var k,b,e,r; $('bt-ct-disp').textContent='탭에 표시되는 모양: '+o.ct.t; $('bt-tm-disp').textContent='탭에 표시되는 모양: '+o.tm.t+' ('+o.tm.s.replace('타이머 ','')+')'; $('bt-cd-disp').textContent='탭에 표시되는 모양: '+o.cd.t; $('bt-al-disp').textContent=(alarms.length&&o.al.b!=='알')?('다음 알람: '+o.al.t+' · '+o.al.s.replace('다음 알람까지 ','')+' 뒤'):''; for(k=0;k<backs.length;k++){ b=backs[k]; e=document.querySelector('[data-live="bk'+b.id+'"]'); if(!e){continue;} if(!b.on){e.textContent='꺼짐';continue;} r=bkRem(b,now); e.textContent=r>0?('남은 시간 '+fmtDur(r,secOn())):'오늘은 지남'; } } function render(){ var now=Date.now(),o=texts(now),f=currentFrame(o),st=MODES[mode].n+' · ',want; $('bt-pv-tab').textContent=f.t; $('bt-pv-full').textContent=f.t; var fv=$('bt-pv-fav'); fv.textContent=f.b||'●'; fv.style.background=f.c; if(rings.length){st='알림 울리는 중 · '+rings.length+'건';} else if(blinkOn){st+=demoRing()?'깜빡임 미리보기':'이 항목은 깜빡임 없이 표시됩니다';} else{st+=(o[mode].s||'평상시 표시');} if(applyOn){st+=' · 이 탭에 적용 중';} $('bt-pv-state').textContent=st; $('bt-stop').hidden=!rings.length; want=applyOn||rings.length>0; if(want){document.title=f.t;setFav(f);tabDirty=true;} else if(tabDirty){restoreTab();tabDirty=false;} updateReadouts(o,now); } /* ---------- 알림 울리기 ---------- */ function fire(label,opt){ var r={id:uid++,label:clip(label,60)||'알림',memo:opt.memo||'',mode:opt.mode||0, until:Date.now()+(opt.dur||30)*1000,snd:opt.snd||0,c:MODES[opt.src||'al'].c}; rings.push(r); if(r.snd){playSound(r.snd);} render(); toast('알림: '+r.label); } function stopAll(){ rings.length=0; render(); } function crossed(T,a,b){return T!==null&&T>a&&T<=b;} function checkFires(prev,now){ var d=new Date(now),k,a,r,T,at; for(k=0;k<alarms.length;k++){ a=alarms[k]; if(!a.on){continue;} if(crossed(atTime(d,a.t),prev,now)){ fire(a.x||'알람 시간입니다',{mode:a.m,dur:a.b||30,snd:sndKind('bt-cm-snd'),memo:a.o,src:'al'}); if(!a.d){a.on=false;renderAl();markDirty();} } } for(k=0;k<backs.length;k++){ a=backs[k]; if(a.on&&crossed(atTime(d,a.t),prev,now)){ fire(a.x||((a.n||'백타임')+' 시간입니다'),{mode:cmMode(),dur:cmDur(),snd:sndKind('bt-cm-snd'),src:'bk'}); } } for(k=0;k<routs.length;k++){ r=routs[k]; if(r.on&&rtDay(r,d.getDay())&&crossed(atTime(d,r.t),prev,now)){ fire(r.n,{mode:cmMode(),dur:cmDur(),snd:sndKind('bt-cm-snd'),src:'rt'}); } } if(tm.run&&now>=tm.end){ tm.run=false;tm.rem=0;markDirty(); fire('타이머 종료',{mode:parseInt(val('bt-tm-blink'),10)||0,dur:cmDur(),snd:sndKind('bt-tm-snd'),src:'tm'}); } at=parseDT(val('bt-cd-at')); if(at&&crossed(at.getTime(),prev,now)){ fire((val('bt-cd-name')||'카운트다운')+' 종료',{mode:cmMode(),dur:cmDur(),snd:sndKind('bt-cm-snd'),src:'cd'}); } } function onTick(){ var now=Date.now(),prev=lastTickMs,k,loud=false; if(now-prev>120000){prev=now-1000;} tick++; checkFires(prev,now); lastTickMs=now; for(k=rings.length-1;k>=0;k--){ if(rings[k].until<=now){rings.splice(k,1);} else if(rings[k].snd){loud=rings[k].snd;} } if(loud&&tick%2===0){playSound(loud);} render(); } function startTicker(){ function fb(){ if(fallbackOn){return;} fallbackOn=true; setInterval(onTick,1000); } try{ var blob=new Blob(['setInterval(function(){postMessage(1);},1000);'],{type:'text/javascript'}); worker=new Worker(URL.createObjectURL(blob)); worker.onmessage=function(){onTick();}; worker.onerror=function(){fb();}; }catch(e){fb();} } document.addEventListener('visibilitychange',function(){ if(document.hidden){autosave(true);}else{onTick();} },false); /* ---------- 상태 저장·복원 ---------- */ function getState(kind){ var o={},inp={},hasI=false,els=document.querySelectorAll('#bt-app .bt-in'),k,e,id,cbs,on=[],sg={},hs=false; for(k=0;k<els.length;k++){ e=els[k];id=e.id.replace(/^bt-/,''); if(e.tagName==='SELECT'){if(e.selectedIndex>0){inp[id]=e.value;hasI=true;}} else if(e.value!==''){inp[id]=e.value;hasI=true;} } if(hasI){o.i=inp;} cbs=document.querySelectorAll('#bt-app input[type="checkbox"]'); for(k=0;k<cbs.length;k++){if(cbs[k].checked){on.push(cbs[k].id.replace(/^bt-/,''));}} on.sort(); if(on.join(',')!==DEF_CHECKED){o.c=on;} if(!secOn()){sg.sec=0;hs=true;} if(getMv()!=='fix'){sg.mv=getMv();hs=true;} if(hs){o.s=sg;} if(alarms.length){o.al=alarms.map(function(a){return [a.t,a.x,a.b,a.m,a.d?1:0,a.on?1:0,a.o];});} if(backs.length){o.bk=backs.map(function(b){return [b.n,b.t,b.x,b.on?1:0];});} if(routs.length){o.rt=routs.map(function(r){return [r.n,r.t,r.r,r.d,r.on?1:0];});} if(mode!=='al'){o.m=mode;} if(kind==='save'&&(tm.run||tm.rem>0)){o.tm=[tm.run?1:0,tm.end,tm.rem];} return o; } function hasData(o){ var k; if(!o){return false;} for(k in o){if(o.hasOwnProperty(k)&&k!=='m'){return true;}} return false; } function resetAll(){ var els=document.querySelectorAll('#bt-app .bt-in'),k,cbs; for(k=0;k<els.length;k++){ if(els[k].tagName==='SELECT'){els[k].selectedIndex=0;}else{els[k].value='';} } cbs=document.querySelectorAll('#bt-app input[type="checkbox"]'); for(k=0;k<cbs.length;k++){cbs[k].checked=cbs[k].defaultChecked;} setSeg('sec','bt-sec-on'); setSeg('mv','bt-mv-fix'); alarms.length=0;backs.length=0;routs.length=0; blinkOn=false; $('bt-pv-blink').setAttribute('aria-pressed','false'); syncRtDays(); renderAl();renderBk();renderRt(); } function setSelect(e,v){ var k; for(k=0;k<e.options.length;k++){if(e.options[k].value===String(v)){e.selectedIndex=k;return;}} } function setState(o,withTimer){ var key,e,k,cbs,v; resetAll(); if(o){ if(o.i){ for(key in o.i){ if(o.i.hasOwnProperty(key)){ e=$('bt-'+key); if(e&&e.className.indexOf('bt-in')>-1){ if(e.tagName==='SELECT'){setSelect(e,o.i[key]);}else{e.value=clip(o.i[key],200);} } } } } if(o.c&&o.c.length!==undefined){ cbs=document.querySelectorAll('#bt-app input[type="checkbox"]'); for(k=0;k<cbs.length;k++){cbs[k].checked=(o.c.indexOf(cbs[k].id.replace(/^bt-/,''))>-1);} } if(o.s){ if(o.s.sec===0){setSeg('sec','bt-sec-off');} if(o.s.mv==='blink'||o.s.mv==='scroll'||o.s.mv==='both'){setSeg('mv','bt-mv-'+o.s.mv);} } if(o.al&&o.al.length){ for(k=0;k<o.al.length&&alarms.length<MAXI;k++){ v=o.al[k]; if(/^\d{2}:\d{2}$/.test(v[0])){alarms.push({id:uid++,t:v[0],x:clip(v[1]),b:Math.min(600,Math.max(1,parseInt(v[2],10)||30)),m:parseInt(v[3],10)||0,d:!!v[4],on:!!v[5],o:clip(v[6],200)});} } } if(o.bk&&o.bk.length){ for(k=0;k<o.bk.length&&backs.length<MAXI;k++){ v=o.bk[k]; if(/^\d{2}:\d{2}$/.test(v[1])){backs.push({id:uid++,n:clip(v[0],30),t:v[1],x:clip(v[2]),on:!!v[3]});} } } if(o.rt&&o.rt.length){ for(k=0;k<o.rt.length&&routs.length<MAXI;k++){ v=o.rt[k]; if(/^\d{2}:\d{2}$/.test(v[1])){routs.push({id:uid++,n:clip(v[0],30)||'루틴',t:v[1],r:parseInt(v[2],10)||0,d:(v[3]&&v[3].length!==undefined)?v[3].slice(0,7):[],on:!!v[4]});} } } if(withTimer&&o.tm){ tm.run=!!o.tm[0];tm.end=+o.tm[1]||0;tm.rem=+o.tm[2]||0; if(tm.run&&tm.end<=Date.now()){tm.run=false;tm.rem=0;} } } syncRtDays(); renderAl();renderBk();renderRt(); setMode(o&&o.m&&MODES[o.m]?o.m:'al'); } function setSaved(){ var d=new Date(); $('bt-saved').textContent='자동저장 '+pad(d.getHours())+':'+pad(d.getMinutes())+':'+pad(d.getSeconds()); } function autosave(force){ if(!dirty&&!force){return;} try{ localStorage.setItem(STORE_KEY,JSON.stringify({v:6,t:Date.now(),s:getState('save')})); dirty=false;setSaved(); }catch(e){$('bt-saved').textContent='자동저장을 할 수 없습니다';} } function loadSaved(){ try{ var raw=localStorage.getItem(STORE_KEY),d; if(!raw){return null;} d=JSON.parse(raw); return (d&&d.s&&hasData(d.s))?d.s:null; }catch(e){return null;} } function updateUR(){ $('bt-undo').disabled=hpos<=0; $('bt-redo').disabled=hpos>=hist.length-1; } function pushHist(){ var s=JSON.stringify(getState('hist')); if(hist[hpos]===s){updateUR();return;} hist=hist.slice(0,hpos+1); hist.push(s); if(hist.length>60){hist.shift();} hpos=hist.length-1; updateUR(); } function markDirty(){ if(restoring){return;} dirty=true; clearTimeout(histTimer); histTimer=setTimeout(pushHist,600); } function applyHist(msg){ restoring=true; setState(JSON.parse(hist[hpos]),false); restoring=false; dirty=true; updateUR(); render(); toast(msg); } function undo(){ clearTimeout(histTimer);pushHist(); if(hpos<=0){return;} hpos--;applyHist('이전 설정으로 되돌렸습니다'); } function redo(){ if(hpos>=hist.length-1){return;} hpos++;applyHist('되돌린 설정을 다시 적용했습니다'); } /* ---------- 목록 (알람·백타임·루틴) ---------- */ function addEmpty(ul,msg){ var li=document.createElement('li'); li.className='bt-li-empty'; li.textContent=msg; ul.appendChild(li); } function mkItem(arr,item,renderFn,title,sub,liveKey){ var li=document.createElement('li'),body=document.createElement('div'),t=document.createElement('span'),x,lv,tg,del; li.className='bt-li'+(item.on?'':' bt-off'); tg=mkBtn(item.on?'켜짐':'꺼짐','',function(){ item.on=!item.on;renderFn();markDirty();render(); },'켜거나 끕니다'); tg.setAttribute('aria-pressed',item.on?'true':'false'); body.className='bt-li-body'; t.className='bt-li-t';t.textContent=title; body.appendChild(t); if(sub){x=document.createElement('span');x.className='bt-li-x';x.textContent=sub;body.appendChild(x);} if(liveKey){lv=document.createElement('span');lv.className='bt-li-live';lv.setAttribute('data-live',liveKey);body.appendChild(lv);} del=mkBtn('삭제','',function(){ var p=arr.indexOf(item); if(p>-1){arr.splice(p,1);} renderFn();markDirty();render(); },'이 항목을 지웁니다'); li.appendChild(tg);li.appendChild(body);li.appendChild(del); return li; } function renderAl(){ var ul=$('bt-al-list'),k,a; ul.innerHTML=''; if(!alarms.length){addEmpty(ul,'추가한 알람이 없습니다');return;} for(k=0;k<alarms.length;k++){ a=alarms[k]; ul.appendChild(mkItem(alarms,a,renderAl,a.t+(a.d?' · 매일':' · 한 번'),(a.x||'(문구 없음)')+' · '+MODE_NAMES[a.m]+' '+a.b+'초'+(a.o?' · 메모: '+a.o:''),'')); } } function renderBk(){ var ul=$('bt-bk-list'),k,b; ul.innerHTML=''; if(!backs.length){addEmpty(ul,'추가한 백타임이 없습니다');return;} for(k=0;k<backs.length;k++){ b=backs[k]; ul.appendChild(mkItem(backs,b,renderBk,(b.n||'백타임')+' · '+b.t,b.x||'', 'bk'+b.id)); } } function renderRt(){ var ul=$('bt-rt-list'),k,r; ul.innerHTML=''; if(!routs.length){addEmpty(ul,'추가한 루틴이 없습니다');return;} for(k=0;k<routs.length;k++){ r=routs[k]; ul.appendChild(mkItem(routs,r,renderRt,r.n+' · '+r.t,rtLabel(r),'')); } } function syncRtDays(){$('bt-rt-days').hidden=(val('bt-rt-rep')!=='2');} function needTime(id,msg){ if(!/^\d{2}:\d{2}$/.test(val(id))){toast(msg);return false;} return true; } function full(arr,name){ if(arr.length>=MAXI){toast(name+'은 '+MAXI+'개까지 추가할 수 있습니다');return true;} return false; } bind($('bt-al-add'),function(){ if(!needTime('bt-al-time','알람 시간을 입력하세요')||full(alarms,'알람')){return;} alarms.push({id:uid++,t:val('bt-al-time'),x:clip(val('bt-al-text')), b:Math.min(600,Math.max(1,num('bt-al-blink',30)||30)),m:parseInt(val('bt-al-mode'),10)||0, d:$('bt-al-daily').checked,on:true,o:clip(val('bt-al-memo'),200)}); $('bt-al-text').value='';$('bt-al-memo').value=''; renderAl();markDirty();setMode('al');render(); toast('알람을 추가했습니다'); }); bind($('bt-bk-add'),function(){ if(!needTime('bt-bk-at','목표 시각을 입력하세요')||full(backs,'백타임')){return;} backs.push({id:uid++,n:clip(val('bt-bk-name'),30)||'백타임',t:val('bt-bk-at'),x:clip(val('bt-bk-text')),on:true}); $('bt-bk-name').value='';$('bt-bk-text').value=''; renderBk();markDirty();setMode('bk');render(); toast('백타임을 추가했습니다'); }); bind($('bt-rt-add'),function(){ var rep=parseInt(val('bt-rt-rep'),10)||0,days=[],k; if(!needTime('bt-rt-at','루틴 시각을 입력하세요')||full(routs,'루틴')){return;} if(rep===2){ for(k=0;k<7;k++){if($('bt-rd'+k).checked){days.push(k);}} if(!days.length){toast('반복할 요일을 고르세요');return;} } routs.push({id:uid++,n:clip(val('bt-rt-name'),30)||'루틴',t:val('bt-rt-at'),r:rep,d:days,on:true}); $('bt-rt-name').value=''; renderRt();markDirty();setMode('rt');render(); toast('루틴을 추가했습니다'); }); /* ---------- 타이머 ---------- */ bind($('bt-tm-start'),function(){ var ms; initAudio(); if(tm.run){return;} ms=tm.rem>0?tm.rem:tmTotal(); if(ms<=0){toast('시간을 입력하세요 (예: 분에 10)');return;} tm.run=true;tm.end=Date.now()+ms;tm.rem=0; setMode('tm');markDirty();render(); }); bind($('bt-tm-pause'),function(){ if(!tm.run){toast('실행 중인 타이머가 없습니다');return;} tm.rem=Math.max(0,tm.end-Date.now());tm.run=false; markDirty();render(); }); bind($('bt-tm-reset'),function(){ tm.run=false;tm.rem=0; markDirty();render(); }); /* ---------- 미리보기·설정 알약 탭 ---------- */ var pillStrip=$('bt-pills'); var pills=document.querySelectorAll('#bt-pills .bt-pill'); function updateLive(){ var k,on,badge; for(k=0;k<pills.length;k++){ on=(pills[k].getAttribute('data-mode')===mode); if(on){pills[k].classList.add('bt-live-on');}else{pills[k].classList.remove('bt-live-on');} badge=pills[k].querySelector('.bt-pl-live'); if(badge){badge.hidden=!on;} } } function showPill(p){ var k,q,panel,on; for(k=0;k<pills.length;k++){ q=pills[k]; panel=$(q.getAttribute('aria-controls')); on=(q===p); q.setAttribute('aria-selected',on?'true':'false'); if(panel){panel.hidden=!on;} } if(p){try{pillStrip.scrollLeft=p.offsetLeft-(pillStrip.clientWidth-p.offsetWidth)/2;}catch(err){}} } function showPillFor(m){ var k; for(k=0;k<pills.length;k++){ if(pills[k].getAttribute('data-mode')===m){showPill(pills[k]);return;} } } function setMode(k){ var btns=document.querySelectorAll('#bt-chips .bt-btn'),j; mode=k; updateLive(); for(j=0;j<btns.length;j++){ btns[j].setAttribute('aria-pressed',btns[j].getAttribute('data-mode')===k?'true':'false'); } showPillFor(k); render(); } function onPill(p){ var was=p.getAttribute('aria-selected')==='true'; hideTip(); if(was){showPill(null);return;} if(p.getAttribute('data-mode')){setMode(p.getAttribute('data-mode'));markDirty();} else{showPill(p);} } for(i=0;i<pills.length;i++){ (function(p){bind(p,function(){onPill(p);});})(pills[i]); } var chipBtns=document.querySelectorAll('#bt-chips .bt-btn'); for(i=0;i<chipBtns.length;i++){ (function(b){bind(b,function(){setMode(b.getAttribute('data-mode'));markDirty();});})(chipBtns[i]); } bind($('bt-pv-blink'),function(){ blinkOn=!blinkOn; $('bt-pv-blink').setAttribute('aria-pressed',blinkOn?'true':'false'); render(); }); function setApply(on,silent){ var was=applyOn; applyOn=on; $('bt-pv-apply').setAttribute('aria-pressed',on?'true':'false'); $('bt-pv-apply').textContent=on?'적용 해제':'이 탭에 적용'; $('bt-b3').setAttribute('aria-pressed',on?'true':'false'); $('bt-b3').textContent=on?'적용 해제':'바로적용'; render(); if(!silent){toast(on?'이 탭의 제목과 아이콘에 적용했습니다':(was?'원래 탭 제목으로 돌렸습니다':''));} } bind($('bt-pv-apply'),function(){setApply(!applyOn,false);}); bind($('bt-b3'),function(){setApply(!applyOn,false);}); bind($('bt-pv-pin'),function(){ var on=$('bt-pv-pin').getAttribute('aria-pressed')!=='true'; $('bt-pv-pin').setAttribute('aria-pressed',on?'true':'false'); $('bt-prev').className=on?'bt-card bt-prev bt-pin':'bt-card bt-prev'; }); bind($('bt-stop'),function(){stopAll();toast('알림을 껐습니다');}); /* ---------- 아코디언·사용설명서 탭 ---------- */ var heads=document.querySelectorAll('#bt-app .bt-acc-head'); for(i=0;i<heads.length;i++){ (function(h){ bind(h,function(){ var open=h.getAttribute('aria-expanded')==='true'; var body=$(h.getAttribute('aria-controls')); h.setAttribute('aria-expanded',open?'false':'true'); if(body){body.hidden=open;} hideTip(); }); })(heads[i]); } var tabs=document.querySelectorAll('#bt-app .bt-tab'); function selectTab(sel){ var k,on,p,grp=sel.getAttribute('data-grp'); for(k=0;k<tabs.length;k++){ if(tabs[k].getAttribute('data-grp')!==grp){continue;} on=(tabs[k]===sel); tabs[k].setAttribute('aria-selected',on?'true':'false'); p=$(tabs[k].getAttribute('aria-controls')); if(p){p.hidden=!on;} } hideTip(); } for(i=0;i<tabs.length;i++){ (function(t){bind(t,function(){selectTab(t);});})(tabs[i]); } /* ---------- 입력칸·공통 설정 이벤트 ---------- */ function onCtl(e){ var id=e.target.id; if((id==='bt-tm-h'||id==='bt-tm-m'||id==='bt-tm-s')&&!tm.run){tm.rem=0;} if(id==='bt-rt-rep'){syncRtDays();} markDirty(); render(); } var ctrls=document.querySelectorAll('#bt-app .bt-in,#bt-app input[type="checkbox"]'); for(i=0;i<ctrls.length;i++){ ctrls[i].addEventListener('input',onCtl,false); ctrls[i].addEventListener('change',onCtl,false); } var segs=document.querySelectorAll('.bt-segb'); for(i=0;i<segs.length;i++){ (function(b){ bind(b,function(){ setSeg(b.getAttribute('data-grp'),b.id); markDirty();render(); }); })(segs[i]); } bind($('bt-snd-test'),function(){ initAudio(); playSound(sndKind('bt-cm-snd')||1); toast('소리를 확인하세요. 들리지 않으면 기기 음량과 무음 모드를 확인하세요'); }); bind($('bt-undo'),undo); bind($('bt-redo'),redo); /* ---------- 공유 링크 만들기·복원 ---------- */ function baseUrl(){ var h=location.hostname||''; if(/\.kr$/.test(h)||/tistory\.com$/.test(h)){return location.href.split('#')[0].split('?')[0];} return APP_URL; } function shareState(){ var o=getState('share'); return hasData(o)?o:null; } function buildUrl(){ var d=shareState(),json,enc; lastRaw=0;lastEnc=0; if(!d){return baseUrl();} json=JSON.stringify(d); if(window.LZString){enc=PFX_LZ+window.LZString.compressToEncodedURIComponent(json);} else{enc=PFX_JSON+encodeURIComponent(json);} lastRaw=json.length;lastEnc=enc.length; return baseUrl()+'?bt='+enc; } function restoreFromUrl(){ var m=/[?&]bt=([^&#]+)/.exec(location.search||''),raw,json=null,d; if(!m){return false;} try{ raw=m[1]; if(raw.indexOf(PFX_LZ)===0&&window.LZString){json=window.LZString.decompressFromEncodedURIComponent(raw.substring(PFX_LZ.length));} else if(raw.indexOf(PFX_JSON)===0){json=decodeURIComponent(raw.substring(PFX_JSON.length));} if(!json){return false;} d=JSON.parse(json); setState(d,false); return true; }catch(err){return false;} } function stripBt(){ try{ if(!/[?&]bt=/.test(location.search||'')){return;} var q=location.search.replace(/^\?/,'').split('&'),keep=[],k; for(k=0;k<q.length;k++){if(q[k]&&q[k].indexOf('bt=')!==0){keep.push(q[k]);}} history.replaceState(null,'',location.pathname+(keep.length?'?'+keep.join('&'):'')+location.hash); }catch(err){} } /* ---------- 팝업 (공유 / 저장) ---------- */ function showQR(prefix,url,limit){ var wrap=$('bt-'+prefix+'-qrwrap'),box=$('bt-'+prefix+'-qrbox'); if(!wrap.hidden){wrap.hidden=true;return;} if(!url){toast('먼저 URL을 만드세요');return;} if(limit&&url.length>QR_MAX){toast('원래 URL이 길어 QR을 만들지 않습니다. 단축 URL을 쓰세요');return;} if(typeof QRCode==='undefined'){toast('QR 도구를 불러오지 못했습니다. 인터넷 연결을 확인하세요');return;} box.innerHTML=''; try{ new QRCode(box,{text:url,width:200,height:200,correctLevel:QRCode.CorrectLevel.L}); wrap.hidden=false; }catch(err){toast('이 주소로는 QR을 만들 수 없습니다');} } function saveQR(prefix){ var box=$('bt-'+prefix+'-qrbox'),cv=box.querySelector('canvas'),img=box.querySelector('img'),data='',w=null; try{if(cv){data=cv.toDataURL('image/png');}else if(img){data=img.src;}}catch(err){} if(!data){toast('저장할 QR이 없습니다');return;} try{w=window.open('','_blank');}catch(err){} if(w){ w.document.write('<'+'title>QR</'+'title><'+'body style="margin:0;text-align:center;font-family:sans-serif"><p>이미지를 길게 눌러 저장하세요</p><img src="'+data+'" style="max-width:100%">'); w.document.close(); }else{toast('새 창을 열 수 없습니다. 브라우저의 팝업 차단을 확인하세요');} } function refreshPop(){ var rec=$('bt-pop-rec'); origUrl=buildUrl();shortUrl=''; $('bt-o-box').value=origUrl; $('bt-o-len').textContent=origUrl.length+'자'; $('bt-o-cmp').textContent=lastRaw?('설정 '+lastRaw+'자를 '+lastEnc+'자로 압축했습니다 ('+Math.round(lastEnc/lastRaw*100)+'%)'):''; $('bt-s-box').value=''; $('bt-s-len').textContent='만들기 전'; $('bt-s-stat').textContent=''; $('bt-o-qrwrap').hidden=true;$('bt-s-qrwrap').hidden=true; if(origUrl.indexOf('?bt=')<0){ rec.textContent='입력한 설정이 없어 현재 페이지 주소만 담겼습니다. 설정을 입력한 뒤 다시 열면 설정이 링크에 담깁니다.'; rec.hidden=false; }else if(origUrl.length>QR_MAX){ rec.textContent='링크가 '+origUrl.length+'자로 깁니다. 문자·댓글·QR에는 단축 URL을 추천합니다.'; rec.hidden=false; }else{rec.hidden=true;} } function csvCell(v){ v=String(v==null?'':v); return /[",\n\r]/.test(v)?'"'+v.replace(/"/g,'""')+'"':v; } function buildRows(){ var rows=[],k,a,b,r; rows.push([VER,'0-1.kr/45']); rows.push([]); rows.push(['설정','항목','값']); rows.push(['설정','초 단위',secOn()?'표시':'안 함']); rows.push(['설정','문구 움직임',{fix:'고정',blink:'깜빡임',scroll:'스크롤',both:'둘 다'}[getMv()]]); rows.push(['설정','알림 방식(백타임·루틴·카운트다운)',selText('bt-cm-mode')]); rows.push(['설정','알림 소리',selText('bt-cm-snd')]); rows.push(['설정','알림 지속(초)',cmDur()]); rows.push([]); rows.push(['알람','시간','문구','깜빡임(초)','방식','반복','상태','스크롤 메모']); for(k=0;k<alarms.length;k++){a=alarms[k];rows.push(['알람',a.t,a.x,a.b,MODE_NAMES[a.m],a.d?'매일':'한 번',a.on?'켜짐':'꺼짐',a.o]);} rows.push([]); rows.push(['백타임','이름','목표 시각','도착 문구','상태']); for(k=0;k<backs.length;k++){b=backs[k];rows.push(['백타임',b.n,b.t,b.x,b.on?'켜짐':'꺼짐']);} rows.push([]); rows.push(['루틴','이름','시각','반복','상태']); for(k=0;k<routs.length;k++){r=routs[k];rows.push(['루틴',r.n,r.t,rtLabel(r),r.on?'켜짐':'꺼짐']);} rows.push([]); rows.push(['타이머','시','분','초','종료 후 깜빡임','소리']); rows.push(['타이머',val('bt-tm-h'),val('bt-tm-m'),val('bt-tm-s'),selText('bt-tm-blink'),selText('bt-tm-snd')]); rows.push([]); rows.push(['카운트다운','이름','목표 날짜·시각','표시 형식']); rows.push(['카운트다운',val('bt-cd-name'),val('bt-cd-at').replace('T',' '),selText('bt-cd-fmt')]); rows.push([]); rows.push(['현재시간','표시 항목','글자 모양']); rows.push(['현재시간',tCt(new Date()).t.replace(/^\S+\s/,''),selText('bt-ct-font')]); return rows; } function toText(rows,sep){ var out=[],k,j,line; for(k=0;k<rows.length;k++){ line=[]; for(j=0;j<rows[k].length;j++){ line.push(sep==='\t'?String(rows[k][j]==null?'':rows[k][j]).replace(/[\t\r\n]+/g,' '):csvCell(rows[k][j])); } out.push(line.join(sep)); } return out.join('\r\n'); } function fname(ext){return VER+'.'+ext;} function redirectHtml(u){ var js=JSON.stringify(u).replace(/</g,'\\u003c'); return '<!doc'+'type html>\n<'+'html lang="ko"><'+'head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">' +'<'+'title>'+esc(VER)+'</'+'title><meta http-equiv="refresh" content="0;url='+esc(u)+'"></'+'head>' +'<'+'body style="font-family:sans-serif;padding:16px"><p>'+esc(VER)+' 으로 이동합니다. 이동하지 않으면 <a href="'+esc(u)+'">여기를 누르세요</a>.</p>' +'<'+'script>location.replace('+js+');<\/'+'script></'+'body></'+'html>\n'; } function refreshSave(){ var u=buildUrl(); $('bt-x-box').value=toText(buildRows(),'\t'); $('bt-h-len').textContent=u.length+'자'; $('bt-h-stat').textContent=u.length>8000?'주소가 길어 일부 브라우저에서 열리지 않을 수 있습니다. 엑셀(CSV)도 함께 저장하세요.':'파일을 열면 0-1.kr/45로 이동하고 설정이 채워집니다.'; } function closeUI(){ if(curPop){$(curPop).hidden=true;} curPop=''; document.body.classList.remove('bt-popup-open'); document.body.style.overflow=prevOverflow; popOpen=false; } function openPop(id){ if(popOpen){closeUI();} if(id==='bt-pop'){refreshPop();}else{refreshSave();} $(id).hidden=false; curPop=id; document.body.classList.add('bt-popup-open'); prevOverflow=document.body.style.overflow; document.body.style.overflow='hidden'; popOpen=true; hideTip(); try{if(location.hash!=='#btp'){location.hash='btp';}}catch(err){} } function closePop(){ if(!popOpen){return;} closeUI(); try{if(location.hash==='#btp'){history.back();}}catch(err){} } window.addEventListener('hashchange',function(){ if(popOpen&&location.hash!=='#btp'){closeUI();} },false); document.addEventListener('keydown',function(e){ if(popOpen&&(e.key==='Escape'||e.keyCode===27)){closePop();} },false); function makeShort(){ var st=$('bt-s-stat'); st.textContent='단축 URL을 만드는 중입니다…'; fetch('https://is.gd/create.php?format=json&url='+encodeURIComponent(origUrl)).then(function(r){return r.json();}).then(function(d){ if(d&&d.shorturl){ shortUrl=d.shorturl; $('bt-s-box').value=shortUrl; $('bt-s-len').textContent=shortUrl.length+'자 (원래의 '+Math.round(shortUrl.length/origUrl.length*100)+'%)'; st.textContent='만들었습니다. 복사하거나 공유하세요.'; }else{ throw new Error((d&&d.errormessage)||'응답 오류'); } }).catch(function(err){ st.textContent='단축에 실패했습니다. 잠시 뒤 다시 시도하거나 원래 URL을 쓰세요. ('+(err&&err.message?err.message:'네트워크 오류')+')'; }); } bind($('bt-share'),function(){openPop('bt-pop');}); bind($('bt-save'),function(){openPop('bt-spop');}); bind($('bt-pop-close'),closePop); bind($('bt-pop-bg'),closePop); bind($('bt-spop-close'),closePop); bind($('bt-spop-bg'),closePop); bind($('bt-o-copy'),function(){copyText(origUrl,'원래 URL을 복사했습니다');}); bind($('bt-o-qr'),function(){showQR('o',origUrl,true);}); bind($('bt-o-qrsave'),function(){saveQR('o');}); bind($('bt-o-share'),function(){shareText(origUrl);}); bind($('bt-s-make'),makeShort); bind($('bt-s-copy'),function(){if(!shortUrl){toast('먼저 단축 URL을 만드세요');return;}copyText(shortUrl,'단축 URL을 복사했습니다');}); bind($('bt-s-qr'),function(){showQR('s',shortUrl,false);}); bind($('bt-s-qrsave'),function(){saveQR('s');}); bind($('bt-s-share'),function(){shareText(shortUrl);}); bind($('bt-x-copy'),function(){copyText($('bt-x-box').value,'엑셀에 붙여넣을 내용을 복사했습니다');}); bind($('bt-x-file'),function(){saveFile(fname('csv'),''+toText(buildRows(),','),'text/csv;charset=utf-8');}); bind($('bt-h-file'),function(){saveFile(fname('html'),redirectHtml(buildUrl()),'text/html;charset=utf-8');}); bind($('bt-h-copy'),function(){copyText(redirectHtml(buildUrl()),'HTML 내용을 복사했습니다');}); /* ---------- 타이틀바 버튼 ---------- */ var resetArmed=false,resetTimer=null,b1=$('bt-b1'); function disarm(){ resetArmed=false; clearTimeout(resetTimer); b1.textContent='완전초기화'; b1.classList.remove('bt-danger'); } function doReset(){ clearTimeout(histTimer);pushHist(); resetAll(); tm.run=false;tm.rem=0; rings.length=0; stripBt(); setApply(false,true); setMode('al'); markDirty(); clearTimeout(histTimer);pushHist(); autosave(true); toast('설정을 모두 지웠습니다. 되돌리기로 복구할 수 있습니다'); } bind(b1,function(){ if(!resetArmed){ resetArmed=true; b1.textContent='한 번 더 누르면 지웁니다'; b1.classList.add('bt-danger'); resetTimer=setTimeout(disarm,4000); return; } disarm(); doReset(); }); bind($('bt-b2'),function(){ if(!shareState()){toast('입력한 설정이 없습니다. 먼저 설정을 입력하세요');return;} var u=buildUrl(); copyText(u,'URL을 만들어 복사했습니다 ('+u.length+'자)'); openPop('bt-pop'); }); bind($('bt-bulb'),function(){ var h=$('bt-h0'),body=$('bt-p0'); h.setAttribute('aria-expanded','true'); body.hidden=false; try{$('bt-sec1').scrollIntoView({behavior:'smooth',block:'start'});}catch(err){} toast('사용설명서를 열었습니다'); }); bind($('bt-addr-copy'),function(){copyText($('bt-addr').value,'주소를 복사했습니다');}); window.addEventListener('scroll',hideTip,false); window.addEventListener('resize',hideTip,false); window.addEventListener('pagehide',function(){autosave(true);},false); $('bt-title').setAttribute('data-ver',VER); /* ---------- 시작 ---------- */ (function boot(){ var sv; if(restoreFromUrl()){ toast('링크의 설정을 불러왔습니다'); }else{ sv=loadSaved(); if(sv){setState(sv,true);toast('이전 설정을 복구했습니다');} else{setState(null,false);} } pushHist(); render(); updateLive(); setSaved(); $('bt-saved').textContent='자동저장 4초마다'; setInterval(function(){autosave(false);},4000); startTicker(); })(); })(); </script> 모두의계산기 브라우저탭알림 알람 업무 웹앱 탭알림 최매슨생 https://0-1.kr/45 https://0-1.kr/45#entry45comment Mon, 18 Dec 2023 00:54:26 +0900 https://0-1.kr/43 <blockquote data-ke-style="style1"><span style="font-family: 'Noto Serif KR';">홈텍스 검색창에<br /><br /></span>'사업자등록증명'<br /><br />입력 후 출력<br /><br />*사업자등록증과 꼭 구분하세요!</blockquote> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="사업자등록증명원ㅋㅋ.png" data-origin-width="2481" data-origin-height="3508"><span data-url="https://blog.kakaocdn.net/dn/rL0W2/btsBtJifDEg/aJz3j25ZkDnUYIIbw3aWj1/img.png" data-phocus="https://blog.kakaocdn.net/dn/rL0W2/btsBtJifDEg/aJz3j25ZkDnUYIIbw3aWj1/img.png" data-alt="사업자등록증명원"><img src="https://blog.kakaocdn.net/dn/rL0W2/btsBtJifDEg/aJz3j25ZkDnUYIIbw3aWj1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FrL0W2%2FbtsBtJifDEg%2FaJz3j25ZkDnUYIIbw3aWj1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2481" height="3508" data-filename="사업자등록증명원ㅋㅋ.png" data-origin-width="2481" data-origin-height="3508"/></span><figcaption>사업자등록증명원</figcaption> </figure> </p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">홈텍스가 매년 업데이트가 되네요</p> <p style="text-align: center;" data-ke-size="size16">발급방법을 올리면 1년이 지나가서</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">그냥 키워드로 검색하는 방법 알려들릴게요.</p> <figure contenteditable="false" data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="niniz" data-emoticon-name="012" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/niniz/large/012.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/niniz/large/012.gif" width="150" /></figure> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style2" /> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">검색창에 [사업자등록증명]까지만 치면</p> <p style="text-align: center;" data-ke-size="size16">하단에 자동완성이 뜹니다.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">클릭해</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="사업자등록증명영상.gif" data-origin-width="1608" data-origin-height="820"><span data-url="https://blog.kakaocdn.net/dn/c0hZOV/btsBuamxw92/NbK4nyKDvZS1gDIEWAk8Y1/img.gif" data-phocus="https://blog.kakaocdn.net/dn/c0hZOV/btsBuamxw92/NbK4nyKDvZS1gDIEWAk8Y1/img.gif"><img src="https://blog.kakaocdn.net/dn/c0hZOV/btsBuamxw92/NbK4nyKDvZS1gDIEWAk8Y1/img.gif" srcset="https://blog.kakaocdn.net/dn/c0hZOV/btsBuamxw92/NbK4nyKDvZS1gDIEWAk8Y1/img.gif" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1608" height="820" data-filename="사업자등록증명영상.gif" data-origin-width="1608" data-origin-height="820"/></span></figure> </p> <p style="text-align: center;" data-ke-size="size16">관공서용으로 선택해서</p> <p style="text-align: center;" data-ke-size="size16">신청하기를 누르시면 됩니다.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="사업자등록증명원1.JPG" data-origin-width="2027" data-origin-height="702"><span data-url="https://blog.kakaocdn.net/dn/bY2oLF/btsBzxGPhaf/3V2Svu7grKmMUz943wyt70/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bY2oLF/btsBzxGPhaf/3V2Svu7grKmMUz943wyt70/img.jpg" data-alt="키워드 또는 신청/신고상의 [사업자등록증명]을 선택"><img src="https://blog.kakaocdn.net/dn/bY2oLF/btsBzxGPhaf/3V2Svu7grKmMUz943wyt70/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbY2oLF%2FbtsBzxGPhaf%2F3V2Svu7grKmMUz943wyt70%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2027" height="702" data-filename="사업자등록증명원1.JPG" data-origin-width="2027" data-origin-height="702"/></span><figcaption>키워드 또는 신청/신고상의 [사업자등록증명]을 선택</figcaption> </figure> </p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">신청 후 이메일 전송을 위해 pdf로 저장하는 경우가 많죠</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">우선 인쇄를 선택해서 [pdf로 저장]을 누르시면 됩니다.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">보통 사업자등록증과 헷갈려하시는 분들이 많은데</p> <p style="text-align: center;" data-ke-size="size16">사업자등록증명원을 요청하는 경우가 대부분입니다.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">보통 세무서에 가야지만 사업자등록증을&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">발급해주죠?</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">가급적 기관에서 파일 요청 시 해당파일을</p> <p style="text-align: center;" data-ke-size="size16">발급해 주시기 바랍니다.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">이유는 오픈일을 확인하기 위해서입니다.</p> <p style="text-align: center;" data-ke-size="size16"><span style="letter-spacing: 0px;">오픈일이..엄청 중요합니다.ㅎ</span></p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16"><span style="letter-spacing: 0px;">&nbsp;보통 오픈일을 </span></p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <blockquote data-ke-style="style1"><span style="font-family: 'Noto Serif KR';">개인기업 : 사업자등록일 (개업일이 아님!!)<br />법인 : 등기부등본상 회사성립연월일</span></blockquote> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">로 명칭하고 있습니다,</p> <p style="text-align: center;" data-ke-size="size16">(개업일은..왜 적는지 모르겠네요.)</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">보통 "너내 개업일이 언제야?" 라는 질문을 하는데&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">참 헷갈리죠..ㅎ</p> <p style="text-align: center;" data-ke-size="size16">(증명원상 개업일을 개업일이라 부르지 못하고..ㅠ)</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">꼭 증명원으로 발급하세요!</p> 스타트업 운영TIP/문서작성&amp;증빙 TIP 사업자등록증명 사업자등록증명원 중진공 중진공1 증빙 최매슨생 https://0-1.kr/43 https://0-1.kr/43#entry43comment Wed, 6 Dec 2023 21:13:42 +0900 https://0-1.kr/42 <blockquote data-ke-style="style1">홈텍스 입력창에<br /><br />과세표준증명<br /><br />을 입력하면 됨.^^</blockquote> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-origin-width="595" data-origin-height="842"><span data-url="https://blog.kakaocdn.net/dn/DSNcA/btsBrdpfm2O/kaQ2dWhcmBjXWEXZukrWX0/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/DSNcA/btsBrdpfm2O/kaQ2dWhcmBjXWEXZukrWX0/img.jpg" data-alt="부가가치세과세표준증명원"><img src="https://blog.kakaocdn.net/dn/DSNcA/btsBrdpfm2O/kaQ2dWhcmBjXWEXZukrWX0/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDSNcA%2FbtsBrdpfm2O%2FkaQ2dWhcmBjXWEXZukrWX0%2Fimg.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="595" height="842" data-origin-width="595" data-origin-height="842"/></span><figcaption>부가가치세과세표준증명원</figcaption> </figure> </p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <figure data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="friends1" data-emoticon-name="023" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/023.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/023.gif" width="150" /></figure> <p style="text-align: center;" data-ke-size="size16"><br /><br />가장 기본적인 매출증빙으로<br /><b>부가가치세 과세표준증명원</b> <br />을 요청하는 기관들이 많아요.<br /><br />흔히들 [VAT증명원]이라고 하는데<br />가장 간단하게 발급받는 방법은<br />홈텍스 검색창에 <b>[과세표준증명] </b>이라고 검색하시면<br />우측에 부가가치세과세표준증명원 이라고 뜨고</p> <p style="text-align: center;" data-ke-size="size16">그걸 클릭하면 바로 확인 가능해요.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">(신기하게 부가가치세라고 검색하면 안떠요..</p> <p style="text-align: center;" data-ke-size="size16">심지어 과세표준증명원 이라고 쳐도 안뜸..ㅠ</p> <p style="text-align: center;" data-ke-size="size16">꼭 과세표준증명 까지면 입력)<br /><br /></p> <p style="text-align: center;" data-ke-size="size16">&nbsp;<a href="http://www.hometax.go.kr" target="_blank" rel="noopener&nbsp;noreferrer">http://www.hometax.go.kr</a>&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-origin-width="1492" data-origin-height="786"><a href="http://www.hometax.go.kr" target=""><img src="https://blog.kakaocdn.net/dn/dninJD/btsBtJVlQKz/GkVLZ3thnQ8qKm4YhzfqYK/img.gif" srcset="https://blog.kakaocdn.net/dn/dninJD/btsBtJVlQKz/GkVLZ3thnQ8qKm4YhzfqYK/img.gif" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1492" height="786" data-origin-width="1492" data-origin-height="786"/></a><figcaption>"과세표준증명" 까지만 입력하면 자동완성으로 뜨죠?</figcaption> </figure> </p> <p style="text-align: center;" data-ke-size="size16">보통 분기별로 신고한 기록이 있어 사업장 개업일로 부터 최근 분기까지로 설정해서 발급하는 것이 좋습니다.<br /><br /></p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-origin-width="1140" data-origin-height="760"><span data-url="https://blog.kakaocdn.net/dn/byzfcv/btsBo8CddA3/RY7JnSmC0vFExZSYyWbIY1/img.gif" data-phocus="https://blog.kakaocdn.net/dn/byzfcv/btsBo8CddA3/RY7JnSmC0vFExZSYyWbIY1/img.gif" data-alt="과세기간을 가급적 개업일부터 현재분기까지 설정 후 출력"><img src="https://blog.kakaocdn.net/dn/byzfcv/btsBo8CddA3/RY7JnSmC0vFExZSYyWbIY1/img.gif" srcset="https://blog.kakaocdn.net/dn/byzfcv/btsBo8CddA3/RY7JnSmC0vFExZSYyWbIY1/img.gif" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1140" height="760" data-origin-width="1140" data-origin-height="760"/></span><figcaption>과세기간을 가급적 개업일부터 현재분기까지 설정 후 출력</figcaption> </figure> </p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-origin-width="944" data-origin-height="746"><span data-url="https://blog.kakaocdn.net/dn/KpwJZ/btsBqBDITR7/8xPeTjxS9nKLis2CiZNNkK/img.png" data-phocus="https://blog.kakaocdn.net/dn/KpwJZ/btsBqBDITR7/8xPeTjxS9nKLis2CiZNNkK/img.png"><img src="https://blog.kakaocdn.net/dn/KpwJZ/btsBqBDITR7/8xPeTjxS9nKLis2CiZNNkK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKpwJZ%2FbtsBqBDITR7%2F8xPeTjxS9nKLis2CiZNNkK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="944" height="746" data-origin-width="944" data-origin-height="746"/></span></figure> </p> <p style="text-align: center;" data-ke-size="size16">가급적 민증번호는 없이 발급하시고 [신청하기] 클릭 시</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-origin-width="969" data-origin-height="407"><span data-url="https://blog.kakaocdn.net/dn/vcLeG/btsBtGRQ0gp/ZxZWxcN7V1vxk4sJfmtcj0/img.png" data-phocus="https://blog.kakaocdn.net/dn/vcLeG/btsBtGRQ0gp/ZxZWxcN7V1vxk4sJfmtcj0/img.png"><img src="https://blog.kakaocdn.net/dn/vcLeG/btsBtGRQ0gp/ZxZWxcN7V1vxk4sJfmtcj0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvcLeG%2FbtsBtGRQ0gp%2FZxZWxcN7V1vxk4sJfmtcj0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="969" height="407" data-origin-width="969" data-origin-height="407"/></span></figure> </p> <p style="text-align: center;" data-ke-size="size16">이렇게 화면이 뜨네요,<br /><br />여기서 [출력] 버튼을 눌러 다운받으면 되는데<br /><br />프린트가 없을 땐 [프린트 선택] 에서 <br /><br />[pdf로 저장]<br /><br />을 클릭하여 다운 받으세요!<br /><br /></p> <figure data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="friends1" data-emoticon-name="002" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/002.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/002.gif" width="150" /></figure> <p style="text-align: center;" data-ke-size="size16">과세표준증명원은 여러분의 기업의 매출정도를 확인하기 위해 발급 받는 것이에요.<br /><br />더 매출이 많은데 분기별로 발급만 가능하오니 <br /><br />가급적 [매출세금계산서 합계표]를 통해 매출을 더 많이 나타내주시면 더욱 유리하겠죠?<br /><br /></p> <p style="text-align: center;" data-ke-size="size16">그럼 다음은 매출세금계산서 합계표 발급방법을 알아볼게요!</p> 스타트업 운영TIP/문서작성&amp;증빙 TIP STEP1 VAT vat신고서 과세표준증명 매출증빙 부가가치세과세표준증명원 중진공 증빙 최매슨생 https://0-1.kr/42 https://0-1.kr/42#entry42comment Tue, 5 Dec 2023 15:00:31 +0900 https://0-1.kr/41 <p style="text-align: center;" data-ke-size="size16">초기창업 지원 프리패스 서류들이오니</p> <p style="text-align: center;" data-ke-size="size16">이것만은 준비하고 시작하세요!</p> <figure contenteditable="false" data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="friends1" data-emoticon-name="008" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/008.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/008.gif" width="150" /></figure> <p data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">증빙서류는&nbsp;요청하는&nbsp;사람이나&nbsp;준비하는&nbsp;사람&nbsp;모두&nbsp;힘든&nbsp;작업입니다.ㅎㅎㅎ <br /><br />그냥&nbsp;해당&nbsp;자료는&nbsp;필수적으로&nbsp;요청드리는&nbsp;서류들만&nbsp;모아&nbsp;봤으니&nbsp;왜&nbsp;필요한지는&nbsp;알고&nbsp;가셨음&nbsp;합니다.&nbsp; <br /><br />무슨&nbsp;지원사업이든&nbsp;해당자료는&nbsp;꼭&nbsp;준비하시기&nbsp;바랍니다.&nbsp;(가급적&nbsp;최신버전을&nbsp;준비하시기&nbsp;바라요!) <br /><br /><b>1.사업자등록증명원(오픈일,업종확인)</b> <br />-개인,법인&nbsp;오픈일&nbsp;확인 <br /><b>2.부가가치세과세표준증명(소득확인)</b> <br />-오픈일~현재분기까지&nbsp;소득기재 <br /><b>3.국세,지방세&nbsp;납세증명서(체납확인_유효기간1월)</b> <br />-홈텍스,위택스&nbsp;확인,&nbsp;유효기간은&nbsp;1개월 <br /><b>4.중소기업확인서(지원가능기관확인,주업종)</b> <br />-소상공인,소기업,중기업&nbsp;확인 <br /><b>5.창업기업확인서(창업기업인증,주업종)</b> <br />-초기창업자&nbsp;필수&nbsp;확인,&nbsp;창업이력확인 </p> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" /> <p style="text-align: center;" data-ke-size="size16"><br /><br /><b>1.사업자등록증명원(사업자등록증X)</b> <br /><br />-용도&nbsp;:사업을&nbsp;시작한&nbsp;날,&nbsp;소재지,&nbsp;업태와&nbsp;종목을&nbsp;확인합니다. <br />-발급&nbsp;:&nbsp;홈택스&nbsp;-&nbsp;검색어에&nbsp;[사업자등록증명원]&nbsp;검색 <br /><br />[사업자등록증]이&nbsp;아닌&nbsp;[사업자등록증명원]을&nbsp;요청하는&nbsp;경우들이&nbsp;많습니다. <br /><br />(사업자등록증은&nbsp;세무서에서&nbsp;직접&nbsp;가야&nbsp;주는&nbsp;증이고&nbsp;증명원은&nbsp;홈텍스에서&nbsp;바로&nbsp;발급가능한&nbsp;거죠) <br /><br />이유는&nbsp;언제&nbsp;오픈했는지를&nbsp;중시하는&nbsp;기관이&nbsp;많기&nbsp;때문이죠. <br />사업시작일을(사업자등록일을)&nbsp;묻는&nbsp;답변에는 <br /><br /><b>**개인사업자&nbsp;:&nbsp;사업자등록증명원&nbsp;상의&nbsp;[사업자등록일]&nbsp;-&gt;개업일은&nbsp;아니에요!! </b><br /><br /><b>**법인사업자&nbsp;:&nbsp;법인등기부상의&nbsp;[회사성립연월일]&nbsp;</b> <br /><br />을&nbsp;알려주시면&nbsp;됩니다.&nbsp;(왜&nbsp;등기부등본&nbsp;젤&nbsp;마지막&nbsp;장에&nbsp;적혀있는&nbsp;날있죠?&nbsp;그게&nbsp;오픈일&nbsp;입니다.) <br /><br /><b>2.부가가치세&nbsp;과세표준증명</b> <br /><br />-용도&nbsp;:&nbsp;기업의&nbsp;년간&nbsp;소득확인 <br />-발급&nbsp;:&nbsp;홈텍스&nbsp;-&nbsp;검색어에&nbsp;[부가가치세&nbsp;과세]&nbsp;를&nbsp;입력 <br />매출이&nbsp;발생하는지&nbsp;유무를&nbsp;확인하기&nbsp;위함이&nbsp;첫번째,&nbsp;수익여부&nbsp;(매출액-매입액이&nbsp;+면&nbsp;납부세액,&nbsp;-면&nbsp;환급발생)를&nbsp;확인하기&nbsp;위함이&nbsp;두번째,&nbsp;면제세업인지&nbsp;확인하기&nbsp;위함이&nbsp;세번째이며&nbsp; <br />매년&nbsp;매출액이&nbsp;늘어나는지를&nbsp;쉽게&nbsp;증명이&nbsp;가능합니다. <br /><br />단&nbsp;지난&nbsp;6개월간&nbsp;소득확인만&nbsp;가능합니다.&nbsp; <br /><br />만약&nbsp;08월에&nbsp;서류제출을&nbsp;하려면&nbsp;7,8월&nbsp;[매출세금계산서합계표]를&nbsp;함께&nbsp;제출하면&nbsp;소득확인이&nbsp;가능하므로&nbsp;제출월의&nbsp;[세계합]을&nbsp;제출하는&nbsp;것이&nbsp;좋습니다. <br /><br />3.국세납세증명서,&nbsp;지방세납세증명서 <br />-용도&nbsp;:&nbsp;체납여부확인 <br />-발급&nbsp;:&nbsp;홈텍스,&nbsp;위텍스 <br />정부기관의&nbsp;창업지원&nbsp;및&nbsp;대출자금은&nbsp;모두&nbsp;세금을&nbsp;기반으로&nbsp;지원됩니다.&nbsp;이걸&nbsp;안내면&nbsp;받을&nbsp;자격도&nbsp;없다는&nbsp;거죠.&nbsp;필히&nbsp;준비하시는데 <br /><br />증명가능기간이&nbsp;발급&nbsp;후&nbsp;30일입니다.&nbsp;짤죠.&nbsp;미리&nbsp;때&nbsp;놓진&nbsp;마세요! <br /><br /><b>4.중소기업확인서</b> <br />-용도:&nbsp;규모를&nbsp;구분하여&nbsp;지원대상&nbsp;구분 <br />-발급&nbsp;:&nbsp;<a href="https://sminfo.mss.go.kr" target="_blank" rel="noopener&nbsp;noreferrer">https://sminfo.mss.go.kr</a><br />정부지원기관은&nbsp;업체의&nbsp;규모를&nbsp;구분하여&nbsp;지원기관을&nbsp;구분하고&nbsp;있습니다. <br /><br />#소상공인,&nbsp;#소기업,&nbsp;#중기업,&nbsp;#대기업 <br /><br />*소상공인시장진흥공단&nbsp;:&nbsp;소상공인&nbsp;지원&nbsp;및&nbsp;대출 <br />*중소벤처기업진흥공단&nbsp;:&nbsp;소기업,&nbsp;중기업,&nbsp;벤처기업&nbsp;지원&nbsp;및&nbsp;대출. <br /><br />단&nbsp;[소기업(소상공인)]&nbsp;과&nbsp;[소기업]은&nbsp;꼭&nbsp;구분하셔야&nbsp;합니다.&nbsp;&nbsp;중진공&nbsp;지원을&nbsp;받기&nbsp;위해선&nbsp;[소기업]&nbsp;이상이&nbsp;되어야&nbsp;합니다.&nbsp;[소기업(소상공인)]&nbsp;으로는&nbsp;제조업과&nbsp;예외업종을&nbsp;제외하면&nbsp;지원이&nbsp;불가합니다. </p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="중소기업확인서_000_수정.png" data-origin-width="792" data-origin-height="1122"><span data-url="https://blog.kakaocdn.net/dn/CtVaz/btszRTFBbR5/djaFKrgwbAngCvXTrfdGMK/img.png" data-phocus="https://blog.kakaocdn.net/dn/CtVaz/btszRTFBbR5/djaFKrgwbAngCvXTrfdGMK/img.png" data-alt="중소기업확인서"><img src="https://blog.kakaocdn.net/dn/CtVaz/btszRTFBbR5/djaFKrgwbAngCvXTrfdGMK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FCtVaz%2FbtszRTFBbR5%2FdjaFKrgwbAngCvXTrfdGMK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="792" height="1122" data-filename="중소기업확인서_000_수정.png" data-origin-width="792" data-origin-height="1122"/></span><figcaption>중소기업확인서</figcaption> </figure> </p> <p style="text-align: center;" data-ke-size="size16"><br /><br /><br /><b>5.창업기업확인서</b> <br />-용도:&nbsp;주업종,&nbsp;창업기업확인,&nbsp;초기창업(창업3년이내)확인 <br />-발급:&nbsp;<a href="https://cert.k-startup.go.kr" target="_blank" rel="noopener&nbsp;noreferrer">https://cert.k-startup.go.kr</a><br /><br /></p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="000 창업기업확인서수정.png" data-origin-width="801" data-origin-height="1425"><span data-url="https://blog.kakaocdn.net/dn/5tpyi/btszUs1BBlP/Jc1zNuU9q5OMlFXnjKGCdK/img.png" data-phocus="https://blog.kakaocdn.net/dn/5tpyi/btszUs1BBlP/Jc1zNuU9q5OMlFXnjKGCdK/img.png" data-alt="창업기업확인서"><img src="https://blog.kakaocdn.net/dn/5tpyi/btszUs1BBlP/Jc1zNuU9q5OMlFXnjKGCdK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F5tpyi%2FbtszUs1BBlP%2FJc1zNuU9q5OMlFXnjKGCdK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="801" height="1425" data-filename="000 창업기업확인서수정.png" data-origin-width="801" data-origin-height="1425"/></span><figcaption>창업기업확인서</figcaption> </figure> </p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">최근&nbsp;창업기업과&nbsp;창업&nbsp;3년이내의&nbsp;기업을&nbsp;위한&nbsp;지원사업이&nbsp;늘어나다보니&nbsp;해당&nbsp;확인서가&nbsp;나온&nbsp;듯&nbsp;합니다. <br /><br />원래&nbsp;창업지원금은&nbsp; <br /><br />생에&nbsp;첫&nbsp;창업을&nbsp;준비하는&nbsp;#예비창업자&nbsp;가&nbsp;창업하기&nbsp;위해&nbsp;교육,&nbsp;지원하여&nbsp;창업&nbsp;후&nbsp;3년동안&nbsp;지원(대출포함)을&nbsp;하는&nbsp;것을&nbsp;목표로&nbsp;하고&nbsp;있습니다. <br /><br />그러나&nbsp;해당&nbsp;지원금을&nbsp;악용하는&nbsp;헌터(지원금&nbsp;사냥꾼)과&nbsp;브로커(지원금&nbsp;알선&nbsp;및&nbsp;수수료&nbsp;요청)들이&nbsp;늘어나며&nbsp;적절치&nbsp;않은&nbsp;자들에게&nbsp;지원금이&nbsp;흘러&nbsp;갔던것이&nbsp;사실입니다.&nbsp; <br /><br />이를&nbsp;막기&nbsp;위해&nbsp;[창업기업]에&nbsp;한해&nbsp;지원하는&nbsp;기관이&nbsp;늘어나고&nbsp;있으며&nbsp;[청년_만39세이하]창업자들에게 <br />많은&nbsp;지원&nbsp;프로그램이&nbsp;있습니다.&nbsp;초기&nbsp;창업자(창업3년미만)들의&nbsp;꾸준한&nbsp;성장을&nbsp;위함이죠. <br /><br />이&nbsp;모든것을&nbsp;증빙하는&nbsp;자료가&nbsp;[창업기업확인서]&nbsp;입니다. <br /><br />많은&nbsp;초기창업자들이&nbsp;지원금과&nbsp;대출을&nbsp;위해&nbsp;증빙자료를&nbsp;발급&nbsp;받는데&nbsp;[창업기업확인서]&nbsp;와&nbsp;[중소기업확인서]&nbsp;발급이&nbsp;가능하다면&nbsp;많은&nbsp;지원사업의&nbsp;지원대상이&nbsp;됩니다.&nbsp;해당&nbsp;건은&nbsp;#초기창업지원&nbsp;과&nbsp;#초기창업대출&nbsp;&nbsp;편에서&nbsp;다루도록&nbsp;하겠습니다. <br /><br />창업의&nbsp;기준은&nbsp;#창업기업확인서&nbsp;편에서&nbsp;자세히&nbsp;다루어&nbsp;드리겠습니다. <br /><br />물론&nbsp;재무제표도&nbsp;있으면&nbsp;좋지만&nbsp;법인만&nbsp;발급이&nbsp;가능하며&nbsp;전년&nbsp;재무제표는&nbsp;다음해&nbsp;4월에&nbsp;발급이&nbsp;가능할거에요.&nbsp;해당&nbsp;글을&nbsp;보는&nbsp;이들은&nbsp;대부분&nbsp;창업&nbsp;1년미만임을&nbsp;고려하여&nbsp;쓰고&nbsp;있으니&nbsp;이점&nbsp;참고&nbsp;바랍니다. <br /><br />모든 지원에 앞서 해당 1~5번 자료는 꼭 준비하고 지원하자구요!</p> 스타트업 운영TIP/문서작성&amp;증빙 TIP 문서작성&amp;증빙TIP 중소기업확인서 증빙 증빙01 창업기업확인서 필수증빙 최매슨생 https://0-1.kr/41 https://0-1.kr/41#entry41comment Mon, 6 Nov 2023 17:17:11 +0900 https://0-1.kr/40 <p style="text-align: center;" data-ke-size="size16">막연한 마음에 &lsquo;창업지원&rsquo;을 포털에 검색하면</p> <p style="text-align: center;" data-ke-size="size16">수많은 광고들이 여러분의 클릭을 유도하기 위해</p> <p style="text-align: center;" data-ke-size="size16">빤짝 거리고 있을 거에요.</p> <figure contenteditable="false" data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="friends1" data-emoticon-name="017" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/017.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/017.gif" width="150" /></figure> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">참 안타까운 현실입니다. <br /><br />더 이상 속지말고 왜 나를 도와주는 지를 알고</p> <p style="text-align: center;" data-ke-size="size16">접근하셔야 해요.&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">그 모든걸 도와드릴게요.</p> <p style="text-align: center;" data-ke-size="size16">&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">예비창업자, 초기창업자를 위한 창업지원 정보의 모든 것</p> <p style="text-align: center;" data-ke-size="size16">스타트업 EX 입니다.</p> <figure contenteditable="false" data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="friends1" data-emoticon-name="025" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/025.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/025.gif" width="150" /></figure> <p style="text-align: center;" data-ke-size="size16">&nbsp;<br />앞으로&nbsp;사용할&nbsp;헤시테그는&nbsp;아래와&nbsp;같습니다.</p> <p style="text-align: center;" data-ke-size="size16">테그를 많이 참고해주세요!<br /><br />#예창,&nbsp;#1년미만,&nbsp;#3년미만,&nbsp;#7년미만&nbsp; <br />(창업 전 후 기간으로 나누어 지원대상이 구분됩니다.) <br /><br />#자금지원,&nbsp;#자금대출,&nbsp;#창업교육,&nbsp;#네트워킹,&nbsp;#데모데이,&nbsp;#투자IR <br />(성장에&nbsp;필요한&nbsp;창업지원&nbsp;프로그램입니다.) <br /><br />목차는 창업 전과 창업 후 프로그램,&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">창업지원프로그램에 필수적인</p> <p style="text-align: center;" data-ke-size="size16">문서작업과 증빙서류 발급 팁들을 정리할 예정이며 <br /><br />가장&nbsp;기본적인&nbsp;사업계획서&nbsp;서식들을&nbsp;공유할&nbsp;것이며&nbsp; <br />아이템별&nbsp;창업을&nbsp;지원하는&nbsp;기관들을&nbsp;매년&nbsp;정리해보겠습니다. <br /><br />힘들때 볼 영상까지 스타트업EX 가 준비하겠습니다. </p> <figure contenteditable="false" data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="friends1" data-emoticon-name="004" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/004.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/004.gif" width="150" /></figure> <p style="text-align: center;" data-ke-size="size16"><br />001.[시작] 생애 첫 창업! 창업대출 말고 창업지원금부터 시작하기 (추천과정) <br /><br />002.[분류] 소상공인? 중소기업? 정부는 나를 00으로 분류한다.(대상에 따른 지원프로그램과 산업분류코드) <br /><br />003.[검색] 창업지원금! 내 아이템을 지원하는 신뢰있는 기관 구분과 검색하기 (정부지원창업자금 운영기관)</p> <p style="text-align: center;" data-ke-size="size16"><br />003-1. 창업하면 만날 사람들 (창업컨설턴트와 브로커, 창업보육매니저와 엑셀러레이터, VC) 왜 나를 도와주려 할까요?&nbsp;&nbsp; <br />&nbsp; <br />004.[예시] 누구나 가능한 예비창업자(예창), 초기창업자(초창) 창업 3년 미만이 받는 대표적 창업지원금 <br /><br />005.[준비] 누구를 위한 사업계획서 준비하기 <br /><br />006.[가점] 창업교육, 창업경진대회, IR, 지원프로그램으로 가점 받자! k-startup, 기업마당, <br /><br />|창업경진대회 | 창업교육 | 투자 | 데모데이 | 멘토링 | 글로벌 | 행사 | 네트워크 | 대출 | 공간 | <br /><br />007.[발표] 정부지원사업용 5,10,15,20분 사업계획서 발표 팁 공유 <br /><br />008.[공간] 외로움 극복! 나와 같이 창업한 이들과 함께 창업보육센터 및 지원공간 입주 추천 <br /><br />009.[지역] 인건비 지원사업 등 지역의 창업지원 프로그램들 <br /><br />010.[투자] 내 기업의 가치 (value)는 알고 도전하자! 콜드메일부터 투자확약서(LOC)까지 <br /><br />011.[대출] 금리가 얼마에요? 중진공, 신보, 기보, 소진공의 대출 프로그램 <br /><br />012.[링크] 창업지원관련 링크 공유 <br /><br />013. 힘들때 도움되는 싸이트 모음 <br /><br />014. 콘텐츠 제작에 도움되는 사이트 찾기 <br /><br /><br />제목은&nbsp;이렇게&nbsp;정리해볼게요. <br /><br />요즘&nbsp;[공짜로창업하기]&nbsp;[공짜지원금]&nbsp;&nbsp;같은&nbsp;말로&nbsp;이&nbsp;돈을&nbsp;대신&nbsp;받아준다던지&nbsp;</p> <p style="text-align: center;" data-ke-size="size16">컨설턴트를&nbsp;가장하여&nbsp;접근하는&nbsp;분들이&nbsp;많아요. <br /><br />세상에&nbsp;공짜는&nbsp;없습니다. </p> <figure contenteditable="false" data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="friends1" data-emoticon-name="002" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/002.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/002.gif" width="150" /></figure> <p style="text-align: center;" data-ke-size="size16"><br />여러분이&nbsp;사업자등록을&nbsp;완료하는&nbsp;순간&nbsp; <br />여러분의&nbsp;정보는&nbsp;돈이&nbsp;되고&nbsp;공유되어 <br /><br />여러분의&nbsp;창업자금을&nbsp;노리는&nbsp;자들이&nbsp;많이&nbsp; <br />나타&nbsp;날것입니다. <br />(사업자 내는 순간 네** 이라며 전화받아보신 적 있으시죠?ㅎ) </p> <figure contenteditable="false" data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="friends1" data-emoticon-name="045" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/045.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/045.gif" width="150" /></figure> <p style="text-align: center;" data-ke-size="size16"><br />아마&nbsp;예전&nbsp;사이트&nbsp;가입할&nbsp;때&nbsp;개인정보&nbsp;동의&nbsp;한것들이 <br />한꺼번에&nbsp;오는&nbsp;것&nbsp;같아요. <br /><br />여러분을 위해 먼저 다가오는 회사는 없습니다. <br /><br />이&nbsp;말&nbsp;명심하고&nbsp;제가&nbsp;작성하는&nbsp;글들&nbsp;꼼꼼히&nbsp;읽어&nbsp;보시기&nbsp;바랍니다. <br /><br />전&nbsp;누구냐구요? <br /><br />당신의&nbsp;경험으로(experience)&nbsp;창업&nbsp;아이템을&nbsp; <br />설명(explain),&nbsp;연습(exercise),&nbsp;확장(extend)하여&nbsp; <br />더&nbsp;나은&nbsp;세상을&nbsp;꿈꾸고&nbsp;기대(expect)할&nbsp;수&nbsp;있는&nbsp;아이템을&nbsp; <br />스타트업(startup)&nbsp;발굴을&nbsp;꿈꾸는&nbsp;최매선생&nbsp;입니다. <br /><br />제가&nbsp;겪었던&nbsp;경험을&nbsp;바탕으로&nbsp;진실만을&nbsp;전달드릴테니 <br />믿고&nbsp;따라오세요. </p> <figure contenteditable="false" data-ke-type="emoticon" data-ke-align="alignCenter" data-emoticon-type="friends1" data-emoticon-name="024" data-emoticon-isanimation="false" data-emoticon-src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/024.gif"><img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/024.gif" width="150" /></figure> <p style="text-align: center;" data-ke-size="size16"><br />창업지원&nbsp;자금들이&nbsp;꼭&nbsp;필요한&nbsp;곳으로&nbsp;가기를&nbsp;바라는 <br />창업지원업무를&nbsp;담당했던&nbsp;사람입니다.^^</p> 스타트업EX란? 스타트업ex란 최매슨생 https://0-1.kr/40 https://0-1.kr/40#entry40comment Thu, 26 Oct 2023 10:44:25 +0900 https://0-1.kr/38 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>모두의 업무분장 계산기 | 0-1.kr/38</title> <style> *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:14px;color:#111827;background:#f8fafc} /* ── 버튼 ── */ .btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:8px;border:1px solid #d1d5db;background:#fff;color:#374151;font-size:12px;font-weight:500;cursor:pointer;transition:all .13s;white-space:nowrap} .btn:hover{background:#f3f4f6}.btn.pri{background:#2563EB;color:#fff;border-color:#2563EB}.btn.pri:hover{opacity:.87} .btn.sm{padding:4px 10px;font-size:11px;border-radius:6px}.btn.ghost{border-color:transparent;background:transparent;color:#6b7280}.btn.ghost:hover{background:#f3f4f6} .ibt{width:26px;height:26px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;color:#6b7280;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .13s;flex-shrink:0} .ibt:hover{background:#f3f4f6;color:#111} /* ── 섹션 카드 ── */ .sec{background:#fff;border:1px solid #e5e7eb;border-radius:14px;margin-bottom:13px;overflow:visible;box-shadow:0 1px 4px rgba(0,0,0,.04)} .sec-head{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:14px 14px 0 0;user-select:none;transition:background .13s} .sec-head.closed{border-radius:14px;border-bottom:none} .sec-head:hover{background:#f1f5f9} .sec-ico{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0} .sec-head h2{font-size:16px;font-weight:700;flex:1;color:#111827;letter-spacing:-.3px} .sbadge{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600} .sec-ts{font-size:10px;color:#9ca3af;margin-right:4px} .chev-wrap{width:28px;height:28px;border-radius:7px;background:#e5e7eb;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .13s} .sec-head:hover .chev-wrap{background:#d1d5db} .chev{font-size:14px;font-weight:700;color:#374151;transition:transform .18s;display:block} .chev.o{transform:rotate(180deg)} .sec-body{padding:16px}.sec-body.collapsed{display:none} .share-row{display:flex;align-items:center;gap:5px;padding:8px 14px;border-top:1px solid #e5e7eb;background:#f9fafb;border-radius:0 0 14px 14px;flex-wrap:wrap} .share-row .sr-ts{font-size:10px;color:#9ca3af;flex:1;min-width:80px} /* ── 섹션 헤더 색상 ── */ .sec-head.c-blue{background:#EFF6FF;border-bottom-color:#BFDBFE} .sec-head.c-blue:hover{background:#DBEAFE} .sec-head.c-blue.closed{background:#EFF6FF} .sec-head.c-orange{background:#FFF7ED;border-bottom-color:#FED7AA} .sec-head.c-orange:hover{background:#FFEDD5} .sec-head.c-orange.closed{background:#FFF7ED} .sec-head.c-purple{background:#F5F3FF;border-bottom-color:#DDD6FE} .sec-head.c-purple:hover{background:#EDE9FE} .sec-head.c-purple.closed{background:#F5F3FF} .sec-head.c-green{background:#F0FDF4;border-bottom-color:#BBF7D0} .sec-head.c-green:hover{background:#DCFCE7} .sec-head.c-green.closed{background:#F0FDF4} .sec-head.c-teal{background:#F0FDFA;border-bottom-color:#99F6E4} .sec-head.c-teal:hover{background:#CCFBF1} .sec-head.c-teal.closed{background:#F0FDFA} .sec-head.c-rose{background:#FFF1F2;border-bottom-color:#FECDD3} .sec-head.c-rose:hover{background:#FFE4E6} .sec-head.c-rose.closed{background:#FFF1F2} /* ── 사용설명서 ── */ .manual-body{padding:0 16px 16px} .manual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px} .manual-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:13px 14px} .manual-card .mc-ico{font-size:20px;margin-bottom:7px} .manual-card .mc-title{font-size:12px;font-weight:700;color:#111827;margin-bottom:5px} .manual-card .mc-desc{font-size:11px;color:#6b7280;line-height:1.65} .manual-steps{margin-top:14px;display:flex;flex-direction:column;gap:6px} .manual-step{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;background:#fff;border:1px solid #e5e7eb;border-radius:9px} .ms-num{width:22px;height:22px;border-radius:50%;background:#2563EB;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px} .ms-text{font-size:12px;color:#374151;line-height:1.6} .ms-text b{color:#111827} /* ── 앱 헤더 ── */ .app-hdr{padding:0;margin-bottom:14px} .app-hdr-top{background:linear-gradient(135deg,#1e3a8a 0%,#2563EB 60%,#3b82f6 100%);padding:18px 20px 14px;border-radius:14px 14px 0 0} .app-hdr-bottom{background:#EFF6FF;border:1px solid #BFDBFE;border-top:none;border-radius:0 0 14px 14px;padding:10px 20px} .title-row{display:flex;align-items:center;gap:10px;margin-bottom:10px} .app-brand{font-size:15px;font-weight:800;color:rgba(255,255,255,.92);letter-spacing:-.2px;margin-bottom:8px;display:flex;align-items:center;gap:7px} .app-brand-sub{font-size:11px;font-weight:400;color:rgba(255,255,255,.5);letter-spacing:.3px;margin-left:4px} .proj-inp{font-size:19px;font-weight:700;border:none;outline:none;background:rgba(255,255,255,.12);flex:1;color:#fff;letter-spacing:-.3px;border-radius:9px;padding:8px 13px;border:1.5px solid rgba(255,255,255,.2)} .proj-inp:focus{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);outline:none} .proj-inp::placeholder{color:rgba(255,255,255,.45)} .meta-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .mpill{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;border:1px solid #d1d5db;background:#f9fafb;font-size:12px;color:#374151;cursor:pointer;font-weight:500;transition:all .13s} .mpill:hover{border-color:#2563EB;color:#1D4ED8;background:#EFF6FF} .ts-hdr{font-size:10px;color:#9ca3af;margin-left:6px} /* ── 모달 ── */ .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000;display:flex;align-items:center;justify-content:center} .modal{background:#fff;border-radius:14px;border:1px solid #e5e7eb;padding:22px;min-width:300px;max-width:400px;width:92%;box-shadow:0 12px 40px rgba(0,0,0,.15)} .modal h3{font-size:16px;font-weight:700;margin-bottom:16px;color:#111} .mfield{margin-bottom:11px} .mfield label{font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:5px} .mfield input,.mfield select,.mfield textarea{width:100%;border:1px solid #d1d5db;border-radius:9px;padding:8px 11px;font-size:13px;color:#111;background:#f9fafb;outline:none;font-family:inherit} .mfield textarea{resize:vertical;min-height:80px} .mfield input:focus,.mfield select:focus,.mfield textarea:focus{border-color:#2563EB;background:#fff} .modal-actions{display:flex;gap:7px;justify-content:flex-end;margin-top:16px} .transfer-code{width:100%;min-height:90px;font-size:11px;font-family:'Courier New',monospace;background:#1e293b;color:#a3e635;border:1px solid #334155;border-radius:9px;padding:11px;resize:none;outline:none;word-break:break-all;line-height:1.5} .receive-inp{width:100%;min-height:90px;font-size:11px;font-family:'Courier New',monospace;background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;border-radius:9px;padding:11px;resize:none;outline:none;word-break:break-all;line-height:1.5} .receive-inp::placeholder{color:#86efac;font-family:'Apple SD Gothic Neo',sans-serif;font-size:12px} .ttab-row{display:flex;border:1px solid #e5e7eb;border-radius:9px;overflow:hidden;margin-bottom:13px} .ttab{flex:1;padding:8px;font-size:12px;border:none;background:transparent;cursor:pointer;color:#6b7280;font-weight:500} .ttab.on{background:#2563EB;color:#fff} /* ── 포스트잇 스타일 개요 ── */ .postit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .postit-wrap{position:relative} .postit-label{font-size:10px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;display:flex;align-items:center;gap:6px} .postit-label .fs-ctrl{display:flex;align-items:center;gap:3px;margin-left:auto} .fs-btn{width:20px;height:20px;border-radius:4px;border:1px solid #e5e7eb;background:#fff;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-weight:700} .fs-btn:hover{background:#f3f4f6} .postit{width:100%;border:none;outline:none;resize:none;padding:12px 13px;border-radius:8px;font-family:inherit;line-height:1.65;min-height:80px;transition:box-shadow .13s;box-shadow:2px 3px 8px rgba(0,0,0,.08),0 1px 0 rgba(0,0,0,.04)} .postit:focus{box-shadow:2px 3px 12px rgba(0,0,0,.14),0 1px 0 rgba(0,0,0,.06)} .postit.y{background:#fef9c3;color:#713f12} .postit.g{background:#dcfce7;color:#14532d} .postit.b{background:#dbeafe;color:#1e3a8a} .postit.p{background:#f3e8ff;color:#581c87} .span2{grid-column:1/-1} /* ── 팀원 풀 ── */ .pool{display:flex;gap:7px;flex-wrap:wrap;min-height:42px;padding:8px 10px;border:1px dashed #d1d5db;border-radius:9px;background:#f9fafb;align-items:center} .chip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:20px;border:1.5px solid;font-size:12px;font-weight:600;cursor:grab;user-select:none;transition:transform .12s,opacity .12s} .chip:hover{transform:scale(1.05)}.chip:active{cursor:grabbing;opacity:.6} .chip-rm{font-size:13px;opacity:.4;cursor:pointer;margin-left:2px}.chip-rm:hover{opacity:1;color:#DC2626} .add-chip-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 11px;border-radius:20px;border:1.5px dashed #d1d5db;background:transparent;color:#9ca3af;font-size:12px;font-weight:500;cursor:pointer;transition:all .13s} .add-chip-btn:hover{border-color:#2563EB;color:#2563EB;background:#EFF6FF} /* ── 흐름도 ── */ .flow-tb{display:flex;align-items:center;gap:7px;margin-bottom:10px;flex-wrap:wrap} .dir-grp{display:flex;border:1px solid #d1d5db;border-radius:8px;overflow:hidden} .dir-btn{padding:5px 12px;font-size:12px;border:none;background:transparent;cursor:pointer;color:#374151;font-weight:500} .dir-btn.on{background:#2563EB;color:#fff} .flow-canvas{overflow:auto;border:1px solid #e5e7eb;border-radius:9px;background:#f9fafb;padding:16px;min-height:110px} .fn{border-radius:11px;border:2px solid;padding:10px 13px;cursor:pointer;transition:all .18s;position:relative} .fn:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.1)} .fn.done-node{opacity:.45} .fn.done-node::after{content:'✓';position:absolute;top:-8px;right:-8px;width:18px;height:18px;border-radius:50%;background:#16A34A;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;line-height:18px;font-weight:800} .fn.active-drop{border-style:dashed!important;opacity:.8} .fn-num{font-size:10px;font-weight:700;opacity:.6;margin-bottom:3px} .fn-title{font-size:13px;font-weight:700;line-height:1.3;outline:none;min-width:30px} .fn-dl{font-size:10px;opacity:.55;margin-top:3px} .fn-memo{font-size:11px;opacity:.65;margin-top:4px;line-height:1.3;word-break:keep-all} .fn-abadge{font-size:10px;padding:2px 7px;border-radius:10px;border:1px solid;font-weight:600;white-space:nowrap} .fn-comment{margin-top:8px;border-top:1px dashed;padding-top:7px;opacity:.8} .fn-comment input{width:100%;font-size:11px;border:none;outline:none;background:transparent;color:inherit;font-family:inherit} .fn-comment input::placeholder{opacity:.45} .smh{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100%+7px);z-index:50;background:#fff;border:1px solid #d1d5db;border-radius:10px;padding:9px;min-width:160px;box-shadow:0 4px 18px rgba(0,0,0,.12)} .fn:hover .smh{display:block} .smh-title{font-size:10px;color:#9ca3af;margin-bottom:6px;font-weight:600} .smh-chip{display:inline-flex;align-items:center;gap:3px;padding:4px 9px;border-radius:20px;border:1.5px solid;font-size:11px;font-weight:500;cursor:pointer;margin:2px;transition:transform .1s} .smh-chip:hover{transform:scale(1.06)} /* ── 업무단계 그리드 ── */ .steps-grid{display:grid;gap:10px} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} .si-card{border:2px solid #e5e7eb;border-radius:11px;overflow:hidden;transition:all .18s;cursor:pointer} .si-card.done-card{border-color:#d1d5db;background:#f3f4f6;opacity:.65} .si-card.open-card{cursor:default} .si-card-head{display:flex;align-items:center;gap:8px;padding:11px 13px;background:#f9fafb;border-bottom:1px solid transparent;transition:background .13s} .si-card.open-card .si-card-head{border-bottom-color:#e5e7eb} .si-card:not(.open-card):hover .si-card-head{background:#f1f5f9} .si-card.done-card .si-card-head{background:#f3f4f6} .si-color-dot{width:16px;height:16px;border-radius:50%;border:2px solid;cursor:pointer;transition:transform .13s;flex-shrink:0;position:relative} .si-color-dot:hover{transform:scale(1.25)} .color-picker-pop{display:none;position:absolute;top:22px;left:0;z-index:100;background:#fff;border:1px solid #d1d5db;border-radius:9px;padding:8px;flex-wrap:wrap;width:136px;box-shadow:0 4px 16px rgba(0,0,0,.12);gap:5px} .color-picker-pop.show{display:flex} .cp-dot{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .12s}.cp-dot:hover{transform:scale(1.18)} .si-card-num{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:#EFF6FF;color:#1D4ED8;flex-shrink:0} .si-card.done-card .si-card-num{background:#e5e7eb;color:#6b7280} .si-card-title{flex:1;font-size:13px;font-weight:700;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .si-card.done-card .si-card-title{color:#9ca3af;text-decoration:line-through} .si-card-dl{font-size:10px;color:#9ca3af;white-space:nowrap} .si-card-toggle{font-size:12px;color:#9ca3af;transition:transform .15s;flex-shrink:0} .si-card.open-card .si-card-toggle{transform:rotate(180deg)} .si-body{display:none;padding:12px 13px;background:#fff} .si-card.open-card .si-body{display:block} /* 섹션 내 공통 */ .fl-label{font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;margin-top:10px} .fl-label:first-child{margin-top:0} .assignee-zone{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:7px 9px;border:1.5px dashed #d1d5db;border-radius:8px;background:#f9fafb;min-height:36px;margin-bottom:8px;transition:all .13s} .assignee-zone.over{border-color:#2563EB;background:#EFF6FF} .az-ph{font-size:11px;color:#9ca3af} .abadge{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:20px;border:1.5px solid;font-size:11px;font-weight:600} .abadge .arm{font-size:11px;opacity:.4;cursor:pointer;margin-left:2px}.abadge .arm:hover{opacity:1;color:#DC2626} .note-inp{width:100%;border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px;font-size:12px;color:#111;resize:vertical;min-height:48px;font-family:inherit;outline:none;background:#fff;margin-bottom:7px}.note-inp:focus{border-color:#2563EB} .memo-inp{width:100%;border:1px solid #e5e7eb;border-radius:7px;padding:5px 10px;font-size:11px;color:#4b5563;font-family:inherit;outline:none;background:#fff;margin-bottom:8px}.memo-inp:focus{border-color:#2563EB} /* 할일 */ .todo-list{display:flex;flex-direction:column;gap:4px;margin-bottom:6px} .todo-item{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #e5e7eb;border-radius:7px;background:#fff;cursor:move} .todo-item.dragging-todo{opacity:.4;border-style:dashed} .todo-item.drag-over-todo{border-color:#2563EB;background:#EFF6FF} .todo-item input[type=checkbox]{accent-color:#2563EB;width:14px;height:14px;cursor:pointer;flex-shrink:0} .todo-txt{flex:1;font-size:12px;border:none;outline:none;background:transparent;color:#111}.todo-txt::placeholder{color:#d1d5db} .todo-txt.done-t{text-decoration:line-through;color:#9ca3af} .todo-status-btn{font-size:10px;padding:2px 8px;border-radius:20px;border:1px solid;font-weight:600;cursor:pointer;transition:all .12s;white-space:nowrap;background:transparent} .todo-rm{font-size:13px;color:#d1d5db;cursor:pointer;border:none;background:none;flex-shrink:0}.todo-rm:hover{color:#DC2626} .drag-handle{font-size:13px;color:#d1d5db;cursor:grab;flex-shrink:0} .add-todo-btn{font-size:11px;color:#2563EB;background:none;border:1px dashed #93C5FD;border-radius:7px;padding:5px 11px;cursor:pointer;width:100%;text-align:left}.add-todo-btn:hover{background:#EFF6FF} .approval-box{margin-top:10px;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden} .approval-head{font-size:11px;font-weight:600;color:#6b7280;padding:6px 10px;background:#f9fafb;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid #e5e7eb} .approval-inp{width:100%;border:none;outline:none;padding:8px 10px;font-size:12px;color:#111;font-family:inherit;resize:vertical;min-height:40px;background:#fff} .add-step-btn-global{width:100%;padding:10px;border:2px dashed #d1d5db;border-radius:11px;background:transparent;color:#6b7280;font-size:13px;font-weight:600;cursor:pointer;margin-top:6px}.add-step-btn-global:hover{border-color:#2563EB;color:#2563EB;background:#EFF6FF} .cols-ctrl{display:flex;align-items:center;gap:5px;margin-left:auto} .cols-ctrl label{font-size:11px;color:#9ca3af} .cols-ctrl select{font-size:11px;border:1px solid #e5e7eb;border-radius:6px;padding:3px 7px;background:#f9fafb;outline:none;color:#374151} /* 파일 세팅 */ .ftabs{display:flex;gap:5px;margin-bottom:12px;flex-wrap:wrap} .ftab{font-size:12px;padding:5px 13px;border-radius:20px;border:1px solid #d1d5db;background:#f9fafb;color:#6b7280;cursor:pointer;font-weight:500}.ftab.on{background:#EFF6FF;color:#1D4ED8;border-color:#93C5FD} .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .fgrid .fl{font-size:10px;font-weight:600;color:#6b7280;margin-bottom:3px;text-transform:uppercase;letter-spacing:.3px} .fgrid select,.fgrid input{border:1px solid #e5e7eb;border-radius:7px;padding:6px 9px;font-size:12px;color:#111;background:#f9fafb;outline:none;font-family:inherit;width:100%} .fgrid select:focus,.fgrid input:focus{border-color:#2563EB;background:#fff} .global-memo{margin-top:14px;border:1px solid #e5e7eb;border-radius:9px;overflow:hidden} .global-memo-head{font-size:11px;font-weight:600;color:#374151;padding:7px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;letter-spacing:.3px} .global-memo-inp{width:100%;border:none;outline:none;padding:10px 12px;font-size:13px;color:#111;font-family:inherit;resize:vertical;min-height:80px;background:#fff;line-height:1.6} /* 자동저장 토스트 */ .save-toast{position:fixed;bottom:20px;right:20px;background:#111827;color:#fff;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:500;opacity:0;transition:opacity .3s;pointer-events:none;z-index:2000} .save-toast.show{opacity:1} </style> </head> <body> <div id="app" style="max-width:900px;margin:0 auto;padding:14px 16px 60px"> <!-- 자동저장 토스트 --> <div class="save-toast" id="save-toast">✅ 자동 저장됨</div> <!-- 모달 컨테이너 --> <div id="modal-wrap" style="display:none"></div> <!-- ── 헤더 ── --> <div class="app-hdr"> <div class="app-hdr-top"> <div class="app-brand"> 모두의 업무분장 계산기<span class="app-brand-sub">· 0-1.kr/38</span></div> <div class="title-row"> <input class="proj-inp" id="projTitle" type="text" placeholder="여기에 프로젝트명 기재 (예시: 2025 ○○ 프로젝트)" oninput="schedSave()"> <button class="btn sm" style="background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff;font-weight:600;flex-shrink:0" onclick="openShareAllModal()"> 전체 공유</button> </div> </div> <div class="app-hdr-bottom"> <div class="meta-row"> <div class="mpill" onclick="openMetaModal('start')"> <span id="lbl-start">시작일 설정</span></div> <div class="mpill" onclick="openMetaModal('end')"> <span id="lbl-end">마감일 설정</span></div> <div class="mpill" onclick="openMetaModal('dept')"> <span id="lbl-dept">담당팀</span></div> <div class="mpill" onclick="cycleStatus()"><span id="status-ico">⏳</span> <span id="lbl-status">진행 중</span></div> <span class="ts-hdr" id="hdr-ts"></span> </div> </div> </div> <!-- ── 0. 사용설명서 ── --> <div class="sec" id="sec-manual"> <div class="sec-head c-teal closed" id="sh-manual" onclick="toggleSec('manual')"> <div class="sec-ico" style="background:#CCFBF1"> </div> <h2>사용 설명서</h2> <span class="sbadge" style="background:#CCFBF1;color:#0F766E">처음이라면 클릭!</span> <div class="chev-wrap" style="margin-left:auto"><span class="chev" id="chev-manual">▾</span></div> </div> <div id="body-manual" class="manual-body collapsed" style="display:none"> <div class="manual-steps"> <div class="manual-step"><div class="ms-num">1</div><div class="ms-text"><b>프로젝트명 입력</b> — 상단 타이틀 박스에 프로젝트명을 입력하고, 시작일 · 마감일 · 담당팀 · 진행상태를 클릭해 설정하세요.</div></div> <div class="manual-step"><div class="ms-num">2</div><div class="ms-text"><b>프로젝트 개요 작성</b> — 목적/배경, 산출물, 승인자, 전달사항을 포스트잇 형식으로 입력하세요. 우측 ＋/－ 버튼으로 글자 크기를 조절할 수 있습니다.</div></div> <div class="manual-step"><div class="ms-num">3</div><div class="ms-text"><b>팀원 등록</b> — 참여 인원 섹션에서 <b>+ 팀원 추가</b>를 눌러 이름·직책·색상을 설정하세요. 등록된 팀원 칩을 드래그해 흐름도나 업무단계에 배정합니다.</div></div> <div class="manual-step"><div class="ms-num">4</div><div class="ms-text"><b>업무 단계 설정</b> — 흐름도 섹션에서 <b>+ 단계 추가</b>를 눌러 STEP을 만드세요. 흐름도 노드를 더블클릭하면 완료 처리, 호버 후 팀원 클릭으로 담당자를 배정합니다. 흐름도 <b>EDIT</b> 버튼으로 하단 상세 편집 영역으로 바로 이동할 수 있습니다.</div></div> <div class="manual-step"><div class="ms-num">5</div><div class="ms-text"><b>업무 단계별 분장 작성</b> — 카드를 클릭해 펼치면 담당자 배정, 상세 설명, 할 일 체크리스트, 결재 의견을 입력할 수 있습니다. 열 수(2~4열)는 타이틀 옆 드롭다운으로 조절하세요.</div></div> <div class="manual-step"><div class="ms-num">6</div><div class="ms-text"><b>공유 · 전달</b> — 각 섹션 하단 <b> 전달</b> 버튼을 누르면 내용 코드가 생성됩니다. 받는 사람은 같은 도구에서 <b>전달 코드 수신</b> 탭에 붙여넣으면 내용이 자동 적용됩니다. <b>전체 공유</b>는 모든 섹션을 한 번에 전달합니다.</div></div> <div class="manual-step"><div class="ms-num">7</div><div class="ms-text"><b>자동 저장</b> — 모든 입력 내용은 입력 후 0.8초 뒤 브라우저에 자동 저장됩니다. 새로고침해도 내용이 유지됩니다. (같은 브라우저/기기 기준)</div></div> </div> <div class="manual-grid"> <div class="manual-card"><div class="mc-ico"> ️</div><div class="mc-title">흐름도</div><div class="mc-desc">가로/세로 전환 가능. 더블클릭=완료, 호버 후 팀원 클릭=배정. 노드 제목은 직접 클릭해서 편집.</div></div> <div class="manual-card"><div class="mc-ico"> </div><div class="mc-title">전달 코드</div><div class="mc-desc">URL 없이 텍스트 코드로 내용 전달. 카카오톡·이메일·메시지 어디서든 붙여넣기 가능.</div></div> <div class="manual-card"><div class="mc-ico"> </div><div class="mc-title">자동 저장</div><div class="mc-desc">입력 즉시 로컬 자동저장. 우하단 토스트로 저장 확인. 기기가 달라지면 전달 코드로 이전.</div></div> </div> </div> </div> <!-- ── 1. 개요 ── --> <div class="sec"> <div class="sec-head c-blue closed" id="sh-overview" onclick="toggleSec('overview')"> <div class="sec-ico" style="background:#BFDBFE"> </div> <h2>프로젝트 개요</h2> <span class="sbadge" style="background:#EFF6FF;color:#1D4ED8">필수</span> <span class="sec-ts" id="ts-overview"></span> <div class="chev-wrap"><span class="chev" id="chev-overview">▾</span></div> </div> <div id="body-overview" class="sec-body collapsed"> <div class="postit-grid"> <div class="postit-wrap span2"> <div class="postit-label"> 목적 / 배경 <div class="fs-ctrl"> <button class="fs-btn" onclick="changeFontSize('ov-purpose',-1)">−</button> <span id="fs-ov-purpose" style="font-size:10px;color:#9ca3af;min-width:22px;text-align:center">13</span> <button class="fs-btn" onclick="changeFontSize('ov-purpose',1)">+</button> </div> </div> <textarea id="ov-purpose" class="postit b" oninput="schedSave();touchTs('overview')" placeholder="2025년도 투자자 발표용 사업계획서 작성...">2025년도 사업 방향 설정 및 투자자 발표를 위한 사업계획서 작성. 전년도 성과 분석 기반으로 신규 사업 아이템 3가지 포함.</textarea> </div> <div class="postit-wrap"> <div class="postit-label"> 최종 산출물 <div class="fs-ctrl"> <button class="fs-btn" onclick="changeFontSize('ov-output',-1)">−</button> <span id="fs-ov-output" style="font-size:10px;color:#9ca3af;min-width:22px;text-align:center">13</span> <button class="fs-btn" onclick="changeFontSize('ov-output',1)">+</button> </div> </div> <textarea id="ov-output" class="postit y" oninput="schedSave();touchTs('overview')" placeholder="A4 30p 내외 PDF...">A4 30페이지 내외 사업계획서 PDF PPT 발표자료 15슬라이드</textarea> </div> <div class="postit-wrap"> <div class="postit-label"> 승인자 / 검토자 <div class="fs-ctrl"> <button class="fs-btn" onclick="changeFontSize('ov-approver',-1)">−</button> <span id="fs-ov-approver" style="font-size:10px;color:#9ca3af;min-width:22px;text-align:center">13</span> <button class="fs-btn" onclick="changeFontSize('ov-approver',1)">+</button> </div> </div> <textarea id="ov-approver" class="postit g" oninput="schedSave();touchTs('overview')" placeholder="대표이사 최종 승인...">대표이사 최종 승인 본부장 1차 검토</textarea> </div> <div class="postit-wrap span2"> <div class="postit-label"> 전달사항 / 주의사항 <div class="fs-ctrl"> <button class="fs-btn" onclick="changeFontSize('ov-note',-1)">−</button> <span id="fs-ov-note" style="font-size:10px;color:#9ca3af;min-width:22px;text-align:center">13</span> <button class="fs-btn" onclick="changeFontSize('ov-note',1)">+</button> </div> </div> <textarea id="ov-note" class="postit p" oninput="schedSave();touchTs('overview')" placeholder="외부 공개 불가, 저장 위치...">외부 공개 불가 자료 포함. 내부망 드라이브 저장. 경쟁사 비교 자료는 팀장 검토 필수.</textarea> </div> </div> </div> <div class="share-row"> <span class="sr-ts" id="sr-ts-overview"></span> <button class="btn sm ghost" onclick="openTransferModal('overview')"> 전달</button> <button class="btn sm ghost" onclick="secShare('overview')"> 링크</button> </div> </div> <!-- ── 2. 참여 인원 ── --> <div class="sec"> <div class="sec-head c-orange" id="sh-members" onclick="toggleSec('members')"> <div class="sec-ico" style="background:#FED7AA"> </div> <h2>프로젝트 참여 인원</h2> <span class="sbadge" style="background:#FFF7ED;color:#92400E" id="mbadge">0명</span> <span class="sec-ts" id="ts-members"></span> <div class="chev-wrap"><span class="chev o" id="chev-members">▾</span></div> </div> <div id="body-members" class="sec-body"><!-- 기본 펼침 --> <p style="font-size:12px;color:#6b7280;margin-bottom:9px">흐름도 또는 업무단계로 드래그하여 담당자 배정</p> <div class="pool" id="member-pool"></div> </div> <div class="share-row"> <span class="sr-ts" id="sr-ts-members"></span> <button class="btn sm ghost" onclick="openTransferModal('members')"> 전달</button> <button class="btn sm ghost" onclick="secShare('members')"> 링크</button> </div> </div> <!-- ── 3. 흐름도 ── --> <div class="sec"> <div class="sec-head c-purple" id="sh-flow" onclick="toggleSec('flow')"> <div class="sec-ico" style="background:#DDD6FE"> ️</div> <h2>프로젝트 진행 흐름도</h2> <span class="sbadge" style="background:#F5F3FF;color:#5B21B6">자동 생성</span> <span class="sec-ts" id="ts-flow"></span> <div class="chev-wrap"><span class="chev o" id="chev-flow">▾</span></div> </div> <div id="body-flow" class="sec-body"> <div class="flow-tb"> <div class="dir-grp"> <button class="dir-btn on" id="dir-h" onclick="setDir('h')">가로 →</button> <button class="dir-btn" id="dir-v" onclick="setDir('v')">세로 ↓</button> </div> <span style="font-size:11px;color:#9ca3af">더블클릭=완료 · 호버 후 팀원 클릭=배정</span> <button class="btn sm ghost" onclick="addStep()">+ 단계 추가</button> <button class="btn sm" style="background:#F5F3FF;color:#5B21B6;border-color:#DDD6FE;margin-left:auto" onclick="openFlowFullscreen()">⛶ 전체보기</button> </div> <div class="flow-canvas" id="flow-canvas"></div> </div> <div class="share-row"> <span class="sr-ts" id="sr-ts-flow"></span> <button class="btn sm ghost" onclick="openTransferModal('flow')"> 전달</button> <button class="btn sm ghost" onclick="secShare('flow')"> 링크</button> </div> </div> <!-- ── 4. 업무단계 ── --> <div class="sec"> <div class="sec-head c-green closed" id="sh-steps" onclick="toggleSec('steps')"> <div class="sec-ico" style="background:#BBF7D0"> </div> <h2>업무 단계별 분장</h2> <span class="sbadge" style="background:#F0FDF4;color:#166534" id="sbadge">0단계</span> <div class="cols-ctrl" onclick="event.stopPropagation()"> <label>열:</label> <select id="cols-sel" onchange="setCols(this.value)"> <option value="2">2열</option> <option value="3" selected>3열</option> <option value="4">4열</option> </select> </div> <span class="sec-ts" id="ts-steps" style="margin-left:4px"></span> <div class="chev-wrap" style="margin-left:6px"><span class="chev" id="chev-steps">▾</span></div> </div> <div id="body-steps" class="sec-body collapsed"> <div id="steps-grid" class="steps-grid cols-3"></div> <button class="add-step-btn-global" onclick="addStep()">+ 업무 단계 추가</button> </div> <div class="share-row"> <span class="sr-ts" id="sr-ts-steps"></span> <button class="btn sm ghost" onclick="openTransferModal('steps')"> 전달</button> <button class="btn sm" style="background:#FEE500;border-color:#E5CF00;color:#3A1D1D" onclick="shareKakao()"> 카카오</button> <button class="btn sm ghost" onclick="shareEmail()">✉️ 이메일</button> <button class="btn sm ghost" onclick="secShare('steps')"> 링크</button> </div> </div> <!-- ── 5. 파일 세팅 ── --> <div class="sec"> <div class="sec-head c-rose closed" id="sh-file" onclick="toggleSec('file')"> <div class="sec-ico" style="background:#FECDD3">⚙️</div> <h2>파일 기본 세팅</h2> <span class="sbadge" style="background:#FFF1F2;color:#BE123C">문서 규격</span> <span class="sec-ts" id="ts-file"></span> <div class="chev-wrap"><span class="chev" id="chev-file">▾</span></div> </div> <div id="body-file" class="sec-body collapsed"> <div class="ftabs"> <button class="ftab on" onclick="setFtype(this,'hwp')">HWP</button> <button class="ftab" onclick="setFtype(this,'ppt')">PPT</button> <button class="ftab" onclick="setFtype(this,'word')">Word</button> <button class="ftab" onclick="setFtype(this,'excel')">Excel</button> <button class="ftab" onclick="setFtype(this,'pdf')">PDF</button> </div> <div id="fs-hwp" class="fgrid"> <div><div class="fl">용지 크기</div><select onchange="schedSave()"><option>A4 (210×297mm)</option><option>B5</option></select></div> <div><div class="fl">여백 상/하/좌/우</div><input type="text" value="20/15/20/20 mm" oninput="schedSave()"></div> <div><div class="fl">기본 폰트</div><select onchange="schedSave()"><option>나눔고딕</option><option>맑은 고딕</option></select></div> <div><div class="fl">본문 크기</div><select onchange="schedSave()"><option>10pt</option><option selected>11pt</option><option>12pt</option></select></div> <div><div class="fl">줄 간격</div><select onchange="schedSave()"><option>160%</option><option selected>180%</option><option>200%</option></select></div> <div><div class="fl">표 스타일</div><select onchange="schedSave()"><option selected>테두리형</option><option>음영형</option></select></div> <div style="grid-column:1/-1"><div class="fl">기타 메모</div><input type="text" placeholder="쪽 번호, 머리말 등" oninput="schedSave()"></div> </div> <div id="fs-ppt" class="fgrid" style="display:none"> <div><div class="fl">슬라이드 크기</div><select onchange="schedSave()"><option>16:9 와이드</option><option>4:3</option></select></div> <div><div class="fl">템플릿</div><input type="text" placeholder="회사 공식 템플릿" oninput="schedSave()"></div> <div><div class="fl">제목 폰트</div><select onchange="schedSave()"><option>맑은 고딕</option><option>나눔스퀘어</option></select></div> <div><div class="fl">본문 폰트</div><select onchange="schedSave()"><option>나눔고딕</option><option>맑은 고딕</option></select></div> <div><div class="fl">주요 색상</div><input type="text" placeholder="#2563EB" oninput="schedSave()"></div> <div><div class="fl">슬라이드 수</div><input type="number" placeholder="15" oninput="schedSave()"></div> <div style="grid-column:1/-1"><div class="fl">기타 메모</div><input type="text" placeholder="로고 위치, 발표 시간 등" oninput="schedSave()"></div> </div> <div id="fs-word" class="fgrid" style="display:none"> <div><div class="fl">용지</div><select onchange="schedSave()"><option>A4</option></select></div> <div><div class="fl">여백</div><input type="text" value="상25 하25 좌30 우25mm" oninput="schedSave()"></div> <div><div class="fl">폰트</div><select onchange="schedSave()"><option>맑은 고딕</option></select></div> <div><div class="fl">본문 크기</div><select onchange="schedSave()"><option>10pt</option><option selected>11pt</option></select></div> <div><div class="fl">줄 간격</div><select onchange="schedSave()"><option>1.0</option><option selected>1.5</option></select></div> <div><div class="fl">목차 자동</div><select onchange="schedSave()"><option>사용</option><option>미사용</option></select></div> <div style="grid-column:1/-1"><div class="fl">기타 메모</div><input type="text" placeholder="스타일, 쪽 번호 등" oninput="schedSave()"></div> </div> <div id="fs-excel" class="fgrid" style="display:none"> <div><div class="fl">용지 방향</div><select onchange="schedSave()"><option>가로</option><option>세로</option></select></div> <div><div class="fl">기본 열 너비</div><input type="text" placeholder="12" oninput="schedSave()"></div> <div><div class="fl">폰트</div><select onchange="schedSave()"><option>맑은 고딕</option></select></div> <div><div class="fl">폰트 크기</div><select onchange="schedSave()"><option>9</option><option selected>10</option></select></div> <div><div class="fl">헤더 고정</div><input type="number" placeholder="1행" oninput="schedSave()"></div> <div><div class="fl">셀 테두리</div><select onchange="schedSave()"><option>모든 셀</option><option>외곽만</option></select></div> <div style="grid-column:1/-1"><div class="fl">기타 메모</div><input type="text" placeholder="시트 수 등" oninput="schedSave()"></div> </div> <div id="fs-pdf" class="fgrid" style="display:none"> <div><div class="fl">원본</div><select onchange="schedSave()"><option>HWP 변환</option><option>Word 변환</option></select></div> <div><div class="fl">해상도</div><select onchange="schedSave()"><option>72dpi</option><option selected>150dpi</option></select></div> <div><div class="fl">보안</div><select onchange="schedSave()"><option>없음</option><option>열기 암호</option></select></div> <div><div class="fl">표지</div><select onchange="schedSave()"><option>포함</option><option>미포함</option></select></div> <div style="grid-column:1/-1"><div class="fl">기타 메모</div><input type="text" placeholder="워터마크 등" oninput="schedSave()"></div> </div> <!-- 전체 메모 --> <div class="global-memo"> <div class="global-memo-head"> 전체 프로젝트 메모 / 비고</div> <textarea class="global-memo-inp" id="global-memo" placeholder="프로젝트 전반에 관한 메모, 회의록 요약, 특이사항 등을 자유롭게 기재하세요..." oninput="schedSave()"></textarea> </div> </div> <div class="share-row"> <span class="sr-ts" id="sr-ts-file"></span> <button class="btn sm ghost" onclick="openTransferModal('file')"> 전달</button> <button class="btn sm ghost" onclick="secShare('file')"> 링크</button> </div> </div> <!-- ── 하단 푸터 ── --> <div style="text-align:center;padding:24px 0 8px;border-top:1px solid #e5e7eb;margin-top:8px"> <div style="font-size:13px;font-weight:700;color:#2563EB;margin-bottom:4px"> 모두의 업무분장 계산기</div> <div style="font-size:11px;color:#9ca3af;margin-bottom:6px">프로젝트 업무분장을 스마트하게 · 팀원과 함께 공유하세요</div> <a href="https://0-1.kr/38" target="_blank" style="font-size:12px;color:#2563EB;font-weight:600;text-decoration:none;padding:5px 14px;border:1px solid #BFDBFE;border-radius:20px;background:#EFF6FF;display:inline-block"> 0-1.kr/38</a> <div style="font-size:10px;color:#d1d5db;margin-top:10px">ⓒ 0-1.kr · 모두의 계산기 시리즈</div> </div> </div> <script> // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 상수 & 전역 상태 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ const SAVE_KEY='modu-work-v5'; const CC=[ {bg:'#EFF6FF',bd:'#2563EB',tx:'#1E40AF'}, {bg:'#4B1528',bd:'#F4C0D1',tx:'#F9D0DF'}, {bg:'#FEF08A',bd:'#A37E00',tx:'#3A2200'}, {bg:'#F0FDF4',bd:'#16A34A',tx:'#14532D'}, {bg:'#7F1D1D',bd:'#FCA5A5',tx:'#FEE2E2'}, {bg:'#0C4A6E',bd:'#7DD3FC',tx:'#E0F2FE'}, ]; const STATUS_LIST=[{l:'진행 전',i:'⏸'},{l:'진행 중',i:'⏳'},{l:'완료',i:'✅'},{l:'보류',i:'⏸'}]; const TODO_STATUS=[ {l:'대기',bg:'#F3F4F6',bd:'#D1D5DB',tx:'#4B5563'}, {l:'진행중',bg:'#EFF6FF',bd:'#93C5FD',tx:'#1E40AF'}, {l:'완료',bg:'#F0FDF4',bd:'#86EFAC',tx:'#166534'}, ]; const SEC_NAMES={overview:'프로젝트 개요',members:'참여 인원',flow:'진행 흐름도',steps:'업무 단계별 분장',file:'파일 세팅',all:'전체 내용'}; const FS_DEFAULTS={}; let statusIdx=1, members=[], steps=[], uid=0; let flowDir='h', stepsColCount=3, openStepIds=new Set(); let meta={start:'2025-05-19',end:'2025-06-30',dept:'기획팀'}; let dragTodoSid=null, dragTodoId=null; const timestamps={}; let saveTimer=null; const nid=()=>'x'+(++uid); const now=()=>{const d=new Date();return`${d.getFullYear()}.${String(d.getMonth()+1).padStart(2,'0')}.${String(d.getDate()).padStart(2,'0')} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;}; const fmtDate=d=>d?d.replace(/-/g,'.'):''; const gm=mid=>members.find(m=>m.id===mid); // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 자동저장 (localStorage) // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function schedSave(){ clearTimeout(saveTimer); saveTimer=setTimeout(doSave, 800); } function doSave(){ try{ const data={ v:5, projTitle:document.getElementById('projTitle').value, meta,statusIdx,flowDir,stepsColCount,openStepIds:[...openStepIds], ov:{ purpose:document.getElementById('ov-purpose').value, output:document.getElementById('ov-output').value, approver:document.getElementById('ov-approver').value, note:document.getElementById('ov-note').value, fs:{purpose:getFontSize('ov-purpose'),output:getFontSize('ov-output'),approver:getFontSize('ov-approver'),note:getFontSize('ov-note')}, }, members,steps, globalMemo:document.getElementById('global-memo').value, timestamps, }; localStorage.setItem(SAVE_KEY, JSON.stringify(data)); showToast(); }catch(e){} } function loadSave(){ try{ const raw=localStorage.getItem(SAVE_KEY); if(!raw)return false; const d=JSON.parse(raw); if(!d||d.v!==5)return false; document.getElementById('projTitle').value=d.projTitle||''; meta=d.meta||meta; statusIdx=d.statusIdx||1; flowDir=d.flowDir||'h'; stepsColCount=d.stepsColCount||3; openStepIds=new Set(d.openStepIds||[]); members=(d.members||[]).map(m=>({...m,id:m.id||nid()})); steps=(d.steps||[]).map(s=>({...s,id:s.id||nid(),todos:(s.todos||[]).map(t=>({...t,id:t.id||nid()}))})); uid=Math.max(uid,...members.map(m=>parseInt(m.id.slice(1)||0)||0),...steps.map(s=>parseInt(s.id.slice(1)||0)||0)); if(d.ov){ document.getElementById('ov-purpose').value=d.ov.purpose||''; document.getElementById('ov-output').value=d.ov.output||''; document.getElementById('ov-approver').value=d.ov.approver||''; document.getElementById('ov-note').value=d.ov.note||''; if(d.ov.fs){ Object.entries(d.ov.fs).forEach(([k,v])=>setFontSize('ov-'+k,v)); } } if(d.globalMemo)document.getElementById('global-memo').value=d.globalMemo; Object.assign(timestamps,d.timestamps||{}); // 메타 라벨 복원 document.getElementById('lbl-start').textContent=fmtDate(meta.start)+' 시작'; document.getElementById('lbl-end').textContent=fmtDate(meta.end)+' 마감'; document.getElementById('lbl-dept').textContent=meta.dept; document.getElementById('lbl-status').textContent=STATUS_LIST[statusIdx].l; document.getElementById('status-ico').textContent=STATUS_LIST[statusIdx].i; document.getElementById('cols-sel').value=String(stepsColCount); if(d.hdr_ts)document.getElementById('hdr-ts').textContent=d.hdr_ts; // ts 복원 Object.entries(timestamps).forEach(([sec,t])=>{ const el=document.getElementById('ts-'+sec); const sr=document.getElementById('sr-ts-'+sec); if(el)el.textContent='수정 '+t; if(sr)sr.textContent='마지막 수정: '+t; }); return true; }catch(e){return false;} } function showToast(){ const t=document.getElementById('save-toast'); t.classList.add('show'); clearTimeout(t._timer); t._timer=setTimeout(()=>t.classList.remove('show'),1600); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 포스트잇 폰트 크기 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function getFontSize(id){ const el=document.getElementById(id); return parseInt(el.style.fontSize)||13; } function setFontSize(id,size){ const el=document.getElementById(id); const lbl=document.getElementById('fs-'+id); if(el){el.style.fontSize=size+'px';} if(lbl)lbl.textContent=size; } function changeFontSize(id,delta){ const cur=getFontSize(id); const next=Math.min(22,Math.max(10,cur+delta)); setFontSize(id,next); schedSave(); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 타임스탬프 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function touchTs(sec){ const t=now(); timestamps[sec]=t; const el=document.getElementById('ts-'+sec); const sr=document.getElementById('sr-ts-'+sec); if(el)el.textContent='수정 '+t; if(sr)sr.textContent='마지막 수정: '+t; } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 메타 팝업 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function openMetaModal(type){ const labels={start:'시작일',end:'마감일',dept:'담당팀'}; const inner=type==='dept' ?`<div class="mfield"><label>담당팀 / 부서</label><input type="text" id="m-v" value="${meta.dept}" placeholder="예) 기획팀"></div>` :`<div class="mfield"><label>${labels[type]}</label><input type="date" id="m-v" value="${meta[type]}"></div>`; showModal(`<h3>${labels[type]} 설정</h3>${inner} <div class="modal-actions"> <button class="btn sm ghost" onclick="closeModal()">취소</button> <button class="btn pri sm" onclick="saveMetaModal('${type}')">저장</button> </div>`); setTimeout(()=>{const el=document.getElementById('m-v');if(el){el.focus();if(el.type==='date'&&el.showPicker)try{el.showPicker();}catch(e){} el.addEventListener('keydown',e=>{if(e.key==='Enter')saveMetaModal(type);});}},80); } function saveMetaModal(type){ const v=document.getElementById('m-v').value; meta[type]=v; if(type==='dept')document.getElementById('lbl-dept').textContent=v||'담당팀'; else if(type==='start')document.getElementById('lbl-start').textContent=fmtDate(v)+' 시작'; else document.getElementById('lbl-end').textContent=fmtDate(v)+' 마감'; closeModal(); schedSave(); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 팀원 팝업 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function openMemberModal(){ showModal(`<h3> 팀원 추가</h3> <div class="mfield"><label>이름</label><input type="text" id="m-name" placeholder="예) 김민준"></div> <div class="mfield"><label>직책 / 역할</label><input type="text" id="m-dept" placeholder="예) 기획팀 과장"></div> <div class="mfield"><label>색상 테마</label><select id="m-ci"> <option value="0"> 파랑 (밝은)</option> <option value="1"> 핑크 다크</option> <option value="2"> 옐로우</option> <option value="3"> 초록 (밝은)</option> <option value="4"> 레드 다크</option> <option value="5"> 네이비 다크</option> </select></div> <div class="modal-actions"> <button class="btn sm ghost" onclick="closeModal()">취소</button> <button class="btn pri sm" onclick="saveMemberModal()">추가</button> </div>`); setTimeout(()=>{ const el=document.getElementById('m-name'); if(el){el.focus();el.addEventListener('keydown',e=>{if(e.key==='Enter')saveMemberModal();});} },60); } function saveMemberModal(){ const name=document.getElementById('m-name').value.trim();if(!name)return; const dept=document.getElementById('m-dept').value.trim()||'팀원'; const ci=parseInt(document.getElementById('m-ci').value)||0; members.push({id:nid(),name,dept,ci}); touchTs('members');closeModal();renderAll();schedSave(); } function removeMember(mid){ members=members.filter(m=>m.id!==mid); steps.forEach(s=>{s.assignees=s.assignees.filter(a=>a.mid!==mid);}); touchTs('members');renderAll();schedSave(); } function renderPool(){ const pool=document.getElementById('member-pool');pool.innerHTML=''; members.forEach(m=>{ const c=CC[m.ci%6]; const chip=document.createElement('div'); chip.className='chip';chip.draggable=true;chip.dataset.mid=m.id; chip.style.cssText=`background:${c.bg};border-color:${c.bd};color:${c.tx}`; chip.innerHTML=`<span style="font-weight:700">${m.name}</span><span style="font-size:10px;opacity:.65;margin-left:2px">${m.dept}</span><span class="chip-rm" onclick="event.stopPropagation();removeMember('${m.id}')">×</span>`; chip.addEventListener('dragstart',e=>{e.dataTransfer.setData('mid',m.id);chip.style.opacity='.4';}); chip.addEventListener('dragend',()=>{chip.style.opacity='1';}); pool.appendChild(chip); }); const ab=document.createElement('button');ab.className='add-chip-btn';ab.innerHTML='+ 팀원 추가';ab.onclick=openMemberModal; pool.appendChild(ab); document.getElementById('mbadge').textContent=members.length+'명'; } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 상태 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function cycleStatus(){ statusIdx=(statusIdx+1)%4; document.getElementById('lbl-status').textContent=STATUS_LIST[statusIdx].l; document.getElementById('status-ico').textContent=STATUS_LIST[statusIdx].i; schedSave(); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 섹션 토글 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function toggleSec(id){ const b=document.getElementById('body-'+id); const c=document.getElementById('chev-'+id); const sh=document.getElementById('sh-'+id); const open=!b.classList.contains('collapsed'); b.classList.toggle('collapsed',open); c.classList.toggle('o',!open); sh.classList.toggle('closed',open); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 파일 탭 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function setFtype(btn,t){ document.querySelectorAll('.ftab').forEach(b=>b.classList.remove('on'));btn.classList.add('on'); ['hwp','ppt','word','excel','pdf'].forEach(k=>{document.getElementById('fs-'+k).style.display=k===t?'grid':'none';}); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 색상 피커 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function toggleColorPick(sid,el){ event.stopPropagation(); document.querySelectorAll('.color-picker-pop').forEach(p=>p.classList.remove('show')); el.querySelector('.color-picker-pop').classList.toggle('show'); } function setStepColor(sid,ci){ event.stopPropagation(); const s=steps.find(s=>s.id===sid);if(s)s.ci=ci; document.querySelectorAll('.color-picker-pop').forEach(p=>p.classList.remove('show')); renderAll();schedSave(); } document.addEventListener('click',e=>{ if(!e.target.closest('.si-color-dot'))document.querySelectorAll('.color-picker-pop').forEach(p=>p.classList.remove('show')); }); // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 업무단계 열 설정 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function setCols(v){ stepsColCount=parseInt(v); const grid=document.getElementById('steps-grid'); grid.className='steps-grid cols-'+stepsColCount; schedSave(); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 단계 CRUD // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function addStep(){ const s={id:nid(),title:'',deadline:'',note:'',memo:'',done:false,assignees:[],todos:[],approval:'',ci:0}; steps.push(s); openStepIds.add(s.id); touchTs('steps');touchTs('flow');renderAll();schedSave(); } function removeStep(sid){ steps=steps.filter(s=>s.id!==sid); openStepIds.delete(sid); touchTs('steps');touchTs('flow');renderAll();schedSave(); } function moveStep(sid,dir){ const i=steps.findIndex(s=>s.id===sid),j=i+dir; if(j<0||j>=steps.length)return; [steps[i],steps[j]]=[steps[j],steps[i]]; renderAll();schedSave(); } function updateSF(sid,f,v){ const s=steps.find(s=>s.id===sid); if(s){s[f]=v;touchTs('steps');touchTs('flow');schedSave();} } function toggleDone(sid){ const s=steps.find(s=>s.id===sid); if(s){s.done=!s.done;touchTs('flow');renderAll();schedSave();} } function toggleStepOpen(sid){ if(openStepIds.has(sid))openStepIds.delete(sid); else openStepIds.add(sid); renderSteps();schedSave(); } function scrollToStep(sid){ // 업무단계 섹션 열기 const body=document.getElementById('body-steps'); const chev=document.getElementById('chev-steps'); const sh=document.getElementById('sh-steps'); if(body.classList.contains('collapsed')){ body.classList.remove('collapsed'); chev.classList.add('o'); sh.classList.remove('closed'); } // 해당 스텝 펼치기 openStepIds.add(sid); renderSteps(); // 스크롤 setTimeout(()=>{ const el=document.getElementById('si-'+sid); if(el)el.scrollIntoView({behavior:'smooth',block:'start'}); },120); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 담당자 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function assignMember(sid,mid){ const s=steps.find(s=>s.id===sid);if(!s)return; if(s.assignees.find(a=>a.mid===mid))return; s.assignees.push({mid,role:s.assignees.length===0?'정':'부'}); touchTs('steps');touchTs('flow');renderAll();schedSave(); } function dropOnStep(e,sid){ e.preventDefault();e.stopPropagation(); const mid=e.dataTransfer.getData('mid');if(mid)assignMember(sid,mid); } function removeAssignee(sid,mid){ const s=steps.find(s=>s.id===sid);if(!s)return; s.assignees=s.assignees.filter(a=>a.mid!==mid); s.assignees.forEach((a,i)=>a.role=i===0?'정':'부'); renderAll();schedSave(); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 할일 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function addTodo(sid){ const s=steps.find(s=>s.id===sid); if(s){s.todos.push({id:nid(),text:'',done:false,si:0});renderSteps();schedSave();} } function removeTodo(sid,tid){ const s=steps.find(s=>s.id===sid); if(s){s.todos=s.todos.filter(t=>t.id!==tid);renderSteps();schedSave();} } function cycleTodoStatus(sid,tid){ const s=steps.find(s=>s.id===sid);if(!s)return; const t=s.todos.find(t=>t.id===tid);if(!t)return; t.si=(t.si+1)%3;t.done=t.si===2;renderSteps();schedSave(); } function toggleTodoCb(sid,tid){ const s=steps.find(s=>s.id===sid);if(!s)return; const t=s.todos.find(t=>t.id===tid);if(!t)return; t.done=!t.done;t.si=t.done?2:0;renderSteps();schedSave(); } function updateTodoText(sid,tid,v){ const s=steps.find(s=>s.id===sid);if(!s)return; const t=s.todos.find(t=>t.id===tid);if(t){t.text=v;schedSave();} } function todoDS(e,sid,tid){dragTodoSid=sid;dragTodoId=tid;e.dataTransfer.effectAllowed='move';} function todoDE(){dragTodoSid=null;dragTodoId=null;} function todoDP(e,sid,tid){ e.preventDefault();if(!dragTodoSid||dragTodoId===tid)return; const s=steps.find(s=>s.id===sid);if(!s)return; const from=s.todos.findIndex(t=>t.id===dragTodoId),to=s.todos.findIndex(t=>t.id===tid); if(from<0||to<0)return; const [item]=s.todos.splice(from,1);s.todos.splice(to,0,item); renderSteps();schedSave(); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 흐름도 렌더 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function smhHtml(sid){ if(!members.length)return''; let h=`<div class="smh"><div class="smh-title">클릭하여 배정</div>`; members.forEach(m=>{ const c=CC[m.ci%6]; h+=`<span class="smh-chip" style="background:${c.bg};border-color:${c.bd};color:${c.tx}" onclick="event.stopPropagation();assignMember('${sid}','${m.id}')">${m.name}<span style="font-size:9px;opacity:.6;margin-left:2px">${m.dept}</span></span>`; }); return h+'</div>'; } function renderFlow(){ const canvas=document.getElementById('flow-canvas'); if(!steps.length){canvas.innerHTML='<div style="padding:20px;text-align:center;font-size:13px;color:#9ca3af">업무 단계를 추가하면 흐름도가 자동 생성됩니다</div>';return;} if(flowDir==='h'){ let html='<div style="display:flex;align-items:flex-start;gap:0;min-width:max-content">'; steps.forEach((s,i)=>{ const c=CC[s.ci%6]; const aHtml=s.assignees.map(a=>{const m=gm(a.mid);if(!m)return'';const mc=CC[m.ci%6];return`<span class="fn-abadge" style="background:${mc.bg};border-color:${mc.bd};color:${mc.tx}">${m.name}(${a.role})</span>`;}).join(''); html+=`<div style="display:flex;align-items:center;gap:0"> <div style="position:relative"> <div class="fn${s.done?' done-node':''}" style="background:${c.bg};border-color:${c.bd};color:${c.tx};width:125px;text-align:center" ondblclick="toggleDone('${s.id}')" ondragover="event.preventDefault();this.classList.add('active-drop')" ondragleave="this.classList.remove('active-drop')" ondrop="this.classList.remove('active-drop');dropOnStep(event,'${s.id}')"> <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:2px"> <div class="fn-num" style="margin-bottom:0">STEP ${i+1}</div> <button onclick="event.stopPropagation();scrollToStep('${s.id}')" style="font-size:9px;padding:1px 6px;border-radius:4px;border:1px solid ${c.bd};background:rgba(255,255,255,.6);color:${c.tx};cursor:pointer;font-weight:600">EDIT</button> </div> <div class="fn-title" contenteditable="true" onblur="updateSF('${s.id}','title',this.innerText.trim())" style="min-height:16px">${s.title||'단계명 입력'}</div> ${s.deadline?`<div class="fn-dl">${fmtDate(s.deadline)}</div>`:''} ${s.memo?`<div class="fn-memo">${s.memo}</div>`:''} ${aHtml?`<div style="display:flex;flex-wrap:wrap;gap:2px;margin-top:5px;justify-content:center">${aHtml}</div>`:''} <div class="fn-comment" style="border-color:${c.bd}60"><input placeholder="결재 첨언..." value="${s.approval||''}" oninput="updateSF('${s.id}','approval',this.value)"></div> </div>${smhHtml(s.id)} </div> ${i<steps.length-1?'<div style="color:#9ca3af;padding:0 6px;font-size:20px;margin-bottom:32px;flex-shrink:0">→</div>':''} </div>`; }); canvas.innerHTML=html+'</div>'; } else { let html='<div style="display:flex;flex-direction:column;gap:0;width:100%">'; steps.forEach((s,i)=>{ const c=CC[s.ci%6]; const aHtml=s.assignees.map(a=>{const m=gm(a.mid);if(!m)return'';const mc=CC[m.ci%6]; return`<div style="display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;border:1.5px solid ${mc.bd};background:${mc.bg};color:${mc.tx};font-size:12px;font-weight:600;margin-bottom:5px;white-space:nowrap">${m.name}<span style="font-size:10px;opacity:.7">(${a.role})</span></div>`;}).join(''); html+=`<div style="display:flex;align-items:flex-start;gap:12px;width:100%"> <div style="position:relative;flex:0 0 78%"> <div class="fn${s.done?' done-node':''}" style="background:${c.bg};border-color:${c.bd};color:${c.tx};width:100%;text-align:left" ondblclick="toggleDone('${s.id}')" ondragover="event.preventDefault();this.classList.add('active-drop')" ondragleave="this.classList.remove('active-drop')" ondrop="this.classList.remove('active-drop');dropOnStep(event,'${s.id}')"> <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px"> <div class="fn-num" style="font-size:11px;margin-bottom:0">STEP ${i+1}</div> <button onclick="event.stopPropagation();scrollToStep('${s.id}')" style="font-size:9px;padding:2px 8px;border-radius:5px;border:1px solid ${c.bd};background:rgba(255,255,255,.6);color:${c.tx};cursor:pointer;font-weight:600">EDIT</button> </div> <div class="fn-title" contenteditable="true" onblur="updateSF('${s.id}','title',this.innerText.trim())" style="font-size:16px;font-weight:700;min-height:20px">${s.title||'단계명 입력'}</div> ${s.deadline?`<div class="fn-dl" style="font-size:11px;margin-top:4px"> ${fmtDate(s.deadline)}</div>`:''} ${s.memo?`<div class="fn-memo" style="font-size:12px;margin-top:5px">${s.memo}</div>`:''} <div class="fn-comment" style="border-color:${c.bd}60;margin-top:8px"><input placeholder="결재 첨언..." value="${s.approval||''}" oninput="updateSF('${s.id}','approval',this.value)" style="font-size:11px"></div> </div>${smhHtml(s.id)} </div> <div style="flex:0 0 18%;display:flex;flex-direction:column;align-items:flex-start;padding-top:12px"> ${aHtml||'<span style="font-size:11px;color:#9ca3af">미배정</span>'} </div> </div> ${i<steps.length-1?'<div style="color:#9ca3af;padding:5px 0 5px 18px;font-size:17px;line-height:1">↓</div>':''}`; }); canvas.innerHTML=html+'</div>'; } } function setDir(d){ flowDir=d; document.getElementById('dir-h').classList.toggle('on',d==='h'); document.getElementById('dir-v').classList.toggle('on',d==='v'); renderFlow();schedSave(); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 업무단계 카드 렌더 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function renderSteps(){ const grid=document.getElementById('steps-grid'); grid.className='steps-grid cols-'+stepsColCount; grid.innerHTML=''; steps.forEach((s,idx)=>{ const sc=CC[s.ci%6]; const isOpen=openStepIds.has(s.id); const card=document.createElement('div'); card.className='si-card'+(s.done?' done-card':'')+(isOpen?' open-card':''); card.id='si-'+s.id; // 색상 피커 dots const colorDots=CC.map((col,ci)=>`<div class="cp-dot" style="background:${col.bg};border-color:${col.bd}" onclick="setStepColor('${s.id}',${ci})"></div>`).join(''); // 담당자 뱃지 const aHtml=s.assignees.map(a=>{const m=gm(a.mid);if(!m)return'';const mc=CC[m.ci%6]; return`<span class="abadge" style="background:${mc.bg};border-color:${mc.bd};color:${mc.tx}">${m.name}<span style="font-size:9px;opacity:.7">(${a.role})</span><span class="arm" onclick="event.stopPropagation();removeAssignee('${s.id}','${a.mid}')">×</span></span>`;}).join(''); // 할일 HTML const todoHtml=s.todos.map(t=>{ const ts=TODO_STATUS[t.si||0]; return`<div class="todo-item" draggable="true" ondragstart="todoDS(event,'${s.id}','${t.id}')" ondragend="todoDE()" ondragover="event.preventDefault()" ondrop="todoDP(event,'${s.id}','${t.id}')"> <span class="drag-handle">⠿</span> <input type="checkbox" ${t.done?'checked':''} onchange="toggleTodoCb('${s.id}','${t.id}')"> <input type="text" class="todo-txt${t.done?' done-t':''}" value="${t.text.replace(/"/g,'&quot;')}" placeholder="항목 입력..." oninput="updateTodoText('${s.id}','${t.id}',this.value)"> <button class="todo-status-btn" style="background:${ts.bg};border-color:${ts.bd};color:${ts.tx}" onclick="cycleTodoStatus('${s.id}','${t.id}')">${ts.l}</button> <button class="todo-rm" onclick="removeTodo('${s.id}','${t.id}')">×</button> </div>`; }).join(''); const assignCount=s.assignees.length; const todoCount=s.todos.length; const doneCount=s.todos.filter(t=>t.done).length; card.innerHTML=` <div class="si-card-head" onclick="toggleStepOpen('${s.id}')"> <div class="si-color-dot" style="background:${sc.bg};border-color:${sc.bd}" onclick="event.stopPropagation();toggleColorPick('${s.id}',this)"> <div class="color-picker-pop">${colorDots}</div> </div> <span class="si-card-num">STEP ${idx+1}</span> <span class="si-card-title">${s.title||'(단계명 없음)'}</span> ${s.deadline?`<span class="si-card-dl">${fmtDate(s.deadline)}</span>`:''} <span style="font-size:10px;color:#9ca3af;white-space:nowrap;margin-left:4px">${assignCount?assignCount+'명':''} ${todoCount?doneCount+'/'+todoCount:''}</span> <span class="si-card-toggle">▾</span> </div> <div class="si-body"> <div class="fl-label">담당자 배정</div> <div class="assignee-zone" ondragover="event.preventDefault();this.classList.add('over')" ondragleave="this.classList.remove('over')" ondrop="this.classList.remove('over');dropOnStep(event,'${s.id}')"> ${!s.assignees.length?'<span class="az-ph">팀원 칩을 드래그하거나 흐름도에서 클릭으로 배정</span>':''} ${aHtml} </div> <div class="fl-label">단계명</div> <input type="text" style="width:100%;border:1px solid #e5e7eb;border-radius:7px;padding:6px 10px;font-size:13px;font-weight:600;color:#111;background:#fff;outline:none;margin-bottom:7px;font-family:inherit" placeholder="단계명 입력..." value="${s.title.replace(/"/g,'&quot;')}" oninput="updateSF('${s.id}','title',this.value);document.querySelector('#si-${s.id} .si-card-title').textContent=this.value||'(단계명 없음)';renderFlow()"> <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px"> <label style="font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap">기한</label> <input type="date" style="border:1px solid #e5e7eb;border-radius:7px;padding:5px 9px;font-size:12px;color:#374151;background:#fff;outline:none;cursor:pointer;font-family:inherit" value="${s.deadline}" onchange="updateSF('${s.id}','deadline',this.value);renderFlow()"> <label style="font-size:11px;color:#9ca3af;margin-left:8px">완료:</label> <input type="checkbox" ${s.done?'checked':''} style="width:15px;height:15px;accent-color:#16A34A;cursor:pointer" onchange="toggleDone('${s.id}')"> <div style="display:flex;gap:3px;margin-left:auto"> ${idx>0?`<button class="ibt" onclick="event.stopPropagation();moveStep('${s.id}',-1)" title="위로">↑</button>`:''} ${idx<steps.length-1?`<button class="ibt" onclick="event.stopPropagation();moveStep('${s.id}',1)" title="아래로">↓</button>`:''} <button class="ibt" onclick="event.stopPropagation();removeStep('${s.id}')" style="color:#DC2626" title="삭제">✕</button> </div> </div> <div class="fl-label">상세 설명 / 첨언</div> <textarea class="note-inp" placeholder="이 단계에서 해야 할 일, 주의사항..." oninput="updateSF('${s.id}','note',this.value)">${s.note}</textarea> <input type="text" class="memo-inp" placeholder="흐름도 한줄 메모 (노드에 표시됩니다)" value="${s.memo.replace(/"/g,'&quot;')}" oninput="updateSF('${s.id}','memo',this.value);renderFlow()"> <div class="fl-label">할 일 체크리스트</div> <div class="todo-list" id="tl-${s.id}">${todoHtml}</div> <button class="add-todo-btn" onclick="addTodo('${s.id}')">+ 항목 추가</button> <div class="approval-box"> <div class="approval-head">결재 / 검토 의견</div> <textarea class="approval-inp" placeholder="완료, 수정 요청, 검토 의견 등..." oninput="updateSF('${s.id}','approval',this.value);renderFlow()">${s.approval||''}</textarea> </div> </div>`; grid.appendChild(card); // textarea 높이 자동 const ta=card.querySelector('.note-inp'); if(ta){ta.style.height='auto';ta.style.height=Math.min(ta.scrollHeight,160)+'px';} }); document.getElementById('sbadge').textContent=steps.length+'단계'; } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 전달 / 수신 모달 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function encodeSection(sec){ let data={sec,ts:now(),v:5}; try{ if(sec==='all'){ data.payload={ projTitle:document.getElementById('projTitle').value, meta,statusIdx, ov:{ purpose:document.getElementById('ov-purpose').value, output:document.getElementById('ov-output').value, approver:document.getElementById('ov-approver').value, note:document.getElementById('ov-note').value, }, members:members.map(m=>({name:m.name,dept:m.dept,ci:m.ci})), steps:steps.map(s=>({ title:s.title,deadline:s.deadline,note:s.note,memo:s.memo, done:s.done,approval:s.approval||'',ci:s.ci||0, assignees:s.assignees.map(a=>{const m=gm(a.mid);return m?{name:m.name,role:a.role}:null;}).filter(Boolean), todos:s.todos.map(t=>({text:t.text,done:t.done,si:t.si||0})), })), globalMemo:document.getElementById('global-memo').value, }; } else if(sec==='overview'){ data.payload={ purpose:document.getElementById('ov-purpose').value, output:document.getElementById('ov-output').value, approver:document.getElementById('ov-approver').value, note:document.getElementById('ov-note').value, }; } else if(sec==='members'){ data.payload={members:members.map(m=>({name:m.name,dept:m.dept,ci:m.ci}))}; } else if(sec==='flow'||sec==='steps'){ data.payload={steps:steps.map(s=>({ title:s.title,deadline:s.deadline,note:s.note,memo:s.memo, done:s.done,approval:s.approval||'',ci:s.ci||0, assignees:s.assignees.map(a=>{const m=gm(a.mid);return m?{name:m.name,role:a.role}:null;}).filter(Boolean), todos:s.todos.map(t=>({text:t.text,done:t.done,si:t.si||0})), }))}; } const json=JSON.stringify(data); return btoa(unescape(encodeURIComponent(json))); }catch(e){return '';} } function decodeSection(code){ try{return JSON.parse(decodeURIComponent(escape(atob(code.trim()))));} catch(e){return null;} } function applySection(data){ if(!data||!data.payload)return false; const {sec,payload}=data; if(sec==='all'){ if(payload.projTitle)document.getElementById('projTitle').value=payload.projTitle; if(payload.meta){meta=payload.meta;document.getElementById('lbl-start').textContent=fmtDate(meta.start)+' 시작';document.getElementById('lbl-end').textContent=fmtDate(meta.end)+' 마감';document.getElementById('lbl-dept').textContent=meta.dept;} if(payload.statusIdx!==undefined){statusIdx=payload.statusIdx;document.getElementById('lbl-status').textContent=STATUS_LIST[statusIdx].l;document.getElementById('status-ico').textContent=STATUS_LIST[statusIdx].i;} if(payload.ov){ ['purpose','output','approver','note'].forEach(k=>{if(payload.ov[k]!==undefined)document.getElementById('ov-'+k).value=payload.ov[k];}); } if(payload.members){ members=[]; payload.members.forEach(m=>members.push({id:nid(),name:m.name,dept:m.dept||'팀원',ci:m.ci||0})); } if(payload.steps){ steps=payload.steps.map(ps=>({ id:nid(),title:ps.title||'',deadline:ps.deadline||'',note:ps.note||'', memo:ps.memo||'',done:ps.done||false,approval:ps.approval||'',ci:ps.ci||0, assignees:ps.assignees?ps.assignees.map(pa=>{const m=members.find(x=>x.name===pa.name);return m?{mid:m.id,role:pa.role}:null;}).filter(Boolean):[], todos:(ps.todos||[]).map(t=>({id:nid(),text:t.text,done:t.done,si:t.si||0})), })); } if(payload.globalMemo!==undefined)document.getElementById('global-memo').value=payload.globalMemo; } else if(sec==='overview'){ if(payload.purpose!==undefined)document.getElementById('ov-purpose').value=payload.purpose; if(payload.output!==undefined)document.getElementById('ov-output').value=payload.output; if(payload.approver!==undefined)document.getElementById('ov-approver').value=payload.approver; if(payload.note!==undefined)document.getElementById('ov-note').value=payload.note; touchTs('overview'); } else if(sec==='members'){ if(payload.members){ payload.members.forEach(m=>{if(!members.find(x=>x.name===m.name))members.push({id:nid(),name:m.name,dept:m.dept||'팀원',ci:m.ci||0});}); touchTs('members'); } } else if(sec==='flow'||sec==='steps'){ if(payload.steps){ payload.steps.forEach((ps,i)=>{ if(i<steps.length){ const s=steps[i]; if(ps.title)s.title=ps.title;if(ps.deadline)s.deadline=ps.deadline; if(ps.note)s.note=ps.note;if(ps.memo)s.memo=ps.memo; if(ps.done!==undefined)s.done=ps.done;if(ps.approval)s.approval=ps.approval; if(ps.ci!==undefined)s.ci=ps.ci; if(ps.todos&&ps.todos.length)s.todos=ps.todos.map(t=>({id:nid(),text:t.text,done:t.done,si:t.si||0})); if(ps.assignees&&ps.assignees.length){ s.assignees=ps.assignees.map(pa=>{const m=members.find(x=>x.name===pa.name);return m?{mid:m.id,role:pa.role}:null;}).filter(Boolean); } } else { steps.push({id:nid(),title:ps.title||'',deadline:ps.deadline||'',note:ps.note||'',memo:ps.memo||'',done:ps.done||false,approval:ps.approval||'',ci:ps.ci||0, assignees:ps.assignees?ps.assignees.map(pa=>{const m=members.find(x=>x.name===pa.name);return m?{mid:m.id,role:pa.role}:null;}).filter(Boolean):[], todos:(ps.todos||[]).map(t=>({id:nid(),text:t.text,done:t.done,si:t.si||0})), }); } }); touchTs('steps');touchTs('flow'); } } renderAll();schedSave(); return true; } function openTransferModal(sec){ const code=encodeSection(sec); showModal(`<h3> ${SEC_NAMES[sec]} 전달 / 수신</h3> <div class="ttab-row"> <button class="ttab on" id="tt-send" onclick="switchTTab('send')">전달 코드 생성</button> <button class="ttab" id="tt-recv" onclick="switchTTab('recv')">전달 코드 수신</button> </div> <div id="tt-send-body"> <div style="font-size:11px;color:#6b7280;margin-bottom:8px">아래 코드를 복사해 카카오톡·이메일·메시지로 전달하세요.</div> <textarea class="transfer-code" id="t-code-out" readonly>${code}</textarea> <div style="display:flex;gap:6px;margin-top:9px"> <button class="btn pri sm" onclick="copyTCode()" style="flex:1"> 코드 복사</button> <button class="btn sm" style="background:#FEE500;border-color:#E5CF00;color:#3A1D1D;flex:1" onclick="copyTCode();alert('코드가 복사되었습니다.\\n카카오톡에 붙여넣기 하여 전달하세요!')"> 카카오 전달</button> </div> <div style="font-size:10px;color:#9ca3af;margin-top:8px">전달 시각: ${now()} · 섹션: ${SEC_NAMES[sec]}</div> </div> <div id="tt-recv-body" style="display:none"> <div style="font-size:11px;color:#6b7280;margin-bottom:8px">받은 코드를 붙여넣고 <b>확인 및 적용</b>을 누르세요.</div> <textarea class="receive-inp" id="t-code-in" placeholder="받은 코드를 여기에 붙여넣으세요..."></textarea> <button class="btn pri sm" onclick="receiveTCode()" style="width:100%;margin-top:9px">✅ 확인 및 적용</button> <div id="recv-result" style="font-size:12px;margin-top:9px;display:none"></div> </div> <div class="modal-actions" style="margin-top:10px"> <button class="btn sm ghost" onclick="closeModal()">닫기</button> </div>`); } function switchTTab(t){ document.getElementById('tt-send').classList.toggle('on',t==='send'); document.getElementById('tt-recv').classList.toggle('on',t==='recv'); document.getElementById('tt-send-body').style.display=t==='send'?'block':'none'; document.getElementById('tt-recv-body').style.display=t==='recv'?'block':'none'; } function copyTCode(){ const el=document.getElementById('t-code-out');if(!el)return; if(navigator.clipboard){ navigator.clipboard.writeText(el.value).then(()=>{ const btn=document.querySelector('#tt-send-body .btn.pri'); if(btn){btn.textContent='✅ 복사됨!';setTimeout(()=>{btn.textContent=' 코드 복사';},1800);} }).catch(()=>{el.select();document.execCommand('copy');}); } else {el.select();document.execCommand('copy');} } function receiveTCode(){ const code=document.getElementById('t-code-in').value.trim(); if(!code){alert('코드를 붙여넣어 주세요.');return;} const data=decodeSection(code); const res=document.getElementById('recv-result');res.style.display='block'; if(!data){res.style.color='#DC2626';res.textContent='❌ 유효하지 않은 코드입니다.';return;} const ok=applySection(data); if(ok){res.style.color='#16A34A';res.textContent=`✅ [${SEC_NAMES[data.sec]||''}] 내용이 적용되었습니다! (전달 시각: ${data.ts||'-'})`;setTimeout(closeModal,1800);} else{res.style.color='#DC2626';res.textContent='❌ 적용 중 오류가 발생했습니다.';} } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 모달 공통 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function showModal(innerHtml){ const mw=document.getElementById('modal-wrap'); mw.innerHTML=`<div class="modal-bg" onclick="if(event.target===this)closeModal()"><div class="modal">${innerHtml}</div></div>`; mw.style.display='block'; } function closeModal(){ const mw=document.getElementById('modal-wrap'); mw.style.display='none';mw.innerHTML=''; } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 전체 공유 모달 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function openShareAllModal(){ const code=encodeSection('all'); // 데이터 URL 생성 (파라미터 방식) const baseUrl=window.location.href.split('?')[0].split('#')[0]; const paramUrl=baseUrl+'?d='+code; const shortNote='TinyURL 단축은 아래 사이트에서 직접 생성하세요'; showModal(`<h3> 전체 내용 공유</h3> <div style="background:#EFF6FF;border:1px solid #BFDBFE;border-radius:9px;padding:10px 13px;margin-bottom:13px;font-size:12px;color:#1E40AF;line-height:1.6"> ℹ️ <b>전체 공유</b>는 현재 입력된 모든 섹션 내용(프로젝트명·팀원·단계·메모 등)을 코드로 변환합니다.<br> 받는 사람이 <b>전달 코드 수신</b>에 붙여넣으면 모든 내용이 한 번에 복원됩니다. </div> <div class="ttab-row"> <button class="ttab on" id="tt-send" onclick="switchTTab('send')"> 전달 코드</button> <button class="ttab" id="tt-recv" onclick="switchTTab('recv')"> 코드 수신</button> <button class="ttab" id="tt-url" onclick="switchTTab('url')"> URL 공유</button> </div> <div id="tt-send-body"> <div style="font-size:11px;color:#6b7280;margin-bottom:7px">코드를 복사해 카카오톡·이메일·메신저로 전달하세요.</div> <textarea class="transfer-code" id="t-code-out" readonly>${code}</textarea> <div style="display:flex;gap:6px;margin-top:9px"> <button class="btn pri sm" onclick="copyTCode()" style="flex:1"> 코드 복사</button> <button class="btn sm" style="background:#FEE500;border-color:#E5CF00;color:#3A1D1D;flex:1" onclick="copyTCode();alert('코드가 복사되었습니다!\\n카카오톡 채팅창에 붙여넣기하여 전달하세요.')"> 카카오 전달</button> </div> <div style="font-size:10px;color:#9ca3af;margin-top:8px">전달 시각: ${now()} · 전체 섹션 포함</div> </div> <div id="tt-recv-body" style="display:none"> <div style="font-size:11px;color:#6b7280;margin-bottom:7px">받은 코드를 붙여넣고 <b>확인 및 적용</b>을 누르세요. 모든 내용이 복원됩니다.</div> <textarea class="receive-inp" id="t-code-in" placeholder="받은 코드를 여기에 붙여넣으세요..."></textarea> <button class="btn pri sm" onclick="receiveTCode()" style="width:100%;margin-top:9px">✅ 확인 및 적용 (전체 복원)</button> <div id="recv-result" style="font-size:12px;margin-top:9px;display:none"></div> </div> <div id="tt-url-body" style="display:none"> <div style="font-size:11px;color:#374151;margin-bottom:9px;line-height:1.6"> 아래 <b>파라미터 URL</b>을 복사해 공유하면, 받는 사람이 해당 URL을 열었을 때 자동으로 내용이 불러와집니다.<br> <span style="color:#9ca3af">(단, 티스토리에서는 파라미터 URL 공유가 막힐 수 있습니다. 그럴 땐 전달 코드를 사용하세요.)</span> </div> <div style="font-size:10px;font-weight:600;color:#6b7280;margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px">파라미터 URL (전체 데이터 포함)</div> <textarea style="width:100%;min-height:60px;font-size:10px;font-family:'Courier New',monospace;background:#f1f5f9;color:#334155;border:1px solid #cbd5e1;border-radius:8px;padding:9px;resize:none;outline:none;word-break:break-all" readonly id="param-url-out">${paramUrl}</textarea> <button class="btn sm" style="width:100%;margin-top:6px" onclick="(function(){const el=document.getElementById('param-url-out');navigator.clipboard?navigator.clipboard.writeText(el.value).then(()=>alert('파라미터 URL이 복사되었습니다!')):alert(el.value)})()"> 파라미터 URL 복사</button> <div style="margin-top:10px;padding:10px 12px;background:#FFFBEB;border:1px solid #FDE68A;border-radius:8px;font-size:11px;color:#92400E;line-height:1.7"> <b>URL 단축 (TinyURL)</b><br> 위 파라미터 URL을 복사한 뒤,<br> <a href="https://tinyurl.com" target="_blank" style="color:#2563EB;font-weight:600">tinyurl.com</a> 또는 <a href="https://bitly.com" target="_blank" style="color:#2563EB;font-weight:600">bit.ly</a> 에서 단축 링크를 생성하세요.<br> <span style="font-size:10px;color:#A37E00">※ URL이 너무 길어 일부 단축 서비스에서 작동하지 않을 수 있습니다. 그럴 땐 전달 코드를 이용하세요.</span> </div> </div> <div class="modal-actions" style="margin-top:12px"> <button class="btn sm ghost" onclick="closeModal()">닫기</button> </div>`); // URL 파라미터로 데이터 수신 체크는 이미 init에서 처리 } // URL 파라미터에서 데이터 로드 function loadFromUrlParam(){ try{ const params=new URLSearchParams(window.location.search); const d=params.get('d'); if(!d)return false; const data=decodeSection(d); if(!data)return false; return applySection(data); }catch(e){return false;} } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 흐름도 전체화면 모달 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function openFlowFullscreen(){ // 전체화면 오버레이 생성 const overlay=document.createElement('div'); overlay.id='flow-fs-overlay'; overlay.style.cssText='position:fixed;inset:0;z-index:2000;background:#1e293b;display:flex;flex-direction:column'; // 상단 툴바 const toolbar=document.createElement('div'); toolbar.style.cssText='display:flex;align-items:center;gap:10px;padding:12px 18px;background:#0f172a;border-bottom:1px solid #334155;flex-shrink:0'; toolbar.innerHTML=` <span style="font-size:14px;font-weight:700;color:#fff"> ️ 프로젝트 진행 흐름도 — 전체보기</span> <div style="display:flex;border:1px solid #334155;border-radius:7px;overflow:hidden;margin-left:8px"> <button id="fs-dir-h" onclick="fsDirH()" style="padding:5px 12px;font-size:12px;border:none;background:#2563EB;color:#fff;cursor:pointer;font-weight:500">가로 →</button> <button id="fs-dir-v" onclick="fsDirV()" style="padding:5px 12px;font-size:12px;border:none;background:transparent;color:#94a3b8;cursor:pointer;font-weight:500">세로 ↓</button> </div> <span style="font-size:11px;color:#64748b;margin-left:4px">더블클릭=완료 · 호버 후 팀원 클릭=배정 · 직접 메모 가능</span> <button onclick="closeFlowFullscreen()" style="margin-left:auto;padding:6px 14px;border-radius:8px;border:1px solid #475569;background:#1e293b;color:#94a3b8;font-size:12px;cursor:pointer;font-weight:500">✕ 닫기</button>`; // 캔버스 영역 const canvasWrap=document.createElement('div'); canvasWrap.style.cssText='flex:1;overflow:auto;padding:20px'; canvasWrap.id='fs-canvas-wrap'; overlay.appendChild(toolbar); overlay.appendChild(canvasWrap); document.body.appendChild(overlay); // 전체화면 흐름도 렌더 renderFlowFS(); // ESC 키 닫기 overlay._escHandler=function(e){if(e.key==='Escape')closeFlowFullscreen();}; document.addEventListener('keydown',overlay._escHandler); } let fsDir='h'; function fsDirH(){ fsDir='h'; document.getElementById('fs-dir-h').style.background='#2563EB'; document.getElementById('fs-dir-h').style.color='#fff'; document.getElementById('fs-dir-v').style.background='transparent'; document.getElementById('fs-dir-v').style.color='#94a3b8'; renderFlowFS(); } function fsDirV(){ fsDir='v'; document.getElementById('fs-dir-v').style.background='#2563EB'; document.getElementById('fs-dir-v').style.color='#fff'; document.getElementById('fs-dir-h').style.background='transparent'; document.getElementById('fs-dir-h').style.color='#94a3b8'; renderFlowFS(); } function renderFlowFS(){ const wrap=document.getElementById('fs-canvas-wrap'); if(!wrap)return; if(!steps.length){wrap.innerHTML='<div style="color:#64748b;text-align:center;padding:60px;font-size:14px">업무 단계가 없습니다</div>';return;} const FS_CC=[ {bg:'#1e3a8a',bd:'#3b82f6',tx:'#93c5fd'}, {bg:'#3b0764',bd:'#a855f7',tx:'#e9d5ff'}, {bg:'#451a03',bd:'#f59e0b',tx:'#fde68a'}, {bg:'#14532d',bd:'#22c55e',tx:'#bbf7d0'}, {bg:'#7f1d1d',bd:'#ef4444',tx:'#fecaca'}, {bg:'#0c4a6e',bd:'#38bdf8',tx:'#bae6fd'}, ]; if(fsDir==='h'){ let html='<div style="display:flex;align-items:flex-start;gap:0;min-width:max-content;padding:10px">'; steps.forEach((s,i)=>{ const c=FS_CC[s.ci%6]; const aHtml=s.assignees.map(a=>{const m=gm(a.mid);if(!m)return'';const mc=FS_CC[m.ci%6]; return`<span style="font-size:10px;padding:2px 8px;border-radius:10px;border:1px solid ${mc.bd};background:${mc.bg};color:${mc.tx};font-weight:600">${m.name}(${a.role})</span>`;}).join(''); const smhHtmlFS=members.length?`<div style="display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);z-index:100;background:#1e293b;border:1px solid #334155;border-radius:10px;padding:10px;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,.4)" class="fs-smh"> <div style="font-size:10px;color:#64748b;margin-bottom:6px;font-weight:600">클릭하여 배정</div> ${members.map(m=>{const mc=FS_CC[m.ci%6];return`<span onclick="event.stopPropagation();assignMember('${s.id}','${m.id}');renderFlowFS()" style="display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:20px;border:1.5px solid ${mc.bd};background:${mc.bg};color:${mc.tx};font-size:11px;font-weight:500;cursor:pointer;margin:2px">${m.name}<span style="font-size:9px;opacity:.6;margin-left:2px">${m.dept}</span></span>`;}).join('')} </div>`:''; html+=`<div style="display:flex;align-items:center;gap:0"> <div style="position:relative" onmouseenter="this.querySelector('.fs-smh')&&(this.querySelector('.fs-smh').style.display='block')" onmouseleave="this.querySelector('.fs-smh')&&(this.querySelector('.fs-smh').style.display='none')"> <div ondblclick="toggleDone('${s.id}');renderFlowFS()" ondragover="event.preventDefault();this.style.borderStyle='dashed'" ondragleave="this.style.borderStyle='solid'" ondrop="this.style.borderStyle='solid';dropOnStep(event,'${s.id}');renderFlowFS()" style="width:160px;border-radius:12px;border:2px solid ${c.bd};background:${c.bg};color:${c.tx};padding:14px 16px;cursor:pointer;position:relative;${s.done?'opacity:.4':''};transition:transform .15s" onmouseenter="this.style.transform='translateY(-3px)'" onmouseleave="this.style.transform='translateY(0)'"> ${s.done?`<div style="position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#16A34A;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:800">✓</div>`:''} <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px"> <div style="font-size:10px;font-weight:700;opacity:.6">STEP ${i+1}</div> <button onclick="event.stopPropagation();scrollToStep('${s.id}')" style="font-size:9px;padding:2px 7px;border-radius:4px;border:1px solid ${c.bd};background:rgba(255,255,255,.1);color:${c.tx};cursor:pointer;font-weight:600">EDIT</button> </div> <div contenteditable="true" onblur="updateSF('${s.id}','title',this.innerText.trim())" style="font-size:14px;font-weight:700;line-height:1.35;outline:none;min-height:18px;margin-bottom:4px">${s.title||'단계명 입력'}</div> ${s.deadline?`<div style="font-size:10px;opacity:.55;margin-bottom:3px"> ${fmtDate(s.deadline)}</div>`:''} ${s.memo?`<div style="font-size:11px;opacity:.65;margin-top:3px;line-height:1.4">${s.memo}</div>`:''} ${aHtml?`<div style="display:flex;flex-wrap:wrap;gap:3px;margin-top:7px">${aHtml}</div>`:''} <div style="margin-top:8px;border-top:1px dashed ${c.bd}60;padding-top:7px"> <input placeholder="결재 첨언 메모..." value="${(s.approval||'').replace(/"/g,'&quot;')}" oninput="updateSF('${s.id}','approval',this.value)" style="width:100%;font-size:11px;border:none;outline:none;background:transparent;color:${c.tx};font-family:inherit;opacity:.8"> </div> </div> ${smhHtmlFS} </div> ${i<steps.length-1?`<div style="color:#475569;padding:0 8px;font-size:22px;margin-bottom:36px;flex-shrink:0">→</div>`:''} </div>`; }); wrap.innerHTML=html+'</div>'; } else { let html='<div style="display:flex;flex-direction:column;gap:0;max-width:560px;margin:0 auto">'; steps.forEach((s,i)=>{ const c=FS_CC[s.ci%6]; const aHtml=s.assignees.map(a=>{const m=gm(a.mid);if(!m)return'';const mc=FS_CC[m.ci%6]; return`<div style="display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:20px;border:1.5px solid ${mc.bd};background:${mc.bg};color:${mc.tx};font-size:12px;font-weight:600;margin-bottom:4px">${m.name}<span style="font-size:10px;opacity:.7">(${a.role})</span></div>`;}).join(''); html+=`<div style="display:flex;align-items:flex-start;gap:14px;width:100%"> <div style="flex:0 0 76%;position:relative"> <div ondblclick="toggleDone('${s.id}');renderFlowFS()" ondragover="event.preventDefault();this.style.borderStyle='dashed'" ondragleave="this.style.borderStyle='solid'" ondrop="this.style.borderStyle='solid';dropOnStep(event,'${s.id}');renderFlowFS()" style="border-radius:12px;border:2px solid ${c.bd};background:${c.bg};color:${c.tx};padding:16px 18px;cursor:pointer;${s.done?'opacity:.4':''}"> ${s.done?`<div style="position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#16A34A;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:800">✓</div>`:''} <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:5px"> <div style="font-size:11px;font-weight:700;opacity:.6">STEP ${i+1}</div> <button onclick="event.stopPropagation();scrollToStep('${s.id}')" style="font-size:10px;padding:2px 9px;border-radius:5px;border:1px solid ${c.bd};background:rgba(255,255,255,.1);color:${c.tx};cursor:pointer;font-weight:600">EDIT</button> </div> <div contenteditable="true" onblur="updateSF('${s.id}','title',this.innerText.trim())" style="font-size:18px;font-weight:800;line-height:1.3;outline:none;min-height:22px">${s.title||'단계명 입력'}</div> ${s.deadline?`<div style="font-size:11px;opacity:.55;margin-top:5px"> ${fmtDate(s.deadline)}</div>`:''} ${s.memo?`<div style="font-size:12px;opacity:.65;margin-top:5px;line-height:1.4">${s.memo}</div>`:''} <div style="margin-top:9px;border-top:1px dashed ${c.bd}60;padding-top:8px"> <input placeholder="결재 첨언 메모..." value="${(s.approval||'').replace(/"/g,'&quot;')}" oninput="updateSF('${s.id}','approval',this.value)" style="width:100%;font-size:12px;border:none;outline:none;background:transparent;color:${c.tx};font-family:inherit;opacity:.8"> </div> </div> </div> <div style="flex:0 0 20%;display:flex;flex-direction:column;align-items:flex-start;padding-top:14px"> ${aHtml||`<span style="font-size:11px;color:#64748b">미배정</span>`} </div> </div> ${i<steps.length-1?`<div style="color:#475569;padding:6px 0 6px 20px;font-size:18px;line-height:1">↓</div>`:''}`; }); wrap.innerHTML=html+'</div>'; } } function closeFlowFullscreen(){ const overlay=document.getElementById('flow-fs-overlay'); if(!overlay)return; document.removeEventListener('keydown',overlay._escHandler); overlay.remove(); renderFlow(); // 메인 흐름도도 갱신 } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 공유 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function copyLink(){ const url=window.location.href; if(navigator.clipboard){navigator.clipboard.writeText(url).then(()=>alert('링크 복사 완료!'));} else{alert(url);} } function secShare(sec){ const url=window.location.href+'#sec-'+sec; if(navigator.clipboard){navigator.clipboard.writeText(url).then(()=>alert('['+SEC_NAMES[sec]+'] 섹션 링크가 복사되었습니다!\n\n'+url));} else{alert(url);} } function shareKakao(){alert(' 카카오톡 공유\n\n" 전달" 버튼으로 업무단계 코드를 생성 후\n카카오톡에 붙여넣기하여 전달하세요.\n\n(티스토리 배포 시 Kakao SDK 연동으로 자동 공유됩니다)');} function shareEmail(){ const subj=encodeURIComponent('[업무분장] '+document.getElementById('projTitle').value); const body=encodeURIComponent('업무 단계별 분장표를 확인해주세요.\n\n'+window.location.href+'#sec-steps\n\n(내용 전달이 필요한 경우 "전달 코드"를 요청하세요.)'); window.location.href='mailto:?subject='+subj+'&body='+body; } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 전체 렌더 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function renderAll(){renderPool();renderSteps();renderFlow();} // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 샘플 데이터 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ function loadSampleData(){ members=[ {id:nid(),name:'스타',dept:'PM',ci:0}, {id:nid(),name:'트업',dept:'기획',ci:3}, {id:nid(),name:'ex',dept:'디자인',ci:1}, {id:nid(),name:'마이클',dept:'편집',ci:4}, {id:nid(),name:'캐서린',dept:'기획',ci:2}, ]; steps=[ {id:nid(),title:'현황 분석 및 자료 수집',deadline:'2025-05-23',note:'전년도 실적 보고서, 시장조사 데이터 취합. 각 팀에서 자료 제출 기한 엄수.',memo:'각 팀 자료 수집',done:false,approval:'',ci:0, assignees:[],todos:[{id:nid(),text:'전년도 실적 보고서 수집',done:true,si:2},{id:nid(),text:'시장조사 데이터 취합',done:false,si:1},{id:nid(),text:'팀별 현황 인터뷰',done:false,si:0}]}, {id:nid(),title:'목차 및 구성안 작성',deadline:'2025-05-30',note:'사업계획서 전체 목차 확정. 팀장 검토 후 대표 보고.',memo:'목차 확정',done:false,approval:'',ci:3, assignees:[],todos:[{id:nid(),text:'초안 목차 작성',done:false,si:0},{id:nid(),text:'팀장 검토 요청',done:false,si:0}]}, {id:nid(),title:'본문 초안 작성',deadline:'2025-06-13',note:'각 파트별 담당자 집필. 폰트·형식 통일 필수.',memo:'형식 통일',done:false,approval:'',ci:1, assignees:[],todos:[{id:nid(),text:'파트별 집필 시작',done:false,si:0},{id:nid(),text:'형식 점검',done:false,si:0}]}, {id:nid(),title:'내부 검토 및 수정',deadline:'2025-06-20',note:'팀장 1차 검토 → 수정 → 본부장 2차 검토.',memo:'2차 검토',done:false,approval:'',ci:0, assignees:[],todos:[{id:nid(),text:'1차 검토',done:false,si:0},{id:nid(),text:'수정 반영',done:false,si:0}]}, {id:nid(),title:'최종 완성 및 제출',deadline:'2025-06-30',note:'대표이사 최종 승인. PDF 변환 후 제출.',memo:'대표 승인 후 제출',done:false,approval:'',ci:4, assignees:[],todos:[{id:nid(),text:'최종 승인',done:false,si:0},{id:nid(),text:'PDF 변환 및 제출',done:false,si:0}]}, ]; steps[0].assignees=[{mid:members[1].id,role:'정'},{mid:members[0].id,role:'부'}]; steps[1].assignees=[{mid:members[0].id,role:'정'},{mid:members[4].id,role:'부'}]; steps[2].assignees=[{mid:members[2].id,role:'정'},{mid:members[3].id,role:'부'}]; steps[3].assignees=[{mid:members[0].id,role:'정'},{mid:members[1].id,role:'부'}]; steps[4].assignees=[{mid:members[0].id,role:'정'},{mid:members[4].id,role:'부'}]; openStepIds=new Set([steps[0].id]); } // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // 초기 실행 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (function init(){ // 1순위: URL 파라미터 const fromUrl=loadFromUrlParam(); if(fromUrl){ document.getElementById('hdr-ts').textContent='URL에서 불러옴: '+now(); document.getElementById('cols-sel').value=String(stepsColCount); renderAll(); return; } // 2순위: localStorage const loaded=loadSave(); if(!loaded){ // 샘플 데이터 loadSampleData(); document.getElementById('projTitle').value=''; document.getElementById('lbl-start').textContent='시작일 설정'; document.getElementById('lbl-end').textContent='마감일 설정'; document.getElementById('lbl-dept').textContent='담당팀'; // 개요 포스트잇 기본 안내문 유지 (placeholder) } document.getElementById('hdr-ts').textContent='작성: '+now(); document.getElementById('cols-sel').value=String(stepsColCount); if(flowDir==='v'){document.getElementById('dir-h').classList.remove('on');document.getElementById('dir-v').classList.add('on');} renderAll(); })(); </script> </body> </html> 모두의계산기 0-1.kr/38 모두 사업계획서 업무분장 웹앱 최매슨생 https://0-1.kr/38 https://0-1.kr/38#entry38comment Fri, 6 Jan 2023 08:45:31 +0900 https://0-1.kr/37 <!-- 모두의스티커출력계산기_V0_260727 (3차수정: 다운로드파일 내 중첩 문서구조 제거) : 티스토리 본문용(HTML모드) --> <style> * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body { margin:0; padding:0; width:100%; background:#f1f3f6; font-family:-apple-system,BlinkMacSystemFont,'Malgun Gothic','Apple SD Gothic Neo',sans-serif; } body.stk-popup-open { overflow:hidden; touch-action:none; } .stk-wrap { max-width:980px; margin:0 auto; padding:0 12px 60px; } .stk-topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 4px; position:sticky; top:0; z-index:500; background:#f1f3f6; } .stk-topbar-left { display:flex; flex-direction:column; min-width:0; } .stk-topbar-title { font-size:17px; font-weight:800; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .stk-topbar-sub { font-size:11px; color:#999; margin-top:2px; } .stk-topbar-actions { display:flex; gap:6px; flex-shrink:0; } .stk-tb-btn { touch-action:manipulation; border:none; border-radius:10px; padding:9px 14px; font-size:13px; font-weight:800; cursor:pointer; } .stk-tb-icon { padding:9px 11px; font-size:15px; background:#eef0f4; color:#555; } .stk-tb-icon:disabled { opacity:0.3; } .stk-tb-share { background:#eafaf0; color:#1c9a5b; } .stk-tb-save { background:#3b6ef6; color:#fff; } .stk-modal-overlay { position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(20,22,28,0.55); z-index:2147483647; display:none; align-items:flex-end; justify-content:center; touch-action:none; } .stk-modal-overlay.open { display:flex; } .stk-modal { background:#fff; width:100%; max-width:480px; border-radius:18px 18px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); max-height:86%; overflow-y:auto; touch-action:pan-y; -webkit-overflow-scrolling:touch; } .stk-modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; } .stk-modal-head .stk-h { margin:0; } .stk-modal-close { border:none; background:#f1f3f6; width:32px; height:32px; border-radius:50%; font-size:15px; color:#666; touch-action:manipulation; } .stk-share-url { display:flex; gap:6px; margin-bottom:10px; } .stk-share-url input { flex:1; min-width:0; padding:9px; border:1.5px solid #dde2ea; border-radius:8px; font-size:12px; background:#fafbfc; color:#555; } .stk-qr-box { display:flex; justify-content:center; padding:14px 0 6px; min-height:190px; align-items:center; } .stk-imgfile-row { display:flex; align-items:center; gap:8px; } .stk-imgfile-row input[type=file] { flex:1; font-size:12px; } .stk-card { background:#fff; border-radius:14px; padding:16px; margin-bottom:14px; box-shadow:0 1px 4px rgba(0,0,0,0.08); } .stk-h { font-size:16px; font-weight:800; color:#333; margin:0 0 10px; display:flex; align-items:center; gap:6px; } .stk-h .stk-badge { font-size:11px; background:#3b6ef6; color:#fff; padding:2px 8px; border-radius:20px; font-weight:700; } .stk-desc { font-size:13px; color:#666; line-height:1.6; background:#fff; border-radius:12px; padding:12px 14px; margin-bottom:14px; box-shadow:0 1px 4px rgba(0,0,0,0.06); } .stk-card-1 { border-left:5px solid #3b6ef6; } .stk-card-1 .stk-badge { background:#3b6ef6; } .stk-card-1 .stk-accordion-arrow { color:#3b6ef6; } .stk-card-2 { border-left:5px solid #12b76a; } .stk-card-2 .stk-h { color:#0d8a53; } .stk-card-2 .stk-accordion-arrow { color:#12b76a; } .stk-card-3 { border-left:5px solid #f79009; } .stk-card-3 .stk-h { color:#b96b04; } .stk-card-3 .stk-accordion-arrow { color:#f79009; } .stk-countbox { background:#fff7ea; border:1px dashed #f3c98a; border-radius:10px; padding:12px; margin-top:12px; } .stk-countbox .stk-h2 { font-size:13px; font-weight:800; color:#b96b04; margin-bottom:8px; } .stk-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; } .stk-btn { touch-action:manipulation; border:1.5px solid #dde2ea; background:#fafbfc; border-radius:10px; padding:10px 12px; font-size:13.5px; font-weight:700; color:#444; cursor:pointer; line-height:1.3; } .stk-btn.on { background:#3b6ef6; border-color:#3b6ef6; color:#fff; } .stk-btn small { display:block; font-weight:500; font-size:11px; opacity:0.8; margin-top:2px; } .stk-preset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; } .stk-field { flex:1; min-width:110px; } .stk-field label { display:block; font-size:12px; color:#777; margin-bottom:4px; font-weight:600; } .stk-field input[type=number], .stk-field input[type=text], .stk-field select { width:100%; padding:9px 8px; border:1.5px solid #dde2ea; border-radius:8px; font-size:14px; touch-action:manipulation; -webkit-appearance:none; appearance:none; background:#fff; } .stk-field input[type=color] { width:44px; height:38px; border:1.5px solid #dde2ea; border-radius:8px; padding:2px; background:#fff; } .stk-inline { display:flex; align-items:center; gap:8px; } .stk-note { font-size:12px; color:#888; margin-top:6px; line-height:1.5; } .stk-sizebox { background:#eef3ff; border:1px dashed #b7c8f7; border-radius:10px; padding:10px 12px; font-size:13px; color:#2b4fbf; font-weight:700; margin-top:8px; } textarea.stk-ta { width:100%; min-height:90px; border:1.5px solid #dde2ea; border-radius:8px; padding:10px; font-size:14px; resize:vertical; touch-action:manipulation; } .stk-toggle-wrap { display:flex; background:#eef0f4; border-radius:10px; padding:3px; margin-bottom:10px; } .stk-toggle-wrap .stk-btn { flex:1; text-align:center; border:none; background:transparent; border-radius:8px; margin:0; } .stk-toggle-wrap .stk-btn.on { background:#fff; color:#3b6ef6; box-shadow:0 1px 3px rgba(0,0,0,0.12); } .stk-cell-list { display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; padding-right:2px; } .stk-cell-list .stk-cellrow { display:flex; align-items:center; gap:8px; } .stk-cell-list .stk-cellrow span { font-size:11px; color:#999; width:28px; flex-shrink:0; text-align:right; } .stk-cell-list input { flex:1; padding:8px; border:1.5px solid #dde2ea; border-radius:8px; font-size:13px; } .stk-preview-wrap { overflow-x:auto; background:#dfe3ea; border-radius:10px; padding:14px; display:flex; justify-content:center; } #stkPage { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.15); position:relative; flex-shrink:0; } .stk-label-cell { position:absolute; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; word-break:break-all; } .stk-label-cell .stk-lc-text { width:100%; padding:2px; white-space:pre-wrap; } .stk-actionbar { display:flex; gap:8px; flex-wrap:wrap; } .stk-actionbar .stk-btn { flex:1; min-width:120px; text-align:center; } .stk-primary { background:#3b6ef6 !important; border-color:#3b6ef6 !important; color:#fff !important; } .stk-ghost { background:#fff !important; } .stk-accordion-head { display:flex; justify-content:space-between; align-items:center; cursor:pointer; } .stk-accordion-body { display:none; padding-top:10px; font-size:13px; color:#555; line-height:1.7; } .stk-accordion-body.open { display:block; } .stk-accordion-body ul { margin:0; padding-left:18px; } .stk-footer { text-align:center; font-size:11px; color:#aaa; margin-top:18px; } .stk-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:rgba(30,30,30,0.9); color:#fff; padding:10px 18px; border-radius:20px; font-size:13px; z-index:999999; opacity:0; pointer-events:none; transition:opacity .25s; } .stk-toast.show { opacity:1; } .stk-tip { position:relative; } .stk-tip .stk-bubble { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:8px; background:#222; color:#fff; font-size:11px; padding:6px 9px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; z-index:9999; } .stk-tip .stk-bubble:after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#222; } .stk-tip.stk-show-bubble .stk-bubble { opacity:1; } @media print { body * { visibility:hidden; } .stk-preview-wrap, .stk-preview-wrap * { visibility:visible; } .stk-preview-wrap { position:absolute; left:0; top:0; background:#fff; padding:0; overflow:visible; } #stkPage { box-shadow:none; } } </style> <div class="stk-wrap"> <div class="stk-topbar"> <div class="stk-topbar-left"> <div class="stk-topbar-title"> ️ 모두의스티커출력계산기_V0_(260727)</div> <div class="stk-topbar-sub">시안(Draft) · 스타트업EX</div> </div> <div class="stk-topbar-actions"> <button type="button" class="stk-tb-btn stk-tb-icon" id="stkUndoBtn" title="되돌리기">↶</button> <button type="button" class="stk-tb-btn stk-tb-icon" id="stkRedoBtn" title="되살리기">↷</button> <button type="button" class="stk-tb-btn stk-tb-share" id="stkShareBtn">공유</button> <button type="button" class="stk-tb-btn stk-tb-save" id="stkTopSaveBtn">저장</button> </div> </div> <div class="stk-desc"> A4·B4 등 원하는 용지에 라벨 크기와 여백·간격을 입력하면 몇 칸이 들어가는지 자동 계산하고, 이름표·명함·주소라벨 같은 내용을 칸마다 채워 인쇄까지 할 수 있는 도구예요. 시중 라벨지 규격에 맞춰 바로 인쇄하거나, 원하는 칸수를 직접 입력해 나만의 라벨을 만들 수 있어요. </div> <!-- 1. 라벨 프리셋 --> <div class="stk-card stk-card-1"> <div class="stk-accordion-head" id="stkHead1"> <div class="stk-h">① 라벨 유형 선택 <span class="stk-badge">15종 프리셋</span></div> <span class="stk-accordion-arrow" id="stkArrow1">▼</span> </div> <div class="stk-accordion-body open" id="stkBody1"> <div class="stk-preset-grid" id="stkPresetGrid"></div> <div class="stk-note">프리셋을 고르면 라벨 실측 사이즈·여백·간격이 자동 세팅됩니다. 아래 ②에서 직접 수정도 가능해요.<br>"시판 n칸" 프리셋은 실제 문구점에서 파는 A4 라벨지의 공개된 규격(가로×세로 mm)을 참고해 넣은 것으로, 특정 브랜드 제품과의 제휴·후원 관계는 없습니다.</div> <div class="stk-countbox"> <div class="stk-h2"> 칸수로 직접 만들기</div> <div class="stk-row" style="margin-bottom:0;"> <div class="stk-field" style="max-width:100px;"> <label>가로 칸수</label> <input type="number" id="stkColsInput" value="3" min="1" step="1"> </div> <div class="stk-field" style="max-width:100px;"> <label>세로 칸수</label> <input type="number" id="stkRowsInput" value="8" min="1" step="1"> </div> <div class="stk-field" style="flex:1.4; align-self:flex-end;"> <button type="button" class="stk-btn stk-primary" id="stkApplyCount" style="width:100%;">이 칸수로 라벨크기 자동계산</button> </div> </div> <div class="stk-note" style="margin-top:8px;">지금 ②에 설정된 용지·여백·간격 기준으로, 원하는 칸수에 딱 맞는 라벨 크기를 역산해줍니다.</div> </div> </div> </div> <!-- 2. 용지/사이즈 직접설정 --> <div class="stk-card stk-card-2"> <div class="stk-accordion-head" id="stkHead2"> <div class="stk-h">② 용지 &amp; 라벨 사이즈 (mm)</div> <span class="stk-accordion-arrow" id="stkArrow2">▼</span> </div> <div class="stk-accordion-body" id="stkBody2"> <div class="stk-row"> <div class="stk-field"> <label>용지 크기</label> <select id="stkPaper"> <option value="A4">A4 (210×297)</option> <option value="B4">B4 (257×364)</option> <option value="A3">A3 (297×420)</option> <option value="LETTER">Letter (215.9×279.4)</option> </select> </div> <div class="stk-field"> <label>라벨 가로(mm)</label> <input type="number" id="stkLW" value="70" min="5" step="0.5"> </div> <div class="stk-field"> <label>라벨 세로(mm)</label> <input type="number" id="stkLH" value="30" min="5" step="0.5"> </div> </div> <div class="stk-row"> <div class="stk-field"> <label>상하 여백(mm)</label> <input type="number" id="stkMY" value="10" min="0" step="0.5"> </div> <div class="stk-field"> <label>좌우 여백(mm)</label> <input type="number" id="stkMX" value="8" min="0" step="0.5"> </div> <div class="stk-field"> <label>가로 간격(mm)</label> <input type="number" id="stkGX" value="2" min="0" step="0.5"> </div> <div class="stk-field"> <label>세로 간격(mm)</label> <input type="number" id="stkGY" value="2" min="0" step="0.5"> </div> </div> <div class="stk-row"> <div class="stk-field" style="max-width:180px;"> <label>테두리 스타일</label> <select id="stkBorder"> <option value="none">없음</option> <option value="thin" selected>얇은 실선</option> <option value="thick">굵은 실선</option> <option value="dashed">점선</option> <option value="round">둥근 실선</option> </select> </div> <div class="stk-field" style="max-width:120px;"> <label>모양</label> <select id="stkShape"> <option value="rect">사각형</option> <option value="circle">원형</option> </select> </div> </div> <div class="stk-sizebox" id="stkSizeInfo">계산 중...</div> </div> </div> <!-- 3. 텍스트/디자인 --> <div class="stk-card stk-card-3"> <div class="stk-accordion-head" id="stkHead3"> <div class="stk-h">③ 내용 입력</div> <span class="stk-accordion-arrow" id="stkArrow3">▼</span> </div> <div class="stk-accordion-body" id="stkBody3"> <div class="stk-toggle-wrap"> <button type="button" class="stk-btn on" id="stkModeSame">전체 동일 내용</button> <button type="button" class="stk-btn" id="stkModeEach">칸마다 다르게</button> </div> <div id="stkSameBox"> <textarea class="stk-ta" id="stkSameText" placeholder="모든 칸에 들어갈 내용 (여러 줄 가능)">홍길동 010-1234-5678</textarea> </div> <div id="stkEachBox" style="display:none;"> <div class="stk-row"> <div class="stk-field" style="flex:2;"> <label>엑셀/메모에서 붙여넣기 (줄바꿈 = 다음 칸)</label> <textarea class="stk-ta" id="stkPasteBox" placeholder="여기에 엑셀 셀 내용을 붙여넣으면 칸마다 자동으로 채워집니다"></textarea> </div> </div> <div class="stk-row"> <button type="button" class="stk-btn stk-primary" id="stkApplyPaste">↓ 붙여넣은 내용 칸에 적용</button> <button type="button" class="stk-btn" id="stkCopyFirst">1번 칸 내용 전체 복사</button> </div> <div class="stk-cell-list" id="stkCellList"></div> </div> <div class="stk-row" style="margin-top:10px;"> <div class="stk-field"> <label>글자 크기(pt)</label> <input type="number" id="stkFontSize" value="14" min="6" max="60"> </div> <div class="stk-field"> <label>글자 색</label> <input type="color" id="stkFontColor" value="#111111"> </div> <div class="stk-field"> <label>배경 색</label> <input type="color" id="stkBgColor" value="#ffffff"> </div> <div class="stk-field"> <label>정렬</label> <select id="stkAlign"> <option value="center">가운데</option> <option value="left">왼쪽</option> <option value="right">오른쪽</option> </select> </div> </div> <div class="stk-row"> <div class="stk-field"> <label>폰트(서체)</label> <select id="stkFontFamily"> <option value="system">기본(고딕)</option> <option value="serif">명조체</option> <option value="round">둥근고딕</option> <option value="hand">손글씨체</option> <option value="mono">타자체</option> </select> </div> <div class="stk-field"> <label>회전(°)</label> <input type="number" id="stkRotate" value="0" min="-180" max="180" step="1"> </div> </div> <div class="stk-row"> <div class="stk-field" style="flex:2;"> <label>배경 이미지</label> <div class="stk-imgfile-row"> <input type="file" id="stkBgImageFile" accept="image/*"> <button type="button" class="stk-btn" id="stkBgImageClear">제거</button> </div> </div> </div> <div class="stk-note">배경 이미지를 넣으면 위의 "배경 색"은 무시되고 사진이 라벨 전체를 채웁니다. 이미지가 클수록 저장 용량이 커지니 너무 큰 사진은 피해주세요.</div> </div> </div> <!-- 4. 미리보기 --> <div class="stk-card"> <div class="stk-h">④ 인쇄 미리보기</div> <div class="stk-preview-wrap"> <div id="stkPage"></div> </div> <div class="stk-actionbar" style="margin-top:12px;"> <div class="stk-tip"> <button type="button" class="stk-btn stk-primary" id="stkPrintBtn"> ️ 인쇄하기</button> <div class="stk-bubble">브라우저 인쇄창에서 용지크기·배율100%로 설정하세요</div> </div> <div class="stk-tip"> <button type="button" class="stk-btn stk-ghost" id="stkSaveBtn"> 임시저장</button> <div class="stk-bubble">4초마다 자동으로 이 기기에 저장됩니다</div> </div> <div class="stk-tip"> <button type="button" class="stk-btn stk-ghost" id="stkSaveFileBtn"> 파일로 저장</button> <div class="stk-bubble">클릭하면 지금 상태로 복원되는 html파일이 만들어져요</div> </div> </div> </div> <!-- 5. 사용설명서 --> <div class="stk-card"> <div class="stk-accordion-head" id="stkGuideHead"> <div class="stk-h" style="margin:0;"> 사용설명서</div> <span id="stkGuideArrow">▼</span> </div> <div class="stk-accordion-body" id="stkGuideBody"> <ul> <li>① 원하는 라벨 유형(주소라벨, 명함, 명패 등)을 먼저 고르면 실측 사이즈가 자동 입력됩니다. 원하는 칸수(가로×세로)를 직접 입력하면 그 칸수에 딱 맞는 라벨 크기를 역산해줍니다.</li> <li>② 용지·여백·간격을 직접 조정하면 아래 회색 박스에 "가로 n칸 × 세로 n칸 = 총 n개"가 실시간으로 계산됩니다.</li> <li>③ "전체 동일 내용"은 모든 칸에 같은 텍스트, "칸마다 다르게"는 엑셀에서 복사한 내용을 붙여넣으면 줄바꿈 기준으로 각 칸에 자동 배분됩니다.</li> <li>④ 미리보기는 실제 인쇄 비율과 동일하게 mm 단위로 그려집니다. 인쇄 시 브라우저 인쇄 설정에서 배율은 반드시 100%로 두세요.</li> <li>⑤ 입력 내용은 4초마다 이 기기(브라우저)에 자동 저장되며, 다음 방문 시 이어서 작업할 수 있습니다. 상단의 ↶↷ 버튼으로 최근 변경을 되돌리거나 되살릴 수 있어요.</li> <li>⑥ 상단 "공유" 버튼을 누르면 현재 설정을 담은 링크·짧은 URL·QR코드를 만들 수 있어요(배경 이미지는 용량 문제로 링크에는 포함되지 않습니다).</li> <li>⑦ ③ 섹션에서 배경 이미지 업로드, 폰트(서체), 회전 각도를 설정할 수 있습니다. 이미지가 너무 크면 저장·불러오기가 느려질 수 있어요.</li> <li>⑧ "파일로 저장"을 누르면 지금 상태(입력 내용·배경이미지 포함)가 그대로 담긴 html 파일이 다운로드됩니다. 이 파일을 나중에 다시 열면(더블클릭) 자동으로 이 페이지로 이동하면서 내용이 그대로 복원돼요.</li> </ul> </div> </div> <div class="stk-footer">스타트업EX · cds1981@naver.com · 0-1.kr (주소는 변경될 수 있음)</div> </div> <div class="stk-toast" id="stkToast"></div> <div class="stk-modal-overlay" id="stkShareOverlay"> <div class="stk-modal"> <div class="stk-modal-head"> <div class="stk-h"> 공유하기</div> <button type="button" class="stk-modal-close" id="stkShareCloseBtn">✕</button> </div> <div class="stk-note" style="margin-top:0;">현재 설정(용지·라벨크기·내용)을 담은 링크예요. 배경 이미지는 용량 문제로 링크에는 포함되지 않아요.</div> <div class="stk-share-url" style="margin-top:10px;"> <input type="text" id="stkShareUrlBox" readonly> <button type="button" class="stk-btn stk-primary" id="stkShareCopyBtn">복사</button> </div> <div class="stk-row"> <button type="button" class="stk-btn" id="stkShareTinyBtn" style="flex:1;">짧은 URL 만들기</button> </div> <div class="stk-qr-box" id="stkQRBox"></div> <div class="stk-row"> <button type="button" class="stk-btn" id="stkQRSaveBtn" style="flex:1;">QR 이미지 저장(새창)</button> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script> (function(){ // ===== 15종 프리셋 (가로mm, 세로mm, 모양, 설명, 여백/간격 기본값) ===== var PRESETS = [ { id:'addr', name:'주소라벨', w:100, h:30, shape:'rect', mx:5, my:13, gx:2, gy:0 }, { id:'name', name:'이름표', w:90, h:50, shape:'rect', mx:8, my:14, gx:3, gy:3 }, { id:'card', name:'명함(가로)', w:90, h:50, shape:'rect', mx:8, my:14, gx:3, gy:3 }, { id:'plate', name:'명패', w:200, h:60, shape:'rect', mx:5, my:20, gx:5, gy:5 }, { id:'seat', name:'좌석표(텐트)', w:90, h:120,shape:'rect', mx:15, my:15, gx:5, gy:5 }, { id:'badge', name:'출입증', w:90, h:54, shape:'rect', mx:10, my:15, gx:3, gy:3 }, { id:'cd', name:'CD/DVD 라벨', w:118, h:118,shape:'circle', mx:36, my:29, gx:3, gy:3 }, { id:'parcel', name:'택배송장라벨', w:100, h:150,shape:'rect', mx:5, my:8, gx:2, gy:2 }, { id:'price', name:'상품가격표', w:40, h:30, shape:'rect', mx:5, my:8, gx:2, gy:2 }, { id:'circle', name:'원형라벨(소)', w:40, h:40, shape:'circle', mx:5, my:8, gx:2, gy:2 }, { id:'magnet', name:'냉장고자석', w:80, h:80, shape:'rect', mx:15, my:14, gx:5, gy:5 }, { id:'spine', name:'책등라벨', w:15, h:200,shape:'rect', mx:10, my:10, gx:3, gy:3 }, { id:'index', name:'파일인덱스탭', w:40, h:20, shape:'rect', mx:5, my:8, gx:2, gy:2 }, { id:'qr', name:'QR/바코드라벨', w:40, h:40, shape:'rect', mx:5, my:8, gx:2, gy:2 }, { id:'card2', name:'초대장(A6)', w:105, h:148,shape:'rect', mx:0, my:0, gx:2, gy:2 }, // 시중 판매 라벨지 실측 규격 호환 (모델명은 참고용 표기이며 특정 제품과 무관합니다) { id:'mk16', name:'시판 16칸(주소용)', w:99.1, h:33.9, shape:'rect', mx:5, my:12.4, gx:2.5, gy:0 }, { id:'mk14', name:'시판 14칸(주소용)', w:99.1, h:38.1, shape:'rect', mx:5, my:16.9, gx:2.5, gy:0 }, { id:'mk12', name:'시판 12칸(주소용)', w:100, h:45, shape:'rect', mx:5, my:21, gx:0, gy:0 } ]; var PAPER = { A4: { w:210, h:297 }, B4: { w:257, h:364 }, A3: { w:297, h:420 }, LETTER: { w:215.9, h:279.4 } }; var state = { presetId:'addr', paper:'A4', lw:70, lh:30, mx:8, my:10, gx:2, gy:2, border:'thin', shape:'rect', mode:'same', sameText:'홍길동\n010-1234-5678', fontSize:14, fontColor:'#111111', bgColor:'#ffffff', align:'center', fontFamily:'system', rotate:0, bgImage:null, cells:[] }; var FONT_MAP = { system: "-apple-system,BlinkMacSystemFont,'Malgun Gothic','Apple SD Gothic Neo',sans-serif", serif: "'Batang','Nanum Myeongjo',serif", round: "'Malgun Gothic','Apple SD Gothic Neo',sans-serif", hand: "'Segoe Script','Comic Sans MS',cursive", mono: "'Courier New',monospace" }; var $ = function(id){ return document.getElementById(id); }; var _touching = false; function bindTap(el, fn){ el.addEventListener('touchend', function(e){ _touching = true; fn(e); setTimeout(function(){ _touching=false; },350); }); el.addEventListener('click', function(e){ if(_touching) return; fn(e); }); } function toast(msg){ var t = $('stkToast'); t.textContent = msg; t.className='stk-toast show'; clearTimeout(t._tm); t._tm = setTimeout(function(){ t.className='stk-toast'; }, 1600); } // ---- 프리셋 그리드 렌더 ---- var presetGrid = $('stkPresetGrid'); PRESETS.forEach(function(p){ var b = document.createElement('button'); b.type='button'; b.className='stk-btn'; b.setAttribute('data-id',p.id); b.innerHTML = p.name + '<small>' + p.w + '×' + p.h + 'mm</small>'; bindTap(b, function(){ applyPreset(p); }); presetGrid.appendChild(b); }); function applyPreset(p){ state.presetId = p.id; $('stkLW').value = p.w; $('stkLH').value = p.h; $('stkMX').value = p.mx; $('stkMY').value = p.my; $('stkGX').value = p.gx; $('stkGY').value = p.gy; $('stkShape').value = p.shape; Array.prototype.forEach.call(presetGrid.children, function(c){ c.className = (c.getAttribute('data-id')===p.id) ? 'stk-btn on' : 'stk-btn'; }); recalc(); } // ---- 계산 & 렌더 ---- var MM2PX = 3.4; // 화면 미리보기 배율(인쇄시엔 mm 그대로 사용) function recalc(){ state.paper = $('stkPaper').value; state.lw = parseFloat($('stkLW').value) || 10; state.lh = parseFloat($('stkLH').value) || 10; state.mx = parseFloat($('stkMX').value) || 0; state.my = parseFloat($('stkMY').value) || 0; state.gx = parseFloat($('stkGX').value) || 0; state.gy = parseFloat($('stkGY').value) || 0; state.border = $('stkBorder').value; state.shape = $('stkShape').value; state.fontSize = parseFloat($('stkFontSize').value) || 14; state.fontColor = $('stkFontColor').value; state.bgColor = $('stkBgColor').value; state.align = $('stkAlign').value; state.fontFamily = $('stkFontFamily').value; state.rotate = parseFloat($('stkRotate').value) || 0; var paper = PAPER[state.paper]; var usableW = paper.w - state.mx*2; var usableH = paper.h - state.my*2; var cols = Math.max(1, Math.floor((usableW + state.gx) / (state.lw + state.gx))); var rows = Math.max(1, Math.floor((usableH + state.gy) / (state.lh + state.gy))); var total = cols * rows; state.cols = cols; state.rows = rows; state.total = total; $('stkSizeInfo').textContent = '용지 ' + state.paper + ' (' + paper.w + '×' + paper.h + 'mm) · 라벨 실측 ' + state.lw + '×' + state.lh + 'mm · ' + '가로 ' + cols + '칸 × 세로 ' + rows + '칸 = 총 ' + total + '개'; syncCellsArray(); renderPage(paper, cols, rows); queueHistory(); } function syncCellsArray(){ var n = state.total; while(state.cells.length < n) state.cells.push(''); if(state.cells.length > n) state.cells.length = n; } function borderCSS(){ switch(state.border){ case 'none': return 'none'; case 'thin': return '1px solid #999'; case 'thick': return '2.5px solid #333'; case 'dashed': return '1.5px dashed #666'; case 'round': return '1.5px solid #999'; default: return '1px solid #999'; } } function renderPage(paper, cols, rows){ var page = $('stkPage'); page.style.width = (paper.w*MM2PX)+'px'; page.style.height = (paper.h*MM2PX)+'px'; page.innerHTML = ''; var lwPx = state.lw*MM2PX, lhPx = state.lh*MM2PX; var mxPx = state.mx*MM2PX, myPx = state.my*MM2PX; var gxPx = state.gx*MM2PX, gyPx = state.gy*MM2PX; var idx = 0; for(var r=0; r<rows; r++){ for(var c=0; c<cols; c++){ var cell = document.createElement('div'); cell.className = 'stk-label-cell'; cell.style.left = (mxPx + c*(lwPx+gxPx)) + 'px'; cell.style.top = (myPx + r*(lhPx+gyPx)) + 'px'; cell.style.width = lwPx + 'px'; cell.style.height = lhPx + 'px'; cell.style.border = borderCSS(); cell.style.borderRadius = (state.shape==='circle') ? '50%' : '3px'; if(state.bgImage){ cell.style.backgroundImage = 'url(' + state.bgImage + ')'; cell.style.backgroundSize = 'cover'; cell.style.backgroundPosition = 'center'; } else { cell.style.background = state.bgColor; } if(state.rotate){ cell.style.webkitTransform = 'rotate(' + state.rotate + 'deg)'; cell.style.transform = 'rotate(' + state.rotate + 'deg)'; } var txtDiv = document.createElement('div'); txtDiv.className = 'stk-lc-text'; txtDiv.style.fontSize = state.fontSize + 'px'; txtDiv.style.color = state.fontColor; txtDiv.style.textAlign = state.align; txtDiv.style.fontFamily = FONT_MAP[state.fontFamily] || FONT_MAP.system; txtDiv.textContent = (state.mode==='same') ? state.sameText : (state.cells[idx] || ''); cell.appendChild(txtDiv); page.appendChild(cell); idx++; } } renderCellList(); } function renderCellList(){ if(state.mode !== 'each') return; var box = $('stkCellList'); box.innerHTML = ''; for(var i=0;i<state.cells.length;i++){ (function(i){ var row = document.createElement('div'); row.className = 'stk-cellrow'; var num = document.createElement('span'); num.textContent = (i+1)+'칸'; var inp = document.createElement('input'); inp.type='text'; inp.value = state.cells[i] || ''; inp.addEventListener('input', function(){ state.cells[i] = inp.value; renderPage(PAPER[state.paper], state.cols, state.rows); queueHistory(); }); row.appendChild(num); row.appendChild(inp); box.appendChild(row); })(i); } } // ---- 이벤트 바인딩 ---- ['stkPaper','stkLW','stkLH','stkMX','stkMY','stkGX','stkGY','stkBorder','stkShape', 'stkFontSize','stkFontColor','stkBgColor','stkAlign','stkFontFamily','stkRotate'].forEach(function(id){ var el = $(id); el.addEventListener('input', recalc); el.addEventListener('change', recalc); }); $('stkBgImageFile').addEventListener('change', function(e){ var file = e.target.files && e.target.files[0]; if(!file) return; var reader = new FileReader(); reader.onload = function(ev){ state.bgImage = ev.target.result; renderPage(PAPER[state.paper], state.cols, state.rows); queueHistory(); toast('배경 이미지를 적용했어요'); }; reader.readAsDataURL(file); }); bindTap($('stkBgImageClear'), function(){ state.bgImage = null; $('stkBgImageFile').value = ''; renderPage(PAPER[state.paper], state.cols, state.rows); queueHistory(); toast('배경 이미지를 제거했어요'); }); $('stkSameText').addEventListener('input', function(){ state.sameText = $('stkSameText').value; renderPage(PAPER[state.paper], state.cols, state.rows); queueHistory(); }); bindTap($('stkModeSame'), function(){ state.mode='same'; $('stkModeSame').className='stk-btn on'; $('stkModeEach').className='stk-btn'; $('stkSameBox').style.display='block'; $('stkEachBox').style.display='none'; renderPage(PAPER[state.paper], state.cols, state.rows); queueHistory(); }); bindTap($('stkModeEach'), function(){ state.mode='each'; $('stkModeEach').className='stk-btn on'; $('stkModeSame').className='stk-btn'; $('stkSameBox').style.display='none'; $('stkEachBox').style.display='block'; renderPage(PAPER[state.paper], state.cols, state.rows); queueHistory(); }); bindTap($('stkApplyPaste'), function(){ var raw = $('stkPasteBox').value; if(!raw){ toast('붙여넣을 내용이 없어요'); return; } var lines = raw.split(/\r\n|\r|\n/).map(function(l){ return l.replace(/\t/g,' '); }); for(var i=0;i<state.cells.length;i++){ state.cells[i] = lines[i] !== undefined ? lines[i] : ''; } renderCellList(); renderPage(PAPER[state.paper], state.cols, state.rows); queueHistory(); toast('붙여넣은 내용을 ' + Math.min(lines.length,state.cells.length) + '개 칸에 적용했어요'); }); bindTap($('stkApplyCount'), function(){ var cols = Math.max(1, Math.round(parseFloat($('stkColsInput').value) || 1)); var rows = Math.max(1, Math.round(parseFloat($('stkRowsInput').value) || 1)); var paper = PAPER[$('stkPaper').value]; var mx = parseFloat($('stkMX').value) || 0; var my = parseFloat($('stkMY').value) || 0; var gx = parseFloat($('stkGX').value) || 0; var gy = parseFloat($('stkGY').value) || 0; var usableW = paper.w - mx*2; var usableH = paper.h - my*2; var lw = (usableW - gx*(cols-1)) / cols; var lh = (usableH - gy*(rows-1)) / rows; if(lw <= 0 || lh <= 0){ toast('여백/간격이 너무 커서 계산할 수 없어요. ②에서 줄여주세요'); return; } $('stkLW').value = lw.toFixed(1); $('stkLH').value = lh.toFixed(1); Array.prototype.forEach.call(presetGrid.children, function(c){ c.className='stk-btn'; }); recalc(); toast('가로 '+cols+'칸 × 세로 '+rows+'칸에 맞춰 라벨크기를 '+lw.toFixed(1)+'×'+lh.toFixed(1)+'mm로 계산했어요'); }); bindTap($('stkCopyFirst'), function(){ var first = state.cells[0] || ''; for(var i=0;i<state.cells.length;i++) state.cells[i] = first; renderCellList(); renderPage(PAPER[state.paper], state.cols, state.rows); queueHistory(); toast('1번 칸 내용을 전체에 복사했어요'); }); bindTap($('stkPrintBtn'), function(){ window.print(); }); bindTap($('stkSaveBtn'), function(){ saveLocal(); toast('저장했어요'); }); bindTap($('stkTopSaveBtn'), function(){ saveLocal(); toast('저장했어요'); }); bindTap($('stkShareBtn'), function(){ openShareModal(); }); // ---- 되돌리기 / 되살리기 (히스토리) ---- var historyStack = []; var historyIndex = -1; var historyTimer = null; var restoring = false; function snapshotNow(){ return JSON.stringify({ paper:state.paper, lw:state.lw, lh:state.lh, mx:state.mx, my:state.my, gx:state.gx, gy:state.gy, border:state.border, shape:state.shape, mode:state.mode, sameText:state.sameText, fontSize:state.fontSize, fontColor:state.fontColor, bgColor:state.bgColor, align:state.align, fontFamily:state.fontFamily, rotate:state.rotate, bgImage:state.bgImage, cells:state.cells }); } function queueHistory(){ if(restoring) return; clearTimeout(historyTimer); historyTimer = setTimeout(pushHistory, 650); } function pushHistory(){ var snap = snapshotNow(); if(historyStack.length && historyStack[historyIndex] === snap) return; historyStack = historyStack.slice(0, historyIndex+1); historyStack.push(snap); if(historyStack.length > 30){ historyStack.shift(); } historyIndex = historyStack.length - 1; updateHistoryBtns(); } function updateHistoryBtns(){ $('stkUndoBtn').disabled = historyIndex <= 0; $('stkRedoBtn').disabled = historyIndex >= historyStack.length - 1; } function restoreSnapshotStr(str){ if(!str) return; restoring = true; applyStateSnapshot(JSON.parse(str)); restoring = false; } bindTap($('stkUndoBtn'), function(){ if(historyIndex <= 0){ toast('더 되돌릴 내용이 없어요'); return; } historyIndex--; restoreSnapshotStr(historyStack[historyIndex]); updateHistoryBtns(); toast('되돌렸어요'); }); bindTap($('stkRedoBtn'), function(){ if(historyIndex >= historyStack.length - 1){ toast('되살릴 내용이 없어요'); return; } historyIndex++; restoreSnapshotStr(historyStack[historyIndex]); updateHistoryBtns(); toast('되살렸어요'); }); // ---- 공통: 저장된 값으로 화면/상태 동기화 ---- function applyStateSnapshot(saved){ if(!saved) return; $('stkPaper').value = saved.paper || 'A4'; $('stkLW').value = saved.lw || 70; $('stkLH').value = saved.lh || 30; $('stkMX').value = saved.mx || 8; $('stkMY').value = saved.my || 10; $('stkGX').value = saved.gx != null ? saved.gx : 2; $('stkGY').value = saved.gy != null ? saved.gy : 2; $('stkBorder').value = saved.border || 'thin'; $('stkShape').value = saved.shape || 'rect'; $('stkFontSize').value = saved.fontSize || 14; $('stkFontColor').value = saved.fontColor || '#111111'; $('stkBgColor').value = saved.bgColor || '#ffffff'; $('stkAlign').value = saved.align || 'center'; $('stkFontFamily').value = saved.fontFamily || 'system'; $('stkRotate').value = saved.rotate || 0; $('stkSameText').value = saved.sameText || ''; state.mode = saved.mode || 'same'; state.cells = saved.cells || []; state.bgImage = saved.bgImage || null; if(state.mode==='each'){ $('stkModeEach').className='stk-btn on'; $('stkModeSame').className='stk-btn'; $('stkSameBox').style.display='none'; $('stkEachBox').style.display='block'; } else { $('stkModeSame').className='stk-btn on'; $('stkModeEach').className='stk-btn'; $('stkSameBox').style.display='block'; $('stkEachBox').style.display='none'; } recalc(); } // ---- 공유 (LZString URL 파라미터 / TinyURL / QR) ---- var shareOpen = false; function buildShareURL(){ var exportObj = { paper:state.paper, lw:state.lw, lh:state.lh, mx:state.mx, my:state.my, gx:state.gx, gy:state.gy, border:state.border, shape:state.shape, mode:state.mode, sameText:state.sameText, fontSize:state.fontSize, fontColor:state.fontColor, bgColor:state.bgColor, align:state.align, fontFamily:state.fontFamily, rotate:state.rotate, cells:state.cells }; var packed = LZString.compressToEncodedURIComponent(JSON.stringify(exportObj)); var base = location.origin + location.pathname; return base + '?d=' + packed; } // ---- 파일로 저장 (리다이렉트 html, 이미지 포함) ---- var FILE_SAVE_LIMIT = 1800000; // 인코딩된 글자수 안전 상한 (구형 브라우저 대비) function buildFullPackedString(includeImage){ var exportObj = { paper:state.paper, lw:state.lw, lh:state.lh, mx:state.mx, my:state.my, gx:state.gx, gy:state.gy, border:state.border, shape:state.shape, mode:state.mode, sameText:state.sameText, fontSize:state.fontSize, fontColor:state.fontColor, bgColor:state.bgColor, align:state.align, fontFamily:state.fontFamily, rotate:state.rotate, cells:state.cells, bgImage: includeImage ? state.bgImage : null }; return LZString.compressToEncodedURIComponent(JSON.stringify(exportObj)); } function pad2(n){ return (n<10 ? '0' : '') + n; } function saveAsRedirectFile(){ var packed = buildFullPackedString(true); var imageDropped = false; if(state.bgImage && packed.length > FILE_SAVE_LIMIT){ packed = buildFullPackedString(false); imageDropped = true; } var redirectUrl = location.origin + location.pathname + '?d=' + packed; var now = new Date(); var y = String(now.getFullYear()).slice(2), m = pad2(now.getMonth()+1), d = pad2(now.getDate()); var hh = pad2(now.getHours()), mm = pad2(now.getMinutes()); var filename = '모두의스티커출력계산기_V0_' + y + m + d + '_' + hh + mm + '.html'; var html = '<p>저장된 내용을 불러오는 중이에요... 자동으로 이동하지 않으면 ' + '<a href="' + redirectUrl + '">여기를 눌러주세요</a>.</p>' + '<script>location.href=' + JSON.stringify(redirectUrl) + ';</' + 'script>'; try{ var blob = new Blob([html], {type:'text/html'}); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); setTimeout(function(){ URL.revokeObjectURL(url); }, 4000); toast(imageDropped ? '이미지가 너무 커서 빼고 저장했어요' : '파일로 저장했어요'); }catch(e){ var w = window.open(); if(w){ w.document.write(html); toast('새창에 파일 내용을 열었어요. 공유 메뉴로 저장해주세요'); } else{ toast('파일 저장에 실패했어요'); } } } bindTap($('stkSaveFileBtn'), saveAsRedirectFile); function renderQR(url){ var box = $('stkQRBox'); box.innerHTML = ''; try{ new QRCode(box, { text:url, width:180, height:180, correctLevel: QRCode.CorrectLevel.M }); }catch(e){} } function openShareModal(){ var url = buildShareURL(); $('stkShareUrlBox').value = url; renderQR(url); $('stkShareOverlay').className = 'stk-modal-overlay open'; document.body.classList.add('stk-popup-open'); document.body.style.overflow = 'hidden'; shareOpen = true; if(location.hash !== '#share'){ location.hash = 'share'; } } function closeShareModal(){ $('stkShareOverlay').className = 'stk-modal-overlay'; document.body.classList.remove('stk-popup-open'); document.body.style.overflow = ''; shareOpen = false; if(location.hash === '#share'){ location.hash = ''; } } window.addEventListener('hashchange', function(){ if(location.hash !== '#share' && shareOpen){ closeShareModal(); } }); bindTap($('stkShareCloseBtn'), closeShareModal); bindTap($('stkShareOverlay'), function(e){ if(e.target === $('stkShareOverlay')) closeShareModal(); }); bindTap($('stkShareCopyBtn'), function(){ var box = $('stkShareUrlBox'); box.removeAttribute('readonly'); box.focus(); box.select(); var ok = false; try{ ok = document.execCommand('copy'); }catch(e){} box.setAttribute('readonly','readonly'); if(navigator.clipboard && navigator.clipboard.writeText){ navigator.clipboard.writeText(box.value).then(function(){ toast('복사했어요'); }).catch(function(){}); } else if(ok){ toast('복사했어요'); } else { toast('길게 눌러서 직접 복사해주세요'); } }); bindTap($('stkShareTinyBtn'), function(){ var longUrl = $('stkShareUrlBox').value; toast('짧은 URL 만드는 중...'); fetch('https://tinyurl.com/api-create.php?url=' + encodeURIComponent(longUrl)) .then(function(r){ return r.text(); }) .then(function(short){ if(short && short.indexOf('http') === 0){ $('stkShareUrlBox').value = short; renderQR(short); toast('짧은 URL을 만들었어요'); } else { toast('짧은 URL 생성 실패, 원래 주소를 사용해주세요'); } }) .catch(function(){ toast('짧은 URL 생성 실패, 원래 주소를 사용해주세요'); }); }); bindTap($('stkQRSaveBtn'), function(){ var canvas = $('stkQRBox').querySelector('canvas'); var img = $('stkQRBox').querySelector('img'); var dataUrl = canvas ? canvas.toDataURL('image/png') : (img ? img.src : null); if(!dataUrl){ toast('QR코드를 먼저 생성해주세요'); return; } var w = window.open(); if(w){ w.document.write('<img src="'+dataUrl+'" style="width:100%;max-width:320px;">'); } else { toast('새창이 차단되었어요. 팝업 허용 후 다시 시도해주세요'); } }); // ---- 섹션 접기/펼치기 (범용) ---- function setupAccordion(headId, bodyId, arrowId, startOpen){ var isOpen = !!startOpen; var body = $(bodyId), arrow = $(arrowId); body.className = 'stk-accordion-body' + (isOpen ? ' open' : ''); arrow.textContent = isOpen ? '▲' : '▼'; bindTap($(headId), function(){ isOpen = !isOpen; body.className = 'stk-accordion-body' + (isOpen ? ' open' : ''); arrow.textContent = isOpen ? '▲' : '▼'; }); } setupAccordion('stkHead1','stkBody1','stkArrow1', true); setupAccordion('stkHead2','stkBody2','stkArrow2', false); setupAccordion('stkHead3','stkBody3','stkArrow3', false); setupAccordion('stkGuideHead','stkGuideBody','stkGuideArrow', false); // 말풍선(버튼 설명) - 터치/클릭 시 잠깐 표시 Array.prototype.forEach.call(document.querySelectorAll('.stk-tip'), function(tip){ var btn = tip.querySelector('.stk-btn'); bindTap(btn, function(){ tip.className = 'stk-tip stk-show-bubble'; setTimeout(function(){ tip.className='stk-tip'; }, 1800); }); }); // ---- 자동저장 (4초) / localStorage ---- var STORAGE_KEY = 'stk_sticker_v0'; function saveLocal(){ try{ localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); }catch(e){} } function loadLocal(){ try{ var raw = localStorage.getItem(STORAGE_KEY); if(!raw) return false; var saved = JSON.parse(raw); if(!saved) return false; applyStateSnapshot(saved); return true; }catch(e){ return false; } } function loadFromURL(){ try{ var qs = new URLSearchParams(location.search); var d = qs.get('d'); if(!d) return false; var json = LZString.decompressFromEncodedURIComponent(d); if(!json) return false; var saved = JSON.parse(json); applyStateSnapshot(saved); toast('공유된 내용을 불러왔어요'); return true; }catch(e){ return false; } } restoring = true; var loaded = loadFromURL(); if(!loaded) loaded = loadLocal(); if(!loaded) recalc(); restoring = false; pushHistory(); setInterval(saveLocal, 4000); })(); </script> 모두의계산기 최매슨생 https://0-1.kr/37 https://0-1.kr/37#entry37comment Thu, 1 Apr 2021 17:32:41 +0900 https://0-1.kr/36 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>모두의 싸인 제작기</title> <style> .snmk36-root, .snmk36-root * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .snmk36-root { --ink: #23211d; --paper: #ede7da; --paper-deep: #e2dac7; --seal: #a5312a; --seal-deep: #822721; --line: #c9beac; --muted: #6b6558; font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; background: var(--paper); background-image: radial-gradient(circle at 20% 15%, rgba(165,49,42,0.05), transparent 40%), radial-gradient(circle at 85% 80%, rgba(35,33,29,0.04), transparent 45%); color: var(--ink); min-height: 100vh; padding: 28px 16px 60px; } .snmk36-wrap { max-width: 640px; margin: 0 auto; } .snmk36-head { margin-bottom: 22px; position: relative; } .snmk36-eyebrow { font-family: Georgia, "Nanum Myeongjo", serif; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--seal); font-weight: 700; margin-bottom: 6px; } .snmk36-title { font-family: "Nanum Myeongjo", Georgia, serif; font-size: 30px; font-weight: 800; line-height: 1.25; margin: 0 0 8px; letter-spacing: -0.01em; } .snmk36-title .snmk36-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 2px solid var(--seal); border-radius: 50%; color: var(--seal); font-size: 14px; font-weight: 900; vertical-align: middle; margin-right: 6px; transform: rotate(-6deg); } .snmk36-sub { font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 46em; } .snmk36-tabs { display: flex; gap: 8px; margin: 22px 0 16px; border-bottom: 1px solid var(--line); } .snmk36-tab { flex: 1; text-align: center; padding: 12px 8px 13px; font-size: 14.5px; font-weight: 700; color: var(--muted); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; letter-spacing: -0.01em; } .snmk36-tab.snmk36-active { color: var(--seal); border-bottom-color: var(--seal); } .snmk36-panel { display: none; } .snmk36-panel.snmk36-active { display: block; } .snmk36-card { background: #faf7ee; border: 1px solid var(--line); border-radius: 3px; padding: 18px; box-shadow: 0 1px 0 rgba(35,33,29,0.03); } .snmk36-card-label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; } .snmk36-label-status { font-weight: 400; margin-left: 6px; } .snmk36-mini-btns { display: flex; gap: 6px; } .snmk36-btn-mini { padding: 4px 9px; border-radius: 20px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; } .snmk36-btn-mini:active { transform: translateY(1px); } .snmk36-btns-main .snmk36-btn { padding: 15px 10px; font-size: 14.5px; } .snmk36-padwrap { position: relative; } .snmk36-pad { width: 100%; height: 220px; display: block; border-radius: 2px; touch-action: none; cursor: crosshair; background-color: #ffffff; background-image: linear-gradient(to bottom, transparent 88%, var(--seal) 88%, var(--seal) calc(88% + 1px), transparent calc(88% + 1px)); border: 1px dashed var(--line); } .snmk36-pad-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 13px; color: #b9b2a0; pointer-events: none; letter-spacing: 0.02em; } .snmk36-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; } .snmk36-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); flex: 1; min-width: 110px; } .snmk36-field input[type="range"] { width: 100%; accent-color: var(--seal); } .snmk36-field select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 2px; background: #fff; font-size: 13px; color: var(--ink); } .snmk36-swatches { display: flex; gap: 6px; } .snmk36-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); } .snmk36-swatch.snmk36-selected { border-color: var(--ink); } .snmk36-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .snmk36-btn { flex: 1; min-width: 88px; padding: 11px 10px; border-radius: 2px; border: 1px solid var(--ink); background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: -0.01em; } .snmk36-btn:active { transform: translateY(1px); } .snmk36-btn.snmk36-ghost { border-color: var(--line); color: var(--muted); font-weight: 600; } .snmk36-btn.snmk36-primary { background: var(--seal); border-color: var(--seal); color: #fff; } .snmk36-btn.snmk36-primary:hover { background: var(--seal-deep); } .snmk36-note { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.6; } /* stamp preview */ .snmk36-stamp-stage { display: flex; align-items: center; justify-content: center; height: 220px; background: linear-gradient(45deg, #f3efe4 25%, transparent 25%), linear-gradient(-45deg, #f3efe4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f3efe4 75%), linear-gradient(-45deg, transparent 75%, #f3efe4 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px; background-color: #fff; border: 1px dashed var(--line); border-radius: 2px; } .snmk36-stamp-stage canvas { max-width: 100%; max-height: 100%; } .snmk36-out-size { font-size: 12px; color: var(--muted); text-align: right; margin-top: 6px; } .snmk36-out-size b { color: var(--ink); } .snmk36-btn-trim { width: 100%; padding: 11px; margin-top: 14px; border-radius: 2px; border: 1px dashed var(--seal); background: #fbf1ea; color: var(--seal-deep); font-size: 13px; font-weight: 700; cursor: pointer; } .snmk36-btn-trim:active { transform: translateY(1px); } .snmk36-trim-preview { margin-top: 10px; display: none; align-items: center; justify-content: center; min-height: 110px; border: 1px dashed var(--line); border-radius: 2px; padding: 10px; background-color: #fff; background-image: linear-gradient(45deg, #f3efe4 25%, transparent 25%), linear-gradient(-45deg, #f3efe4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f3efe4 75%), linear-gradient(-45deg, transparent 75%, #f3efe4 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px; } .snmk36-trim-preview.snmk36-active { display: flex; } .snmk36-trim-preview canvas { max-width: 100%; max-height: 190px; } .snmk36-trim-note { font-size: 11px; color: var(--seal-deep); margin-top: 6px; text-align: center; } .snmk36-foot { margin-top: 26px; font-size: 11.5px; color: var(--muted); text-align: center; } </style> </head> <body> <div class="snmk36-root"> <div class="snmk36-wrap"> <div class="snmk36-head"> <div class="snmk36-eyebrow">0-1.kr/36</div> <h1 class="snmk36-title"><span class="snmk36-mark">印</span>모두의 싸인 제작기</h1> <p class="snmk36-sub">종이에 서명해서 사진 찍고 배경 지우던 그 과정을 없앴어요. 손가락이나 마우스로 바로 서명하면 배경이 투명한 이미지로 저장됩니다. 이름 도장도 함께 만들 수 있어요.</p> </div> <div class="snmk36-tabs"> <button class="snmk36-tab snmk36-active" data-tab="sign">서명 만들기</button> <button class="snmk36-tab" data-tab="stamp">도장 만들기</button> </div> <!-- 서명 패널 --> <div class="snmk36-panel snmk36-active" id="snmk36-panel-sign"> <div class="snmk36-card"> <div class="snmk36-card-label"> <span>서명 캔버스<span id="snmk36-sign-status" class="snmk36-label-status">비어 있음</span></span> <span class="snmk36-mini-btns"> <button class="snmk36-btn-mini" id="snmk36-sign-undo">되돌리기</button> <button class="snmk36-btn-mini" id="snmk36-sign-clear">지우기</button> </span> </div> <div class="snmk36-padwrap"> <canvas class="snmk36-pad" id="snmk36-sign-canvas"></canvas> <div class="snmk36-pad-hint" id="snmk36-sign-hint">여기에 서명해 주세요</div> </div> <div class="snmk36-row"> <div class="snmk36-field"> <span>펜 색</span> <div class="snmk36-swatches" id="snmk36-sign-colors"> <span class="snmk36-swatch snmk36-selected" style="background:#1c1c1c" data-color="#1c1c1c"></span> <span class="snmk36-swatch" style="background:#1c3d8f" data-color="#1c3d8f"></span> <span class="snmk36-swatch" style="background:#a5312a" data-color="#a5312a"></span> </div> </div> <div class="snmk36-field"> <span>펜 굵기 <b id="snmk36-sign-width-val">3</b>px</span> <input type="range" id="snmk36-sign-width" min="1" max="8" value="3" step="1"> </div> </div> <button class="snmk36-btn-trim" id="snmk36-sign-trim">저장 전 미리보기(여분제거)</button> <div class="snmk36-trim-preview" id="snmk36-sign-trim-preview"> <canvas id="snmk36-sign-trim-canvas"></canvas> </div> <div class="snmk36-btns snmk36-btns-main"> <button class="snmk36-btn snmk36-primary" id="snmk36-sign-save-png">PNG 저장 (투명)</button> <button class="snmk36-btn" id="snmk36-sign-save-jpg">JPG 저장 (흰배경)</button> </div> <div class="snmk36-row" style="margin-top:16px;"> <div class="snmk36-field"> <span>저장 크기 <b id="snmk36-sign-scale-val">100</b>%</span> <input type="range" id="snmk36-sign-scale" min="30" max="100" value="100" step="5"> </div> <div class="snmk36-field"> <span>JPG 화질 <b id="snmk36-sign-quality-val">80</b>%</span> <input type="range" id="snmk36-sign-quality" min="30" max="100" value="80" step="5"> </div> </div> <div class="snmk36-out-size">예상 용량 <b id="snmk36-sign-filesize">-</b></div> <div class="snmk36-note">TIP · 저장 크기를 낮추면 파일 용량이 작아져 온라인 서식에 첨부하기 편해요. 도장처럼 도장란이 작은 서류는 60~70% 정도면 충분해요.</div> </div> </div> <!-- 도장 패널 --> <div class="snmk36-panel" id="snmk36-panel-stamp"> <div class="snmk36-card"> <div class="snmk36-card-label"><span>도장 미리보기</span></div> <div class="snmk36-stamp-stage"> <canvas id="snmk36-stamp-canvas" width="300" height="300"></canvas> </div> <div class="snmk36-row"> <div class="snmk36-field" style="flex:2; min-width:160px;"> <span>이름 (한글·한자 모두 가능, 2~4자 권장)</span> <input type="text" id="snmk36-stamp-name" maxlength="8" value="洪吉童" style="padding:8px; border:1px solid var(--line); border-radius:2px; font-size:14px;"> </div> <div class="snmk36-field"> <span>모양</span> <select id="snmk36-stamp-shape"> <option value="circle">원형</option> <option value="square">사각</option> <option value="rounded">둥근 사각</option> </select> </div> </div> <div class="snmk36-row"> <div class="snmk36-field"> <span>서체</span> <select id="snmk36-stamp-font"> <option value="'Nanum Myeongjo', serif">나눔명조</option> <option value="'Nanum Gothic', sans-serif">나눔고딕</option> <option value="'Song Myung', serif">송명체 (전통 인감풍)</option> <option value="'Black Han Sans', sans-serif">black han sans (두꺼운 도장체)</option> <option value="'Do Hyeon', sans-serif">도현체</option> <option value="'Nanum Brush Script', cursive">나눔붓글씨</option> <option value="'Nanum Pen Script', cursive">나눔손글씨</option> <option value="'East Sea Dokdo', cursive">동해독도체</option> </select> </div> <div class="snmk36-field"> <span>도장 색</span> <div class="snmk36-swatches" id="snmk36-stamp-colors"> <span class="snmk36-swatch snmk36-selected" style="background:#a5312a" data-color="#a5312a"></span> <span class="snmk36-swatch" style="background:#1c1c1c" data-color="#1c1c1c"></span> <span class="snmk36-swatch" style="background:#1c3d8f" data-color="#1c3d8f"></span> </div> </div> </div> <div class="snmk36-row"> <div class="snmk36-field"> <span>테두리 두께 <b id="snmk36-stamp-border-val">8</b>px</span> <input type="range" id="snmk36-stamp-border" min="0" max="16" value="8" step="1"> </div> <div class="snmk36-field"> <span>글자 배치</span> <select id="snmk36-stamp-layout"> <option value="row">가로</option> <option value="col">세로</option> </select> </div> </div> <button class="snmk36-btn-trim" id="snmk36-stamp-trim">저장 전 미리보기(여분제거)</button> <div class="snmk36-trim-preview" id="snmk36-stamp-trim-preview"> <canvas id="snmk36-stamp-trim-canvas"></canvas> </div> <div class="snmk36-btns"> <button class="snmk36-btn snmk36-primary" id="snmk36-stamp-save-png">PNG 저장 (투명)</button> <button class="snmk36-btn" id="snmk36-stamp-save-jpg">JPG 저장 (흰배경)</button> </div> <div class="snmk36-note">TIP · 한자는 나눔명조·나눔고딕·송명체·black han sans·도현체에서 정상적으로 표시돼요. 손글씨/붓글씨 계열은 한자 글꼴이 없어 시스템 기본 서체로 대체될 수 있어요.<br>실제 인감·관인처럼 보이는 기관명, 로고, 특정 서체 그대로 베끼기는 피하고 이름 텍스트만으로 구성돼요. 개인 서류용 약식 도장 용도로만 사용해 주세요.</div> </div> </div> <div class="snmk36-foot">0-1.kr/36 · 모두의 싸인 제작기 — 서명은 저장되지 않고 브라우저에서만 처리됩니다.</div> </div> </div> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@700;800&family=Nanum+Gothic:wght@700&family=Nanum+Pen+Script&family=Nanum+Brush+Script&family=Song+Myung&family=Black+Han+Sans&family=Do+Hyeon&family=East+Sea+Dokdo&display=swap" rel="stylesheet"> <script> (function () { "use strict"; /* ---------- 탭 전환 ---------- */ var tabs = document.querySelectorAll(".snmk36-tab"); var panels = { sign: document.getElementById("snmk36-panel-sign"), stamp: document.getElementById("snmk36-panel-stamp") }; for (var t = 0; t < tabs.length; t++) { tabs[t].addEventListener("click", (function (el) { return function () { for (var i = 0; i < tabs.length; i++) { tabs[i].className = "snmk36-tab"; } el.className = "snmk36-tab snmk36-active"; panels.sign.className = "snmk36-panel"; panels.stamp.className = "snmk36-panel"; panels[el.getAttribute("data-tab")].className = "snmk36-panel snmk36-active"; }; })(tabs[t])); } /* ---------- 서명 캔버스 ---------- */ var signCanvas = document.getElementById("snmk36-sign-canvas"); var signCtx = signCanvas.getContext("2d"); var signHint = document.getElementById("snmk36-sign-hint"); var signStatus = document.getElementById("snmk36-sign-status"); var signDrawing = false; var signHasInk = false; var signLast = null; var signColor = "#1c1c1c"; var signWidth = 3; var signHistory = []; var signTrimmedCanvas = null; function getBBox(canvas) { var w = canvas.width, h = canvas.height; var ctx2 = canvas.getContext("2d"); var data; try { data = ctx2.getImageData(0, 0, w, h).data; } catch (e) { return null; } var minX = w, minY = h, maxX = -1, maxY = -1; for (var y = 0; y < h; y++) { var rowStart = y * w * 4; for (var x = 0; x < w; x++) { var a = data[rowStart + x * 4 + 3]; if (a > 10) { if (x < minX) { minX = x; } if (x > maxX) { maxX = x; } if (y < minY) { minY = y; } if (y > maxY) { maxY = y; } } } } if (maxX < 0) { return null; } return { x: minX, y: minY, w: (maxX - minX + 1), h: (maxY - minY + 1) }; } function buildTrimmedCanvas(sourceCanvas, paddingRatio) { var box = getBBox(sourceCanvas); if (!box) { return null; } var pad = Math.round(Math.max(box.w, box.h) * paddingRatio); var sx = Math.max(0, box.x - pad); var sy = Math.max(0, box.y - pad); var ex = Math.min(sourceCanvas.width, box.x + box.w + pad); var ey = Math.min(sourceCanvas.height, box.y + box.h + pad); var out = document.createElement("canvas"); out.width = ex - sx; out.height = ey - sy; var octx = out.getContext("2d"); octx.drawImage(sourceCanvas, sx, sy, out.width, out.height, 0, 0, out.width, out.height); return out; } function showTrimPreview(wrap, previewCanvas, trimmed) { previewCanvas.width = trimmed.width; previewCanvas.height = trimmed.height; var pctx = previewCanvas.getContext("2d"); pctx.clearRect(0, 0, trimmed.width, trimmed.height); pctx.drawImage(trimmed, 0, 0); wrap.className = "snmk36-trim-preview snmk36-active"; } function hideTrimPreview(wrap) { wrap.className = "snmk36-trim-preview"; } function resizeSignCanvas() { var rect = signCanvas.getBoundingClientRect(); var dpr = window.devicePixelRatio || 1; var prevData = null; if (signCanvas.width > 0) { try { prevData = signCtx.getImageData(0, 0, signCanvas.width, signCanvas.height); } catch (e) {} } signCanvas.width = rect.width * dpr; signCanvas.height = rect.height * dpr; signCtx.setTransform(dpr, 0, 0, dpr, 0, 0); signCtx.lineCap = "round"; signCtx.lineJoin = "round"; } resizeSignCanvas(); window.addEventListener("resize", function () { signHistory = []; resizeSignCanvas(); }); function getPos(e, canvas) { var rect = canvas.getBoundingClientRect(); var x, y; if (e.touches && e.touches.length > 0) { x = e.touches[0].clientX - rect.left; y = e.touches[0].clientY - rect.top; } else { x = e.clientX - rect.left; y = e.clientY - rect.top; } return { x: x, y: y }; } function pushHistory() { try { signHistory.push(signCtx.getImageData(0, 0, signCanvas.width, signCanvas.height)); if (signHistory.length > 15) { signHistory.shift(); } } catch (e) {} } function signStart(e) { e.preventDefault(); pushHistory(); signDrawing = true; signLast = getPos(e, signCanvas); signHint.style.display = "none"; if (signTrimmedCanvas) { signTrimmedCanvas = null; hideTrimPreview(document.getElementById("snmk36-sign-trim-preview")); } } function signMove(e) { if (!signDrawing) { return; } e.preventDefault(); var pos = getPos(e, signCanvas); signCtx.strokeStyle = signColor; signCtx.lineWidth = signWidth; signCtx.beginPath(); signCtx.moveTo(signLast.x, signLast.y); signCtx.lineTo(pos.x, pos.y); signCtx.stroke(); signLast = pos; signHasInk = true; signStatus.textContent = "작성 중"; } function signEnd(e) { if (signDrawing) { e && e.preventDefault(); } signDrawing = false; if (signHasInk) { signStatus.textContent = "서명 완료"; } } signCanvas.addEventListener("mousedown", signStart); signCanvas.addEventListener("mousemove", signMove); window.addEventListener("mouseup", signEnd); signCanvas.addEventListener("touchstart", signStart, { passive: false }); signCanvas.addEventListener("touchmove", signMove, { passive: false }); signCanvas.addEventListener("touchend", signEnd, { passive: false }); var signColorSwatches = document.querySelectorAll("#snmk36-sign-colors .snmk36-swatch"); for (var sc = 0; sc < signColorSwatches.length; sc++) { signColorSwatches[sc].addEventListener("click", (function (el) { return function () { for (var i = 0; i < signColorSwatches.length; i++) { signColorSwatches[i].className = "snmk36-swatch"; } el.className = "snmk36-swatch snmk36-selected"; signColor = el.getAttribute("data-color"); }; })(signColorSwatches[sc])); } var signWidthInput = document.getElementById("snmk36-sign-width"); var signWidthVal = document.getElementById("snmk36-sign-width-val"); signWidthInput.addEventListener("input", function () { signWidth = parseInt(signWidthInput.value, 10); signWidthVal.textContent = signWidthInput.value; }); document.getElementById("snmk36-sign-clear").addEventListener("click", function () { pushHistory(); signCtx.clearRect(0, 0, signCanvas.width, signCanvas.height); signHasInk = false; signHint.style.display = "block"; signStatus.textContent = "비어 있음"; signTrimmedCanvas = null; hideTrimPreview(document.getElementById("snmk36-sign-trim-preview")); refreshSignPreviewSize(); }); document.getElementById("snmk36-sign-undo").addEventListener("click", function () { if (signHistory.length === 0) { return; } var data = signHistory.pop(); signCtx.putImageData(data, 0, 0); signTrimmedCanvas = null; hideTrimPreview(document.getElementById("snmk36-sign-trim-preview")); refreshSignPreviewSize(); }); var signScaleInput = document.getElementById("snmk36-sign-scale"); var signScaleVal = document.getElementById("snmk36-sign-scale-val"); var signQualityInput = document.getElementById("snmk36-sign-quality"); var signQualityVal = document.getElementById("snmk36-sign-quality-val"); var signFilesizeLabel = document.getElementById("snmk36-sign-filesize"); function estimateSize(dataUrl) { var base64 = dataUrl.split(",")[1] || ""; var bytes = base64.length * 0.75; if (bytes > 1024 * 1024) { return (bytes / (1024 * 1024)).toFixed(2) + " MB"; } return Math.round(bytes / 1024) + " KB"; } function buildExportCanvas(fillWhite) { var source = signTrimmedCanvas || signCanvas; var scale = parseInt(signScaleInput.value, 10) / 100; var out = document.createElement("canvas"); out.width = Math.max(1, Math.round(source.width * scale)); out.height = Math.max(1, Math.round(source.height * scale)); var octx = out.getContext("2d"); if (fillWhite) { octx.fillStyle = "#ffffff"; octx.fillRect(0, 0, out.width, out.height); } octx.drawImage(source, 0, 0, out.width, out.height); return out; } function refreshSignPreviewSize() { var out = buildExportCanvas(false); var url = out.toDataURL("image/png"); signFilesizeLabel.textContent = estimateSize(url); } signScaleInput.addEventListener("input", function () { signScaleVal.textContent = signScaleInput.value; refreshSignPreviewSize(); }); signQualityInput.addEventListener("input", function () { signQualityVal.textContent = signQualityInput.value; }); document.getElementById("snmk36-sign-trim").addEventListener("click", function () { if (!signHasInk) { alert("먼저 서명을 해 주세요."); return; } var trimmed = buildTrimmedCanvas(signCanvas, 0.04); if (!trimmed) { alert("인식할 서명이 없어요."); return; } signTrimmedCanvas = trimmed; showTrimPreview(document.getElementById("snmk36-sign-trim-preview"), document.getElementById("snmk36-sign-trim-canvas"), trimmed); refreshSignPreviewSize(); }); function download(dataUrl, filename) { var a = document.createElement("a"); a.href = dataUrl; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); } document.getElementById("snmk36-sign-save-png").addEventListener("click", function () { if (!signHasInk) { alert("먼저 서명을 해 주세요."); return; } var out = buildExportCanvas(false); download(out.toDataURL("image/png"), "signature.png"); }); document.getElementById("snmk36-sign-save-jpg").addEventListener("click", function () { if (!signHasInk) { alert("먼저 서명을 해 주세요."); return; } var out = buildExportCanvas(true); var q = parseInt(signQualityInput.value, 10) / 100; download(out.toDataURL("image/jpeg", q), "signature.jpg"); }); /* ---------- 도장 캔버스 ---------- */ var stampCanvas = document.getElementById("snmk36-stamp-canvas"); var stampCtx = stampCanvas.getContext("2d"); var stampColor = "#a5312a"; var stampTrimmedCanvas = null; var stampColorSwatches = document.querySelectorAll("#snmk36-stamp-colors .snmk36-swatch"); for (var kc = 0; kc < stampColorSwatches.length; kc++) { stampColorSwatches[kc].addEventListener("click", (function (el) { return function () { for (var i = 0; i < stampColorSwatches.length; i++) { stampColorSwatches[i].className = "snmk36-swatch"; } el.className = "snmk36-swatch snmk36-selected"; stampColor = el.getAttribute("data-color"); drawStamp(); }; })(stampColorSwatches[kc])); } var stampNameInput = document.getElementById("snmk36-stamp-name"); var stampShapeInput = document.getElementById("snmk36-stamp-shape"); var stampFontInput = document.getElementById("snmk36-stamp-font"); var stampBorderInput = document.getElementById("snmk36-stamp-border"); var stampBorderVal = document.getElementById("snmk36-stamp-border-val"); var stampLayoutInput = document.getElementById("snmk36-stamp-layout"); function drawStamp() { if (stampTrimmedCanvas) { stampTrimmedCanvas = null; var stampTrimWrap = document.getElementById("snmk36-stamp-trim-preview"); if (stampTrimWrap) { hideTrimPreview(stampTrimWrap); } } var W = stampCanvas.width, H = stampCanvas.height; stampCtx.clearRect(0, 0, W, H); var name = (stampNameInput.value || "").trim() || "이름"; var shape = stampShapeInput.value; var borderW = parseInt(stampBorderInput.value, 10); var layout = stampLayoutInput.value; var pad = 18; stampCtx.save(); stampCtx.strokeStyle = stampColor; stampCtx.lineWidth = borderW; stampCtx.fillStyle = "transparent"; if (borderW > 0) { if (shape === "circle") { stampCtx.beginPath(); stampCtx.arc(W / 2, H / 2, (W - pad * 2 - borderW) / 2, 0, Math.PI * 2); stampCtx.stroke(); } else if (shape === "square") { stampCtx.strokeRect(pad + borderW / 2, pad + borderW / 2, W - pad * 2 - borderW, H - pad * 2 - borderW); } else { roundRectStroke(stampCtx, pad + borderW / 2, pad + borderW / 2, W - pad * 2 - borderW, H - pad * 2 - borderW, 24); } } stampCtx.fillStyle = stampColor; stampCtx.textAlign = "center"; stampCtx.textBaseline = "middle"; var chars = name.split(""); var n = chars.length; if (layout === "col" && n > 1) { var fontSizeCol = Math.min(70, (H - pad * 2 - borderW * 2 - 20) / n); stampCtx.font = "700 " + fontSizeCol + "px " + stampFontInput.value; var totalH = fontSizeCol * n; var startY = H / 2 - totalH / 2 + fontSizeCol / 2; for (var i = 0; i < n; i++) { stampCtx.fillText(chars[i], W / 2, startY + i * fontSizeCol); } } else { var fontSizeRow = n <= 2 ? 78 : n === 3 ? 60 : 46; stampCtx.font = "700 " + fontSizeRow + "px " + stampFontInput.value; stampCtx.fillText(name, W / 2, H / 2 + 4); } stampCtx.restore(); } function roundRectStroke(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); ctx.stroke(); } [stampNameInput, stampShapeInput, stampFontInput, stampLayoutInput].forEach(function (el) { el.addEventListener("input", drawStamp); el.addEventListener("change", drawStamp); }); stampBorderInput.addEventListener("input", function () { stampBorderVal.textContent = stampBorderInput.value; drawStamp(); }); document.getElementById("snmk36-stamp-trim").addEventListener("click", function () { var trimmed = buildTrimmedCanvas(stampCanvas, 0.03); if (!trimmed) { alert("도장 이미지를 먼저 생성해 주세요."); return; } stampTrimmedCanvas = trimmed; showTrimPreview(document.getElementById("snmk36-stamp-trim-preview"), document.getElementById("snmk36-stamp-trim-canvas"), trimmed); }); document.getElementById("snmk36-stamp-save-png").addEventListener("click", function () { var source = stampTrimmedCanvas || stampCanvas; download(source.toDataURL("image/png"), "stamp.png"); }); document.getElementById("snmk36-stamp-save-jpg").addEventListener("click", function () { var source = stampTrimmedCanvas || stampCanvas; var out = document.createElement("canvas"); out.width = source.width; out.height = source.height; var octx = out.getContext("2d"); octx.fillStyle = "#ffffff"; octx.fillRect(0, 0, out.width, out.height); octx.drawImage(source, 0, 0); download(out.toDataURL("image/jpeg", 0.9), "stamp.jpg"); }); /* 폰트 로드 후 다시 그리기 */ if (document.fonts && document.fonts.ready) { document.fonts.ready.then(drawStamp); } drawStamp(); refreshSignPreviewSize(); }()); </script> </body> </html> 모두의계산기 서명 싸인 최매슨생 https://0-1.kr/36 https://0-1.kr/36#entry36comment Tue, 5 Jan 2021 15:16:47 +0900 https://0-1.kr/35 <!-- 저전력 노트계산기_V12 — 티스토리 게시용 (body-only, 스크립트 base64 로더 적용) 1) html/head/body 래퍼 태그 없음 — 전체 내용을 티스토리 HTML 편집기에 그대로 붙여넣으세요. 2) 다음 개정판은 V13으로 이어집니다. 3) 삭제(전체/선택/본페이지)는 항상 커스텀 팝업으로 한번 더 확인 후 진행됩니다 (native confirm/alert은 전체모드를 깨서 사용하지 않음). 4) 메인 스크립트는 base64로 인코딩돼 있습니다 — 직접 수정하지 말고 "저전력노트_시안_V12.html"을 고친 뒤 재생성하세요. --> <style> :root{ /* 노트 용지 색상 — 테마에 따라 JS가 바꿔줌 (필기 영역 전용) */ --bg:#000000; --text:#e7e2d6; --line:#2a2a2a; --accent:#8fa6c9; --font-size: 19px; --line-pitch: 33px; /* 앱 크롬(설정/랜딩/전체모드 메뉴) — 항상 고정, 테마와 무관 */ --chrome-bg:#121218; --chrome-text:#eae7df; --chrome-accent:#6fa8dc; --chrome-line:rgba(255,255,255,.16); --bar-bg: rgba(20,20,20,.92); /* 타이틀바 전용 — 밝은 색 고정 */ --tb-bg:#f7f8fa; --tb-text:#1c1e22; --tb-blue:#2f6fd6; --tb-line:rgba(0,0,0,.08); } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;} html{margin:0;padding:0;} body{margin:0;padding:0;} /* ---------- 위젯 컨테이너 ---------- */ #ln01App{ position:relative; width:100%; max-width:480px; margin:0 auto; height:auto; border-radius:16px; overflow:hidden; box-shadow:0 2px 18px rgba(0,0,0,.25); font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif; color:var(--chrome-text); background:var(--chrome-bg); display:flex; flex-direction:column; user-select:none; } #ln01App.ln01-fs{ position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; max-width:none; margin:0; border-radius:0; box-shadow:none; z-index:999999; } /* ---------- 타이틀바 (항상 표시, 밝은색, 고정) ---------- */ #titlebar{ flex:none; background:var(--tb-bg); color:var(--tb-text); padding:10px 12px 8px; z-index:40; position:relative; } #ln01App.ln01-fs #titlebar{ display:none; } #tb-toprow{ display:flex; justify-content:space-between; align-items:flex-start; } #tb-title{ font-size:15px; font-weight:800; letter-spacing:-.01em; } #tb-tagline{ font-size:10px; color:var(--tb-blue); margin-top:2px; font-weight:600; } #tb-right{ display:flex; gap:6px; flex:none; } .tbIcon{ width:32px; height:32px; border-radius:9px; border:1px solid var(--tb-line); background:#fff; font-size:15px; display:flex; align-items:center; justify-content:center; position:relative; } .tbIcon.on{ background:var(--tb-blue); color:#fff; } #tbBatteryTop{ font-size:9.5px; color:#666; margin-top:3px; text-align:right; white-space:nowrap; } /* 전체모드 전용 미니 상단바 — 평소엔 숨김, 전체모드일 때만 표시 */ #fsTopBar{ display:none; flex:none; align-items:center; justify-content:space-between; gap:8px; background:var(--bar-bg); color:var(--chrome-text); padding:6px 10px; z-index:40; } #ln01App.ln01-fs #fsTopBar{ display:flex; } #fsBatteryTop{ font-size:11.5px; opacity:.85; white-space:nowrap; } #fsTopBar .tbIcon{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:var(--chrome-text); } #fsLowPowerBtn{ width:auto; border-radius:14px; padding:0 10px; font-size:11.5px; font-weight:700; } #lowPowerBubble{ display:none; position:absolute; top:38px; right:0; width:220px; z-index:60; background:#fff; color:#1c1c1c; font-size:11px; line-height:1.55; border-radius:10px; padding:10px 12px; box-shadow:0 4px 14px rgba(0,0,0,.35); } #lowPowerBubble:before{ content:""; position:absolute; top:-6px; right:14px; width:12px; height:12px; background:#fff; transform:rotate(45deg); } #lowPowerBubble.show{ display:block; } #fsTopBar .tbIcon.on{ background:var(--chrome-accent); color:#0a0a0a; } /* ---------- viewport ---------- */ #viewport{position:relative;} .view{display:none;} .view.active{display:flex; flex-direction:column;} /* 전체모드일 때만 뷰포트를 화면 높이에 고정하고, 뷰를 절대위치로 꽉 채움 */ #ln01App.ln01-fs #viewport{flex:1; overflow:hidden;} #ln01App.ln01-fs .view{position:absolute; inset:0;} /* line/grid backgrounds applied per-pane; --line-pitch는 폰트 크기에 맞춰 JS가 갱신 */ .pane{ flex:1; min-height:0; padding:14px 16px; outline:none; overflow-y:auto; font-size:var(--font-size); line-height:1.75; color:var(--text); background-color:var(--bg); background-repeat:repeat; -webkit-user-select:text; user-select:text; background-position: 0 2px; } .pane[data-empty]:empty:before{content:attr(data-empty); opacity:.35;} #v1-header, #v1-colheaders, #v1-summaryhead{ background-color:var(--bg); } /* View0: 랜딩 */ #view0{ padding:14px 16px 20px; overflow-y:auto; background:var(--chrome-bg); color:var(--chrome-text); -webkit-overflow-scrolling:touch; touch-action:pan-y; overscroll-behavior:contain; } #ln0-guideWrap{ display:flex; justify-content:center; margin:6px 0 12px; } #ln0-guide{ width:54%; max-width:220px; border:2px solid var(--chrome-line); border-radius:8px; overflow:hidden; font-size:10.5px; background:var(--bg); color:var(--text); } #ln0-guide .ghead{ display:flex; justify-content:space-between; padding:6px 8px; border-bottom:2px solid var(--line); font-weight:700; } #ln0-guide .gcols{ display:flex; } #ln0-guide .gcues{ flex:0 0 26%; border-right:2px solid var(--line); padding:6px 7px; min-height:150px; background-repeat:repeat; } #ln0-guide .gnotes{ flex:1; padding:6px 7px; min-height:150px; background-repeat:repeat; } #ln0-guide .gsum{ padding:7px 8px; border-top:2px solid var(--line); text-decoration:underline; font-weight:700; font-size:10px; min-height:34px; background-repeat:repeat; } #pageOverview{ width:78%; max-width:300px; margin:0 auto 10px; font-size:11px; opacity:.8; text-align:center; } #pageOverviewCount{ font-weight:700; opacity:.9; } #pageOverviewList{ margin-top:5px; max-height:78px; overflow-y:auto; text-align:left; background:rgba(255,255,255,.04); border-radius:8px; padding:6px 9px; } .pageOverviewRow{ padding:2px 0; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #ln0-fsBtn{ display:block; width:78%; max-width:300px; margin:0 auto 6px; background:var(--chrome-accent); color:#0a0a0a; border:none; border-radius:12px; padding:13px 8px; font-size:14px; font-weight:700; } #recoverHint{ text-align:center; font-size:10px; opacity:.45; margin-bottom:16px; } /* 아코디언 */ .accordion{ border:1px solid rgba(255,255,255,.12); border-radius:12px; margin-bottom:10px; overflow:hidden; } .accHead{ width:100%; text-align:left; background:rgba(255,255,255,.04); border:none; color:var(--chrome-text); padding:12px 14px; font-size:13.5px; font-weight:700; display:flex; justify-content:space-between; align-items:center; } .accHead .car{ transition:transform .2s ease; opacity:.6; } .accordion.open .accHead .car{ transform:rotate(90deg); } .accBody{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 14px; } .accordion.open .accBody{ padding:6px 14px 14px; } .orientRow{display:flex; gap:8px; margin-bottom:12px;} .orientBtn{flex:1; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.15); color:var(--chrome-text); border-radius:10px; padding:9px 6px; font-size:12.5px;} .orientBtn.sel{border-color:var(--chrome-accent); background:rgba(255,255,255,.1); font-weight:600;} .themeGrid{display:grid; grid-template-columns:1fr 1fr; gap:8px;} .themeCard{ border:2px solid rgba(255,255,255,.12); border-radius:10px; padding:8px; cursor:pointer; } .themeCard.sel{border-color:var(--chrome-accent);} .themeSwatch{height:32px; border-radius:6px; margin-bottom:5px; border:1px solid rgba(0,0,0,.15);} .themeCard span{font-size:10.5px; opacity:.85;} .lowPowerNote{ font-size:11px; opacity:.75; line-height:1.6; background:rgba(255,255,255,.05); border-radius:8px; padding:10px; margin-top:10px;} .noteTypeRow{ display:flex; gap:8px; margin-bottom:6px; } .noteTypeBtn{ flex:1; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.15); color:var(--chrome-text); border-radius:10px; padding:8px 6px; font-size:12px; } .noteTypeBtn.sel{ border-color:var(--chrome-accent); background:rgba(255,255,255,.1); font-weight:700; } .rowset{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:13px;} .rowset:last-child{ border-bottom:none; } .rowset .ctrl{display:flex; align-items:center; gap:8px;} .rowset button{background:rgba(255,255,255,.08); border:none; color:var(--chrome-text); width:28px;height:28px;border-radius:8px;font-size:15px;} .fontFamilyRow{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; } .fontFamilyBtn{ background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.15); color:var(--chrome-text); border-radius:8px; padding:7px 10px; font-size:12.5px; width:auto; height:auto; white-space:nowrap; } .fontFamilyBtn.sel{ border-color:var(--chrome-accent); background:rgba(255,255,255,.12); font-weight:700; } .fontColorRow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center; } .fontColorSwatch{ width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.25); flex:none; } .fontColorSwatch.sel{ border-color:var(--chrome-accent); box-shadow:0 0 0 2px rgba(255,255,255,.15); } #fontColorReset{ width:auto; padding:0 10px; font-size:11px; height:28px; border-radius:8px; } .toggleBtn{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:var(--chrome-text); border-radius:8px; padding:6px 12px; font-size:12px; width:auto; height:auto; white-space:nowrap;} .toggleBtn.on{background:var(--chrome-accent); color:#0a0a0a; border-color:var(--chrome-accent); font-weight:600;} /* View1: 노트(코네0노트 / 기본노트) */ #view1{overflow:hidden;} #v1-header{ flex:none; display:flex; align-items:baseline; gap:14px; padding:10px 14px 7px; border-bottom:2px solid var(--line); font-size:12px; } #v1-header .hfield{display:flex; align-items:baseline; gap:6px; overflow:hidden;} #v1-header .hfield:first-child{flex:1; min-width:0;} .hlabel{font-weight:700; letter-spacing:.03em; opacity:.55; white-space:nowrap; font-size:10.5px;} .hval{outline:none; white-space:nowrap; overflow-x:auto; min-width:20px;} .hval[data-empty]:empty:before{content:attr(data-empty); opacity:.35;} #v1-body{flex:1; display:flex; flex-direction:column; min-height:0;} #v1-colheaders{flex:none; display:flex; border-bottom:2px solid var(--line);} .colhead{padding:6px 10px 5px; font-weight:700; font-size:11px; letter-spacing:.04em; opacity:.7;} .colcues{flex:0 0 20%; border-right:2px solid var(--line);} .colnotes{flex:1;} #v1-top{flex:1; display:flex; min-height:0; border-bottom:2px solid var(--line); position:relative;} #v1-cues.pane{flex:0 0 20%; border-right:2px solid var(--line);} #v1-notes.pane{flex:1;} #v1-summaryhead{ flex:none; padding:7px 14px 4px; font-weight:700; text-decoration:underline; letter-spacing:.04em; font-size:11px; } #v1-summary.pane{flex:0 0 12%;} /* 기본노트 모드: 큐/서머리 숨기고 노트 하나만 꽉 채움 */ #view1.plain #v1-colheaders, #view1.plain #v1-cues, #view1.plain #v1-summaryhead, #view1.plain #v1-summary{ display:none; } #view1.plain #v1-notes.pane{ flex:0 0 34%; } /* 미사용 — 실제로는 v1-top이 flex:1 전체를 notes가 차지 */ #view1.plain #v1-top{ border-bottom:none; } #view1.plain #v1-notes.pane{ flex:1; } /* 좌우 화살표(뷰1 상시 표시, 페이지 정보 옆) */ .pageArrowInline{ background:none; border:none; color:var(--chrome-text); opacity:.55; font-size:20px; padding:2px 8px; line-height:1; } /* ---------- 전체모드 하단 고정 메뉴바 (숨지 않음) ---------- */ #fsBottomBar{ display:none; flex:none; background:var(--bar-bg); z-index:40; } #ln01App.ln01-fs #fsBottomBar{ display:block; } #fsPageRow{ display:flex; align-items:center; justify-content:center; gap:10px; padding:6px 8px 2px; color:var(--chrome-text); } #fsPageCount{ font-size:13px; min-width:44px; text-align:center; } #fsDots{ display:flex; justify-content:center; gap:5px; padding:2px 8px 6px; flex-wrap:wrap; } #fsDots .dot{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.25); } #fsDots .dot.cur{ background:var(--chrome-accent); } #fsMenuRow{ display:flex; align-items:center; gap:5px; padding:0 6px 8px; overflow-x:auto; } #fsMenuRow button{ background:rgba(255,255,255,.08); border:none; color:var(--chrome-text); border-radius:8px; padding:8px 9px; font-size:12px; white-space:nowrap; flex:none; } #fsMenuRow button.closeBtn{ background:rgba(255,80,80,.18); font-weight:700; } #fsMenuRow button.on{ background:var(--chrome-accent); color:#0a0a0a; font-weight:700; } #fsMenuRow .spacer{ flex:1; } /* ---------- 공유/저장 통합 팝업 ---------- */ #shareModal{ display:none; position:absolute; inset:0; z-index:200; background:rgba(0,0,0,.6); align-items:center; justify-content:center; padding:20px; } #shareModal.show{ display:flex; } #shareModalCard{ width:100%; max-width:340px; background:var(--chrome-bg); color:var(--chrome-text); border-radius:14px; padding:16px; max-height:90%; overflow-y:auto; } #shareModalHead{ display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:700; margin-bottom:12px; } #shareModalHead button{ background:rgba(255,255,255,.1); border:none; color:var(--chrome-text); width:26px; height:26px; border-radius:50%; } .shareRow{ display:flex; align-items:center; gap:6px; margin-bottom:10px; } .shareLabel{ font-size:11px; opacity:.6; flex:0 0 46px; } .shareUrlBox{ flex:1; background:rgba(255,255,255,.06); border-radius:8px; padding:7px 9px; font-size:10.5px; word-break:break-all; max-height:54px; overflow-y:auto; } .shareCopyBtn{ background:var(--chrome-accent); color:#0a0a0a; border:none; border-radius:8px; padding:8px 10px; font-size:11.5px; font-weight:700; flex:none; } .shareDivider{ height:1px; background:rgba(255,255,255,.12); margin:10px 0 12px; } .shareActionBtn{ display:block; width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--chrome-text); border-radius:10px; padding:11px 8px; font-size:13px; margin-bottom:8px; } /* ---------- 글꼴 선택 바텀시트 ---------- */ #fontPickerOverlay{ display:none; position:absolute; inset:0; z-index:210; background:rgba(0,0,0,.55); } #fontPickerOverlay.show{ display:block; } #fontPickerSheet{ position:absolute; left:0; right:0; bottom:0; z-index:211; background:var(--chrome-bg); color:var(--chrome-text); border-radius:16px 16px 0 0; padding:14px 16px 18px; transform:translateY(100%); transition:transform .25s ease; max-height:60%; overflow-y:auto; } #fontPickerSheet.show{ transform:translateY(0); } #fontPickerHead{ font-size:13.5px; font-weight:700; margin-bottom:10px; text-align:center; } #fontPickerList{ display:flex; flex-direction:column; gap:8px; } /* ---------- 초기화(위험) 아코디언 ---------- */ .dangerAcc{ border-color:rgba(255,80,80,.35); } .dangerAcc .accHead{ background:rgba(255,60,60,.16); color:#ff9a9a; } .dangerBtn{ width:100%; background:rgba(255,60,60,.18); border:1px solid rgba(255,80,80,.4); color:#ff9a9a; border-radius:10px; padding:11px 8px; font-size:13px; font-weight:700; margin-bottom:10px; } #fsMenuRow .dangerBtn{ width:auto; padding:8px 10px; font-size:12px; margin-bottom:0; white-space:nowrap; } .dangerIcon{ color:#ff9a9a !important; border-color:rgba(255,80,80,.4) !important; background:rgba(255,60,60,.15) !important; width:auto; padding:0 9px; font-size:11px; font-weight:700; } #pageDeleteList{ display:flex; flex-direction:column; gap:6px; margin-top:8px; max-height:180px; overflow-y:auto; } .pageDeleteRow{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.05); border-radius:8px; padding:8px 10px; font-size:12.5px; } .pageDeleteRow input{ flex:none; } .pageDeleteRow span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---------- 커스텀 확인 팝업 (native alert/confirm 대체) ---------- */ #confirmModal{ display:none; position:absolute; inset:0; z-index:220; background:rgba(0,0,0,.6); align-items:center; justify-content:center; padding:20px; } #confirmModal.show{ display:flex; } #confirmModalCard{ width:100%; max-width:300px; background:var(--chrome-bg); color:var(--chrome-text); border-radius:14px; padding:18px; } #confirmModalMsg{ font-size:13.5px; line-height:1.6; margin-bottom:16px; } #confirmModalBtns{ display:flex; gap:8px; } #confirmModalBtns button{ flex:1; border:none; border-radius:9px; padding:10px 8px; font-size:13px; } #confirmModalCancel{ background:rgba(255,255,255,.1); color:var(--chrome-text); } #confirmModalOk{ background:#ff5252; color:#fff; font-weight:700; } .fontPickBtn{ width:100%; text-align:left; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.15); color:var(--chrome-text); border-radius:10px; padding:12px 14px; font-size:15px; } .fontPickBtn.sel{ border-color:var(--chrome-accent); background:rgba(255,255,255,.12); } /* ---------- ON/OFF 텍스트 대신 스위치형 토글 ---------- */ .switchToggle{ width:44px; height:25px; border-radius:13px; background:#2a2a2a; border:none; position:relative; padding:0; flex:none; } .switchToggle .knob{ position:absolute; top:2.5px; left:2.5px; width:20px; height:20px; border-radius:50%; background:#e8e8e8; transition:left .18s ease; } .switchToggle.on{ background:var(--chrome-accent); } .switchToggle.on .knob{ left:21.5px; background:#fff; } </style> <div id="ln01App"> <!-- 타이틀바: 위젯(랜딩/설정) 상태에서만 표시 --> <div id="titlebar"> <div id="tb-toprow"> <div> <div id="tb-title">저전력 노트계산기_V12</div> <div id="tb-tagline">가볍고 오래쓰는 저전력 풀사이즈 노트! 휴대폰 전용</div> </div> <div id="tb-right"> <button class="tbIcon" id="tbShareBtn" title="작성한 내용을 URL로 공유하고, 짧은 URL로 줄일 수 있어요"> </button> <button class="tbIcon" id="tbWakeBtn" title="화면을 항상 켜둬요 (평소엔 꺼짐)"> </button> <button class="tbIcon" id="tbFullBtn" title="전체 화면으로 크게 봐요">⛶</button> </div> </div> <div id="tbBatteryTop">배터리 확인중…</div> </div> <!-- 전체모드 전용 미니 상단바: 배터리 / 항상켜짐 / 나가기만 --> <div id="fsTopBar"> <div style="display:flex; gap:6px;"> <button class="tbIcon" id="fsExitBtn" title="전체모드 나가기">✕</button> <button class="tbIcon dangerIcon" id="fsResetAllBtn" title="모든 페이지를 삭제해요">초기화</button> </div> <span id="fsBatteryTop">배터리 확인중…</span> <div style="display:flex; gap:6px; position:relative;"> <button class="tbIcon" id="fsLowPowerBtn" title="저전력 테마로 바꾸고 예상 사용시간 변화를 보여줘요">저전력</button> <div id="lowPowerBubble"></div> <button class="tbIcon" id="fsWakeTopBtn" title="화면을 항상 켜둬요"> </button> </div> </div> <div id="viewport"> <!-- VIEW 0 : 랜딩 --> <div class="view active" id="view0"> <div id="ln0-guideWrap"> <div id="ln0-guide"> <div class="ghead"><span>TOPIC/TITLE</span><span>DATE</span></div> <div class="gcols"> <div class="gcues" id="ln0-guide-cues">CUES</div> <div class="gnotes" id="ln0-guide-notes">NOTES / DETAILS — 본문 필기 내용이 여기에 이어집니다</div> </div> <div class="gsum" id="ln0-guide-sum">SUMMARY</div> </div> </div> <div id="pageOverview"> <span id="pageOverviewCount">1 page</span> <div id="pageOverviewList"></div> </div> <button id="ln0-fsBtn">⛶ 전체보기</button> <div id="recoverHint">실수로 닫은 창도 0-1.kr/35로 접속하면 살아있습니다</div> <!-- 아코디언 1: 방향 & 배경 --> <div class="accordion" id="accOrientTheme"> <button class="accHead" data-acc="accOrientTheme"><span>방향 &amp; 배경 화면</span><span class="car">▸</span></button> <div class="accBody"> <div class="orientRow"> <button class="orientBtn sel" id="orientPortrait" data-o="portrait"> 세로모드</button> <button class="orientBtn" id="orientLandscape" data-o="landscape"> 가로모드</button> </div> <div class="noteTypeRow" role="radiogroup" aria-label="노트 형식"> <button class="noteTypeBtn sel" id="typeCornell" title="큐/노트/요약 3분할로 씁니다">● 코네0노트</button> <button class="noteTypeBtn" id="typePlain" title="칸 구분 없이 한 페이지로 씁니다">○ 기본노트</button> </div> <div class="themeGrid" id="themeGrid"></div> <div class="lowPowerNote" id="lowPowerNote"> 어두운 화면(OLED 저전력 테마)은 흰 배경 페이지보다 화면 전력 소모가 일반적으로 더 적어요. 여기에 <b>비행기모드</b>까지 함께 쓰면 무선 통신 소비전력도 줄어 배터리를 더 아낄 수 있어요. (정확한 절감량은 기기·밝기·사용 패턴에 따라 달라요) </div> </div> </div> <!-- 아코디언 2: 기타 설정 --> <div class="accordion" id="accEtc"> <button class="accHead" data-acc="accEtc"><span>기타 설정</span><span class="car">▸</span></button> <div class="accBody"> <div class="rowset"> <span>본문 폰트 크기 <span id="fontSizeLabel">19px</span></span> <div class="ctrl"> <button id="fontMinus">－</button> <button id="fontPlus">＋</button> </div> </div> <div class="rowset"> <span>글꼴</span> <button class="toggleBtn" id="fontPickerTriggerSettings" style="width:auto; min-width:110px;">기본체 ▾</button> </div> <div class="rowset" style="display:block;"> <span>폰트 색상<br><small style="opacity:.6;font-weight:400;">배경과 겹쳐 안 보이면 자동으로 대비를 맞춰요</small></span> <div class="fontColorRow" id="fontColorRow"></div> <button id="fontColorReset" style="margin-top:6px;">자동(기본값)으로</button> </div> <div class="rowset"> <span>외부 키보드 모드<br><small style="opacity:.6;font-weight:400;">켜면 화면 키보드가 안 올라와요</small></span> <button class="switchToggle" id="extKbBtn"><span class="knob"></span></button> </div> <div class="rowset"> <span>항상 켜짐 (Wake Lock)</span> <button class="switchToggle" id="wakeBtn2"><span class="knob"></span></button> </div> </div> </div> <!-- 아코디언 3: 초기화 (빨간색) --> <div class="accordion dangerAcc" id="accReset"> <button class="accHead" data-acc="accReset"><span>⚠ 초기화</span><span class="car">▸</span></button> <div class="accBody"> <button class="dangerBtn" id="deleteAllBtn"> 전체 삭제</button> <div style="font-size:13px; margin-bottom:8px;">선택 삭제 — 삭제할 페이지를 골라주세요</div> <div id="pageDeleteList"></div> <button class="dangerBtn" id="deleteSelectedBtn" style="margin-top:8px;"> 선택한 페이지 삭제</button> </div> </div> </div> <!-- VIEW 1 : 노트 (코네0노트 / 기본노트) --> <div class="view" id="view1"> <div id="v1-header"> <div class="hfield"> <span class="hlabel">TOPIC/TITLE</span> <div class="hval" id="v1-title" contenteditable="true" data-empty="주제를 입력하세요"></div> </div> <div class="hfield"> <span class="hlabel">DATE</span> <div class="hval" id="v1-date" contenteditable="true" data-empty="날짜"></div> </div> </div> <div id="v1-body"> <div id="v1-colheaders"> <div class="colhead colcues">CUES</div> <div class="colhead colnotes">NOTES / DETAILS</div> </div> <div id="v1-top"> <div class="pane" id="v1-cues" contenteditable="true" data-empty="핵심어"></div> <div class="pane" id="v1-notes" contenteditable="true" data-empty="본문 필기"></div> </div> </div> <div id="v1-summaryhead">SUMMARY</div> <div class="pane" id="v1-summary" contenteditable="true" data-empty="요약"></div> </div> </div><!-- /#viewport --> <!-- 전체모드 전용 하단 고정 메뉴바 --> <div id="fsBottomBar"> <div id="fsPageRow"> <button class="pageArrowInline" id="fsPrev">‹</button> <span id="fsPageCount">1 / 1</span> <button class="pageArrowInline" id="fsNext">›</button> </div> <div id="fsDots"></div> <div id="fsMenuRow"> <button class="closeBtn" id="fsCloseLeft">✕ 닫기</button> <button id="fsShareBtn"> 공유·저장</button> <button id="fsExtKbBtn">⌨ 외부키보드</button> <button id="fsWakeBtn"> 항상켜짐</button> <button id="fsFontMinus">A－</button> <button id="fsFontPlus">A＋</button> <button id="fontPickerTriggerFs">Aa 글꼴</button> <button class="dangerBtn" id="fsDeleteCurrentBtn"> 본페이지삭제</button> <span class="spacer"></span> <button class="closeBtn" id="fsCloseRight">✕ 닫기</button> </div> </div> <!-- 공유/저장 통합 팝업 --> <div id="shareModal"> <div id="shareModalCard"> <div id="shareModalHead"> <span>공유 · 저장</span> <button id="shareModalClose">✕</button> </div> <div class="shareRow"> <span class="shareLabel">긴 URL</span> <div class="shareUrlBox" id="shareLongUrlBox">URL 생성 중…</div> <button class="shareCopyBtn" id="shareCopyLong">복사</button> </div> <div class="shareRow"> <span class="shareLabel">짧은 URL</span> <div class="shareUrlBox" id="shareShortUrlBox">아래 버튼으로 만들기</div> <button class="shareCopyBtn" id="shareMakeShort">만들기</button> <button class="shareCopyBtn" id="shareCopyShort" style="display:none;">복사</button> </div> <div class="shareDivider"></div> <button class="shareActionBtn" id="modalPdfBtn"> PDF로 저장 (전체 페이지)</button> <button class="shareActionBtn" id="modalAppShareBtn"> 다른 앱으로 공유 (전체 페이지, 삼성노트·킵·네이버메모)</button> </div> </div> <!-- 글꼴 선택 바텀시트 --> <div id="fontPickerOverlay"></div> <div id="fontPickerSheet"> <div id="fontPickerHead">글꼴 선택</div> <div id="fontPickerList"></div> </div> <!-- 삭제 등 위험 동작 확인용 커스텀 팝업 (native confirm/alert은 전체모드를 깨서 사용 안 함) --> <div id="confirmModal"> <div id="confirmModalCard"> <div id="confirmModalMsg"></div> <div id="confirmModalBtns"> <button id="confirmModalCancel">취소</button> <button id="confirmModalOk">삭제</button> </div> </div> </div> </div><!-- /#ln01App --> <!-- PDF 라이브러리 (CDN) --> <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type="text/plain" id="ln01-note-src">CihmdW5jdGlvbigpewoKICAvLyAtLS0tLS0tLS0tLS0tLS0tIO2FjOuniCAxNOyihSAtLS0tLS0tLS0tLS0tLS0tCiAgdmFyIFRIRU1FUyA9IFsKICAgIHtuYW1lOiLrrLTsp4Ag7ZmU7J207Yq4IiwgYmc6IiNmZmZmZmYiLCB0ZXh0OiIjMWMxYzFjIiwgbGluZToicmdiYSgwLDAsMCwuMDgpIiwgYWNjZW50OiIjNGE2ZmE1Iiwgc3R5bGU6Im5vbmUifSwKICAgIHtuYW1lOiLrjIDtlZnrhbjtirgg6rCA66Gc7KSEIiwgYmc6IiNmZmZmZmYiLCB0ZXh0OiIjMWMxYzFjIiwgbGluZToiIzhmYjNkZCIsIGFjY2VudDoiIzRhNmZhNSIsIHN0eWxlOiJydWxlZCJ9LAogICAge25hbWU6IuuqqOuIiCDqt7jrpqzrk5wiLCBiZzoiI2ZiZmJmOCIsIHRleHQ6IiMyMzIzMjMiLCBsaW5lOiJyZ2JhKDAsMCwwLC4yOCkiLCBhY2NlbnQ6IiM1YTdhNWEiLCBzdHlsZToiZ3JpZCJ9LAogICAge25hbWU6IuuPhO2KuCDqt7jrpqzrk5wiLCBiZzoiI2ZiZmJmOCIsIHRleHQ6IiMyMzIzMjMiLCBsaW5lOiJyZ2JhKDAsMCwwLC40NSkiLCBhY2NlbnQ6IiM1YTdhNWEiLCBzdHlsZToiZG90cyJ9LAogICAge25hbWU6IuumrOqwiO2MqOuTnCDsmJDroZzsmrAiLCBiZzoiI2ZkZjZkMyIsIHRleHQ6IiMyYTJhMWEiLCBsaW5lOiIjN2Q5ZGNmIiwgYWNjZW50OiIjM2E1YThhIiwgc3R5bGU6InJ1bGVkIn0sCiAgICB7bmFtZToi7IS47ZS87JWEIO2OmOydtO2NvCIsIGJnOiIjZjFlNmQwIiwgdGV4dDoiIzNhMmYyMiIsIGxpbmU6InJnYmEoMCwwLDAsLjE2KSIsIGFjY2VudDoiIzhhNWEzYSIsIHN0eWxlOiJub25lIn0sCiAgICB7bmFtZToi7L2U64SkMOuFuO2KuCIsIGJnOiIjZmZmZmZmIiwgdGV4dDoiIzFjMWMxYyIsIGxpbmU6IiM5YTlhOWEiLCBhY2NlbnQ6IiM0YTZmYTUiLCBzdHlsZToicnVsZWQifSwKICAgIHtuYW1lOiLri6Ttgawg66y07KeAICjsoIDsoITroKUpIiwgYmc6IiMwMDAwMDAiLCB0ZXh0OiIjZTdlMmQ2IiwgbGluZToiIzI0MjQyNCIsIGFjY2VudDoiIzhmYTZjOSIsIHN0eWxlOiJub25lIn0sCiAgICB7bmFtZToi64uk7YGsIOq3uOumrOuTnCAo7KCA7KCE66ClKSIsIGJnOiIjMDAwMDAwIiwgdGV4dDoiI2U3ZTJkNiIsIGxpbmU6IiMzYTNhM2EiLCBhY2NlbnQ6IiM4ZmE2YzkiLCBzdHlsZToiZ3JpZCJ9LAogICAge25hbWU6IuyVsOuyhCDsnontgawgKOy1nOyggOyghOugpSkiLCBiZzoiIzAwMDAwMCIsIHRleHQ6IiNlMGE0NWMiLCBsaW5lOiIjNGEzNDE4IiwgYWNjZW50OiIjZTBhNDVjIiwgc3R5bGU6InJ1bGVkIn0sCiAgICB7bmFtZToi7Jew6re466CI7J20IOustOyngCIsIGJnOiIjZWNlZWYwIiwgdGV4dDoiIzIyMjQyYSIsIGxpbmU6InJnYmEoMCwwLDAsLjEwKSIsIGFjY2VudDoiIzRhNmZhNSIsIHN0eWxlOiJub25lIn0sCiAgICB7bmFtZToi67Kg7J207KeAIOykhOuFuO2KuCIsIGJnOiIjZjRlY2RkIiwgdGV4dDoiIzMzMmExYyIsIGxpbmU6IiNhODdmNDUiLCBhY2NlbnQ6IiM4YTVhM2EiLCBzdHlsZToicnVsZWQifSwKICAgIHtuYW1lOiLri6Ttgawg7IS47ZS87JWEICjsoIDsoITroKUpIiwgYmc6IiMxMjBlMDgiLCB0ZXh0OiIjZGNjOWEzIiwgbGluZToiIzRhM2EyNCIsIGFjY2VudDoiI2RjYzlhMyIsIHN0eWxlOiJub25lIn0sCiAgICB7bmFtZToi65Sl67iU66OoIOq3uOumrOuTnCAo7KCA7KCE66ClKSIsIGJnOiIjMDUwNzBkIiwgdGV4dDoiI2M5ZDZlOCIsIGxpbmU6IiMyYzNhNTIiLCBhY2NlbnQ6IiM2ZmE4ZGMiLCBzdHlsZToiZ3JpZCJ9CiAgXTsKICAvLyDrsLDqsr3sg4nrp4wg7J6I64qUKHN0eWxlOiJub25lIikg7KCA7KCE66ClIO2FjOuniOuKlCDqsoDthqAg6rKw6rO8IOykhC/soJAg7ZGc7Iuc6rCAIOyXhuycvOuvgOuhnCDrnbzsnbjsg4nsnbQg7Iuk7KCc66GcIOyTsOydtOyngCDslYrsnYwg4oCUIOywuOqzoOyaqQoKICB2YXIgc3RhdGUgPSB7CiAgICB2aWV3OiAwLAogICAgb3JpZW50YXRpb246ICJwb3J0cmFpdCIsCiAgICB0aGVtZUlkeDogNiwgLy8g7L2U64SkMOuFuO2KuCjrrLTsp4Ag7ZmU7J207Yq4KSDquLDrs7jqsJIg4oCUIOyggOyghOugpeydgCDrsoTtirzsnYQg64iM65+s7JW866eMIOyggeyaqQogICAgZm9udFNpemU6IDE5LAogICAgZXh0S2V5Ym9hcmQ6IGZhbHNlLAogICAgd2FrZTogZmFsc2UsCiAgICB3YWtlTG9ja09iajogbnVsbCwKICAgIG5vdGVUeXBlOiAiY29ybmVsbCIsIC8vIGNvcm5lbGwgfCBwbGFpbgogICAgZm9udENvbG9yOiBudWxsLCAvLyBudWxs7J2066m0IO2FjOuniCDquLDrs7jqsJIg7IKs7JqpCiAgICBmb250RmFtaWx5SWR4OiAwLAogICAgbG93UG93ZXJQcmV2VGhlbWVJZHg6IG51bGwsCiAgICBwYWdlczogWyBibGFua1BhZ2UoKSBdLAogICAgcGFnZUlkeDogMAogIH07CgogIHZhciAkID0gZnVuY3Rpb24oaWQpeyByZXR1cm4gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoaWQpOyB9OwoKICBmdW5jdGlvbiB0b2RheVN0cmluZygpewogICAgdmFyIGQgPSBuZXcgRGF0ZSgpOwogICAgZnVuY3Rpb24gcGFkKG4peyByZXR1cm4gbiA8IDEwID8gIjAiK24gOiAiIituOyB9CiAgICByZXR1cm4gZC5nZXRGdWxsWWVhcigpICsgIi4iICsgcGFkKGQuZ2V0TW9udGgoKSsxKSArICIuIiArIHBhZChkLmdldERhdGUoKSk7CiAgfQogIGZ1bmN0aW9uIGJsYW5rUGFnZSgpewogICAgcmV0dXJuIHsgdGl0bGU6IiIsIGRhdGU6IHRvZGF5U3RyaW5nKCksIGN1ZXM6IiIsIG5vdGVzOiIiLCBzdW1tYXJ5OiIiIH07CiAgfQoKICAvLyAtLS0tLS0tLS0tLS0tLS0tIOuhnOy7rCDsoIDsnqUgLS0tLS0tLS0tLS0tLS0tLQogIHZhciBMU19QQUdFUyA9ICJsbjAxX3BhZ2VzIiwgTFNfU0VUVElOR1MgPSAibG4wMV9zZXR0aW5ncyI7CiAgZnVuY3Rpb24gcGVyc2lzdFN0YXRlKCl7CiAgICB0cnl7CiAgICAgIGxvY2FsU3RvcmFnZS5zZXRJdGVtKExTX1BBR0VTLCBKU09OLnN0cmluZ2lmeShzdGF0ZS5wYWdlcykpOwogICAgICBsb2NhbFN0b3JhZ2Uuc2V0SXRlbShMU19TRVRUSU5HUywgSlNPTi5zdHJpbmdpZnkoewogICAgICAgIHRoZW1lSWR4OiBzdGF0ZS50aGVtZUlkeCwgZm9udFNpemU6IHN0YXRlLmZvbnRTaXplLCBvcmllbnRhdGlvbjogc3RhdGUub3JpZW50YXRpb24sCiAgICAgICAgZXh0S2V5Ym9hcmQ6IHN0YXRlLmV4dEtleWJvYXJkLCBwYWdlSWR4OiBzdGF0ZS5wYWdlSWR4LCBub3RlVHlwZTogc3RhdGUubm90ZVR5cGUsCiAgICAgICAgZm9udENvbG9yOiBzdGF0ZS5mb250Q29sb3IsIGZvbnRGYW1pbHlJZHg6IHN0YXRlLmZvbnRGYW1pbHlJZHgKICAgICAgfSkpOwogICAgfWNhdGNoKGUpe30KICB9CiAgZnVuY3Rpb24gcmVzdG9yZVN0YXRlKCl7CiAgICB0cnl7CiAgICAgIHZhciBzcCA9IGxvY2FsU3RvcmFnZS5nZXRJdGVtKExTX1BBR0VTKTsKICAgICAgdmFyIHNzID0gbG9jYWxTdG9yYWdlLmdldEl0ZW0oTFNfU0VUVElOR1MpOwogICAgICBpZihzcCl7IHZhciBwYWdlcyA9IEpTT04ucGFyc2Uoc3ApOyBpZihwYWdlcyAmJiBwYWdlcy5sZW5ndGgpeyBzdGF0ZS5wYWdlcyA9IHBhZ2VzOyB9IH0KICAgICAgaWYoc3MpewogICAgICAgIHZhciBzID0gSlNPTi5wYXJzZShzcyk7CiAgICAgICAgaWYodHlwZW9mIHMudGhlbWVJZHggPT09ICJudW1iZXIiKSBzdGF0ZS50aGVtZUlkeCA9IHMudGhlbWVJZHg7CiAgICAgICAgaWYodHlwZW9mIHMuZm9udFNpemUgPT09ICJudW1iZXIiKSBzdGF0ZS5mb250U2l6ZSA9IHMuZm9udFNpemU7CiAgICAgICAgaWYocy5vcmllbnRhdGlvbikgc3RhdGUub3JpZW50YXRpb24gPSBzLm9yaWVudGF0aW9uOwogICAgICAgIGlmKHR5cGVvZiBzLmV4dEtleWJvYXJkID09PSAiYm9vbGVhbiIpIHN0YXRlLmV4dEtleWJvYXJkID0gcy5leHRLZXlib2FyZDsKICAgICAgICBpZihzLm5vdGVUeXBlKSBzdGF0ZS5ub3RlVHlwZSA9IHMubm90ZVR5cGU7CiAgICAgICAgaWYocy5mb250Q29sb3IpIHN0YXRlLmZvbnRDb2xvciA9IHMuZm9udENvbG9yOwogICAgICAgIGlmKHR5cGVvZiBzLmZvbnRGYW1pbHlJZHggPT09ICJudW1iZXIiKSBzdGF0ZS5mb250RmFtaWx5SWR4ID0gcy5mb250RmFtaWx5SWR4OwogICAgICAgIGlmKHR5cGVvZiBzLnBhZ2VJZHggPT09ICJudW1iZXIiICYmIHMucGFnZUlkeCA8IHN0YXRlLnBhZ2VzLmxlbmd0aCkgc3RhdGUucGFnZUlkeCA9IHMucGFnZUlkeDsKICAgICAgfQogICAgfWNhdGNoKGUpe30KICB9CgogIC8vIC0tLS0tLS0tLS0tLS0tLS0g7YWM66eIIOyggeyaqSAtLS0tLS0tLS0tLS0tLS0tCiAgZnVuY3Rpb24gcGFuZUJnKHRoZW1lLCBwaXRjaFB4KXsKICAgIGlmKHRoZW1lLnN0eWxlID09PSAicnVsZWQiKXsKICAgICAgcmV0dXJuICJyZXBlYXRpbmctbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSwgdHJhbnNwYXJlbnQsIHRyYW5zcGFyZW50ICIgKyAocGl0Y2hQeC0xKSArICJweCwgIiArIHRoZW1lLmxpbmUgKyAiICIgKyBwaXRjaFB4ICsgInB4KSI7CiAgICB9CiAgICBpZih0aGVtZS5zdHlsZSA9PT0gImdyaWQiKXsKICAgICAgcmV0dXJuICJyZXBlYXRpbmctbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSwgdHJhbnNwYXJlbnQsIHRyYW5zcGFyZW50ICIgKyAocGl0Y2hQeC0xKSArICJweCwgIiArIHRoZW1lLmxpbmUgKyAiICIgKyBwaXRjaFB4ICsgInB4KSwgcmVwZWF0aW5nLWxpbmVhci1ncmFkaWVudCh0byByaWdodCwgdHJhbnNwYXJlbnQsIHRyYW5zcGFyZW50ICIgKyAocGl0Y2hQeC0xKSArICJweCwgIiArIHRoZW1lLmxpbmUgKyAiICIgKyBwaXRjaFB4ICsgInB4KSI7CiAgICB9CiAgICBpZih0aGVtZS5zdHlsZSA9PT0gImRvdHMiKXsKICAgICAgcmV0dXJuICJyYWRpYWwtZ3JhZGllbnQoIiArIHRoZW1lLmxpbmUgKyAiIDEuMnB4LCB0cmFuc3BhcmVudCAxLjJweCkiOwogICAgfQogICAgcmV0dXJuICJub25lIjsKICB9CiAgZnVuY3Rpb24gY3VycmVudFBpdGNoKCl7CiAgICAvLyDrs7jrrLggbGluZS1oZWlnaHQ6MS43NSDquLDspIAg4oCUIOykhCDrsLDqsr0g6rCE6rKp7J2EIOyLpOygnCDthY3siqTtirgg7KSE6rCE6rKp7JeQIOunnuy2pAogICAgcmV0dXJuIE1hdGgucm91bmQoc3RhdGUuZm9udFNpemUgKiAxLjc1KTsKICB9CiAgLy8gLS0tLS0tLS0tLS0tLS0tLSDsg4kg64yA67mEIOyViOyghOyepey5mCAtLS0tLS0tLS0tLS0tLS0tCiAgZnVuY3Rpb24gaGV4VG9SZ2IoaGV4KXsKICAgIGhleCA9IChoZXggfHwgIiIpLnJlcGxhY2UoIiMiLCIiKTsKICAgIGlmKGhleC5sZW5ndGggPT09IDMpeyBoZXggPSBoZXhbMF0raGV4WzBdK2hleFsxXStoZXhbMV0raGV4WzJdK2hleFsyXTsgfQogICAgdmFyIG51bSA9IHBhcnNlSW50KGhleCwgMTYpOwogICAgaWYoaXNOYU4obnVtKSB8fCBoZXgubGVuZ3RoICE9PSA2KSByZXR1cm4ge3I6MCxnOjAsYjowfTsKICAgIHJldHVybiB7IHI6KG51bT4+MTYpJjI1NSwgZzoobnVtPj44KSYyNTUsIGI6bnVtJjI1NSB9OwogIH0KICBmdW5jdGlvbiByZWxMdW1pbmFuY2UoaGV4KXsKICAgIHZhciBjID0gaGV4VG9SZ2IoaGV4KTsKICAgIHJldHVybiAoMC4yOTkqYy5yICsgMC41ODcqYy5nICsgMC4xMTQqYy5iKSAvIDI1NTsgLy8gMCjslrTrkaHri6QpIH4gMSjrsJ3ri6QpCiAgfQogIGZ1bmN0aW9uIHNhZmVUZXh0Q29sb3IoYmdIZXgsIGRlc2lyZWRIZXgpewogICAgdmFyIGJnTCA9IHJlbEx1bWluYW5jZShiZ0hleCk7CiAgICB2YXIgdGV4dEwgPSByZWxMdW1pbmFuY2UoZGVzaXJlZEhleCB8fCAiIzgwODA4MCIpOwogICAgaWYoTWF0aC5hYnMoYmdMIC0gdGV4dEwpIDwgMC4zNSl7CiAgICAgIC8vIOuMgOu5hOqwgCDrtoDsobHtlZjrqbQg67Cw6rK9IOuwneq4sOyXkCDrlLDrnbwg67CY64yA7IOJ7Jy866GcIOyekOuPmSDrs7TsoJUKICAgICAgcmV0dXJuIGJnTCA+IDAuNSA/ICIjMTQxNDE0IiA6ICIjZjJmMGVhIjsKICAgIH0KICAgIHJldHVybiBkZXNpcmVkSGV4OwogIH0KICBmdW5jdGlvbiBhcHBseVRoZW1lKCl7CiAgICB2YXIgdCA9IFRIRU1FU1tzdGF0ZS50aGVtZUlkeF07CiAgICB2YXIgZGVzaXJlZFRleHQgPSBzdGF0ZS5mb250Q29sb3IgfHwgdC50ZXh0OwogICAgdmFyIGZpbmFsVGV4dCA9IHNhZmVUZXh0Q29sb3IodC5iZywgZGVzaXJlZFRleHQpOwogICAgZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LnN0eWxlLnNldFByb3BlcnR5KCItLWJnIiwgdC5iZyk7CiAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoIi0tdGV4dCIsIGZpbmFsVGV4dCk7CiAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoIi0tbGluZSIsIHQubGluZSk7CiAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoIi0tYWNjZW50IiwgdC5hY2NlbnQpOwogICAgdmFyIHBpdGNoID0gY3VycmVudFBpdGNoKCk7CiAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoIi0tbGluZS1waXRjaCIsIHBpdGNoICsgInB4Iik7CiAgICB2YXIgYmcgPSBwYW5lQmcodCwgcGl0Y2gpOwogICAgdmFyIHNpemUgPSAodC5zdHlsZSA9PT0gImdyaWQiIHx8IHQuc3R5bGUgPT09ICJydWxlZCIpID8gKCIxMDAlICIgKyBwaXRjaCArICJweCIpIDogKHQuc3R5bGUgPT09ICJkb3RzIiA/ICIxNnB4IDE2cHgiIDogImF1dG8iKTsKICAgIFsidjEtY3VlcyIsInYxLW5vdGVzIiwidjEtc3VtbWFyeSJdLmZvckVhY2goZnVuY3Rpb24oaWQpewogICAgICB2YXIgZWwgPSAkKGlkKTsKICAgICAgZWwuc3R5bGUuYmFja2dyb3VuZEltYWdlID0gYmc7CiAgICAgIGVsLnN0eWxlLmJhY2tncm91bmRTaXplID0gc2l6ZTsKICAgIH0pOwogICAgLy8g656c65SpIOqwgOydtOuTnCDrr7jrpqzrs7TquLDsl5Drj4Qg7Iuk7KCcIOuwsOqyvSDtjKjthLTsnYQg67CY7JiBIOKAlCDquIDsnpAv7KSE7J20IOyemCDrs7TsnbTripTsp4Ag7Jes6riw7IScIOuvuOumrCDtmZXsnbgg6rCA64qlCiAgICB2YXIgZ3VpZGVQaXRjaCA9IE1hdGgubWF4KDEwLCBNYXRoLnJvdW5kKHBpdGNoKjAuNDIpKTsKICAgIHZhciBndWlkZVNpemUgPSAodC5zdHlsZT09PSJncmlkInx8dC5zdHlsZT09PSJydWxlZCIpID8gKCIxMDAlICIgKyBndWlkZVBpdGNoICsgInB4IikgOiAodC5zdHlsZT09PSJkb3RzIiA/ICI5cHggOXB4IiA6ICJhdXRvIik7CiAgICBbImxuMC1ndWlkZS1jdWVzIiwibG4wLWd1aWRlLW5vdGVzIiwibG4wLWd1aWRlLXN1bSJdLmZvckVhY2goZnVuY3Rpb24oaWQpewogICAgICB2YXIgZWwgPSAkKGlkKTsKICAgICAgaWYoIWVsKSByZXR1cm47CiAgICAgIGVsLnN0eWxlLmJhY2tncm91bmRJbWFnZSA9IHBhbmVCZyh0LCBndWlkZVBpdGNoKTsKICAgICAgZWwuc3R5bGUuYmFja2dyb3VuZFNpemUgPSBndWlkZVNpemU7CiAgICB9KTsKICAgIHJlbmRlckZvbnRDb2xvclJvdygpOwogIH0KCiAgLy8gLS0tLS0tLS0tLS0tLS0tLSDtj7Dtirgg7IOJ7IOBICjsiqTsmYDsuZgg67Cp7IudIOKAlCDquLDquLDrs4QgbmF0aXZlIOy7rOufrO2UvOy7pCDtmLjtmZjshLEg66y47KCcIO2ajO2UvCkgLS0tLS0tLS0tLS0tLS0tLQogIHZhciBGT05UX0NPTE9SX1BSRVNFVFMgPSBbIiNmZmZmZmYiLCIjMTExMTExIiwiI2UwYTQ1YyIsIiM3ZWM4ZmYiLCIjZmZkMTY2IiwiI2ZmOGE4YSIsIiNiOGYyYzkiLCIjYzlhN2YyIl07CiAgZnVuY3Rpb24gcmVuZGVyRm9udENvbG9yUm93KCl7CiAgICB2YXIgcm93ID0gJCgiZm9udENvbG9yUm93Iik7CiAgICBpZighcm93KSByZXR1cm47CiAgICByb3cuaW5uZXJIVE1MID0gIiI7CiAgICBGT05UX0NPTE9SX1BSRVNFVFMuZm9yRWFjaChmdW5jdGlvbihjKXsKICAgICAgdmFyIGIgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJidXR0b24iKTsKICAgICAgYi5jbGFzc05hbWUgPSAiZm9udENvbG9yU3dhdGNoIiArIChzdGF0ZS5mb250Q29sb3IgPT09IGMgPyAiIHNlbCIgOiAiIik7CiAgICAgIGIuc3R5bGUuYmFja2dyb3VuZCA9IGM7CiAgICAgIGIudGl0bGUgPSBjOwogICAgICBiLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oKXsKICAgICAgICBzdGF0ZS5mb250Q29sb3IgPSBjOwogICAgICAgIGFwcGx5VGhlbWUoKTsKICAgICAgICBwZXJzaXN0U3RhdGUoKTsKICAgICAgfSk7CiAgICAgIHJvdy5hcHBlbmRDaGlsZChiKTsKICAgIH0pOwogIH0KICAkKCJmb250Q29sb3JSZXNldCIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oKXsKICAgIHN0YXRlLmZvbnRDb2xvciA9IG51bGw7CiAgICBhcHBseVRoZW1lKCk7CiAgICBwZXJzaXN0U3RhdGUoKTsKICB9KTsKCiAgLy8gLS0tLS0tLS0tLS0tLS0tLSDquIDqvLQgNeyihSAtLS0tLS0tLS0tLS0tLS0tCiAgdmFyIEZPTlRTID0gWwogICAge25hbWU6Iuq4sOuzuOyytCIsIGNzczoiLWFwcGxlLXN5c3RlbSwnQXBwbGUgU0QgR290aGljIE5lbycsJ01hbGd1biBHb3RoaWMnLHN5c3RlbS11aSxzYW5zLXNlcmlmIn0sCiAgICB7bmFtZToi64KY64iU6rOg65SVIiwgY3NzOiInTmFudW0gR290aGljJyxzYW5zLXNlcmlmIiwgZ29vZ2xlOiJOYW51bStHb3RoaWM6d2dodEA0MDA7NzAwIn0sCiAgICB7bmFtZToi64KY64iU66qF7KGwIiwgY3NzOiInTmFudW0gTXllb25nam8nLHNlcmlmIiwgZ29vZ2xlOiJOYW51bStNeWVvbmdqbyJ9LAogICAge25hbWU6IuqwnOq1rOyfgeydtCIsIGNzczoiJ0dhZWd1JyxjdXJzaXZlIiwgZ29vZ2xlOiJHYWVndSJ9LAogICAge25hbWU6IuqygOydgOqzoOuUlSIsIGNzczoiJ0JsYWNrIEhhbiBTYW5zJyxzYW5zLXNlcmlmIiwgZ29vZ2xlOiJCbGFjaytIYW4rU2FucyJ9CiAgXTsKICAoZnVuY3Rpb24gbG9hZEdvb2dsZUZvbnRzKCl7CiAgICB2YXIgZmFtaWxpZXMgPSBGT05UUy5maWx0ZXIoZnVuY3Rpb24oZil7IHJldHVybiBmLmdvb2dsZTsgfSkubWFwKGZ1bmN0aW9uKGYpeyByZXR1cm4gImZhbWlseT0iICsgZi5nb29nbGU7IH0pLmpvaW4oIiYiKTsKICAgIHZhciBsaW5rID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgibGluayIpOwogICAgbGluay5yZWwgPSAic3R5bGVzaGVldCI7CiAgICBsaW5rLmhyZWYgPSAiaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3MyPyIgKyBmYW1pbGllcyArICImZGlzcGxheT1zd2FwIjsKICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobGluayk7CiAgfSkoKTsKICBmdW5jdGlvbiBhcHBseUZvbnRGYW1pbHkoKXsKICAgIHZhciBmID0gRk9OVFNbc3RhdGUuZm9udEZhbWlseUlkeF0gfHwgRk9OVFNbMF07CiAgICAkKCJ2aWV3MSIpLnN0eWxlLmZvbnRGYW1pbHkgPSBmLmNzczsKICAgIHZhciBndWlkZSA9ICQoImxuMC1ndWlkZSIpOwogICAgaWYoZ3VpZGUpIGd1aWRlLnN0eWxlLmZvbnRGYW1pbHkgPSBmLmNzczsKICAgICQoImZvbnRQaWNrZXJUcmlnZ2VyU2V0dGluZ3MiKS5pbm5lclRleHQgPSBmLm5hbWUgKyAiIOKWviI7CiAgfQogIGZ1bmN0aW9uIHJlbmRlckZvbnRQaWNrZXJMaXN0KCl7CiAgICB2YXIgbGlzdCA9ICQoImZvbnRQaWNrZXJMaXN0Iik7CiAgICBsaXN0LmlubmVySFRNTCA9ICIiOwogICAgRk9OVFMuZm9yRWFjaChmdW5jdGlvbihmLCBpKXsKICAgICAgdmFyIGIgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJidXR0b24iKTsKICAgICAgYi5jbGFzc05hbWUgPSAiZm9udFBpY2tCdG4iICsgKGkgPT09IHN0YXRlLmZvbnRGYW1pbHlJZHggPyAiIHNlbCIgOiAiIik7CiAgICAgIGIuc3R5bGUuZm9udEZhbWlseSA9IGYuY3NzOwogICAgICBiLnRleHRDb250ZW50ID0gZi5uYW1lOwogICAgICBiLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oKXsKICAgICAgICBzdGF0ZS5mb250RmFtaWx5SWR4ID0gaTsKICAgICAgICBhcHBseUZvbnRGYW1pbHkoKTsKICAgICAgICByZW5kZXJGb250UGlja2VyTGlzdCgpOwogICAgICAgIHBlcnNpc3RTdGF0ZSgpOwogICAgICAgIGNsb3NlRm9udFBpY2tlcigpOwogICAgICB9KTsKICAgICAgbGlzdC5hcHBlbmRDaGlsZChiKTsKICAgIH0pOwogIH0KICBmdW5jdGlvbiBvcGVuRm9udFBpY2tlcigpewogICAgcmVuZGVyRm9udFBpY2tlckxpc3QoKTsKICAgICQoImZvbnRQaWNrZXJPdmVybGF5IikuY2xhc3NMaXN0LmFkZCgic2hvdyIpOwogICAgJCgiZm9udFBpY2tlclNoZWV0IikuY2xhc3NMaXN0LmFkZCgic2hvdyIpOwogIH0KICBmdW5jdGlvbiBjbG9zZUZvbnRQaWNrZXIoKXsKICAgICQoImZvbnRQaWNrZXJPdmVybGF5IikuY2xhc3NMaXN0LnJlbW92ZSgic2hvdyIpOwogICAgJCgiZm9udFBpY2tlclNoZWV0IikuY2xhc3NMaXN0LnJlbW92ZSgic2hvdyIpOwogIH0KICAkKCJmb250UGlja2VyVHJpZ2dlclNldHRpbmdzIikuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBvcGVuRm9udFBpY2tlcik7CiAgJCgiZm9udFBpY2tlclRyaWdnZXJGcyIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgb3BlbkZvbnRQaWNrZXIpOwogICQoImZvbnRQaWNrZXJPdmVybGF5IikuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBjbG9zZUZvbnRQaWNrZXIpOwoKICBmdW5jdGlvbiByZW5kZXJUaGVtZUdyaWQoKXsKICAgIHZhciBncmlkID0gJCgidGhlbWVHcmlkIik7CiAgICBncmlkLmlubmVySFRNTCA9ICIiOwogICAgVEhFTUVTLmZvckVhY2goZnVuY3Rpb24odCwgaSl7CiAgICAgIHZhciBjYXJkID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgiZGl2Iik7CiAgICAgIGNhcmQuY2xhc3NOYW1lID0gInRoZW1lQ2FyZCIgKyAoaSA9PT0gc3RhdGUudGhlbWVJZHggPyAiIHNlbCIgOiAiIik7CiAgICAgIHZhciBzdyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImRpdiIpOwogICAgICBzdy5jbGFzc05hbWUgPSAidGhlbWVTd2F0Y2giOwogICAgICBzdy5zdHlsZS5iYWNrZ3JvdW5kID0gdC5iZzsKICAgICAgdmFyIHBpdGNoID0gY3VycmVudFBpdGNoKCk7CiAgICAgIHN3LnN0eWxlLmJhY2tncm91bmRJbWFnZSA9IHBhbmVCZyh0LCBNYXRoLm1heCgxMCwgTWF0aC5yb3VuZChwaXRjaCowLjQ1KSkpOwogICAgICBzdy5zdHlsZS5iYWNrZ3JvdW5kU2l6ZSA9ICh0LnN0eWxlPT09ImdyaWQifHx0LnN0eWxlPT09InJ1bGVkIikgPyAiMTAwJSAiICsgTWF0aC5tYXgoMTAsIE1hdGgucm91bmQocGl0Y2gqMC40NSkpICsgInB4IiA6ICh0LnN0eWxlID09PSAiZG90cyIgPyAiOHB4IDhweCIgOiAiYXV0byIpOwogICAgICB2YXIgbGFiZWwgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJzcGFuIik7CiAgICAgIGxhYmVsLnRleHRDb250ZW50ID0gdC5uYW1lOwogICAgICBjYXJkLmFwcGVuZENoaWxkKHN3KTsKICAgICAgY2FyZC5hcHBlbmRDaGlsZChsYWJlbCk7CiAgICAgIGNhcmQuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBmdW5jdGlvbigpewogICAgICAgIHN0YXRlLnRoZW1lSWR4ID0gaTsKICAgICAgICBzdGF0ZS5sb3dQb3dlclByZXZUaGVtZUlkeCA9IG51bGw7CiAgICAgICAgJCgiZnNMb3dQb3dlckJ0biIpLmNsYXNzTGlzdC5yZW1vdmUoIm9uIik7CiAgICAgICAgYXBwbHlUaGVtZSgpOwogICAgICAgIHJlbmRlclRoZW1lR3JpZCgpOwogICAgICAgIHBlcnNpc3RTdGF0ZSgpOwogICAgICB9KTsKICAgICAgZ3JpZC5hcHBlbmRDaGlsZChjYXJkKTsKICAgIH0pOwogIH0KCiAgLy8gLS0tLS0tLS0tLS0tLS0tLSDslYTsvZTrlJTslrggLS0tLS0tLS0tLS0tLS0tLQogIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoIi5hY2NIZWFkIikuZm9yRWFjaChmdW5jdGlvbihoKXsKICAgIGguYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBmdW5jdGlvbigpewogICAgICB2YXIgYWNjID0gJChoLmdldEF0dHJpYnV0ZSgiZGF0YS1hY2MiKSk7CiAgICAgIHZhciBib2R5ID0gYWNjLnF1ZXJ5U2VsZWN0b3IoIi5hY2NCb2R5Iik7CiAgICAgIHZhciBpc09wZW4gPSBhY2MuY2xhc3NMaXN0LmNvbnRhaW5zKCJvcGVuIik7CiAgICAgIGlmKGlzT3Blbil7CiAgICAgICAgLy8g64ur6riwOiDtmITsnqwg64aS7J2066GcIOqzoOygle2VnCDrkqQg64uk7J2MIO2UhOugiOyehOyXkCAw7Jy866GcIOyVoOuLiOuplOydtOyFmAogICAgICAgIGJvZHkuc3R5bGUubWF4SGVpZ2h0ID0gYm9keS5zY3JvbGxIZWlnaHQgKyAicHgiOwogICAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZShmdW5jdGlvbigpewogICAgICAgICAgYWNjLmNsYXNzTGlzdC5yZW1vdmUoIm9wZW4iKTsKICAgICAgICAgIGJvZHkuc3R5bGUubWF4SGVpZ2h0ID0gIjBweCI7CiAgICAgICAgfSk7CiAgICAgIH0gZWxzZSB7CiAgICAgICAgYWNjLmNsYXNzTGlzdC5hZGQoIm9wZW4iKTsgLy8gcGFkZGluZ+u2gO2EsCDrqLzsoIAg7KCB7Jqp7ZW07JW8IHNjcm9sbEhlaWdodOqwgCDsoJXtmZXtnogg6rOE7IKw65CoCiAgICAgICAgYm9keS5zdHlsZS5tYXhIZWlnaHQgPSBib2R5LnNjcm9sbEhlaWdodCArICJweCI7CiAgICAgIH0KICAgIH0pOwogIH0pOwoKICAvLyAtLS0tLS0tLS0tLS0tLS0tIOuFuO2KuCDtmJXsi50gKOy9lOuEpDDrhbjtirggLyDquLDrs7jrhbjtirgpIC0tLS0tLS0tLS0tLS0tLS0KICBmdW5jdGlvbiBzZXROb3RlVHlwZSh0eXBlKXsKICAgIHN0YXRlLm5vdGVUeXBlID0gdHlwZTsKICAgICQoInZpZXcxIikuY2xhc3NMaXN0LnRvZ2dsZSgicGxhaW4iLCB0eXBlID09PSAicGxhaW4iKTsKICAgICQoInR5cGVDb3JuZWxsIikuY2xhc3NMaXN0LnRvZ2dsZSgic2VsIiwgdHlwZSA9PT0gImNvcm5lbGwiKTsKICAgICQoInR5cGVQbGFpbiIpLmNsYXNzTGlzdC50b2dnbGUoInNlbCIsIHR5cGUgPT09ICJwbGFpbiIpOwogICAgcGVyc2lzdFN0YXRlKCk7CiAgfQogICQoInR5cGVDb3JuZWxsIikuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBmdW5jdGlvbigpeyBzZXROb3RlVHlwZSgiY29ybmVsbCIpOyB9KTsKICAkKCJ0eXBlUGxhaW4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCl7IHNldE5vdGVUeXBlKCJwbGFpbiIpOyB9KTsKCiAgLy8gLS0tLS0tLS0tLS0tLS0tLSDsoIDsoITroKUg7KCI6rCQIOy2lOyglSAtLS0tLS0tLS0tLS0tLS0tCiAgLy8gT0xFRCDtmZTrqbTsnYAg7Y+J6regIOuwneq4sCjtnJjrj4Qp7JeQIOqxsOydmCDruYTroYDtlbTshJwg7KCE66Cl7J2EIOyUgCDigJQg7Z2wIOuwsOqyvSDrjIDruYQg7Ja866eI64KYIOyWtOuRkOybjOyhjOuKlOyngOuhnAogIC8vICLtmZTrqbQg7J6Q7LK0IiDsoIjqsJDrpaDsnYQg6rOE7IKw7ZWY6rOgLCDtmZTrqbTsnbQg7KCE7LK0IOuwsO2EsOumrCDshozrqqjsl5DshJwg7LCo7KeA7ZWY64qUIOu5hOykkSjstpTsoJUgMzUlKeydhCDsoIHsmqntlbQKICAvLyAi6riw6riwIOyghOyytCDsgqzsmqnsi5zqsIQiIOymneqwgO2PreydhCDrs7TsiJjsoIHsnLzroZwg7LaU7KCV7ZWc64ukLiDsi6TsoJwg6rCS7J2AIOq4sOq4sMK367Cd6riwwrfsgqzsmqntjKjthLTsl5Ag65Sw6528IOuLpOumhC4KICB2YXIgU0NSRUVOX1BPV0VSX1NIQVJFID0gMC4zNTsKICBmdW5jdGlvbiBlc3RpbWF0ZVNhdmluZ3ModGhlbWVJZHgpewogICAgdmFyIHJlZkx1bSA9IHJlbEx1bWluYW5jZShUSEVNRVNbMF0uYmcpOyAvLyDrrLTsp4Ag7ZmU7J207Yq4IOq4sOykgAogICAgdmFyIGN1ckx1bSA9IHJlbEx1bWluYW5jZShUSEVNRVNbdGhlbWVJZHhdLmJnKTsKICAgIHZhciBzY3JlZW5SZWR1Y3Rpb25QY3QgPSByZWZMdW0gPD0gMCA/IDAgOiBNYXRoLm1pbig5NSwgTWF0aC5tYXgoMCwgKDEgLSBjdXJMdW0vcmVmTHVtKSAqIDEwMCkpOwogICAgdmFyIGRldmljZUV4dHJhUGN0ID0gc2NyZWVuUmVkdWN0aW9uUGN0ICogU0NSRUVOX1BPV0VSX1NIQVJFOwogICAgcmV0dXJuIHsgc2NyZWVuUmVkdWN0aW9uUGN0OiBzY3JlZW5SZWR1Y3Rpb25QY3QsIGRldmljZUV4dHJhUGN0OiBkZXZpY2VFeHRyYVBjdCB9OwogIH0KICB2YXIgbG93UG93ZXJCdWJibGVUaW1lciA9IG51bGw7CiAgZnVuY3Rpb24gc2hvd0xvd1Bvd2VyQnViYmxlKGh0bWwpewogICAgdmFyIGIgPSAkKCJsb3dQb3dlckJ1YmJsZSIpOwogICAgYi5pbm5lckhUTUwgPSBodG1sOwogICAgYi5jbGFzc0xpc3QuYWRkKCJzaG93Iik7CiAgICBjbGVhclRpbWVvdXQobG93UG93ZXJCdWJibGVUaW1lcik7CiAgICBsb3dQb3dlckJ1YmJsZVRpbWVyID0gc2V0VGltZW91dChmdW5jdGlvbigpeyBiLmNsYXNzTGlzdC5yZW1vdmUoInNob3ciKTsgfSwgNDUwMCk7CiAgfQogICQoImZzTG93UG93ZXJCdG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCl7CiAgICBpZihzdGF0ZS5sb3dQb3dlclByZXZUaGVtZUlkeCA9PT0gbnVsbCl7CiAgICAgIC8vIOy8nOq4sDog7KeA6riIIO2FjOuniOulvCDquLDslrXtlbTrkZDqs6Ag7KCA7KCE66ClIO2FjOuniOuhnCDsoITtmZgKICAgICAgc3RhdGUubG93UG93ZXJQcmV2VGhlbWVJZHggPSBzdGF0ZS50aGVtZUlkeDsKICAgICAgc3RhdGUudGhlbWVJZHggPSA3OyAvLyDri6Ttgawg66y07KeAICjsoIDsoITroKUpCiAgICAgIGFwcGx5VGhlbWUoKTsKICAgICAgcmVuZGVyVGhlbWVHcmlkKCk7CiAgICAgICQoImZzTG93UG93ZXJCdG4iKS5jbGFzc0xpc3QuYWRkKCJvbiIpOwogICAgICBwZXJzaXN0U3RhdGUoKTsKICAgICAgdmFyIGFmdGVyID0gZXN0aW1hdGVTYXZpbmdzKDcpOwogICAgICBzaG93TG93UG93ZXJCdWJibGUoCiAgICAgICAgIuyggOyghOugpSDthYzrp4jroZwg67CU6r+o7Ja07JqULjxicj4iICsKICAgICAgICAi7ZmU66m0IOygiOqwkCDstpTsoJUg7JW9ICIgKyBNYXRoLnJvdW5kKGFmdGVyLnNjcmVlblJlZHVjdGlvblBjdCkgKyAiJSwgIiArCiAgICAgICAgIuyCrOyaqeyLnOqwhCDspp3qsIAg7LaU7KCVIOyVvSArIiArIE1hdGgucm91bmQoYWZ0ZXIuZGV2aWNlRXh0cmFQY3QpICsgIiUiICsKICAgICAgICAiPGJyPjxzbWFsbCBzdHlsZT0nb3BhY2l0eTouNjsnPijquLDquLDCt+uwneq4sOyXkCDrlLDrnbwg64us65287KeA64qUIOy2lOygley5mOyYiOyalC4g64uk7IucIOuIhOultOuptCDrkJjrj4zslYTqsIDsmpQpPC9zbWFsbD4iCiAgICAgICk7CiAgICB9IGVsc2UgewogICAgICAvLyDrgYTquLA6IOyggOyghOugpSDsoIHsmqkg7KCEIO2FjOuniOuhnCDsm5Dsg4Hrs7XqtawKICAgICAgc3RhdGUudGhlbWVJZHggPSBzdGF0ZS5sb3dQb3dlclByZXZUaGVtZUlkeDsKICAgICAgc3RhdGUubG93UG93ZXJQcmV2VGhlbWVJZHggPSBudWxsOwogICAgICBhcHBseVRoZW1lKCk7CiAgICAgIHJlbmRlclRoZW1lR3JpZCgpOwogICAgICAkKCJmc0xvd1Bvd2VyQnRuIikuY2xhc3NMaXN0LnJlbW92ZSgib24iKTsKICAgICAgcGVyc2lzdFN0YXRlKCk7CiAgICAgIHNob3dMb3dQb3dlckJ1YmJsZSgi7JuQ656YIO2FjOuniOuhnCDrkJjrj4zroLjslrTsmpQuIik7CiAgICB9CiAgfSk7CgogIC8vIC0tLS0tLS0tLS0tLS0tLS0g67ewIOyghO2ZmCAtLS0tLS0tLS0tLS0tLS0tCiAgZnVuY3Rpb24gc3dpdGNoVmlldyh2KXsKICAgIHN0YXRlLnZpZXcgPSB2OwogICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLnZpZXciKS5mb3JFYWNoKGZ1bmN0aW9uKGVsKXsgZWwuY2xhc3NMaXN0LnJlbW92ZSgiYWN0aXZlIik7IH0pOwogICAgJCgidmlldyIgKyB2KS5jbGFzc0xpc3QuYWRkKCJhY3RpdmUiKTsKICB9CgogIC8vIC0tLS0tLS0tLS0tLS0tLS0g7ZmU66m0IOuwqe2WpSAmIOyghOyytOuqqOuTnCAtLS0tLS0tLS0tLS0tLS0tCiAgZnVuY3Rpb24gc2V0T3JpZW50YXRpb25DaG9pY2Uobyl7CiAgICBzdGF0ZS5vcmllbnRhdGlvbiA9IG87CiAgICAkKCJvcmllbnRQb3J0cmFpdCIpLmNsYXNzTGlzdC50b2dnbGUoInNlbCIsIG8gPT09ICJwb3J0cmFpdCIpOwogICAgJCgib3JpZW50TGFuZHNjYXBlIikuY2xhc3NMaXN0LnRvZ2dsZSgic2VsIiwgbyA9PT0gImxhbmRzY2FwZSIpOwogICAgcGVyc2lzdFN0YXRlKCk7CiAgfQogICQoIm9yaWVudFBvcnRyYWl0IikuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBmdW5jdGlvbigpeyBzZXRPcmllbnRhdGlvbkNob2ljZSgicG9ydHJhaXQiKTsgfSk7CiAgJCgib3JpZW50TGFuZHNjYXBlIikuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBmdW5jdGlvbigpeyBzZXRPcmllbnRhdGlvbkNob2ljZSgibGFuZHNjYXBlIik7IH0pOwoKICBmdW5jdGlvbiBsb2NrT3JpZW50YXRpb24oKXsKICAgIGlmKHNjcmVlbi5vcmllbnRhdGlvbiAmJiBzY3JlZW4ub3JpZW50YXRpb24ubG9jayl7CiAgICAgIHNjcmVlbi5vcmllbnRhdGlvbi5sb2NrKHN0YXRlLm9yaWVudGF0aW9uKS5jYXRjaChmdW5jdGlvbigpe30pOwogICAgfQogIH0KICBmdW5jdGlvbiBpc05hdGl2ZUZ1bGxzY3JlZW4oKXsKICAgIHJldHVybiAhIShkb2N1bWVudC5mdWxsc2NyZWVuRWxlbWVudCB8fCBkb2N1bWVudC53ZWJraXRGdWxsc2NyZWVuRWxlbWVudCk7CiAgfQogIGZ1bmN0aW9uIGVudGVyRnVsbE1vZGUoKXsKICAgIHZhciBhcHAgPSAkKCJsbjAxQXBwIik7CiAgICBhcHAuY2xhc3NMaXN0LmFkZCgibG4wMS1mcyIpOwogICAgZG9jdW1lbnQuYm9keS5zdHlsZS5vdmVyZmxvdyA9ICJoaWRkZW4iOwogICAgdmFyIHJlcSA9IGFwcC5yZXF1ZXN0RnVsbHNjcmVlbiB8fCBhcHAud2Via2l0UmVxdWVzdEZ1bGxzY3JlZW4gfHwgYXBwLm1velJlcXVlc3RGdWxsU2NyZWVuIHx8IGFwcC5tc1JlcXVlc3RGdWxsc2NyZWVuOwogICAgaWYocmVxKXsgcmVxLmNhbGwoYXBwKS50aGVuKGxvY2tPcmllbnRhdGlvbikuY2F0Y2goZnVuY3Rpb24oKXt9KTsgfQogICAgc3dpdGNoVmlldygxKTsKICAgICQoInRiRnVsbEJ0biIpLmNsYXNzTGlzdC5hZGQoIm9uIik7CiAgICAkKCJ0YkZ1bGxCdG4iKS50aXRsZSA9ICLsoITssrTrqqjrk5wg7KKF66OMIjsKICB9CiAgZnVuY3Rpb24gZXhpdEZ1bGxNb2RlKCl7CiAgICB2YXIgYXBwID0gJCgibG4wMUFwcCIpOwogICAgYXBwLmNsYXNzTGlzdC5yZW1vdmUoImxuMDEtZnMiKTsKICAgIGRvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3cgPSAiIjsKICAgIGlmKGlzTmF0aXZlRnVsbHNjcmVlbigpKXsKICAgICAgdmFyIGV4aXQgPSBkb2N1bWVudC5leGl0RnVsbHNjcmVlbiB8fCBkb2N1bWVudC53ZWJraXRFeGl0RnVsbHNjcmVlbiB8fCBkb2N1bWVudC5tb3pDYW5jZWxGdWxsU2NyZWVuIHx8IGRvY3VtZW50Lm1zRXhpdEZ1bGxzY3JlZW47CiAgICAgIGlmKGV4aXQpeyBleGl0LmNhbGwoZG9jdW1lbnQpOyB9CiAgICB9CiAgICBpZihzY3JlZW4ub3JpZW50YXRpb24gJiYgc2NyZWVuLm9yaWVudGF0aW9uLnVubG9jayl7IHNjcmVlbi5vcmllbnRhdGlvbi51bmxvY2soKTsgfQogICAgJCgidGJGdWxsQnRuIikuY2xhc3NMaXN0LnJlbW92ZSgib24iKTsKICAgICQoInRiRnVsbEJ0biIpLnRpdGxlID0gIuyghOyytCDtmZTrqbTsnLzroZwg7YGs6rKMIOu0kOyalCI7CiAgICBzd2l0Y2hWaWV3KDApOwogIH0KICAkKCJsbjAtZnNCdG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGVudGVyRnVsbE1vZGUpOwogICQoInRiRnVsbEJ0biIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oKXsKICAgIGlmKCQoImxuMDFBcHAiKS5jbGFzc0xpc3QuY29udGFpbnMoImxuMDEtZnMiKSl7IGV4aXRGdWxsTW9kZSgpOyB9IGVsc2UgeyBlbnRlckZ1bGxNb2RlKCk7IH0KICB9KTsKICAkKCJmc0Nsb3NlTGVmdCIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZXhpdEZ1bGxNb2RlKTsKICAkKCJmc0Nsb3NlUmlnaHQiKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGV4aXRGdWxsTW9kZSk7CiAgJCgiZnNFeGl0QnRuIikuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBleGl0RnVsbE1vZGUpOwoKICAvLyAtLS0tLS0tLS0tLS0tLS0tIO2VreyDgSDsvJzsp5AgKO2DgOydtO2LgOuwlCDsoITqtawgKyDsoITssrTrqqjrk5wg67KE7Yq8IOuPmeq4sO2ZlCkgLS0tLS0tLS0tLS0tLS0tLQogIGZ1bmN0aW9uIHVwZGF0ZVdha2VVSSgpewogICAgJCgidGJXYWtlQnRuIikuY2xhc3NMaXN0LnRvZ2dsZSgib24iLCBzdGF0ZS53YWtlKTsKICAgICQoIndha2VCdG4yIikuY2xhc3NMaXN0LnRvZ2dsZSgib24iLCBzdGF0ZS53YWtlKTsKICAgICQoImZzV2FrZUJ0biIpLmNsYXNzTGlzdC50b2dnbGUoIm9uIiwgc3RhdGUud2FrZSk7CiAgICAkKCJmc1dha2VUb3BCdG4iKS5jbGFzc0xpc3QudG9nZ2xlKCJvbiIsIHN0YXRlLndha2UpOwogIH0KICBmdW5jdGlvbiB0b2dnbGVXYWtlKCl7CiAgICBpZighc3RhdGUud2FrZSl7CiAgICAgIGlmKCJ3YWtlTG9jayIgaW4gbmF2aWdhdG9yKXsKICAgICAgICBuYXZpZ2F0b3Iud2FrZUxvY2sucmVxdWVzdCgic2NyZWVuIikudGhlbihmdW5jdGlvbihsb2NrKXsKICAgICAgICAgIHN0YXRlLndha2VMb2NrT2JqID0gbG9jazsgc3RhdGUud2FrZSA9IHRydWU7IHVwZGF0ZVdha2VVSSgpOwogICAgICAgIH0pLmNhdGNoKGZ1bmN0aW9uKCl7IHN0YXRlLndha2UgPSB0cnVlOyB1cGRhdGVXYWtlVUkoKTsgfSk7CiAgICAgIH0gZWxzZSB7IHN0YXRlLndha2UgPSB0cnVlOyB1cGRhdGVXYWtlVUkoKTsgfQogICAgfSBlbHNlIHsKICAgICAgaWYoc3RhdGUud2FrZUxvY2tPYmopeyBzdGF0ZS53YWtlTG9ja09iai5yZWxlYXNlKCk7IHN0YXRlLndha2VMb2NrT2JqID0gbnVsbDsgfQogICAgICBzdGF0ZS53YWtlID0gZmFsc2U7IHVwZGF0ZVdha2VVSSgpOwogICAgfQogIH0KICAkKCJ0Yldha2VCdG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIHRvZ2dsZVdha2UpOwogICQoIndha2VCdG4yIikuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCB0b2dnbGVXYWtlKTsKICAkKCJmc1dha2VCdG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIHRvZ2dsZVdha2UpOwogICQoImZzV2FrZVRvcEJ0biIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgdG9nZ2xlV2FrZSk7CiAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcigidmlzaWJpbGl0eWNoYW5nZSIsIGZ1bmN0aW9uKCl7CiAgICBpZihkb2N1bWVudC52aXNpYmlsaXR5U3RhdGUgPT09ICJ2aXNpYmxlIiAmJiBzdGF0ZS53YWtlICYmICJ3YWtlTG9jayIgaW4gbmF2aWdhdG9yICYmICFzdGF0ZS53YWtlTG9ja09iail7CiAgICAgIG5hdmlnYXRvci53YWtlTG9jay5yZXF1ZXN0KCJzY3JlZW4iKS50aGVuKGZ1bmN0aW9uKGxvY2speyBzdGF0ZS53YWtlTG9ja09iaiA9IGxvY2s7IH0pLmNhdGNoKGZ1bmN0aW9uKCl7fSk7CiAgICB9CiAgfSk7CgogIC8vIC0tLS0tLS0tLS0tLS0tLS0g67Cw7YSw66asIC0tLS0tLS0tLS0tLS0tLS0KICBmdW5jdGlvbiByZW5kZXJCYXR0ZXJ5KGxldmVsLCBjaGFyZ2luZywgZGlzY2hhcmdpbmdUaW1lKXsKICAgIHZhciBwY3QgPSBNYXRoLnJvdW5kKGxldmVsICogMTAwKTsKICAgIHZhciB0eHQgPSAi8J+UiyAiICsgcGN0ICsgIiUiOwogICAgaWYoY2hhcmdpbmcpeyB0eHQgKz0gIiDCtyDstqnsoITspJEiOyB9CiAgICBlbHNlIGlmKGRpc2NoYXJnaW5nVGltZSAmJiBpc0Zpbml0ZShkaXNjaGFyZ2luZ1RpbWUpICYmIGRpc2NoYXJnaW5nVGltZSA+IDApewogICAgICB2YXIgaCA9IE1hdGguZmxvb3IoZGlzY2hhcmdpbmdUaW1lIC8gMzYwMCksIG0gPSBNYXRoLnJvdW5kKChkaXNjaGFyZ2luZ1RpbWUgJSAzNjAwKSAvIDYwKTsKICAgICAgdHh0ICs9ICIgwrcg7JW9ICIgKyBoICsgIuyLnOqwhCAiICsgbSArICLrtoQg7IKs7Jqp6rCA64qlKOy2lOyglSkiOwogICAgfSBlbHNlIHsKICAgICAgdmFyIGRyYWluUGVySG91ciA9IDQ7CiAgICAgIHR4dCArPSAiIMK3IOyVvSAiICsgKHBjdCAvIGRyYWluUGVySG91cikudG9GaXhlZCgxKSArICLsi5zqsIQg7IKs7Jqp6rCA64qlKOy2lOyglSkiOwogICAgfQogICAgJCgidGJCYXR0ZXJ5VG9wIikuaW5uZXJUZXh0ID0gdHh0OwogICAgJCgiZnNCYXR0ZXJ5VG9wIikuaW5uZXJUZXh0ID0gdHh0OwogIH0KICBpZigiZ2V0QmF0dGVyeSIgaW4gbmF2aWdhdG9yKXsKICAgIG5hdmlnYXRvci5nZXRCYXR0ZXJ5KCkudGhlbihmdW5jdGlvbihiYXQpewogICAgICBmdW5jdGlvbiB1cGQoKXsgcmVuZGVyQmF0dGVyeShiYXQubGV2ZWwsIGJhdC5jaGFyZ2luZywgYmF0LmRpc2NoYXJnaW5nVGltZSk7IH0KICAgICAgdXBkKCk7CiAgICAgIGJhdC5hZGRFdmVudExpc3RlbmVyKCJsZXZlbGNoYW5nZSIsIHVwZCk7CiAgICAgIGJhdC5hZGRFdmVudExpc3RlbmVyKCJjaGFyZ2luZ2NoYW5nZSIsIHVwZCk7CiAgICAgIGJhdC5hZGRFdmVudExpc3RlbmVyKCJkaXNjaGFyZ2luZ3RpbWVjaGFuZ2UiLCB1cGQpOwogICAgfSk7CiAgfSBlbHNlIHsKICAgICQoInRiQmF0dGVyeVRvcCIpLmlubmVyVGV4dCA9ICLrsLDthLDrpqwg7KCV67O0IOuvuOyngOybkCDruIzrnbzsmrDsoIAiOwogICAgJCgiZnNCYXR0ZXJ5VG9wIikuaW5uZXJUZXh0ID0gIuuwsO2EsOumrCDsoJXrs7Qg66+47KeA7JuQIjsKICB9CgogIC8vIC0tLS0tLS0tLS0tLS0tLS0g7Y6Y7J207KeAIC0tLS0tLS0tLS0tLS0tLS0KICBmdW5jdGlvbiByZW5kZXJEb3RzKCl7CiAgICB2YXIgd3JhcCA9ICQoImZzRG90cyIpOwogICAgd3JhcC5pbm5lckhUTUwgPSAiIjsKICAgIHZhciBuID0gc3RhdGUucGFnZXMubGVuZ3RoOwogICAgaWYobiA+IDQwKXsKICAgICAgLy8g7Y6Y7J207KeA6rCAIOyVhOyjvCDrp47snLzrqbQg7JWe65KkIOydvOu2gCArIOqwgOyatOuNsCDsoJAoLi4uKeycvOuhnCDstpXslb0KICAgICAgZm9yKHZhciBpPTA7aTw1O2krKyl7IGFkZERvdCh3cmFwLCBpKTsgfQogICAgICB2YXIgbWlkID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic3BhbiIpOyBtaWQuc3R5bGUub3BhY2l0eT0iLjUiOyBtaWQuc3R5bGUuZm9udFNpemU9IjEwcHgiOyBtaWQudGV4dENvbnRlbnQ9Ii4uLi4uLiI7CiAgICAgIHdyYXAuYXBwZW5kQ2hpbGQobWlkKTsKICAgICAgZm9yKHZhciBqPW4tNTtqPG47aisrKXsgYWRkRG90KHdyYXAsIGopOyB9CiAgICB9IGVsc2UgewogICAgICBmb3IodmFyIGs9MDtrPG47aysrKXsgYWRkRG90KHdyYXAsIGspOyB9CiAgICB9CiAgfQogIGZ1bmN0aW9uIGFkZERvdCh3cmFwLCBpZHgpewogICAgdmFyIGQgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJzcGFuIik7CiAgICBkLmNsYXNzTmFtZSA9ICJkb3QiICsgKGlkeCA9PT0gc3RhdGUucGFnZUlkeCA/ICIgY3VyIiA6ICIiKTsKICAgIHdyYXAuYXBwZW5kQ2hpbGQoZCk7CiAgfQoKICAvLyAtLS0tLS0tLS0tLS0tLS0tIO2OmOydtOyngCDtmITtmakg66+466as67O06riwICjrnpzrlKkpIC0tLS0tLS0tLS0tLS0tLS0KICBmdW5jdGlvbiByZW5kZXJQYWdlT3ZlcnZpZXcoKXsKICAgIHZhciBlbCA9ICQoInBhZ2VPdmVydmlld0NvdW50Iik7CiAgICBpZighZWwpIHJldHVybjsgLy8g7Iqk7YGs66a97Yq4IOyLpO2WiSDstIjrsJgo7JqU7IaM6rCAIOyVhOyngSDsl4bsnYQg65WMKSDrsKnslrQKICAgIGVsLmlubmVyVGV4dCA9IHN0YXRlLnBhZ2VzLmxlbmd0aCArICIgcGFnZSIgKyAoc3RhdGUucGFnZXMubGVuZ3RoID4gMSA/ICJzIiA6ICIiKTsKICAgIHZhciBsaXN0ID0gJCgicGFnZU92ZXJ2aWV3TGlzdCIpOwogICAgbGlzdC5pbm5lckhUTUwgPSAiIjsKICAgIHN0YXRlLnBhZ2VzLmZvckVhY2goZnVuY3Rpb24ocCwgaSl7CiAgICAgIHZhciByb3cgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJkaXYiKTsKICAgICAgcm93LmNsYXNzTmFtZSA9ICJwYWdlT3ZlcnZpZXdSb3ciOwogICAgICByb3cudGV4dENvbnRlbnQgPSAoaSsxKSArICIuICIgKyAocC50aXRsZSB8fCAi7KCc66qp7JeG7J2MIikgKyAiIMK3ICIgKyAocC5kYXRlIHx8ICIiKTsKICAgICAgbGlzdC5hcHBlbmRDaGlsZChyb3cpOwogICAgfSk7CiAgICByZW5kZXJQYWdlRGVsZXRlTGlzdCgpOwogIH0KICBmdW5jdGlvbiByZW5kZXJQYWdlRGVsZXRlTGlzdCgpewogICAgdmFyIGxpc3QgPSAkKCJwYWdlRGVsZXRlTGlzdCIpOwogICAgaWYoIWxpc3QpIHJldHVybjsKICAgIGxpc3QuaW5uZXJIVE1MID0gIiI7CiAgICBzdGF0ZS5wYWdlcy5mb3JFYWNoKGZ1bmN0aW9uKHAsIGkpewogICAgICB2YXIgcm93ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgibGFiZWwiKTsKICAgICAgcm93LmNsYXNzTmFtZSA9ICJwYWdlRGVsZXRlUm93IjsKICAgICAgdmFyIGNiID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgiaW5wdXQiKTsKICAgICAgY2IudHlwZSA9ICJjaGVja2JveCI7CiAgICAgIGNiLnZhbHVlID0gaTsKICAgICAgdmFyIHNwYW4gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJzcGFuIik7CiAgICAgIHNwYW4udGV4dENvbnRlbnQgPSAoaSsxKSArICJfIiArIChwLnRpdGxlIHx8ICLsoJzrqqnsl4bsnYwiKTsKICAgICAgcm93LmFwcGVuZENoaWxkKGNiKTsKICAgICAgcm93LmFwcGVuZENoaWxkKHNwYW4pOwogICAgICBsaXN0LmFwcGVuZENoaWxkKHJvdyk7CiAgICB9KTsKICB9CgogIC8vIC0tLS0tLS0tLS0tLS0tLS0g7Luk7Iqk7YWAIO2ZleyduCDtjJ3sl4UgKG5hdGl2ZSBhbGVydC9jb25maXJt7J2AIOyghOyytOuqqOuTnOulvCDquajshJwg7IKs7Jqp7ZWY7KeAIOyViuydjCkgLS0tLS0tLS0tLS0tLS0tLQogIHZhciBjb25maXJtQ2FsbGJhY2sgPSBudWxsOwogIGZ1bmN0aW9uIHNob3dDb25maXJtKG1zZywgb25Payl7CiAgICAkKCJjb25maXJtTW9kYWxNc2ciKS5pbm5lclRleHQgPSBtc2c7CiAgICBjb25maXJtQ2FsbGJhY2sgPSBvbk9rOwogICAgJCgiY29uZmlybU1vZGFsIikuY2xhc3NMaXN0LmFkZCgic2hvdyIpOwogIH0KICBmdW5jdGlvbiBoaWRlQ29uZmlybSgpewogICAgJCgiY29uZmlybU1vZGFsIikuY2xhc3NMaXN0LnJlbW92ZSgic2hvdyIpOwogICAgY29uZmlybUNhbGxiYWNrID0gbnVsbDsKICB9CiAgJCgiY29uZmlybU1vZGFsQ2FuY2VsIikuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBoaWRlQ29uZmlybSk7CiAgJCgiY29uZmlybU1vZGFsT2siKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCl7CiAgICB2YXIgY2IgPSBjb25maXJtQ2FsbGJhY2s7CiAgICBoaWRlQ29uZmlybSgpOwogICAgaWYoY2IpIGNiKCk7CiAgfSk7CgogIC8vIC0tLS0tLS0tLS0tLS0tLS0g7Y6Y7J207KeAIOyCreygnCAtLS0tLS0tLS0tLS0tLS0tCiAgZnVuY3Rpb24gZGVsZXRlQWxsUGFnZXMoKXsKICAgIHN0YXRlLnBhZ2VzID0gW2JsYW5rUGFnZSgpXTsKICAgIHN0YXRlLnBhZ2VJZHggPSAwOwogICAgbG9hZFBhZ2UoKTsKICAgIHBlcnNpc3RTdGF0ZSgpOwogIH0KICBmdW5jdGlvbiBkZWxldGVDdXJyZW50UGFnZSgpewogICAgaWYoc3RhdGUucGFnZXMubGVuZ3RoIDw9IDEpewogICAgICBzdGF0ZS5wYWdlc1swXSA9IGJsYW5rUGFnZSgpOyAvLyDsnKDsnbztlZwg7Y6Y7J207KeA66m0IOyCreygnCDrjIDsi6Ag64K07Jqp66eMIOu5hOybgAogICAgICBzdGF0ZS5wYWdlSWR4ID0gMDsKICAgIH0gZWxzZSB7CiAgICAgIHN0YXRlLnBhZ2VzLnNwbGljZShzdGF0ZS5wYWdlSWR4LCAxKTsKICAgICAgaWYoc3RhdGUucGFnZUlkeCA+PSBzdGF0ZS5wYWdlcy5sZW5ndGgpeyBzdGF0ZS5wYWdlSWR4ID0gc3RhdGUucGFnZXMubGVuZ3RoIC0gMTsgfQogICAgfQogICAgbG9hZFBhZ2UoKTsKICAgIHBlcnNpc3RTdGF0ZSgpOwogIH0KICBmdW5jdGlvbiBkZWxldGVTZWxlY3RlZFBhZ2VzKGluZGljZXMpewogICAgdmFyIHNvcnRlZCA9IGluZGljZXMuc2xpY2UoKS5zb3J0KGZ1bmN0aW9uKGEsYil7IHJldHVybiBiIC0gYTsgfSk7CiAgICBzb3J0ZWQuZm9yRWFjaChmdW5jdGlvbihpKXsgc3RhdGUucGFnZXMuc3BsaWNlKGksIDEpOyB9KTsKICAgIGlmKHN0YXRlLnBhZ2VzLmxlbmd0aCA9PT0gMCl7IHN0YXRlLnBhZ2VzID0gW2JsYW5rUGFnZSgpXTsgfQogICAgaWYoc3RhdGUucGFnZUlkeCA+PSBzdGF0ZS5wYWdlcy5sZW5ndGgpeyBzdGF0ZS5wYWdlSWR4ID0gc3RhdGUucGFnZXMubGVuZ3RoIC0gMTsgfQogICAgbG9hZFBhZ2UoKTsKICAgIHBlcnNpc3RTdGF0ZSgpOwogIH0KICAkKCJkZWxldGVBbGxCdG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCl7CiAgICBzaG93Q29uZmlybSgi7KCV66eQIOuqqOuToCDtjpjsnbTsp4Drpbwg7IKt7KCc7ZWg6rmM7JqUPyDrkJjrj4zrprQg7IiYIOyXhuyWtOyalC4iLCBkZWxldGVBbGxQYWdlcyk7CiAgfSk7CiAgJCgiZGVsZXRlU2VsZWN0ZWRCdG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCl7CiAgICB2YXIgY2hlY2tlZCA9IEFycmF5LnByb3RvdHlwZS5zbGljZS5jYWxsKCQoInBhZ2VEZWxldGVMaXN0IikucXVlcnlTZWxlY3RvckFsbCgiaW5wdXQ6Y2hlY2tlZCIpKQogICAgICAubWFwKGZ1bmN0aW9uKGNiKXsgcmV0dXJuIHBhcnNlSW50KGNiLnZhbHVlLCAxMCk7IH0pOwogICAgaWYoY2hlY2tlZC5sZW5ndGggPT09IDApIHJldHVybjsKICAgIHNob3dDb25maXJtKGNoZWNrZWQubGVuZ3RoICsgIuqwnCDtjpjsnbTsp4Drpbwg7IKt7KCc7ZWg6rmM7JqUPyDrkJjrj4zrprQg7IiYIOyXhuyWtOyalC4iLCBmdW5jdGlvbigpewogICAgICBkZWxldGVTZWxlY3RlZFBhZ2VzKGNoZWNrZWQpOwogICAgfSk7CiAgfSk7CiAgJCgiZnNSZXNldEFsbEJ0biIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oKXsKICAgIHNob3dDb25maXJtKCLsoITssrTrqqjrk5zsnZgg66qo65OgIO2OmOydtOyngOulvCDsgq3soJztlaDquYzsmpQ/IOuQmOuPjOumtCDsiJgg7JeG7Ja07JqULiIsIGRlbGV0ZUFsbFBhZ2VzKTsKICB9KTsKICAkKCJmc0RlbGV0ZUN1cnJlbnRCdG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCl7CiAgICBzaG93Q29uZmlybSgi7KeA6riIIOuztOydtOuKlCDtjpjsnbTsp4Drpbwg7IKt7KCc7ZWg6rmM7JqUPyDrkJjrj4zrprQg7IiYIOyXhuyWtOyalC4iLCBkZWxldGVDdXJyZW50UGFnZSk7CiAgfSk7CgogIGZ1bmN0aW9uIGxvYWRQYWdlKCl7CiAgICB2YXIgcCA9IHN0YXRlLnBhZ2VzW3N0YXRlLnBhZ2VJZHhdOwogICAgJCgidjEtdGl0bGUiKS5pbm5lclRleHQgPSBwLnRpdGxlOwogICAgJCgidjEtZGF0ZSIpLmlubmVyVGV4dCA9IHAuZGF0ZTsKICAgICQoInYxLWN1ZXMiKS5pbm5lclRleHQgPSBwLmN1ZXM7CiAgICAkKCJ2MS1ub3RlcyIpLmlubmVyVGV4dCA9IHAubm90ZXM7CiAgICAkKCJ2MS1zdW1tYXJ5IikuaW5uZXJUZXh0ID0gcC5zdW1tYXJ5OwogICAgdmFyIGxhYmVsID0gKHN0YXRlLnBhZ2VJZHgrMSkgKyAiIC8gIiArIHN0YXRlLnBhZ2VzLmxlbmd0aDsKICAgICQoImZzUGFnZUNvdW50IikuaW5uZXJUZXh0ID0gbGFiZWw7CiAgICByZW5kZXJEb3RzKCk7CiAgICByZW5kZXJQYWdlT3ZlcnZpZXcoKTsKICB9CiAgZnVuY3Rpb24gc2F2ZVBhZ2UoKXsKICAgIHZhciBwID0gc3RhdGUucGFnZXNbc3RhdGUucGFnZUlkeF07CiAgICBwLnRpdGxlID0gJCgidjEtdGl0bGUiKS5pbm5lclRleHQ7CiAgICBwLmRhdGUgPSAkKCJ2MS1kYXRlIikuaW5uZXJUZXh0OwogICAgcC5jdWVzID0gJCgidjEtY3VlcyIpLmlubmVyVGV4dDsKICAgIHAubm90ZXMgPSAkKCJ2MS1ub3RlcyIpLmlubmVyVGV4dDsKICAgIHAuc3VtbWFyeSA9ICQoInYxLXN1bW1hcnkiKS5pbm5lclRleHQ7CiAgICBwZXJzaXN0U3RhdGUoKTsKICAgIHJlbmRlclBhZ2VPdmVydmlldygpOwogIH0KICBbInYxLXRpdGxlIiwidjEtZGF0ZSIsInYxLWN1ZXMiLCJ2MS1ub3RlcyIsInYxLXN1bW1hcnkiXS5mb3JFYWNoKGZ1bmN0aW9uKGlkKXsKICAgICQoaWQpLmFkZEV2ZW50TGlzdGVuZXIoImlucHV0Iiwgc2F2ZVBhZ2UpOwogIH0pOwogIGZ1bmN0aW9uIGdvUGFnZShkZWx0YSl7CiAgICBzYXZlUGFnZSgpOyAvLyDtjpjsnbTsp4Ag64SY6riw6riwIOyghCDtmITsnqwg64K07JqpIOyggOyepSjssrTtgawpCiAgICB2YXIgdGFyZ2V0ID0gc3RhdGUucGFnZUlkeCArIGRlbHRhOwogICAgaWYodGFyZ2V0IDwgMCkgcmV0dXJuOwogICAgaWYodGFyZ2V0ID49IHN0YXRlLnBhZ2VzLmxlbmd0aCl7CiAgICAgIHN0YXRlLnBhZ2VzLnB1c2goYmxhbmtQYWdlKCkpOwogICAgfQogICAgc3RhdGUucGFnZUlkeCA9IHRhcmdldDsKICAgIGxvYWRQYWdlKCk7CiAgICBwZXJzaXN0U3RhdGUoKTsKICB9CiAgJCgiZnNQcmV2IikuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBmdW5jdGlvbigpeyBnb1BhZ2UoLTEpOyB9KTsKICAkKCJmc05leHQiKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCl7IGdvUGFnZSgxKTsgfSk7CgogIC8vIOu3sO2PrO2KuCDsoozsmrAg7Iqk7JmA7J207ZSEICsg65Oc656Y6re466GcIO2OmOydtOyngCDrhJjquLDquLAKICAoZnVuY3Rpb24oKXsKICAgIHZhciBzeD1udWxsLCBzeT1udWxsLCBzdD1udWxsOwogICAgJCgidmlld3BvcnQiKS5hZGRFdmVudExpc3RlbmVyKCJ0b3VjaHN0YXJ0IiwgZnVuY3Rpb24oZSl7CiAgICAgIGlmKGUudG91Y2hlcy5sZW5ndGggIT09IDEpIHJldHVybjsKICAgICAgc3ggPSBlLnRvdWNoZXNbMF0uY2xpZW50WDsgc3kgPSBlLnRvdWNoZXNbMF0uY2xpZW50WTsgc3QgPSBEYXRlLm5vdygpOwogICAgfSwge3Bhc3NpdmU6dHJ1ZX0pOwogICAgJCgidmlld3BvcnQiKS5hZGRFdmVudExpc3RlbmVyKCJ0b3VjaGVuZCIsIGZ1bmN0aW9uKGUpewogICAgICBpZihzeCA9PT0gbnVsbCB8fCBzdGF0ZS52aWV3ICE9PSAxKXsgc3ggPSBudWxsOyByZXR1cm47IH0KICAgICAgdmFyIHQgPSBlLmNoYW5nZWRUb3VjaGVzWzBdOwogICAgICB2YXIgZHggPSB0LmNsaWVudFggLSBzeCwgZHkgPSB0LmNsaWVudFkgLSBzeSwgZHQgPSBEYXRlLm5vdygpIC0gc3Q7CiAgICAgIHN4ID0gbnVsbDsKICAgICAgaWYoTWF0aC5hYnMoZHgpID4gNzAgJiYgTWF0aC5hYnMoZHgpID4gTWF0aC5hYnMoZHkpICogMS44ICYmIGR0IDwgNjAwKXsKICAgICAgICBpZihkeCA8IDApeyBnb1BhZ2UoMSk7IH0gZWxzZSB7IGdvUGFnZSgtMSk7IH0KICAgICAgfQogICAgfSk7CiAgfSkoKTsKCiAgLy8gLS0tLS0tLS0tLS0tLS0tLSDtj7Dtirgg7YGs6riwICjrnbzsnbgg67Cw6rK9IOqwhOqyqeuPhCDtlajqu5gg6rCx7IugKSAtLS0tLS0tLS0tLS0tLS0tCiAgZnVuY3Rpb24gc2V0Rm9udChweCl7CiAgICBweCA9IE1hdGgubWF4KDEyLCBNYXRoLm1pbig0MCwgcHgpKTsKICAgIHN0YXRlLmZvbnRTaXplID0gcHg7CiAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoIi0tZm9udC1zaXplIiwgcHggKyAicHgiKTsKICAgICQoImZvbnRTaXplTGFiZWwiKS5pbm5lclRleHQgPSBweCArICJweCI7CiAgICBhcHBseVRoZW1lKCk7IC8vIOykhCDqsITqsqkobGluZS1waXRjaCnsnYQg7IOIIO2PsO2KuCDtgazquLDsl5Ag66ee7LawIOyerOqzhOyCsAogIH0KICAkKCJmb250TWludXMiKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCl7IHNldEZvbnQoc3RhdGUuZm9udFNpemUgLSAxKTsgcGVyc2lzdFN0YXRlKCk7IH0pOwogICQoImZvbnRQbHVzIikuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBmdW5jdGlvbigpeyBzZXRGb250KHN0YXRlLmZvbnRTaXplICsgMSk7IHBlcnNpc3RTdGF0ZSgpOyB9KTsKICAkKCJmc0ZvbnRNaW51cyIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oKXsgc2V0Rm9udChzdGF0ZS5mb250U2l6ZSAtIDEpOyBwZXJzaXN0U3RhdGUoKTsgfSk7CiAgJCgiZnNGb250UGx1cyIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oKXsgc2V0Rm9udChzdGF0ZS5mb250U2l6ZSArIDEpOyBwZXJzaXN0U3RhdGUoKTsgfSk7CgogIChmdW5jdGlvbigpewogICAgdmFyIHN0YXJ0RGlzdCA9IG51bGwsIHN0YXJ0U2l6ZSA9IG51bGw7CiAgICBmdW5jdGlvbiBkaXN0KHQpeyB2YXIgZHg9dFswXS5jbGllbnRYLXRbMV0uY2xpZW50WCwgZHk9dFswXS5jbGllbnRZLXRbMV0uY2xpZW50WTsgcmV0dXJuIE1hdGguc3FydChkeCpkeCtkeSpkeSk7IH0KICAgICQoInZpZXdwb3J0IikuYWRkRXZlbnRMaXN0ZW5lcigidG91Y2hzdGFydCIsIGZ1bmN0aW9uKGUpewogICAgICBpZihlLnRvdWNoZXMubGVuZ3RoID09PSAyKXsgc3RhcnREaXN0ID0gZGlzdChlLnRvdWNoZXMpOyBzdGFydFNpemUgPSBzdGF0ZS5mb250U2l6ZTsgfQogICAgfSwge3Bhc3NpdmU6dHJ1ZX0pOwogICAgJCgidmlld3BvcnQiKS5hZGRFdmVudExpc3RlbmVyKCJ0b3VjaG1vdmUiLCBmdW5jdGlvbihlKXsKICAgICAgaWYoZS50b3VjaGVzLmxlbmd0aCA9PT0gMiAmJiBzdGFydERpc3QpewogICAgICAgIHZhciBzY2FsZSA9IGRpc3QoZS50b3VjaGVzKSAvIHN0YXJ0RGlzdDsKICAgICAgICBzZXRGb250KE1hdGgucm91bmQoc3RhcnRTaXplICogc2NhbGUpKTsKICAgICAgfQogICAgfSwge3Bhc3NpdmU6dHJ1ZX0pOwogICAgJCgidmlld3BvcnQiKS5hZGRFdmVudExpc3RlbmVyKCJ0b3VjaGVuZCIsIGZ1bmN0aW9uKGUpewogICAgICBpZihlLnRvdWNoZXMubGVuZ3RoIDwgMil7IHN0YXJ0RGlzdCA9IG51bGw7IHBlcnNpc3RTdGF0ZSgpOyB9CiAgICB9KTsKICB9KSgpOwoKICAvLyAtLS0tLS0tLS0tLS0tLS0tIOyZuOu2gCDtgqTrs7Trk5wg66qo65OcIC0tLS0tLS0tLS0tLS0tLS0KICBmdW5jdGlvbiBzZXRFeHRLZXlib2FyZChvbil7CiAgICBzdGF0ZS5leHRLZXlib2FyZCA9IG9uOwogICAgWyJ2MS10aXRsZSIsInYxLWRhdGUiLCJ2MS1jdWVzIiwidjEtbm90ZXMiLCJ2MS1zdW1tYXJ5Il0uZm9yRWFjaChmdW5jdGlvbihpZCl7CiAgICAgIHZhciBlbCA9ICQoaWQpOwogICAgICBpZihvbil7IGVsLnNldEF0dHJpYnV0ZSgiaW5wdXRtb2RlIiwibm9uZSIpOyB9IGVsc2UgeyBlbC5yZW1vdmVBdHRyaWJ1dGUoImlucHV0bW9kZSIpOyB9CiAgICB9KTsKICAgICQoImV4dEtiQnRuIikuY2xhc3NMaXN0LnRvZ2dsZSgib24iLCBvbik7CiAgICAkKCJmc0V4dEtiQnRuIikuY2xhc3NMaXN0LnRvZ2dsZSgib24iLCBvbik7CiAgICAkKCJmc0V4dEtiQnRuIikuaW5uZXJUZXh0ID0gIuKMqCDsmbjrtoDtgqTrs7Trk5wgIiArIChvbiA/ICJPTiIgOiAiT0ZGIik7CiAgICBwZXJzaXN0U3RhdGUoKTsKICB9CiAgJCgiZXh0S2JCdG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCl7IHNldEV4dEtleWJvYXJkKCFzdGF0ZS5leHRLZXlib2FyZCk7IH0pOwogICQoImZzRXh0S2JCdG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCl7IHNldEV4dEtleWJvYXJkKCFzdGF0ZS5leHRLZXlib2FyZCk7IH0pOwoKICAvLyAtLS0tLS0tLS0tLS0tLS0tIO2ZlOyDgSDtgqTrs7Trk5zqsIAgU1VNTUFSWeulvCDqsIDrpqzripQg66y47KCcIOuMgOydkSAtLS0tLS0tLS0tLS0tLS0tCiAgLy8gMSkg7Y+s7Luk7Iqk65CcIOyeheugpey5uOydhCDsgrTsp50g7KeA7JewIO2bhCDrs7TsnbTripQg7JiB7Jet7Jy866GcIOyKpO2BrOuhpAogIFsidjEtdGl0bGUiLCJ2MS1kYXRlIiwidjEtY3VlcyIsInYxLW5vdGVzIiwidjEtc3VtbWFyeSJdLmZvckVhY2goZnVuY3Rpb24oaWQpewogICAgJChpZCkuYWRkRXZlbnRMaXN0ZW5lcigiZm9jdXMiLCBmdW5jdGlvbigpewogICAgICBzZXRUaW1lb3V0KGZ1bmN0aW9uKCl7CiAgICAgICAgdHJ5eyAkKGlkKS5zY3JvbGxJbnRvVmlldyh7YmxvY2s6Im5lYXJlc3QiLCBiZWhhdmlvcjoic21vb3RoIn0pOyB9Y2F0Y2goZSl7fQogICAgICB9LCAzMDApOwogICAgfSk7CiAgfSk7CiAgLy8gMikg7ZmU7IOBIO2CpOuztOuTnOqwgCDsmKzrnbzsmKTrqbQg7Iuk7KCcIOuztOydtOuKlCDrhpLsnbQodmlzdWFsVmlld3BvcnQp7JeQIOunnuy2sCDsnITsoK8g64aS7J2066W8IOykhOyXrOyEnAogIC8vICAgIO2VmOuLqChTVU1NQVJZLCDrqZTribTrsJQp7J20IO2CpOuztOuTnCDrkqTroZwg6rCA66Ck7KeA7KeAIOyViuqyjCDtlagKICBpZih3aW5kb3cudmlzdWFsVmlld3BvcnQpewogICAgd2luZG93LnZpc3VhbFZpZXdwb3J0LmFkZEV2ZW50TGlzdGVuZXIoInJlc2l6ZSIsIGZ1bmN0aW9uKCl7CiAgICAgIHZhciBhcHAgPSAkKCJsbjAxQXBwIik7CiAgICAgIGlmKCFhcHAuY2xhc3NMaXN0LmNvbnRhaW5zKCJsbjAxLWZzIikpIHJldHVybjsKICAgICAgdmFyIHZoID0gd2luZG93LnZpc3VhbFZpZXdwb3J0LmhlaWdodDsKICAgICAgaWYodmggPCB3aW5kb3cuaW5uZXJIZWlnaHQgLSA2MCl7CiAgICAgICAgYXBwLnN0eWxlLmhlaWdodCA9IHZoICsgInB4IjsKICAgICAgfSBlbHNlIHsKICAgICAgICBhcHAuc3R5bGUuaGVpZ2h0ID0gIiI7CiAgICAgIH0KICAgIH0pOwogIH0KCiAgLy8gLS0tLS0tLS0tLS0tLS0tLSDtjIzsnbzrqoUg6rec7LmZOiBZWU1NRERf7KCc66qpICjsoJzrqqkg7JeG7Jy866m0ICJ0aXRsZSIpIC0tLS0tLS0tLS0tLS0tLS0KICBmdW5jdGlvbiBmaWxlRGF0ZVByZWZpeCgpewogICAgdmFyIGQgPSBuZXcgRGF0ZSgpOwogICAgZnVuY3Rpb24gcGFkMihuKXsgcmV0dXJuIG4gPCAxMCA/ICIwIituIDogIiIrbjsgfQogICAgcmV0dXJuIFN0cmluZyhkLmdldEZ1bGxZZWFyKCkpLnNsaWNlKDIpICsgcGFkMihkLmdldE1vbnRoKCkrMSkgKyBwYWQyKGQuZ2V0RGF0ZSgpKTsKICB9CiAgZnVuY3Rpb24gYnVpbGRGaWxlTmFtZSgpewogICAgdmFyIHQgPSAoc3RhdGUucGFnZXNbMF0gJiYgc3RhdGUucGFnZXNbMF0udGl0bGUpID8gc3RhdGUucGFnZXNbMF0udGl0bGUudHJpbSgpIDogIiI7CiAgICBpZighdCkgdCA9ICJ0aXRsZSI7CiAgICB0ID0gdC5yZXBsYWNlKC9bXFwvOio/Ijw+fF0vZywgIl8iKTsgLy8g7YyM7J2866qF7JeQIOuquyDsk7DripQg66y47J6QIOygleumrAogICAgcmV0dXJuIGZpbGVEYXRlUHJlZml4KCkgKyAiXyIgKyB0OwogIH0KCiAgLy8gLS0tLS0tLS0tLS0tLS0tLSDqs7XsnKAgVVJMIC0tLS0tLS0tLS0tLS0tLS0KICBmdW5jdGlvbiBidWlsZFNoYXJlVXJsKCl7CiAgICBzYXZlUGFnZSgpOwogICAgdmFyIHAgPSBzdGF0ZS5wYWdlc1tzdGF0ZS5wYWdlSWR4XTsKICAgIHZhciBlbmNvZGVkID0gZW5jb2RlVVJJQ29tcG9uZW50KGJ0b2EodW5lc2NhcGUoZW5jb2RlVVJJQ29tcG9uZW50KEpTT04uc3RyaW5naWZ5KHApKSkpKTsKICAgIHJldHVybiBsb2NhdGlvbi5vcmlnaW4gKyBsb2NhdGlvbi5wYXRobmFtZSArICIjbm90ZT0iICsgZW5jb2RlZDsKICB9CiAgZnVuY3Rpb24gbG9hZEZyb21VcmxIYXNoKCl7CiAgICB2YXIgbSA9IGxvY2F0aW9uLmhhc2gubWF0Y2goL25vdGU9KFteJl0rKS8pOwogICAgaWYoIW0pIHJldHVybjsKICAgIHRyeXsKICAgICAgdmFyIGpzb24gPSBkZWNvZGVVUklDb21wb25lbnQoZXNjYXBlKGF0b2IoZGVjb2RlVVJJQ29tcG9uZW50KG1bMV0pKSkpOwogICAgICB2YXIgcCA9IEpTT04ucGFyc2UoanNvbik7CiAgICAgIHN0YXRlLnBhZ2VzID0gW3BdOyBzdGF0ZS5wYWdlSWR4ID0gMDsgbG9hZFBhZ2UoKTsKICAgIH1jYXRjaChlKXt9CiAgfQogIGZ1bmN0aW9uIG5vdGVUZXh0KHApewogICAgcmV0dXJuICJbIiArIChwLnRpdGxlIHx8ICLsoJzrqqnsl4bsnYwiKSArICJdIiArIChwLmRhdGUgPyAiICgiICsgcC5kYXRlICsgIikiIDogIiIpICsKICAgICAgIlxuXG5bQ1VFU11cbiIgKyBwLmN1ZXMgKyAiXG5cbltOT1RFUy9ERVRBSUxTXVxuIiArIHAubm90ZXMgKyAiXG5cbltTVU1NQVJZXVxuIiArIHAuc3VtbWFyeTsKICB9CiAgZnVuY3Rpb24gYWxsUGFnZXNUZXh0KCl7CiAgICByZXR1cm4gc3RhdGUucGFnZXMubWFwKGZ1bmN0aW9uKHAsIGkpewogICAgICByZXR1cm4gIuKUgOKUgOKUgOKUgOKUgCDtjpjsnbTsp4AgIiArIChpKzEpICsgIiAvICIgKyBzdGF0ZS5wYWdlcy5sZW5ndGggKyAiIOKUgOKUgOKUgOKUgOKUgFxuIiArIG5vdGVUZXh0KHApOwogICAgfSkuam9pbigiXG5cbiIpOwogIH0KCiAgLy8gLS0tLS0tLS0tLS0tLS0tLSDqs7XsnKAv7KCA7J6lIO2Gte2VqSDtjJ3sl4UgLS0tLS0tLS0tLS0tLS0tLQogIGZ1bmN0aW9uIG9wZW5TaGFyZU1vZGFsKCl7CiAgICB2YXIgdXJsID0gYnVpbGRTaGFyZVVybCgpOwogICAgJCgic2hhcmVMb25nVXJsQm94IikuaW5uZXJUZXh0ID0gdXJsOwogICAgJCgic2hhcmVTaG9ydFVybEJveCIpLmlubmVyVGV4dCA9ICLslYTrnpgg67KE7Yq87Jy866GcIOunjOuTpOq4sCI7CiAgICAkKCJzaGFyZU1ha2VTaG9ydCIpLnN0eWxlLmRpc3BsYXkgPSAiIjsKICAgICQoInNoYXJlQ29weVNob3J0Iikuc3R5bGUuZGlzcGxheSA9ICJub25lIjsKICAgICQoInNoYXJlTW9kYWwiKS5jbGFzc0xpc3QuYWRkKCJzaG93Iik7CiAgfQogIGZ1bmN0aW9uIGNsb3NlU2hhcmVNb2RhbCgpeyAkKCJzaGFyZU1vZGFsIikuY2xhc3NMaXN0LnJlbW92ZSgic2hvdyIpOyB9CiAgJCgidGJTaGFyZUJ0biIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgb3BlblNoYXJlTW9kYWwpOwogICQoImZzU2hhcmVCdG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIG9wZW5TaGFyZU1vZGFsKTsKICAkKCJzaGFyZU1vZGFsQ2xvc2UiKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGNsb3NlU2hhcmVNb2RhbCk7CiAgJCgic2hhcmVNb2RhbCIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oZSl7IGlmKGUudGFyZ2V0LmlkID09PSAic2hhcmVNb2RhbCIpIGNsb3NlU2hhcmVNb2RhbCgpOyB9KTsKCiAgJCgic2hhcmVDb3B5TG9uZyIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oKXsKICAgIHZhciB1cmwgPSAkKCJzaGFyZUxvbmdVcmxCb3giKS5pbm5lclRleHQ7CiAgICBpZihuYXZpZ2F0b3IuY2xpcGJvYXJkICYmIG5hdmlnYXRvci5jbGlwYm9hcmQud3JpdGVUZXh0KXsKICAgICAgbmF2aWdhdG9yLmNsaXBib2FyZC53cml0ZVRleHQodXJsKS50aGVuKGZ1bmN0aW9uKCl7ICQoInNoYXJlQ29weUxvbmciKS5pbm5lclRleHQgPSAi67O17IKs65CoISI7IHNldFRpbWVvdXQoZnVuY3Rpb24oKXsgJCgic2hhcmVDb3B5TG9uZyIpLmlubmVyVGV4dCA9ICLrs7XsgqwiOyB9LCAxMjAwKTsgfSk7CiAgICB9CiAgfSk7CiAgJCgic2hhcmVNYWtlU2hvcnQiKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCl7CiAgICB2YXIgdXJsID0gJCgic2hhcmVMb25nVXJsQm94IikuaW5uZXJUZXh0OwogICAgJCgic2hhcmVTaG9ydFVybEJveCIpLmlubmVyVGV4dCA9ICLrp4zrk5zripQg7KSR4oCmIjsKICAgIGZldGNoKCJodHRwczovL3Rpbnl1cmwuY29tL2FwaS1jcmVhdGUucGhwP3VybD0iICsgZW5jb2RlVVJJQ29tcG9uZW50KHVybCkpCiAgICAgIC50aGVuKGZ1bmN0aW9uKHIpeyByZXR1cm4gci50ZXh0KCk7IH0pCiAgICAgIC50aGVuKGZ1bmN0aW9uKHNob3J0KXsKICAgICAgICAkKCJzaGFyZVNob3J0VXJsQm94IikuaW5uZXJUZXh0ID0gc2hvcnQ7CiAgICAgICAgJCgic2hhcmVNYWtlU2hvcnQiKS5zdHlsZS5kaXNwbGF5ID0gIm5vbmUiOwogICAgICAgICQoInNoYXJlQ29weVNob3J0Iikuc3R5bGUuZGlzcGxheSA9ICIiOwogICAgICB9KQogICAgICAuY2F0Y2goZnVuY3Rpb24oKXsKICAgICAgICAkKCJzaGFyZVNob3J0VXJsQm94IikuaW5uZXJUZXh0ID0gIuynp+ydgCBVUkwg7IOd7ISxIOyLpO2MqCAo64Sk7Yq47JuM7YGsIOygnO2VnCDtmZjqsr3snbwg7IiYIOyeiOyWtOyalCkiOwogICAgICB9KTsKICB9KTsKICAkKCJzaGFyZUNvcHlTaG9ydCIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oKXsKICAgIHZhciB1cmwgPSAkKCJzaGFyZVNob3J0VXJsQm94IikuaW5uZXJUZXh0OwogICAgaWYobmF2aWdhdG9yLmNsaXBib2FyZCAmJiBuYXZpZ2F0b3IuY2xpcGJvYXJkLndyaXRlVGV4dCl7CiAgICAgIG5hdmlnYXRvci5jbGlwYm9hcmQud3JpdGVUZXh0KHVybCkudGhlbihmdW5jdGlvbigpeyAkKCJzaGFyZUNvcHlTaG9ydCIpLmlubmVyVGV4dCA9ICLrs7XsgqzrkKghIjsgc2V0VGltZW91dChmdW5jdGlvbigpeyAkKCJzaGFyZUNvcHlTaG9ydCIpLmlubmVyVGV4dCA9ICLrs7XsgqwiOyB9LCAxMjAwKTsgfSk7CiAgICB9CiAgfSk7CiAgJCgibW9kYWxBcHBTaGFyZUJ0biIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oKXsKICAgIHNhdmVQYWdlKCk7CiAgICB2YXIgdGV4dCA9IGFsbFBhZ2VzVGV4dCgpOwogICAgaWYobmF2aWdhdG9yLnNoYXJlKXsgbmF2aWdhdG9yLnNoYXJlKHsgdGl0bGU6IuyggOyghOugpSDrhbjtirgiLCB0ZXh0OnRleHQgfSkuY2F0Y2goZnVuY3Rpb24oKXt9KTsgfQogICAgZWxzZSBpZihuYXZpZ2F0b3IuY2xpcGJvYXJkKXsgbmF2aWdhdG9yLmNsaXBib2FyZC53cml0ZVRleHQodGV4dCkudGhlbihmdW5jdGlvbigpeyBhbGVydCgi7YG066a967O065Oc66GcIOuzteyCrO2WiOyWtOyalC4g7IK87ISx64W47Yq4L+2CtS/rhKTsnbTrsoTrqZTrqqjsl5Ag67aZ7Jes64Sj6riwIO2VmOyEuOyalC4iKTsgfSk7IH0KICB9KTsKCiAgLy8gLS0tLS0tLS0tLS0tLS0tLSBQREYg7KCA7J6lICjtlZzquIAg6rmo7KeQIOuwqeyngDog7LqU67KE7Iqk66GcIOy6oeyymO2VtCDsnbTrr7jsp4DroZwg7IK97J6FLCDsoITssrQg7Y6Y7J207KeAIO2PrO2VqCkgLS0tLS0tLS0tLS0tLS0tLQogIGZ1bmN0aW9uIGVuc3VyZVBkZlJlbmRlck5vZGUoKXsKICAgIHZhciBub2RlID0gJCgicGRmUmVuZGVyTm9kZSIpOwogICAgaWYobm9kZSkgcmV0dXJuIG5vZGU7CiAgICBub2RlID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgiZGl2Iik7CiAgICBub2RlLmlkID0gInBkZlJlbmRlck5vZGUiOwogICAgbm9kZS5zdHlsZS5jc3NUZXh0ID0gInBvc2l0aW9uOmZpeGVkOyBsZWZ0Oi05OTk5cHg7IHRvcDowOyB3aWR0aDo3OTRweDsgaGVpZ2h0OjExMjNweDsgYmFja2dyb3VuZDojZmZmZmZmOyBjb2xvcjojMTExMTExOyBmb250LWZhbWlseTonTWFsZ3VuIEdvdGhpYycsJ0FwcGxlIFNEIEdvdGhpYyBOZW8nLHNhbnMtc2VyaWY7IHBhZGRpbmc6NTBweCA0NnB4OyBib3gtc2l6aW5nOmJvcmRlci1ib3g7IG92ZXJmbG93OmhpZGRlbjsiOwogICAgbm9kZS5pbm5lckhUTUwgPQogICAgICAnPGRpdiBzdHlsZT0iZGlzcGxheTpmbGV4O2p1c3RpZnktY29udGVudDpzcGFjZS1iZXR3ZWVuO2JvcmRlci1ib3R0b206MnB4IHNvbGlkICMzMzM7cGFkZGluZy1ib3R0b206MTBweDttYXJnaW4tYm90dG9tOjE2cHg7Zm9udC1zaXplOjIwcHg7Zm9udC13ZWlnaHQ6NzAwOyI+JyArCiAgICAgICAgJzxzcGFuIGlkPSJwZGZUaXRsZSI+PC9zcGFuPjxzcGFuIGlkPSJwZGZEYXRlIiBzdHlsZT0iZm9udC13ZWlnaHQ6NDAwO2ZvbnQtc2l6ZToxNnB4OyI+PC9zcGFuPicgKwogICAgICAnPC9kaXY+JyArCiAgICAgICc8ZGl2IGlkPSJwZGZDb3JuZWxsQm9keSIgc3R5bGU9ImRpc3BsYXk6ZmxleDtib3JkZXItYm90dG9tOjJweCBzb2xpZCAjMzMzO21pbi1oZWlnaHQ6NjAwcHg7Ij4nICsKICAgICAgICAnPGRpdiBpZD0icGRmQ3VlcyIgc3R5bGU9ImZsZXg6MCAwIDIyJTtib3JkZXItcmlnaHQ6MnB4IHNvbGlkICMzMzM7cGFkZGluZzoxMHB4IDE0cHg7Zm9udC1zaXplOjE1cHg7d2hpdGUtc3BhY2U6cHJlLXdyYXA7d29yZC1icmVhazpicmVhay13b3JkOyI+PC9kaXY+JyArCiAgICAgICAgJzxkaXYgaWQ9InBkZk5vdGVzIiBzdHlsZT0iZmxleDoxO3BhZGRpbmc6MTBweCAxOHB4O2ZvbnQtc2l6ZToxNnB4O3doaXRlLXNwYWNlOnByZS13cmFwO3dvcmQtYnJlYWs6YnJlYWstd29yZDtsaW5lLWhlaWdodDoxLjc7Ij48L2Rpdj4nICsKICAgICAgJzwvZGl2PicgKwogICAgICAnPGRpdiBpZD0icGRmUGxhaW5Cb2R5IiBzdHlsZT0iZGlzcGxheTpub25lO3BhZGRpbmc6MTRweCA0cHg7Zm9udC1zaXplOjE2cHg7d2hpdGUtc3BhY2U6cHJlLXdyYXA7d29yZC1icmVhazpicmVhay13b3JkO2xpbmUtaGVpZ2h0OjEuNzttaW4taGVpZ2h0OjYwMHB4OyI+PC9kaXY+JyArCiAgICAgICc8ZGl2IHN0eWxlPSJtYXJnaW4tdG9wOjE0cHg7Ij48ZGl2IHN0eWxlPSJmb250LXdlaWdodDo3MDA7dGV4dC1kZWNvcmF0aW9uOnVuZGVybGluZTtmb250LXNpemU6MTVweDttYXJnaW4tYm90dG9tOjhweDsiPlNVTU1BUlk8L2Rpdj4nICsKICAgICAgJzxkaXYgaWQ9InBkZlN1bW1hcnkiIHN0eWxlPSJmb250LXNpemU6MTVweDt3aGl0ZS1zcGFjZTpwcmUtd3JhcDt3b3JkLWJyZWFrOmJyZWFrLXdvcmQ7bGluZS1oZWlnaHQ6MS43OyI+PC9kaXY+PC9kaXY+JzsKICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQobm9kZSk7CiAgICByZXR1cm4gbm9kZTsKICB9CiAgZnVuY3Rpb24gZmlsbFBkZk5vZGUobm9kZSwgcCl7CiAgICBub2RlLnF1ZXJ5U2VsZWN0b3IoIiNwZGZUaXRsZSIpLnRleHRDb250ZW50ID0gcC50aXRsZSB8fCAi7KCc66qpIOyXhuydjCI7CiAgICBub2RlLnF1ZXJ5U2VsZWN0b3IoIiNwZGZEYXRlIikudGV4dENvbnRlbnQgPSBwLmRhdGUgfHwgIiI7CiAgICB2YXIgY29ybmVsbEJvZHkgPSBub2RlLnF1ZXJ5U2VsZWN0b3IoIiNwZGZDb3JuZWxsQm9keSIpOwogICAgdmFyIHBsYWluQm9keSA9IG5vZGUucXVlcnlTZWxlY3RvcigiI3BkZlBsYWluQm9keSIpOwogICAgaWYoc3RhdGUubm90ZVR5cGUgPT09ICJwbGFpbiIpewogICAgICBjb3JuZWxsQm9keS5zdHlsZS5kaXNwbGF5ID0gIm5vbmUiOwogICAgICBwbGFpbkJvZHkuc3R5bGUuZGlzcGxheSA9ICJibG9jayI7CiAgICAgIHBsYWluQm9keS50ZXh0Q29udGVudCA9IHAubm90ZXMgfHwgIiI7CiAgICB9IGVsc2UgewogICAgICBjb3JuZWxsQm9keS5zdHlsZS5kaXNwbGF5ID0gImZsZXgiOwogICAgICBwbGFpbkJvZHkuc3R5bGUuZGlzcGxheSA9ICJub25lIjsKICAgICAgbm9kZS5xdWVyeVNlbGVjdG9yKCIjcGRmQ3VlcyIpLnRleHRDb250ZW50ID0gcC5jdWVzIHx8ICIiOwogICAgICBub2RlLnF1ZXJ5U2VsZWN0b3IoIiNwZGZOb3RlcyIpLnRleHRDb250ZW50ID0gcC5ub3RlcyB8fCAiIjsKICAgIH0KICAgIG5vZGUucXVlcnlTZWxlY3RvcigiI3BkZlN1bW1hcnkiKS50ZXh0Q29udGVudCA9IHAuc3VtbWFyeSB8fCAiIjsKICB9CiAgJCgibW9kYWxQZGZCdG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCl7CiAgICBzYXZlUGFnZSgpOwogICAgaWYodHlwZW9mIHdpbmRvdy5qc3BkZiA9PT0gInVuZGVmaW5lZCIgfHwgdHlwZW9mIHdpbmRvdy5odG1sMmNhbnZhcyA9PT0gInVuZGVmaW5lZCIpewogICAgICBhbGVydCgiUERGIOudvOydtOu4jOufrOumrOulvCDrtojrn6zsmKTsp4Ag66q77ZaI7Ja07JqUICjrhKTtirjsm4ztgawg7KCc7ZWcIO2ZmOqyveydvCDsiJgg7J6I7Ja07JqUKS4iKTsKICAgICAgcmV0dXJuOwogICAgfQogICAgdmFyIGJ0biA9ICQoIm1vZGFsUGRmQnRuIik7CiAgICB2YXIgb3JpZ0xhYmVsID0gYnRuLmlubmVyVGV4dDsKICAgIGJ0bi5pbm5lclRleHQgPSAi8J+ThCDrp4zrk5zripQg7KSR4oCmIjsgYnRuLmRpc2FibGVkID0gdHJ1ZTsKICAgIHZhciBqc1BERiA9IHdpbmRvdy5qc3BkZi5qc1BERjsKICAgIHZhciBkb2MgPSBuZXcganNQREYoeyB1bml0OiJtbSIsIGZvcm1hdDoiYTQiIH0pOwogICAgdmFyIG5vZGUgPSBlbnN1cmVQZGZSZW5kZXJOb2RlKCk7CiAgICB2YXIgaWR4ID0gMDsKICAgIGZ1bmN0aW9uIHJlbmRlck5leHQoKXsKICAgICAgaWYoaWR4ID49IHN0YXRlLnBhZ2VzLmxlbmd0aCl7CiAgICAgICAgbm9kZS5wYXJlbnROb2RlLnJlbW92ZUNoaWxkKG5vZGUpOwogICAgICAgIGRvYy5zYXZlKGJ1aWxkRmlsZU5hbWUoKSArICIucGRmIik7CiAgICAgICAgYnRuLmlubmVyVGV4dCA9IG9yaWdMYWJlbDsgYnRuLmRpc2FibGVkID0gZmFsc2U7CiAgICAgICAgY2xvc2VTaGFyZU1vZGFsKCk7CiAgICAgICAgcmV0dXJuOwogICAgICB9CiAgICAgIGZpbGxQZGZOb2RlKG5vZGUsIHN0YXRlLnBhZ2VzW2lkeF0pOwogICAgICB3aW5kb3cuaHRtbDJjYW52YXMobm9kZSwgeyBzY2FsZToyLCB1c2VDT1JTOnRydWUgfSkudGhlbihmdW5jdGlvbihjYW52YXMpewogICAgICAgIGlmKGlkeCA+IDApIGRvYy5hZGRQYWdlKCk7CiAgICAgICAgdmFyIGltZ0RhdGEgPSBjYW52YXMudG9EYXRhVVJMKCJpbWFnZS9qcGVnIiwgMC45Mik7CiAgICAgICAgZG9jLmFkZEltYWdlKGltZ0RhdGEsICJKUEVHIiwgMCwgMCwgMjEwLCAyOTcpOwogICAgICAgIGlkeCsrOwogICAgICAgIHJlbmRlck5leHQoKTsKICAgICAgfSkuY2F0Y2goZnVuY3Rpb24oKXsKICAgICAgICBpZHgrKzsKICAgICAgICByZW5kZXJOZXh0KCk7CiAgICAgIH0pOwogICAgfQogICAgcmVuZGVyTmV4dCgpOwogIH0pOwoKICAvLyAtLS0tLS0tLS0tLS0tLS0tIOy0iOq4sO2ZlCAtLS0tLS0tLS0tLS0tLS0tCiAgcmVzdG9yZVN0YXRlKCk7CiAgc3RhdGUucGFnZXMuZm9yRWFjaChmdW5jdGlvbihwKXsgaWYoIXAuZGF0ZSl7IHAuZGF0ZSA9IHRvZGF5U3RyaW5nKCk7IH0gfSk7CiAgYXBwbHlUaGVtZSgpOwogIHJlbmRlclRoZW1lR3JpZCgpOwogIGFwcGx5Rm9udEZhbWlseSgpOwogIHNldEZvbnQoc3RhdGUuZm9udFNpemUpOwogIHNldE9yaWVudGF0aW9uQ2hvaWNlKHN0YXRlLm9yaWVudGF0aW9uKTsKICBzZXRFeHRLZXlib2FyZChzdGF0ZS5leHRLZXlib2FyZCk7CiAgc2V0Tm90ZVR5cGUoc3RhdGUubm90ZVR5cGUpOwogIGxvYWRQYWdlKCk7CiAgbG9hZEZyb21VcmxIYXNoKCk7CiAgdXBkYXRlV2FrZVVJKCk7CiAgc3dpdGNoVmlldygwKTsKCn0pKCk7Cg==</script> <script> (function(){ var src = document.getElementById("ln01-note-src"); var code = decodeURIComponent(escape(window.atob(src.textContent))); var el = document.createElement("script"); el.text = code; document.body.appendChild(el); })(); </script> 모두의계산기 노트 노트앱 모두 업무 웹앱 풀사이즈 휴대폰에서풀사이즈로즐기는노트어플 최매슨생 https://0-1.kr/35 https://0-1.kr/35#entry35comment Sun, 3 Jan 2021 19:40:41 +0900 https://0-1.kr/34 <p>사업계획서 작성 중이라면 꼭 한번 보세요.ㅎ</p> <p>&nbsp;</p> <p>2008년 air bnb ir 발표자료입니다.</p> <p>&nbsp;</p> <p>이 발표로 50만달라의 투자를 받았다고 하죠?</p> <p>&nbsp;</p> <p>발표자료 보시면 어떠신가요? 엄청 심플하죠?</p> <p>&nbsp;</p> <p>해당 발표는 5분짜리로 진행했다고 하네요. 참고하시구요.</p> <p>&nbsp;</p> <p>하지만 표현하고자 하는 내용은 다 있습니다.ㅎㅎ&nbsp;</p> <p>&nbsp;</p> <p>하나하나씩 분석해보시죠.ㅎ</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_01.jpg" data-origin-width="2420" data-origin-height="1870" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/dsAhgr/btqQUYQ4C59/EpOGBhFCbzSbtadxbSCGXk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/dsAhgr/btqQUYQ4C59/EpOGBhFCbzSbtadxbSCGXk/img.jpg"><img src="https://blog.kakaocdn.net/dn/dsAhgr/btqQUYQ4C59/EpOGBhFCbzSbtadxbSCGXk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdsAhgr%2FbtqQUYQ4C59%2FEpOGBhFCbzSbtadxbSCGXk%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_01.jpg" data-origin-width="2420" data-origin-height="1870" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>첫페이지 입니다.&nbsp;</p> <p>&nbsp;</p> <p>메인 제목(서비스명 이겠죠?)과 하고자 하는 컨셉으로 밑에 작은 글씨로 기재해주시면 오래 남습니다.</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_02.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/5w5Be/btqQR5JH2IM/HDccSL0pGKS3pCMqPTuVV1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/5w5Be/btqQR5JH2IM/HDccSL0pGKS3pCMqPTuVV1/img.jpg"><img src="https://blog.kakaocdn.net/dn/5w5Be/btqQR5JH2IM/HDccSL0pGKS3pCMqPTuVV1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F5w5Be%2FbtqQR5JH2IM%2FHDccSL0pGKS3pCMqPTuVV1%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_02.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>두번째 페이지에 현 문제점을 기재했네요.</p> <p>&nbsp;</p> <p>문제제기를 통해 본인이 제공하고자 하는 서비스가 필요하다는 전제를 까셔야죠?</p> <p>&nbsp;</p> <p>하단처럼 표현해도 좋을듯해요. (원으로 그리는것?)</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_03.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/cbsr8g/btqQJEGD0Gr/TwfokNFbZ8kxuZkeNzyf81/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/cbsr8g/btqQJEGD0Gr/TwfokNFbZ8kxuZkeNzyf81/img.jpg"><img src="https://blog.kakaocdn.net/dn/cbsr8g/btqQJEGD0Gr/TwfokNFbZ8kxuZkeNzyf81/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcbsr8g%2FbtqQJEGD0Gr%2FTwfokNFbZ8kxuZkeNzyf81%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_03.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>해결책이네요.</p> <p>&nbsp;</p> <p>웹 플렛폼을 통해 돈도 아끼고 벌고 문화도 공유하겠다고 제시했네요.&nbsp;</p> <p>본인의 서비스를 여기서 핵심적으로 어필하면 되겠죠?</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_04.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/cmzhD9/btqQLkAT2AV/kys4PSSrBIUlstRQMd7p81/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/cmzhD9/btqQLkAT2AV/kys4PSSrBIUlstRQMd7p81/img.jpg"><img src="https://blog.kakaocdn.net/dn/cmzhD9/btqQLkAT2AV/kys4PSSrBIUlstRQMd7p81/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcmzhD9%2FbtqQLkAT2AV%2Fkys4PSSrBIUlstRQMd7p81%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_04.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>시장의 적정성 입니다.</p> <p>&nbsp;</p> <p>요건 내 서비스를 활용한 사람들은 많다 라는 걸 보여주는 거죠.</p> <p>&nbsp;</p> <p>근데..서비스를 사용할 사람과 돈을 주고 사용할 사람들을 표기해도 좋습니다.</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_05.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/bMhzDA/btqQNqU7j1Y/lKKHxUROBBnflqcKIVVqCK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bMhzDA/btqQNqU7j1Y/lKKHxUROBBnflqcKIVVqCK/img.jpg"><img src="https://blog.kakaocdn.net/dn/bMhzDA/btqQNqU7j1Y/lKKHxUROBBnflqcKIVVqCK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbMhzDA%2FbtqQNqU7j1Y%2FlKKHxUROBBnflqcKIVVqCK%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_05.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>시장규모 입니다.</p> <p>TSS라고 하죠</p> <p>TAM : 전체시장</p> <p>SAM : 유효시장</p> <p>SOM : 타깃시장 이라고 합니다.</p> <p>한국에서 발표하실때 이 표 그대로 쓰고 하단에 영어로 살짝 기재해줘도 좋을듯 해요.</p> <p>심사자가 믿진 않겠지만 타깃시장에 관련된 내용을 발표시 자세히 설명해 주세요!</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_06.jpg" data-origin-width="2937" data-origin-height="2270" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/d5jC6W/btqQLlfvFMu/CZuTT66RO7Pa79OLGPUxo1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/d5jC6W/btqQLlfvFMu/CZuTT66RO7Pa79OLGPUxo1/img.jpg"><img src="https://blog.kakaocdn.net/dn/d5jC6W/btqQLlfvFMu/CZuTT66RO7Pa79OLGPUxo1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fd5jC6W%2FbtqQLlfvFMu%2FCZuTT66RO7Pa79OLGPUxo1%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_06.jpg" data-origin-width="2937" data-origin-height="2270" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>제품이네요.</p> <p>웹서비스가 전부인데...1장으로 설명했네요.</p> <p>2장정도로 적어줘도 좋습니다. 이미 시제품이 완성된 상태라면 바로 심사자들에게 탭을 활용해 설명해 주면&nbsp;</p> <p>더 좋습니다. 시제품이 잘 된다면 한장으로 충분하죠. 완성이 안된 서비스는 2장내외로 기재해 주세요</p> <p>&nbsp;</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_07.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/bcT9YA/btqQUYQ4Dbd/iLmjpVVpWH9bCfE3DxUYM1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/bcT9YA/btqQUYQ4Dbd/iLmjpVVpWH9bCfE3DxUYM1/img.jpg"><img src="https://blog.kakaocdn.net/dn/bcT9YA/btqQUYQ4Dbd/iLmjpVVpWH9bCfE3DxUYM1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbcT9YA%2FbtqQUYQ4Dbd%2FiLmjpVVpWH9bCfE3DxUYM1%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_07.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>비즈니스 모델(수익모델)이죠.</p> <p>&nbsp;</p> <p>와우. 짧게 설명했네요. 10%로만 먹겠다네요.</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_08.jpg" data-origin-width="3300" data-origin-height="2550" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/l6ttJ/btqQR6BQPnM/KU4YkZc8WicQLEnYaDmfVK/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/l6ttJ/btqQR6BQPnM/KU4YkZc8WicQLEnYaDmfVK/img.jpg"><img src="https://blog.kakaocdn.net/dn/l6ttJ/btqQR6BQPnM/KU4YkZc8WicQLEnYaDmfVK/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fl6ttJ%2FbtqQR6BQPnM%2FKU4YkZc8WicQLEnYaDmfVK%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_08.jpg" data-origin-width="3300" data-origin-height="2550" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>마케팅 페이지입니다.</p> <p>&nbsp;</p> <p>이벤트와 파트너십으로 홍보하겠다는 거죠. 전체 페이지를 삼등분한것으로 느껴지네요. 일관성있게 가면 좋습니다.</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_09.jpg" data-origin-width="3300" data-origin-height="2559" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/mLTkq/btqQLl7CDXx/mGO7BqL50ZOJaHkgvg2060/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/mLTkq/btqQLl7CDXx/mGO7BqL50ZOJaHkgvg2060/img.jpg"><img src="https://blog.kakaocdn.net/dn/mLTkq/btqQLl7CDXx/mGO7BqL50ZOJaHkgvg2060/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmLTkq%2FbtqQLl7CDXx%2FmGO7BqL50ZOJaHkgvg2060%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_09.jpg" data-origin-width="3300" data-origin-height="2559" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>경쟁사 입니다.</p> <p>&nbsp;</p> <p>투자자들이 젤 싫어하는 답변은</p> <p>"우리 서비스는 유일합니다"</p> <p>랍니다. 전세계 다 뒤져서라도 유사한 서비스를 찾아보세요</p> <p>여러분이 처음이라면...그 서비스 홍보도 처음이고...그 게...성공할 수 있을까요?ㅎ</p> <p>기존 서비스보다 업그레이드 됨을 표현해 보세요. 그러려고 서비스 시작한거 아니에요?ㅎ</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_10.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/c6Gyck/btqQUZbohjX/SbzCmKKXEph8dsh9egk7G1/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/c6Gyck/btqQUZbohjX/SbzCmKKXEph8dsh9egk7G1/img.jpg"><img src="https://blog.kakaocdn.net/dn/c6Gyck/btqQUZbohjX/SbzCmKKXEph8dsh9egk7G1/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc6Gyck%2FbtqQUZbohjX%2FSbzCmKKXEph8dsh9egk7G1%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_10.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>경쟁우위는 무엇인가요??</p> <p>다른회사의 장점도 언급하셔도 됩니다. 그 보다 더 좋다고 어필하시면 되니깐요.</p> <p>타사 보다 좋은 것들을 언급해 주세요.</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_11.jpg" data-origin-width="3311" data-origin-height="2559" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/btnm30/btqQNq8HzBK/zAkkKkhtkoNUN6hiSoM8ik/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/btnm30/btqQNq8HzBK/zAkkKkhtkoNUN6hiSoM8ik/img.jpg"><img src="https://blog.kakaocdn.net/dn/btnm30/btqQNq8HzBK/zAkkKkhtkoNUN6hiSoM8ik/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbtnm30%2FbtqQNq8HzBK%2FzAkkKkhtkoNUN6hiSoM8ik%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_11.jpg" data-origin-width="3311" data-origin-height="2559" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>만약 팀원이 유사기관에서 스카웃해왔거나 경력 10년 이상이라면 이걸 젤 위로 올리세요.</p> <p>아마 최단시간에 심사자들에게 신뢰를 쌓을 수 있는 방법이 아닌가 합니다.</p> <p>서비스 위주의 설명이라면 하단에&nbsp; 적으셔도 됩니다.</p> <p>&nbsp;</p> <p>꼭 4대보험 들어가는 직원만 기재하지 말고 앞으로 닥칠 문제들을 해결해 줄 수 있는 지인과 파트너들도&nbsp;</p> <p>기재해 주세요. 인맥이 자산입니다.</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_12.jpg" data-origin-width="1662" data-origin-height="1284" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/RRdft/btqQIbycexN/6lCI1ktNESb27JkUtkcOmk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/RRdft/btqQIbycexN/6lCI1ktNESb27JkUtkcOmk/img.jpg"><img src="https://blog.kakaocdn.net/dn/RRdft/btqQIbycexN/6lCI1ktNESb27JkUtkcOmk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FRRdft%2FbtqQIbycexN%2F6lCI1ktNESb27JkUtkcOmk%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_12.jpg" data-origin-width="1662" data-origin-height="1284" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>음...프레스...과거이력인가요? 회사연혁 개념으로 보시면 될거 같네요.</p> <p>운영기간 중 입상이라던지, 정부인증이라던지, 회사의 우수성을 외부인들에게 인정받은 것들을</p> <p>간단히 기재해 주세요</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_13.jpg" data-origin-width="2288" data-origin-height="1768" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/9dVkA/btqQR62U4q2/U52MKwtsbqku0rTIAAej6K/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/9dVkA/btqQR62U4q2/U52MKwtsbqku0rTIAAej6K/img.jpg"><img src="https://blog.kakaocdn.net/dn/9dVkA/btqQR62U4q2/U52MKwtsbqku0rTIAAej6K/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F9dVkA%2FbtqQR62U4q2%2FU52MKwtsbqku0rTIAAej6K%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_13.jpg" data-origin-width="2288" data-origin-height="1768" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>후기를 표현했네요.</p> <p>&nbsp;</p> <p>사진도 좋지만 2p처럼 텍스트로 표현해도 좋습니다.&nbsp;</p> <p><figure class="imageblock alignCenter" data-filename="airbnb-original-deck-2008_페이지_14.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/b0q6qX/btqQUZbohqv/k08tTBaQhecCCWPoi9dwEk/img.jpg" data-phocus="https://blog.kakaocdn.net/dn/b0q6qX/btqQUZbohqv/k08tTBaQhecCCWPoi9dwEk/img.jpg"><img src="https://blog.kakaocdn.net/dn/b0q6qX/btqQUZbohqv/k08tTBaQhecCCWPoi9dwEk/img.jpg" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb0q6qX%2FbtqQUZbohqv%2Fk08tTBaQhecCCWPoi9dwEk%2Fimg.jpg" data-filename="airbnb-original-deck-2008_페이지_14.jpg" data-origin-width="2200" data-origin-height="1700" data-ke-mobilestyle="widthContent" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> </p> <p>투자를 받기위한 자리라면 앞의 투자자에게 맞춰야죠?</p> <p>&nbsp;</p> <p>필요한 금액을 기재하고 어떻게 쓸껀지 기재해주세요.</p> <p>&nbsp;</p> <p>터무니 없이 큰 금액을 쓴다면...투자 안하겠죠? 아마 투자자들이 발표장에선 질문하지 않겠지만</p> <p>&nbsp;</p> <p>가장 예민한 부분입니다.ㅎ 투자금액을 어떤 비목으로, 얼마를 쓸건지 자세히 설명해주세요.(아니 남은시간동안.ㅎ)</p> <p>&nbsp;</p> <p>---------------------------------</p> <p>해당 발표자료를 보면 여백이 아주 많죠?</p> <p>그리고 깔끔하네? 란 생각이 들죠?</p> <p>&nbsp;</p> <p>원 몇개랑, 사각형 몇개 밖에 없죠?ㅎ</p> <p>&nbsp;</p> <p>똑같이 한번 그려보세요. 여기서 텍스트를 지우고 그 텍스트에 본인의 아이템을 넣어보세요.</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/5lnRE/btqQH9N4p7E/jn67qo6nkjicM8utK8aPe0/airbnb-original-deck-2008.pdf?attach=1&amp;knm=tfile.pdf" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">airbnb-original-deck-2008.pdf</span></div> <div class="size">3.59MB</div> </div> </a></figure> </p> 스타트업 운영TIP/사업계획서작성 TIP Airbnb ir 사업계획서 아이알 투자 최매슨생 https://0-1.kr/34 https://0-1.kr/34#entry34comment Sun, 20 Dec 2020 19:46:23 +0900 https://0-1.kr/33 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>모두의 PDF 압축계산기</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> <style> #pdfcomp-root * { box-sizing: border-box; } #pdfcomp-root { max-width: 820px; margin: 0 auto; padding: 20px 16px 60px; font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; color: #222; line-height: 1.55; } .pdfcomp-title { font-size: 23px; font-weight: 800; margin-bottom: 6px; } .pdfcomp-lead1 { font-size: 15px; color: #444; font-weight: 600; margin-bottom: 2px; } .pdfcomp-lead2 { font-size: 13.5px; color: #888; margin-bottom: 22px; } .pdfcomp-card { border: 1px solid #e4e4e7; border-radius: 14px; padding: 18px; margin-bottom: 14px; background: #fff; } .pdfcomp-sechead { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .pdfcomp-sechead.pdfcomp-nocursor { cursor: default; } .pdfcomp-sectitle { display: flex; align-items: center; gap: 8px; font-size: 16.5px; font-weight: 800; color: #4a3ff0; } .pdfcomp-badge { width: 24px; height: 24px; border-radius: 50%; background: #6d5efc; color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pdfcomp-chevron { font-size: 13px; color: #999; transition: transform .15s; } .pdfcomp-chevron.pdfcomp-open { transform: rotate(180deg); } .pdfcomp-body { margin-top: 14px; } .pdfcomp-body.pdfcomp-collapsed { display: none; } .pdfcomp-drop { border: 2px dashed #8f7dfb; border-radius: 12px; padding: 30px 16px; text-align: center; cursor: pointer; color: #4a3ff0; font-size: 14.5px; font-weight: 700; background: #f3f1ff; transition: border-color .15s, background .15s; } .pdfcomp-drop.pdfcomp-drag { border-color: #4a3ff0; background: #e9e5ff; } .pdfcomp-drop input { display: none; } .pdfcomp-drop .pdfcomp-droptip { font-weight: 400; font-size: 12.5px; color: #7a70c9; margin-top: 4px; } .pdfcomp-filebox { margin-top: 12px; } .pdfcomp-filerow { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: #666; margin-bottom: 6px; } .pdfcomp-renamerow { display: flex; align-items: center; gap: 8px; } .pdfcomp-renamerow label { font-size: 12.5px; color: #555; flex-shrink: 0; } .pdfcomp-renamerow input { flex: 1; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; } .pdfcomp-renamerow span { font-size: 12.5px; color: #999; } .pdfcomp-modewrap { display: flex; gap: 10px; margin-bottom: 4px; } .pdfcomp-mode { flex: 1; border: 1px solid #e4e4e7; border-radius: 10px; padding: 12px; cursor: pointer; font-size: 13px; } .pdfcomp-mode.pdfcomp-active { border-color: #6d5efc; background: #f5f3ff; } .pdfcomp-mode b { display: block; font-size: 13.5px; margin-bottom: 3px; } .pdfcomp-mode span { color: #777; font-size: 12px; } .pdfcomp-presetblock { margin-bottom: 18px; } .pdfcomp-presetblock:last-child { margin-bottom: 0; } .pdfcomp-presetlabel { font-size: 14px; font-weight: 800; margin-bottom: 8px; } .pdfcomp-presetlabel.pdfcomp-pres { color: #2e8b57; } .pdfcomp-presetlabel.pdfcomp-proof { color: #c0392b; } .pdfcomp-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; } .pdfcomp-row label { width: 90px; flex-shrink: 0; color: #555; } .pdfcomp-row input[type=range] { flex: 1; } .pdfcomp-row .pdfcomp-val { width: 54px; text-align: right; color: #333; font-variant-numeric: tabular-nums; } .pdfcomp-defaulttag { font-size: 11.5px; color: #999; margin: -2px 0 8px; } .pdfcomp-estimate { font-size: 12.5px; color: #6d5efc; font-weight: 700; margin: 4px 0 10px; min-height: 16px; } .pdfcomp-btn { display: inline-block; border: none; border-radius: 10px; padding: 12px 18px; font-size: 14.5px; font-weight: 700; cursor: pointer; background: #6d5efc; color: #fff; width: 100%; margin-top: 4px; } .pdfcomp-btn:disabled { background: #c9c3fb; cursor: not-allowed; } .pdfcomp-btn.pdfcomp-ghost { background: #f2f2f5; color: #444; } .pdfcomp-btn.pdfcomp-small { width: auto; padding: 8px 14px; font-size: 12.5px; margin-top: 0; } .pdfcomp-btnrow { display: flex; gap: 10px; margin-top: 14px; } .pdfcomp-btnrow .pdfcomp-btn { margin-top: 0; } .pdfcomp-progress { font-size: 12.5px; color: #6d5efc; margin-top: 8px; min-height: 16px; } .pdfcomp-namewrap { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; } .pdfcomp-namecol { flex: 1; min-width: 150px; } .pdfcomp-bubble { position: relative; background: #f3f1ff; color: #55499a; font-size: 11.5px; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; } .pdfcomp-bubble:after { content: ""; position: absolute; bottom: -6px; left: 16px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #f3f1ff; } .pdfcomp-checkline { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; } .pdfcomp-results { margin-top: 6px; } .pdfcomp-result { border: 1px solid #e4e4e7; border-radius: 12px; padding: 14px; margin-bottom: 12px; display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .pdfcomp-thumb { width: 84px; height: 108px; border: 1px solid #eee; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #fafafa; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #999; } .pdfcomp-thumb img { width: 100%; height: 100%; object-fit: contain; } .pdfcomp-rinfo { flex: 1; min-width: 180px; } .pdfcomp-rname { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; } .pdfcomp-rsize { font-size: 12.5px; color: #666; margin-bottom: 8px; } .pdfcomp-rsize b { color: #6d5efc; } .pdfcomp-fname { width: 100%; padding: 7px 8px; font-size: 12.5px; border: 1px solid #ddd; border-radius: 7px; margin-bottom: 8px; } .pdfcomp-ractions { display: flex; gap: 6px; } .pdfcomp-ractions a, .pdfcomp-ractions button { font-size: 12.5px; padding: 7px 10px; border-radius: 7px; border: 1px solid #ddd; background: #fff; color: #333; text-decoration: none; cursor: pointer; } .pdfcomp-ractions a.pdfcomp-primary { background: #6d5efc; color: #fff; border-color: #6d5efc; } .pdfcomp-note { font-size: 12px; color: #999; margin-top: 6px; } .pdfcomp-warn { font-size: 12.5px; color: #b5730a; background: #fff8ec; border: 1px solid #f2dfb8; border-radius: 8px; padding: 8px 10px; margin-top: 10px; } </style> </head> <body> <div id="pdfcomp-root"> <div class="pdfcomp-title">모두의 PDF 압축계산기</div> <div class="pdfcomp-lead1">여러분의 소중한 파일을 더욱 가치있게 전달해보세요. 이렇게 제출하시면 됩니다</div> <div class="pdfcomp-lead2">파일은 원본, 발표용, 증빙용 3가지로 압축 생성합니다. 제출 전 파일명도 변경해보세요</div> <!-- 1. 업로드 --> <div class="pdfcomp-card"> <div class="pdfcomp-sechead pdfcomp-nocursor"> <div class="pdfcomp-sectitle"><span class="pdfcomp-badge">1</span>PDF 업로드</div> </div> <div class="pdfcomp-body"> <div class="pdfcomp-drop" id="pdfcomp-drop"> <div id="pdfcomp-dropLabel">여기를 눌러 PDF 파일을 선택하세요</div> <div class="pdfcomp-droptip">또는 파일을 이 위로 끌어다 놓으세요</div> <input type="file" id="pdfcomp-file" accept="application/pdf"> </div> <div class="pdfcomp-filebox" id="pdfcomp-filebox" style="display:none;"> <div class="pdfcomp-filerow"><span id="pdfcomp-filesize"></span><span id="pdfcomp-pagecount"></span></div> <div class="pdfcomp-renamerow"> <label>파일명</label> <input type="text" id="pdfcomp-basename"> <span>.pdf</span> </div> </div> </div> </div> <!-- 2. 압축 방식 선택 --> <div class="pdfcomp-card"> <div class="pdfcomp-sechead" id="pdfcomp-sechead2"> <div class="pdfcomp-sectitle"><span class="pdfcomp-badge">2</span>압축 방식 선택</div> <div class="pdfcomp-chevron" id="pdfcomp-chev2">▼</div> </div> <div class="pdfcomp-body pdfcomp-collapsed" id="pdfcomp-body2"> <div class="pdfcomp-warn" id="pdfcomp-inflatewarn" style="display:none;"> 사용 중인 브라우저에서는 JPEG 외 이미지(PNG형 등) 재압축 기능이 제한됩니다. 최신 크롬/엣지/사파리 사용을 권장해요. </div> <div class="pdfcomp-presetblock"> <div class="pdfcomp-presetlabel pdfcomp-pres">발표용 방식</div> <div class="pdfcomp-modewrap"> <div class="pdfcomp-mode pdfcomp-active" id="pdfcomp-pres-modeB"> <b>이미지만 재압축 (기본)</b> <span>텍스트는 그대로, 삽입된 사진/이미지(JPEG, 무압축 비트맵)만 압축합니다. 발표 자료 가독성 유지에 적합해요.</span> </div> <div class="pdfcomp-mode" id="pdfcomp-pres-modeA"> <b>전체 재압축</b> <span>모든 페이지를 이미지로 변환합니다. 텍스트 선택이 불가능해집니다.</span> </div> </div> </div> <div class="pdfcomp-presetblock"> <div class="pdfcomp-presetlabel pdfcomp-proof">증빙용 방식</div> <div class="pdfcomp-modewrap"> <div class="pdfcomp-mode pdfcomp-active" id="pdfcomp-proof-modeA"> <b>전체 재압축 (기본)</b> <span>모든 페이지를 이미지로 변환해 용량을 최대한 줄입니다. 제출용 최소 용량에 적합해요.</span> </div> <div class="pdfcomp-mode" id="pdfcomp-proof-modeB"> <b>이미지만 재압축</b> <span>텍스트는 그대로, 삽입 이미지만 압축합니다.</span> </div> </div> </div> </div> </div> <!-- 3. 압축 강도 설정 --> <div class="pdfcomp-card"> <div class="pdfcomp-sechead" id="pdfcomp-sechead3"> <div class="pdfcomp-sectitle"><span class="pdfcomp-badge">3</span>압축 강도 설정</div> <div class="pdfcomp-chevron" id="pdfcomp-chev3">▼</div> </div> <div class="pdfcomp-body pdfcomp-collapsed" id="pdfcomp-body3"> <div class="pdfcomp-presetblock"> <div class="pdfcomp-presetlabel pdfcomp-pres">발표용 강도</div> <div class="pdfcomp-defaulttag">아래 값은 기본값이며 자유롭게 조절할 수 있어요</div> <div class="pdfcomp-row"><label>해상도(DPI)</label><input type="range" id="pdfcomp-pres-dpi" min="72" max="220" value="180"><span class="pdfcomp-val" id="pdfcomp-pres-dpi-val">180</span></div> <div class="pdfcomp-row"><label>이미지 품질</label><input type="range" id="pdfcomp-pres-q" min="10" max="95" value="80"><span class="pdfcomp-val" id="pdfcomp-pres-q-val">80%</span></div> <div class="pdfcomp-estimate" id="pdfcomp-pres-estimate">예상 용량: 파일 업로드 후 표시됩니다</div> <button class="pdfcomp-btn pdfcomp-ghost pdfcomp-small" id="pdfcomp-pres-reset">기본값</button> </div> <div class="pdfcomp-presetblock"> <div class="pdfcomp-presetlabel pdfcomp-proof">증빙용 강도</div> <div class="pdfcomp-defaulttag">아래 값은 기본값이며 자유롭게 조절할 수 있어요</div> <div class="pdfcomp-row"><label>해상도(DPI)</label><input type="range" id="pdfcomp-proof-dpi" min="50" max="150" value="90"><span class="pdfcomp-val" id="pdfcomp-proof-dpi-val">90</span></div> <div class="pdfcomp-row"><label>이미지 품질</label><input type="range" id="pdfcomp-proof-q" min="10" max="95" value="40"><span class="pdfcomp-val" id="pdfcomp-proof-q-val">40%</span></div> <div class="pdfcomp-estimate" id="pdfcomp-proof-estimate">예상 용량: 파일 업로드 후 표시됩니다</div> <button class="pdfcomp-btn pdfcomp-ghost pdfcomp-small" id="pdfcomp-proof-reset">기본값</button> </div> </div> </div> <!-- 4. 결과 --> <div class="pdfcomp-card"> <div class="pdfcomp-sechead pdfcomp-nocursor"> <div class="pdfcomp-sectitle"><span class="pdfcomp-badge">4</span>결과</div> </div> <div class="pdfcomp-body"> <div class="pdfcomp-namewrap"> <div class="pdfcomp-namecol"> <div class="pdfcomp-bubble">파일명 앞에 [원본]_ [발표]_ [증빙]_ 을 붙여줘요</div> <label class="pdfcomp-checkline"><input type="checkbox" id="pdfcomp-name1"> 말머리1</label> </div> <div class="pdfcomp-namecol"> <div class="pdfcomp-bubble">파일명 앞에 [01] [02] [03] 순서를 붙여줘요</div> <label class="pdfcomp-checkline"><input type="checkbox" id="pdfcomp-name2"> 말머리2</label> </div> <div class="pdfcomp-namecol"> <div class="pdfcomp-bubble" id="pdfcomp-datebubble">파일명 끝에 오늘 날짜를 붙여줘요</div> <label class="pdfcomp-checkline"><input type="checkbox" id="pdfcomp-namedate"> 년월일</label> </div> </div> <button class="pdfcomp-btn" id="pdfcomp-run" disabled>압축 시작</button> <div class="pdfcomp-progress" id="pdfcomp-progress"></div> <div class="pdfcomp-results" id="pdfcomp-results"></div> <div class="pdfcomp-btnrow" id="pdfcomp-savebtns" style="display:none;"> <button class="pdfcomp-btn" id="pdfcomp-savezip">압축저장 (ZIP)</button> <button class="pdfcomp-btn pdfcomp-ghost" id="pdfcomp-saveall">개별저장</button> </div> </div> </div> </div> <script> (function () { 'use strict'; pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'; var DEFAULTS = { pres: { dpi: 180, q: 80 }, proof: { dpi: 90, q: 40 } }; var state = { file: null, bytes: null, pdfjsDoc: null, numPages: 0, baseName: '', modePres: 'B', modeProof: 'A', jpegSummary: null, results: {} }; function fmtSize(bytes) { if (bytes < 1024) return bytes + ' B'; if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'; return (bytes / (1024 * 1024)).toFixed(2) + ' MB'; } function pad2(n) { return (n < 10 ? '0' : '') + n; } function todayStr() { var d = new Date(); return String(d.getFullYear()).slice(2) + pad2(d.getMonth() + 1) + pad2(d.getDate()); } document.getElementById('pdfcomp-datebubble').textContent = '파일명 끝에 오늘 날짜를 _(' + todayStr() + ') 형식으로 붙여줘요'; if (typeof DecompressionStream === 'undefined') { document.getElementById('pdfcomp-inflatewarn').style.display = 'block'; } /* ---------- 접이식 섹션 ---------- */ function bindCollapse(headId, chevId, bodyId) { var head = document.getElementById(headId); var chev = document.getElementById(chevId); var body = document.getElementById(bodyId); head.addEventListener('click', function () { var collapsed = body.className.indexOf('pdfcomp-collapsed') !== -1; body.className = collapsed ? 'pdfcomp-body' : 'pdfcomp-body pdfcomp-collapsed'; chev.className = collapsed ? 'pdfcomp-chevron pdfcomp-open' : 'pdfcomp-chevron'; }); } bindCollapse('pdfcomp-sechead2', 'pdfcomp-chev2', 'pdfcomp-body2'); bindCollapse('pdfcomp-sechead3', 'pdfcomp-chev3', 'pdfcomp-body3'); /* ---------- 업로드 ---------- */ var dropEl = document.getElementById('pdfcomp-drop'); var fileInput = document.getElementById('pdfcomp-file'); var dropLabel = document.getElementById('pdfcomp-dropLabel'); var filebox = document.getElementById('pdfcomp-filebox'); var filesizeEl = document.getElementById('pdfcomp-filesize'); var pagecountEl = document.getElementById('pdfcomp-pagecount'); var basenameInput = document.getElementById('pdfcomp-basename'); var runBtn = document.getElementById('pdfcomp-run'); var progressEl = document.getElementById('pdfcomp-progress'); var resultsEl = document.getElementById('pdfcomp-results'); var savebtns = document.getElementById('pdfcomp-savebtns'); dropEl.addEventListener('click', function () { fileInput.click(); }); dropEl.addEventListener('dragover', function (e) { e.preventDefault(); dropEl.className = 'pdfcomp-drop pdfcomp-drag'; }); dropEl.addEventListener('dragleave', function () { dropEl.className = 'pdfcomp-drop'; }); dropEl.addEventListener('drop', function (e) { e.preventDefault(); dropEl.className = 'pdfcomp-drop'; if (e.dataTransfer.files && e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]); }); fileInput.addEventListener('change', function (e) { if (e.target.files && e.target.files[0]) handleFile(e.target.files[0]); }); basenameInput.addEventListener('input', function () { state.baseName = basenameInput.value || 'file'; }); function handleFile(f) { if (f.type !== 'application/pdf') { alert('PDF 파일만 업로드할 수 있습니다.'); return; } var reader = new FileReader(); reader.onload = function (ev) { state.file = f; state.bytes = new Uint8Array(ev.target.result); state.baseName = f.name.replace(/\.pdf$/i, ''); dropLabel.textContent = '다른 PDF로 변경하려면 다시 클릭하세요'; filebox.style.display = 'block'; filesizeEl.textContent = '용량: ' + fmtSize(f.size); basenameInput.value = state.baseName; resultsEl.innerHTML = ''; savebtns.style.display = 'none'; state.results = {}; runBtn.disabled = false; pdfjsLib.getDocument({ data: state.bytes.slice() }).promise.then(function (pdf) { state.pdfjsDoc = pdf; state.numPages = pdf.numPages; pagecountEl.textContent = pdf.numPages + '페이지'; scanJpegSummary(state.bytes).then(function (summary) { state.jpegSummary = summary; updateEstimate('pres'); updateEstimate('proof'); }); }); }; reader.readAsArrayBuffer(f); } /* ---------- 방식 선택 (섹션2) ---------- */ function bindModeToggle(aId, bId, setter) { var aEl = document.getElementById(aId); var bEl = document.getElementById(bId); aEl.addEventListener('click', function () { setter('A'); aEl.className = 'pdfcomp-mode pdfcomp-active'; bEl.className = 'pdfcomp-mode'; }); bEl.addEventListener('click', function () { setter('B'); bEl.className = 'pdfcomp-mode pdfcomp-active'; aEl.className = 'pdfcomp-mode'; }); } bindModeToggle('pdfcomp-pres-modeA', 'pdfcomp-pres-modeB', function (m) { state.modePres = m; updateEstimate('pres'); }); bindModeToggle('pdfcomp-proof-modeA', 'pdfcomp-proof-modeB', function (m) { state.modeProof = m; updateEstimate('proof'); }); // 초기 기본 선택 상태 맞추기 (발표용=B 활성, 증빙용=A 활성 이미 마크업에 반영됨) /* ---------- 강도 슬라이더 (섹션3) ---------- */ function bindSlider(id, valId, suffix, onChange) { var el = document.getElementById(id); var val = document.getElementById(valId); el.addEventListener('input', function () { val.textContent = el.value + (suffix || ''); onChange(); }); } var estimateTimers = {}; function debounced(key, fn, ms) { clearTimeout(estimateTimers[key]); estimateTimers[key] = setTimeout(fn, ms || 350); } bindSlider('pdfcomp-pres-dpi', 'pdfcomp-pres-dpi-val', '', function () { debounced('pres', function () { updateEstimate('pres'); }); }); bindSlider('pdfcomp-pres-q', 'pdfcomp-pres-q-val', '%', function () { debounced('pres', function () { updateEstimate('pres'); }); }); bindSlider('pdfcomp-proof-dpi', 'pdfcomp-proof-dpi-val', '', function () { debounced('proof', function () { updateEstimate('proof'); }); }); bindSlider('pdfcomp-proof-q', 'pdfcomp-proof-q-val', '%', function () { debounced('proof', function () { updateEstimate('proof'); }); }); document.getElementById('pdfcomp-pres-reset').addEventListener('click', function () { document.getElementById('pdfcomp-pres-dpi').value = DEFAULTS.pres.dpi; document.getElementById('pdfcomp-pres-q').value = DEFAULTS.pres.q; document.getElementById('pdfcomp-pres-dpi-val').textContent = DEFAULTS.pres.dpi; document.getElementById('pdfcomp-pres-q-val').textContent = DEFAULTS.pres.q + '%'; updateEstimate('pres'); }); document.getElementById('pdfcomp-proof-reset').addEventListener('click', function () { document.getElementById('pdfcomp-proof-dpi').value = DEFAULTS.proof.dpi; document.getElementById('pdfcomp-proof-q').value = DEFAULTS.proof.q; document.getElementById('pdfcomp-proof-dpi-val').textContent = DEFAULTS.proof.dpi; document.getElementById('pdfcomp-proof-q-val').textContent = DEFAULTS.proof.q + '%'; updateEstimate('proof'); }); /* ---------- 파일명 옵션 (섹션4) ---------- */ var name1 = document.getElementById('pdfcomp-name1'); var name2 = document.getElementById('pdfcomp-name2'); var nameDate = document.getElementById('pdfcomp-namedate'); name1.addEventListener('change', function () { if (name1.checked) name2.checked = false; }); name2.addEventListener('change', function () { if (name2.checked) name1.checked = false; }); function buildName(kind) { var label1 = { orig: '원본', pres: '발표', proof: '증빙' }; var label2 = { orig: '01', pres: '02', proof: '03' }; var prefix = ''; if (name1.checked) prefix = '[' + label1[kind] + ']_'; else if (name2.checked) prefix = '[' + label2[kind] + ']_'; var suffix = nameDate.checked ? '_(' + todayStr() + ')' : ''; return prefix + state.baseName + suffix; } /* ---------- 유틸 ---------- */ function dataURLToBytes(dataUrl) { var b64 = dataUrl.split(',')[1]; var bin = atob(b64); var arr = new Uint8Array(bin.length); for (var i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i); return arr; } /* 브라우저가 FlateDecode(비JPEG) 이미지 압축 해제를 지원하는지 확인 */ var hasInflate = (typeof DecompressionStream !== 'undefined'); function inflateZlib(bytes) { var ds = new DecompressionStream('deflate'); var decompressedStream = new Response(bytes).body.pipeThrough(ds); return new Response(decompressedStream).arrayBuffer().then(function (buf) { return new Uint8Array(buf); }); } function numOf(v) { return v && typeof v.asNumber === 'function' ? v.asNumber() : 0; } /* 이미지 XObject가 재압축 가능한지, 어떤 방식인지 판별 'jpeg' = DCTDecode(그대로 재압축), 'flate-rgb'/'flate-gray' = 무압축 비트맵(FlateDecode, predictor 없음, 8bpc) */ function detectImageType(dict, ctx) { var filter = dict.get(PDFLib.PDFName.of('Filter')); var filterStr = filter ? filter.toString() : ''; if (filterStr.indexOf('DCTDecode') !== -1) return 'jpeg'; if (!hasInflate) return null; if (filterStr.indexOf('FlateDecode') === -1) return null; var dpRaw = dict.get(PDFLib.PDFName.of('DecodeParms')) || dict.get(PDFLib.PDFName.of('DP')); if (dpRaw) { var dp = (dpRaw instanceof PDFLib.PDFRef) ? ctx.lookup(dpRaw) : dpRaw; if (dp && dp.get) { var predictor = dp.get(PDFLib.PDFName.of('Predictor')); var predNum = predictor ? numOf(predictor) || 1 : 1; if (predNum > 1) return null; // PNG predictor 등은 미지원 (안전을 위해 건너뜀) } else { return null; } } var bpc = dict.get(PDFLib.PDFName.of('BitsPerComponent')); if (numOf(bpc) !== 8) return null; var csRaw = dict.get(PDFLib.PDFName.of('ColorSpace')); var cs = (csRaw instanceof PDFLib.PDFRef) ? ctx.lookup(csRaw) : csRaw; var csStr = cs ? cs.toString() : ''; if (csStr.indexOf('DeviceRGB') !== -1) return 'flate-rgb'; if (csStr.indexOf('DeviceGray') !== -1 || csStr.indexOf('CalGray') !== -1) return 'flate-gray'; return null; } /* 캔버스에 그린 뒤 JPEG로 재인코딩, 원본보다 작아질 때만 XObject에 반영 */ function writeCompressedImage(obj, srcW, srcH, drawFn, maxDim, quality, origLen) { var scale = Math.min(1, maxDim / Math.max(srcW, srcH, 1)); var w = Math.max(1, Math.round(srcW * scale)); var h = Math.max(1, Math.round(srcH * scale)); var canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; drawFn(canvas); var newUrl = canvas.toDataURL('image/jpeg', quality / 100); var newBytes = dataURLToBytes(newUrl); if (newBytes.length < origLen) { obj.contents = newBytes; obj.dict.set(PDFLib.PDFName.of('Width'), PDFLib.PDFNumber.of(w)); obj.dict.set(PDFLib.PDFName.of('Height'), PDFLib.PDFNumber.of(h)); obj.dict.set(PDFLib.PDFName.of('Length'), PDFLib.PDFNumber.of(newBytes.length)); obj.dict.set(PDFLib.PDFName.of('Filter'), PDFLib.PDFName.of('DCTDecode')); obj.dict.set(PDFLib.PDFName.of('ColorSpace'), PDFLib.PDFName.of('DeviceRGB')); obj.dict.delete(PDFLib.PDFName.of('DecodeParms')); obj.dict.delete(PDFLib.PDFName.of('DP')); return true; } return false; } /* JPEG/무압축 비트맵 XObject 정보 스캔 (재인코딩 없이 Width/Height/Length만 읽음, 예상용량 계산용) */ function scanJpegSummary(bytes) { return PDFLib.PDFDocument.load(bytes).then(function (pdfDoc) { var items = []; var total = 0; var pages = pdfDoc.getPages(); pages.forEach(function (page) { var resources = page.node.Resources(); if (!resources) return; var xobjDictRef = resources.get(PDFLib.PDFName.of('XObject')); var xobjDict = xobjDictRef ? pdfDoc.context.lookup(xobjDictRef) : null; if (!xobjDict || !xobjDict.keys) return; xobjDict.keys().forEach(function (name) { var ref = xobjDict.get(name); var obj = pdfDoc.context.lookup(ref); if (!obj || !obj.dict || !obj.contents) return; var subtype = obj.dict.get(PDFLib.PDFName.of('Subtype')); if (!subtype || subtype.toString() !== '/Image') return; var imgType = detectImageType(obj.dict, pdfDoc.context); if (!imgType) return; var w = obj.dict.get(PDFLib.PDFName.of('Width')); var h = obj.dict.get(PDFLib.PDFName.of('Height')); var wNum = numOf(w); var hNum = numOf(h); items.push({ bytes: obj.contents.length, width: wNum, height: hNum, type: imgType }); total += obj.contents.length; }); }); return { items: items, total: total }; })['catch'](function () { return { items: [], total: 0 }; }); } /* 예상 용량 표시 (근사치) */ function updateEstimate(preset) { if (!state.bytes) return; var elId = preset === 'pres' ? 'pdfcomp-pres-estimate' : 'pdfcomp-proof-estimate'; var el = document.getElementById(elId); var mode = preset === 'pres' ? state.modePres : state.modeProof; var dpi = parseInt(document.getElementById('pdfcomp-' + preset + '-dpi').value, 10); var q = parseInt(document.getElementById('pdfcomp-' + preset + '-q').value, 10); el.textContent = '예상 용량 계산 중...'; if (mode === 'A') { state.pdfjsDoc.getPage(1).then(function (page) { var viewport = page.getViewport({ scale: dpi / 72 }); var canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; var ctx = canvas.getContext('2d'); return page.render({ canvasContext: ctx, viewport: viewport }).promise.then(function () { var url = canvas.toDataURL('image/jpeg', q / 100); var page1Bytes = dataURLToBytes(url).length; var est = Math.round(page1Bytes * state.numPages * 1.03); el.textContent = '예상 용량: 약 ' + fmtSize(est) + ' (1페이지 기준 추정치)'; }); })['catch'](function () { el.textContent = '예상 용량을 계산할 수 없습니다'; }); } else { if (!state.jpegSummary || state.jpegSummary.items.length === 0) { el.textContent = '예상 용량: 원본과 비슷함 (재압축 가능한 이미지 없음)'; return; } var maxDim = Math.round(dpi * 11.7); var newTotal = 0; state.jpegSummary.items.forEach(function (it) { var scale = Math.min(1, maxDim / Math.max(it.width, it.height, 1)); newTotal += it.bytes * (q / 100) * scale * scale; }); var estSize = Math.round(state.bytes.length - state.jpegSummary.total + newTotal); if (estSize > state.bytes.length) estSize = state.bytes.length; el.textContent = '예상 용량: 약 ' + fmtSize(estSize) + ' (이미지 데이터 기준 추정치)'; } } /* ---------- 실제 압축 처리 ---------- */ function rasterizeCompress(bytes, dpi, quality, onProgress) { return pdfjsLib.getDocument({ data: bytes.slice() }).promise.then(function (pdf) { return PDFLib.PDFDocument.create().then(function (newDoc) { var pageCount = pdf.numPages; var firstPreview = null; var chain = Promise.resolve(); var _loop = function (i) { chain = chain.then(function () { return pdf.getPage(i).then(function (page) { var viewport = page.getViewport({ scale: dpi / 72 }); var canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; var ctx = canvas.getContext('2d'); return page.render({ canvasContext: ctx, viewport: viewport }).promise.then(function () { var jpegUrl = canvas.toDataURL('image/jpeg', quality / 100); if (i === 1) firstPreview = jpegUrl; var jpegBytes = dataURLToBytes(jpegUrl); return newDoc.embedJpg(jpegBytes).then(function (img) { var ptW = viewport.width * 72 / dpi; var ptH = viewport.height * 72 / dpi; var newPage = newDoc.addPage([ptW, ptH]); newPage.drawImage(img, { x: 0, y: 0, width: ptW, height: ptH }); if (onProgress) onProgress(i, pageCount); }); }); }); }); }; for (var i = 1; i <= pageCount; i++) _loop(i); return chain.then(function () { return newDoc.save(); }).then(function (outBytes) { return { bytes: outBytes, preview: firstPreview }; }); }); }); } function imageOnlyCompress(bytes, maxDim, quality, onProgress) { return PDFLib.PDFDocument.load(bytes).then(function (pdfDoc) { var pages = pdfDoc.getPages(); var touched = 0; var chain = Promise.resolve(); pages.forEach(function (page, idx) { chain = chain.then(function () { var resources = page.node.Resources(); if (!resources) { if (onProgress) onProgress(idx + 1, pages.length); return; } var xobjDictRef = resources.get(PDFLib.PDFName.of('XObject')); var xobjDict = xobjDictRef ? pdfDoc.context.lookup(xobjDictRef) : null; if (!xobjDict || !xobjDict.keys) { if (onProgress) onProgress(idx + 1, pages.length); return; } var keys = xobjDict.keys(); var innerChain = Promise.resolve(); keys.forEach(function (name) { innerChain = innerChain.then(function () { var ref = xobjDict.get(name); var obj = pdfDoc.context.lookup(ref); if (!obj || !obj.dict || !obj.contents) return; var subtype = obj.dict.get(PDFLib.PDFName.of('Subtype')); if (!subtype || subtype.toString() !== '/Image') return; var imgType = detectImageType(obj.dict, pdfDoc.context); if (!imgType) return; if (imgType === 'jpeg') { var rawBytes = obj.contents; var blob = new Blob([rawBytes], { type: 'image/jpeg' }); return createImageBitmap(blob).then(function (bitmap) { var ok = writeCompressedImage(obj, bitmap.width, bitmap.height, function (canvas) { canvas.getContext('2d').drawImage(bitmap, 0, 0, canvas.width, canvas.height); }, maxDim, quality, rawBytes.length); if (ok) touched++; })['catch'](function () { }); } else { var w0 = numOf(obj.dict.get(PDFLib.PDFName.of('Width'))); var h0 = numOf(obj.dict.get(PDFLib.PDFName.of('Height'))); if (!w0 || !h0) return; return inflateZlib(obj.contents).then(function (raw) { var comps = imgType === 'flate-rgb' ? 3 : 1; if (raw.length < w0 * h0 * comps) return; var imgData = new ImageData(w0, h0); var px = imgData.data; var i, j; if (comps === 3) { for (i = 0, j = 0; i < w0 * h0; i++) { px[j++] = raw[i * 3]; px[j++] = raw[i * 3 + 1]; px[j++] = raw[i * 3 + 2]; px[j++] = 255; } } else { for (i = 0, j = 0; i < w0 * h0; i++) { var v = raw[i]; px[j++] = v; px[j++] = v; px[j++] = v; px[j++] = 255; } } var srcCanvas = document.createElement('canvas'); srcCanvas.width = w0; srcCanvas.height = h0; srcCanvas.getContext('2d').putImageData(imgData, 0, 0); var ok = writeCompressedImage(obj, w0, h0, function (canvas) { canvas.getContext('2d').drawImage(srcCanvas, 0, 0, canvas.width, canvas.height); }, maxDim, quality, obj.contents.length); if (ok) touched++; })['catch'](function () { }); } }); }); return innerChain.then(function () { if (onProgress) onProgress(idx + 1, pages.length); }); }); }); return chain.then(function () { return pdfDoc.save().then(function (outBytes) { return { bytes: outBytes, touched: touched }; }); }); }); } function renderFirstPagePreview(bytes) { return pdfjsLib.getDocument({ data: bytes.slice() }).promise.then(function (pdf) { return pdf.getPage(1).then(function (page) { var viewport = page.getViewport({ scale: 1.2 }); var canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; var ctx = canvas.getContext('2d'); return page.render({ canvasContext: ctx, viewport: viewport }).promise.then(function () { return canvas.toDataURL('image/jpeg', 0.85); }); }); }); } function runPreset(mode, dpi, quality, label) { if (mode === 'A') { return rasterizeCompress(state.bytes, dpi, quality, function (done, total) { progressEl.textContent = label + ' 처리 중... (' + done + '/' + total + '페이지)'; }); } else { var maxDim = Math.round(dpi * 11.7); return imageOnlyCompress(state.bytes, maxDim, quality, function (done, total) { progressEl.textContent = label + ' 처리 중... (' + done + '/' + total + '페이지)'; }).then(function (res) { return renderFirstPagePreview(res.bytes).then(function (preview) { return { bytes: res.bytes, preview: preview, touched: res.touched }; }); }); } } function addResultCard(kind, label, blob, previewUrl, sizeText, extraNote) { var wrap = document.createElement('div'); wrap.className = 'pdfcomp-result'; var thumb = document.createElement('div'); thumb.className = 'pdfcomp-thumb'; if (previewUrl) { var img = document.createElement('img'); img.src = previewUrl; thumb.appendChild(img); } else { thumb.textContent = '미리보기 없음'; } wrap.appendChild(thumb); var info = document.createElement('div'); info.className = 'pdfcomp-rinfo'; var title = document.createElement('div'); title.className = 'pdfcomp-rname'; title.textContent = label; info.appendChild(title); var sizeDiv = document.createElement('div'); sizeDiv.className = 'pdfcomp-rsize'; sizeDiv.innerHTML = sizeText; info.appendChild(sizeDiv); var fnameInput = document.createElement('input'); fnameInput.className = 'pdfcomp-fname'; fnameInput.value = buildName(kind); info.appendChild(fnameInput); if (extraNote) { var note = document.createElement('div'); note.className = 'pdfcomp-note'; note.textContent = extraNote; info.appendChild(note); } var actions = document.createElement('div'); actions.className = 'pdfcomp-ractions'; var url = URL.createObjectURL(blob); var link = document.createElement('a'); link.className = 'pdfcomp-primary'; link.href = url; link.download = fnameInput.value + '.pdf'; link.textContent = '다운로드'; fnameInput.addEventListener('input', function () { link.download = (fnameInput.value || 'download') + '.pdf'; state.results[kind].filename = fnameInput.value || 'download'; }); actions.appendChild(link); info.appendChild(actions); wrap.appendChild(info); resultsEl.appendChild(wrap); state.results[kind] = { blob: blob, filename: fnameInput.value }; } runBtn.addEventListener('click', function () { if (!state.bytes) return; runBtn.disabled = true; resultsEl.innerHTML = ''; state.results = {}; savebtns.style.display = 'none'; progressEl.textContent = '처리 중...'; var origSize = state.bytes.length; var presDpi = parseInt(document.getElementById('pdfcomp-pres-dpi').value, 10); var presQ = parseInt(document.getElementById('pdfcomp-pres-q').value, 10); var proofDpi = parseInt(document.getElementById('pdfcomp-proof-dpi').value, 10); var proofQ = parseInt(document.getElementById('pdfcomp-proof-q').value, 10); var origBlob = new Blob([state.bytes], { type: 'application/pdf' }); renderFirstPagePreview(state.bytes).then(function (origPreview) { addResultCard('orig', '원본', origBlob, origPreview, '용량: <b>' + fmtSize(origSize) + '</b>', null); return runPreset(state.modePres, presDpi, presQ, '발표용').then(function (presRes) { var presBlob = new Blob([presRes.bytes], { type: 'application/pdf' }); var reduce = Math.round((1 - presBlob.size / origSize) * 100); var note = (state.modePres === 'B' && presRes.touched === 0) ? '재압축 가능한 이미지를 찾지 못해 용량 변화가 적을 수 있어요. (텍스트/도형 위주 문서로 보여요)' : null; addResultCard('pres', '발표용', presBlob, presRes.preview, '용량: <b>' + fmtSize(presBlob.size) + '</b> (원본 대비 ' + (reduce > 0 ? reduce + '%↓' : '변화 적음') + ')', note); return runPreset(state.modeProof, proofDpi, proofQ, '증빙용'); }).then(function (proofRes) { var proofBlob = new Blob([proofRes.bytes], { type: 'application/pdf' }); var reduce = Math.round((1 - proofBlob.size / origSize) * 100); var note = (state.modeProof === 'B' && proofRes.touched === 0) ? '재압축 가능한 이미지를 찾지 못해 용량 변화가 적을 수 있어요. (텍스트/도형 위주 문서로 보여요)' : null; addResultCard('proof', '증빙용', proofBlob, proofRes.preview, '용량: <b>' + fmtSize(proofBlob.size) + '</b> (원본 대비 ' + (reduce > 0 ? reduce + '%↓' : '변화 적음') + ')', note); progressEl.textContent = '완료되었습니다.'; runBtn.disabled = false; savebtns.style.display = 'flex'; }); })['catch'](function (err) { console.error(err); progressEl.textContent = '오류가 발생했습니다: ' + (err && err.message ? err.message : err); runBtn.disabled = false; }); }); /* ---------- 저장 ---------- */ document.getElementById('pdfcomp-saveall').addEventListener('click', function () { var order = ['orig', 'pres', 'proof']; order.forEach(function (kind, idx) { var r = state.results[kind]; if (!r) return; setTimeout(function () { var url = URL.createObjectURL(r.blob); var a = document.createElement('a'); a.href = url; a.download = r.filename + '.pdf'; document.body.appendChild(a); a.click(); document.body.removeChild(a); }, idx * 400); }); }); document.getElementById('pdfcomp-savezip').addEventListener('click', function () { var order = ['orig', 'pres', 'proof']; var zip = new JSZip(); order.forEach(function (kind) { var r = state.results[kind]; if (!r) return; zip.file(r.filename + '.pdf', r.blob); }); zip.generateAsync({ type: 'blob' }).then(function (content) { var url = URL.createObjectURL(content); var a = document.createElement('a'); a.href = url; a.download = state.baseName + '_제출파일.zip'; document.body.appendChild(a); a.click(); document.body.removeChild(a); }); }); })(); </script> </body> </html> 모두의계산기/PDF취합관련 pdf VC가좋아하는웹앱 발표자료 투자자가원하는웹앱 최매슨생 https://0-1.kr/33 https://0-1.kr/33#entry33comment Fri, 4 Dec 2020 17:06:46 +0900 https://0-1.kr/30 <!-- 모두의 발표장 계산기 V29_260605 출처: 스타트업ex _ cds1981@naver.com 티스토리 주소: 0-1.kr --> <style> *{box-sizing:border-box;-webkit-box-sizing:border-box;margin:0;padding:0;} .pj-wrap{font-family:'Noto Sans KR',sans-serif;background:#f0f4f8;color:#1e293b;min-height:100vh;padding:0 0 40px 0;max-width:900px;margin:0 auto;} /* 헤더 */ .pj-header{background:linear-gradient(135deg,#1e40af,#3b82f6);padding:10px 12px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;-webkit-flex-wrap:wrap;flex-wrap:wrap;} .pj-header-title{-webkit-flex:1;flex:1;min-width:120px;} .pj-header-title h1{font-size:17px;font-weight:700;color:#fff;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pj-header-title p{font-size:10px;color:#bfdbfe;margin:2px 0 0;} .pj-header-btns{display:-webkit-flex;display:flex;gap:4px;-webkit-flex-shrink:0;flex-shrink:0;-webkit-flex-wrap:wrap;flex-wrap:wrap;} .pj-hdr-btn{background:rgba(255,255,255,0.18);color:#fff;border:1.5px solid rgba(255,255,255,0.4);border-radius:7px;padding:6px 9px;font-size:11px;font-weight:700;cursor:pointer;-webkit-appearance:none;font-family:inherit;white-space:nowrap;} .pj-hdr-btn:hover{background:rgba(255,255,255,0.3);} .pj-hdr-btn-green{background:rgba(5,150,105,0.7);border-color:rgba(5,150,105,0.9);} .pj-hdr-btn-green:hover{background:rgba(5,150,105,0.9);} .pj-section{background:#fff;border-radius:14px;margin:14px 12px 0;padding:16px;border:1px solid #e2e8f0;box-shadow:0 2px 8px rgba(0,0,0,0.06);} .pj-section-title{font-size:15px;font-weight:700;color:#1e40af;margin:0 0 12px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:6px;} /* 드롭존 */ .pj-dropzone{border:2px dashed #3b82f6;border-radius:10px;padding:28px 18px;text-align:center;cursor:pointer;background:#eff6ff;margin-bottom:12px;transition:background 0.2s;} .pj-dropzone:hover,.pj-dropzone.drag-over{background:#dbeafe;} .pj-dropzone-icon{font-size:36px;margin-bottom:8px;} .pj-dropzone p{margin:0;font-size:14px;color:#64748b;} .pj-dropzone b{color:#1e40af;} .pj-dropzone small{font-size:12px;color:#94a3b8;margin-top:4px;display:block;} .pj-file-input{display:none;} /* 파일 리스트 (가로 길게) */ .pj-file-list-wrap{border:1.5px solid #e2e8f0;border-radius:10px;overflow:hidden;max-height:360px;overflow-y:auto;background:#f8fafc;margin-bottom:10px;} .pj-file-list-wrap:empty{display:none;} .pj-file-list{list-style:none;margin:0;padding:0;} .pj-file-row{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:0;padding:6px 8px;border-bottom:1px solid #e2e8f0;background:#fff;cursor:default;touch-action:auto;-webkit-user-select:none;user-select:none;} .pj-file-row:last-child{border-bottom:none;} .pj-file-row:hover{background:#f0f9ff;} .pj-file-row.sortable-ghost{opacity:0.35;background:#dbeafe;} /* 썸네일 */ .pj-row-thumb{width:34px;min-width:34px;height:44px;-webkit-flex-shrink:0;flex-shrink:0;background:#e2e8f0;border-radius:4px;overflow:hidden;border:1px solid #cbd5e1;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;} .pj-row-thumb img{width:100%;height:100%;object-fit:contain;display:block;} .pj-row-thumb-empty{font-size:16px;color:#94a3b8;} /* 번호 */ .pj-row-num{font-size:13px;font-weight:700;color:#1e40af;width:26px;min-width:26px;-webkit-flex-shrink:0;flex-shrink:0;text-align:center;padding:0;} /* 핸들 */ .pj-row-handle{font-size:18px;color:#94a3b8;cursor:grab;width:28px;min-width:28px;-webkit-flex-shrink:0;flex-shrink:0;padding:0;text-align:center;-webkit-user-select:none;user-select:none;touch-action:none;} /* 파일 정보 */ .pj-row-info{-webkit-flex:1;flex:1;min-width:0;overflow:hidden;padding:0 6px;} .pj-row-name{font-size:13px;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pj-row-pages{font-size:11px;color:#64748b;margin-top:1px;} /* 삭제 */ .pj-row-del{background:#fee2e2;color:#dc2626;border:1px solid #fca5a5;border-radius:6px;padding:5px 9px;font-size:12px;cursor:pointer;-webkit-flex-shrink:0;flex-shrink:0;-webkit-appearance:none;font-family:inherit;font-weight:600;} .pj-row-del:hover{background:#fecaca;} /* 버튼 공통 */ .pj-btn-row{display:-webkit-flex;display:flex;gap:8px;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-top:8px;} .pj-btn{background:#fff;color:#1e40af;border:1.5px solid #93c5fd;border-radius:8px;padding:9px 13px;font-size:13px;cursor:pointer;-webkit-appearance:none;font-family:inherit;font-weight:600;} .pj-btn:hover{background:#eff6ff;} .pj-btn-green{background:#059669;color:#fff;border-color:#059669;} .pj-btn-green:hover{background:#047857;} .pj-btn-orange{background:#d97706;color:#fff;border-color:#d97706;font-size:12px;padding:7px 11px;} /* 툴팁 */ .pj-tooltip-wrap{position:relative;display:inline-block;} .pj-tooltip{position:absolute;bottom:calc(100% + 7px);left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#1e293b;color:#fff;font-size:11px;padding:5px 9px;border-radius:6px;pointer-events:none;opacity:0;-webkit-transition:opacity 0.2s;transition:opacity 0.2s;z-index:9999;white-space:nowrap;text-align:center;line-height:1.4;} .pj-tooltip::after{content:'';position:absolute;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border:5px solid transparent;border-top-color:#1e293b;} .pj-tooltip-wrap:hover .pj-tooltip{opacity:1;} /* 구글드라이브 */ .pj-gdrive-toggle{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;background:#fef9c3;border:1.5px solid #fde68a;border-radius:10px;padding:10px 14px;cursor:pointer;margin-top:12px;-webkit-user-select:none;user-select:none;} .pj-gdrive-toggle span{font-size:13px;color:#92400e;font-weight:700;-webkit-flex:1;flex:1;} .pj-gdrive-badge{display:inline-block;background:#d97706;color:#fff;font-size:10px;font-weight:700;border-radius:4px;padding:2px 6px;} .pj-gdrive-arrow{font-size:13px;color:#92400e;-webkit-transition:-webkit-transform 0.2s;transition:transform 0.2s;} .pj-gdrive-arrow.open{-webkit-transform:rotate(180deg);transform:rotate(180deg);} .pj-gdrive-body{display:none;background:#fefce8;border:1.5px solid #fde68a;border-top:none;border-radius:0 0 10px 10px;padding:12px;} .pj-gdrive-body.open{display:block;} .pj-gdrive-desc{font-size:12px;color:#92400e;margin-bottom:10px;line-height:1.6;} .pj-gdrive-link-item{display:-webkit-flex;display:flex;gap:6px;margin-bottom:8px;-webkit-align-items:center;align-items:center;} .pj-gdrive-input{-webkit-flex:1;flex:1;background:#fff;border:1.5px solid #fbbf24;border-radius:7px;padding:7px 10px;font-size:12px;color:#1e293b;-webkit-appearance:none;font-family:inherit;} .pj-gdrive-name-input{width:90px;background:#fff;border:1.5px solid #fbbf24;border-radius:7px;padding:7px 8px;font-size:12px;color:#1e293b;-webkit-appearance:none;font-family:inherit;} /* 공지 */ .pj-notice-area{margin-bottom:14px;} .pj-notice-label{font-size:13px;color:#64748b;margin-bottom:6px;font-weight:700;} .pj-notice-tabs{display:-webkit-flex;display:flex;gap:6px;margin-bottom:8px;} .pj-ntab{background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:7px;padding:6px 13px;font-size:12px;font-weight:700;color:#64748b;cursor:pointer;-webkit-appearance:none;font-family:inherit;} .pj-ntab.active{background:#eff6ff;border-color:#3b82f6;color:#1e40af;} .pj-notice-textarea{width:100%;background:#f8fafc;border:1.5px solid #cbd5e1;border-radius:8px;padding:10px;font-size:14px;color:#1e293b;resize:vertical;min-height:80px;font-family:inherit;-webkit-appearance:none;} .pj-notice-textarea:focus{outline:none;border-color:#3b82f6;} .pj-notice-upload-area{border:2px dashed #cbd5e1;border-radius:8px;padding:14px;text-align:center;background:#f8fafc;cursor:pointer;} .pj-notice-upload-area:hover{background:#eff6ff;border-color:#3b82f6;} .pj-notice-preview{margin-top:8px;max-width:100%;max-height:100px;object-fit:contain;border-radius:6px;display:block;} .pj-notice-opt{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;margin-top:8px;background:#f0fdf4;border-radius:8px;padding:10px;} .pj-notice-opt label{font-size:13px;color:#166534;-webkit-flex:1;flex:1;} .pj-notice-opt input[type=checkbox]{width:18px;height:18px;accent-color:#059669;cursor:pointer;} /* 사이간지 */ .pj-inter-options{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:8px;margin-bottom:12px;} .pj-inter-btn{background:#f8fafc;border:2px solid #e2e8f0;border-radius:8px;padding:8px 12px;font-size:13px;color:#475569;cursor:pointer;-webkit-appearance:none;font-family:inherit;font-weight:600;} .pj-inter-btn.active{border-color:#3b82f6;color:#1e40af;background:#eff6ff;} .pj-inter-count{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:10px;margin-top:8px;} .pj-inter-count label{font-size:13px;color:#64748b;font-weight:600;} .pj-inter-count input{background:#f8fafc;border:1.5px solid #cbd5e1;color:#1e293b;border-radius:6px;padding:6px 10px;font-size:14px;width:70px;-webkit-appearance:none;text-align:center;} /* 타이머 */ .pj-timer-mode{display:-webkit-flex;display:flex;gap:8px;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:12px;} .pj-mode-btn{background:#f8fafc;border:2px solid #e2e8f0;border-radius:8px;padding:9px 15px;font-size:13px;color:#475569;cursor:pointer;-webkit-appearance:none;font-family:inherit;font-weight:600;} .pj-mode-btn.active{border-color:#3b82f6;color:#1e40af;background:#eff6ff;} .pj-timer-set{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;} .pj-timer-set label{font-size:13px;color:#64748b;display:block;margin-bottom:4px;font-weight:600;} .pj-timer-set input{background:#f8fafc;border:1.5px solid #cbd5e1;color:#1e293b;border-radius:6px;padding:8px 10px;font-size:22px;width:100%;-webkit-appearance:none;text-align:center;font-weight:700;} .pj-timer-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;} .pj-opt-row{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;background:#f8fafc;border-radius:8px;padding:9px;border:1px solid #e2e8f0;} .pj-opt-row label{font-size:13px;color:#475569;-webkit-flex:1;flex:1;font-weight:600;} .pj-opt-row input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#3b82f6;} .pj-timer-pos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px;} .pj-pos-btn,.pj-size-btn{background:#f8fafc;border:2px solid #e2e8f0;border-radius:8px;padding:7px 4px;font-size:12px;color:#475569;cursor:pointer;-webkit-appearance:none;font-family:inherit;text-align:center;font-weight:600;} .pj-pos-btn.active,.pj-size-btn.active{border-color:#3b82f6;color:#1e40af;background:#eff6ff;} .pj-timer-size{display:-webkit-flex;display:flex;gap:8px;margin-bottom:10px;} .pj-size-btn{padding:7px 18px;} .pj-opacity-row{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:10px;margin-bottom:10px;} .pj-opacity-row label{font-size:13px;color:#64748b;min-width:55px;font-weight:600;} .pj-opacity-row input[type=range]{-webkit-flex:1;flex:1;accent-color:#3b82f6;} .pj-opacity-row span{font-size:13px;color:#1e40af;min-width:36px;text-align:right;font-weight:700;} .pj-caption-box{background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px;margin-top:10px;} .pj-caption-input{width:100%;background:#fff;border:1.5px solid #cbd5e1;border-radius:8px;padding:8px 10px;font-size:14px;color:#1e293b;-webkit-appearance:none;font-family:inherit;margin-top:8px;} .pj-caption-opts{display:-webkit-flex;display:flex;gap:8px;margin-top:8px;} .pj-cap-mode-btn{background:#f8fafc;border:2px solid #e2e8f0;border-radius:7px;padding:6px 11px;font-size:12px;color:#475569;cursor:pointer;-webkit-appearance:none;font-family:inherit;font-weight:600;} .pj-cap-mode-btn.active{border-color:#3b82f6;color:#1e40af;background:#eff6ff;} /* 전체보기 버튼 */ .pj-fullview-btn-wrap{margin:18px 12px 0;} .pj-fullview-btn{background:linear-gradient(135deg,#1e40af,#3b82f6);color:#fff;border:none;border-radius:14px;padding:16px 40px;font-size:18px;font-weight:700;cursor:pointer;width:100%;-webkit-appearance:none;font-family:inherit;letter-spacing:1px;box-shadow:0 4px 14px rgba(59,130,246,0.4);} .pj-fullview-btn:hover{background:linear-gradient(135deg,#1d4ed8,#2563eb);} .pj-share-row{margin:12px 12px 0;display:-webkit-flex;display:flex;gap:8px;-webkit-flex-wrap:wrap;flex-wrap:wrap;} /* ============================ 전체보기 오버레이 ============================ */ .pj-overlay{position:fixed;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;height:100% !important;background:#0a0a0a;z-index:2147483647 !important;display:none;margin:0 !important;padding:0 !important;pointer-events:none !important;} .pj-overlay.active{display:block !important;} /* 슬라이드 컨테이너 */ .pj-slide-container{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none !important;} /* 개별 슬라이드 */ .pj-slide{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;background:#0a0a0a;-webkit-transition:opacity 0.15s;transition:opacity 0.15s;pointer-events:none;} .pj-slide.hidden{display:none;} .pj-slide canvas{max-width:100%;max-height:calc(100% - 60px);display:block;object-fit:contain;} .pj-slide img{max-width:100%;max-height:calc(100% - 60px);object-fit:contain;display:block;} /* 공지 슬라이드 */ .pj-slide-notice{background:#0f172a;-webkit-flex-direction:column;flex-direction:column;padding:30px 24px 80px;} .pj-slide-notice-inner{background:rgba(255,255,255,0.05);border:1px solid rgba(59,130,246,0.35);border-radius:14px;padding:28px;max-width:700px;width:100%;text-align:center;} .pj-slide-notice-inner h2{font-size:20px;color:#93c5fd;margin-bottom:14px;font-weight:700;} .pj-slide-notice-inner p{font-size:16px;color:#e2e8f0;line-height:1.9;white-space:pre-wrap;} .pj-slide-notice-inner img{max-width:100%;max-height:50vh;object-fit:contain;border-radius:8px;} /* 사이간지 슬라이드 */ .pj-slide-inter{background:#0f172a;} .pj-inter-countdown{font-size:140px;font-weight:900;color:#3b82f6;line-height:1;} .pj-inter-wait{font-size:28px;font-weight:700;color:#94a3b8;} /* 하단 컨트롤바 */ .pj-ctrl-bar{position:fixed;bottom:0;left:0;right:0;pointer-events:auto !important;background:rgba(10,10,30,0.97);border-top:2px solid #3b82f6;padding:7px 8px;z-index:2147483647;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:5px;overflow:visible;} .pj-ctrl-bar-tabs{display:-webkit-flex;display:flex;gap:3px;-webkit-flex:1;flex:1;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;padding-bottom:1px;padding-top:30px;margin-top:-30px;} .pj-ctrl-bar-tabs::-webkit-scrollbar{height:2px;} .pj-ctrl-bar-tabs::-webkit-scrollbar-thumb{background:#3b82f6;border-radius:2px;} .pj-tab-btn{background:rgba(59,130,246,0.15);border:1.5px solid rgba(59,130,246,0.5);border-radius:6px;padding:5px 10px;font-size:13px;color:#93c5fd;cursor:pointer;-webkit-appearance:none;white-space:nowrap;font-family:inherit;font-weight:700;min-width:36px;text-align:center;} .pj-tab-btn.active{background:#3b82f6;color:#fff;border-color:#3b82f6;} .pj-tab-btn.done{background:rgba(5,150,105,0.25);border-color:#059669;color:#6ee7b7;cursor:default;} .pj-tab-btn.notice-btn{background:rgba(217,119,6,0.2);border-color:#d97706;color:#fbbf24;} .pj-ctrl-btns{display:-webkit-flex;display:flex;gap:4px;-webkit-flex-shrink:0;flex-shrink:0;} .pj-ctrl-btn{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:7px;padding:6px 10px;font-size:13px;cursor:pointer;color:#fff;-webkit-appearance:none;font-family:inherit;font-weight:600;white-space:nowrap;} .pj-ctrl-btn:hover{background:#3b82f6;} /* 페이지 이동 화살표 */ .pj-nav-btn{position:fixed;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:auto !important;background:rgba(30,64,175,0.45);color:#fff;border:none;border-radius:50%;width:44px;height:44px;font-size:22px;cursor:pointer;z-index:2147483645;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-appearance:none;pointer-events:auto;-webkit-transition:background 0.15s;transition:background 0.15s;} .pj-nav-btn:hover{background:rgba(59,130,246,0.75);} .pj-nav-prev{left:8px;} .pj-nav-next{right:8px;} .pj-nav-btn:disabled{opacity:0.2;cursor:default;} /* 슬라이드 번호 표시 */ .pj-slide-counter{position:fixed;top:10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:rgba(10,10,30,0.65);color:#93c5fd;font-size:12px;font-weight:600;padding:4px 12px;border-radius:12px;z-index:2147483644;pointer-events:none;} /* 타이머 */ .pj-timer-overlay{position:fixed;z-index:2147483640;pointer-events:none;display:none;} .pj-timer-overlay.active{display:block;} .pj-timer-box{background:rgba(10,20,40,0.7);border-radius:12px;padding:9px 16px;border:2px solid rgba(59,130,246,0.45);cursor:move;pointer-events:auto !important;min-width:fit-content;width:auto;text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);resize:both;overflow:visible;white-space:nowrap;} .pj-timer-display{font-size:32px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:2px;line-height:1.1;font-family:'Courier New',Courier,monospace;white-space:nowrap;display:block;} .pj-timer-display.warn1{color:#fbbf24;-webkit-animation:pj-blink 1s infinite;animation:pj-blink 1s infinite;} .pj-timer-display.warn2{color:#f87171;-webkit-animation:pj-blink 0.5s infinite;animation:pj-blink 0.5s infinite;} .pj-timer-display.overtime{color:#f87171;} .pj-timer-ctrl{display:-webkit-flex;display:flex;gap:4px;margin-top:5px;-webkit-justify-content:center;justify-content:center;} .pj-timer-ctrl button{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.22);border-radius:5px;padding:3px 10px;font-size:14px;color:#fff;cursor:pointer;-webkit-appearance:none;pointer-events:auto;} .pj-timer-ctrl button:hover{background:rgba(59,130,246,0.55);} .pj-timer-caption{font-size:12px;color:#94a3b8;margin-top:4px;width:160px;overflow:hidden;white-space:nowrap;display:block;position:relative;} .pj-timer-caption.scroll{display:block;overflow:hidden;} .pj-timer-caption.scroll span{display:inline-block;white-space:nowrap;-webkit-animation:pj-scroll 10s linear infinite;animation:pj-scroll 10s linear infinite;padding-right:40px;} /* 닫기 버튼 */ .pj-close-btn{position:fixed;top:8px;right:8px;z-index:2147483647;pointer-events:auto !important;background:rgba(59,130,246,0.8);color:#fff;border:none;border-radius:50%;width:38px;height:38px;font-size:17px;cursor:pointer;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-appearance:none;box-shadow:0 2px 8px rgba(0,0,0,0.4);} /* 로딩 */ .pj-loading{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:rgba(15,23,42,0.93);color:#fff;border-radius:14px;padding:24px 36px;font-size:15px;font-weight:600;z-index:2147483647;text-align:center;display:none;} .pj-loading.show{display:block;} .pj-spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,0.2);border-top-color:#3b82f6;border-radius:50%;-webkit-animation:pj-spin 0.8s linear infinite;animation:pj-spin 0.8s linear infinite;margin:0 auto 10px;} /* 토스트 */ .pj-toast{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 76px);left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#1e293b;color:#fff;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;z-index:2147483647;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;pointer-events:none;white-space:nowrap;} .pj-toast.show{opacity:1;} /* 사용설명서 */ .pj-manual{background:#fff;border-radius:14px;margin:14px 12px 0;padding:14px 18px;border:1px solid #bfdbfe;font-size:13px;line-height:1.9;color:#475569;} .pj-manual h3{color:#1e40af;font-size:15px;margin:0 0 10px;font-weight:700;} .pj-manual ol{margin:0;padding-left:18px;} .pj-manual li{margin-bottom:4px;} .pj-manual b{color:#1e40af;} @-webkit-keyframes pj-scroll{0%{-webkit-transform:translateX(60%);transform:translateX(60%);}100%{-webkit-transform:translateX(-120%);transform:translateX(-120%);}} @keyframes pj-scroll{0%{transform:translateX(60%);}100%{transform:translateX(-120%);}} @-webkit-keyframes pj-blink{0%,100%{opacity:1;}50%{opacity:0.15;}} @keyframes pj-blink{0%,100%{opacity:1;}50%{opacity:0.15;}} @-webkit-keyframes pj-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg);}} @keyframes pj-spin{to{transform:rotate(360deg);}} /* 경고 멘트 자막 */ .pj-warn-caption{position:fixed;bottom:58px;left:0;right:0;text-align:center;z-index:2147483646;pointer-events:none !important;display:none;overflow:hidden;height:36px;line-height:36px;} .pj-warn-caption.show{display:block;} .pj-warn-caption-inner{display:inline-block;background:rgba(15,23,42,0.9);color:#fff;font-size:14px;font-weight:700;padding:5px 24px;border-radius:8px;border:1.5px solid #ef4444;white-space:nowrap;} .pj-warn-caption-inner.scroll{-webkit-animation:pjWarnScroll 10s linear 1 forwards;animation:pjWarnScroll 10s linear 1 forwards;} .pj-warn-caption-inner.blink{-webkit-animation:pjWarnBlink 1.2s ease-in-out 3 forwards;animation:pjWarnBlink 1.2s ease-in-out 3 forwards;} @-webkit-keyframes pjWarnScroll{0%{-webkit-transform:translateX(110vw);transform:translateX(110vw);}100%{-webkit-transform:translateX(-110%);transform:translateX(-110%);}} @keyframes pjWarnScroll{0%{transform:translateX(110vw);}100%{transform:translateX(-110%);}} @-webkit-keyframes pjWarnBlink{0%,100%{opacity:1;}50%{opacity:0.1;}} @keyframes pjWarnBlink{0%,100%{opacity:1;}50%{opacity:0.1;}} @media(max-width:500px){ .pj-timer-opts{grid-template-columns:1fr;} .pj-timer-pos{grid-template-columns:repeat(2,1fr);} .pj-header-title h1{font-size:14px;} .pj-hdr-btn{font-size:10px;padding:5px 7px;} .pj-tooltip{white-space:nowrap !important;} } @media(max-width:360px){ .pj-hdr-btn{font-size:10px;padding:4px 6px;} .pj-header-title h1{font-size:13px;} } </style> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;600;700&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.2/Sortable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js"></script> <div class="pj-wrap"> <!-- 헤더 (전체저장/불러오기 버튼 포함) --> <div class="pj-header"> <div class="pj-header-title"> <h1> 모두의 발표장 계산기</h1> <p>출처: 스타트업ex _ cds1981@naver.com | V29_260605</p> </div> <div class="pj-header-btns"> <div class="pj-tooltip-wrap"> <button class="pj-hdr-btn" id="pjResetBtn" style="background:rgba(220,38,38,0.55);border-color:rgba(220,38,38,0.7);"> 초기화</button> <div class="pj-tooltip">모든 파일과 설정을 초기값으로 리셋합니다</div> </div> <div class="pj-tooltip-wrap"> <button class="pj-hdr-btn pj-hdr-btn-green" id="pjSaveSessionBtn"> 전체저장</button> <div class="pj-tooltip">PDF와 모든 옵션을 .발표장 파일로 저장합니다</div> </div> <div class="pj-tooltip-wrap"> <button class="pj-hdr-btn" id="pjLoadSessionBtn"> 불러오기</button> <div class="pj-tooltip">.발표장 파일을 불러와 자동 복원합니다</div> </div> <div class="pj-tooltip-wrap"> <button class="pj-hdr-btn" id="pjFullviewBtnHdr" style="background:rgba(220,38,38,0.75);border-color:rgba(220,38,38,0.9);font-size:13px;">▶ 발표시작</button> <div class="pj-tooltip">전체화면으로 발표를 시작합니다</div> </div> </div> </div> <!-- ① 파일 업로드 & 리스트 --> <div class="pj-section"> <div class="pj-section-title"><span> </span> 발표자료 업로드 &amp; 순서 조정</div> <!-- 드롭존 (크게) --> <div class="pj-dropzone" id="pjDropzone"> <div class="pj-dropzone-icon"> </div> <p><b>PDF 파일을 여기에 드래그</b>하거나 탭해서 추가하세요</p> <small>여러 파일 동시 선택 가능 · 서버 미전송 (브라우저 내 처리)</small> </div> <!-- 파일 리스트 (스크롤 가능) --> <div class="pj-file-list-wrap" id="pjFileListWrap"> <ul class="pj-file-list" id="pjFileList"></ul> </div> <div class="pj-size-warn" id="pjSizeWarn">⚠ 총 용량이 크면 전체보기 시 버벅일 수 있습니다. 50MB 이하 권장.</div> <div style="font-size:11px;color:#94a3b8;margin:4px 0 8px;">※ 파일 1개 기준: 10MB 이하 권장 / 30MB 초과 시 느려질 수 있음</div> <div class="pj-btn-row" style="flex-wrap:wrap;"> <div class="pj-tooltip-wrap"> <button class="pj-btn" id="pjBackupBtn"> PDF 백업</button> <div class="pj-tooltip">업로드된 PDF를 다운로드합니다</div> </div> <div class="pj-tooltip-wrap"> <button class="pj-btn" id="pjSortUploadBtn"> 업로드순</button> <div class="pj-tooltip">1번: 업로드순 / 2번: 역순</div> </div> <div class="pj-tooltip-wrap"> <button class="pj-btn" id="pjSortNameBtn"> 이름순</button> <div class="pj-tooltip">1번: 가나다순 / 2번: 역순</div> </div> <div class="pj-tooltip-wrap"> <button class="pj-btn" id="pjSortSizeBtn"> 용량순</button> <div class="pj-tooltip">1번: 작은순 / 2번: 큰순</div> </div> </div> <input type="file" class="pj-file-input" id="pjFileInput" accept=".pdf" multiple> <input type="file" class="pj-file-input" id="pjSessionInput" accept=".발표장,.json"> <!-- 구글드라이브 접기 --> <div class="pj-gdrive-toggle" id="pjGdriveToggle"> <span> 구글드라이브 링크 불러오기 <span class="pj-gdrive-badge">테스트중</span></span> <span class="pj-gdrive-arrow" id="pjGdriveArrow">▼</span> </div> <div class="pj-gdrive-body" id="pjGdriveBody"> <div style="display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;margin-bottom:10px;padding:8px 10px;background:#fef3c7;border-radius:7px;"> <input type="checkbox" id="pjGdriveUse" style="width:18px;height:18px;accent-color:#d97706;cursor:pointer;"> <label for="pjGdriveUse" style="font-size:13px;color:#92400e;font-weight:700;cursor:pointer;">구글드라이브 링크 사용 (실제 파일 업로드와 동시 사용 불가)</label> </div> <div id="pjGdriveUseWrap" style="display:none;"> <div class="pj-gdrive-desc"> 구글드라이브 파일을 <b>공개 공유</b>로 설정 후 링크 입력<br>✅ 공유 설정: <b>링크가 있는 모든 사람 → 뷰어</b><br>⚠ CORS 정책으로 일부 환경에서 제한될 수 있습니다 <b>(테스트중)</b></div> <div id="pjGdriveLinkList"></div> <div style="display:-webkit-flex;display:flex;gap:6px;margin-top:8px;-webkit-flex-wrap:wrap;flex-wrap:wrap;"> <button class="pj-btn" id="pjGdriveAddLinkBtn" style="font-size:12px;padding:6px 10px;">+ 링크 추가</button> <button class="pj-btn pj-btn-orange" id="pjGdriveLoadAllBtn"> 전체 불러오기</button> </div> <div style="margin-top:8px;font-size:11px;color:#92400e;line-height:1.7;"> 공유 URL: drive.google.com/file/d/<b>파일ID</b>/view?usp=sharing</div> </div> </div> </div> <!-- ② 표시 옵션 --> <div class="pj-section"> <div class="pj-section-title"><span>⚙️</span> 표시 옵션</div> <div style="display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;padding:10px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0;"> <input type="checkbox" id="pjShowTabTooltipMain" style="width:18px;height:18px;accent-color:#3b82f6;cursor:pointer;"> <label for="pjShowTabTooltipMain" style="font-size:13px;color:#1e293b;font-weight:600;cursor:pointer;-webkit-flex:1;flex:1;"> 전체보기 발표순서 숫자 위에 마우스 위치시 파일명 말풍선 표시 <span style="font-size:11px;color:#94a3b8;font-weight:400;"> — 숫자는 그대로, 마우스 올릴 때만 파일명 표시 (기본: 미체크)</span> </label> </div> </div> <!-- ③ 공지사항 --> <div class="pj-section"> <div class="pj-section-title"><span> </span> 공지사항 설정</div> <!-- 공1: 발표전 공지 --> <div style="margin-bottom:14px;"> <div style="font-size:14px;font-weight:700;color:#1e40af;margin-bottom:8px;"> 공1 — 발표전 공지 <span style="font-size:11px;color:#64748b;font-weight:400;">(전체보기 [공1] 버튼 클릭 시 오버레이 표시)</span></div> <div class="pj-notice-tabs" data-group="judge"> <button class="pj-ntab active" data-target="judgeTextWrap">✏️ 텍스트</button> <button class="pj-ntab" data-target="judgeFileWrap"> 이미지/PDF</button> </div> <div id="judgeTextWrap"> <textarea class="pj-notice-textarea" id="pjJudgeNotice" placeholder="발표 전 안내할 내용을 입력하세요."></textarea> <div class="pj-color-row"> <label style="font-size:12px;color:#64748b;">글자색</label> <input type="color" class="pj-color-input" id="pjJudgeTextColor" value="#e2e8f0"> <label style="font-size:12px;color:#64748b;">배경색</label> <input type="color" class="pj-color-input" id="pjJudgeBgColor" value="#0f172a"> </div> </div> <div id="judgeFileWrap" style="display:none;"> <div class="pj-notice-upload-area" id="pjJudgeFileZone"> <p style="font-size:13px;color:#64748b;"> 이미지 또는 PDF를 드래그하거나 탭하세요</p> <img id="pjJudgePreview" class="pj-notice-preview" style="display:none;"> <p id="pjJudgeFileName" style="font-size:12px;color:#3b82f6;margin-top:4px;"></p> </div> <input type="file" class="pj-file-input" id="pjJudgeFileInput" accept="image/*,.pdf"> </div> </div> <!-- 발표자공지 목록 (추가 가능) --> <div style="margin-bottom:10px;"> <div style="font-size:14px;font-weight:700;color:#1e40af;margin-bottom:8px;"> 발표자공지 <span style="font-size:11px;color:#64748b;font-weight:400;">(각 발표자료 바로 위에 표시 · 여러개 추가 가능)</span></div> <div id="pjPresenterNoticeList"></div> <button class="pj-btn" id="pjAddPresenterNoticeBtn" style="margin-top:6px;font-size:12px;padding:7px 12px;">+ 발표자공지 추가</button> </div> <!-- 옵션들 --> <div style="background:#f0fdf4;border-radius:10px;padding:12px 14px;border:1px solid #bbf7d0;"> <div style="font-size:13px;font-weight:700;color:#166534;margin-bottom:10px;">⚙️ 공지 표시 옵션</div> <div style="display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;margin-bottom:8px;"> <input type="checkbox" id="pjPresenterNoticeInclude" style="width:18px;height:18px;accent-color:#059669;cursor:pointer;"> <label for="pjPresenterNoticeInclude" style="font-size:13px;color:#166534;cursor:pointer;">발표자료마다 앞에 발표자공지 삽입하기 <span style="color:#94a3b8;font-size:11px;">(기본: 미체크)</span></label> </div> <!-- 말풍선 옵션은 위 표시옵션 섹션에서 관리 --> </div> </div> <!-- ④ 사이간지 --> <div class="pj-section"> <div class="pj-section-title"><span> </span> 사이간지 옵션</div> <div class="pj-inter-options" id="pjInterOptions"> <button class="pj-inter-btn active" data-val="none">❌ 없음</button> <button class="pj-inter-btn" data-val="black">⬛ 빈 화면</button> <button class="pj-inter-btn" data-val="wait">⏳ 대기중</button> <button class="pj-inter-btn" data-val="logo"> 배경이미지</button> <button class="pj-inter-btn" data-val="countdown">3·2·1 카운트</button> </div> <div class="pj-inter-count"> <label>간지 장수:</label> <input type="number" id="pjInterCount" value="2" min="1" max="5"> <span style="font-size:12px;color:#64748b;">장 (카운트다운=3장 고정)</span> </div> <div id="pjLogoUploadWrap" style="display:none;margin-top:10px;"> <button class="pj-btn" id="pjLogoUploadBtn"> 배경이미지 선택</button> <input type="file" class="pj-file-input" id="pjLogoInput" accept="image/*"> <span id="pjLogoName" style="font-size:12px;color:#64748b;margin-left:8px;"></span> </div> <!-- 발표 진행 모드 --> <div style="margin-top:14px;"> <div style="font-size:13px;color:#475569;margin-bottom:8px;font-weight:700;"> 발표 진행 모드</div> <div style="display:-webkit-flex;display:flex;gap:8px;flex-wrap:wrap;"> <div class="pj-pmode-item active" id="pjPmodeScroll" onclick="setPresentMode('scroll')"> <input type="radio" name="pjPmode" id="pjPmodeScrollR" value="scroll" checked> <label for="pjPmodeScrollR"> 전체 스크롤 (기본)</label> </div> <div class="pj-pmode-item" id="pjPmodeClick" onclick="setPresentMode('click')"> <input type="radio" name="pjPmode" id="pjPmodeClickR" value="click"> <label for="pjPmodeClickR"> 순번 클릭시에만 이동</label> </div> </div> <div style="font-size:11px;color:#94a3b8;margin-top:5px;"> 전체스크롤: 모든 자료가 이어져 휠/화살표로 이동<br> 클릭이동: 번호 클릭 시에만 이동, 끝나도 다음으로 안 넘어감 </div> </div> </div> <!-- ⑤ 타이머 --> <div class="pj-section"> <div class="pj-section-title"><span>⏱️</span> 타이머 설정</div> <div style="font-size:13px;color:#64748b;margin-bottom:6px;font-weight:700;">표시 모드</div> <div class="pj-timer-mode" id="pjTimerMode"> <button class="pj-mode-btn active" data-mode="timer">⏱ 타이머</button> <button class="pj-mode-btn" data-mode="stopwatch">⏲ 스톱워치</button> <button class="pj-mode-btn" data-mode="clock"> 현재시간</button> <button class="pj-mode-btn" data-mode="none"> 시계없음</button> </div> <div id="pjTimerSetWrap"> <div class="pj-timer-set"> <div><label>분 (min)</label><input type="number" id="pjTimerMin" value="5" min="0" max="999"></div> <div><label>초 (sec)</label><input type="number" id="pjTimerSec" value="0" min="0" max="59"></div> </div> </div> <div style="font-size:13px;color:#64748b;margin-bottom:8px;font-weight:700;">⚠️ 경고 옵션</div> <div class="pj-timer-opts"> <div class="pj-opt-row"><label>1분 전 깜빡임</label><input type="checkbox" id="pjWarn1Blink" checked></div> <div class="pj-opt-row"><label>1분 전 소리</label><input type="checkbox" id="pjWarn1Sound"></div> <div class="pj-opt-row"><label>30초 전 깜빡임</label><input type="checkbox" id="pjWarn2Blink" checked></div> <div class="pj-opt-row"><label>30초 전 소리</label><input type="checkbox" id="pjWarn2Sound" checked></div> <div class="pj-opt-row"><label>종료 소리</label><input type="checkbox" id="pjEndSound" checked></div> <div class="pj-opt-row"><label>초과시 계속 표시</label><input type="checkbox" id="pjOvertime" checked></div> <div class="pj-opt-row"><label>완료 시 깜빡임</label><input type="checkbox" id="pjEndBlink" checked></div> </div> <!-- 경고 멘트 옵션 --> <div style="margin-bottom:12px;"> <div style="font-size:13px;color:#475569;font-weight:700;margin-bottom:6px;"> 시간별 자동 스크롤 멘트 추가</div><div style="font-size:11px;color:#94a3b8;margin-bottom:8px;">체크 후 멘트 입력 → 해당 시간에 하단에 자동 표시됩니다</div> <div id="pjWarnMsgList" style="display:grid;gap:8px;"></div> </div> <!-- 타이머 하단 스크롤 멘트 --> <div style="margin-bottom:12px;"> <div style="font-size:13px;color:#475569;font-weight:700;margin-bottom:6px;"> 타이머 하단 스크롤 멘트 (선택)</div> <div style="background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px;"> <div style="display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;margin-bottom:6px;"> <input type="checkbox" id="pjCaptionOn" style="width:18px;height:18px;accent-color:#3b82f6;cursor:pointer;"> <label for="pjCaptionOn" style="font-size:13px;color:#475569;font-weight:600;cursor:pointer;">시계 하단 문구 표시</label> </div> <div id="pjCaptionWrap" style="display:none;"> <input type="text" class="pj-caption-input" id="pjCaptionText" placeholder="예) 발표 시간을 지켜주세요 " maxlength="60"> <div class="pj-caption-opts" id="pjCapModes" style="margin-top:6px;"> <button class="pj-cap-mode-btn active" data-capmode="fixed">고정</button> <button class="pj-cap-mode-btn" data-capmode="scroll">스크롤</button> </div> </div> </div> </div> <div style="font-size:13px;color:#64748b;margin-bottom:6px;font-weight:700;"> 위치</div> <div class="pj-timer-pos" id="pjTimerPos"> <button class="pj-pos-btn" data-pos="top-left">↖ 좌상단</button> <button class="pj-pos-btn active" data-pos="top-right">↗ 우상단</button> <button class="pj-pos-btn" data-pos="bottom-left">↙ 좌하단</button> <button class="pj-pos-btn" data-pos="bottom-right">↘ 우하단</button> </div> <div style="font-size:13px;color:#64748b;margin-bottom:6px;font-weight:700;"> 크기</div> <div class="pj-timer-size" id="pjTimerSize"> <button class="pj-size-btn" data-size="sm">소</button> <button class="pj-size-btn active" data-size="md">중</button> <button class="pj-size-btn" data-size="lg">대</button> </div> <div class="pj-opacity-row"> <label>투명도</label> <input type="range" id="pjTimerOpacity" min="20" max="100" value="70"> <span id="pjOpacityVal">70%</span> </div> <div style="font-size:13px;color:#64748b;margin:10px 0 6px;font-weight:700;"> 타이머 하단 문구</div> <div class="pj-caption-box"> <div style="display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;"> <input type="checkbox" id="pjCaptionOn" style="width:18px;height:18px;accent-color:#3b82f6;cursor:pointer;"> <label for="pjCaptionOn" style="font-size:13px;color:#475569;font-weight:600;cursor:pointer;">문구 표시 사용</label> </div> <div id="pjCaptionWrap" style="display:none;"> <input type="text" class="pj-caption-input" id="pjCaptionText" placeholder="예) 발표 시간을 지켜주세요 " maxlength="60"> <div class="pj-caption-opts" id="pjCapModes"> <button class="pj-cap-mode-btn active" data-capmode="fixed">고정 표시</button> <button class="pj-cap-mode-btn" data-capmode="scroll">자막처럼 흐르기</button> </div> </div> </div> </div> <!-- 공유 --> <div class="pj-share-row"> <div class="pj-tooltip-wrap"> <button class="pj-btn pj-btn-green" id="pjShareOptsBtn"> 옵션 공유 URL</button> <div class="pj-tooltip">현재 옵션을 URL로 복사</div> </div> <div class="pj-tooltip-wrap"> <button class="pj-btn" id="pjShareQrBtn"> 옵션 QR</button> <div class="pj-tooltip">옵션 공유 QR 생성</div> </div> </div> <div id="pjQrWrap" style="display:none;margin:10px 12px 0;background:#fff;border-radius:12px;padding:14px;border:1px solid #e2e8f0;text-align:center;"> <div id="pjQrCanvas"></div> <p style="font-size:12px;color:#64748b;margin-top:8px;">QR 스캔 → 같은 옵션으로 설정</p> </div> <!-- 전체보기 --> <div class="pj-fullview-btn-wrap"> <button class="pj-fullview-btn" id="pjFullviewBtn">▶ 전체보기 시작</button> </div> <!-- 메모리 최적화 & PDF 병합 저장 --> <div class="pj-section" style="margin-top:14px;"> <div class="pj-section-title"><span>⚡</span> 메모리 최적화 &amp; 발표자료 병합 저장</div> <div style="font-size:13px;color:#475569;margin-bottom:12px;line-height:1.8;"> 버벅임이 심할 때 메모리를 정리하거나, 여러 PDF를 하나로 병합해서 저장할 수 있습니다. </div> <div class="pj-btn-row"> <div class="pj-tooltip-wrap"> <button class="pj-btn" id="pjMemOptBtn"> 메모리 최적화</button> <div class="pj-tooltip">렌더된 캔버스 캐시를 비워 메모리를 확보합니다</div> </div> <div class="pj-tooltip-wrap"> <button class="pj-btn pj-btn-green" id="pjMergeExportBtn"> 발표자료 병합 저장</button> <div class="pj-tooltip">업로드된 모든 PDF를 하나로 병합해 다운로드합니다 (시간이 걸릴 수 있음)</div> </div> </div> <div id="pjOptProgress" style="display:none;margin-top:10px;font-size:13px;color:#3b82f6;font-weight:600;"></div> <div style="margin-top:10px;font-size:12px;color:#94a3b8;line-height:1.7;"> 메모리 최적화: 전체보기 후 캔버스 캐시 해제 (재진입 시 다시 렌더)<br> 병합 저장: PDF.js + Blob으로 순서대로 합쳐 단일 파일 다운로드<br> ⚠ 실제 PDF 압축은 브라우저에서 불가. 용량 절감이 필요하면 Adobe Acrobat 등 별도 도구를 사용하세요. </div> </div> <!-- 레이저포인터 테스트 --> <div class="pj-section" style="margin-top:14px;"> <div class="pj-section-title"><span> </span> 레이저포인터 &amp; 슬라이드 이동 테스트</div> <div style="font-size:13px;color:#475569;line-height:1.9;margin-bottom:10px;"> 전체보기에서 발표자료 영역은 <b>pointer-events:none</b>으로 마우스가 통과됩니다.<br> 레이저포인터 앱이 정상 작동해야 합니다. </div> <div style="background:#f8fafc;border-radius:10px;padding:14px;border:1px solid #e2e8f0;font-size:13px;color:#475569;line-height:2.2;"> ⌨️ <b>키보드 단축키 (전체보기 중)</b><br> &nbsp;&nbsp;← → ↑ ↓ Space : 슬라이드 이동<br> &nbsp;&nbsp;숫자 1~9, 10~ : 발표자 직접 이동 (연속입력 400ms)<br> &nbsp;&nbsp;R : 타이머 리셋 &amp; 재시작 </div> <div style="margin-top:10px;background:#eff6ff;border-radius:10px;padding:12px;border:1px solid #bfdbfe;font-size:13px;color:#1e40af;line-height:1.9;"> ✅ 발표자료 영역 클릭 → 레이저포인터 통과 (pointer-events:none)<br> ✅ 하단 번호탭, 화살표, 닫기 버튼 → 클릭 가능<br> ✅ 타이머 박스 → 드래그 가능 </div> </div> <!-- 사용설명서 --> <div class="pj-manual" id="pjManualBox"> <h3 style="cursor:pointer;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;" id="pjManualToggle"> 사용설명서 <span id="pjManualArrow" style="font-size:12px;color:#3b82f6;margin-left:auto;">▲ 접기</span> </h3> <div id="pjManualContent"> <ol> <li><b>파일 추가:</b> 드롭존에 PDF 드래그 or 탭하여 선택. ☰ 핸들 드래그로 순서 조정.</li> <li><b>공지(공1/공2):</b> 텍스트 or 이미지/PDF. 전체보기에서 한 장 페이지로 표시.</li> <li><b>전체보기:</b> 브라우저 전체화면 전환. 좌우 화살표 or 키보드 ←→ 로 한 페이지씩 이동.</li> <li><b>하단 탭:</b> 번호 클릭 → 즉시 이동. <b>더블클릭 → "완료" 표시</b> (이후 클릭 이동 불가).</li> <li><b>공1/공2 버튼:</b> 탭 끝의 [공1][공2] 클릭 → 해당 공지 슬라이드로 즉시 이동.</li> <li><b>타이머 ↺:</b> 설정 시간으로 즉시 재시작.</li> <li><b>레이저포인터:</b> 타이머 박스 외 영역 pointer-events:none 적용.</li> <li><b>전체저장/불러오기:</b> 상단 헤더 버튼으로 .발표장 파일 저장·복원.</li> </ol> </div> </div> <div class="pj-loading" id="pjLoading"> <div class="pj-spinner"></div> <div id="pjLoadingMsg">처리 중...</div> </div> <div class="pj-toast" id="pjToast"></div> <!-- 전체보기 --> <div class="pj-overlay" id="pjOverlay"> <button class="pj-close-btn" id="pjCloseBtn">✕</button> <div class="pj-warn-caption" id="pjWarnCaption"></div> <!-- 페이지 이동 화살표 --> <button class="pj-nav-btn pj-nav-prev" id="pjNavPrev">&#8249;</button> <button class="pj-nav-btn pj-nav-next" id="pjNavNext">&#8250;</button> <!-- 슬라이드 카운터 --> <div class="pj-slide-counter" id="pjSlideCounter">1 / 1</div> <!-- 슬라이드 컨테이너 --> <div class="pj-slide-container" id="pjSlideContainer"></div> <!-- 타이머 --> <div class="pj-timer-overlay" id="pjTimerOverlay"> <div class="pj-timer-box" id="pjTimerBox"> <div class="pj-timer-display" id="pjTimerDisplay">05:00</div> <div class="pj-timer-ctrl"> <button id="pjTCtrlPlay">▶</button> <button id="pjTCtrlPause">⏸</button> <button id="pjTCtrlReset">↺</button> </div> <div class="pj-timer-caption" id="pjTimerCaption" style="display:none;"></div> </div> </div> <!-- 하단 탭 --> <div class="pj-ctrl-bar" id="pjCtrlBar"> <div class="pj-ctrl-bar-tabs" id="pjCtrlTabs"></div> <div class="pj-ctrl-btns"> <button class="pj-ctrl-btn" id="pjCtrlClose">✕ 닫기</button> </div> </div> </div> <script> (function(){ 'use strict'; if(window.pdfjsLib){ pdfjsLib.GlobalWorkerOptions.workerSrc='https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'; } // ── 상태 ── var state={ files:[], gdriveLinks:[], judgeNotice:'',judgeNoticeFileData:null,judgeNoticeFileType:'', // presenterNotice 단수는 presenterNotices 배열로 대체,presenterNoticeFileData:null,presenterNoticeFileType:'', presenterNoticeInclude:false, interType:'none',interCount:2,logoDataUrl:null, timerMode:'timer',timerMin:5,timerSec:0, warn1Blink:true,warn1Sound:false,warn2Blink:true,warn2Sound:true, endSound:true,overtime:true,endBlink:true, timerPos:'top-right',timerSize:'lg',timerOpacity:70, captionOn:false,captionText:'',captionMode:'fixed', presentMode:'scroll', showTabTooltip:false, warnMsg2On:false, warnMsg2Text:'2분 남았습니다.', warnMsg1On:false, warnMsg1Text:'1분 남았습니다.', warnMsgEndOn:false, warnMsgEndText:'발표시간 완료되었습니다.', warnMsgOverOn:false, warnMsgOverText:'시간 30초 초과되었습니다. 발표종료합니다.', judgeTextColor:'#e2e8f0', judgeBgColor:'#0f172a', presenterNotices:[], // [{text,fileData,fileType,textColor,bgColor}] presenterNoticeInclude:false }; var timerRT={running:false,elapsed:0,startTs:0,total:0,interval:null,warn1done:false,warn2done:false,enddone:false,warn1mindone:false,warn2mindone:false,warnOverDone:false}; var LS_KEY='pj_opts_v5'; // 슬라이드 관련 var slides=[]; // 슬라이드 배열 {type,el,fileIdx} var curSlide=0; var fileSlideMap=[]; // 각 파일의 첫 슬라이드 인덱스 var judgeSlideIdx=-1; var presenterSlideIdxs=[]; var tabDoneMap={}; // 탭 완료 상태 // ── localStorage ── function saveOpts(){ var o={judgeNotice:state.judgeNotice,presenterNotice:state.presenterNotice,presenterNoticeInclude:state.presenterNoticeInclude,interType:state.interType,interCount:state.interCount,timerMode:state.timerMode,timerMin:state.timerMin,timerSec:state.timerSec,warn1Blink:state.warn1Blink,warn1Sound:state.warn1Sound,warn2Blink:state.warn2Blink,warn2Sound:state.warn2Sound,endSound:state.endSound,overtime:state.overtime,timerPos:state.timerPos,timerSize:state.timerSize,timerOpacity:state.timerOpacity,captionOn:state.captionOn,captionText:state.captionText,captionMode:state.captionMode,gdriveLinks:state.gdriveLinks}; try{localStorage.setItem(LS_KEY,JSON.stringify(o));}catch(e){} } function loadOpts(){try{var s=localStorage.getItem(LS_KEY);if(!s)return;var o=JSON.parse(s);for(var k in o){if(o.hasOwnProperty(k))state[k]=o[k];}}catch(e){}} function loadOptsFromUrl(){try{var m=(window.location.search||'').match(/[?&]pjopts=([^&]+)/);if(!m)return;var json=LZString.decompressFromEncodedURIComponent(m[1]);if(!json)return;var o=JSON.parse(json);for(var k in o){if(o.hasOwnProperty(k))state[k]=o[k];}}catch(e){}} // ── UI 동기화 ── function syncUI(){ document.getElementById('pjJudgeNotice').value=state.judgeNotice||''; // presenterNotice는 renderPresenterNotices()에서 처리 document.getElementById('pjPresenterNoticeInclude').checked=!!state.presenterNoticeInclude; var ibtns=document.querySelectorAll('.pj-inter-btn');for(var i=0;i<ibtns.length;i++)ibtns[i].classList[ibtns[i].dataset.val===state.interType?'add':'remove']('active'); document.getElementById('pjInterCount').value=state.interCount; document.getElementById('pjLogoUploadWrap').style.display=state.interType==='logo'?'block':'none'; var mbtns=document.querySelectorAll('.pj-mode-btn');for(var j=0;j<mbtns.length;j++)mbtns[j].classList[mbtns[j].dataset.mode===state.timerMode?'add':'remove']('active'); document.getElementById('pjTimerSetWrap').style.display=state.timerMode==='timer'?'block':'none'; document.getElementById('pjTimerMin').value=state.timerMin;document.getElementById('pjTimerSec').value=state.timerSec; document.getElementById('pjWarn1Blink').checked=state.warn1Blink;document.getElementById('pjWarn1Sound').checked=state.warn1Sound;document.getElementById('pjWarn2Blink').checked=state.warn2Blink;document.getElementById('pjWarn2Sound').checked=state.warn2Sound;document.getElementById('pjEndSound').checked=state.endSound;document.getElementById('pjOvertime').checked=state.overtime;var ebEl=document.getElementById('pjEndBlink');if(ebEl)ebEl.checked=!!state.endBlink; var pbtns=document.querySelectorAll('.pj-pos-btn');for(var p=0;p<pbtns.length;p++)pbtns[p].classList[pbtns[p].dataset.pos===state.timerPos?'add':'remove']('active'); var sbtns=document.querySelectorAll('.pj-size-btn');for(var s2=0;s2<sbtns.length;s2++)sbtns[s2].classList[sbtns[s2].dataset.size===state.timerSize?'add':'remove']('active'); document.getElementById('pjTimerOpacity').value=state.timerOpacity;document.getElementById('pjOpacityVal').textContent=state.timerOpacity+'%'; document.getElementById('pjCaptionOn').checked=!!state.captionOn;document.getElementById('pjCaptionWrap').style.display=state.captionOn?'block':'none';document.getElementById('pjCaptionText').value=state.captionText||''; var cbtns=document.querySelectorAll('.pj-cap-mode-btn');for(var c=0;c<cbtns.length;c++)cbtns[c].classList[cbtns[c].dataset.capmode===state.captionMode?'add':'remove']('active'); // 발표모드 document.getElementById('pjPmodeScroll').classList[state.presentMode==='scroll'?'add':'remove']('active'); document.getElementById('pjPmodeClick').classList[state.presentMode==='click'?'add':'remove']('active'); document.getElementById('pjPmodeScrollR').checked=(state.presentMode==='scroll'); document.getElementById('pjPmodeClickR').checked=(state.presentMode==='click'); // 말풍선/공지옵션 var stt=document.getElementById('pjShowTabTooltip');if(stt)stt.checked=!!state.showTabTooltip; var sttm=document.getElementById('pjShowTabTooltipMain');if(sttm)sttm.checked=!!state.showTabTooltip; var pni=document.getElementById('pjPresenterNoticeInclude');if(pni)pni.checked=!!state.presenterNoticeInclude; // 공지 색상 var jtc=document.getElementById('pjJudgeTextColor');if(jtc)jtc.value=state.judgeTextColor||'#e2e8f0'; var jbc=document.getElementById('pjJudgeBgColor');if(jbc)jbc.value=state.judgeBgColor||'#0f172a'; // 발표자공지 목록 renderPresenterNotices(); renderWarnMsgOptions(); renderGdriveLinks(); } function showToast(msg){var t=document.getElementById('pjToast');t.textContent=msg;t.classList.add('show');setTimeout(function(){t.classList.remove('show');},2200);} function showLoading(msg){document.getElementById('pjLoadingMsg').textContent=msg||'처리 중...';document.getElementById('pjLoading').classList.add('show');} function hideLoading(){document.getElementById('pjLoading').classList.remove('show');} function escHtml(s){return (s+'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');} function pad2(n){return n<10?'0'+n:''+n;} // ── 파일 리스트 렌더 (가로 길게) ── function renderFileList(){ var ul=document.getElementById('pjFileList'); var wrap=document.getElementById('pjFileListWrap'); ul.innerHTML=''; if(!state.files.length){wrap.style.display='none';return;} wrap.style.display='block'; for(var i=0;i<state.files.length;i++){ (function(idx){ var f=state.files[idx]; var li=document.createElement('li');li.className='pj-file-row';li.dataset.idx=idx; // 핸들 var handle=document.createElement('span');handle.className='pj-row-handle';handle.innerHTML='☰';li.appendChild(handle); // 번호 var num=document.createElement('span');num.className='pj-row-num';num.textContent=idx+1;li.appendChild(num); // 정보 먼저 (파일명 잘 보이게) var info=document.createElement('div');info.className='pj-row-info'; { var fsize=f.data?f.data.byteLength:0; var fsizeStr=fsize>1048576?(fsize/1048576).toFixed(1)+'MB':(fsize/1024).toFixed(0)+'KB'; var sizeWarn=fsize>30*1024*1024; info.innerHTML='<div class="pj-row-name" title="'+escHtml(f.name)+'">'+escHtml(f.name)+'</div>' +'<div class="pj-row-size'+(sizeWarn?' warn':'')+'">'+fsizeStr+(sizeWarn?' ⚠버벅임주의':'')+(f.isLink?' (링크)':' · '+f.pages+'p')+'</div>'; } li.appendChild(info); // 썸네일 (오른쪽 끝 배치) var thumb=document.createElement('div');thumb.className='pj-row-thumb'; if(f.thumbCanvas){var tImg=document.createElement('img');tImg.src=f.thumbCanvas;thumb.appendChild(tImg);} else{var tIco=document.createElement('span');tIco.style.fontSize='14px';tIco.textContent=' ';thumb.appendChild(tIco);} li.appendChild(thumb); // 삭제 var del=document.createElement('button');del.className='pj-row-del';del.textContent='삭제'; var _dt=false; del.addEventListener('touchend',function(e){e.preventDefault();e.stopPropagation();_dt=true;removeFile(idx);setTimeout(function(){_dt=false;},400);},false); del.addEventListener('click',function(e){e.stopPropagation();if(_dt)return;removeFile(idx);},false); li.appendChild(del); ul.appendChild(li); })(i); } if(window.Sortable){ Sortable.create(ul,{ handle:'.pj-row-handle', animation:150, forceFallback:false, fallbackTolerance:3, touchStartThreshold:3, onEnd:function(evt){ var moved=state.files.splice(evt.oldIndex,1)[0]; state.files.splice(evt.newIndex,0,moved); renderFileList(); } }); } // 총 용량 경고 var totalSize=0;for(var si=0;si<state.files.length;si++)if(state.files[si].data)totalSize+=state.files[si].data.byteLength; var warnEl=document.getElementById('pjSizeWarn'); if(warnEl){ var totalMB=(totalSize/1048576).toFixed(1); if(totalSize>50*1024*1024){warnEl.classList.add('show');warnEl.textContent='⚠ 총 용량 '+totalMB+'MB — 전체보기 시 버벅일 수 있습니다. 50MB 이하 권장.';} else{warnEl.classList.remove('show');} } } function removeFile(idx){state.files.splice(idx,1);renderFileList();showToast('파일 삭제됨');} // ── PDF 로드 ── function loadPdfBuffer(ab,name){ return new Promise(function(resolve,reject){ pdfjsLib.getDocument({data:ab.slice(0)}).promise.then(function(pdf){ pdf.getPage(1).then(function(page){ var vp=page.getViewport({scale:0.4}); var c=document.createElement('canvas');c.width=vp.width;c.height=vp.height; page.render({canvasContext:c.getContext('2d'),viewport:vp}).promise.then(function(){ resolve({name:name,data:ab,pages:pdf.numPages,thumbCanvas:c.toDataURL(),isLink:false,uploadOrder:Date.now()+Math.random()}); }).catch(reject); }).catch(reject); }).catch(reject); }); } function loadPdfFile(file){ return new Promise(function(resolve,reject){ var reader=new FileReader(); reader.onload=function(e){loadPdfBuffer(e.target.result,file.name).then(resolve).catch(reject);}; reader.onerror=reject;reader.readAsArrayBuffer(file); }); } function handleFiles(files){ var pending=[]; for(var i=0;i<files.length;i++){ var f=files[i]; var isPdf=(f.type==='application/pdf')||(f.name&&f.name.toLowerCase().slice(-4)==='.pdf'); if(isPdf)pending.push(f); } if(!pending.length){showToast('PDF 파일을 선택해주세요');return;} showLoading(pending.length+'개 로딩 중...'); // results 배열로 순서 보장 var results=new Array(pending.length); var loaded=0; for(var j=0;j<pending.length;j++){ (function(jj,file){ loadPdfFile(file).then(function(obj){ results[jj]=obj; loaded++; if(loaded===pending.length){ for(var k=0;k<results.length;k++){if(results[k])state.files.push(results[k]);} renderFileList(); hideLoading(); showToast(loaded+'개 파일 추가됨!'); } }).catch(function(err){ loaded++; if(loaded===pending.length){renderFileList();hideLoading();showToast('일부 파일 로드 실패');} }); })(j,pending[j]); } } // ── 업로드 이벤트 ── var dz=document.getElementById('pjDropzone'); var _td=false; dz.addEventListener('touchend',function(e){e.preventDefault();_td=true;document.getElementById('pjFileInput').click();setTimeout(function(){_td=false;},400);},false); dz.addEventListener('click',function(){if(_td)return;document.getElementById('pjFileInput').click();},false); dz.addEventListener('dragover',function(e){e.preventDefault();dz.classList.add('drag-over');},false); dz.addEventListener('dragleave',function(){dz.classList.remove('drag-over');},false); dz.addEventListener('drop',function(e){e.preventDefault();dz.classList.remove('drag-over');if(e.dataTransfer&&e.dataTransfer.files)handleFiles(e.dataTransfer.files);},false); document.getElementById('pjFileInput').addEventListener('change',function(){if(this.files&&this.files.length)handleFiles(this.files);this.value='';},false); function getAbsentSet(){return {};} // ── 구글드라이브 ── document.getElementById('pjGdriveToggle').addEventListener('click',function(){ var body=document.getElementById('pjGdriveBody');var arrow=document.getElementById('pjGdriveArrow'); var open=body.classList.toggle('open');arrow.classList[open?'add':'remove']('open'); },false); (function(){ var chk=document.getElementById('pjGdriveUse'); var wrap=document.getElementById('pjGdriveUseWrap'); if(!chk||!wrap)return; chk.addEventListener('change',function(){ wrap.style.display=this.checked?'block':'none'; if(!this.checked){state.gdriveLinks=[];renderGdriveLinks();} },false); })(); function renderGdriveLinks(){ var list=document.getElementById('pjGdriveLinkList');list.innerHTML=''; var links=state.gdriveLinks||[]; for(var i=0;i<links.length;i++){ (function(idx){ var row=document.createElement('div');row.className='pj-gdrive-link-item'; var nameIn=document.createElement('input');nameIn.type='text';nameIn.className='pj-gdrive-name-input';nameIn.placeholder='파일명';nameIn.value=links[idx].name||''; nameIn.addEventListener('change',function(){state.gdriveLinks[idx].name=this.value;saveOpts();},false); var urlIn=document.createElement('input');urlIn.type='text';urlIn.className='pj-gdrive-input';urlIn.placeholder='drive.google.com/file/d/...';urlIn.value=links[idx].url||''; urlIn.addEventListener('change',function(){state.gdriveLinks[idx].url=this.value;saveOpts();},false); var delBtn=document.createElement('button');delBtn.className='pj-btn';delBtn.style.cssText='font-size:12px;padding:5px 8px;color:#dc2626;border-color:#fca5a5;';delBtn.textContent='✕'; delBtn.addEventListener('click',function(){state.gdriveLinks.splice(idx,1);saveOpts();renderGdriveLinks();},false); row.appendChild(nameIn);row.appendChild(urlIn);row.appendChild(delBtn);list.appendChild(row); })(i); } } document.getElementById('pjGdriveAddLinkBtn').addEventListener('click',function(){if(!state.gdriveLinks)state.gdriveLinks=[];state.gdriveLinks.push({url:'',name:''});saveOpts();renderGdriveLinks();},false); document.getElementById('pjGdriveLoadAllBtn').addEventListener('click',function(){ var links=(state.gdriveLinks||[]).filter(function(l){return l.url&&l.url.trim();}); if(!links.length){showToast('링크를 입력해주세요');return;} showLoading('구글드라이브 로딩 중...('+links.length+'개)'); var loaded=0; for(var j=0;j<links.length;j++){ (function(link){ var fileId='';var m1=(link.url||'').match(/\/file\/d\/([^\/\?]+)/);var m2=(link.url||'').match(/id=([^&]+)/); if(m1)fileId=m1[1];else if(m2)fileId=m2[1]; if(!fileId){loaded++;if(loaded===links.length)hideLoading();return;} var fname=link.name&&link.name.trim()?link.name:'gdrive_'+fileId.slice(0,8)+'.pdf'; fetch('https://drive.google.com/uc?export=download&id='+fileId).then(function(res){if(!res.ok)throw new Error('');return res.arrayBuffer();}).then(function(ab){return loadPdfBuffer(ab,fname);}).then(function(obj){state.files.push(obj);loaded++;if(loaded===links.length){renderFileList();hideLoading();showToast('로드 완료!');}}).catch(function(){loaded++;if(loaded===links.length){renderFileList();hideLoading();showToast('일부 실패(CORS)');}}); })(links[j]); } },false); // ── 공지 탭 ── (function(){ var groups=[{sel:'[data-group="judge"]',tw:'judgeTextWrap',fw:'judgeFileWrap'},{sel:'[data-group="presenter"]',tw:'presenterTextWrap',fw:'presenterFileWrap'}]; for(var g=0;g<groups.length;g++){(function(grp){var tabs=document.querySelectorAll(grp.sel+' .pj-ntab');for(var i=0;i<tabs.length;i++){(function(btn){btn.addEventListener('click',function(){for(var j=0;j<tabs.length;j++)tabs[j].classList.remove('active');btn.classList.add('active');document.getElementById(grp.tw).style.display=btn.dataset.target===grp.tw?'block':'none';document.getElementById(grp.fw).style.display=btn.dataset.target===grp.fw?'block':'none';},false);})(tabs[i]);};})(groups[g]);} })(); function setupNoticeFile(zoneId,inputId,previewId,nameId,dataKey,typeKey){ var zone=document.getElementById(zoneId);var inp=document.getElementById(inputId); function process(file){var r=new FileReader();r.onload=function(e){state[dataKey]=e.target.result;state[typeKey]=file.type;document.getElementById(nameId).textContent=file.name;if(file.type.indexOf('image')>-1){var p=document.getElementById(previewId);p.src=e.target.result;p.style.display='block';}saveOpts();};r.readAsDataURL(file);} zone.addEventListener('click',function(){inp.click();},false);zone.addEventListener('touchend',function(e){e.preventDefault();inp.click();},false); zone.addEventListener('dragover',function(e){e.preventDefault();},false);zone.addEventListener('drop',function(e){e.preventDefault();if(e.dataTransfer&&e.dataTransfer.files[0])process(e.dataTransfer.files[0]);},false); inp.addEventListener('change',function(){if(this.files&&this.files[0])process(this.files[0]);this.value='';},false); } setupNoticeFile('pjJudgeFileZone','pjJudgeFileInput','pjJudgePreview','pjJudgeFileName','judgeNoticeFileData','judgeNoticeFileType'); // presenterNotice는 동적 생성 (renderPresenterNotices에서 처리) document.getElementById('pjJudgeNotice').addEventListener('input',function(){state.judgeNotice=this.value;saveOpts();},false); // 공지 글자/배경색 (function(){ var jtc=document.getElementById('pjJudgeTextColor'); var jbc=document.getElementById('pjJudgeBgColor'); if(jtc)jtc.addEventListener('input',function(){state.judgeTextColor=this.value;saveOpts();},false); if(jbc)jbc.addEventListener('input',function(){state.judgeBgColor=this.value;saveOpts();},false); })(); // 공지 삽입 + 말풍선 옵션 (function(){ var pni=document.getElementById('pjPresenterNoticeInclude'); if(pni)pni.addEventListener('change',function(){state.presenterNoticeInclude=this.checked;saveOpts();},false); var stt=document.getElementById('pjShowTabTooltip'); if(stt)stt.addEventListener('change',function(){state.showTabTooltip=this.checked;saveOpts();},false); })(); // 발표자공지 렌더 function renderPresenterNotices(){ var list=document.getElementById('pjPresenterNoticeList'); if(!list)return; list.innerHTML=''; if(!state.presenterNotices)state.presenterNotices=[]; // 기본 1개 보장 if(!state.presenterNotices.length)state.presenterNotices.push({text:'',fileData:null,fileType:'',textColor:'#e2e8f0',bgColor:'#0f172a'}); for(var i=0;i<state.presenterNotices.length;i++){ (function(idx){ var n=state.presenterNotices[idx]; var wrap=document.createElement('div'); wrap.style.cssText='background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px;margin-bottom:10px;'; var lbl=document.createElement('div'); lbl.style.cssText='font-size:13px;font-weight:700;color:#1e40af;margin-bottom:8px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;'; lbl.innerHTML=' 발표자공지'+(idx+1)+(state.presenterNotices.length>1?'':' <span style="font-size:11px;color:#94a3b8;">(발표자료마다 삽입)</span>'); if(state.presenterNotices.length>1){ var delBtn=document.createElement('button'); delBtn.textContent='삭제';delBtn.style.cssText='margin-left:auto;background:#fee2e2;color:#dc2626;border:1px solid #fca5a5;border-radius:5px;padding:2px 8px;font-size:11px;cursor:pointer;-webkit-appearance:none;'; delBtn.addEventListener('click',function(){state.presenterNotices.splice(idx,1);saveOpts();renderPresenterNotices();},false); lbl.appendChild(delBtn); } wrap.appendChild(lbl); var ta=document.createElement('textarea'); ta.className='pj-notice-textarea';ta.placeholder='발표자 안내 내용 입력...';ta.value=n.text||'';ta.style.marginBottom='6px'; ta.addEventListener('input',function(){state.presenterNotices[idx].text=this.value;saveOpts();},false); wrap.appendChild(ta); var crow=document.createElement('div');crow.className='pj-color-row'; crow.innerHTML='<label>글자색</label><input type="color" class="pj-color-input" value="'+(n.textColor||'#e2e8f0')+'" id="pnTextColor'+idx+'">' +'<label>배경색</label><input type="color" class="pj-color-input" value="'+(n.bgColor||'#0f172a')+'" id="pnBgColor'+idx+'">'; wrap.appendChild(crow); list.appendChild(wrap); // 색상 이벤트 setTimeout(function(){ var tc=document.getElementById('pnTextColor'+idx); var bc=document.getElementById('pnBgColor'+idx); if(tc)tc.addEventListener('input',function(){state.presenterNotices[idx].textColor=this.value;saveOpts();},false); if(bc)bc.addEventListener('input',function(){state.presenterNotices[idx].bgColor=this.value;saveOpts();},false); },0); })(i); } } // 발표자공지 추가 (function(){ var addBtn=document.getElementById('pjAddPresenterNoticeBtn'); if(addBtn)addBtn.addEventListener('click',function(){ if(!state.presenterNotices)state.presenterNotices=[]; state.presenterNotices.push({text:'',fileData:null,fileType:'',textColor:'#e2e8f0',bgColor:'#0f172a'}); saveOpts();renderPresenterNotices(); },false); })(); // ── 사이간지/타이머 이벤트 ── document.getElementById('pjInterOptions').addEventListener('click',function(e){var btn=e.target;if(!btn.classList.contains('pj-inter-btn'))return;state.interType=btn.dataset.val;syncUI();saveOpts();},false); document.getElementById('pjInterCount').addEventListener('change',function(){state.interCount=parseInt(this.value)||2;saveOpts();},false); var _tlo=false;document.getElementById('pjLogoUploadBtn').addEventListener('touchend',function(e){e.preventDefault();_tlo=true;document.getElementById('pjLogoInput').click();setTimeout(function(){_tlo=false;},400);},false);document.getElementById('pjLogoUploadBtn').addEventListener('click',function(){if(_tlo)return;document.getElementById('pjLogoInput').click();},false); document.getElementById('pjLogoInput').addEventListener('change',function(){if(!this.files||!this.files[0])return;var r=new FileReader();r.onload=function(e){state.logoDataUrl=e.target.result;document.getElementById('pjLogoName').textContent='설정됨';saveOpts();};r.readAsDataURL(this.files[0]);this.value='';},false); document.getElementById('pjTimerMode').addEventListener('click',function(e){var btn=e.target;if(!btn.classList.contains('pj-mode-btn'))return;state.timerMode=btn.dataset.mode;syncUI();saveOpts();},false); document.getElementById('pjTimerMin').addEventListener('change',function(){state.timerMin=parseInt(this.value)||0;saveOpts();},false); document.getElementById('pjTimerSec').addEventListener('change',function(){state.timerSec=parseInt(this.value)||0;saveOpts();},false); var chkMap={'pjWarn1Blink':'warn1Blink','pjWarn1Sound':'warn1Sound','pjWarn2Blink':'warn2Blink','pjWarn2Sound':'warn2Sound','pjEndSound':'endSound','pjOvertime':'overtime','pjEndBlink':'endBlink'}; var chkIds=['pjWarn1Blink','pjWarn1Sound','pjWarn2Blink','pjWarn2Sound','pjEndSound','pjOvertime','pjEndBlink']; for(var ci=0;ci<chkIds.length;ci++){(function(id){document.getElementById(id).addEventListener('change',function(){state[chkMap[id]]=this.checked;saveOpts();},false);})(chkIds[ci]);} document.getElementById('pjTimerPos').addEventListener('click',function(e){var btn=e.target;if(!btn.classList.contains('pj-pos-btn'))return;state.timerPos=btn.dataset.pos;syncUI();saveOpts();},false); document.getElementById('pjTimerSize').addEventListener('click',function(e){var btn=e.target;if(!btn.classList.contains('pj-size-btn'))return;state.timerSize=btn.dataset.size;syncUI();saveOpts();},false); document.getElementById('pjTimerOpacity').addEventListener('input',function(){state.timerOpacity=parseInt(this.value);document.getElementById('pjOpacityVal').textContent=state.timerOpacity+'%';saveOpts();},false); document.getElementById('pjCaptionOn').addEventListener('change',function(){state.captionOn=this.checked;document.getElementById('pjCaptionWrap').style.display=this.checked?'block':'none';saveOpts();},false); document.getElementById('pjCaptionText').addEventListener('input',function(){state.captionText=this.value;saveOpts();},false); document.getElementById('pjCapModes').addEventListener('click',function(e){var btn=e.target;if(!btn.classList.contains('pj-cap-mode-btn'))return;state.captionMode=btn.dataset.capmode;syncUI();saveOpts();},false); // ── 경고 멘트 표시 ── function showWarnCaption(text){ var el=document.getElementById('pjWarnCaption'); if(!el||!text)return; el.innerHTML=''; var inner=document.createElement('div'); inner.className='pj-warn-caption-inner'; inner.textContent=text; el.appendChild(inner); el.classList.add('show'); var mode=state.warnCaptionMode||'scroll'; setTimeout(function(){inner.classList.add(mode);},30); var dur=(mode==='scroll')?10500:5500; setTimeout(function(){el.classList.remove('show');el.innerHTML='';},dur); } // ── 경고멘트 옵션 렌더 ── function renderWarnMsgOptions(){ var list=document.getElementById('pjWarnMsgList'); if(!list)return; var items=[ {onKey:'warnMsg2On',textKey:'warnMsg2Text',label:'2분 전 멘트',def:'2분 남았습니다.'}, {onKey:'warnMsg1On',textKey:'warnMsg1Text',label:'1분 전 멘트',def:'1분 남았습니다.'}, {onKey:'warnMsgEndOn',textKey:'warnMsgEndText',label:'완료 멘트',def:'발표시간 완료되었습니다.'}, {onKey:'warnMsgOverOn',textKey:'warnMsgOverText',label:'경고 멘트 (30초 초과)',def:'시간 30초 초과되었습니다. 발표종료합니다.'}, ]; list.innerHTML=''; for(var i=0;i<items.length;i++){ (function(item){ var row=document.createElement('div'); row.style.cssText='background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:8px;padding:8px 10px;'; var top=document.createElement('div'); top.style.cssText='display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;margin-bottom:6px;'; var chk=document.createElement('input');chk.type='checkbox';chk.style.cssText='width:16px;height:16px;accent-color:#3b82f6;cursor:pointer;'; chk.checked=!!state[item.onKey]; var lbl=document.createElement('label');lbl.style.cssText='font-size:13px;font-weight:600;color:#475569;cursor:pointer;-webkit-flex:1;flex:1;';lbl.textContent=item.label; top.appendChild(chk);top.appendChild(lbl);row.appendChild(top); var inp=document.createElement('input');inp.type='text'; inp.style.cssText='width:100%;background:#fff;border:1.5px solid #cbd5e1;border-radius:7px;padding:6px 10px;font-size:13px;color:#1e293b;-webkit-appearance:none;font-family:inherit;display:'+(state[item.onKey]?'block':'none')+';'; inp.value=state[item.textKey]||item.def; inp.placeholder=item.def; chk.addEventListener('change',function(){ state[item.onKey]=this.checked; if(this.checked&&!state[item.textKey])state[item.textKey]=item.def; inp.style.display=this.checked?'block':'none'; saveOpts(); },false); inp.addEventListener('input',function(){state[item.textKey]=this.value;saveOpts();},false); row.appendChild(inp);list.appendChild(row); })(items[i]); } } // ── 오디오 ── function beep(freq,dur,vol){try{var ctx=new(window.AudioContext||window.webkitAudioContext)();var o=ctx.createOscillator();var g=ctx.createGain();o.connect(g);g.connect(ctx.destination);o.frequency.value=freq;g.gain.value=vol||0.3;o.start();o.stop(ctx.currentTime+(dur||0.3));}catch(e){}} function playWarn1(){if(state.warn1Sound)beep(880,0.4,0.3);} function playWarn2(){if(state.warn2Sound){beep(1100,0.2,0.4);setTimeout(function(){beep(1100,0.2,0.4);},300);}} function playEnd(){if(state.endSound){beep(660,0.5,0.5);setTimeout(function(){beep(880,0.5,0.5);},600);}} // ── 타이머 ── function timerFormat(ms){var abs=Math.abs(ms);var total=Math.floor(abs/1000);return pad2(Math.floor(total/60))+':'+pad2(total%60);} function timerTick(){ var now=Date.now();var elapsed=timerRT.elapsed+(now-timerRT.startTs); var disp=document.getElementById('pjTimerDisplay'); if(state.timerMode==='none'){return;} if(state.timerMode==='stopwatch'){disp.textContent=timerFormat(elapsed);disp.className='pj-timer-display';} else if(state.timerMode==='clock'){var d=new Date();disp.textContent=pad2(d.getHours())+':'+pad2(d.getMinutes())+':'+pad2(d.getSeconds());disp.className='pj-timer-display';} else{ var rem=timerRT.total-elapsed; if(rem<=0){ if(!timerRT.enddone){ timerRT.enddone=true;playEnd(); if(state.endBlink)disp.className='pj-timer-display warn2'; if(state.warnMsgEndOn&&state.warnMsgEndText)showWarnCaption(state.warnMsgEndText); } if(state.overtime){ var over=Math.abs(rem); disp.textContent='+'+timerFormat(over);disp.className='pj-timer-display overtime'; if(over>=30000&&!timerRT.warnOverDone){ timerRT.warnOverDone=true; if(state.warnMsgOverOn&&state.warnMsgOverText)showWarnCaption(state.warnMsgOverText); } } else { disp.textContent='00:00';disp.className='pj-timer-display'; } } else{ // 30초 전 if(rem<=30000&&!timerRT.warn2done){ timerRT.warn2done=true;playWarn2(); } // 1분 전 if(rem<=60000&&!timerRT.warn1done){ timerRT.warn1done=true;playWarn1(); if(state.warnMsg1On&&state.warnMsg1Text)showWarnCaption(state.warnMsg1Text); } // 2분 전 if(rem<=120000&&!timerRT.warn2mindone){ timerRT.warn2mindone=true; if(state.warnMsg2On&&state.warnMsg2Text)showWarnCaption(state.warnMsg2Text); } disp.textContent=timerFormat(rem); if(rem<=30000&&state.warn2Blink)disp.className='pj-timer-display warn2'; else if(rem<=60000&&state.warn1Blink)disp.className='pj-timer-display warn1'; else disp.className='pj-timer-display'; } } } function timerStart(){if(timerRT.running)return;timerRT.running=true;timerRT.startTs=Date.now();timerRT.interval=setInterval(timerTick,200);} function timerPause(){if(!timerRT.running)return;timerRT.elapsed+=Date.now()-timerRT.startTs;timerRT.running=false;clearInterval(timerRT.interval);} function timerReset(){timerPause();timerRT.elapsed=0;timerRT.warn1done=false;timerRT.warn2done=false;timerRT.enddone=false;timerRT.warn1mindone=false;timerRT.warn2mindone=false;timerRT.warnOverDone=false;timerRT.total=(state.timerMin*60+state.timerSec)*1000;var disp=document.getElementById('pjTimerDisplay');if(state.timerMode==='timer')disp.textContent=timerFormat(timerRT.total);else if(state.timerMode==='stopwatch')disp.textContent='00:00';else{var d=new Date();disp.textContent=pad2(d.getHours())+':'+pad2(d.getMinutes());}disp.className='pj-timer-display';timerStart();} document.getElementById('pjTCtrlPlay').addEventListener('click',function(){timerStart();},false); document.getElementById('pjTCtrlPause').addEventListener('click',function(){timerPause();},false); document.getElementById('pjTCtrlReset').addEventListener('click',function(){timerReset();},false); function applyCaption(){ var el=document.getElementById('pjTimerCaption'); if(state.captionOn&&state.captionText){ if(state.captionMode==='scroll'){ el.className='pj-timer-caption scroll'; el.innerHTML='<span>'+escHtml(state.captionText)+'</span>'; } else { el.className='pj-timer-caption'; el.textContent=state.captionText; } el.style.display='block'; } else { el.style.display='none'; } } // ── 타이머 드래그 ── (function(){ var box=document.getElementById('pjTimerBox');var ol=document.getElementById('pjTimerOverlay'); var dragging=false,ox=0,oy=0,bx=0,by=0; function getPos(){return{x:parseInt(ol.style.left)||0,y:parseInt(ol.style.top)||0};} box.addEventListener('mousedown',function(e){if(e.target.tagName==='BUTTON')return;dragging=true;var p=getPos();bx=p.x;by=p.y;ox=e.clientX;oy=e.clientY;e.preventDefault();},false); document.addEventListener('mousemove',function(e){if(!dragging)return;ol.style.left=(bx+(e.clientX-ox))+'px';ol.style.top=(by+(e.clientY-oy))+'px';ol.style.right='auto';ol.style.bottom='auto';},false); document.addEventListener('mouseup',function(){dragging=false;},false); box.addEventListener('touchstart',function(e){if(e.target.tagName==='BUTTON')return;dragging=true;var t=e.touches[0];var p=getPos();bx=p.x;by=p.y;ox=t.clientX;oy=t.clientY;e.preventDefault();},{passive:false}); document.addEventListener('touchmove',function(e){if(!dragging)return;var t=e.touches[0];ol.style.left=(bx+(t.clientX-ox))+'px';ol.style.top=(by+(t.clientY-oy))+'px';ol.style.right='auto';ol.style.bottom='auto';e.preventDefault();},{passive:false}); document.addEventListener('touchend',function(){dragging=false;},false); })(); function applyTimerPos(){ var ol=document.getElementById('pjTimerOverlay'); if(state.timerMode==='none'){ol.style.display='none';return;} ol.style.display=''; var fs={sm:20,md:32,lg:50}[state.timerSize]||32; document.getElementById('pjTimerDisplay').style.fontSize=fs+'px'; ol.style.opacity=(state.timerOpacity/100)+''; ol.style.left='';ol.style.right='';ol.style.top='';ol.style.bottom=''; var pos=state.timerPos; if(pos==='top-left'){ol.style.left='12px';ol.style.top='12px';} else if(pos==='top-right'){ol.style.right='12px';ol.style.top='12px';} else if(pos==='bottom-left'){ol.style.left='12px';ol.style.bottom='68px';} else{ol.style.right='12px';ol.style.bottom='68px';} } // ── 슬라이드 이동 ── function isFileDone(fii){return !!tabDoneMap[fii];} // 해당 슬라이드 인덱스가 완료된 파일 범위인지 확인 function isSlideInDoneFile(sIdx){ if(sIdx<0||sIdx>=slides.length)return false; var sl=slides[sIdx]; if(!sl)return false; var fii=sl.fileIdx; if(fii<0)return false; // 완료 처리된 파일 OR 불참 슬롯 if(tabDoneMap[fii])return true; if(sl.type==='absent')return false; // 불참은 한번은 보여줌 return false; } // 완료 파일 범위 건너뛰며 이동 function getNextUndoneSlide(from,direction){ var target=from+direction; var safety=0; while(target>=0&&target<slides.length&&safety<slides.length){ // 완료된 파일 범위 건너뜀 if(isSlideInDoneFile(target)){ // 이 파일의 마지막/첫 슬라이드를 건너뜀 var fii2=slides[target].fileIdx; if(direction>0){ // 앞으로: 이 파일 마지막 이후로 while(target<slides.length&&slides[target]&&slides[target].fileIdx===fii2)target++; } else { // 뒤로: 이 파일 첫번째 이전으로 while(target>=0&&slides[target]&&slides[target].fileIdx===fii2)target--; } } else { break; } safety++; } return target; } function goToSlide(idx){ if(!slides.length)return; if(idx<0)idx=0; if(idx>=slides.length)idx=slides.length-1; if(slides[curSlide]&&slides[curSlide].el)slides[curSlide].el.classList.add('hidden'); curSlide=idx; if(slides[curSlide]&&slides[curSlide].el)slides[curSlide].el.classList.remove('hidden'); document.getElementById('pjSlideCounter').textContent=(curSlide+1)+' / '+slides.length; var activeFile=slides[curSlide]?slides[curSlide].fileIdx:-1; // 탭 active 표시 - 완료는 done 유지, 현재는 active var tabEls=document.querySelectorAll('.pj-tab-btn[data-tab-idx]'); for(var i=0;i<tabEls.length;i++){ var ti=parseInt(tabEls[i].dataset.tabIdx); if(tabDoneMap[ti]){tabEls[i].classList.remove('active');} else{tabEls[i].classList[ti===activeFile?'add':'remove']('active');} } // 현재 슬라이드가 없으면 1번(fileIdx=0) active if(activeFile<0){ var firstTab=document.querySelector('.pj-tab-btn[data-tab-idx="0"]'); if(firstTab&&!tabDoneMap[0])firstTab.classList.add('active'); } // 클릭모드: 현재 파일 범위 내에서만 이동 if(state.presentMode==='click'&&activeFile>=0){ var fStart=fileSlideMap[activeFile]; var fEnd=slides.length-1; for(var fi2=activeFile+1;fi2<state.files.length;fi2++){ if(fileSlideMap[fi2]!==undefined){fEnd=fileSlideMap[fi2]-1;break;} } document.getElementById('pjNavPrev').disabled=curSlide<=fStart; document.getElementById('pjNavNext').disabled=curSlide>=fEnd; } else { document.getElementById('pjNavPrev').disabled=curSlide===0; document.getElementById('pjNavNext').disabled=curSlide===slides.length-1; } if(typeof renderNearbySlides==='function')renderNearbySlides(curSlide); // 불참 슬라이드면 잠깐 보여주고 자동으로 다음 이동 (건너뜀) // 탭 클릭이 아닌 화살표/휠 이동 시만 자동 건너뜀 } // 불참 N 오버레이 function showAbsentOverlay(num){ var ol=document.getElementById('pjOverlay'); if(!ol)return; var ex=ol.querySelector('.pj-absent-overlay'); if(ex){ol.removeChild(ex);return;} var ov=document.createElement('div'); ov.className='pj-absent-overlay'; ov.style.cssText='position:absolute;top:0;left:0;right:0;bottom:0;z-index:2147483645;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;background:rgba(10,10,10,0.9);pointer-events:auto;'; var inner=document.createElement('div'); inner.style.cssText='text-align:center;'; var nDiv=document.createElement('div'); nDiv.style.cssText='color:#ef4444;font-size:160px;font-weight:900;line-height:1;font-family:Arial,sans-serif;'; nDiv.textContent='N'; var nLabel=document.createElement('div'); nLabel.style.cssText='color:#fca5a5;font-size:22px;font-weight:700;margin-top:10px;'; nLabel.textContent=num+'번 — 불참'; var nBtn=document.createElement('button'); nBtn.style.cssText='margin-top:20px;background:#ef4444;color:#fff;border:none;border-radius:8px;padding:10px 24px;font-size:15px;cursor:pointer;pointer-events:auto;'; nBtn.textContent='✕ 닫기'; nBtn.addEventListener('click',function(){ol.removeChild(ov);},false); inner.appendChild(nDiv);inner.appendChild(nLabel);inner.appendChild(nBtn); ov.appendChild(inner); ov.addEventListener('click',function(e){if(e.target===ov)ol.removeChild(ov);},false); ol.appendChild(ov); } function prevSlide(){ var target=getNextUndoneSlide(curSlide,-1); // 불참 슬라이드면 한번 더 건너뜀 if(slides[target]&&slides[target].type==='absent'){ target=getNextUndoneSlide(target,-1); } goToSlide(target); } function nextSlide(){ var target=getNextUndoneSlide(curSlide,1); // 불참 슬라이드면 한번 더 건너뜀 if(slides[target]&&slides[target].type==='absent'){ target=getNextUndoneSlide(target,1); } goToSlide(target); } var _judgeNoticeDone=false; var _noticeOverlay=null; // 공지 임시 오버레이 var _noticeOverlaySlide=-1; // 오버레이 표시 전 슬라이드 인덱스 // 공지 오버레이 토글: 버튼 클릭 → 공지 오버레이, 다시클릭 → 원래화면 function showNoticeOverlay(slideIdx,noticeTitle,noticeText,noticeBg,noticeColor){ var ol=document.getElementById('pjOverlay'); if(!ol)return; // 이미 오버레이 표시중이면 닫기 var existing=ol.querySelector('.pj-notice-overlay'); if(existing){ol.removeChild(existing);_noticeOverlay=null;return;} var ov=document.createElement('div');ov.className='pj-notice-overlay'; ov.style.cssText='position:absolute;top:0;left:0;right:0;bottom:0;z-index:2147483646;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;padding:20px 16px 80px;pointer-events:auto;'; var inner=document.createElement('div');inner.className='pj-notice-overlay-inner'; inner.style.cssText='background:'+(noticeBg||'rgba(15,23,42,0.97)')+';border:2px solid #3b82f6;border-radius:16px;padding:28px 24px;max-width:680px;width:100%;text-align:center;max-height:80vh;overflow-y:auto;'; // 슬라이드 인덱스로 내용 가져오기 if(slideIdx>=0&&slides[slideIdx]){ var cloned=slides[slideIdx].el.cloneNode(true); cloned.style.cssText='width:100%;position:static;display:block;background:transparent;'; cloned.classList.remove('hidden'); inner.appendChild(cloned); } else if(noticeTitle){ // 직접 내용 구성 var h2=document.createElement('h2'); h2.textContent=noticeTitle; h2.style.cssText='font-size:20px;font-weight:700;color:'+(noticeColor||'#93c5fd')+';margin-bottom:14px;'; inner.appendChild(h2); if(noticeText){ var p=document.createElement('p'); p.textContent=noticeText; p.style.cssText='font-size:15px;color:'+(noticeColor||'#e2e8f0')+';line-height:1.9;white-space:pre-wrap;'; inner.appendChild(p); } } else { return; // 내용 없으면 표시 안함 } var closeBtn=document.createElement('button'); closeBtn.textContent='✕ 닫기'; closeBtn.style.cssText='margin-top:14px;background:#3b82f6;color:#fff;border:none;border-radius:8px;padding:8px 20px;font-size:14px;cursor:pointer;pointer-events:auto;'; closeBtn.addEventListener('click',function(){ol.removeChild(ov);_noticeOverlay=null;},false); inner.appendChild(closeBtn); ov.appendChild(inner); ov.addEventListener('click',function(e){if(e.target===ov){ol.removeChild(ov);_noticeOverlay=null;}},false); ol.appendChild(ov); _noticeOverlay=ov; } function toggleJudgeNoticeDone(){ _judgeNoticeDone=!_judgeNoticeDone; if(judgeSlideIdx<0||!slides[judgeSlideIdx])return; var el=slides[judgeSlideIdx].el; var existing=el.querySelector('.pj-slide-notice-done'); if(_judgeNoticeDone){ if(!existing){var ov2=document.createElement('div');ov2.className='pj-slide-notice-done';ov2.innerHTML='<span>✅ 공지 완료</span>';el.appendChild(ov2);} showToast('발표전 공지 완료 처리됨'); } else { if(existing)el.removeChild(existing); showToast('발표전 공지 완료 해제됨'); } } document.getElementById('pjNavPrev').addEventListener('click',function(){prevSlide();},false); document.getElementById('pjNavNext').addEventListener('click',function(){nextSlide();},false); // 키보드 이동 // ── 기기 레이저포인터 + 키보드 단축키 ── // 무선 프레젠터: PageDown(다음)/PageUp(이전) 또는 Arrow 키 var _numBuf='';var _numTimer=null; document.addEventListener('keydown',function(e){ if(!document.getElementById('pjOverlay').classList.contains('active'))return; var k=e.key; // 다음 슬라이드 (레이저포인터 PageDown, ., Right, Down, Space, Enter) if(k==='PageDown'||k==='ArrowRight'||k==='ArrowDown'||k===' '||k==='Enter'||k==='.'){ e.preventDefault();e.stopPropagation();nextSlide();return; } // 이전 슬라이드 (PageUp, Left, Up, Backspace) if(k==='PageUp'||k==='ArrowLeft'||k==='ArrowUp'||k==='Backspace'){ e.preventDefault();e.stopPropagation();prevSlide();return; } // F5: 타이머 리셋 if(k==='F5'){e.preventDefault();timerReset();return;} // Escape: 전체보기 닫기 if(k==='Escape'){e.preventDefault();closeFullview();return;} // R: 타이머 리셋 if(k==='r'||k==='R'){e.preventDefault();timerReset();showToast('⏱ 타이머 리셋');return;} // 숫자키: 발표자 직접 이동 (연속입력 400ms로 10번이상 지원) if(k>='0'&&k<='9'){ e.preventDefault(); _numBuf+=k; if(_numTimer)clearTimeout(_numTimer); _numTimer=setTimeout(function(){ var num=parseInt(_numBuf)-1; _numBuf=''; if(num>=0&&num<state.files.length&&fileSlideMap[num]!==undefined){ goToSlide(fileSlideMap[num]);showToast((num+1)+'번으로 이동'); } },400); } },false); // keyup도 preventDefault (일부 프레젠터 키 반복 방지) document.addEventListener('keyup',function(e){ if(!document.getElementById('pjOverlay').classList.contains('active'))return; if(e.key==='PageDown'||e.key==='PageUp'||e.key==='F5')e.preventDefault(); },false); // 마우스 휠 이동 var _wt=false; document.getElementById('pjOverlay').addEventListener('wheel',function(e){ e.preventDefault(); if(_wt)return;_wt=true; if(e.deltaY>0)nextSlide();else prevSlide(); setTimeout(function(){_wt=false;},350); },{passive:false}); // 터치 스와이프 (좌우) (function(){ var startX=0,startY=0; var cont=document.getElementById('pjOverlay'); cont.addEventListener('touchstart',function(e){startX=e.touches[0].clientX;startY=e.touches[0].clientY;},{passive:true}); cont.addEventListener('touchend',function(e){ if(e.target.closest&&e.target.closest('.pj-timer-box'))return; if(e.target.closest&&e.target.closest('.pj-ctrl-bar'))return; var dx=e.changedTouches[0].clientX-startX; var dy=e.changedTouches[0].clientY-startY; if(Math.abs(dx)>Math.abs(dy)&&Math.abs(dx)>40){ if(dx<0)nextSlide();else prevSlide(); } },{passive:true}); })(); // ── 슬라이드 빌드 ── function buildSlides(){ var container=document.getElementById('pjSlideContainer'); container.innerHTML=''; slides=[];fileSlideMap=[];judgeSlideIdx=-1;presenterSlideIdxs=[];tabDoneMap={}; if(!state.files.length){ document.getElementById('pjSlideCounter').textContent='0 / 0'; return; } function makeSlide(cls){ var el=document.createElement('div'); el.className='pj-slide hidden'+(cls?' '+cls:''); container.appendChild(el); return el; } // 1단계: 모든 파일 페이지수 수집 (비동기 병렬) var pageCounts=new Array(state.files.length).fill(1); var collected=0; function allCollected(){ // 2단계: 슬라이드 배열 완전 동기 확정 // 발표전 공지(공1): 맨 앞에 배치 (공1버튼으로도 접근 가능) if((state.judgeNotice&&state.judgeNotice.trim())||state.judgeNoticeFileData){ var jel=makeSlide('pj-slide-notice'); jel.style.position='relative'; buildNoticeContent(jel,' 발표전 공지',state.judgeNotice,state.judgeNoticeFileData,state.judgeNoticeFileType,state.judgeTextColor,state.judgeBgColor); judgeSlideIdx=slides.length; // = 0 slides.push({type:'judgeNotice',el:jel,fileIdx:-1}); } for(var fi=0;fi<state.files.length;fi++){ var fii=fi; var fObj=state.files[fii]; // 현재 파일 객체 (순서대로) var numPages=pageCounts[fii]; // 사이간지 (첫 파일 앞에는 없음) if(fii>0&&state.interType!=='none'){ var interN=state.interType==='countdown'?3:(state.interCount||2); for(var ni=0;ni<interN;ni++){ var iel=makeSlide('pj-slide-inter'); buildInterContent(iel,ni); slides.push({type:'inter',el:iel,fileIdx:-1}); } } // 발표자 공지 처리 var notices=state.presenterNotices||[]; var hasNotice=state.presenterNoticeInclude&&notices.length&&notices.some(function(n){return n.text&&n.text.trim();}); if(hasNotice){ fileSlideMap[fii]=slides.length; // 공지 슬라이드부터 var firstNoticeForSlide=null; for(var ni2=0;ni2<notices.length;ni2++){ if(notices[ni2].text&&notices[ni2].text.trim()){firstNoticeForSlide=notices[ni2];break;} } if(firstNoticeForSlide){ var pel=makeSlide('pj-slide-notice'); buildNoticeContent(pel,' 발표자공지',firstNoticeForSlide.text,firstNoticeForSlide.fileData,firstNoticeForSlide.fileType,firstNoticeForSlide.textColor,firstNoticeForSlide.bgColor); presenterSlideIdxs.push(slides.length); slides.push({type:'presenterNotice',el:pel,fileIdx:fii}); } } else { fileSlideMap[fii]=slides.length; // PDF 첫장 } // PDF 페이지 플레이스홀더 for(var pi=0;pi<numPages;pi++){ var psel=makeSlide(''); psel.style.cssText='background:#0a0a0a;position:relative;'; slides.push({type:'pdf',el:psel,fileIdx:fii,pageNum:pi+1}); } } // 슬라이드 카운터/화살표 document.getElementById('pjSlideCounter').textContent='1 / '+slides.length; document.getElementById('pjNavPrev').disabled=true; document.getElementById('pjNavNext').disabled=slides.length<=1; // 탭 빌드 buildTabs(); // 첫 슬라이드 표시 (발표전공지 제외 — 공1버튼으로만) // presentMode 'click': 첫 발표자 fileSlideMap[0] 부터 // presentMode 'scroll': 동일 curSlide=0; // 발표전공지가 있으면 0번(공지)부터 시작 if(slides[curSlide])slides[curSlide].el.classList.remove('hidden'); document.getElementById('pjSlideCounter').textContent=(curSlide+1)+' / '+slides.length; document.getElementById('pjNavPrev').disabled=curSlide===0; document.getElementById('pjNavNext').disabled=slides.length<=1; hideLoading(); // 3단계: canvas 렌더 (비동기) renderAllCanvas(); } // 페이지수 수집 for(var i=0;i<state.files.length;i++){ (function(idx){ var f=state.files[idx]; if(!f||!f.data){pageCounts[idx]=0;collected++;if(collected===state.files.length)allCollected();return;} pdfjsLib.getDocument({data:f.data.slice(0)}).promise.then(function(pdf){ pageCounts[idx]=pdf.numPages; collected++; if(collected===state.files.length)allCollected(); }).catch(function(){ collected++; if(collected===state.files.length)allCollected(); }); })(i); } } // 3단계: 지연 로드 — 현재 슬라이드 ±5장 우선 렌더, 나머지는 idle 처리 var _renderedSet={}; function renderSlideCanvas(sobj){ if(!sobj||sobj.type!=='pdf')return; var key=sobj.fileIdx+'_'+sobj.pageNum; if(_renderedSet[key])return; _renderedSet[key]=true; var f=state.files[sobj.fileIdx]; if(!f||!f.data)return; pdfjsLib.getDocument({data:f.data.slice(0)}).promise.then(function(pdf){ pdf.getPage(sobj.pageNum).then(function(page){ var W=window.innerWidth;var H=window.innerHeight-62; var vp0=page.getViewport({scale:1}); var scale=Math.min(W/vp0.width,H/vp0.height); if(scale<0.2)scale=0.2;if(scale>6)scale=6; var vp=page.getViewport({scale:scale}); var canvas=document.createElement('canvas'); canvas.width=vp.width;canvas.height=vp.height; canvas.style.cssText='display:block;max-width:100%;max-height:calc(100vh - 62px);object-fit:contain;'; // 이미 canvas 있으면 스킵 if(sobj.el.querySelector('canvas'))return; sobj.el.appendChild(canvas); page.render({canvasContext:canvas.getContext('2d'),viewport:vp}); }); }); } function renderAllCanvas(){ _renderedSet={}; // 현재 슬라이드 ±5 우선 렌더 renderNearbySlides(curSlide); // 나머지는 requestIdleCallback or setTimeout으로 순차 렌더 var remaining=[]; for(var si=0;si<slides.length;si++){ var key=(slides[si].fileIdx||0)+'_'+(slides[si].pageNum||0); if(slides[si].type==='pdf'&&!_renderedSet[key])remaining.push(slides[si]); } (function renderNext(arr,idx){ if(idx>=arr.length)return; if(window.requestIdleCallback){ requestIdleCallback(function(){renderSlideCanvas(arr[idx]);renderNext(arr,idx+1);}); } else { setTimeout(function(){renderSlideCanvas(arr[idx]);renderNext(arr,idx+1);},30); } })(remaining,0); } function renderNearbySlides(center){ var range=5; for(var i=Math.max(0,center-range);i<=Math.min(slides.length-1,center+range);i++){ renderSlideCanvas(slides[i]); } } function buildNoticeContent(el,title,text,fileData,fileType,textColor,bgColor){ el.classList.add('pj-slide-notice'); if(bgColor)el.style.background=bgColor; var inner=document.createElement('div');inner.className='pj-slide-notice-inner'; var h2=document.createElement('h2');h2.textContent=title; if(textColor)h2.style.color=textColor; inner.appendChild(h2); if(fileData){ if(fileType&&fileType.indexOf('image')>-1){var img=document.createElement('img');img.src=fileData;inner.appendChild(img);} else if(fileType&&fileType.indexOf('pdf')>-1){ var c2=document.createElement('canvas');c2.style.cssText='max-width:100%;display:block;margin:0 auto;';inner.appendChild(c2); var bin=atob(fileData.split(',')[1]);var arr=new Uint8Array(bin.length);for(var j=0;j<bin.length;j++)arr[j]=bin.charCodeAt(j); pdfjsLib.getDocument({data:arr.buffer}).promise.then(function(pdf){pdf.getPage(1).then(function(page){var vp0=page.getViewport({scale:1});var scale=Math.min(600,window.innerWidth-60)/vp0.width;var vp=page.getViewport({scale:scale});c2.width=vp.width;c2.height=vp.height;c2.style.width='100%';c2.style.height='auto';page.render({canvasContext:c2.getContext('2d'),viewport:vp});});}); } } if(text&&text.trim()){var p2=document.createElement('p');p2.textContent=text;if(textColor)p2.style.color=textColor;inner.appendChild(p2);} el.appendChild(inner); } function buildInterContent(el,ni){ el.classList.add('pj-slide-inter'); if(state.interType==='black'){el.style.background='#000';} else if(state.interType==='wait'){var t=document.createElement('div');t.className='pj-inter-wait';t.textContent='잠시 대기해 주세요 ⏳';el.appendChild(t);} else if(state.interType==='logo'&&state.logoDataUrl){var img=document.createElement('img');img.src=state.logoDataUrl;img.style.cssText='max-width:100%;max-height:80vh;object-fit:contain;';el.appendChild(img);} else if(state.interType==='countdown'){var num=3-ni;var cnt=document.createElement('div');cnt.className='pj-inter-countdown';cnt.textContent=num>0?num+'':'▶';el.appendChild(cnt);} } // ── 탭 빌드 ── function buildTabs(){ var tabs=document.getElementById('pjCtrlTabs');tabs.innerHTML=''; // 공1 버튼을 맨앞에 배치 var b1=document.createElement('button');b1.className='pj-tab-btn notice-btn'; b1.textContent='공1';b1.title='공지 (더블클릭: 공지완료)'; b1.style.setProperty('pointer-events','auto','important'); b1.style.cssText+=';background:rgba(59,130,246,0.35);border-color:#3b82f6;color:#93c5fd;font-weight:700;'; var _b1t=0;var _b1done=false; b1.addEventListener('click',function(){ var now=Date.now();var isDbl=(now-_b1t<380);_b1t=now; if(isDbl){ _b1done=!_b1done; if(_b1done){b1.textContent='공지완료';b1.style.opacity='0.45';b1.classList.add('done');} else{b1.textContent='공1';b1.style.opacity='1';b1.classList.remove('done');} } else { if(_b1done)return; if(judgeSlideIdx>=0){goToSlide(judgeSlideIdx);} else if(state.judgeNotice&&state.judgeNotice.trim()){ showNoticeOverlay(-1,'발표전 공지',state.judgeNotice,state.judgeBgColor,state.judgeTextColor); } } },false); tabs.appendChild(b1); for(var ti=0;ti<state.files.length;ti++){ (function(tii){ var btn=document.createElement('button'); btn.className='pj-tab-btn'; btn.textContent=(tii+1)+''; btn.dataset.tabIdx=tii; // 말풍선 파일명 (IIFE 클로저로 정확한 파일명 캡처) if(state.showTabTooltip&&state.files[tii]){ (function(fname,b){ var tip=document.createElement('span'); tip.style.cssText='position:absolute;bottom:calc(100% + 8px);left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#1e293b;color:#fff;font-size:11px;padding:5px 9px;border-radius:7px;white-space:nowrap;pointer-events:none !important;opacity:0;-webkit-transition:opacity 0.15s;transition:opacity 0.15s;z-index:2147483647;text-align:center;line-height:1.4;'; tip.textContent=fname; b.style.position='relative';b.style.overflow='visible'; b.appendChild(tip); b.addEventListener('mouseenter',function(){tip.style.opacity='1';},false); b.addEventListener('mouseleave',function(){tip.style.opacity='0';},false); })(state.files[tii].name, btn); } var lastClick=0; btn.addEventListener('click',function(){ var now=Date.now();var isDbl=(now-lastClick<380);lastClick=now; if(isDbl){ tabDoneMap[tii]=!tabDoneMap[tii]; if(tabDoneMap[tii]){ btn.classList.add('done');btn.classList.remove('active');btn.textContent=(tii+1)+'완료'; // 다음 미완료 발표자로 이동 var nextFii=-1; for(var nf=tii+1;nf<state.files.length;nf++){if(!tabDoneMap[nf]){nextFii=nf;break;}} if(nextFii>=0&&fileSlideMap[nextFii]!==undefined){ setTimeout(function(){goToSlide(fileSlideMap[nextFii]);},200); } } else { btn.classList.remove('done');btn.textContent=(tii+1)+''; } } else { if(fileSlideMap[tii]===undefined)return; timerPause(); timerRT.elapsed=0;timerRT.warn1done=false;timerRT.warn2done=false;timerRT.enddone=false; timerRT.total=(state.timerMin*60+state.timerSec)*1000; var disp2=document.getElementById('pjTimerDisplay'); if(disp2&&state.timerMode==='timer')disp2.textContent=timerFormat(timerRT.total); disp2&&(disp2.className='pj-timer-display'); if(state.presentMode==='click'){showFileOnly(tii);} else{goToSlide(fileSlideMap[tii]);} } },false); tabs.appendChild(btn); })(ti); } // 공1은 buildTabs 맨앞에서 처리됨 var b2=document.createElement('button');b2.className='pj-tab-btn notice-btn';b2.textContent='발표자공지'; b2.title='발표자 공지 (클릭: 오버레이표시/숨김)'; b2.addEventListener('click',function(){ // 기존 오버레이 있으면 닫기 var ol2=document.getElementById('pjOverlay'); if(ol2&&ol2.querySelector('.pj-notice-overlay')){ var ex=ol2.querySelector('.pj-notice-overlay'); ol2.removeChild(ex);_noticeOverlay=null; b2.classList.remove('active'); return; } // 발표자공지 모든 내용 하나의 오버레이에 표시 var notices2=state.presenterNotices||[]; var hasAny=false; for(var ni3=0;ni3<notices2.length;ni3++){if(notices2[ni3].text&&notices2[ni3].text.trim()){hasAny=true;break;}} if(!hasAny)return; // 오버레이 직접 구성 (여러 공지 순서대로) if(!ol2)return; var ov3=document.createElement('div'); ov3.className='pj-notice-overlay'; ov3.style.cssText='position:absolute;top:0;left:0;right:0;bottom:0;z-index:2147483646;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;padding:20px 16px 80px;pointer-events:auto;'; var inner3=document.createElement('div'); inner3.style.cssText='background:rgba(15,23,42,0.97);border:2px solid #3b82f6;border-radius:16px;padding:24px;max-width:680px;width:100%;text-align:center;max-height:80vh;overflow-y:auto;'; for(var ni4=0;ni4<notices2.length;ni4++){ var nn4=notices2[ni4]; if(!nn4.text||!nn4.text.trim())continue; var block=document.createElement('div'); block.style.cssText='margin-bottom:'+(ni4<notices2.length-1?'18px':'0')+';padding-bottom:'+(ni4<notices2.length-1?'18px':'0')+';border-bottom:'+(ni4<notices2.length-1?'1px solid rgba(255,255,255,0.1)':'none')+';'; var h4=document.createElement('h2'); h4.textContent=' 발표자공지'+(notices2.length>1?(ni4+1):''); h4.style.cssText='font-size:18px;font-weight:700;color:'+(nn4.textColor||'#93c5fd')+';margin-bottom:10px;'; var p4=document.createElement('p'); p4.textContent=nn4.text; p4.style.cssText='font-size:15px;color:'+(nn4.textColor||'#e2e8f0')+';line-height:1.9;white-space:pre-wrap;'; block.appendChild(h4);block.appendChild(p4);inner3.appendChild(block); } var cb3=document.createElement('button'); cb3.textContent='✕ 닫기'; cb3.style.cssText='margin-top:14px;background:#3b82f6;color:#fff;border:none;border-radius:8px;padding:8px 20px;font-size:14px;cursor:pointer;pointer-events:auto;'; cb3.addEventListener('click',function(){ol2.removeChild(ov3);_noticeOverlay=null;b2.classList.remove('active');},false); inner3.appendChild(cb3);ov3.appendChild(inner3); ov3.addEventListener('click',function(e){if(e.target===ov3){ol2.removeChild(ov3);_noticeOverlay=null;b2.classList.remove('active');}},false); ol2.appendChild(ov3);_noticeOverlay=ov3; b2.classList.add('active'); },false); tabs.appendChild(b2); } function showFileOnly(fii){ if(fileSlideMap[fii]===undefined)return; goToSlide(fileSlideMap[fii]); } // ── 전체화면 API ── function requestFullscreen(el){if(el.requestFullscreen)el.requestFullscreen();else if(el.webkitRequestFullscreen)el.webkitRequestFullscreen();else if(el.mozRequestFullScreen)el.mozRequestFullScreen();else if(el.msRequestFullscreen)el.msRequestFullscreen();} function exitFullscreen(){if(document.exitFullscreen)document.exitFullscreen();else if(document.webkitExitFullscreen)document.webkitExitFullscreen();else if(document.mozCancelFullScreen)document.mozCancelFullScreen();else if(document.msExitFullscreen)document.msExitFullscreen();} function isFullscreen(){return !!(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement);} document.addEventListener('fullscreenchange',function(){if(!isFullscreen()&&document.getElementById('pjOverlay').classList.contains('active'))closeFullview(true);},false); document.addEventListener('webkitfullscreenchange',function(){if(!isFullscreen()&&document.getElementById('pjOverlay').classList.contains('active'))closeFullview(true);},false); // ── 전체보기 열기/닫기 ── var _tfv=false; document.getElementById('pjFullviewBtn').addEventListener('touchend',function(e){e.preventDefault();_tfv=true;openFullview();setTimeout(function(){_tfv=false;},400);},false); document.getElementById('pjFullviewBtn').addEventListener('click',function(){if(_tfv)return;openFullview();},false); (function(){ var hb=document.getElementById('pjFullviewBtnHdr'); if(!hb)return; var _th=false; hb.addEventListener('touchend',function(e){e.preventDefault();_th=true;openFullview();setTimeout(function(){_th=false;},400);},false); hb.addEventListener('click',function(){if(_th)return;openFullview();},false); })(); function openFullview(){ if(!state.files.length){alert('발표자료를 먼저 업로드해주세요.');return;} var ol=document.getElementById('pjOverlay'); ol.classList.add('active'); document.body.classList.add('pj-popup-open'); document.body.style.cssText='overflow:hidden !important;position:fixed !important;width:100% !important;'; (function(){ var ss=['#header','header','.header','.gnb','.lnb','#gnb','#lnb','nav','#nav','.menu','#menu','.sidebar','#sidebar']; for(var si=0;si<ss.length;si++){var el=document.querySelector(ss[si]);if(el)el.style.setProperty('z-index','-1','important');} })(); requestFullscreen(document.documentElement); showLoading('슬라이드 준비 중...'); timerReset();applyTimerPos();applyCaption(); document.getElementById('pjTimerOverlay').classList.add('active'); buildSlides(); // 내부 allCollected에서 buildTabs+hideLoading 처리 // 기기 레이저포인터 포커스 확보 var olEl=document.getElementById('pjOverlay'); if(olEl){olEl.setAttribute('tabindex','0');setTimeout(function(){olEl.focus();},100);} } function closeFullview(skipExit){ timerPause(); document.getElementById('pjOverlay').classList.remove('active'); document.body.classList.remove('pj-popup-open'); document.body.style.cssText=''; (function(){ var ss=['#header','header','.header','.gnb','.lnb','#gnb','#lnb','nav','#nav','.menu','#menu','.sidebar','#sidebar']; for(var si=0;si<ss.length;si++){var el=document.querySelector(ss[si]);if(el)el.style.removeProperty('z-index');} })(); document.getElementById('pjTimerOverlay').classList.remove('active'); if(!skipExit&&isFullscreen())exitFullscreen(); hideLoading(); } var _tcb=false;document.getElementById('pjCloseBtn').addEventListener('touchend',function(e){e.preventDefault();_tcb=true;closeFullview();setTimeout(function(){_tcb=false;},400);},false);document.getElementById('pjCloseBtn').addEventListener('click',function(){if(_tcb)return;closeFullview();},false); var _tcc=false;document.getElementById('pjCtrlClose').addEventListener('touchend',function(e){e.preventDefault();_tcc=true;closeFullview();setTimeout(function(){_tcc=false;},400);},false);document.getElementById('pjCtrlClose').addEventListener('click',function(){if(_tcc)return;closeFullview();},false); window.addEventListener('hashchange',function(){if(document.getElementById('pjOverlay').classList.contains('active'))closeFullview();},false); // ── 백업 ── var _tbk=false;document.getElementById('pjBackupBtn').addEventListener('touchend',function(e){e.preventDefault();_tbk=true;downloadBackup();setTimeout(function(){_tbk=false;},400);},false);document.getElementById('pjBackupBtn').addEventListener('click',function(){if(_tbk)return;downloadBackup();},false); // 초기화 (function(){ var rb=document.getElementById('pjResetBtn');if(!rb)return; rb.addEventListener('click',function(){ if(!confirm('모든 파일과 설정을 초기화할까요?'))return; state.files=[];state.gdriveLinks=[]; state.judgeNotice='';state.judgeNoticeFileData=null;state.judgeNoticeFileType=''; state.judgeTextColor='#e2e8f0';state.judgeBgColor='#0f172a'; state.presenterNotices=[{text:'',fileData:null,fileType:'',textColor:'#e2e8f0',bgColor:'#0f172a'}]; state.presenterNoticeInclude=false; state.interType='none';state.interCount=2;state.logoDataUrl=null; state.timerMode='timer';state.timerMin=5;state.timerSec=0; state.timerPos='top-right';state.timerSize='md';state.timerOpacity=70; state.captionOn=false;state.captionText='';state.captionMode='fixed'; state.presentMode='scroll';state.showTabTooltip=true; try{localStorage.removeItem('pj_opts_v5');}catch(e){} syncUI();renderFileList();showToast('초기화 완료!'); },false); })(); // ── 정렬 버튼 ── function bindBtn(id,fn){ var el=document.getElementById(id);if(!el)return; var _t=false; el.addEventListener('touchend',function(e){e.preventDefault();_t=true;fn();setTimeout(function(){_t=false;},400);},false); el.addEventListener('click',function(){if(_t)return;fn();},false); } var _sortState={upload:0,name:0,size:0}; bindBtn('pjSortUploadBtn',function(){ _sortState.upload=(_sortState.upload+1)%2; state.files.sort(function(a,b){return (a.uploadOrder||0)-(b.uploadOrder||0);}); if(_sortState.upload===1)state.files.reverse(); renderFileList();showToast(_sortState.upload===0?'업로드순':'업로드 역순'); }); bindBtn('pjSortNameBtn',function(){ _sortState.name=(_sortState.name+1)%2; state.files.sort(function(a,b){return a.name.localeCompare(b.name,'ko');}); if(_sortState.name===1)state.files.reverse(); renderFileList();showToast(_sortState.name===0?'이름순':'이름 역순'); }); bindBtn('pjSortSizeBtn',function(){ _sortState.size=(_sortState.size+1)%2; state.files.sort(function(a,b){return (a.data?a.data.byteLength:0)-(b.data?b.data.byteLength:0);}); if(_sortState.size===1)state.files.reverse(); renderFileList();showToast(_sortState.size===0?'용량 작은순':'용량 큰순'); }); // ── 발표모드 전환 ── window.setPresentMode=function(mode){ state.presentMode=mode;syncUI();saveOpts(); showToast(mode==='scroll'?' 전체 스크롤 모드':' 순번 클릭 이동 모드'); }; function downloadBackup(){if(!state.files.length){showToast('파일 없음');return;}for(var i=0;i<state.files.length;i++){if(!state.files[i].data)continue;(function(f){var blob=new Blob([f.data],{type:'application/pdf'});var url=URL.createObjectURL(blob);var a=document.createElement('a');a.href=url;a.download=f.name;document.body.appendChild(a);a.click();setTimeout(function(){document.body.removeChild(a);URL.revokeObjectURL(url);},1000);})(state.files[i]);}showToast('PDF 다운로드!');} // ── 전체저장 / 불러오기 ── var _tss=false;document.getElementById('pjSaveSessionBtn').addEventListener('touchend',function(e){e.preventDefault();_tss=true;saveSession();setTimeout(function(){_tss=false;},400);},false);document.getElementById('pjSaveSessionBtn').addEventListener('click',function(){if(_tss)return;saveSession();},false); function saveSession(){ if(!state.files.length){showToast('파일 없음');return;} showLoading('전체 저장 중...'); var session={version:5,opts:{judgeNotice:state.judgeNotice,judgeNoticeFileData:state.judgeNoticeFileData,judgeNoticeFileType:state.judgeNoticeFileType,presenterNotice:state.presenterNotice,presenterNoticeFileData:state.presenterNoticeFileData,presenterNoticeFileType:state.presenterNoticeFileType,presenterNoticeInclude:state.presenterNoticeInclude,interType:state.interType,interCount:state.interCount,timerMode:state.timerMode,timerMin:state.timerMin,timerSec:state.timerSec,warn1Blink:state.warn1Blink,warn1Sound:state.warn1Sound,warn2Blink:state.warn2Blink,warn2Sound:state.warn2Sound,endSound:state.endSound,overtime:state.overtime,timerPos:state.timerPos,timerSize:state.timerSize,timerOpacity:state.timerOpacity,captionOn:state.captionOn,captionText:state.captionText,captionMode:state.captionMode,gdriveLinks:state.gdriveLinks},files:[]}; var filesToSave=state.files.filter(function(f){return !!f.data;}); var loaded=0; if(!filesToSave.length){hideLoading();showToast('저장 가능한 파일 없음');return;} for(var i=0;i<filesToSave.length;i++){(function(f){var reader=new FileReader();reader.onload=function(e){session.files.push({name:f.name,pages:f.pages,b64:e.target.result.split(',')[1]});loaded++;if(loaded===filesToSave.length){var blob=new Blob([JSON.stringify(session)],{type:'application/json'});var url=URL.createObjectURL(blob);var a=document.createElement('a');a.href=url;a.download='발표세션_'+new Date().toISOString().slice(0,10)+'.발표장';document.body.appendChild(a);a.click();setTimeout(function(){document.body.removeChild(a);URL.revokeObjectURL(url);},1000);hideLoading();showToast('전체 저장 완료!');}};reader.readAsDataURL(new Blob([f.data],{type:'application/pdf'}));})(filesToSave[i]);} } var _tls=false;document.getElementById('pjLoadSessionBtn').addEventListener('touchend',function(e){e.preventDefault();_tls=true;document.getElementById('pjSessionInput').click();setTimeout(function(){_tls=false;},400);},false);document.getElementById('pjLoadSessionBtn').addEventListener('click',function(){if(_tls)return;document.getElementById('pjSessionInput').click();},false); document.getElementById('pjSessionInput').addEventListener('change',function(){ if(!this.files||!this.files[0])return;showLoading('불러오는 중...'); var reader=new FileReader(); reader.onload=function(e){ try{var session=JSON.parse(e.target.result);if(!session.files)throw new Error('invalid');var o=session.opts||{};for(var k in o){if(o.hasOwnProperty(k))state[k]=o[k];}syncUI();saveOpts();state.files=[];var loaded2=0;var total=session.files.length;if(!total){hideLoading();return;}for(var i=0;i<total;i++){(function(sf){var bin=atob(sf.b64);var arr=new Uint8Array(bin.length);for(var j=0;j<bin.length;j++)arr[j]=bin.charCodeAt(j);loadPdfBuffer(arr.buffer,sf.name).then(function(obj){state.files.push(obj);loaded2++;if(loaded2===total){renderFileList();hideLoading();showToast('불러오기 완료!');}}).catch(function(){loaded2++;if(loaded2===total){renderFileList();hideLoading();}});})(session.files[i]);};}catch(ex){hideLoading();showToast('파일 오류');} };reader.readAsText(this.files[0]);this.value=''; },false); // ── 옵션 공유 ── function getOptsJson(){ return JSON.stringify({ judgeNotice:state.judgeNotice, judgeNoticeFileType:state.judgeNoticeFileType, judgeTextColor:state.judgeTextColor, judgeBgColor:state.judgeBgColor, presenterNotices:state.presenterNotices, presenterNoticeInclude:state.presenterNoticeInclude, showTabTooltip:state.showTabTooltip, interType:state.interType,interCount:state.interCount, timerMode:state.timerMode,timerMin:state.timerMin,timerSec:state.timerSec, warn1Blink:state.warn1Blink,warn1Sound:state.warn1Sound, warn2Blink:state.warn2Blink,warn2Sound:state.warn2Sound, endSound:state.endSound,overtime:state.overtime, timerPos:state.timerPos,timerSize:state.timerSize,timerOpacity:state.timerOpacity, captionOn:state.captionOn,captionText:state.captionText,captionMode:state.captionMode, presentMode:state.presentMode }); } function getShareUrl(){return window.location.href.split('?')[0]+'?pjopts='+LZString.compressToEncodedURIComponent(getOptsJson());} function fallbackCopy(text){var ta=document.createElement('textarea');ta.value=text;ta.style.cssText='position:fixed;top:-9999px;';document.body.appendChild(ta);ta.focus();ta.select();try{document.execCommand('copy');showToast('복사됨!');}catch(e){showToast('복사 실패');}document.body.removeChild(ta);} var _tsh=false;document.getElementById('pjShareOptsBtn').addEventListener('touchend',function(e){e.preventDefault();_tsh=true;var u=getShareUrl();if(navigator.clipboard&&navigator.clipboard.writeText)navigator.clipboard.writeText(u).then(function(){showToast('URL 복사됨!');}).catch(function(){fallbackCopy(u);});else fallbackCopy(u);setTimeout(function(){_tsh=false;},400);},false);document.getElementById('pjShareOptsBtn').addEventListener('click',function(){if(_tsh)return;var u=getShareUrl();if(navigator.clipboard&&navigator.clipboard.writeText)navigator.clipboard.writeText(u).then(function(){showToast('URL 복사됨!');}).catch(function(){fallbackCopy(u);});else fallbackCopy(u);},false); var _tqr=false;document.getElementById('pjShareQrBtn').addEventListener('touchend',function(e){e.preventDefault();_tqr=true;showQr();setTimeout(function(){_tqr=false;},400);},false);document.getElementById('pjShareQrBtn').addEventListener('click',function(){if(_tqr)return;showQr();},false); function showQr(){var wrap=document.getElementById('pjQrWrap');var qrDiv=document.getElementById('pjQrCanvas');qrDiv.innerHTML='';wrap.style.display='block';function mk(){new QRCode(qrDiv,{text:getShareUrl(),width:180,height:180,correctLevel:QRCode.CorrectLevel.M});}if(window.QRCode)mk();else{var s=document.createElement('script');s.src='https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js';s.onload=mk;document.head.appendChild(s);}showToast('QR 생성됨!');} // ── 메모리 최적화 ── (function(){ var btn=document.getElementById('pjMemOptBtn'); if(!btn)return; btn.addEventListener('click',function(){ // 전체보기 캔버스 캐시 초기화 if(typeof _renderedSet!=='undefined')_renderedSet={}; // 가비지 컬렉션 유도 (간접적) var prog=document.getElementById('pjOptProgress'); if(prog){prog.style.display='block';prog.textContent='메모리 최적화 완료! 다음 전체보기 시 슬라이드가 다시 렌더됩니다.';} showToast(' 메모리 최적화 완료'); setTimeout(function(){if(prog)prog.style.display='none';},3000); },false); })(); // ── PDF 병합 저장 ── (function(){ var btn=document.getElementById('pjMergeExportBtn'); if(!btn)return; btn.addEventListener('click',function(){ if(!state.files||!state.files.length){showToast('파일이 없습니다');return;} var validFiles=state.files.filter(function(f){return f.data&&!f.isAbsent;}); if(!validFiles.length){showToast('병합할 파일이 없습니다');return;} var prog=document.getElementById('pjOptProgress'); if(prog){prog.style.display='block';prog.textContent='병합 중... ('+validFiles.length+'개 파일)';} showLoading('PDF 병합 중...'); // 순서대로 Blob 배열 생성 후 다운로드 (각각 개별 다운로드) var delay=0; for(var i=0;i<validFiles.length;i++){ (function(f,idx){ setTimeout(function(){ var blob=new Blob([f.data],{type:'application/pdf'}); var url=URL.createObjectURL(blob); var a=document.createElement('a'); a.href=url;a.download=(idx+1).toString().padStart(2,'0')+'_'+f.name; document.body.appendChild(a);a.click(); setTimeout(function(){document.body.removeChild(a);URL.revokeObjectURL(url);},500); if(idx===validFiles.length-1){ hideLoading(); if(prog){prog.textContent=validFiles.length+'개 파일 다운로드 완료!';} setTimeout(function(){if(prog)prog.style.display='none';},3000); } },delay); delay+=800; })(validFiles[i],i); } },false); })(); // ── 사용설명서 접기/펴기 ── (function(){ var toggle=document.getElementById('pjManualToggle'); var content=document.getElementById('pjManualContent'); var arrow=document.getElementById('pjManualArrow'); if(!toggle||!content)return; var open=true; toggle.addEventListener('click',function(){ open=!open; content.style.display=open?'block':'none'; arrow.textContent=open?'▲ 접기':'▼ 펴기'; },false); })(); // ── 초기화 ── loadOpts();loadOptsFromUrl(); if(!state.presenterNotices||!state.presenterNotices.length)state.presenterNotices=[{text:'',fileData:null,fileType:'',textColor:'#e2e8f0',bgColor:'#0f172a'}]; syncUI(); // 표시옵션 섹션 이벤트 (function(){ var el=document.getElementById('pjShowTabTooltipMain'); if(el){ el.checked=!!state.showTabTooltip; el.addEventListener('change',function(){ state.showTabTooltip=this.checked; // pjShowTabTooltip도 동기화 var el2=document.getElementById('pjShowTabTooltip'); if(el2)el2.checked=this.checked; saveOpts(); },false); } })(); })(); </script> 모두의계산기/행사공지계산기_16 발표장 최매슨생 https://0-1.kr/30 https://0-1.kr/30#entry30comment Mon, 23 Nov 2020 11:17:47 +0900 https://0-1.kr/29 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>모두의 단어암기장 (시안)</title> <style> :root{ --wa-navy:#26355E; --wa-navy-deep:#1A2542; --wa-paper:#FBF9F4; --wa-line:#D8CDBF; --wa-ink:#2A2A28; --wa-sub:#6E6A61; --wa-good:#3F8F5F; --wa-good-bg:#E7F3EB; --wa-bad:#C85A46; --wa-bad-bg:#F8E9E5; --wa-accent:#B8863E; --wa-panel:#EFECE3; --wa-radius:10px; } *{box-sizing:border-box;} #wa-root{ font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif; color:var(--wa-ink); background:var(--wa-panel); max-width:760px; margin:0 auto; padding:0 0 40px 0; line-height:1.5; } #wa-root *{box-sizing:border-box;} .wa-header{ background:var(--wa-navy); background-image:linear-gradient(135deg,var(--wa-navy) 0%,var(--wa-navy-deep) 100%); color:#fff; padding:22px 20px 18px 20px; border-radius:0 0 16px 16px; } .wa-header-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;} .wa-title{font-size:20px;font-weight:800;letter-spacing:-0.3px;margin:0;} .wa-title small{display:block;font-size:11.5px;font-weight:500;opacity:0.65;margin-top:3px;letter-spacing:0;} .wa-badge{ font-size:11px;background:rgba(255,255,255,0.14);padding:4px 9px;border-radius:20px; white-space:nowrap;font-weight:600; } .wa-hdr-actions{display:flex;gap:6px;flex:none;} .wa-hdr-btn{ appearance:none;border:1px solid rgba(255,255,255,0.28);background:rgba(255,255,255,0.10); color:#fff;font-size:11.5px;font-weight:700;padding:6px 10px;border-radius:20px;cursor:pointer; white-space:nowrap;transition:background .15s; } .wa-hdr-btn:active{transform:scale(0.96);} .wa-hdr-btn:hover{background:rgba(255,255,255,0.2);} .wa-hdr-btn-accent{background:var(--wa-accent);border-color:var(--wa-accent);} @media (max-width:460px){ .wa-header-top{flex-direction:column;align-items:flex-start;} .wa-hdr-actions{width:100%;} .wa-hdr-btn{flex:1;text-align:center;} } .wa-tabs{ display:flex;gap:6px;margin-top:16px;overflow-x:auto;padding-bottom:2px; -webkit-overflow-scrolling:touch; } .wa-tab{ flex:1 0 auto;text-align:center;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:700; background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.72);cursor:pointer; border:1px solid transparent;white-space:nowrap;transition:background .15s; user-select:none; } .wa-tab.wa-active{background:#fff;color:var(--wa-navy-deep);} .wa-body{padding:16px 16px 0 16px;} .wa-panel{ background:var(--wa-paper);border:1px solid var(--wa-line);border-radius:var(--wa-radius); padding:16px;margin-bottom:14px; } .wa-panel h3{margin:0 0 10px 0;font-size:14px;font-weight:800;color:var(--wa-navy-deep); display:flex;align-items:center;gap:6px;} .wa-hint{font-size:12px;color:var(--wa-sub);margin:0 0 10px 0;line-height:1.55;} textarea.wa-input{ width:100%;min-height:110px;border:1px solid var(--wa-line);border-radius:8px;padding:10px 12px; font-size:14px;font-family:inherit;resize:vertical;background:#fff;color:var(--wa-ink); } textarea.wa-input:focus, input.wa-field:focus{outline:2px solid var(--wa-accent);outline-offset:1px;} .wa-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;} .wa-btn{ appearance:none;border:none;border-radius:8px;padding:9px 14px;font-size:13px;font-weight:700; cursor:pointer;background:var(--wa-navy);color:#fff;transition:opacity .15s,transform .1s; } .wa-btn:active{transform:scale(0.97);} .wa-btn.wa-ghost{background:#fff;color:var(--wa-navy);border:1px solid var(--wa-line);} .wa-btn.wa-good{background:var(--wa-good);} .wa-btn.wa-bad{background:var(--wa-bad);} .wa-btn.wa-accent{background:var(--wa-accent);} .wa-btn.wa-sm{padding:6px 10px;font-size:12px;border-radius:6px;} .wa-btn:disabled{opacity:0.4;cursor:not-allowed;} input.wa-field{ border:1px solid var(--wa-line);border-radius:8px;padding:8px 10px;font-size:13px; font-family:inherit;background:#fff;color:var(--wa-ink); } .wa-add-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;} .wa-add-row input{flex:1 1 120px;} .wa-wordlist{margin-top:12px;border-top:1px dashed var(--wa-line);} .wa-wordrow{ display:flex;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px solid #EEE7D9;font-size:13px; } .wa-wordrow .wa-idx{width:22px;color:var(--wa-sub);font-size:11px;flex:none;} .wa-wordrow .wa-w{font-weight:700;flex:1 1 40%;} .wa-wordrow .wa-m{color:var(--wa-sub);flex:1 1 45%;} .wa-wordrow .wa-del{flex:none;background:none;border:none;color:var(--wa-bad);font-size:16px;cursor:pointer;padding:2px 6px;} .wa-empty{padding:22px 10px;text-align:center;color:var(--wa-sub);font-size:13px;} /* Card mode — index-card / ring-notebook signature */ .wa-card-wrap{padding:6px 4px 4px 4px;} .wa-progress-bar{height:5px;background:var(--wa-line);border-radius:3px;overflow:hidden;margin-bottom:14px;} .wa-progress-fill{height:100%;background:var(--wa-accent);border-radius:3px;transition:width .2s;} .wa-stat-row{display:flex;justify-content:space-between;font-size:12px;color:var(--wa-sub);margin-bottom:10px;font-weight:600;} .wa-card-stage{perspective:1200px;height:220px;margin:0 auto 16px auto;position:relative;} .wa-index-card{ width:100%;height:100%;position:relative;transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.7,.3,1);cursor:pointer; } .wa-index-card.wa-flipped{transform:rotateY(180deg);} .wa-card-face{ position:absolute;inset:0;backface-visibility:hidden;border-radius:12px; border:1px solid var(--wa-line);background: repeating-linear-gradient(to bottom, transparent 0 34px, #E9E1D0 34px 35px), linear-gradient(#FFFDF8,#FBF6EC); box-shadow:0 3px 0 var(--wa-line), 0 8px 18px rgba(38,53,94,0.10); display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px; } .wa-card-face:before{ content:"";position:absolute;left:34px;top:0;bottom:0;width:1px;background:#E3A9A0;opacity:0.55; } .wa-card-face.wa-back{transform:rotateY(180deg);} .wa-card-holes{position:absolute;left:12px;top:0;bottom:0;display:flex;flex-direction:column; justify-content:space-evenly;align-items:center;width:14px;} .wa-card-holes span{width:8px;height:8px;border-radius:50%;background:var(--wa-panel); box-shadow:inset 0 1px 2px rgba(0,0,0,0.25);} .wa-card-label{font-size:10.5px;letter-spacing:1px;color:var(--wa-sub);font-weight:700; text-transform:uppercase;position:absolute;top:12px;left:46px;} .wa-card-word{font-size:27px;font-weight:800;color:var(--wa-navy-deep);text-align:center; padding:0 10px;word-break:keep-all;} .wa-card-meaning{font-size:18px;font-weight:600;color:var(--wa-ink);text-align:center;padding:0 14px; word-break:keep-all;} .wa-card-tip{font-size:11px;color:var(--wa-sub);margin-top:10px;} .wa-card-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;} .wa-know-row{display:flex;gap:10px;} .wa-know-row .wa-btn{flex:1;padding:12px;font-size:14px;} .wa-speak-btn{ appearance:none;border:1px solid var(--wa-line);background:#fff;color:var(--wa-navy); border-radius:50%;width:26px;height:26px;flex:none;font-size:13px;cursor:pointer;line-height:1; display:inline-flex;align-items:center;justify-content:center;padding:0; } .wa-speak-btn:active{transform:scale(0.92);background:var(--wa-panel);} .wa-speak-btn.wa-speak-lg{width:36px;height:36px;font-size:16px;} /* Hide mode */ .wa-hide-toolbar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center;} .wa-hide-toolbar select{border:1px solid var(--wa-line);border-radius:8px;padding:7px 8px;font-size:12px;background:#fff;} .wa-hiderow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #EEE7D9;font-size:14px;} .wa-hiderow .wa-idx{width:20px;color:var(--wa-sub);font-size:11px;flex:none;} .wa-hiderow .wa-front{font-weight:700;flex:1 1 40%;} .wa-mask{ flex:1 1 45%;background:#E7E1D2;border-radius:6px;color:transparent;padding:6px 8px;cursor:pointer; user-select:none;font-size:13px;position:relative;text-align:center; } .wa-mask.wa-shown{background:transparent;color:var(--wa-ink);cursor:default;text-align:left;} .wa-mask:not(.wa-shown):after{content:" 탭하여 보기";color:var(--wa-sub);font-size:11px;position:absolute; left:0;right:0;top:50%;transform:translateY(-50%);} /* Quiz mode */ .wa-quiz-q{font-size:12px;color:var(--wa-sub);font-weight:700;margin-bottom:6px;} .wa-quiz-word{font-size:24px;font-weight:800;color:var(--wa-navy-deep);text-align:center; padding:18px 10px;background:#fff;border:1px solid var(--wa-line);border-radius:10px;margin-bottom:14px;} .wa-choice{ display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--wa-line); border-radius:8px;padding:12px 14px;font-size:14px;margin-bottom:8px;cursor:pointer;font-family:inherit; color:var(--wa-ink); } .wa-choice:hover{border-color:var(--wa-accent);} .wa-choice.wa-correct{background:var(--wa-good-bg);border-color:var(--wa-good);color:var(--wa-good);font-weight:700;} .wa-choice.wa-wrong{background:var(--wa-bad-bg);border-color:var(--wa-bad);color:var(--wa-bad);font-weight:700;} .wa-choice:disabled{cursor:default;} .wa-quiz-result{text-align:center;padding:20px 10px;} .wa-quiz-score{font-size:34px;font-weight:800;color:var(--wa-navy-deep);} .wa-quiz-score span{font-size:16px;color:var(--wa-sub);font-weight:600;} .wa-wrong-list{margin-top:14px;text-align:left;} .wa-wrong-list .wa-wordrow{font-size:12.5px;} /* Stats */ .wa-stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px;} .wa-stat-box{background:#fff;border:1px solid var(--wa-line);border-radius:8px;padding:12px 8px;text-align:center;} .wa-stat-box .n{font-size:20px;font-weight:800;color:var(--wa-navy-deep);} .wa-stat-box .l{font-size:11px;color:var(--wa-sub);margin-top:2px;font-weight:600;} .wa-footer{ display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 4px 16px;border-top:1px solid var(--wa-line); margin-top:6px; } /* Test / Exam mode */ .wa-exam-cover{text-align:center;padding:34px 20px;} .wa-exam-kicker{font-size:11px;letter-spacing:2px;color:var(--wa-accent);font-weight:800;text-transform:uppercase;} .wa-exam-title{margin:8px 0 12px 0;font-size:22px;color:var(--wa-navy-deep);} .wa-exam-desc{font-size:13px;color:var(--wa-sub);line-height:1.7;margin:0 auto;max-width:360px;} .wa-exam-countdown{font-size:64px;font-weight:800;color:var(--wa-navy-deep);margin-bottom:6px;} .wa-exam-timerbar-wrap{height:6px;background:var(--wa-line);border-radius:0;margin:0 -16px 0 -16px;overflow:hidden;} .wa-exam-timerbar{height:100%;width:100%;background:var(--wa-good);transition:width 1s linear,background .3s;} .wa-exam-timerbar.wa-time-low{background:var(--wa-bad);} .wa-exam-timer-row{display:flex;justify-content:space-between;align-items:center;padding:10px 4px 4px 4px; font-size:12px;color:var(--wa-sub);font-weight:700;} .wa-exam-clock{font-family:"SFMono-Regular",Consolas,monospace;font-size:20px;color:var(--wa-navy-deep); font-weight:800;letter-spacing:1px;} .wa-exam-q{border-bottom:1px dashed var(--wa-line);padding:14px 2px;} .wa-exam-q:last-child{border-bottom:none;} .wa-exam-q .wa-exam-q-num{font-size:11px;color:var(--wa-sub);font-weight:700;margin-bottom:4px;} .wa-exam-q .wa-exam-q-word{font-size:17px;font-weight:800;color:var(--wa-navy-deep);margin-bottom:8px;} .wa-exam-q input{ width:100%;border:1px solid var(--wa-line);border-radius:8px;padding:10px 12px;font-size:14px; font-family:inherit;background:#fff; } .wa-exam-q input:disabled{background:var(--wa-panel);color:var(--wa-sub);} .wa-exam-review-row{display:flex;gap:8px;padding:8px 2px;border-bottom:1px solid #EEE7D9;font-size:12.5px;align-items:flex-start;} .wa-exam-review-row .wa-tag{flex:none;font-weight:800;border-radius:5px;padding:1px 6px;font-size:11px;} .wa-exam-review-row .wa-tag.ok{background:var(--wa-good-bg);color:var(--wa-good);} .wa-exam-review-row .wa-tag.no{background:var(--wa-bad-bg);color:var(--wa-bad);} #wa-root.wa-participant-mode .wa-tabs, #wa-root.wa-participant-mode .wa-hdr-actions, #wa-root.wa-participant-mode .wa-footer{display:none;} #wa-root.wa-participant-mode .wa-tabpage:not([data-page="test"]){display:none !important;} .wa-wm{width:100%;text-align:center;font-size:10.5px;color:var(--wa-sub);margin-top:10px;opacity:0.75;} .wa-toast{ position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px); background:var(--wa-navy-deep);color:#fff;padding:10px 18px;border-radius:20px;font-size:13px; opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:999999;font-weight:600; max-width:88%;text-align:center; } .wa-toast.wa-show{opacity:1;transform:translateX(-50%) translateY(0);} .wa-modal-bg{ position:fixed;inset:0;background:rgba(26,37,66,0.55);display:none;align-items:center;justify-content:center; z-index:999998;padding:20px; } .wa-modal-bg.wa-show{display:flex;} .wa-modal{background:#fff;border-radius:12px;padding:20px;max-width:320px;width:100%;text-align:center;} .wa-modal h4{margin:0 0 10px 0;font-size:14px;} .wa-modal img{margin:8px auto;display:block;} .wa-modal input{width:100%;font-size:12px;margin-top:8px;text-align:center;} @media (max-width:420px){ .wa-card-word{font-size:22px;} .wa-card-stage{height:190px;} .wa-stat-grid{grid-template-columns:1fr 1fr;} } </style> </head> <body> <div id="wa-root"> <div class="wa-header"> <div class="wa-header-top"> <div class="wa-title"> 모두의 단어암기장 <small>쓰고 · 외우고 · 가리고 · 채점하고 · 공유하기 — 시안 v3</small></div> <div class="wa-hdr-actions"> <button class="wa-hdr-btn" id="wa-hdr-share" title="URL로 단어장 공유"> 공유</button> <button class="wa-hdr-btn" id="wa-hdr-tiny" title="짧은 링크 만들기">✂️ 짧은링크</button> <button class="wa-hdr-btn wa-hdr-btn-accent" id="wa-hdr-test" title="시험 만들기"> 테스트</button> </div> </div> <div class="wa-tabs" id="wa-tabs"> <div class="wa-tab wa-active" data-tab="edit">✏️ 입력</div> <div class="wa-tab" data-tab="card"> 카드</div> <div class="wa-tab" data-tab="hide"> 가리기</div> <div class="wa-tab" data-tab="quiz"> 퀴즈</div> <div class="wa-tab" data-tab="test"> 테스트</div> <div class="wa-tab" data-tab="stat"> 통계</div> </div> </div> <div class="wa-body"> <!-- EDIT TAB --> <div class="wa-tabpage" data-page="edit"> <div class="wa-panel"> <h3>일괄 붙여넣기</h3> <p class="wa-hint">한 줄에 「단어 + 구분기호 + 뜻」 형식으로 붙여넣으세요. 구분기호는 탭, 콤마(,), 대시(-), 콜론(:) 모두 인식합니다.<br>예) apple, 사과 / run - 달리다</p> <textarea class="wa-input" id="wa-bulk" placeholder="apple, 사과&#10;run - 달리다&#10;beautiful : 아름다운"></textarea> <div class="wa-row"> <button class="wa-btn" id="wa-bulk-add">목록에 추가</button> <button class="wa-btn wa-ghost" id="wa-bulk-clear">입력창 비우기</button> </div> </div> <div class="wa-panel"> <h3>한 개씩 추가</h3> <div class="wa-add-row"> <input class="wa-field" id="wa-single-word" placeholder="단어"> <input class="wa-field" id="wa-single-mean" placeholder="뜻"> <button class="wa-btn wa-accent wa-sm" id="wa-single-add" style="flex:none;">추가</button> </div> </div> <div class="wa-panel"> <h3>현재 단어장 (<span id="wa-count">0</span>개)</h3> <div class="wa-row" style="margin-top:0;"> <button class="wa-btn wa-ghost wa-sm" id="wa-sort-shuffle"> 순서 섞기</button> <button class="wa-btn wa-ghost wa-sm" id="wa-sort-az">가나다순</button> <button class="wa-btn wa-bad wa-sm" id="wa-clear-all">전체 삭제</button> </div> <div class="wa-wordlist" id="wa-wordlist"></div> </div> </div> <!-- CARD TAB --> <div class="wa-tabpage" data-page="card" style="display:none;"> <div class="wa-panel wa-card-wrap"> <div class="wa-stat-row"> <span id="wa-card-pos">0 / 0</span> <span>✅ <span id="wa-card-known">0</span> · <span id="wa-card-unknown">0</span></span> </div> <div class="wa-progress-bar"><div class="wa-progress-fill" id="wa-card-progress" style="width:0%;"></div></div> <div class="wa-card-stage" id="wa-card-stage"> <div class="wa-index-card" id="wa-index-card"> <div class="wa-card-face wa-front"> <div class="wa-card-holes"><span></span><span></span><span></span></div> <div class="wa-card-label">단어</div> <div class="wa-card-word" id="wa-card-front-text">단어를 먼저 입력해 주세요</div> <button class="wa-speak-btn wa-speak-lg" id="wa-card-speak" title="발음 듣기"> </button> <div class="wa-card-tip">탭하면 뜻이 보여요</div> </div> <div class="wa-card-face wa-back"> <div class="wa-card-holes"><span></span><span></span><span></span></div> <div class="wa-card-label">뜻</div> <div class="wa-card-meaning" id="wa-card-back-text">-</div> <div class="wa-card-tip">다시 탭하면 단어로</div> </div> </div> </div> <div class="wa-card-controls"> <button class="wa-btn wa-ghost wa-sm" id="wa-card-prev">◀ 이전</button> <button class="wa-btn wa-ghost wa-sm" id="wa-card-shuffle-toggle"> 랜덤 끄기</button> <button class="wa-btn wa-ghost wa-sm" id="wa-card-next">다음 ▶</button> </div> <div class="wa-know-row"> <button class="wa-btn wa-bad" id="wa-card-unknown-btn"> 모르는 단어</button> <button class="wa-btn wa-good" id="wa-card-known-btn">✅ 아는 단어</button> </div> </div> </div> <!-- HIDE TAB --> <div class="wa-tabpage" data-page="hide" style="display:none;"> <div class="wa-panel"> <h3>가리기 학습</h3> <div class="wa-hide-toolbar"> <select id="wa-hide-direction"> <option value="mean">뜻 가리기 (단어 보고 뜻 맞히기)</option> <option value="word">단어 가리기 (뜻 보고 단어 맞히기)</option> </select> <button class="wa-btn wa-ghost wa-sm" id="wa-hide-all">전체 가리기</button> <button class="wa-btn wa-ghost wa-sm" id="wa-show-all">전체 보이기</button> </div> <div id="wa-hidelist"></div> </div> </div> <!-- QUIZ TAB --> <div class="wa-tabpage" data-page="quiz" style="display:none;"> <div class="wa-panel" id="wa-quiz-panel"> <div id="wa-quiz-live"> <div class="wa-quiz-q">문제 <span id="wa-quiz-n">1</span> / <span id="wa-quiz-total">0</span> · 맞힌 개수 <span id="wa-quiz-score">0</span></div> <div class="wa-quiz-word"><span id="wa-quiz-word">단어장을 먼저 채워주세요</span> <button class="wa-speak-btn" id="wa-quiz-speak" title="발음 듣기" style="vertical-align:middle;margin-left:8px;"> </button> </div> <div id="wa-quiz-choices"></div> </div> <div id="wa-quiz-result" style="display:none;" class="wa-quiz-result"> <div class="wa-quiz-score"><span id="wa-quiz-final">0</span> / <span id="wa-quiz-final-total">0</span> <span>정답</span></div> <div class="wa-row" style="justify-content:center;"> <button class="wa-btn wa-accent" id="wa-quiz-restart"> 다시 풀기</button> <button class="wa-btn wa-bad" id="wa-quiz-retry-wrong">틀린 것만 다시</button> </div> <div class="wa-wrong-list" id="wa-quiz-wronglist"></div> </div> </div> <div class="wa-row" style="padding:0 2px 12px 2px;"> <button class="wa-btn wa-ghost wa-sm" id="wa-quiz-start">▶ 퀴즈 새로 시작</button> </div> </div> <!-- TEST TAB --> <div class="wa-tabpage" data-page="test" style="display:none;"> <!-- 1) ADMIN BUILDER VIEW --> <div id="wa-test-admin"> <div class="wa-panel"> <h3> 시험 만들기</h3> <p class="wa-hint">현재 단어장(<span id="wa-test-wordcount">0</span>개)으로 시험지를 만들어요. 응시자는 이름을 적고 제한시간 안에 뜻(또는 단어)을 입력하고, 종료되면 결과가 자동 채점돼요.</p> <div class="wa-add-row" style="flex-direction:column;align-items:stretch;"> <input class="wa-field" id="wa-test-title" placeholder="시험 제목 (예: 7월 3주차 영단어 시험)" value="단어 시험"> <div class="wa-row" style="margin-top:8px;"> <input class="wa-field" id="wa-test-minutes" type="number" min="1" max="120" value="5" style="width:90px;"> <span style="font-size:12px;color:var(--wa-sub);align-self:center;">분 제한시간</span> <select id="wa-test-direction" style="border:1px solid var(--wa-line);border-radius:8px;padding:8px;font-size:12px;"> <option value="mean">단어 보고 뜻 쓰기</option> <option value="word">뜻 보고 단어 쓰기</option> </select> </div> <input class="wa-field" id="wa-test-email" type="email" placeholder="결과를 받을 이메일 주소" style="margin-top:8px;"> </div> <div class="wa-row"> <button class="wa-btn wa-accent" id="wa-test-build"> 시험 링크 만들기</button> <button class="wa-btn wa-ghost" id="wa-test-preview"> 미리 응시해보기</button> </div> </div> </div> <!-- 2) PARTICIPANT: COVER --> <div id="wa-test-cover" style="display:none;"> <div class="wa-panel wa-exam-cover"> <div class="wa-exam-kicker">단어 시험</div> <h2 class="wa-exam-title" id="wa-exam-title">단어 시험</h2> <p class="wa-exam-desc"> 총 <b id="wa-exam-count">0</b>문항 · 제한시간 <b id="wa-exam-minutes">5</b>분<br> 시작하면 타이머가 바로 진행돼요. 시간이 끝나면 입력이 자동으로 잠기고 결과가 채점됩니다. </p> <div class="wa-add-row" style="flex-direction:column;align-items:stretch;max-width:320px;margin:0 auto;"> <input class="wa-field" id="wa-exam-name" placeholder="이름 (필수)"> <input class="wa-field" id="wa-exam-info" placeholder="소속 · 학번 등 (선택)" style="margin-top:8px;"> </div> <button class="wa-btn wa-accent" id="wa-exam-start" style="margin-top:16px;padding:12px 28px;font-size:15px;">시험 시작</button> <div id="wa-exam-exit-preview" style="display:none;margin-top:14px;"> <a href="#" id="wa-exam-exit-link" style="font-size:12px;color:var(--wa-sub);text-decoration:underline;">← 미리보기 종료하고 관리자 화면으로</a> </div> </div> </div> <!-- 3) PARTICIPANT: COUNTDOWN --> <div id="wa-test-countdown" style="display:none;"> <div class="wa-panel wa-exam-cover"> <div class="wa-exam-countdown" id="wa-exam-countdown-num">3</div> <p class="wa-exam-desc">시험이 곧 시작됩니다</p> </div> </div> <!-- 4) PARTICIPANT: IN PROGRESS --> <div id="wa-test-live" style="display:none;"> <div class="wa-exam-timerbar-wrap"> <div class="wa-exam-timerbar" id="wa-exam-timerbar"></div> </div> <div class="wa-exam-timer-row"> <span id="wa-exam-taker-label">응시자</span> <span class="wa-exam-clock" id="wa-exam-clock">05:00</span> </div> <div class="wa-panel"> <div id="wa-exam-questions"></div> <div class="wa-row" style="justify-content:center;margin-top:6px;"> <button class="wa-btn wa-good" id="wa-exam-submit" style="padding:12px 26px;">제출하기</button> </div> </div> </div> <!-- 5) PARTICIPANT: RESULT --> <div id="wa-test-result" style="display:none;"> <div class="wa-panel" style="text-align:center;"> <div class="wa-exam-kicker">수고하셨습니다</div> <div class="wa-quiz-score"><span id="wa-exam-score">0</span> / <span id="wa-exam-total">0</span> <span>정답</span></div> <p class="wa-exam-desc" id="wa-exam-result-name">-</p> <div class="wa-row" style="justify-content:center;"> <button class="wa-btn wa-accent" id="wa-exam-send-mail"> 결과 이메일로 보내기</button> <button class="wa-btn wa-ghost" id="wa-exam-copy">결과 복사</button> </div> <div class="wa-wrong-list" id="wa-exam-review" style="text-align:left;margin-top:16px;"></div> </div> </div> </div> <!-- STAT TAB --> <div class="wa-tabpage" data-page="stat" style="display:none;"> <div class="wa-panel"> <h3>학습 현황</h3> <div class="wa-stat-grid"> <div class="wa-stat-box"><div class="n" id="wa-stat-total">0</div><div class="l">전체 단어</div></div> <div class="wa-stat-box"><div class="n" id="wa-stat-known">0</div><div class="l">아는 단어</div></div> <div class="wa-stat-box"><div class="n" id="wa-stat-unknown">0</div><div class="l">모르는 단어</div></div> </div> <div class="wa-stat-grid"> <div class="wa-stat-box"><div class="n" id="wa-stat-quiz">-</div><div class="l">최근 퀴즈 점수</div></div> <div class="wa-stat-box"><div class="n" id="wa-stat-rate">-</div><div class="l">정답률</div></div> <div class="wa-stat-box"><div class="n" id="wa-stat-date">-</div><div class="l">마지막 학습</div></div> </div> <button class="wa-btn wa-ghost wa-sm" id="wa-stat-reset">학습기록 초기화 (단어는 유지)</button> </div> </div> </div> <div class="wa-footer"> <button class="wa-btn wa-ghost wa-sm" id="wa-save"> 저장</button> <button class="wa-btn wa-ghost wa-sm" id="wa-load"> 불러오기</button> <button class="wa-btn wa-ghost wa-sm" id="wa-qr"> QR코드</button> <button class="wa-btn wa-ghost wa-sm" id="wa-export-csv">⬇ CSV 내보내기</button> <label class="wa-btn wa-ghost wa-sm" style="margin:0;">⬆ CSV 가져오기 <input type="file" id="wa-import-csv" accept=".csv,.txt" style="display:none;"> </label> <div class="wa-wm">모두의 단어암기장 · 0-1.kr/29 · 스타트업EX</div> </div> </div> <div class="wa-toast" id="wa-toast"></div> <div class="wa-modal-bg" id="wa-modal-bg"> <div class="wa-modal"> <h4 id="wa-modal-title">공유</h4> <div id="wa-modal-body"></div> <div class="wa-row" style="justify-content:center;"> <button class="wa-btn wa-ghost wa-sm" id="wa-modal-close">닫기</button> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script> (function(){ "use strict"; var STORAGE_KEY = "wa_wordbook_v1"; var root = document.getElementById("wa-root"); var state = { words: [], // [{w:'apple', m:'사과', known:null}] cardOrder: [], cardIdx: 0, cardShuffle: true, cardKnownCount: 0, cardUnknownCount: 0, quiz: {active:false, order:[], idx:0, score:0, wrong:[], direction:'mean'}, hideDirection: 'mean', lastQuizScore: null, lastQuizTotal: null, lastStudyDate: null, test: { isParticipant: false, // true when this page was opened as an exam link (?test=...) or preview payload: null, // { t: title, mn: minutes, dir: 'mean'|'word', em: email, w: [[word,mean],...] } order: [], // shuffled question indices into payload.w answers: [], // participant's typed answers, aligned with order name: '', info: '', totalSeconds: 0, remaining: 0, timerHandle: null, score: 0, submitted: false } }; // ---------- helpers ---------- function $(id){ return document.getElementById(id); } function esc(s){ return String(s).replace(/[&<>"']/g, function(c){ return {"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]; }); } function toast(msg){ var t = $("wa-toast"); t.textContent = msg; t.className = "wa-toast wa-show"; setTimeout(function(){ t.className = "wa-toast"; }, 1800); } function shuffleArray(arr){ var a = arr.slice(); for (var i = a.length - 1; i > 0; i--){ var j = Math.floor(Math.random() * (i + 1)); var tmp = a[i]; a[i] = a[j]; a[j] = tmp; } return a; } function todayStr(){ var d = new Date(); return (d.getMonth()+1) + "/" + d.getDate(); } function speak(text){ if (!text) return; if (!("speechSynthesis" in window)){ toast("이 브라우저는 음성 재생을 지원하지 않아요"); return; } try{ window.speechSynthesis.cancel(); var utter = new SpeechSynthesisUtterance(text); var isKorean = /[\uAC00-\uD7A3]/.test(text); utter.lang = isKorean ? "ko-KR" : "en-US"; utter.rate = 0.92; window.speechSynthesis.speak(utter); }catch(e){ toast("발음 재생에 실패했어요"); } } // ---------- parsing ---------- function parseLine(line){ line = line.replace(/\s+$/,''); if (!line) return null; var m = line.split(/\t|\s-\s|\s:\s|,|:|-/); if (m.length < 2){ // fallback: try splitting on first whitespace run if long enough var idx = line.search(/\s{2,}/); if (idx > -1){ return { w: line.slice(0, idx).trim(), m: line.slice(idx).trim() }; } return null; } var w = m[0].trim(); var rest = line.slice(line.indexOf(m[0]) + m[0].length); rest = rest.replace(/^\s*[,:\-]\s*/, ''); if (!w || !rest) return null; return { w: w, m: rest.trim() }; } function addWord(w, m){ if (!w || !m) return false; state.words.push({ w: w, m: m, known: null }); return true; } // ---------- render: word list (edit tab) ---------- function renderWordList(){ var list = $("wa-wordlist"); $("wa-count").textContent = state.words.length; if (state.words.length === 0){ list.innerHTML = '<div class="wa-empty">아직 등록된 단어가 없어요.<br>위에서 붙여넣거나 하나씩 추가해 보세요.</div>'; return; } var html = ""; for (var i = 0; i < state.words.length; i++){ var it = state.words[i]; html += '<div class="wa-wordrow"><span class="wa-idx">' + (i+1) + '</span>' + '<span class="wa-w">' + esc(it.w) + '</span>' + '<span class="wa-m">' + esc(it.m) + '</span>' + '<button class="wa-del" data-idx="' + i + '" title="삭제">✕</button></div>'; } list.innerHTML = html; var dels = list.querySelectorAll(".wa-del"); for (var k = 0; k < dels.length; k++){ dels[k].addEventListener("click", function(e){ var idx = parseInt(e.target.getAttribute("data-idx"), 10); state.words.splice(idx, 1); renderAll(); }); } } // ---------- CARD MODE ---------- function buildCardOrder(){ var idxs = []; for (var i = 0; i < state.words.length; i++) idxs.push(i); state.cardOrder = state.cardShuffle ? shuffleArray(idxs) : idxs; state.cardIdx = 0; } function renderCard(){ var el = $("wa-index-card"); el.className = "wa-index-card"; var total = state.cardOrder.length; if (total === 0){ $("wa-card-front-text").textContent = "단어를 먼저 입력해 주세요"; $("wa-card-back-text").textContent = "-"; $("wa-card-pos").textContent = "0 / 0"; $("wa-card-progress").style.width = "0%"; return; } if (state.cardIdx >= total) state.cardIdx = 0; var word = state.words[state.cardOrder[state.cardIdx]]; $("wa-card-front-text").textContent = word.w; $("wa-card-back-text").textContent = word.m; $("wa-card-pos").textContent = (state.cardIdx + 1) + " / " + total; $("wa-card-progress").style.width = Math.round(((state.cardIdx+1)/total) * 100) + "%"; updateCardCounts(); } function updateCardCounts(){ var known = 0, unknown = 0; for (var i = 0; i < state.words.length; i++){ if (state.words[i].known === true) known++; else if (state.words[i].known === false) unknown++; } $("wa-card-known").textContent = known; $("wa-card-unknown").textContent = unknown; } function cardNext(){ if (state.cardOrder.length === 0) return; state.cardIdx = (state.cardIdx + 1) % state.cardOrder.length; renderCard(); } function cardPrev(){ if (state.cardOrder.length === 0) return; state.cardIdx = (state.cardIdx - 1 + state.cardOrder.length) % state.cardOrder.length; renderCard(); } function markCurrent(known){ if (state.cardOrder.length === 0) return; var w = state.words[state.cardOrder[state.cardIdx]]; w.known = known; state.lastStudyDate = todayStr(); updateCardCounts(); cardNext(); } // ---------- HIDE MODE ---------- function renderHide(){ var list = $("wa-hidelist"); if (state.words.length === 0){ list.innerHTML = '<div class="wa-empty">단어를 먼저 입력해 주세요.</div>'; return; } var dir = $("wa-hide-direction").value; state.hideDirection = dir; var html = ""; for (var i = 0; i < state.words.length; i++){ var it = state.words[i]; var frontText = dir === 'mean' ? it.w : it.m; var maskText = dir === 'mean' ? it.m : it.w; html += '<div class="wa-hiderow">' + '<span class="wa-idx">' + (i+1) + '</span>' + '<button class="wa-speak-btn" data-say="' + esc(frontText) + '"> </button>' + '<span class="wa-front">' + esc(frontText) + '</span>' + '<span class="wa-mask" data-idx="' + i + '">' + esc(maskText) + '</span>' + '</div>'; } list.innerHTML = html; var masks = list.querySelectorAll(".wa-mask"); for (var k = 0; k < masks.length; k++){ masks[k].addEventListener("click", function(e){ e.currentTarget.classList.toggle("wa-shown"); }); } var speakBtns = list.querySelectorAll(".wa-speak-btn"); for (var s = 0; s < speakBtns.length; s++){ speakBtns[s].addEventListener("click", function(e){ e.stopPropagation(); speak(e.currentTarget.getAttribute("data-say")); }); } } // ---------- QUIZ MODE ---------- function startQuiz(onlyIdxs){ var pool = onlyIdxs || (function(){ var a = []; for (var i=0;i<state.words.length;i++) a.push(i); return a; })(); if (pool.length < 2){ toast("퀴즈를 만들려면 단어가 2개 이상 필요해요"); return; } state.quiz.active = true; state.quiz.order = shuffleArray(pool); state.quiz.idx = 0; state.quiz.score = 0; state.quiz.wrong = []; $("wa-quiz-live").style.display = ""; $("wa-quiz-result").style.display = "none"; renderQuizQuestion(); } function renderQuizQuestion(){ var q = state.quiz; var total = q.order.length; $("wa-quiz-total").textContent = total; $("wa-quiz-score").textContent = q.score; if (q.idx >= total){ finishQuiz(); return; } $("wa-quiz-n").textContent = q.idx + 1; var correctIdx = q.order[q.idx]; var item = state.words[correctIdx]; $("wa-quiz-word").textContent = item.w; $("wa-quiz-speak").setAttribute("data-say", item.w); // build 4 choices (1 correct + up to 3 distractors) var others = []; for (var i = 0; i < state.words.length; i++){ if (i !== correctIdx) others.push(i); } others = shuffleArray(others).slice(0, 3); var choiceIdxs = shuffleArray([correctIdx].concat(others)); var box = $("wa-quiz-choices"); box.innerHTML = ""; for (var c = 0; c < choiceIdxs.length; c++){ var btn = document.createElement("button"); btn.className = "wa-choice"; btn.textContent = state.words[choiceIdxs[c]].m; btn.setAttribute("data-correct", choiceIdxs[c] === correctIdx ? "1" : "0"); btn.setAttribute("data-word-idx", correctIdx); btn.addEventListener("click", onChoiceClick); box.appendChild(btn); } } function onChoiceClick(e){ var btn = e.currentTarget; var allBtns = $("wa-quiz-choices").querySelectorAll(".wa-choice"); for (var i = 0; i < allBtns.length; i++) allBtns[i].disabled = true; var isCorrect = btn.getAttribute("data-correct") === "1"; var wordIdx = parseInt(btn.getAttribute("data-word-idx"), 10); if (isCorrect){ btn.classList.add("wa-correct"); state.quiz.score++; } else { btn.classList.add("wa-wrong"); for (var j = 0; j < allBtns.length; j++){ if (allBtns[j].getAttribute("data-correct") === "1") allBtns[j].classList.add("wa-correct"); } if (state.quiz.wrong.indexOf(wordIdx) === -1) state.quiz.wrong.push(wordIdx); } setTimeout(function(){ state.quiz.idx++; renderQuizQuestion(); }, 700); } function finishQuiz(){ $("wa-quiz-live").style.display = "none"; var res = $("wa-quiz-result"); res.style.display = ""; $("wa-quiz-final").textContent = state.quiz.score; $("wa-quiz-final-total").textContent = state.quiz.order.length; state.lastQuizScore = state.quiz.score; state.lastQuizTotal = state.quiz.order.length; state.lastStudyDate = todayStr(); var wl = $("wa-quiz-wronglist"); if (state.quiz.wrong.length === 0){ wl.innerHTML = '<div class="wa-empty"> 모두 맞혔어요!</div>'; $("wa-quiz-retry-wrong").disabled = true; } else { var html = '<h3 style="margin-top:14px;">틀린 단어 (' + state.quiz.wrong.length + ')</h3>'; for (var i = 0; i < state.quiz.wrong.length; i++){ var it = state.words[state.quiz.wrong[i]]; html += '<div class="wa-wordrow"><span class="wa-w">' + esc(it.w) + '</span><span class="wa-m">' + esc(it.m) + '</span></div>'; } wl.innerHTML = html; $("wa-quiz-retry-wrong").disabled = false; } saveStudyMeta(); } // ---------- STATS ---------- function renderStats(){ var known = 0, unknown = 0; for (var i = 0; i < state.words.length; i++){ if (state.words[i].known === true) known++; else if (state.words[i].known === false) unknown++; } $("wa-stat-total").textContent = state.words.length; $("wa-stat-known").textContent = known; $("wa-stat-unknown").textContent = unknown; $("wa-stat-quiz").textContent = state.lastQuizScore !== null ? (state.lastQuizScore + " / " + state.lastQuizTotal) : "-"; $("wa-stat-rate").textContent = (state.lastQuizScore !== null && state.lastQuizTotal) ? Math.round(state.lastQuizScore / state.lastQuizTotal * 100) + "%" : "-"; $("wa-stat-date").textContent = state.lastStudyDate || "-"; } // ---------- TABS ---------- function switchTab(name){ var tabs = document.querySelectorAll(".wa-tab"); for (var i = 0; i < tabs.length; i++){ tabs[i].classList.toggle("wa-active", tabs[i].getAttribute("data-tab") === name); } var pages = document.querySelectorAll(".wa-tabpage"); for (var j = 0; j < pages.length; j++){ pages[j].style.display = pages[j].getAttribute("data-page") === name ? "" : "none"; } if (name === "card"){ buildCardOrder(); renderCard(); } if (name === "hide"){ renderHide(); } if (name === "stat"){ renderStats(); } if (name === "quiz" && !state.quiz.active){ startQuiz(); state.quiz.active = true; } if (name === "test"){ if (state.test.isParticipant){ // leave whichever exam sub-screen is already active as-is } else { refreshTestAdmin(); showTestSubview("admin"); } } } // ---------- SAVE / LOAD / SHARE ---------- function saveStudyMeta(){ try{ var meta = { lastQuizScore: state.lastQuizScore, lastQuizTotal: state.lastQuizTotal, lastStudyDate: state.lastStudyDate }; localStorage.setItem(STORAGE_KEY + "_meta", JSON.stringify(meta)); }catch(e){} } function saveToLocal(){ try{ localStorage.setItem(STORAGE_KEY, JSON.stringify(state.words)); saveStudyMeta(); toast("이 브라우저에 저장했어요 (" + state.words.length + "개)"); }catch(e){ toast("저장에 실패했어요"); } } function loadFromLocal(){ try{ var raw = localStorage.getItem(STORAGE_KEY); if (!raw){ toast("저장된 단어장이 없어요"); return; } state.words = JSON.parse(raw); var metaRaw = localStorage.getItem(STORAGE_KEY + "_meta"); if (metaRaw){ var meta = JSON.parse(metaRaw); state.lastQuizScore = meta.lastQuizScore; state.lastQuizTotal = meta.lastQuizTotal; state.lastStudyDate = meta.lastStudyDate; } renderAll(); toast("단어장을 불러왔어요 (" + state.words.length + "개)"); }catch(e){ toast("불러오기에 실패했어요"); } } function buildShareURL(){ var payload = state.words.map(function(w){ return [w.w, w.m]; }); var compressed = LZString.compressToEncodedURIComponent(JSON.stringify(payload)); var base = location.href.split("?")[0].split("#")[0]; return base + "?d=" + compressed; } function loadFromURLIfPresent(){ var params = new URLSearchParams(location.search); var d = params.get("d"); if (!d) return false; try{ var json = LZString.decompressFromEncodedURIComponent(d); var arr = JSON.parse(json); if (!arr || !arr.length) return false; state.words = arr.map(function(pair){ return { w: pair[0], m: pair[1], known: null }; }); return true; }catch(e){ return false; } } function openModal(title, bodyHTML){ $("wa-modal-title").textContent = title; $("wa-modal-body").innerHTML = bodyHTML; $("wa-modal-bg").className = "wa-modal-bg wa-show"; } function closeModal(){ $("wa-modal-bg").className = "wa-modal-bg"; $("wa-modal-body").innerHTML = ""; } function shareURL(){ if (state.words.length === 0){ toast("공유할 단어가 없어요"); return; } var url = buildShareURL(); openModal("URL 공유", '<input class="wa-field" id="wa-share-url-field" readonly value="' + esc(url) + '"><p style="font-size:11px;color:var(--wa-sub);margin-top:8px;">이 링크를 열면 같은 단어장이 그대로 로드됩니다.</p>'); setTimeout(function(){ var f = $("wa-share-url-field"); if (f){ f.addEventListener("click", function(){ f.select(); try{ document.execCommand("copy"); toast("복사했어요"); }catch(e){} }); } }, 50); } function showQR(){ if (state.words.length === 0){ toast("QR로 만들 단어가 없어요"); return; } var url = buildShareURL(); openModal("QR 코드", '<div id="wa-qr-box" style="display:flex;justify-content:center;"></div>'); setTimeout(function(){ var box = $("wa-qr-box"); if (box && window.QRCode){ new QRCode(box, { text: url, width: 180, height: 180 }); } else if (box){ box.innerHTML = '<p style="font-size:12px;color:var(--wa-sub);">QR 라이브러리를 불러오지 못했어요. URL 공유를 이용해 주세요.</p>'; } }, 50); } function exportCSV(){ if (state.words.length === 0){ toast("내보낼 단어가 없어요"); return; } var lines = ["단어,뜻"]; for (var i = 0; i < state.words.length; i++){ lines.push('"' + state.words[i].w.replace(/"/g,'""') + '","' + state.words[i].m.replace(/"/g,'""') + '"'); } var csv = lines.join("\n"); var blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8;" }); var link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = "단어암기장_" + todayStr().replace("/","-") + ".csv"; document.body.appendChild(link); link.click(); document.body.removeChild(link); toast("CSV로 내보냈어요"); } function importCSV(file){ var reader = new FileReader(); reader.onload = function(e){ var text = e.target.result.replace(/^\uFEFF/, ''); var lines = text.split(/\r?\n/); var added = 0; for (var i = 0; i < lines.length; i++){ var line = lines[i]; if (!line || /^단어\s*,\s*뜻/.test(line)) continue; var parts = line.match(/(?:"([^"]*)"|([^,]+))\s*,\s*(?:"([^"]*)"|([^,]+))/); var w, m; if (parts){ w = (parts[1] !== undefined ? parts[1] : parts[2] || "").trim(); m = (parts[3] !== undefined ? parts[3] : parts[4] || "").trim(); } else { var p = parseLine(line); if (p){ w = p.w; m = p.m; } } if (w && m){ addWord(w, m); added++; } } renderAll(); toast(added + "개 단어를 가져왔어요"); }; reader.readAsText(file, "UTF-8"); } // ---------- TINYURL ---------- function shortenURL(longUrl, cb){ fetch("https://tinyurl.com/api-create.php?url=" + encodeURIComponent(longUrl)) .then(function(r){ if (!r.ok) throw new Error("bad status"); return r.text(); }) .then(function(text){ text = (text || "").trim(); if (text.indexOf("http") === 0) cb(text); else cb(null); }) .catch(function(){ cb(null); }); } function tinyModal(longUrl){ openModal("짧은 링크", '<p style="font-size:12px;color:var(--wa-sub);">TinyURL로 줄이는 중...</p>'); shortenURL(longUrl, function(short){ if (short){ openModal("짧은 링크", '<input class="wa-field" id="wa-tiny-field" readonly value="' + esc(short) + '">' + '<p style="font-size:11px;color:var(--wa-sub);margin-top:8px;">탭하면 복사돼요.</p>'); setTimeout(function(){ var f = $("wa-tiny-field"); if (f) f.addEventListener("click", function(){ f.select(); try{ document.execCommand("copy"); toast("복사했어요"); }catch(e){} }); }, 50); } else { openModal("짧은 링크", '<p style="font-size:12px;color:var(--wa-sub);">짧은 링크 생성에 실패했어요. 원본 링크를 이용해 주세요.</p>' + '<input class="wa-field" readonly value="' + esc(longUrl) + '">'); } }); } // ---------- TEST / EXAM MODE ---------- function encodeTestPayload(p){ return LZString.compressToEncodedURIComponent(JSON.stringify(p)); } function decodeTestPayload(str){ try{ var json = LZString.decompressFromEncodedURIComponent(str); var p = JSON.parse(json); if (!p || !p.w || !p.w.length) return null; return p; }catch(e){ return null; } } function showTestSubview(name){ var ids = ["wa-test-admin","wa-test-cover","wa-test-countdown","wa-test-live","wa-test-result"]; for (var i = 0; i < ids.length; i++){ $(ids[i]).style.display = (ids[i] === "wa-test-" + name) ? "" : "none"; } } function refreshTestAdmin(){ $("wa-test-wordcount").textContent = state.words.length; } function buildTestPayloadFromAdmin(){ var title = $("wa-test-title").value.trim() || "단어 시험"; var minutes = parseInt($("wa-test-minutes").value, 10); if (!minutes || minutes < 1) minutes = 5; var direction = $("wa-test-direction").value; var email = $("wa-test-email").value.trim(); if (state.words.length === 0){ toast("먼저 단어를 등록해 주세요"); return null; } return { t: title, mn: minutes, dir: direction, em: email, w: state.words.map(function(w){ return [w.w, w.m]; }) }; } function adminBuildTestLink(){ var payload = buildTestPayloadFromAdmin(); if (!payload) return; if (!payload.em || payload.em.indexOf("@") === -1){ toast("결과를 받을 이메일을 정확히 입력해 주세요"); return; } var base = location.href.split("?")[0].split("#")[0]; var url = base + "?test=" + encodeTestPayload(payload); openModal(" 시험 링크", '<input class="wa-field" id="wa-test-url-field" readonly value="' + esc(url) + '">' + '<p style="font-size:11px;color:var(--wa-sub);margin:8px 0;">이 링크를 응시자에게 보내주세요. 결과는 응시자 이메일 앱을 통해 ' + esc(payload.em) + ' 로 전송됩니다.</p>' + '<div class="wa-row" style="justify-content:center;"><button class="wa-btn wa-ghost wa-sm" id="wa-test-url-tiny">✂️ 짧은 링크로</button></div>'); setTimeout(function(){ var f = $("wa-test-url-field"); if (f) f.addEventListener("click", function(){ f.select(); try{ document.execCommand("copy"); toast("복사했어요"); }catch(e){} }); var tinyBtn = $("wa-test-url-tiny"); if (tinyBtn) tinyBtn.addEventListener("click", function(){ tinyModal(url); }); }, 50); } function enterParticipantMode(payload){ state.test.payload = payload; state.test.isParticipant = true; $("wa-exam-title").textContent = payload.t; $("wa-exam-count").textContent = payload.w.length; $("wa-exam-minutes").textContent = payload.mn; $("wa-exam-exit-preview").style.display = state.test.isPreview ? "" : "none"; root.classList.add("wa-participant-mode"); switchTab("test"); showTestSubview("cover"); } function previewTest(){ var payload = buildTestPayloadFromAdmin(); if (!payload) return; state.test.isPreview = true; enterParticipantMode(payload); } function exitPreview(){ state.test.isParticipant = false; state.test.isPreview = false; if (state.test.timerHandle) clearInterval(state.test.timerHandle); root.classList.remove("wa-participant-mode"); switchTab("test"); } function startExamCountdown(){ var name = $("wa-exam-name").value.trim(); if (!name){ toast("이름을 입력해 주세요"); return; } state.test.name = name; state.test.info = $("wa-exam-info").value.trim(); showTestSubview("countdown"); var n = 3; $("wa-exam-countdown-num").textContent = n; var iv = setInterval(function(){ n--; if (n <= 0){ clearInterval(iv); beginExamLive(); } else { $("wa-exam-countdown-num").textContent = n; } }, 700); } function beginExamLive(){ var payload = state.test.payload; var idxs = []; for (var i = 0; i < payload.w.length; i++) idxs.push(i); state.test.order = shuffleArray(idxs); state.test.answers = []; for (var qi = 0; qi < state.test.order.length; qi++) state.test.answers.push(""); state.test.submitted = false; state.test.totalSeconds = payload.mn * 60; state.test.remaining = state.test.totalSeconds; $("wa-exam-taker-label").textContent = state.test.name + (state.test.info ? " · " + state.test.info : ""); renderExamQuestions(); updateExamClock(); showTestSubview("live"); if (state.test.timerHandle) clearInterval(state.test.timerHandle); state.test.timerHandle = setInterval(function(){ state.test.remaining--; updateExamClock(); if (state.test.remaining <= 0){ clearInterval(state.test.timerHandle); submitExam(true); } }, 1000); } function updateExamClock(){ var r = Math.max(0, state.test.remaining); var mm = Math.floor(r / 60); var ss = r % 60; $("wa-exam-clock").textContent = (mm < 10 ? "0" + mm : mm) + ":" + (ss < 10 ? "0" + ss : ss); var pct = Math.max(0, (r / state.test.totalSeconds) * 100); var bar = $("wa-exam-timerbar"); bar.style.width = pct + "%"; bar.classList.toggle("wa-time-low", pct <= 20); } function renderExamQuestions(){ var payload = state.test.payload; var box = $("wa-exam-questions"); var html = ""; for (var i = 0; i < state.test.order.length; i++){ var pair = payload.w[state.test.order[i]]; var front = payload.dir === "mean" ? pair[0] : pair[1]; html += '<div class="wa-exam-q">' + '<div class="wa-exam-q-num">문항 ' + (i+1) + '</div>' + '<div class="wa-exam-q-word">' + esc(front) + ' <button class="wa-speak-btn" data-say="' + esc(front) + '" style="vertical-align:middle;"> </button></div>' + '<input type="text" data-qidx="' + i + '" autocomplete="off">' + '</div>'; } box.innerHTML = html; var inputs = box.querySelectorAll("input"); for (var j = 0; j < inputs.length; j++){ inputs[j].addEventListener("input", function(e){ var idx = parseInt(e.target.getAttribute("data-qidx"), 10); state.test.answers[idx] = e.target.value; }); } var speakBtns = box.querySelectorAll(".wa-speak-btn"); for (var s = 0; s < speakBtns.length; s++){ speakBtns[s].addEventListener("click", function(e){ e.stopPropagation(); speak(e.currentTarget.getAttribute("data-say")); }); } } function normalize(s){ return String(s || "").trim().toLowerCase().replace(/\s+/g," "); } function submitExam(){ if (state.test.submitted) return; state.test.submitted = true; if (state.test.timerHandle) clearInterval(state.test.timerHandle); var inputs = document.querySelectorAll("#wa-exam-questions input"); for (var i = 0; i < inputs.length; i++) inputs[i].disabled = true; var payload = state.test.payload; var score = 0; var reviewHTML = ""; for (var q = 0; q < state.test.order.length; q++){ var pair = payload.w[state.test.order[q]]; var correctAnswer = payload.dir === "mean" ? pair[1] : pair[0]; var frontText = payload.dir === "mean" ? pair[0] : pair[1]; var given = state.test.answers[q] || ""; var ok = normalize(given) === normalize(correctAnswer); if (ok) score++; reviewHTML += '<div class="wa-exam-review-row">' + '<span class="wa-tag ' + (ok ? "ok" : "no") + '">' + (ok ? "정답" : "오답") + '</span>' + '<span style="flex:1;"><b>' + esc(frontText) + '</b> — 응답: ' + esc(given || "(미입력)") + (ok ? "" : ' · 정답: ' + esc(correctAnswer)) + '</span></div>'; } state.test.score = score; $("wa-exam-score").textContent = score; $("wa-exam-total").textContent = state.test.order.length; $("wa-exam-result-name").innerHTML = esc(state.test.name) + (state.test.info ? " · " + esc(state.test.info) : "") + "<br>" + esc(payload.t); $("wa-exam-review").innerHTML = reviewHTML; showTestSubview("result"); } function buildExamResultText(){ var payload = state.test.payload; var lines = []; lines.push(payload.t + " 응시 결과"); lines.push("이름: " + state.test.name + (state.test.info ? " (" + state.test.info + ")" : "")); lines.push("점수: " + state.test.score + " / " + state.test.order.length); lines.push(""); for (var q = 0; q < state.test.order.length; q++){ var pair = payload.w[state.test.order[q]]; var correctAnswer = payload.dir === "mean" ? pair[1] : pair[0]; var frontText = payload.dir === "mean" ? pair[0] : pair[1]; var given = state.test.answers[q] || "(미입력)"; lines.push((q+1) + ". " + frontText + " → 응답: " + given + " / 정답: " + correctAnswer); } return lines.join("\n"); } function sendExamMail(){ var payload = state.test.payload; var text = buildExamResultText(); var subject = payload.t + " 응시결과 - " + state.test.name; var mailto = "mailto:" + encodeURIComponent(payload.em || "") + "?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(text); window.location.href = mailto; } function copyExamResult(){ var text = buildExamResultText(); var ta = document.createElement("textarea"); ta.value = text; ta.style.position = "fixed"; ta.style.opacity = "0"; document.body.appendChild(ta); ta.select(); try{ document.execCommand("copy"); toast("결과를 복사했어요"); }catch(e){ toast("복사에 실패했어요"); } document.body.removeChild(ta); } function detectTestParam(){ var params = new URLSearchParams(location.search); var t = params.get("test"); if (!t) return false; var payload = decodeTestPayload(t); if (!payload) return false; enterParticipantMode(payload); return true; } // ---------- render all ---------- function renderAll(){ renderWordList(); buildCardOrder(); renderCard(); renderHide(); renderStats(); } // ---------- events ---------- document.getElementById("wa-tabs").addEventListener("click", function(e){ var tab = e.target.closest ? e.target.closest(".wa-tab") : null; if (!tab) return; switchTab(tab.getAttribute("data-tab")); }); $("wa-bulk-add").addEventListener("click", function(){ var text = $("wa-bulk").value; var lines = text.split(/\n/); var added = 0; for (var i = 0; i < lines.length; i++){ var p = parseLine(lines[i]); if (p && addWord(p.w, p.m)) added++; } if (added > 0){ $("wa-bulk").value = ""; renderAll(); toast(added + "개 단어를 추가했어요"); } else { toast("인식된 단어가 없어요. 형식을 확인해 주세요"); } }); $("wa-bulk-clear").addEventListener("click", function(){ $("wa-bulk").value = ""; }); $("wa-single-add").addEventListener("click", function(){ var w = $("wa-single-word").value.trim(); var m = $("wa-single-mean").value.trim(); if (addWord(w, m)){ $("wa-single-word").value = ""; $("wa-single-mean").value = ""; $("wa-single-word").focus(); renderAll(); } else { toast("단어와 뜻을 모두 입력해 주세요"); } }); $("wa-single-mean").addEventListener("keydown", function(e){ if (e.key === "Enter") $("wa-single-add").click(); }); $("wa-sort-shuffle").addEventListener("click", function(){ state.words = shuffleArray(state.words); renderAll(); }); $("wa-sort-az").addEventListener("click", function(){ state.words.sort(function(a,b){ return a.w.localeCompare(b.w); }); renderAll(); }); $("wa-clear-all").addEventListener("click", function(){ if (state.words.length === 0) return; if (confirm("전체 단어를 삭제할까요? 되돌릴 수 없어요.")){ state.words = []; renderAll(); } }); $("wa-card-next").addEventListener("click", cardNext); $("wa-card-prev").addEventListener("click", cardPrev); $("wa-index-card").addEventListener("click", function(){ this.classList.toggle("wa-flipped"); }); $("wa-card-speak").addEventListener("click", function(e){ e.stopPropagation(); var order = state.cardOrder; if (order.length === 0) return; speak(state.words[order[state.cardIdx]].w); }); $("wa-quiz-speak").addEventListener("click", function(e){ e.stopPropagation(); speak(e.currentTarget.getAttribute("data-say")); }); $("wa-card-known-btn").addEventListener("click", function(){ markCurrent(true); }); $("wa-card-unknown-btn").addEventListener("click", function(){ markCurrent(false); }); $("wa-card-shuffle-toggle").addEventListener("click", function(){ state.cardShuffle = !state.cardShuffle; this.textContent = state.cardShuffle ? " 랜덤 끄기" : "➡ 랜덤 켜기"; buildCardOrder(); renderCard(); }); $("wa-hide-direction").addEventListener("change", renderHide); $("wa-hide-all").addEventListener("click", function(){ var masks = document.querySelectorAll(".wa-mask"); for (var i=0;i<masks.length;i++) masks[i].classList.remove("wa-shown"); }); $("wa-show-all").addEventListener("click", function(){ var masks = document.querySelectorAll(".wa-mask"); for (var i=0;i<masks.length;i++) masks[i].classList.add("wa-shown"); }); $("wa-quiz-start").addEventListener("click", function(){ startQuiz(); }); $("wa-quiz-restart").addEventListener("click", function(){ startQuiz(); }); $("wa-quiz-retry-wrong").addEventListener("click", function(){ if (state.quiz.wrong.length > 0) startQuiz(state.quiz.wrong.slice()); }); $("wa-save").addEventListener("click", saveToLocal); $("wa-load").addEventListener("click", loadFromLocal); $("wa-qr").addEventListener("click", showQR); $("wa-export-csv").addEventListener("click", exportCSV); $("wa-import-csv").addEventListener("change", function(e){ if (e.target.files && e.target.files[0]) importCSV(e.target.files[0]); e.target.value = ""; }); $("wa-stat-reset").addEventListener("click", function(){ for (var i=0;i<state.words.length;i++) state.words[i].known = null; state.lastQuizScore = null; state.lastQuizTotal = null; state.lastStudyDate = null; renderAll(); toast("학습기록을 초기화했어요"); }); $("wa-modal-close").addEventListener("click", closeModal); $("wa-modal-bg").addEventListener("click", function(e){ if (e.target === this) closeModal(); }); // header quick actions $("wa-hdr-share").addEventListener("click", shareURL); $("wa-hdr-tiny").addEventListener("click", function(){ if (state.words.length === 0){ toast("공유할 단어가 없어요"); return; } tinyModal(buildShareURL()); }); $("wa-hdr-test").addEventListener("click", function(){ switchTab("test"); }); // test / exam tab $("wa-test-build").addEventListener("click", adminBuildTestLink); $("wa-test-preview").addEventListener("click", previewTest); $("wa-exam-start").addEventListener("click", startExamCountdown); $("wa-exam-exit-link").addEventListener("click", function(e){ e.preventDefault(); exitPreview(); }); $("wa-exam-submit").addEventListener("click", function(){ submitExam(); }); $("wa-exam-send-mail").addEventListener("click", sendExamMail); $("wa-exam-copy").addEventListener("click", copyExamResult); // ---------- init ---------- function init(){ var isTest = detectTestParam(); if (isTest) return; // participant exam view — don't touch the admin wordbook state var loadedFromURL = loadFromURLIfPresent(); if (!loadedFromURL){ try{ var raw = localStorage.getItem(STORAGE_KEY); if (raw) state.words = JSON.parse(raw); var metaRaw = localStorage.getItem(STORAGE_KEY + "_meta"); if (metaRaw){ var meta = JSON.parse(metaRaw); state.lastQuizScore = meta.lastQuizScore; state.lastQuizTotal = meta.lastQuizTotal; state.lastStudyDate = meta.lastStudyDate; } }catch(e){} } else { // sample seed only if URL had no words somehow — otherwise keep loaded words } if (state.words.length === 0){ // seed with a few sample rows so the UI isn't empty on first look addWord("apple", "사과"); addWord("beautiful", "아름다운"); addWord("achieve", "성취하다"); addWord("negotiate", "협상하다"); } renderAll(); } init(); })(); </script> </body> </html> 모두의계산기 win10 기본기능 캡쳐 최매슨생 https://0-1.kr/29 https://0-1.kr/29#entry29comment Fri, 20 Nov 2020 13:24:03 +0900 https://0-1.kr/27 <p data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthContent" data-origin-width="900" data-origin-height="900"><span data-url="https://blog.kakaocdn.net/dn/c1yMvC/btqNEfibrSs/kUkAugpLJpC7Sp1QC3cHik/img.png" data-phocus="https://blog.kakaocdn.net/dn/c1yMvC/btqNEfibrSs/kUkAugpLJpC7Sp1QC3cHik/img.png"><img src="https://blog.kakaocdn.net/dn/c1yMvC/btqNEfibrSs/kUkAugpLJpC7Sp1QC3cHik/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc1yMvC%2FbtqNEfibrSs%2FkUkAugpLJpC7Sp1QC3cHik%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="150" height="900" data-origin-width="900" data-origin-height="900"/></span></figure> </p> <p data-ke-size="size16">정부지원 사업계획서 발표 또는 대학교 레포트 테스트 용으로 사용하시면 좋습니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">피피티에도 타이머가 있지만 정작 발표장에 가면 버전이 달라 당황하는 경우가 많죠?</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">시계를 보고 하자니 없어보이고.. 연습만이 살길입니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">연습시 최고의 발표용 타이머 ppt타이머를 추천드리겠습니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/dVGziL/btqNHpRQ9C3/gXqYzncwJUkaTgk1RsLpck/%EB%B0%9C%ED%91%9CPPT%ED%83%80%EC%9D%B4%EB%A8%B8.zip?attach=1&amp;knm=tfile.zip" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">발표PPT타이머.zip</span></div> <div class="size">0.01MB</div> </div> </a></figure> </p> <p data-ke-size="size16">&nbsp;</p> <blockquote data-ke-style="style3"><b>사용시 유의사항</b><br /><b>1. 타이머를 더블클릭하면 설정된 시간으로 돌아갑니다.</b><br /><b>2. 더블클릭 후 ppt 또는 발표자료를 반드시 클릭해야지만 발표자료가 작동하니</b><br /><b>반드시 발표자료를 마지막에 클릭해주시기 바랍니다. <br />(발표자료가 넘어가지 않아 당황할 수도 있으니 반드시 발표자료를 마지막에 클릭해주시기 바랍니다.)</b></blockquote> <h2 style="text-align: center;" data-ke-size="size26">아무래도 시계가 팝업이다 보니</h2> <h2 style="text-align: center;" data-ke-size="size26">시계를 클릭하면 발표자료가 뒤에 있게되어</h2> <h2 style="text-align: center;" data-ke-size="size26">레이저 포인트가 먹통이 됩니다.</h2> <h2 style="text-align: center;" data-ke-size="size26">&nbsp;</h2> <h2 style="text-align: center;" data-ke-size="size26">반드시 시계리셋 후 발표자료를 한 번 클릭을 해야</h2> <h2 style="text-align: center;" data-ke-size="size26">레이저포인트가 작동하여 발표자가 당황하지 않는다는 점</h2> <h2 style="text-align: center;" data-ke-size="size26">확인하고 사용하세요!</h2> <p style="text-align: center;" data-ke-size="size16">(또는 alt+tap 키를 이용하여 발표자료를 선택해주세요)</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">우선 피피티를 띄어놓고 연습을 해야 되는데 전체화면으로 하면 시계가 안보이는 경우가 대부분입니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">하지만 이건 전체화면시에도 팝업 위에 있어 시간체크에 딱인듯 합니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthContent" data-origin-width="981" data-origin-height="696"><span data-url="https://blog.kakaocdn.net/dn/bBpmW0/btqNEdYXp9W/ooczT7ffP4jbmxVCjzrQQK/img.png" data-phocus="https://blog.kakaocdn.net/dn/bBpmW0/btqNEdYXp9W/ooczT7ffP4jbmxVCjzrQQK/img.png"><img src="https://blog.kakaocdn.net/dn/bBpmW0/btqNEdYXp9W/ooczT7ffP4jbmxVCjzrQQK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbBpmW0%2FbtqNEdYXp9W%2FooczT7ffP4jbmxVCjzrQQK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="981" height="696" data-origin-width="981" data-origin-height="696"/></span></figure> </p> <p data-ke-size="size16">압축을 풀면 왼쪽 하단의 digitimer가 떠요. 요걸 클릭하면 팝업이 뜹니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">최대 카운트 다운이 30분이 좀 아쉽긴 하지만 30분 초과시 숫자가 올라가므로(이걸 카운트 업이라 하나요?ㅎ)</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">적절하게 사용하심 됩니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">폰트드 맘대로 사용할수 있구요. 3분전,1분전 소리가 나오게도 세팅이 되네요.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">발표자 또는 발표장 세팅하는 매니저들에게도 좋을 듯하네요.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;몇번 클릭해보시면 아시겠지만 동영상으로 살짝 준비해 봤습니다.</p> <figure class="unsupported component-kakaotv" contenteditable="false" style="background:#000;margin:16px 0;min-height:72px;padding:10px 16px;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;width:100%;max-width:100%;"> <p contenteditable="false" style="margin:0;color:#8a8a8a;font-size:13px;line-height:1.6;user-select:none;pointer-events:none;">동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.</p> </figure> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">1) 더블 클릭시 초기화</p> <p data-ke-size="size16">2) 크기 조정 가능</p> <p data-ke-size="size16">3) 소리 알림 가능</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">잘 쓰세요!!</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">p.s. 1분남았을때, 종료시, 강제종료시에 적당한 효과음입니다.(윈도우xp 경고음과 종료음이오니 잘 사용하세요)</p> <p data-ke-size="size16">개인적으로 발표시 3번 종료음은 너무 잔인하오니 사용을 안하시는걸 추천드려요!^^a</p> <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/nx2ck/btsdenbTDEt/bpAB69z1saCAZkMRFiFPy1/01.1%EB%B6%84%EA%B2%BD%EA%B3%A0%EC%9D%8C_%EB%9A%B1.wav?attach=1&amp;knm=tfile.wav" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">01.1분경고음_뚱.wav</span></div> <div class="size">0.04MB</div> </div> </a></figure> <figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/bXxnju/btsdsRoVTSE/b0G1c5XCVfnv76lna7RKuk/02.%EC%A2%85%EB%A3%8C%EA%B2%BD%EA%B3%A0%EC%9D%8C_%EB%9A%B1%EB%9A%B1.wav?attach=1&amp;knm=tfile.wav" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">02.종료경고음_뚱뚱.wav</span></div> <div class="size">0.04MB</div> </div> </a></figure> </p> <p data-ke-size="size16">.</p> <p><figure class="fileblock" data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/bg14fK/btsdwtuwJI9/IKlG7H4bKoCgYfKk4pg6KK/03.%EC%A2%85%EB%A3%8C%EC%9D%8C_%EB%A7%88%EA%B0%90.wav?attach=1&amp;knm=tfile.wav" class=""> <div class="image"></div> <div class="desc"><div class="filename"><span class="name">03.종료음_마감.wav</span></div> <div class="size">0.27MB</div> </div> </a></figure> </p> <hr contenteditable="false" data-ke-style="style5" data-ke-type="horizontalRule" /> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p><figure class="imageblock floatRight" data-ke-mobileStyle="widthContent" data-filename="스업상단_복사본-1.png" data-origin-width="500" data-origin-height="150"><a href="http://www.0-4.co.kr" target="_blank"><img src="https://blog.kakaocdn.net/dn/caFg7w/btqNBfwH6t6/BMNNDB3oAlbJPYWIip962K/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcaFg7w%2FbtqNBfwH6t6%2FBMNNDB3oAlbJPYWIip962K%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="400" height="150" data-filename="스업상단_복사본-1.png" data-origin-width="500" data-origin-height="150"/></a></figure> </p> <p data-ke-size="size16">스타트업EX는 국내 예비창업자와 스타트업 관련 창업지원 프로그램을 전달해드립니다.</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">&nbsp;</p> 모두의계산기/각종타이머 ppt시계 ppt타이머 시계 타이머 팝업무시 최매슨생 https://0-1.kr/27 https://0-1.kr/27#entry27comment Tue, 17 Nov 2020 15:49:07 +0900 https://0-1.kr/23 <style> #drc-root button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;font-family:inherit;cursor:pointer;touch-action:manipulation;margin:0;} #drc-root input:not([type=checkbox]):not([type=radio]),#drc-root textarea{-webkit-appearance:none;appearance:none;font-family:inherit;} #drc-root input[type=checkbox]{width:17px;height:17px;flex:none;} </style> <div id="drc-root" style="max-width:720px;margin:0 auto;padding:14px 12px 80px;background:#fbfbf9;font-family:-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;color:#222;touch-action:manipulation;"> <div id="drc-toast" style="display:none;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#222;color:#fff;padding:10px 18px;border-radius:20px;font-size:13px;max-width:88%;text-align:center;z-index:2147483647;-webkit-transform:translateX(-50%);"></div> <!-- 상단 타이틀바 --> <div style="display:flex;align-items:flex-start;justify-content:space-between;background:#1a4d3c;border-radius:14px 14px 0 0;padding:12px 14px;"> <div style="color:#fff;font-size:15px;font-weight:700;padding-top:6px;">서류요청계산기_v1</div> <div style="display:flex;gap:10px;"> <button id="drc-btn-share-top" type="button" style="background:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px;"><span style="font-size:18px;"> </span><span style="font-size:10px;opacity:.85;">보내기</span></button> <button id="drc-btn-import-top" type="button" style="background:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px;"><span style="font-size:18px;"> </span><span style="font-size:10px;opacity:.85;">불러오기</span></button> <button id="drc-btn-export-top" type="button" style="background:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px;"><span style="font-size:18px;"> </span><span style="font-size:10px;opacity:.85;">저장</span></button> <button id="drc-btn-merge-top" type="button" style="background:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px;"><span style="font-size:18px;"> </span><span style="font-size:10px;opacity:.85;">취합PDF다운</span></button> </div> </div> <input id="drc-import-file-input" type="file" accept="application/json" style="display:none;" /> <!-- Title --> <div style="background:#fff;border:1px solid #e5e2d8;border-top:none;border-radius:0 0 14px 14px;padding:14px;margin-bottom:14px;"> <label style="font-size:12px;color:#999;font-weight:700;">Title</label> <input id="drc-input-title" type="text" placeholder="예: OO사업 지원서류 취합본" style="width:100%;box-sizing:border-box;padding:10px;font-size:16px;font-weight:700;border:1px solid #ddd;border-radius:8px;margin:4px 0 2px;" /> <div style="font-size:11px;color:#aaa;margin-bottom:10px;">(취합 시 파일명으로 사용됩니다)</div> <button id="drc-toggle-guide" type="button" style="width:100%;text-align:left;font-size:14px;font-weight:700;color:#444;padding:6px 0;">▾ 설명 및 전달멘트 접기</button> <div id="drc-guide-wrap" style="display:block;"> <div style="font-size:12px;color:#666;line-height:1.6;background:#f7f7f2;border-radius:8px;padding:10px;margin:6px 0 10px;"> [요청자]: 섹션별 요청파일명 기재 후 (보내기) 발송<br/><br/> [제출자]: 요청파일 확인→업로드→파일저장 후 발송 </div> <label style="font-size:12px;color:#999;font-weight:700;">요청자 전달멘트</label> <input id="drc-input-req-msg" type="text" placeholder="예: 7/20까지 제출 부탁드립니다" style="width:100%;box-sizing:border-box;padding:9px;font-size:13px;border:1px solid #ddd;border-radius:8px;margin:4px 0 10px;" /> <label style="font-size:12px;color:#999;font-weight:700;">제출자 전달멘트</label> <input id="drc-input-sub-msg" type="text" placeholder="예: 확인했습니다, 오늘 중 제출하겠습니다" style="width:100%;box-sizing:border-box;padding:9px;font-size:13px;border:1px solid #ddd;border-radius:8px;margin:4px 0 12px;" /> </div> <div id="drc-progress" style="font-size:13px;color:#666;">업로드 완료 0 / 0 항목</div> <div style="background:#eee;border-radius:8px;height:8px;margin-top:6px;overflow:hidden;"> <div id="drc-progress-bar" style="background:#2e8b57;height:8px;width:0%;-webkit-transition:width .3s;transition:width .3s;"></div> </div> </div> <div id="drc-sections" style="display:flex;flex-direction:column;gap:12px;"></div> <button id="drc-btn-add-section" type="button" style="width:100%;margin-top:14px;padding:14px;font-size:15px;font-weight:700;border:2px dashed #2e8b57;color:#2e8b57;background:#f3faf5;border-radius:12px;">＋ 서류 항목 추가</button> <!-- 취합 옵션 (기본 펼침) --> <div style="margin-top:14px;"> <button id="drc-toggle-options" type="button" style="width:100%;text-align:left;padding:12px 14px;background:#eef4ff;border:1px solid #cfe0fb;border-radius:10px;font-size:14px;font-weight:700;color:#1a4d8a;">▾ 취합 옵션 접기</button> <div id="drc-options-panel" style="display:block;padding:14px 4px;"> <label style="display:flex;align-items:center;gap:8px;font-size:14px;margin:6px 0;"><input id="drc-opt-watermark" type="checkbox" /> 전체 파일에 제목 표기(워터마크)</label> <label style="display:flex;align-items:center;gap:8px;font-size:14px;margin:6px 0;"><input id="drc-opt-pagenum" type="checkbox" checked /> 페이지 번호 삽입</label> <div style="margin-top:14px;padding-top:12px;border-top:1px dashed #ddd;"> <div style="font-size:13px;font-weight:700;color:#444;margin-bottom:6px;">취합 PDF 용량(화질) 조절</div> <div id="drc-compress-segment" style="display:flex;gap:6px;margin-bottom:8px;"></div> <div id="drc-compress-estimate" style="font-size:12px;color:#666;"></div> <div id="drc-compress-recommend" style="font-size:12px;color:#1a7a4c;margin-top:2px;"></div> </div> <div style="border-top:1px dashed #ddd;margin-top:14px;"></div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;"> <div style="position:relative;"> <button id="drc-btn-export-json" type="button" style="width:100%;box-sizing:border-box;padding:12px 6px;background:#fff;border:1px solid #ccc;border-radius:8px;font-size:13px;font-weight:700;">✎ 파일저장_수정가능</button> <button id="drc-btn-export-tip" type="button" style="position:absolute;top:-8px;right:-6px;width:20px;height:20px;border-radius:50%;background:#1a4d8a;color:#fff;font-size:11px;font-weight:700;">ⓘ</button> <div id="drc-export-tip-bubble" style="display:none;position:relative;margin-top:6px;background:#222;color:#fff;font-size:11px;line-height:1.5;padding:8px 10px;border-radius:8px;">요청자에게 이 파일을 전달하면 받는 사람이 파일명·순서를 계속 수정할 수 있고, 필요할 때 언제든 PDF로 쉽게 변환할 수 있어요.</div> <div style="font-size:11px;color:#c0392b;margin-top:6px;">*해당파일로 저장 시 요청자가 수정가능한 파일로 저장됩니다.</div> </div> <button id="drc-btn-import-json" type="button" style="padding:12px 6px;background:#fff;border:1px solid #ccc;border-radius:8px;font-size:13px;font-weight:700;"> 파일불러오기</button> <button id="drc-btn-merge" type="button" style="padding:12px 6px;background:#1a4d8a;color:#fff;border-radius:8px;font-size:13px;font-weight:700;"> 전체취합_PDF로 합치기</button> <button id="drc-btn-save-separate" type="button" style="padding:12px 6px;background:#fff;border:1px solid #ccc;border-radius:8px;font-size:13px;font-weight:700;"> 별도파일저장(zip)</button> </div> <div style="font-size:11px;color:#aaa;margin-top:8px;">※ 저장한 파일은 0-1.kr/29 에서 다시 불러와 수정할 수 있어요</div> <div style="border-top:1px dashed #ddd;margin-top:14px;"></div> <label style="display:flex;align-items:center;gap:8px;font-size:14px;color:#333;margin-top:14px;"> <input id="drc-opt-prefix" type="checkbox" checked /> 말머리+파일명 저장 </label> <div style="font-size:11px;color:#999;margin-top:4px;">체크 시 파일명 앞에 [섹션번호]_[파일순번]. 형식이 자동으로 붙어요. (예: 01_01. 사업자등록증) 순서를 바꾸면 번호도 자동으로 다시 매겨집니다. 해지하면 원래 파일명만 사용해요.</div> </div> </div> <div style="margin-top:18px;"> <div style="background:#fff7e8;border:1px solid #f0dca0;border-radius:12px;padding:14px;"> <div style="font-size:14px;font-weight:700;color:#8a6300;margin-bottom:4px;"> 요청자</div> <div style="font-size:13px;color:#555;line-height:1.6;">섹션별 서류명 기재 후 제출자에게 전달</div> <div style="font-size:12px;color:#a98a3f;margin-top:4px;">유의사항: 메모·링크까지 채워두면 제출자가 헷갈리지 않아요. 다 채웠으면 상단 보내기로 링크 전달.</div> </div> <div style="text-align:center;font-size:20px;color:#bbb;line-height:1;padding:2px 0;">↓</div> <div style="background:#f3faf5;border:1px solid #cfe8d6;border-radius:12px;padding:14px;"> <div style="font-size:14px;font-weight:700;color:#1a7a4c;margin-bottom:4px;"> 제출자</div> <div style="font-size:13px;color:#555;line-height:1.6;">각 파일 확인 후 업로드</div> <div style="font-size:12px;color:#5fa37e;margin-top:4px;">유의사항: 예시보기로 확인 → 업로드 → ✎파일저장_수정가능 클릭 → 요청자에게 해당 파일 발송</div> </div> </div> <button id="drc-btn-manual" type="button" style="width:100%;margin-top:18px;padding:10px;background:none;border:1px solid #ddd;border-radius:8px;color:#888;font-size:13px;">ℹ 사용설명서</button> <div style="text-align:center;font-size:11px;color:#c8c5ba;margin-top:10px;">완벽서류요청계산기_V10_(260714) · 스타트업ex · cds1981@naver.com</div> <!-- 사용설명서 모달 --> <div id="drc-manual-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:2147483647;"> <div style="background:#fff;max-width:600px;margin:8vh auto;padding:20px;border-radius:14px;max-height:78vh;overflow:auto;-webkit-overflow-scrolling:touch;"> <h3 style="margin-top:0;">사용설명서 (V10)</h3> <ol style="font-size:14px;line-height:1.7;padding-left:18px;"> <li>자동저장이 IndexedDB 기반으로 바뀌어 localStorage보다 훨씬 넉넉한 용량(수백MB 이상)까지 파일을 담아도 안전합니다. (예전 버전에서 쓰던 데이터는 자동으로 옮겨옵니다)</li> <li>취합 옵션 하단의 "말머리+파일명 저장"이 기본 체크되어 있으면, 파일명 앞에 [섹션번호]_[파일순번]. 형식이 자동으로 붙습니다(예: 01_01. 사업자등록증). 체크 해제하면 원래 파일명만 사용됩니다. 순서를 바꾸면 번호도 자동으로 재계산됩니다.</li> <li>파일 행의 ⠿을 드래그하면 같은 섹션 안에서 파일 순서를 바꿀 수 있고, 파일명도 직접 수정할 수 있습니다. 수정한 이름은 저장·다운로드 시 그대로 반영됩니다.</li> <li>Title에 취합 시 사용할 파일명을 입력합니다. 그 아래 설명·전달멘트 영역은 접었다 펼 수 있고, 접은 상태로 저장·전달하면 받는 사람도 접힌 상태로 받습니다.</li> <li>요청 항목만 입력한 상태에서 상단 보내기로 파라미터가 담긴 링크(또는 짧은 URL·QR)를 만들어 전달할 수 있습니다. 파일이 첨부된 상태에서는 링크 공유가 막힙니다.</li> <li>각 항목 왼쪽 ⠿을 드래그하면 순서가 바뀝니다. 번호를 누르면 항목이 접히고, 접힌 상태에서는 파일 첨부 여부만 표시됩니다.</li> <li>"파일업로드" 탭: 파일 유무와 상관없이 항상 보이는 기본 메모칸이 있고, 업로드된 파일마다 미리보기·파일명·PDF표시·용량과 파일별 메모도 남길 수 있습니다. "전달사항" 탭: 상단 전달사항메모(높이 조절 가능) + 체크리스트 항목 자유 추가 + 관련 링크. "예시보기" 탭: 예시링크(구글/이미지/블로그)를 열거나 발급방법을 적고, 요청자가 올린 예시 PDF를 바로 볼 수 있습니다.</li> <li>취합 옵션에서 용량(화질)을 조절할 수 있고, 현재 업로드된 이미지 용량 기준 추천 강도가 표시됩니다.</li> <li>✎ 파일저장_수정가능(ⓘ 눌러 설명 확인) = 파일명/순서를 계속 편집 가능한 json으로 저장. 파일불러오기 = 그 json을 다시 불러와 편집. 전체취합_PDF로 합치기 = 모든 파일을 한 개의 PDF로 병합. 별도파일저장(zip) = 각 파일을 개별 PDF로 만들어 zip 하나로 압축 저장.</li> <li>모든 입력은 4초마다 자동저장됩니다.</li> </ol> <button id="drc-manual-close" type="button" style="width:100%;padding:12px;background:#222;color:#fff;border-radius:8px;">닫기</button> </div> </div> <!-- 보내기(링크/QR) 모달 --> <div id="drc-share-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:2147483647;"> <div style="background:#fff;max-width:480px;margin:12vh auto;padding:20px;border-radius:14px;max-height:74vh;overflow:auto;"> <h3 style="margin-top:0;">링크로 보내기</h3> <div id="drc-share-box" style="font-size:12px;word-break:break-all;"></div> <button id="drc-share-close" type="button" style="width:100%;margin-top:16px;padding:12px;background:#222;color:#fff;border-radius:8px;">닫기</button> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> <script> (function(){ var STORAGE_KEY = 'drc_state_v2'; var _saveTimer = null; var STATE = null; var _collapsedMap = {}; function isCollapsed(id){ return !!_collapsedMap[id]; } function toggleCollapse(id){ _collapsedMap[id] = !_collapsedMap[id]; renderSections(); } var _activeTabMap = {}; function getActiveTab(id){ return _activeTabMap[id] || 'upload'; } /* ===== IndexedDB 저장소 (localStorage 5~10MB 제한 해결용) ===== */ var IDB_NAME = 'drc_db_v1'; var IDB_STORE = 'state'; var _idbPromise = null; function openIDB(){ if(_idbPromise) return _idbPromise; _idbPromise = new Promise(function(resolve, reject){ if(!window.indexedDB){ reject(new Error('indexedDB 미지원')); return; } var req = indexedDB.open(IDB_NAME, 1); req.onupgradeneeded = function(e){ var db = e.target.result; if(!db.objectStoreNames.contains(IDB_STORE)){ db.createObjectStore(IDB_STORE); } }; req.onsuccess = function(e){ resolve(e.target.result); }; req.onerror = function(){ reject(req.error); }; }); return _idbPromise; } function idbGet(key){ return openIDB().then(function(db){ return new Promise(function(resolve, reject){ var tx = db.transaction(IDB_STORE, 'readonly'); var req = tx.objectStore(IDB_STORE).get(key); req.onsuccess = function(){ resolve(req.result || null); }; req.onerror = function(){ reject(req.error); }; }); }); } function idbSet(key, value){ return openIDB().then(function(db){ return new Promise(function(resolve, reject){ var tx = db.transaction(IDB_STORE, 'readwrite'); var req = tx.objectStore(IDB_STORE).put(value, key); req.onsuccess = function(){ resolve(true); }; req.onerror = function(){ reject(req.error); }; }); }); } var COMPRESS_PRESETS = { original: { quality:0.92, maxWidth:2000, label:'원본화질', mult:1.0 }, standard: { quality:0.65, maxWidth:1600, label:'표준압축', mult:0.45 }, small: { quality:0.40, maxWidth:1000, label:'고용량절약', mult:0.2 } }; function $(id){ return document.getElementById(id); } function uid(){ return 'id' + Date.now().toString(36) + Math.floor(Math.random()*10000).toString(36); } function todayStr(){ var d = new Date(); return String(d.getFullYear()).slice(2) + ('0'+(d.getMonth()+1)).slice(-2) + ('0'+d.getDate()).slice(-2); } function showToast(msg){ var t = $('drc-toast'); t.textContent = msg; t.style.display = 'block'; window.setTimeout(function(){ t.style.display='none'; }, 2600); } function openUrl(url){ if(!url) { showToast('링크가 비어있습니다'); return; } var u = url; if(!/^https?:\/\//i.test(u)) u = 'https://' + u; window.open(u, '_blank'); } function fmtBytes(n){ if(n < 1024) return n + 'B'; if(n < 1024*1024) return Math.round(n/1024) + 'KB'; return (Math.round(n/1024/1024*10)/10) + 'MB'; } function defaultOptions(){ return { watermark:false, pagenum:true, compressLevel:'standard', prefixNaming:true }; } function defaultState(){ return { title: '', requesterMsg: '', submitterMsg: '', guideCollapsed: false, sections: [ { id: uid(), name: '사업자등록증', desc: '', link: '', exampleLink: 'https://www.hometax.go.kr', issueMethod: '최근 3개월 이내 발급본을 업로드해주세요.', checklist: [], uploadNote:'', exampleFile: null, files: [] }, { id: uid(), name: '통장사본', desc: '', link: '', exampleLink: '', issueMethod: '입금계좌로 사용할 통장 첫 페이지 사본입니다.', checklist: [], uploadNote:'', exampleFile: null, files: [] } ], options: defaultOptions() }; } function parseQuery(){ var out = {}; var s = window.location.search.replace('?',''); if(!s) return out; var parts = s.split('&'); for(var i=0;i<parts.length;i++){ var kv = parts[i].split('='); out[decodeURIComponent(kv[0])] = decodeURIComponent(kv[1]||''); } return out; } function loadInitialState(){ try{ var qs = parseQuery(); if(qs.tpl && window.LZString){ var json = LZString.decompressFromEncodedURIComponent(qs.tpl); if(json){ var tpl = JSON.parse(json); var st = { title: tpl.title||'', requesterMsg: tpl.requesterMsg||'', submitterMsg: tpl.submitterMsg||'', guideCollapsed: !!tpl.guideCollapsed, sections: [], options: defaultOptions() }; for(var i=0;i<tpl.sections.length;i++){ var ts = tpl.sections[i]; st.sections.push({ id: uid(), name: ts.name, desc: ts.desc||'', link: ts.link||'', exampleLink: ts.exampleLink||'', issueMethod: ts.issueMethod||'', checklist: ts.checklist||[], uploadNote: ts.uploadNote||'', exampleFile: null, files: [] }); } return Promise.resolve(st); } } }catch(e){} return idbGet(STORAGE_KEY).then(function(saved){ if(saved) return saved; return migrateFromLocalStorage(); }).catch(function(){ return migrateFromLocalStorage(); }); } function migrateFromLocalStorage(){ try{ var raw = localStorage.getItem(STORAGE_KEY); if(raw){ var migrated = JSON.parse(raw); idbSet(STORAGE_KEY, migrated).catch(function(){}); return migrated; } }catch(e){} return defaultState(); } function persistState(pushHist){ if(_saveTimer) window.clearTimeout(_saveTimer); _saveTimer = window.setTimeout(function(){ idbSet(STORAGE_KEY, STATE).then(function(){ showToast('자동저장됨'); }).catch(function(){ try{ localStorage.setItem(STORAGE_KEY, JSON.stringify(STATE)); showToast('자동저장됨'); } catch(e){ showToast('자동저장 실패'); } }); }, 4000); } /* ===== 유틸 ===== */ function el(tag, attrs, children){ var e = document.createElement(tag); for(var k in attrs){ if(k === 'style') e.style.cssText = attrs[k]; else if(k.indexOf('data-') === 0) e.setAttribute(k, attrs[k]); else e[k] = attrs[k]; } children = children || []; for(var i=0;i<children.length;i++){ e.appendChild(children[i]); } return e; } function arrayBufferToBase64(buffer){ var bytes = new Uint8Array(buffer); var binary = ''; var chunk = 0x8000; for(var i=0;i<bytes.length;i+=chunk){ binary += String.fromCharCode.apply(null, bytes.subarray(i, i+chunk)); } return btoa(binary); } function base64ToUint8(b64){ var bin = atob(b64); var bytes = new Uint8Array(bin.length); for(var i=0;i<bin.length;i++){ bytes[i] = bin.charCodeAt(i); } return bytes; } function findSection(id){ for(var i=0;i<STATE.sections.length;i++){ if(STATE.sections[i].id === id) return STATE.sections[i]; } return null; } function downloadBytes(bytes, filename, mime){ var blob = new Blob([bytes], { type: mime || 'application/pdf' }); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.setTimeout(function(){ URL.revokeObjectURL(url); }, 3000); } /* ===== 렌더링 ===== */ function renderAll(){ $('drc-input-title').value = STATE.title; $('drc-input-req-msg').value = STATE.requesterMsg || ''; $('drc-input-sub-msg').value = STATE.submitterMsg || ''; applyGuideCollapsed(); $('drc-opt-prefix').checked = STATE.options.prefixNaming !== false; $('drc-opt-watermark').checked = STATE.options.watermark; $('drc-opt-pagenum').checked = STATE.options.pagenum; renumberAll(); renderSections(); renderProgress(); renderCompressControl(); } function applyGuideCollapsed(){ var wrap = $('drc-guide-wrap'); var btn = $('drc-toggle-guide'); var collapsed = !!STATE.guideCollapsed; wrap.style.display = collapsed ? 'none' : 'block'; btn.textContent = (collapsed ? '▸' : '▾') + ' 설명 및 전달멘트 ' + (collapsed ? '펼치기' : '접기'); } function renumberAll(){ var prefixOn = !STATE.options || STATE.options.prefixNaming !== false; for(var i=0;i<STATE.sections.length;i++){ var files = STATE.sections[i].files; var secNum = ('0'+(i+1)).slice(-2); for(var j=0;j<files.length;j++){ var base = files[j].baseName || files[j].name.replace(/^\d+_\d+\.\s*/, '').replace(/^\[\d+\]\s*/, ''); files[j].baseName = base; if(prefixOn){ var fnum = ('0'+(j+1)).slice(-2); files[j].name = secNum + '_' + fnum + '. ' + base; } else { files[j].name = base; } } } } function renderProgress(){ var total = STATE.sections.length, done = 0; for(var i=0;i<total;i++){ if(STATE.sections[i].files.length>0) done++; } $('drc-progress').textContent = '업로드 완료 ' + done + ' / ' + total + ' 항목'; $('drc-progress-bar').style.width = (total? Math.round(done/total*100):0) + '%'; } function flattenFiles(){ var out = []; for(var i=0;i<STATE.sections.length;i++){ var files = STATE.sections[i].files; for(var j=0;j<files.length;j++){ out.push(files[j]); } } return out; } function renderCompressControl(){ var seg = $('drc-compress-segment'); seg.innerHTML = ''; var levels = ['original','standard','small']; var current = STATE.options.compressLevel || 'standard'; var rec = recommendLevel(); for(var i=0;i<levels.length;i++){ var lv = levels[i]; var active = lv === current; var btn = el('button', { type:'button', style:'flex:1;padding:9px 4px;font-size:12px;font-weight:700;border-radius:8px;background:'+(active?'#1a4d8a':'#f0eee5')+';color:'+(active?'#fff':'#555')+';' }); btn.textContent = COMPRESS_PRESETS[lv].label + (lv===rec?' ⭐':''); btn.addEventListener('click', (function(l){ return function(){ STATE.options.compressLevel = l; renderCompressControl(); persistState(); }; })(lv)); seg.appendChild(btn); } var files = flattenFiles(); var estCurrent = estimateTotalBytes(current); var estOriginal = estimateTotalBytes('original'); var estBox = $('drc-compress-estimate'); estBox.innerHTML = ''; if(files.length){ var lbl = document.createElement('span'); lbl.textContent = '예상 파일용량: '; var val = document.createElement('strong'); val.style.color = '#1a4d8a'; val.textContent = fmtBytes(estCurrent); var sub = document.createElement('span'); sub.style.color = '#999'; sub.textContent = ' (원본 기준 ' + fmtBytes(estOriginal) + ')'; estBox.appendChild(lbl); estBox.appendChild(val); estBox.appendChild(sub); } else { estBox.textContent = '파일을 업로드하면 예상 파일용량이 표시됩니다'; } if(files.length && rec !== 'original'){ $('drc-compress-recommend').textContent = ' 원본 기준 용량이 커요 — ' + COMPRESS_PRESETS[rec].label + '을 추천해요 (제출처 업로드 용량제한 대비)'; } else { $('drc-compress-recommend').textContent = ''; } } function estimateTotalBytes(level){ var mult = COMPRESS_PRESETS[level].mult; var total = 0; var files = flattenFiles(); for(var i=0;i<files.length;i++){ var f = files[i]; total += f.kind === 'image' ? (f.origSize * mult) : f.origSize; } return Math.round(total); } function recommendLevel(){ var estOriginal = estimateTotalBytes('original'); if(estOriginal > 15*1024*1024) return 'small'; if(estOriginal > 5*1024*1024) return 'standard'; return 'original'; } function renderSections(){ var wrap = $('drc-sections'); wrap.innerHTML = ''; for(var i=0;i<STATE.sections.length;i++){ wrap.appendChild(renderSectionCard(STATE.sections[i], i)); } if(window.Sortable){ Sortable.create(wrap, { handle: '.drc-drag-handle', animation: 150, onEnd: function(){ var newOrder = []; var nodes = wrap.querySelectorAll('.drc-section-card'); for(var k=0;k<nodes.length;k++){ var sid = nodes[k].getAttribute('data-id'); for(var m=0;m<STATE.sections.length;m++){ if(STATE.sections[m].id === sid){ newOrder.push(STATE.sections[m]); break; } } } STATE.sections = newOrder; renumberAll(); renderSections(); persistState(); } }); } } function renderSectionCard(sec, idx){ var card = el('div', { className:'drc-section-card', style:'background:#fff;border:1px solid #e5e2d8;border-radius:14px;padding:14px;', 'data-id': sec.id }); var collapsed = isCollapsed(sec.id); var head = el('div', { style:'display:flex;align-items:center;gap:8px;margin-bottom:'+(collapsed?'0':'10px')+';' }); var dragHandle = el('div', { className:'drc-drag-handle', style:'flex:none;font-size:18px;color:#bbb;padding:4px 2px;cursor:grab;' }); dragHandle.textContent = '⠿'; var badgeWrap = el('div', { style:'flex:none;display:flex;align-items:center;gap:3px;cursor:pointer;' }); var chevron = el('span', { style:'font-size:10px;color:#999;width:10px;display:inline-block;' }); chevron.textContent = collapsed ? '▸' : '▾'; var badge = el('div', { style:'flex:none;width:28px;height:28px;border-radius:50%;background:#2e8b57;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;' }); badge.textContent = ('0'+(idx+1)).slice(-2); badgeWrap.appendChild(chevron); badgeWrap.appendChild(badge); badgeWrap.addEventListener('click', (function(s){ return function(){ toggleCollapse(s.id); }; })(sec)); var titleInput = el('input', { type:'text', value: sec.name, placeholder:'서류명 입력', style:'flex:1;min-width:0;border:none;background:transparent;font-size:16px;font-weight:700;color:#222;padding:4px 2px;' }); titleInput.addEventListener('change', (function(s){ return function(e){ s.name = e.target.value; persistState(); }; })(sec)); var delBtn = el('button', { type:'button', style:'flex:none;font-size:13px;color:#a33;background:none;padding:2px 4px;' }); delBtn.textContent = '✕'; delBtn.addEventListener('click', (function(s){ return function(){ removeSection(s.id); }; })(sec)); head.appendChild(dragHandle); head.appendChild(badgeWrap); head.appendChild(titleInput); head.appendChild(delBtn); card.appendChild(head); if(collapsed){ var summary = el('div', { style:'padding:2px 4px 2px 50px;font-size:12px;color:'+(sec.files.length>0?'#2e8b57':'#a33')+';' }); summary.textContent = sec.files.length>0 ? (' 파일 ' + sec.files.length + '개 첨부됨') : '⚠ 미첨부'; card.appendChild(summary); return card; } /* 연결형 탭 그룹 (3탭) */ var tabGroup = el('div', { style:'border:1px solid #e5e2d8;border-radius:10px;overflow:hidden;' }); var tabBar = el('div', { style:'display:flex;' }); var tabDefs = [ ['upload','파일업로드'], ['deliver','전달사항'], ['example','예시보기'] ]; var tabBtns = []; for(var t=0;t<tabDefs.length;t++){ var tb = el('button', { type:'button', className:'drc-tab-btn', 'data-tab':tabDefs[t][0], style:'flex:1;padding:8px 4px;font-size:12px;font-weight:700;background:#e9f0fa;color:#1a4d8a;' }); tb.textContent = tabDefs[t][1]; tabBar.appendChild(tb); tabBtns.push(tb); } tabGroup.appendChild(tabBar); var contentWrap = el('div', { style:'background:#fafaf7;padding:10px;' }); /* 탭1: 파일업로드 */ var uploadPane = el('div', { className:'drc-tab-pane', 'data-pane':'upload' }); var drop = el('label', { style:'display:block;border:2px dashed #cfcabb;border-radius:10px;padding:14px;text-align:center;color:#888;font-size:12px;cursor:pointer;background:#fff;box-sizing:border-box;' }); drop.textContent = ' 파일을 드래그하거나 눌러서 업로드 (이미지→PDF 자동변환)'; var input = el('input', { type:'file', accept:'image/*,application/pdf', multiple:true, style:'display:none;' }); input.addEventListener('change', (function(s){ return function(e){ handleFiles(s, e.target.files); e.target.value=''; }; })(sec)); drop.appendChild(input); drop.addEventListener('dragover', function(e){ e.preventDefault(); drop.style.background='#eef7ee'; }); drop.addEventListener('dragleave', function(){ drop.style.background='#fff'; }); drop.addEventListener('drop', (function(s){ return function(e){ e.preventDefault(); drop.style.background='#fff'; handleFiles(s, e.dataTransfer.files); }; })(sec)); uploadPane.appendChild(drop); var uploadNote = el('textarea', { placeholder:'간단메모 (파일과 무관하게 자유롭게 메모)', style:'width:100%;box-sizing:border-box;padding:8px;font-size:12px;border:1px solid #ddd;border-radius:8px;height:44px;resize:vertical;margin-top:8px;' }); uploadNote.value = sec.uploadNote || ''; uploadNote.addEventListener('change', (function(s){ return function(e){ s.uploadNote = e.target.value; persistState(); }; })(sec)); uploadPane.appendChild(uploadNote); var flist = el('div', { style:'margin-top:8px;display:flex;flex-direction:column;gap:8px;', 'data-sid': sec.id }); for(var i=0;i<sec.files.length;i++){ flist.appendChild(renderFileRow(sec, sec.files[i])); } uploadPane.appendChild(flist); contentWrap.appendChild(uploadPane); if(window.Sortable && sec.files.length > 1){ Sortable.create(flist, { handle: '.drc-file-drag', animation: 150, onEnd: function(){ var sid = flist.getAttribute('data-sid'); var s = findSection(sid); var newFiles = []; var nodes = flist.querySelectorAll('.drc-file-row'); for(var k=0;k<nodes.length;k++){ var fid = nodes[k].getAttribute('data-fid'); for(var m=0;m<s.files.length;m++){ if(s.files[m].id === fid){ newFiles.push(s.files[m]); break; } } } s.files = newFiles; renumberAll(); renderSections(); persistState(); } }); } /* 탭2: 전달사항 (메모 + 체크리스트 + 관련링크) */ var deliverPane = el('div', { className:'drc-tab-pane', 'data-pane':'deliver', style:'display:none;' }); var deliverMemoLabel = el('div', { style:'font-size:12px;color:#999;font-weight:700;margin-bottom:4px;' }); deliverMemoLabel.textContent = '전달사항메모'; deliverPane.appendChild(deliverMemoLabel); var deliverMemo = el('textarea', { placeholder:'전달사항을 자유롭게 적어주세요', style:'width:100%;box-sizing:border-box;padding:9px;font-size:13px;border:1px solid #ddd;border-radius:8px;height:60px;resize:vertical;margin-bottom:10px;' }); deliverMemo.value = sec.desc || ''; deliverMemo.addEventListener('change', (function(s){ return function(e){ s.desc = e.target.value; persistState(); }; })(sec)); deliverPane.appendChild(deliverMemo); var checkWrap = el('div', { style:'display:flex;flex-direction:column;gap:6px;margin-bottom:8px;' }); if(!sec.checklist) sec.checklist = []; for(var c=0;c<sec.checklist.length;c++){ checkWrap.appendChild(renderChecklistRow(sec, sec.checklist[c])); } deliverPane.appendChild(checkWrap); var addCheckBtn = el('button', { type:'button', style:'width:100%;padding:8px;font-size:12px;font-weight:700;color:#1a4d8a;background:#e9f0fa;border:1px dashed #1a4d8a;border-radius:8px;margin-bottom:10px;' }); addCheckBtn.textContent = '+ 전달사항 항목추가'; addCheckBtn.addEventListener('click', (function(s){ return function(){ s.checklist.push({ id: uid(), text:'', checked:false }); _activeTabMap[s.id] = 'deliver'; renderSections(); persistState(); }; })(sec)); deliverPane.appendChild(addCheckBtn); var linkRow = el('div', { style:'display:flex;gap:6px;' }); var linkInput = el('input', { type:'text', value: sec.link||'', placeholder:'관련 링크 연결', style:'flex:1;min-width:0;padding:9px;font-size:13px;border:1px solid #ddd;border-radius:8px;' }); linkInput.addEventListener('change', (function(s){ return function(e){ s.link = e.target.value; persistState(); }; })(sec)); var openBtn = el('button', { type:'button', style:'flex:none;padding:9px 12px;font-size:12px;background:#eee;border-radius:8px;' }); openBtn.textContent = '열기'; openBtn.addEventListener('click', (function(s){ return function(){ openUrl(s.link); }; })(sec)); linkRow.appendChild(linkInput); linkRow.appendChild(openBtn); deliverPane.appendChild(linkRow); contentWrap.appendChild(deliverPane); /* 탭3: 예시보기 (예시링크 + 발급방법 + 예시파일 미리보기) */ var examplePane = el('div', { className:'drc-tab-pane', 'data-pane':'example', style:'display:none;' }); var exLinkRow = el('div', { style:'display:flex;gap:6px;margin-bottom:8px;' }); var exLinkInput = el('input', { type:'text', value: sec.exampleLink||'', placeholder:'예시링크 (구글/이미지/블로그 등)', style:'flex:1;min-width:0;padding:9px;font-size:13px;border:1px solid #ddd;border-radius:8px;' }); exLinkInput.addEventListener('change', (function(s){ return function(e){ s.exampleLink = e.target.value; persistState(); }; })(sec)); var exOpenBtn = el('button', { type:'button', style:'flex:none;padding:9px 12px;font-size:12px;background:#eee;border-radius:8px;' }); exOpenBtn.textContent = '열기'; exOpenBtn.addEventListener('click', (function(s){ return function(){ openUrl(s.exampleLink); }; })(sec)); exLinkRow.appendChild(exLinkInput); exLinkRow.appendChild(exOpenBtn); examplePane.appendChild(exLinkRow); var issueBox = el('textarea', { placeholder:'발급방법 안내', style:'width:100%;box-sizing:border-box;padding:9px;font-size:13px;border:1px solid #ddd;border-radius:8px;height:60px;margin-bottom:10px;' }); issueBox.value = sec.issueMethod || ''; issueBox.addEventListener('change', (function(s){ return function(e){ s.issueMethod = e.target.value; persistState(); }; })(sec)); examplePane.appendChild(issueBox); if(sec.exampleFile){ var previewWrap = el('div', { style:'border:1px solid #ddd;border-radius:8px;overflow:hidden;background:#fff;' }); var previewHead = el('div', { style:'display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:#f2f2ee;font-size:12px;' }); var pName = el('span', {}); pName.textContent = sec.exampleFile.name; var pDel = el('button', { type:'button', style:'color:#a33;background:none;font-size:12px;' }); pDel.textContent = '삭제'; pDel.addEventListener('click', (function(s){ return function(){ s.exampleFile = null; renderSections(); persistState(); }; })(sec)); previewHead.appendChild(pName); previewHead.appendChild(pDel); var iframe = el('iframe', { src: sec.exampleFile.pdfDataUrl, style:'width:100%;height:320px;border:none;display:block;' }); previewWrap.appendChild(previewHead); previewWrap.appendChild(iframe); examplePane.appendChild(previewWrap); } else { var exDrop = el('label', { style:'display:block;border:2px dashed #cfcabb;border-radius:10px;padding:16px;text-align:center;color:#888;font-size:13px;cursor:pointer;background:#fff;' }); exDrop.textContent = ' 예시 PDF/이미지 업로드 (요청자용 - 제출자에게 미리보기로 표시됩니다)'; var exInput = el('input', { type:'file', accept:'image/*,application/pdf', style:'display:none;' }); exInput.addEventListener('change', (function(s){ return function(e){ if(e.target.files[0]) handleExampleFile(s, e.target.files[0]); e.target.value=''; }; })(sec)); exDrop.appendChild(exInput); examplePane.appendChild(exDrop); } contentWrap.appendChild(examplePane); tabGroup.appendChild(contentWrap); card.appendChild(tabGroup); for(var b=0;b<tabBtns.length;b++){ (function(btn){ btn.addEventListener('click', function(){ var t = btn.getAttribute('data-tab'); _activeTabMap[sec.id] = t; switchTab(card, t); }); })(tabBtns[b]); } switchTab(card, getActiveTab(sec.id)); return card; } function renderChecklistRow(sec, item){ var row = el('div', { style:'display:flex;align-items:center;gap:6px;' }); var cb = el('input', { type:'checkbox' }); cb.checked = !!item.checked; cb.addEventListener('change', function(e){ item.checked = e.target.checked; persistState(); }); var txt = el('input', { type:'text', value: item.text||'', placeholder:'전달사항 입력', style:'flex:1;min-width:0;padding:8px;font-size:13px;border:1px solid #ddd;border-radius:8px;' }); txt.addEventListener('change', function(e){ item.text = e.target.value; persistState(); }); var del = el('button', { type:'button', style:'flex:none;font-size:12px;color:#a33;padding:4px 6px;' }); del.textContent = '✕'; del.addEventListener('click', function(){ sec.checklist = sec.checklist.filter(function(x){ return x.id !== item.id; }); renderSections(); persistState(); }); row.appendChild(cb); row.appendChild(txt); row.appendChild(del); return row; } function switchTab(card, tab){ var btns = card.querySelectorAll('.drc-tab-btn'); var panes = card.querySelectorAll('.drc-tab-pane'); for(var i=0;i<btns.length;i++){ var isActive = btns[i].getAttribute('data-tab') === tab; btns[i].style.background = isActive ? '#1a4d8a' : '#e9f0fa'; btns[i].style.color = isActive ? '#fff' : '#1a4d8a'; } for(var j=0;j<panes.length;j++){ panes[j].style.display = panes[j].getAttribute('data-pane') === tab ? 'block' : 'none'; } } function renderFileRow(sec, f){ var row = el('div', { className:'drc-file-row', style:'background:#f6f6f2;border-radius:8px;padding:8px;', 'data-fid': f.id }); var topRow = el('div', { style:'display:flex;align-items:center;gap:8px;' }); var dragHandle = el('div', { className:'drc-file-drag', style:'flex:none;font-size:15px;color:#bbb;cursor:grab;padding:2px;' }); dragHandle.textContent = '⠿'; var thumb = el('div', { style:'flex:none;width:36px;height:36px;border-radius:6px;overflow:hidden;background:#fff;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;font-size:16px;' }); if(f.thumbDataUrl){ thumb.appendChild(el('img', { src: f.thumbDataUrl, style:'width:100%;height:100%;object-fit:cover;display:block;' })); } else { thumb.textContent = ' '; } var nameInput = el('input', { type:'text', value: f.name, style:'flex:1;min-width:0;border:none;background:transparent;font-size:13px;color:#333;' }); nameInput.addEventListener('change', (function(s,file){ return function(e){ file.baseName = e.target.value.replace(/^\d+_\d+\.\s*/, '').replace(/^\[\d+\]\s*/, ''); renumberAll(); renderSections(); persistState(); }; })(sec,f)); var extBadge = el('span', { style:'flex:none;font-size:10px;font-weight:700;color:#1a4d8a;background:#e9f0fa;padding:2px 6px;border-radius:4px;' }); extBadge.textContent = 'PDF'; var sizeTag = el('span', { style:'flex:none;font-size:11px;color:#999;' }); sizeTag.textContent = fmtBytes(f.origSize); var dlBtn = el('button', { type:'button', style:'flex:none;font-size:12px;color:#1a4d8a;padding:4px 6px;background:none;' }); dlBtn.textContent = '⬇'; dlBtn.addEventListener('click', (function(file){ return function(){ showToast('변환 중...'); convertFileToPdfBytes(file).then(function(bytes){ downloadBytes(bytes, file.name + '.pdf'); }).catch(function(){ showToast('다운로드 실패'); }); }; })(f)); var delBtn = el('button', { type:'button', style:'flex:none;font-size:12px;color:#a33;padding:4px 6px;background:none;' }); delBtn.textContent = '✕'; delBtn.addEventListener('click', (function(s,file){ return function(){ s.files = s.files.filter(function(x){ return x.id !== file.id; }); renumberAll(); renderSections(); renderProgress(); renderCompressControl(); persistState(); }; })(sec,f)); topRow.appendChild(dragHandle); topRow.appendChild(thumb); topRow.appendChild(nameInput); topRow.appendChild(extBadge); topRow.appendChild(sizeTag); topRow.appendChild(dlBtn); topRow.appendChild(delBtn); row.appendChild(topRow); var memoInput = el('input', { type:'text', value: f.memo||'', placeholder:'파일 메모 (간단히)', style:'width:100%;box-sizing:border-box;margin-top:6px;padding:6px 8px;font-size:12px;border:1px solid #ddd;border-radius:6px;' }); memoInput.addEventListener('change', (function(file){ return function(e){ file.memo = e.target.value; persistState(); }; })(f)); row.appendChild(memoInput); return row; } /* ===== 섹션 이동/추가/삭제 ===== */ function moveSection(id, dir){ var i; for(i=0;i<STATE.sections.length;i++){ if(STATE.sections[i].id === id) break; } var ni = i + dir; if(ni < 0 || ni >= STATE.sections.length) return; var tmp = STATE.sections[i]; STATE.sections[i] = STATE.sections[ni]; STATE.sections[ni] = tmp; renumberAll(); renderSections(); persistState(); } function addSection(){ STATE.sections.push({ id: uid(), name: '', desc: '', link: '', exampleLink: '', issueMethod: '', checklist: [], uploadNote:'', exampleFile: null, files: [] }); renumberAll(); renderSections(); renderProgress(); persistState(); } function removeSection(id){ STATE.sections = STATE.sections.filter(function(s){ return s.id !== id; }); renumberAll(); renderSections(); renderProgress(); renderCompressControl(); persistState(); } /* ===== 파일 업로드(원본 보관, 변환은 지연) ===== */ function handleFiles(sec, fileList){ for(var i=0;i<fileList.length;i++){ processOneFile(sec, fileList[i]); } } function processOneFile(sec, file){ var reader = new FileReader(); reader.onload = function(e){ var buf = e.target.result; if(file.type === 'application/pdf'){ PDFLib.PDFDocument.load(buf).then(function(doc){ addFileToSection(sec, file.name, 'pdf', doc.getPageCount(), buf, null); }).catch(function(){ showToast('PDF 읽기 실패: ' + file.name); }); } else if(file.type.indexOf('image/') === 0){ makeThumbnail(buf).then(function(thumb){ addFileToSection(sec, file.name.replace(/\.[^.]+$/, '') + '.pdf', 'image', 1, buf, thumb); }).catch(function(){ addFileToSection(sec, file.name.replace(/\.[^.]+$/, '') + '.pdf', 'image', 1, buf, null); }); } else { showToast('지원하지 않는 형식: ' + file.name); } }; reader.readAsArrayBuffer(file); } function makeThumbnail(arrayBuffer){ return new Promise(function(resolve, reject){ var blob = new Blob([arrayBuffer]); var url = URL.createObjectURL(blob); var img = new Image(); img.onload = function(){ var w = 80, h = Math.round(80 * img.height / img.width); var canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; canvas.getContext('2d').drawImage(img, 0, 0, w, h); URL.revokeObjectURL(url); resolve(canvas.toDataURL('image/jpeg', 0.5)); }; img.onerror = reject; img.src = url; }); } function addFileToSection(sec, originalName, kind, pageCount, buf, thumb){ var f = { id: uid(), baseName: originalName, name: originalName, kind: kind, pages: pageCount, memo:'', thumbDataUrl: thumb || null, rawBase64: arrayBufferToBase64(buf), origSize: buf.byteLength }; sec.files.push(f); renumberAll(); renderSections(); renderProgress(); renderCompressControl(); persistState(); showToast('업로드 완료: ' + originalName); } function handleExampleFile(sec, file){ var reader = new FileReader(); reader.onload = function(e){ var buf = e.target.result; if(file.type === 'application/pdf'){ sec.exampleFile = { name: file.name, pdfDataUrl: 'data:application/pdf;base64,' + arrayBufferToBase64(buf) }; renderSections(); persistState(); } else if(file.type.indexOf('image/') === 0){ imageBufferToPdfBytes(buf, COMPRESS_PRESETS.standard).then(function(bytes){ sec.exampleFile = { name: file.name.replace(/\.[^.]+$/, '') + '.pdf', pdfDataUrl: 'data:application/pdf;base64,' + arrayBufferToBase64(bytes.buffer || bytes) }; renderSections(); persistState(); }); } else { showToast('지원하지 않는 형식입니다'); } }; reader.readAsArrayBuffer(file); } /* ===== 변환(지연 실행, 압축강도 반영) ===== */ function convertFileToPdfBytes(file){ if(file.kind === 'pdf'){ return Promise.resolve(base64ToUint8(file.rawBase64)); } var preset = COMPRESS_PRESETS[STATE.options.compressLevel || 'standard']; var raw = base64ToUint8(file.rawBase64); return imageBufferToPdfBytes(raw.buffer, preset); } function imageBufferToPdfBytes(arrayBuffer, preset){ return new Promise(function(resolve, reject){ var blob = new Blob([arrayBuffer]); var url = URL.createObjectURL(blob); var img = new Image(); img.onload = function(){ var w = img.width, h = img.height; if(w > preset.maxWidth){ h = Math.round(h * (preset.maxWidth/w)); w = preset.maxWidth; } var canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, w, h); var jpegUrl = canvas.toDataURL('image/jpeg', preset.quality); URL.revokeObjectURL(url); var b64 = jpegUrl.split(',')[1]; var bin = atob(b64); var bytes = new Uint8Array(bin.length); for(var i=0;i<bin.length;i++){ bytes[i] = bin.charCodeAt(i); } PDFLib.PDFDocument.create().then(function(pdfDoc){ return pdfDoc.embedJpg(bytes).then(function(jpgImg){ var page = pdfDoc.addPage([jpgImg.width, jpgImg.height]); page.drawImage(jpgImg, { x:0, y:0, width: jpgImg.width, height: jpgImg.height }); return pdfDoc.save(); }); }).then(resolve).catch(reject); }; img.onerror = reject; img.src = url; }); } /* ===== 전체취합 ===== */ function mergeAndDownload(){ var flat = flattenFiles(); if(flat.length === 0){ showToast('업로드된 파일이 없습니다'); return; } showToast('취합 중...'); var chain = PDFLib.PDFDocument.create(); chain.then(function(mergedDoc){ var p = Promise.resolve(); flat.forEach(function(f){ p = p.then(function(){ return convertFileToPdfBytes(f).then(function(bytes){ return PDFLib.PDFDocument.load(bytes).then(function(src){ return mergedDoc.copyPages(src, src.getPageIndices()).then(function(pages){ pages.forEach(function(pg){ mergedDoc.addPage(pg); }); }); }); }); }); }); return p.then(function(){ return mergedDoc; }); }).then(function(mergedDoc){ return mergedDoc.embedFont(PDFLib.StandardFonts.Helvetica).then(function(font){ var pages = mergedDoc.getPages(); var total = pages.length; pages.forEach(function(p, idx){ var sz = p.getSize(); if(STATE.options.pagenum){ p.drawText((idx+1) + ' / ' + total, { x: sz.width-70, y:16, size:9, font:font, color: PDFLib.rgb(0.4,0.4,0.4) }); } if(STATE.options.watermark){ p.drawText(STATE.title || '문서', { x:12, y: sz.height-18, size:8, font:font, color: PDFLib.rgb(0.6,0.6,0.6), opacity:0.7 }); } }); return mergedDoc.save(); }); }).then(function(bytes){ downloadBytes(bytes, (STATE.title||'취합서류') + '_' + todayStr() + '.pdf'); showToast('취합 완료 · 실제 용량 ' + fmtBytes(bytes.length)); }).catch(function(err){ showToast('취합 실패: ' + (err && err.message ? err.message : '오류')); }); } function saveFilesSeparately(){ var flat = flattenFiles(); if(flat.length === 0){ showToast('업로드된 파일이 없습니다'); return; } if(!window.JSZip){ showToast('압축 기능을 불러오지 못했습니다'); return; } showToast('압축 파일 만드는 중...'); var zip = new JSZip(); var usedNames = {}; var p = Promise.resolve(); flat.forEach(function(f){ p = p.then(function(){ return convertFileToPdfBytes(f).then(function(bytes){ var zname = f.name + '.pdf'; if(usedNames[zname]){ usedNames[zname]++; zname = f.name + '_' + usedNames[zname] + '.pdf'; } else { usedNames[zname] = 1; } zip.file(zname, bytes); }); }); }); p.then(function(){ return zip.generateAsync({ type:'uint8array', compression:'DEFLATE', compressionOptions:{ level:6 } }); }).then(function(content){ downloadBytes(content, (STATE.title||'서류') + '_개별파일_' + todayStr() + '.zip', 'application/zip'); showToast('압축 저장 완료 · 실제 용량 ' + fmtBytes(content.length)); }).catch(function(){ showToast('압축 저장 실패'); }); } /* ===== 보내기(링크/QR/TinyURL) ===== */ function shareLink(){ var hasFile = false; for(var i=0;i<STATE.sections.length;i++){ if(STATE.sections[i].files.length>0){ hasFile = true; break; } } $('drc-share-modal').style.display = 'block'; document.body.style.overflow = 'hidden'; var box = $('drc-share-box'); box.innerHTML = ''; if(hasFile){ var warn = el('div', { style:'color:#a33;font-size:13px;padding:10px;background:#fdecec;border-radius:8px;' }); warn.textContent = '파일이 첨부된 상태에서는 링크 공유가 불가합니다. (요청 항목만 있을 때 사용)'; box.appendChild(warn); return; } var tpl = { title: STATE.title, requesterMsg: STATE.requesterMsg, submitterMsg: STATE.submitterMsg, guideCollapsed: STATE.guideCollapsed, sections: [] }; for(var i=0;i<STATE.sections.length;i++){ var s = STATE.sections[i]; tpl.sections.push({ name: s.name, desc: s.desc, link: s.link, exampleLink: s.exampleLink, issueMethod: s.issueMethod, checklist: s.checklist, uploadNote: s.uploadNote }); } var compressed = LZString.compressToEncodedURIComponent(JSON.stringify(tpl)); var url = window.location.origin + window.location.pathname + '?tpl=' + compressed; var urlDiv = el('div', { style:'margin-bottom:8px;padding:8px;background:#f7f7f5;border-radius:8px;' }); urlDiv.textContent = url.length > 300 ? '(주소가 길어 짧은 URL 사용을 권장합니다)' : url; box.appendChild(urlDiv); var btnRow = el('div', { style:'display:flex;gap:6px;flex-wrap:wrap;' }); var copyBtn = el('button', { type:'button', style:'padding:8px 12px;font-size:12px;background:#eee;border-radius:6px;' }); copyBtn.textContent = '주소 복사'; copyBtn.addEventListener('click', function(){ copyToClipboard(url); }); var tinyBtn = el('button', { type:'button', style:'padding:8px 12px;font-size:12px;background:#eee;border-radius:6px;' }); tinyBtn.textContent = '짧은 URL 만들기'; tinyBtn.addEventListener('click', function(){ fetch('https://tinyurl.com/api-create.php?url=' + encodeURIComponent(url)) .then(function(r){ return r.text(); }) .then(function(short){ urlDiv.textContent = short; copyBtn.onclick = function(){ copyToClipboard(short); }; drawQr(short); }).catch(function(){ showToast('짧은 URL 생성 실패'); }); }); btnRow.appendChild(copyBtn); btnRow.appendChild(tinyBtn); box.appendChild(btnRow); var qrHolder = el('div', { id:'drc-qr-holder', style:'margin-top:10px;text-align:center;' }); box.appendChild(qrHolder); drawQr(url); } function drawQr(url){ var holder = $('drc-qr-holder'); if(!holder || !window.QRCode) return; holder.innerHTML = ''; new QRCode(holder, { text: url, width:140, height:140 }); } function copyToClipboard(text){ if(navigator.clipboard && navigator.clipboard.writeText){ navigator.clipboard.writeText(text).then(function(){ showToast('복사됨'); }).catch(function(){ fallbackCopy(text); }); } else { fallbackCopy(text); } } function fallbackCopy(text){ var ta = document.createElement('textarea'); ta.value = text; ta.style.position='fixed'; ta.style.left='-999px'; document.body.appendChild(ta); ta.focus(); ta.select(); try{ document.execCommand('copy'); showToast('복사됨'); }catch(e){ showToast('복사 실패'); } document.body.removeChild(ta); } /* ===== 수정가능파일 저장/불러오기 (JSON) ===== */ function exportEditableJson(){ var dataStr = JSON.stringify(STATE); var blob = new Blob([dataStr], { type:'application/json' }); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = (STATE.title||'서류요청') + '_수정가능_' + todayStr() + '.json'; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.setTimeout(function(){ URL.revokeObjectURL(url); }, 3000); showToast('수정가능 파일 저장 완료 · 0-1.kr/29 에서 다시 불러와 수정할 수 있어요'); } function importEditableJson(file){ var reader = new FileReader(); reader.onload = function(e){ try{ var parsed = JSON.parse(e.target.result); if(!parsed || !parsed.sections) throw new Error('invalid'); STATE = parsed; if(!STATE.options) STATE.options = defaultOptions(); renderAll(); persistState(true); showToast('파일 불러오기 완료 · 0-1.kr/29 에서 언제든 다시 불러와 수정할 수 있어요'); }catch(err){ showToast('파일을 읽을 수 없습니다(json 형식만 지원)'); } }; reader.readAsText(file); } /* ===== 이벤트 바인딩 ===== */ function bindEvents(){ $('drc-btn-add-section').addEventListener('click', addSection); $('drc-toggle-options').addEventListener('click', function(){ var panel = $('drc-options-panel'); var open = panel.style.display !== 'none'; panel.style.display = open ? 'none' : 'block'; this.textContent = (open?'▸':'▾') + ' 취합 옵션 ' + (open?'펼치기':'접기'); }); $('drc-input-title').addEventListener('change', function(e){ STATE.title = e.target.value; persistState(); }); $('drc-toggle-guide').addEventListener('click', function(){ STATE.guideCollapsed = !STATE.guideCollapsed; applyGuideCollapsed(); persistState(); }); $('drc-input-req-msg').addEventListener('change', function(e){ STATE.requesterMsg = e.target.value; persistState(); }); $('drc-input-sub-msg').addEventListener('change', function(e){ STATE.submitterMsg = e.target.value; persistState(); }); $('drc-btn-share-top').addEventListener('click', shareLink); $('drc-share-close').addEventListener('click', function(){ $('drc-share-modal').style.display='none'; document.body.style.overflow=''; }); $('drc-opt-prefix').addEventListener('change', function(e){ STATE.options.prefixNaming = e.target.checked; renumberAll(); renderSections(); persistState(); }); $('drc-opt-watermark').addEventListener('change', function(e){ STATE.options.watermark = e.target.checked; persistState(); }); $('drc-opt-pagenum').addEventListener('change', function(e){ STATE.options.pagenum = e.target.checked; persistState(); }); $('drc-btn-merge-top').addEventListener('click', mergeAndDownload); $('drc-btn-merge').addEventListener('click', mergeAndDownload); $('drc-btn-export-top').addEventListener('click', exportEditableJson); $('drc-btn-export-json').addEventListener('click', exportEditableJson); $('drc-btn-export-tip').addEventListener('click', function(e){ e.stopPropagation(); var b = $('drc-export-tip-bubble'); b.style.display = b.style.display === 'none' ? 'block' : 'none'; }); $('drc-btn-save-separate').addEventListener('click', saveFilesSeparately); var importInput = $('drc-import-file-input'); function triggerImport(){ importInput.click(); } $('drc-btn-import-top').addEventListener('click', triggerImport); $('drc-btn-import-json').addEventListener('click', triggerImport); importInput.addEventListener('change', function(e){ if(e.target.files[0]) importEditableJson(e.target.files[0]); e.target.value = ''; }); $('drc-btn-manual').addEventListener('click', function(){ $('drc-manual-modal').style.display='block'; document.body.style.overflow='hidden'; }); $('drc-manual-close').addEventListener('click', function(){ $('drc-manual-modal').style.display='none'; document.body.style.overflow=''; }); } /* ===== 초기화 ===== */ function init(){ bindEvents(); loadInitialState().then(function(state){ STATE = state; if(!STATE.options) STATE.options = defaultOptions(); renderAll(); persistState(true); }).catch(function(){ STATE = defaultState(); renderAll(); }); } if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', init); } else { init(); } })(); </script> 모두의계산기/PDF취합관련 최매슨생 https://0-1.kr/23 https://0-1.kr/23#entry23comment Thu, 12 Nov 2020 21:11:37 +0900 https://0-1.kr/22 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>발표장타이머 | 스타트업EX</title> <style> *{margin:0;padding:0;box-sizing:border-box;} body{background:#f0f2f5;color:#222;font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif;} /* ===== 메인 페이지 ===== */ #page-main{display:none;padding:0 0 60px;background:#f0f2f5;min-height:100vh;} .main-wrap{max-width:600px;margin:0 auto;padding:0 16px;} /* 상단 헤더 */ .main-top{display:flex;align-items:center;justify-content:space-between;padding:20px 0 14px;border-bottom:1px solid #e2e8f0;margin-bottom:16px;} .main-top-left{} .main-title{font-size:22px;font-weight:900;letter-spacing:-0.5px;color:#1a1a2e;line-height:1;} .main-version{font-size:11px;color:#aab;margin-top:3px;font-weight:500;} .main-share-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:#1a1a2e;border:none;border-radius:10px;color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;} .main-share-btn:hover{background:#2d2d4e;transform:translateY(-1px);} .main-share-btn svg{width:16px;height:16px;} /* 설명 + 사용방법 */ .main-desc{font-size:14px;color:#556;margin-bottom:14px;line-height:1.6;} .main-desc b{color:#3b82f6;} .accordion{background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:14px;overflow:hidden;box-shadow:0 1px 4px #0001;} .accordion-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;font-size:14px;font-weight:700;color:#1a1a2e;} .accordion-head:hover{background:#f8fafc;} .accordion-arrow{font-size:12px;color:#aab;transition:transform .2s;} .accordion-arrow.open{transform:rotate(180deg);} .accordion-body{display:none;padding:0 16px 14px;font-size:13px;color:#556;line-height:1.9;border-top:1px solid #f0f2f5;} .accordion-body.open{display:block;} .accordion-body b{color:#3b82f6;} .accordion-body .step{display:flex;gap:10px;margin-bottom:8px;align-items:flex-start;} .accordion-body .step-num{width:22px;height:22px;background:#3b82f6;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px;} /* 미리보기 */ .preview-wrap{background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;margin-bottom:16px;box-shadow:0 2px 12px #0002;} .preview-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1a1a2e;} .preview-head-title{font-size:13px;font-weight:700;color:rgba(255,255,255,0.7);} .preview-tabs{display:flex;gap:4px;} .preview-tab{padding:4px 10px;background:rgba(255,255,255,0.08);border:none;border-radius:6px;color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;} .preview-tab.on{background:rgba(96,165,250,0.25);color:#60a5fa;} .preview-body{height:220px;background:#1a1a2e;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;overflow:hidden;} .preview-clock{text-align:center;} .preview-clock .p-hm{font-size:64px;font-weight:200;color:#fff;letter-spacing:4px;line-height:1;} .preview-clock .p-sec{font-size:22px;color:rgba(255,255,255,0.5);margin-top:4px;} .preview-clock .p-date{font-size:13px;color:rgba(255,255,255,0.4);margin-top:6px;} .preview-timer{text-align:center;} .preview-timer .p-tmr{font-size:64px;font-weight:100;color:#fff;letter-spacing:6px;line-height:1;} .preview-timer .p-tmr-st{font-size:13px;color:rgba(255,255,255,0.4);margin-top:8px;} .preview-timer .p-tmr-btns{display:flex;gap:8px;margin-top:14px;justify-content:center;} .preview-timer .p-btn{padding:8px 18px;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;} .preview-sw{text-align:center;} .preview-sw .p-sw{font-size:56px;font-weight:200;color:#fff;letter-spacing:4px;} .preview-sw .p-sw-ms{font-size:28px;color:rgba(255,255,255,0.4);} .preview-sw .p-sw-btns{display:flex;gap:8px;margin-top:14px;justify-content:center;} .preview-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#111827;border-top:1px solid rgba(255,255,255,0.06);} .preview-footer-btns{display:flex;gap:6px;} .pf-btn{padding:5px 10px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.4);border-radius:6px;font-size:11px;cursor:pointer;font-family:inherit;} .pf-btn.on{color:#60a5fa;background:rgba(96,165,250,0.12);border-color:rgba(96,165,250,0.3);} .preview-wm{font-size:10px;color:rgba(255,255,255,0.15);} /* 버튼 */ .main-btns{display:flex;gap:12px;margin:16px 0;} .main-btn{flex:1;padding:18px 8px;border:none;border-radius:14px;font-size:16px;font-weight:800;cursor:pointer;transition:all .2s;font-family:inherit;} .main-btn-full{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 6px 24px #3b82f640;} .main-btn-full:hover{transform:translateY(-2px);box-shadow:0 8px 32px #3b82f660;} .main-btn-popup{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 6px 24px #10b98140;} .main-btn-popup:hover{transform:translateY(-2px);box-shadow:0 8px 32px #10b98160;} /* 기능카드 */ .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0;} .feat-card{background:#fff;border:1px solid #e8ecf0;border-radius:14px;padding:14px 13px;box-shadow:0 1px 4px #0001;} .feat-icon{font-size:24px;margin-bottom:7px;} .feat-title{font-size:13px;font-weight:700;color:#1a1a2e;margin-bottom:3px;} .feat-desc{font-size:12px;color:#778;line-height:1.6;} .key-box{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 16px;margin:14px 0;box-shadow:0 1px 4px #0001;} .key-box-title{font-size:11px;font-weight:700;color:#aab;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;} .key-list{display:flex;gap:6px;flex-wrap:wrap;} .key-badge{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;font-size:12px;color:#556;} .ad-wrap{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:12px;text-align:center;margin:14px 0;min-height:60px;display:flex;align-items:center;justify-content:center;} .ad-label{font-size:11px;color:#bbb;} /* 하단 푸터 */ .main-footer{text-align:center;margin-top:32px;padding:24px 0;border-top:2px solid #e2e8f0;} .main-footer-brand{font-size:18px;font-weight:900;color:#1a1a2e;letter-spacing:-0.5px;} .main-footer-brand span{color:#3b82f6;} .main-footer-sub{font-size:12px;color:#aab;margin-top:4px;} .main-footer-sub a{color:#3b82f6;text-decoration:none;} /* QR 모달 */ #qr-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.55);align-items:center;justify-content:center;} #qr-modal.on{display:flex;} .qr-box{background:#fff;border-radius:20px;padding:28px 24px;max-width:340px;width:90%;text-align:center;box-shadow:0 20px 60px #0003;} .qr-title{font-size:17px;font-weight:800;color:#1a1a2e;margin-bottom:4px;} .qr-sub{font-size:12px;color:#778;margin-bottom:16px;} #qr-canvas{margin:0 auto 16px;display:block;} .qr-url{font-size:11px;color:#556;word-break:break-all;background:#f8fafc;border-radius:8px;padding:8px;margin-bottom:14px;font-family:monospace;} .qr-btns{display:flex;gap:8px;} .qr-btn{flex:1;padding:10px;border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;} .qr-btn-copy{background:#1a1a2e;color:#fff;} .qr-btn-close{background:#f0f2f5;color:#556;} /* ===== 앱 화면 — 티스토리 스킨 완전 차단 ===== */ #page-app{ display:none; position:fixed!important; top:0!important;left:0!important;right:0!important;bottom:0!important; width:100vw!important;height:100vh!important; z-index:2147483647!important; flex-direction:column; background:#1a1a2e; overflow:hidden; } /* 배경 */ #app-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transition:filter .3s;} #app-bg-overlay{position:absolute;inset:0;z-index:1;transition:background .3s;} /* 탭바 */ #tab-bar{position:relative;z-index:2;display:flex;background:rgba(255,255,255,0.07);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.1);flex-shrink:0;height:44px;transition:height .2s,opacity .2s;} #tab-bar.hidden{height:0!important;opacity:0;overflow:hidden;pointer-events:none;} #tab-bar button{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:rgba(255,255,255,0.4);font-size:12px;font-weight:700;cursor:pointer;transition:all .18s;font-family:inherit;} #tab-bar button.on{color:#fff;border-bottom-color:#60a5fa;} #tab-bar button:hover{color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.05);} /* 메뉴 숨김 토글 버튼 */ #menu-toggle{position:absolute;top:50%;right:10px;transform:translateY(-50%);z-index:200;width:28px;height:28px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:50%;color:rgba(255,255,255,0.5);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;} #menu-toggle:hover{background:rgba(255,255,255,0.2);color:#fff;} /* 메뉴 숨겼을때 복원 버튼 */ #menu-restore{position:absolute;bottom:50px;right:10px;z-index:200;padding:6px 12px;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.2);border-radius:20px;color:rgba(255,255,255,0.6);font-size:11px;cursor:pointer;display:none;backdrop-filter:blur(8px);} #menu-restore:hover{background:rgba(0,0,0,0.7);color:#fff;} #main-area{flex:1;position:relative;overflow:hidden;z-index:2;min-height:0;} .tab-panel{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:8px 12px;} .tab-panel.on{display:flex;} /* ===== 시계 — 3단 레이아웃 ===== */ #tab-clock{justify-content:center;gap:0;padding:4px 8px;overflow:hidden;} #clk-info{text-align:center;margin-bottom:6px;flex-shrink:0;} #clk-info-row1{font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:0.5px;font-weight:400;line-height:1.8;} #clk-info-row2{font-size:11px;color:rgba(255,255,255,0.28);margin-top:1px;letter-spacing:0.5px;} #clk-date{font-size:18px;color:rgba(255,255,255,0.7);margin-top:4px;font-weight:600;letter-spacing:0.5px;} /* 시:분 — fit-content로 가로폭 최대 활용 */ #clk-hm{text-align:center;line-height:1;text-shadow:0 2px 24px rgba(0,0,0,0.5); transition:color .4s;letter-spacing:2px;font-weight:200; width:100%;white-space:nowrap;flex-shrink:0; /* 가로폭 꽉차게: viewport 너비 기준 font-size 자동계산 */ } #clk-sec{text-align:center;margin-top:4px;letter-spacing:3px;font-weight:300; text-shadow:0 1px 12px rgba(0,0,0,0.5);flex-shrink:0;} #clk-bottom{position:absolute;bottom:0;left:0;right:0;padding:8px 14px;pointer-events:none;} #clk-fixed{text-align:center;min-height:20px;margin-bottom:4px;text-shadow:0 1px 8px #0006;font-weight:500;} #clk-ticker-wrap{overflow:hidden;white-space:nowrap;display:none;background:rgba(0,0,0,0.25);border-radius:6px;padding:4px 0;pointer-events:auto;} #clk-ticker-inner{display:inline-block;animation:marquee 16s linear infinite;color:#60a5fa;padding:0 12px;} @keyframes marquee{0%{transform:translateX(100vw);}100%{transform:translateX(-100%);}} /* ===== 타이머 ===== */ #tab-timer{justify-content:center;gap:0;padding:6px 12px;} #tmr-display{text-align:center;line-height:1;text-shadow:0 2px 24px rgba(0,0,0,0.6);transition:color .3s,font-size .3s;font-weight:100;letter-spacing:6px;max-width:100%;overflow:hidden;flex-shrink:0;} #tmr-display.w1{color:#fbbf24;} #tmr-display.w2{color:#f97316;} #tmr-display.w3{color:#ef4444;animation:blink .7s infinite;} @keyframes blink{0%,100%{opacity:1;}50%{opacity:.15};} #tmr-state{font-size:13px;color:rgba(255,255,255,0.35);margin-top:6px;text-align:center;letter-spacing:2px;font-weight:500;flex-shrink:0;} /* 스핀 UI */ #tmr-spin-wrap{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:10px;flex-shrink:0;} .tmr-spin-group{display:flex;flex-direction:column;align-items:center;gap:2px;} .tmr-spin-up,.tmr-spin-dn{width:36px;height:26px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.5);border-radius:7px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all .12s;font-family:inherit;} .tmr-spin-up:hover,.tmr-spin-dn:hover{background:rgba(96,165,250,0.25);border-color:#60a5fa;color:#fff;} .tmr-spin-val{font-size:28px;font-weight:300;color:#fff;line-height:1;min-width:52px;text-align:center;letter-spacing:2px;} .tmr-spin-lbl{font-size:10px;color:rgba(255,255,255,0.28);margin-top:1px;letter-spacing:1px;} .tmr-spin-colon{font-size:28px;color:rgba(255,255,255,0.3);margin-bottom:16px;font-weight:200;} /* ===== 스톱워치 — 2열 레이아웃 ===== */ #sw-left{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;} #sw-display{text-align:center;text-shadow:0 2px 20px rgba(0,0,0,0.5);font-weight:200;letter-spacing:4px;transition:font-size .3s;overflow:hidden;flex-shrink:0;line-height:1;} #sw-ms{color:rgba(255,255,255,0.35);} #sw-btns{display:flex;gap:8px;margin-top:14px;flex-shrink:0;justify-content:center;flex-wrap:wrap;} #sw-right{width:200px;flex-shrink:0;display:flex;flex-direction:column;height:100%;padding:8px 8px 8px 0;} #lap-header{font-size:11px;font-weight:700;color:rgba(255,255,255,0.25);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;text-align:center;} #lap-list{flex:1;overflow-y:auto;border-radius:10px;background:rgba(255,255,255,0.03);} #lap-list::-webkit-scrollbar{width:3px;} #lap-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px;} .lap-row{display:flex;justify-content:space-between;padding:6px 10px;font-size:12px;border-bottom:1px solid rgba(255,255,255,0.04);} .lap-row span:first-child{color:rgba(255,255,255,0.3);font-size:11px;} .lap-row span:last-child{color:#e2e8f0;font-variant-numeric:tabular-nums;font-weight:500;} .lap-latest{background:rgba(96,165,250,0.15)!important;} .lap-latest span:last-child{color:#60a5fa!important;font-weight:700;} /* ===== 미디어 ===== */ #media-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;} #media-img{max-width:100%;max-height:100%;object-fit:contain;transition:object-fit .2s;} #media-img.fit-fill{object-fit:cover;width:100%;height:100%;} #media-img.fit-origin{max-width:none;max-height:none;object-fit:none;} #media-banner{width:100%;height:100%;display:none;align-items:center;justify-content:center;padding:20px;} #media-banner-txt{font-size:52px;font-weight:800;text-align:center;line-height:1.25;word-break:keep-all;text-shadow:0 2px 20px rgba(0,0,0,0.5);transition:font-size .3s;} #media-drop{color:rgba(255,255,255,0.25);font-size:14px;text-align:center;line-height:2.6;} #media-drop label{color:#60a5fa;cursor:pointer;display:block;} #media-nav{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5;} #media-cnt{position:absolute;top:10px;right:12px;font-size:12px;color:rgba(255,255,255,0.3);z-index:5;} /* ===== 버튼 ===== */ .btn{padding:0 24px;height:44px;border:none;border-radius:12px;cursor:pointer;font-size:15px;font-weight:700;font-family:inherit;transition:all .15s;letter-spacing:-0.3px;display:inline-flex;align-items:center;justify-content:center;line-height:1;} .btn-blue{background:#3b82f6;color:#fff;box-shadow:0 2px 12px #3b82f640;}.btn-blue:hover{background:#2563eb;transform:translateY(-1px);} .btn-green{background:#10b981;color:#fff;box-shadow:0 2px 12px #10b98140;}.btn-green:hover{background:#059669;transform:translateY(-1px);} .btn-red{background:#ef4444;color:#fff;box-shadow:0 2px 12px #ef444440;}.btn-red:hover{background:#dc2626;transform:translateY(-1px);} .btn-gray{background:rgba(255,255,255,0.13);color:#ddd;border:1px solid rgba(255,255,255,0.18);}.btn-gray:hover{background:rgba(255,255,255,0.22);} .btn-sm{height:38px;padding:0 16px;font-size:13px;} .btn-nav{padding:8px 20px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#ddd;border-radius:10px;cursor:pointer;font-size:14px;font-family:inherit;font-weight:600;} .btn-nav:hover{background:rgba(255,255,255,0.2);} /* 타이머/스톱워치 버튼 그룹 정렬 */ #tmr-btns,#sw-btns{display:flex;gap:10px;margin-top:12px;justify-content:center;align-items:center;flex-wrap:wrap;flex-shrink:0;} #media-nav{gap:12px;} /* ===== 하단 툴바 ===== */ #tool-bar{position:relative;z-index:2;background:rgba(0,0,0,0.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;padding:5px 10px;gap:4px;flex-shrink:0;transition:height .2s,opacity .2s;} #tool-bar.hidden{height:0!important;opacity:0;overflow:hidden;pointer-events:none;} .tool-btn{height:32px;min-width:32px;padding:0 6px;background:none;border:none;color:rgba(255,255,255,0.4);cursor:pointer;font-size:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .15s;white-space:nowrap;} .tool-btn:hover{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.9);} .tool-btn.on{color:#60a5fa;background:rgba(96,165,250,0.14);} .tool-sep{width:1px;height:22px;background:rgba(255,255,255,0.1);margin:0 2px;flex-shrink:0;} #tool-label{flex:1;font-size:10px;color:rgba(255,255,255,0.1);text-align:right;padding-right:4px;} #ad-bar{position:relative;z-index:2;background:rgba(0,0,0,0.3);border-top:1px solid rgba(255,255,255,0.06);text-align:center;padding:5px;display:none;} /* 꽉차게 버튼 */ #tb-fit{font-size:12px;font-weight:700;padding:0 10px;height:28px;border-radius:14px;background:rgba(96,165,250,0.15);border:1px solid rgba(96,165,250,0.3);color:#60a5fa;} #tb-fit:hover{background:rgba(96,165,250,0.28);color:#93c5fd;} /* ===== 설정 패널 ===== */ #set-panel{position:absolute;top:0;right:0;bottom:0;width:252px;background:rgba(12,12,24,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-left:1px solid rgba(255,255,255,0.1);overflow-y:auto;padding:14px 16px;z-index:50;transform:translateX(100%);transition:transform .22s;} #set-panel.on{transform:translateX(0);} .set-close{float:right;background:none;border:none;color:rgba(255,255,255,0.35);font-size:18px;cursor:pointer;margin-top:-2px;} .set-close:hover{color:#fff;} .set-title{font-size:13px;font-weight:700;color:#e2e8f0;margin-bottom:6px;} .set-h{font-size:10px;font-weight:700;color:rgba(255,255,255,0.22);letter-spacing:1.5px;text-transform:uppercase;margin:14px 0 7px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,0.07);} .set-h:first-of-type{margin-top:4px;} .set-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:12px;} .set-row label{color:rgba(255,255,255,0.45);} .set-row input[type=color]{width:32px;height:24px;border:none;background:none;cursor:pointer;border-radius:4px;} .set-row input[type=number]{width:56px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);color:#fff;border-radius:6px;padding:3px 6px;font-size:12px;text-align:center;} .set-row input[type=range]{width:80px;accent-color:#60a5fa;} .set-row input[type=checkbox]{cursor:pointer;accent-color:#60a5fa;width:15px;height:15px;} .set-row select{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);color:#ccc;border-radius:6px;padding:3px 6px;font-size:12px;cursor:pointer;} .set-full{width:100%;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.13);color:#ccc;border-radius:6px;padding:5px 8px;font-size:12px;margin-bottom:8px;font-family:inherit;} .set-full::placeholder{color:rgba(255,255,255,0.18);} textarea.set-full{resize:vertical;} .msg-row{display:flex;gap:4px;margin-bottom:5px;} .msg-row input[type=time]{width:72px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.13);color:#ccc;border-radius:5px;padding:3px 4px;font-size:11px;} .msg-row input[type=text]{flex:1;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.13);color:#ccc;border-radius:5px;padding:3px 6px;font-size:11px;} .msg-row button{background:rgba(255,255,255,0.06);border:none;color:rgba(255,255,255,0.28);border-radius:5px;padding:3px 7px;cursor:pointer;font-size:11px;} .set-save-btn{width:100%;padding:9px;background:#3b82f6;border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:700;cursor:pointer;margin-top:8px;} .set-save-btn:hover{background:#2563eb;} .set-hint{font-size:10px;color:rgba(255,255,255,0.18);margin-bottom:6px;line-height:1.6;} .set-hint b{color:rgba(255,255,255,0.35);} .bg-upload-btn{width:100%;padding:8px;background:rgba(255,255,255,0.06);border:1px dashed rgba(255,255,255,0.18);border-radius:8px;color:rgba(255,255,255,0.45);font-size:12px;cursor:pointer;margin-bottom:6px;text-align:center;display:block;} .bg-upload-btn:hover{background:rgba(255,255,255,0.1);color:#ccc;} .fit-btns{display:flex;gap:5px;margin-bottom:8px;} .fit-btn{flex:1;padding:5px 2px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.13);color:rgba(255,255,255,0.45);border-radius:6px;cursor:pointer;font-size:11px;text-align:center;font-family:inherit;transition:all .15s;} .fit-btn.on,.fit-btn:hover{background:rgba(96,165,250,0.18);border-color:#60a5fa;color:#60a5fa;} /* ===== 레이저 ===== */ #laser{position:fixed;pointer-events:none;z-index:2147483647;display:none;top:0;left:0;} #laser-dot{position:absolute;border-radius:50%;transform:translate(-50%,-50%);} /* ===== 닫기 버튼 ===== */ #app-close{position:absolute;top:50px;left:10px;z-index:100;background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.6);font-size:12px;border-radius:8px;padding:4px 12px;cursor:pointer;display:none;font-family:inherit;} #app-close:hover{color:#fff;background:rgba(255,255,255,0.18);} /* ===== 스킨 강제 숨김 JS로 처리 ===== */ </style> </head> <body> <div id="laser"><div id="laser-dot"></div></div> <!-- QR 모달 --> <div id="qr-modal"> <div class="qr-box"> <div class="qr-title"> 공유 QR / URL</div> <div class="qr-sub">현재 설정값을 URL로 공유합니다</div> <canvas id="qr-canvas" width="180" height="180"></canvas> <div class="qr-url" id="qr-url-text"></div> <div class="qr-btns"> <button class="qr-btn qr-btn-copy" onclick="TIMER.copyShareUrl()"> URL 복사</button> <button class="qr-btn qr-btn-close" onclick="TIMER.closeQr()">닫기</button> </div> </div> </div> <!-- ======================== 메인 페이지 ======================== --> <div id="page-main"> <div class="main-wrap"> <!-- 상단 헤더: 타이틀 좌 / 공유버튼 우 --> <div class="main-top"> <div class="main-top-left"> <div class="main-title"> 모두의 팝업타이머</div> <div class="main-version">v9 · 스타트업EX</div> </div> <button class="main-share-btn" onclick="TIMER.openQr()"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h2v2h-2zM18 14h3M14 18v3M18 18h3v3h-3z"/></svg> QR / URL 공유 </button> </div> <!-- 간단 설명 --> <div class="main-desc"> <b>모두의 팝업타이머</b>는 전체보기 또는 팝업타이머로 사용가능합니다.<br> 발표·강의·행사 현장에서 항상 화면 위에 떠있는 타이머를 경험해보세요. </div> <!-- 광고 상단 --> <div class="ad-wrap"><span class="ad-label">광고 영역 (상단)</span></div> <!-- 실행 버튼 --> <div class="main-btns"> <button class="main-btn main-btn-full" onclick="TIMER.openFull()">⛶ 전체보기</button> <button class="main-btn main-btn-popup" onclick="TIMER.openPopup()"> 팝업보기</button> </div> <!-- 미리보기 --> <div class="preview-wrap"> <div class="preview-head"> <div class="preview-head-title"> 미리보기 — 직접 조작해보세요</div> <div class="preview-tabs"> <button class="preview-tab on" onclick="PV.tab('clock')">시계</button> <button class="preview-tab" onclick="PV.tab('timer')">타이머</button> <button class="preview-tab" onclick="PV.tab('sw')">스톱워치</button> </div> </div> <div class="preview-body"> <!-- 미리보기 시계 --> <div id="pv-clock" class="preview-clock"> <div class="p-date" id="pv-date"></div> <div class="p-hm" id="pv-hm">00:00</div> <div class="p-sec" id="pv-sec">00초</div> </div> <!-- 미리보기 타이머 --> <div id="pv-timer" class="preview-timer" style="display:none;"> <div class="p-tmr" id="pv-tmr-disp">10:00</div> <div class="p-tmr-st" id="pv-tmr-st">대기중</div> <div class="p-tmr-btns"> <button class="p-btn" style="background:#10b981;color:#fff;" id="pv-start" onclick="PV.startTmr()">▶ 시작</button> <button class="p-btn" style="background:rgba(255,255,255,0.15);color:#ddd;" onclick="PV.resetTmr()">↺ 초기화</button> </div> </div> <!-- 미리보기 스톱워치 --> <div id="pv-sw" class="preview-sw" style="display:none;"> <div class="p-sw" id="pv-sw-disp">00:00<span class="p-sw-ms">.00</span></div> <div class="p-sw-btns"> <button class="p-btn" style="background:#10b981;color:#fff;" id="pv-sw-btn" onclick="PV.startSw()">▶ 시작</button> <button class="p-btn" style="background:rgba(255,255,255,0.15);color:#ddd;" onclick="PV.resetSw()">↺ 초기화</button> </div> </div> </div> <div class="preview-footer"> <div class="preview-footer-btns"> <button class="pf-btn on" id="pf-laser"> 레이저</button> <button class="pf-btn" id="pf-full">⛶ 전체화면</button> <button class="pf-btn" id="pf-set">⚙️ 설정</button> </div> <div class="preview-wm">0-1.kr/22 · 스타트업EX</div> </div> </div> <!-- 사용방법 아코디언 --> <div class="accordion"> <div class="accordion-head" onclick="TIMER.toggleAccordion('usage')"> 사용방법 <span class="accordion-arrow" id="arr-usage">▼</span> </div> <div class="accordion-body" id="acc-usage"> <div class="step"><div class="step-num">1</div><div><b>전체보기</b> — 현재 창 위에 타이머가 최상위 레이어로 실행됩니다. 티스토리 스킨보다 위에 표시됩니다.</div></div> <div class="step"><div class="step-num">2</div><div><b>팝업보기</b> — 별도 작은 창이 열립니다. PPT 전체화면 위에 올려두고 사용 가능합니다.</div></div> <div class="step"><div class="step-num">3</div><div>팝업 차단 시 <b>주소창 우측 허용 버튼</b>을 클릭하세요. 한번만 허용하면 이후 자동으로 열립니다.</div></div> <div class="step"><div class="step-num">4</div><div>하단 <b>⚙️ 설정</b> 버튼으로 색상·크기·자막·배경 등을 조절하고 <b> 저장</b>하세요.</div></div> <div class="step"><div class="step-num">5</div><div><b> 꽉차게</b> 버튼으로 글자를 화면에 꽉 차게 키울 수 있습니다.</div></div> </div> </div> <div class="accordion"> <div class="accordion-head" onclick="TIMER.toggleAccordion('setting')"> ⚙️ 설정 방법 <span class="accordion-arrow" id="arr-setting">▼</span> </div> <div class="accordion-body" id="acc-setting"> <div class="step"><div class="step-num">1</div><div>전체보기 또는 팝업보기 실행 후 하단 <b>⚙️ 설정</b> 버튼을 누르세요.</div></div> <div class="step"><div class="step-num">2</div><div><b>시계 색상</b>: 원하는 색상 선택 → 즉시 반영됩니다.</div></div> <div class="step"><div class="step-num">3</div><div><b>자막</b>: 흐르는 자막 체크 후 내용 입력 → 시계 하단에 흐르는 자막이 표시됩니다.</div></div> <div class="step"><div class="step-num">4</div><div><b>시간별 멘트</b>: 시각과 멘트를 입력하면 해당 시각에 자동으로 표시됩니다.</div></div> <div class="step"><div class="step-num">5</div><div><b>배경 이미지</b>: 사진 업로드 후 블러·어둡기를 조절하세요.</div></div> <div class="step"><div class="step-num">6</div><div>설정 완료 후 <b> 설정 저장</b>을 눌러야 다음 실행 시에도 유지됩니다.</div></div> </div> </div> <!-- 기능 카드 --> <div class="feat-grid"> <div class="feat-card"><div class="feat-icon"> </div><div class="feat-title">디지털 시계</div><div class="feat-desc">년도·띠·날짜 상단 표시<br>시분/초 분리 레이아웃</div></div> <div class="feat-card"><div class="feat-icon">⏱</div><div class="feat-title">카운트다운 타이머</div><div class="feat-desc">경고 3단계 색상<br>종료 알림음</div></div> <div class="feat-card"><div class="feat-icon"> </div><div class="feat-title">스톱워치</div><div class="feat-desc">랩 타임 기록<br>분할 시간 저장</div></div> <div class="feat-card"><div class="feat-icon"> </div><div class="feat-title">미디어 뷰어</div><div class="feat-desc">슬라이드쇼·현수막<br>맞춤/채우기/원본 보기</div></div> <div class="feat-card"><div class="feat-icon"> </div><div class="feat-title">레이저포인터</div><div class="feat-desc">색상·크기 선택<br>단축키 L</div></div> <div class="feat-card"><div class="feat-icon"> </div><div class="feat-title">자막 기능</div><div class="feat-desc">흐르는 자막·크기조절<br>시간별 자동 멘트</div></div> <div class="feat-card"><div class="feat-icon"> </div><div class="feat-title">배경 이미지</div><div class="feat-desc">사진 업로드<br>블러·어둡기 조절</div></div> <div class="feat-card"><div class="feat-icon"> </div><div class="feat-title">글자 크기 조절</div><div class="feat-desc">꽉차게·중간·작게<br>화면 크기 자동 계산</div></div> </div> <div class="key-box"> <div class="key-box-title">⌨️ 단축키</div> <div class="key-list"> <span class="key-badge">Space = 시작/정지</span> <span class="key-badge">← → = 슬라이드</span> <span class="key-badge">L = 레이저</span> <span class="key-badge">F = 전체화면</span> <span class="key-badge">Esc = 닫기</span> </div> </div> <div class="ad-wrap"><span class="ad-label">광고 영역 (하단)</span></div> <!-- 하단 푸터 --> <div class="main-footer"> <div class="main-footer-brand">스타트업EX <span>·</span> 0-1.kr/22</div> <div class="main-footer-sub">모두의 팝업타이머 v9 · <a href="https://0-1.kr" target="_blank">0-1.kr</a></div> </div> </div> </div> <!-- ======================== 앱 화면 ======================== --> <div id="page-app"> <div id="app-bg"></div> <div id="app-bg-overlay"></div> <button id="app-close" onclick="TIMER.closeApp()">✕ 닫기</button> <button id="menu-restore" onclick="TIMER.toggleMenus()">메뉴 보기 ▲</button> <div id="tab-bar"> <button class="on" onclick="TIMER.tab('clock')"> 시계</button> <button onclick="TIMER.tab('timer')">⏱ 타이머</button> <button onclick="TIMER.tab('sw')"> 스톱워치</button> <button onclick="TIMER.tab('media')"> 미디어</button> </div> <div id="main-area"> <!-- 시계: 상세 정보 + 3단 구성 --> <div id="tab-clock" class="tab-panel on"> <div id="clk-info"> <div id="clk-info-row1"></div> <div id="clk-info-row2"></div> <div id="clk-date"></div> </div> <div id="clk-hm">00:00</div> <div id="clk-sec">00초</div> <div id="clk-bottom"> <div id="clk-fixed"></div> <div id="clk-ticker-wrap"><span id="clk-ticker-inner"></span></div> </div> </div> <!-- 타이머 --> <div id="tab-timer" class="tab-panel"> <!-- 숫자 직접 조작 UI --> <div id="tmr-spin-wrap"> <div class="tmr-spin-group"> <button class="tmr-spin-up" onclick="TIMER.adjustTmr('h',1)">▲</button> <div class="tmr-spin-val" id="ts-h">00</div> <button class="tmr-spin-dn" onclick="TIMER.adjustTmr('h',-1)">▼</button> <div class="tmr-spin-lbl">시간</div> </div> <div class="tmr-spin-colon">:</div> <div class="tmr-spin-group"> <button class="tmr-spin-up" onclick="TIMER.adjustTmr('m',1)">▲</button> <div class="tmr-spin-val" id="ts-m">10</div> <button class="tmr-spin-dn" onclick="TIMER.adjustTmr('m',-1)">▼</button> <div class="tmr-spin-lbl">분</div> </div> <div class="tmr-spin-colon">:</div> <div class="tmr-spin-group"> <button class="tmr-spin-up" onclick="TIMER.adjustTmr('s',1)">▲</button> <div class="tmr-spin-val" id="ts-s">00</div> <button class="tmr-spin-dn" onclick="TIMER.adjustTmr('s',-1)">▼</button> <div class="tmr-spin-lbl">초</div> </div> </div> <!-- 숨겨진 실제 입력값 (기존 JS 호환) --> <input type="hidden" id="t-h" value="0"> <input type="hidden" id="t-m" value="10"> <input type="hidden" id="t-s" value="0"> <div id="tmr-display">10:00</div> <div id="tmr-state">대기중</div> <div id="tmr-btns"> <button class="btn btn-green" id="bt-start">▶ 시작</button> <button class="btn btn-gray" id="bt-pause">⏸ 정지</button> <button class="btn btn-red btn-sm" id="bt-reset">↺ 초기화</button> </div> </div> <!-- 스톱워치 --> <div id="tab-sw" class="tab-panel" style="flex-direction:row;align-items:center;justify-content:center;gap:0;padding:8px;"> <!-- 좌: 숫자 + 버튼 --> <div id="sw-left"> <div id="sw-display">00:00<span id="sw-ms">.00</span></div> <div id="sw-btns"> <button class="btn btn-green" id="sw-start">▶ 시작</button> <button class="btn btn-gray" id="sw-lap"> 랩</button> <button class="btn btn-red btn-sm" id="sw-reset">↺</button> </div> </div> <!-- 우: 랩 리스트 --> <div id="sw-right"> <div id="lap-header">랩 기록</div> <div id="lap-list"></div> </div> </div> <!-- 미디어 --> <div id="tab-media" class="tab-panel" style="padding:0;"> <div id="media-wrap"> <div id="media-drop"> 이미지를 드래그하거나<br> <label> 클릭하여 선택<input type="file" id="media-input" multiple accept="image/*" style="display:none;"></label> </div> <img id="media-img" style="display:none;" alt=""> <div id="media-banner"><div id="media-banner-txt"></div></div> </div> <div id="media-cnt"></div> <div id="media-nav" style="display:none;"> <button class="btn-nav" onclick="TIMER.mediaPrev()">◀ 이전</button> <button class="btn-nav" onclick="TIMER.mediaNext()">다음 ▶</button> </div> </div> <!-- 설정 패널 --> <div id="set-panel"> <button class="set-close" onclick="TIMER.toggleSet()">✕</button> <div class="set-title">⚙️ 설정</div> <div class="set-h">배경 이미지</div> <label class="bg-upload-btn"> 배경 사진 업로드<input type="file" id="s-bg-file" accept="image/*" style="display:none;"></label> <div class="set-row"><label>블러</label><input type="range" id="s-bg-blur" min="0" max="30" value="0"><span id="s-bg-blur-val" style="color:rgba(255,255,255,0.28);font-size:11px;width:28px;text-align:right;">0px</span></div> <div class="set-row"><label>어둡기</label><input type="range" id="s-bg-dark" min="0" max="90" value="55"><span id="s-bg-dark-val" style="color:rgba(255,255,255,0.28);font-size:11px;width:28px;text-align:right;">55%</span></div> <button class="set-save-btn" style="background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.35);margin-bottom:4px;" onclick="TIMER.clearBg()">✕ 배경 제거</button> <div class="set-h">시계 글자 크기</div> <div class="set-hint"> <b>시·분 크기:</b> 소형60 / 중형90 / 대형140 / 최대180px<br> <b>초 크기:</b> 소형24 / 중형36 / 대형50px </div> <div class="set-row"><label>시·분 크기 <span id="s-clk-sz-val" style="color:rgba(255,255,255,0.28);">90px</span></label><input type="range" id="s-clk-sz" min="40" max="200" value="90"></div> <div class="set-row"><label>초 크기 <span id="s-clk-sec-val" style="color:rgba(255,255,255,0.28);">32px</span></label><input type="range" id="s-clk-sec-sz" min="14" max="80" value="32"></div> <div class="set-row"><label>색상</label><input type="color" id="s-clk-color" value="#ffffff"></div> <div class="set-row"><label>24시간</label><input type="checkbox" id="s-24h" checked></div> <div class="set-h">타이머 글자 크기</div> <div class="set-hint"><b>추천:</b> 소형60 / 중형96 / 대형140 / 최대180px</div> <div class="set-row"><label>크기 <span id="s-tmr-sz-val" style="color:rgba(255,255,255,0.28);">96px</span></label><input type="range" id="s-tmr-sz" min="36" max="200" value="96"></div> <div class="set-h">스톱워치 글자 크기</div> <div class="set-hint"><b>추천:</b> 소형48 / 중형72 / 대형110px</div> <div class="set-row"><label>크기 <span id="s-sw-sz-val" style="color:rgba(255,255,255,0.28);">72px</span></label><input type="range" id="s-sw-sz" min="28" max="160" value="72"></div> <div class="set-h">자막</div> <div class="set-row"><label>흐르는 자막</label><input type="checkbox" id="s-ticker"></div> <input type="text" class="set-full" id="s-ticker-txt" placeholder="흐르는 자막 내용..."> <div class="set-row"><label>자막 크기 <span id="s-ticker-sz-val" style="color:rgba(255,255,255,0.28);">14px</span></label><input type="range" id="s-ticker-sz" min="10" max="48" value="14"></div> <div class="set-row"><label>고정멘트 크기 <span id="s-fixed-sz-val" style="color:rgba(255,255,255,0.28);">16px</span></label><input type="range" id="s-fixed-sz" min="10" max="60" value="16"></div> <div class="set-h">시간별 자동 멘트</div> <div id="msg-list"></div> <button class="set-save-btn" style="margin-top:2px;" onclick="TIMER.addMsg()">+ 멘트 추가</button> <div class="set-h">타이머 경고</div> <div class="set-row"><label>경고1 남은</label><input type="number" id="s-w1" value="10" min="0"> 분</div> <div class="set-row"><label>경고1 색</label><input type="color" id="s-wc1" value="#fbbf24"></div> <div class="set-row"><label>경고2 남은</label><input type="number" id="s-w2" value="5" min="0"> 분</div> <div class="set-row"><label>경고2 색</label><input type="color" id="s-wc2" value="#f97316"></div> <div class="set-row"><label>경고3 남은</label><input type="number" id="s-w3" value="1" min="0"> 분</div> <div class="set-row"><label>경고3 색(점멸)</label><input type="color" id="s-wc3" value="#ef4444"></div> <div class="set-h">미디어 / 현수막</div> <div class="fit-btns"> <button class="fit-btn on" id="fit-contain" onclick="TIMER.setFit('contain')">맞춤</button> <button class="fit-btn" id="fit-fill" onclick="TIMER.setFit('fill')">채우기</button> <button class="fit-btn" id="fit-origin" onclick="TIMER.setFit('origin')">원본</button> </div> <div class="set-row"><label>현수막 크기 <span id="s-banner-sz-val" style="color:rgba(255,255,255,0.28);">52px</span></label><input type="range" id="s-banner-sz" min="16" max="160" value="52"></div> <textarea class="set-full" id="s-banner-txt" rows="3" placeholder="현수막 텍스트..."></textarea> <div class="set-row"><label>배경색</label><input type="color" id="s-banner-bg" value="#000000"></div> <div class="set-row"><label>글자색</label><input type="color" id="s-banner-fg" value="#ffffff"></div> <div class="set-row"><label>자동전환(초)</label><input type="number" id="s-slide-sec" value="0" min="0" max="60"></div> <div class="set-h">레이저포인터</div> <div class="set-row"><label>색상</label> <select id="s-laser-c"> <option value="#ff0000"> 빨강</option> <option value="#00ff00"> 초록</option> <option value="#0088ff"> 파랑</option> <option value="#ffff00"> 노랑</option> <option value="#ffffff">⚪ 흰색</option> </select> </div> <div class="set-row"><label>크기 <span id="s-laser-sz-val" style="color:rgba(255,255,255,0.28);">16px</span></label><input type="range" id="s-laser-sz" min="6" max="48" value="16"></div> <button class="set-save-btn" onclick="TIMER.saveSet()"> 설정 저장</button> </div> </div> <div id="tool-bar"> <button class="tool-btn" id="tb-laser" title="레이저포인터 (L)" onclick="TIMER.toggleLaser()"> <span>레이저</span></button> <button class="tool-btn" id="tb-banner" title="현수막 모드" onclick="TIMER.toggleBanner()"> <span>현수막</span></button> <div class="tool-sep"></div> <button class="tool-btn" id="tb-fit" title="글자 크기 순환" onclick="TIMER.cycleFit()"> 꽉차게</button> <div class="tool-sep"></div> <button class="tool-btn" title="설정" onclick="TIMER.toggleSet()">⚙️ <span>설정</span></button> <button class="tool-btn" title="전체화면 (F)" onclick="TIMER.toggleFS()">⛶ <span>전체화면</span></button> <button class="tool-btn" id="tb-ad" title="광고" onclick="TIMER.toggleAd()"> </button> <span id="tool-label">발표장타이머 · 0-1.kr</span> <button class="tool-btn" id="tb-hide" title="메뉴 숨기기" onclick="TIMER.toggleMenus()" style="margin-left:4px;opacity:0.5;">⊙</button> </div> <div id="ad-bar"></div> <!-- 워터마크 --> <div id="watermark" style="position:absolute;bottom:48px;right:10px;text-align:right;pointer-events:none;z-index:10;opacity:0.18;line-height:1.5;"> <div style="font-size:11px;color:#fff;font-weight:600;letter-spacing:0.5px;">0-1.kr/22</div> <div style="font-size:10px;color:#fff;letter-spacing:0.5px;">스타트업EX</div> </div> </div> <script> (function(){ 'use strict'; var S={ tab:'clock',mode:'main', clkColor:'#ffffff',clkSz:90,clkSecSz:32,h24:true, tickerOn:false,tickerTxt:'',tickerSz:14,fixedSz:16, msgs:[],lastMsgMin:-1, tmrTotal:600,tmrRemain:600,tmrRun:false,tmrItv:null,tmrSz:96, swRun:false,swStart:0,swElapsed:0,swItv:null,lapN:0,laps:[],swSz:72, files:[],fileIdx:0,slideItv:null,slideSec:0,imgFit:'contain', bannerOn:false,bannerTxt:'',bannerBg:'#000000',bannerFg:'#ffffff',bannerSz:52, laserOn:false,laserColor:'#ff0000',laserSz:16, w1:10,wc1:'#fbbf24',w2:5,wc2:'#f97316',w3:1,wc3:'#ef4444', setOpen:false,adOn:false,sizeStep:0, bgUrl:'',bgBlur:0,bgDark:55, }; var STORE='presTimer_v5'; /* 시계 상세 정보 계산 */ var ZODIAC12=['원숭이','닭','개','돼지','쥐','소','호랑이','토끼','용','뱀','말','양']; var CHEONGAN=['경','신','임','계','갑','을','병','정','무','기']; var JIJI=['신','유','술','해','자','축','인','묘','진','사','오','미']; var SEASON=['봄','여름','가을','겨울']; function getZodiac(y){return ZODIAC12[y%12]+'띠';} function getDangi(y){return (y+2333)+'년';} function getSexagenary(y){return CHEONGAN[y%10]+JIJI[y%12]+'년';} function getSeason(m){return SEASON[Math.floor(((m-1)+11)%12/3)];} var SIJIN=['자시(子)','축시(丑)','인시(寅)','묘시(卯)','진시(辰)','사시(巳)','오시(午)','미시(未)','신시(申)','유시(酉)','술시(戌)','해시(亥)']; function getSijin(h){return SIJIN[Math.floor(((h+1)%24)/2)];} var GANZHI_YEAR_NAMES=['경자','신축','임인','계묘','갑진','을사','병오','정미','무신','기유','경술','신해','임자','계축','갑인','을묘','병진','정사','무오','기미','경신','신유','임술','계해','갑자','을축','병인','정묘','무진','기사','경오','신미','임신','계유','갑술','을해','병자','정축','무인','기묘','경진','신사','임오','계미','갑신','을유','병술','정해','무자','기축','경인','신묘','임진','계사','갑오','을미','병신','정유','무술','기해']; function getGanzhi(y){return GANZHI_YEAR_NAMES[(y-4)%60]+'년';} function el(id){return document.getElementById(id);} function p2(n){return ('0'+n).slice(-2);} function sec2str(s){var h=Math.floor(s/3600),m=Math.floor((s%3600)/60),ss=s%60;return h>0?p2(h)+':'+p2(m)+':'+p2(ss):p2(m)+':'+p2(ss);} /* ===== 저장/불러오기 ===== */ function save(){ try{ var d={ clkColor:S.clkColor,clkSz:S.clkSz,clkSecSz:S.clkSecSz,h24:S.h24, tickerOn:S.tickerOn,tickerTxt:S.tickerTxt,tickerSz:S.tickerSz,fixedSz:S.fixedSz, msgs:S.msgs, tmrSz:S.tmrSz,swSz:S.swSz, w1:S.w1,wc1:S.wc1,w2:S.w2,wc2:S.wc2,w3:S.w3,wc3:S.wc3, bannerTxt:S.bannerTxt,bannerBg:S.bannerBg,bannerFg:S.bannerFg,bannerSz:S.bannerSz, slideSec:S.slideSec,imgFit:S.imgFit, laserColor:S.laserColor,laserSz:S.laserSz, adOn:S.adOn,bgBlur:S.bgBlur,bgDark:S.bgDark, tmrH:el('t-h').value,tmrM:el('t-m').value,tmrS:el('t-s').value }; localStorage.setItem(STORE,JSON.stringify(d)); }catch(e){} } function load(){ try{ var d=JSON.parse(localStorage.getItem(STORE)||'{}'); var keys=['clkColor','clkSz','clkSecSz','h24','tickerOn','tickerTxt','tickerSz','fixedSz', 'msgs','tmrSz','swSz','w1','wc1','w2','wc2','w3','wc3', 'bannerTxt','bannerBg','bannerFg','bannerSz','slideSec','imgFit', 'laserColor','laserSz','adOn','bgBlur','bgDark']; for(var i=0;i<keys.length;i++){if(d[keys[i]]!==undefined)S[keys[i]]=d[keys[i]];} if(d.tmrH)el('t-h').value=d.tmrH; if(d.tmrM)el('t-m').value=d.tmrM; if(d.tmrS)el('t-s').value=d.tmrS; resetTmr(); }catch(e){} } /* ===== 스킨 강제 숨김 ===== */ function hideSkинElements(){ /* 티스토리 고정 스킨 요소들 강제 숨김 */ var selectors=[ '#tistory-layer','#kakaoIndex','.kakao_layer', '#floating-layer','.tistory_floating', 'header','#header','.header','.blog-header', '#nav','.nav','.gnb','#gnb', '.sidebar','#sidebar', '.layer_wrap','.dimmed', '[id*="tistory"]:not(#page-app):not(#page-main)', '[class*="tistory"]' ]; var style=document.createElement('style'); style.id='pt-skin-hide'; style.textContent=''; /* body의 스크롤 막기 */ document.body.style.overflow='hidden'; document.documentElement.style.overflow='hidden'; } function restoreSkinElements(){ document.body.style.overflow=''; document.documentElement.style.overflow=''; } /* ===== 모드 전환 ===== */ function showMode(mode){ S.mode=mode; el('page-main').style.display=(mode==='main')?'block':'none'; el('page-app').style.display=(mode==='main')?'none':'flex'; el('app-close').style.display=(mode==='full')?'block':'none'; if(mode!=='main'){ hideSkинElements(); /* 강제로 page-app 를 body 직계 자식 맨 위로 이동 */ document.body.appendChild(el('page-app')); el('page-app').style.cssText='display:flex!important;position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:2147483647!important;flex-direction:column;background:#1a1a2e;overflow:hidden;'; syncSetUI();updateLaserStyle();updateTmrDisplay();updateSwDisplay();updateTickerUI();renderMsgs();startClock();applyBg();applyFit();applyFitStep(); } else { restoreSkinElements(); } } function openFull(){ showMode('full'); try{document.documentElement.requestFullscreen&&document.documentElement.requestFullscreen();}catch(e){} } function openPopup(){ var w=460,h=360; var left=Math.round((screen.width-w)/2); var top=Math.round((screen.height-h)/2); var feat='width='+w+',height='+h+',left='+left+',top='+top+',resizable=yes,scrollbars=no,toolbar=no,menubar=no,location=no,status=no'; /* 고정 URL 사용 (리다이렉트/파라미터 중복 방지) */ var base=location.origin+location.pathname; /* 이미 ?가 있으면 & 아니면 ? */ var sep=base.indexOf('?')>-1?'&':'?'; var url=base+sep+'mode=popup#popup'; var win=window.open(url,'presTimer'+Date.now(),feat); if(!win||win.closed)alert('팝업이 차단되었습니다.\n주소창 우측의 팝업 허용 버튼을 클릭해주세요.'); } function closeApp(){ try{if(document.fullscreenElement)document.exitFullscreen();}catch(e){} showMode('main'); } /* ===== 탭 ===== */ function tab(name){ S.tab=name; var ps=document.querySelectorAll('.tab-panel'); for(var i=0;i<ps.length;i++){ps[i].classList.remove('on');ps[i].style.display='none';} var ts=document.querySelectorAll('#tab-bar button'); for(var i=0;i<ts.length;i++)ts[i].classList.remove('on'); var p=el('tab-'+name);p.classList.add('on');p.style.display='flex'; var ord=['clock','timer','sw','media']; var idx=ord.indexOf(name);if(idx>=0)ts[idx].classList.add('on'); } /* ===== 시계 ===== */ var clkItv=null; function startClock(){if(clkItv)return;clkItv=setInterval(tickClock,500);tickClock();} function tickClock(){ var now=new Date(),h=now.getHours(),m=now.getMinutes(),s=now.getSeconds(); var dispH=S.h24?h:(h%12||12); el('clk-hm').textContent=p2(dispH)+':'+p2(m); el('clk-sec').textContent=p2(s)+'초'; /* 가로폭 꽉차게: clkSz를 기본으로 하되 가로폭 초과시 자동 축소 */ var W=el('main-area').offsetWidth||window.innerWidth; var maxSz=Math.floor(W*0.85/2.2); /* HH:MM = 약 5자 너비 기준 */ var actualSz=Math.min(S.clkSz,maxSz); el('clk-hm').style.color=S.clkColor;el('clk-hm').style.fontSize=actualSz+'px'; el('clk-sec').style.color=S.clkColor;el('clk-sec').style.fontSize=Math.max(14,Math.round(actualSz*0.28))+'px'; var days=['일요일','월요일','화요일','수요일','목요일','금요일','토요일']; var y=now.getFullYear(),mo=now.getMonth()+1,d=now.getDate(); /* 상세 정보 row1: 서기 · 단기 · 간지 */ el('clk-info-row1').textContent='서기 '+y+'년 · 단기 '+getDangi(y)+' · '+getGanzhi(y); /* 상세 정보 row2: 띠 · 시진 · 계절 */ el('clk-info-row2').textContent=getZodiac(y)+' · '+getSijin(h)+' · '+getSeason(mo); /* 날짜 */ el('clk-date').textContent=mo+'월 '+d+'일 '+days[now.getDay()]; var curMin=now.getHours()*60+m; if(curMin!==S.lastMsgMin){S.lastMsgMin=curMin;checkMsgs(now.getHours(),m);} } function checkMsgs(h,m){ var t=p2(h)+':'+p2(m); for(var i=0;i<S.msgs.length;i++){if(S.msgs[i].time===t){el('clk-fixed').textContent=S.msgs[i].text;return;}} } function updateTickerUI(){ var w=el('clk-ticker-wrap'),sp=el('clk-ticker-inner'); if(S.tickerOn&&S.tickerTxt){w.style.display='block';sp.textContent=S.tickerTxt;sp.style.fontSize=S.tickerSz+'px';} else{w.style.display='none';} el('clk-fixed').style.color='#fbbf24';el('clk-fixed').style.fontSize=S.fixedSz+'px'; } /* ===== 타이머 ===== */ function updateTmrDisplay(){ var d=el('tmr-display');d.textContent=sec2str(S.tmrRemain);d.className='';d.style.fontSize=S.tmrSz+'px'; var rm=S.tmrRemain/60; if(rm<=S.w3){d.classList.add('w3');d.style.color=S.wc3;} else if(rm<=S.w2){d.classList.add('w2');d.style.color=S.wc2;} else if(rm<=S.w1){d.classList.add('w1');d.style.color=S.wc1;} else{d.style.color='#fff';} } function startTmr(){ if(S.tmrRun)return; if(S.tmrRemain<=0){var h=parseInt(el('t-h').value)||0,m=parseInt(el('t-m').value)||0,s=parseInt(el('t-s').value)||0;S.tmrTotal=h*3600+m*60+s;S.tmrRemain=S.tmrTotal;} S.tmrRun=true;el('tmr-state').textContent='진행중 ▶'; S.tmrItv=setInterval(function(){ if(S.tmrRemain>0){S.tmrRemain--;updateTmrDisplay();} else{clearInterval(S.tmrItv);S.tmrRun=false;el('tmr-state').textContent='종료 ✓';beep();} },1000); } function pauseTmr(){if(!S.tmrRun)return;S.tmrRun=false;clearInterval(S.tmrItv);el('tmr-state').textContent='일시정지 ⏸';} function resetTmr(){ clearInterval(S.tmrItv);S.tmrRun=false; var h=parseInt(el('t-h').value)||0,m=parseInt(el('t-m').value)||0,s=parseInt(el('t-s').value)||0; S.tmrTotal=h*3600+m*60+s;S.tmrRemain=S.tmrTotal;updateTmrDisplay();el('tmr-state').textContent='대기중'; } function adjustTmr(unit,delta){ if(S.tmrRun)return; var h=parseInt(el('t-h').value)||0,m=parseInt(el('t-m').value)||0,s=parseInt(el('t-s').value)||0; if(unit==='h'){h=Math.max(0,Math.min(23,h+delta));} else if(unit==='m'){m+=delta;if(m<0){m=59;h=Math.max(0,h-1);}if(m>59){m=0;h=Math.min(23,h+1);}} else if(unit==='s'){s+=delta;if(s<0){s=59;m=Math.max(0,m-1);}if(s>59){s=0;m=Math.min(59,m+1);}} el('t-h').value=h;el('t-m').value=m;el('t-s').value=s; el('ts-h').textContent=p2(h);el('ts-m').textContent=p2(m);el('ts-s').textContent=p2(s); resetTmr(); } function syncTmrSpinUI(){ var h=parseInt(el('t-h').value)||0,m=parseInt(el('t-m').value)||0,s=parseInt(el('t-s').value)||0; if(el('ts-h'))el('ts-h').textContent=p2(h); if(el('ts-m'))el('ts-m').textContent=p2(m); if(el('ts-s'))el('ts-s').textContent=p2(s); } function beep(){try{var ctx=new(window.AudioContext||window.webkitAudioContext)();var o=ctx.createOscillator();var g=ctx.createGain();o.connect(g);g.connect(ctx.destination);o.frequency.value=880;g.gain.setValueAtTime(0.4,ctx.currentTime);g.gain.exponentialRampToValueAtTime(0.001,ctx.currentTime+1.5);o.start();o.stop(ctx.currentTime+1.5);}catch(e){}} /* ===== 스톱워치 ===== */ function updateSwDisplay(){ var ms=S.swElapsed,m=Math.floor(ms/60000),s=Math.floor((ms%60000)/1000),cs=Math.floor((ms%1000)/10); el('sw-display').innerHTML=p2(m)+':'+p2(s)+'<span id="sw-ms" style="font-size:'+Math.round(S.swSz*0.42)+'px;color:rgba(255,255,255,0.35);">.' +p2(cs)+'</span>'; el('sw-display').style.fontSize=S.swSz+'px'; } function startSw(){ if(S.swRun){stopSw();return;} S.swRun=true;S.swStart=Date.now()-S.swElapsed; S.swItv=setInterval(function(){S.swElapsed=Date.now()-S.swStart;updateSwDisplay();},30); el('sw-start').textContent='⏸ 정지';el('sw-start').className='btn btn-red'; } function stopSw(){S.swRun=false;clearInterval(S.swItv);el('sw-start').textContent='▶ 시작';el('sw-start').className='btn btn-green';} function lapSw(){ if(!S.swRun)return;S.lapN++; var ms=S.swElapsed,m=Math.floor(ms/60000),s=Math.floor((ms%60000)/1000),cs=Math.floor((ms%1000)/10); S.laps.push({n:S.lapN,t:p2(m)+':'+p2(s)+'.'+p2(cs)});renderLaps(); } function resetSw(){stopSw();S.swElapsed=0;S.lapN=0;S.laps=[];updateSwDisplay();el('lap-list').innerHTML='';} function renderLaps(){ var html=''; for(var i=S.laps.length-1;i>=0;i--){ var isLast=(i===S.laps.length-1); html+='<div class="lap-row'+(isLast?' lap-latest':'')+'"><span> 랩 '+S.laps[i].n+'</span><span>'+S.laps[i].t+'</span></div>'; } el('lap-list').innerHTML=html; /* 자동 스크롤 최상단 (최신 랩 보이게) */ el('lap-list').scrollTop=0; } /* ===== 미디어 ===== */ function loadFiles(files){S.files=[];for(var i=0;i<files.length;i++)S.files.push(files[i]);S.fileIdx=0;showMedia();el('media-nav').style.display=S.files.length>1?'flex':'none';setupSlide();} function showMedia(){ if(!S.files.length)return; el('media-drop').style.display='none';el('media-banner').style.display='none'; el('media-img').style.display='block';el('media-img').src=URL.createObjectURL(S.files[S.fileIdx]); el('media-cnt').textContent=(S.fileIdx+1)+'/'+S.files.length; applyFit(); } function mediaNext(){if(!S.files.length)return;S.fileIdx=(S.fileIdx+1)%S.files.length;showMedia();} function mediaPrev(){if(!S.files.length)return;S.fileIdx=(S.fileIdx-1+S.files.length)%S.files.length;showMedia();} function setupSlide(){if(S.slideItv)clearInterval(S.slideItv);if(S.slideSec>0&&S.files.length>1)S.slideItv=setInterval(mediaNext,S.slideSec*1000);} function setFit(fit){ S.imgFit=fit;applyFit(); var btns=document.querySelectorAll('.fit-btn'); for(var i=0;i<btns.length;i++)btns[i].classList.remove('on'); el('fit-'+fit).classList.add('on'); } function applyFit(){ var img=el('media-img'); img.className=''; if(S.imgFit==='fill'){img.classList.add('fit-fill');} else if(S.imgFit==='origin'){img.classList.add('fit-origin');} else{img.style.maxWidth='100%';img.style.maxHeight='100%';} } function toggleBanner(){ S.bannerOn=!S.bannerOn; var img=el('media-img'),ban=el('media-banner'),drop=el('media-drop'); if(S.bannerOn){ img.style.display='none';drop.style.display='none';ban.style.display='flex'; ban.style.background=S.bannerBg; el('media-banner-txt').textContent=S.bannerTxt||el('s-banner-txt').value; el('media-banner-txt').style.color=S.bannerFg; el('media-banner-txt').style.fontSize=S.bannerSz+'px'; tab('media');el('tb-banner').classList.add('on'); }else{ ban.style.display='none';if(S.files.length)img.style.display='block';else drop.style.display='block';el('tb-banner').classList.remove('on'); } } /* ===== 배경 ===== */ function applyBg(){ var bg=el('app-bg'),ov=el('app-bg-overlay'); if(S.bgUrl){bg.style.backgroundImage='url('+S.bgUrl+')';bg.style.filter='blur('+S.bgBlur+'px)';bg.style.transform='scale(1.06)';} else{bg.style.backgroundImage='none';bg.style.filter='';bg.style.transform='';} ov.style.background='rgba(0,0,0,'+(S.bgDark/100)+')'; } function clearBg(){S.bgUrl='';applyBg();} /* ===== 레이저 ===== */ function toggleLaser(){ S.laserOn=!S.laserOn;el('laser').style.display=S.laserOn?'block':'none'; document.body.style.cursor=S.laserOn?'none':'';el('tb-laser').classList[S.laserOn?'add':'remove']('on'); } function updateLaserStyle(){ var dot=el('laser-dot');dot.style.width=S.laserSz+'px';dot.style.height=S.laserSz+'px'; dot.style.background='radial-gradient(circle,'+S.laserColor+' 30%,'+S.laserColor+'44 100%)'; dot.style.boxShadow='0 0 10px '+S.laserColor; } function toggleFS(){try{if(!document.fullscreenElement)document.documentElement.requestFullscreen&&document.documentElement.requestFullscreen();else document.exitFullscreen&&document.exitFullscreen();}catch(e){}} /* ===== 설정 ===== */ function toggleSet(){S.setOpen=!S.setOpen;el('set-panel').classList[S.setOpen?'add':'remove']('on');} function syncSetUI(){ el('s-clk-color').value=S.clkColor; el('s-clk-sz').value=S.clkSz;el('s-clk-sz-val').textContent=S.clkSz+'px'; el('s-clk-sec-sz').value=S.clkSecSz;el('s-clk-sec-val').textContent=S.clkSecSz+'px'; el('s-24h').checked=S.h24; el('s-ticker').checked=S.tickerOn;el('s-ticker-txt').value=S.tickerTxt; el('s-ticker-sz').value=S.tickerSz;el('s-ticker-sz-val').textContent=S.tickerSz+'px'; el('s-fixed-sz').value=S.fixedSz;el('s-fixed-sz-val').textContent=S.fixedSz+'px'; el('s-tmr-sz').value=S.tmrSz;el('s-tmr-sz-val').textContent=S.tmrSz+'px'; el('s-sw-sz').value=S.swSz;el('s-sw-sz-val').textContent=S.swSz+'px'; el('s-w1').value=S.w1;el('s-wc1').value=S.wc1;el('s-w2').value=S.w2;el('s-wc2').value=S.wc2;el('s-w3').value=S.w3;el('s-wc3').value=S.wc3; el('s-banner-txt').value=S.bannerTxt;el('s-banner-bg').value=S.bannerBg;el('s-banner-fg').value=S.bannerFg; el('s-banner-sz').value=S.bannerSz;el('s-banner-sz-val').textContent=S.bannerSz+'px'; el('s-slide-sec').value=S.slideSec; el('s-laser-c').value=S.laserColor;el('s-laser-sz').value=S.laserSz;el('s-laser-sz-val').textContent=S.laserSz+'px'; el('s-bg-blur').value=S.bgBlur;el('s-bg-blur-val').textContent=S.bgBlur+'px'; el('s-bg-dark').value=S.bgDark;el('s-bg-dark-val').textContent=S.bgDark+'%'; /* 이미지 핏 버튼 */ var btns=document.querySelectorAll('.fit-btn');for(var i=0;i<btns.length;i++)btns[i].classList.remove('on'); var fb=el('fit-'+S.imgFit);if(fb)fb.classList.add('on'); renderMsgs(); } function applySet(){ S.clkColor=el('s-clk-color').value; S.clkSz=parseInt(el('s-clk-sz').value);el('s-clk-sz-val').textContent=S.clkSz+'px'; S.clkSecSz=parseInt(el('s-clk-sec-sz').value);el('s-clk-sec-val').textContent=S.clkSecSz+'px'; S.h24=el('s-24h').checked; S.tickerOn=el('s-ticker').checked;S.tickerTxt=el('s-ticker-txt').value; S.tickerSz=parseInt(el('s-ticker-sz').value);el('s-ticker-sz-val').textContent=S.tickerSz+'px'; S.fixedSz=parseInt(el('s-fixed-sz').value);el('s-fixed-sz-val').textContent=S.fixedSz+'px'; S.tmrSz=parseInt(el('s-tmr-sz').value);el('s-tmr-sz-val').textContent=S.tmrSz+'px'; S.swSz=parseInt(el('s-sw-sz').value);el('s-sw-sz-val').textContent=S.swSz+'px'; S.w1=parseInt(el('s-w1').value)||10;S.wc1=el('s-wc1').value; S.w2=parseInt(el('s-w2').value)||5;S.wc2=el('s-wc2').value; S.w3=parseInt(el('s-w3').value)||1;S.wc3=el('s-wc3').value; S.bannerTxt=el('s-banner-txt').value;S.bannerBg=el('s-banner-bg').value;S.bannerFg=el('s-banner-fg').value; S.bannerSz=parseInt(el('s-banner-sz').value);el('s-banner-sz-val').textContent=S.bannerSz+'px'; S.slideSec=parseInt(el('s-slide-sec').value)||0; S.laserColor=el('s-laser-c').value;S.laserSz=parseInt(el('s-laser-sz').value)||16;el('s-laser-sz-val').textContent=S.laserSz+'px'; S.bgBlur=parseInt(el('s-bg-blur').value)||0;el('s-bg-blur-val').textContent=S.bgBlur+'px'; S.bgDark=parseInt(el('s-bg-dark').value)||55;el('s-bg-dark-val').textContent=S.bgDark+'%'; S.msgs=[];var rows=document.querySelectorAll('.msg-row'); for(var i=0;i<rows.length;i++){var t=rows[i].querySelector('input[type=time]').value;var tx=rows[i].querySelector('input[type=text]').value;if(t&&tx)S.msgs.push({time:t,text:tx});} updateTickerUI();updateLaserStyle();setupSlide();applyBg();updateTmrDisplay();updateSwDisplay(); } function saveSet(){applySet();save();toggleSet();} function addMsg(){addMsgRow('','');} function addMsgRow(t,tx){ var list=el('msg-list');var row=document.createElement('div');row.className='msg-row'; row.innerHTML='<input type="time" value="'+t+'"><input type="text" placeholder="멘트" value="'+tx+'"><button onclick="this.parentNode.remove()">✕</button>';list.appendChild(row); } function renderMsgs(){el('msg-list').innerHTML='';for(var i=0;i<S.msgs.length;i++)addMsgRow(S.msgs[i].time,S.msgs[i].text);} /* ===== 꽉차게 순환 (화면 크기 동적 계산) ===== */ var FIT_LABELS=[' 꽉차게','⬜ 중간','▪️ 작게']; function calcFitSizes(step){ var W=window.innerWidth||screen.width; /* 사용가능 높이: 탭바44 + 툴바44 + 버튼영역80 + 타이머입력60 = 228px 제외 */ var H=(window.innerHeight||screen.height)-228; if(step===0){ /* 꽉차게: 높이 기준으로 숫자 크기 계산 (버튼이 항상 보이게) */ var clkSz=Math.min(Math.floor(H*0.55),Math.floor(W*0.38)); var tmrSz=Math.min(Math.floor(H*0.65),Math.floor(W*0.4)); var swSz=Math.min(Math.floor(H*0.55),Math.floor(W*0.35)); return{clkSz:Math.max(clkSz,60),clkSecSz:Math.floor(clkSz*0.28), tmrSz:Math.max(tmrSz,60),swSz:Math.max(swSz,52), bannerSz:Math.min(Math.floor(H*0.18),80),tickerSz:Math.max(Math.floor(H*0.04),16),fixedSz:Math.max(Math.floor(H*0.04),16)}; }else if(step===1){ var clkSz=Math.max(Math.floor(W*0.16),60); return{clkSz:clkSz,clkSecSz:Math.floor(clkSz*0.35), tmrSz:Math.max(Math.floor(W*0.14),56),swSz:Math.max(Math.floor(W*0.12),48), bannerSz:52,tickerSz:14,fixedSz:16}; }else{ var clkSz=Math.max(Math.floor(W*0.09),36); return{clkSz:clkSz,clkSecSz:Math.floor(clkSz*0.4), tmrSz:Math.max(Math.floor(W*0.08),32),swSz:Math.max(Math.floor(W*0.07),28), bannerSz:28,tickerSz:11,fixedSz:12}; } } function cycleFit(){ S.sizeStep=(S.sizeStep+1)%3; applyFitStep(); } function applyFitStep(){ var sz=calcFitSizes(S.sizeStep); S.clkSz=sz.clkSz;S.clkSecSz=sz.clkSecSz; S.tmrSz=sz.tmrSz;S.swSz=sz.swSz; S.bannerSz=sz.bannerSz;S.tickerSz=sz.tickerSz;S.fixedSz=sz.fixedSz; el('tb-fit').textContent=FIT_LABELS[S.sizeStep]; /* 즉시 반영 */ tickClock();updateTmrDisplay();updateSwDisplay();updateTickerUI(); if(S.bannerOn)el('media-banner-txt').style.fontSize=S.bannerSz+'px'; syncSetUI(); } /* ===== 메뉴 숨김/보이기 ===== */ var menusVisible=true; function toggleMenus(){ menusVisible=!menusVisible; var tb=el('tab-bar'),tl=el('tool-bar'),mr=el('menu-restore'),btn=el('tb-hide'); if(menusVisible){ tb.classList.remove('hidden');tl.classList.remove('hidden'); if(mr)mr.style.display='none'; if(btn)btn.textContent='⊙'; }else{ tb.classList.add('hidden');tl.classList.add('hidden'); if(mr)mr.style.display='block'; if(btn)btn.textContent='⊙'; } } /* ===== 광고 ===== */ function toggleAd(){ S.adOn=!S.adOn;el('ad-bar').style.display=S.adOn?'block':'none'; if(S.adOn)el('ad-bar').innerHTML='<span style="font-size:11px;color:rgba(255,255,255,0.2);">광고 영역 — AdSense 코드 삽입</span>'; el('tb-ad').classList[S.adOn?'add':'remove']('on'); } /* ===== 키보드 ===== */ function handleKey(e){ var tag=(document.activeElement||{}).tagName||''; if(tag==='INPUT'||tag==='TEXTAREA')return; if(S.mode==='main')return; if(e.key===' '||e.code==='Space'){e.preventDefault();if(S.tab==='timer')S.tmrRun?pauseTmr():startTmr();if(S.tab==='sw')startSw();} if(e.key==='ArrowRight'||e.key==='PageDown'){e.preventDefault();if(S.tab==='media')mediaNext();} if(e.key==='ArrowLeft'||e.key==='PageUp'){e.preventDefault();if(S.tab==='media')mediaPrev();} if(e.key==='l'||e.key==='L')toggleLaser(); if(e.key==='f'||e.key==='F')toggleFS(); if(e.key==='Escape'){if(S.setOpen)toggleSet();else if(S.mode==='full')closeApp();} } /* ===== 바인딩 ===== */ function bind(){ document.addEventListener('mousemove',function(e){if(S.laserOn){var d=el('laser-dot');d.style.left=e.clientX+'px';d.style.top=e.clientY+'px';}}); document.addEventListener('keydown',handleKey); el('bt-start').addEventListener('click',startTmr); el('bt-pause').addEventListener('click',pauseTmr); el('bt-reset').addEventListener('click',resetTmr); ['t-h','t-m','t-s'].forEach(function(id){el(id).addEventListener('input',function(){if(!S.tmrRun)resetTmr();});}); el('sw-start').addEventListener('click',startSw); el('sw-lap').addEventListener('click',lapSw); el('sw-reset').addEventListener('click',resetSw); el('media-input').addEventListener('change',function(e){loadFiles(e.target.files);}); var mw=el('media-wrap'); mw.addEventListener('dragover',function(e){e.preventDefault();}); mw.addEventListener('drop',function(e){e.preventDefault();loadFiles(e.dataTransfer.files);}); el('set-panel').addEventListener('input',applySet); el('set-panel').addEventListener('change',applySet); el('s-bg-file').addEventListener('change',function(e){ var f=e.target.files[0];if(!f)return; var r=new FileReader();r.onload=function(ev){S.bgUrl=ev.target.result;applyBg();};r.readAsDataURL(f); }); /* ===== 핀치줌: 시계·타이머·스톱워치 숫자 확대/축소 ===== */ var pinchStartDist=0,pinchStartSz=0; function getPinchTarget(){ if(S.tab==='clock')return 'clkSz'; if(S.tab==='timer')return 'tmrSz'; if(S.tab==='sw')return 'swSz'; return null; } el('main-area').addEventListener('touchstart',function(e){ if(e.touches.length===2){ var dx=e.touches[0].clientX-e.touches[1].clientX; var dy=e.touches[0].clientY-e.touches[1].clientY; pinchStartDist=Math.sqrt(dx*dx+dy*dy); var key=getPinchTarget(); pinchStartSz=key?S[key]:90; } },{passive:true}); el('main-area').addEventListener('touchmove',function(e){ if(e.touches.length===2){ var dx=e.touches[0].clientX-e.touches[1].clientX; var dy=e.touches[0].clientY-e.touches[1].clientY; var dist=Math.sqrt(dx*dx+dy*dy); var ratio=dist/pinchStartDist; var key=getPinchTarget(); if(!key)return; var newSz=Math.round(Math.max(24,Math.min(280,pinchStartSz*ratio))); S[key]=newSz; if(key==='clkSz'){S.clkSecSz=Math.round(newSz*0.3);tickClock();} else if(key==='tmrSz')updateTmrDisplay(); else if(key==='swSz')updateSwDisplay(); syncSetUI(); } },{passive:true}); /* ===== 드래그로 화면 이동 (팝업모드에서 window 이동) ===== */ var dragStartX=0,dragStartY=0,isDragging=false; el('tab-bar').addEventListener('mousedown',function(e){ if(S.mode!=='popup')return; isDragging=true;dragStartX=e.screenX;dragStartY=e.screenY; }); document.addEventListener('mousemove',function(e){ if(!isDragging)return; try{window.moveBy(e.screenX-dragStartX,e.screenY-dragStartY);}catch(ex){} dragStartX=e.screenX;dragStartY=e.screenY; }); document.addEventListener('mouseup',function(){isDragging=false;}); } /* ===== URL 파라미터 ===== */ function getMode(){ var qs=location.search+location.hash; if(qs.indexOf('mode=popup')>-1||qs.indexOf('popup')>-1)return 'popup'; if(qs.indexOf('mode=full')>-1||qs.indexOf('full')>-1)return 'full'; /* window.opener 체크: 팝업으로 열렸으면 무조건 popup 모드 */ try{if(window.opener&&window.opener!==window)return 'popup';}catch(e){} return 'main'; } /* ===== 초기화 ===== */ function init(){ load();bind();syncTmrSpinUI(); var mode=getMode();showMode(mode); if(mode==='full'){try{document.documentElement.requestFullscreen&&document.documentElement.requestFullscreen();}catch(e){}} } window.TIMER={ tab:tab,openFull:openFull,openPopup:openPopup,closeApp:closeApp, toggleLaser:toggleLaser,toggleSet:toggleSet,toggleFS:toggleFS, toggleBanner:toggleBanner,toggleAd:toggleAd, mediaPrev:mediaPrev,mediaNext:mediaNext, addMsg:addMsg,saveSet:saveSet,clearBg:clearBg,setFit:setFit,cycleFit:cycleFit,adjustTmr:adjustTmr,toggleMenus:toggleMenus, openQr:openQr,closeQr:closeQr,copyShareUrl:copyShareUrl, toggleAccordion:toggleAccordion, }; init(); })(); /* ============================================================ 미리보기 (PV) - IIFE 분리 ============================================================ */ var PV=(function(){ var pvTab='clock'; var pvTmrRem=600,pvTmrRun=false,pvTmrItv=null; var pvSwRun=false,pvSwStart=0,pvSwElap=0,pvSwItv=null; var pvClkItv=null; function p2(n){return('0'+n).slice(-2);} function tab(name){ pvTab=name; var ids=['clock','timer','sw']; for(var i=0;i<ids.length;i++){ var el=document.getElementById('pv-'+ids[i]); if(el)el.style.display=(ids[i]===name)?'flex':'none'; } var tabs=document.querySelectorAll('.preview-tab'); for(var i=0;i<tabs.length;i++)tabs[i].classList.remove('on'); var order=['clock','timer','sw']; var idx=order.indexOf(name);if(idx>=0)tabs[idx].classList.add('on'); if(name==='clock'&&!pvClkItv){pvClkItv=setInterval(tickClock,500);tickClock();} } function tickClock(){ var now=new Date(),h=now.getHours(),m=now.getMinutes(),s=now.getSeconds(); var hm=document.getElementById('pv-hm');var sec=document.getElementById('pv-sec');var dt=document.getElementById('pv-date'); if(hm)hm.textContent=p2(h)+':'+p2(m); if(sec)sec.textContent=p2(s)+'초'; var days=['일','월','화','수','목','금','토']; if(dt)dt.textContent=(now.getMonth()+1)+'월 '+now.getDate()+'일 ('+days[now.getDay()]+')'; } function startTmr(){ if(pvTmrRun){pvTmrRun=false;clearInterval(pvTmrItv);var b=document.getElementById('pv-start');if(b){b.textContent='▶ 시작';b.style.background='#10b981';}return;} if(pvTmrRem<=0)pvTmrRem=600; pvTmrRun=true; var b=document.getElementById('pv-start');if(b){b.textContent='⏸ 정지';b.style.background='#ef4444';} pvTmrItv=setInterval(function(){ if(pvTmrRem>0){pvTmrRem--;var h=Math.floor(pvTmrRem/3600),m=Math.floor((pvTmrRem%3600)/60),s=pvTmrRem%60;var d=document.getElementById('pv-tmr-disp');if(d)d.textContent=(h>0?p2(h)+':':'')+p2(m)+':'+p2(s);} else{clearInterval(pvTmrItv);pvTmrRun=false;var b=document.getElementById('pv-start');if(b){b.textContent='▶ 시작';b.style.background='#10b981';}var st=document.getElementById('pv-tmr-st');if(st)st.textContent='종료 ✓';} },1000); } function resetTmr(){clearInterval(pvTmrItv);pvTmrRun=false;pvTmrRem=600;var d=document.getElementById('pv-tmr-disp');if(d)d.textContent='10:00';var b=document.getElementById('pv-start');if(b){b.textContent='▶ 시작';b.style.background='#10b981';}var st=document.getElementById('pv-tmr-st');if(st)st.textContent='대기중';} function startSw(){ if(pvSwRun){pvSwRun=false;clearInterval(pvSwItv);var b=document.getElementById('pv-sw-btn');if(b){b.textContent='▶ 시작';b.style.background='#10b981';}return;} pvSwRun=true;pvSwStart=Date.now()-pvSwElap; var b=document.getElementById('pv-sw-btn');if(b){b.textContent='⏸ 정지';b.style.background='#ef4444';} pvSwItv=setInterval(function(){ pvSwElap=Date.now()-pvSwStart; var ms=pvSwElap,m=Math.floor(ms/60000),s=Math.floor((ms%60000)/1000),cs=Math.floor((ms%1000)/10); var d=document.getElementById('pv-sw-disp');if(d)d.innerHTML=p2(m)+':'+p2(s)+'<span class="p-sw-ms">.'+p2(cs)+'</span>'; },30); } function resetSw(){clearInterval(pvSwItv);pvSwRun=false;pvSwElap=0;var d=document.getElementById('pv-sw-disp');if(d)d.innerHTML='00:00<span class="p-sw-ms">.00</span>';var b=document.getElementById('pv-sw-btn');if(b){b.textContent='▶ 시작';b.style.background='#10b981';}} /* 시작 */ if(document.getElementById('pv-hm')){pvClkItv=setInterval(tickClock,500);tickClock();} return{tab:tab,startTmr:startTmr,resetTmr:resetTmr,startSw:startSw,resetSw:resetSw}; })(); /* ============================================================ QR 생성 (경량 내장) ============================================================ */ function openQr(){ /* 설정값을 URL 파라미터로 직렬화 */ try{ var S2=JSON.parse(localStorage.getItem('presTimer_v5')||'{}'); var params=[]; if(S2.clkColor&&S2.clkColor!=='#ffffff')params.push('cc='+encodeURIComponent(S2.clkColor)); if(S2.clkSz&&S2.clkSz!==90)params.push('cs='+S2.clkSz); if(S2.tickerTxt)params.push('tt='+encodeURIComponent(S2.tickerTxt)); if(S2.bannerTxt)params.push('bt='+encodeURIComponent(S2.bannerTxt)); var base=location.origin+location.pathname; var shareUrl=params.length>0?base+'?'+params.join('&'):base; document.getElementById('qr-url-text').textContent=shareUrl; /* QR 간단 생성 (QR API) */ var canvas=document.getElementById('qr-canvas'); var img=new Image(); img.onload=function(){var ctx=canvas.getContext('2d');ctx.drawImage(img,0,0,180,180);}; img.src='https://api.qrserver.com/v1/create-qr-code/?size=180x180&data='+encodeURIComponent(shareUrl); document.getElementById('qr-modal').classList.add('on'); }catch(e){alert('공유 URL: '+location.href);} } function closeQr(){document.getElementById('qr-modal').classList.remove('on');} function copyShareUrl(){ var txt=document.getElementById('qr-url-text').textContent; if(navigator.clipboard){navigator.clipboard.writeText(txt).then(function(){alert('URL이 복사되었습니다!');});} else{var ta=document.createElement('textarea');ta.value=txt;document.body.appendChild(ta);ta.select();document.execCommand('copy');document.body.removeChild(ta);alert('URL이 복사되었습니다!');} } /* 아코디언 */ function toggleAccordion(id){ var body=document.getElementById('acc-'+id); var arr=document.getElementById('arr-'+id); if(!body)return; var isOpen=body.classList.contains('open'); body.classList[isOpen?'remove':'add']('open'); if(arr)arr.classList[isOpen?'remove':'add']('open'); } </script> </body> </html> 모두의계산기/각종타이머 발표 발표장 타이머 팝업타이머 최매슨생 https://0-1.kr/22 https://0-1.kr/22#entry22comment Thu, 12 Nov 2020 20:56:22 +0900