https://0-1.kr/ 창업을 희망하는 예비창업자, 직장인, 초보 스타트업대표님들을 위한 필수 지원 프로그램과 창업자금 마련프로그램만을 소개해 드립니다. ko Sun, 20 Sep 2026 21:38:50 +0900 TISTORY 100 최매슨생 https://tistory1.daumcdn.net/tistory/4330872/attach/216e2b43a4c44f79aa3c5c0762dbbe20 https://0-1.kr 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/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/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 <blockquote data-ke-style="style1"><span style="font-family: 'Noto Serif KR';"> <span style="background-color: #fcfcfc; color: #666666; text-align: left;">국가지원 민간지원의 구분</span><br /><span style="background-color: #fcfcfc; color: #666666; text-align: left;">수익 실현기관인지 아닌지로 구분<br />포스터 하단의 주관과 주최 확인 필수!</span><br /></span></blockquote> <p 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 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">&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">&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: left;" data-ke-size="size16">1)중소벤처기업부 : 정부기관 중 창업지원관련 자금 컨트롤하는 최상위 기</p> <table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignLeft"> <tbody> <tr> <td style="width: 21.4728%; text-align: center;">&nbsp;</td> <td style="width: 29.4961%; text-align: center;"><b>산하공공기관</b></td> <td style="width: 49.031%; text-align: center;">&nbsp;</td> </tr> <tr> <td style="width: 21.4728%;">중소벤처기업부</td> <td style="width: 29.4961%;">* 1)창업진흥원</td> <td style="width: 49.031%;">&nbsp;</td> </tr> <tr> <td style="width: 21.4728%;"><a style="background-color: #e6f5ff; color: #0070d1; text-align: left;" href="http://www.mss.go.kr">www.mss.go.kr</a></td> <td style="width: 29.4961%;">* 2)소상공인시장진흥공단&nbsp;&nbsp;</td> <td style="width: 49.031%;">&nbsp;</td> </tr> <tr> <td style="width: 21.4728%;">&nbsp;</td> <td style="width: 29.4961%;">* 3)한국벤처투자 &nbsp;</td> <td style="width: 49.031%;">&nbsp;</td> </tr> <tr> <td style="width: 21.4728%;">&nbsp;</td> <td style="width: 29.4961%;">* 4)공영홈쇼핑</td> <td style="width: 49.031%;">&nbsp;</td> </tr> <tr> <td style="width: 21.4728%;">&nbsp;</td> <td style="width: 29.4961%;">* 5)기술보증기금&nbsp;</td> <td style="width: 49.031%;">&nbsp;</td> </tr> <tr> <td style="width: 21.4728%;">&nbsp;</td> <td style="width: 29.4961%;">* 6)신용보증재단중앙회</td> <td style="width: 49.031%;">&nbsp;</td> </tr> <tr> <td style="width: 21.4728%;">&nbsp;</td> <td style="width: 29.4961%;">* 7)중소벤처기업진흥공단</td> <td style="width: 49.031%;">&nbsp;</td> </tr> <tr> <td style="width: 21.4728%;">&nbsp;</td> <td style="width: 29.4961%;">8)중소기업유통센터</td> <td style="width: 49.031%;">&nbsp;</td> </tr> <tr> <td style="width: 21.4728%;">&nbsp;</td> <td style="width: 29.4961%;">9)중소기업기술정보진흥원</td> <td style="width: 49.031%;">&nbsp;</td> </tr> <tr> <td style="width: 21.4728%;">&nbsp;</td> <td style="width: 29.4961%;">10)중소벤처기업연구원</td> <td style="width: 49.031%;">&nbsp;</td> </tr> <tr> <td style="width: 21.4728%;">&nbsp;</td> <td style="width: 29.4961%;">11)장애인기업종합지원센터</td> <td style="width: 49.031%;">&nbsp;</td> </tr> </tbody> </table> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">2)</p> <table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignLeft"> <tbody> <tr> <td style="width: 20.8914%;">사이트명</td> <td style="width: 30.0775%;">바로가기</td> <td style="width: 49.031%;">중요링크</td> </tr> <tr> <td style="width: 20.8914%;">* k-startup</td> <td style="width: 30.0775%;"><a href="http://www.k-startup.go.kr" target="_blank" rel="noopener&nbsp;noreferrer">www.k-startup.go.kr</a></td> <td style="width: 49.031%;"><a title="23년에 진행될 사업을 한눈에 볼수 있습니다. 24년 사업도 예측가능하죠?" href="https://www.k-startup.go.kr/web/contents/bizpbanc-ongoing.do?schM=view&amp;pbancSn=162994" target="_blank" rel="noopener">- 23년 창업지원사업 통합공고</a><br /><a title="대출이 아닌 각종 지원사업의 종류를 살펴보자구요" href="https://www.k-startup.go.kr/web/contents/webCMRCZN.do" target="_blank" rel="noopener">- 지원사업(사업화) 종류</a><br /><a title="사업공간을 지원 받을 수 있습니다!" href="https://www.k-startup.go.kr/web/contents/webFC_SP_NR.do" target="_blank" rel="noopener">- 공간지원 종류</a></td> </tr> <tr> <td style="width: 20.8914%;">* 중소벤처24</td> <td style="width: 30.0775%;"><a href="http://www.smes.go.kr" target="_blank" rel="noopener&nbsp;noreferrer">www.smes.go.kr</a></td> <td style="width: 49.031%;">&nbsp;</td> </tr> <tr> <td style="width: 20.8914%;">기업마당</td> <td style="width: 30.0775%;"><a href="http://www.bizinfo.go.kr" target="_blank" rel="noopener&nbsp;noreferrer">www.bizinfo.go.kr</a></td> <td style="width: 49.031%;">&nbsp;</td> </tr> <tr> <td style="width: 20.8914%;">* 소상공인마당</td> <td style="width: 30.0775%;"><a href="http://www.sbiz.or.kr" target="_blank" rel="noopener&nbsp;noreferrer">www.sbiz.or.kr</a></td> <td style="width: 49.031%;">&nbsp;</td> </tr> </tbody> </table> <p data-ke-size="size16">&nbsp;</p> <p data-ke-size="size16">3)&nbsp;</p> 스타트업 운영TIP/문서작성&amp;증빙 TIP 바로가기 즐겨찾기 창업지원사이트 최매슨생 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 https://0-1.kr/21 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>행사전게시판2</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script> <script>if(typeof pdfjsLib!=='undefined') pdfjsLib.GlobalWorkerOptions.workerSrc='https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';</script> <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Black+Han+Sans&family=Jua&family=Gaegu&family=Do+Hyeon&display=swap" rel="stylesheet"> <style> *{box-sizing:border-box;margin:0;padding:0;} body{font-family:'Noto Sans KR',sans-serif;background:#f0f2f5;color:#222;min-height:100vh;} #eb2-root{max-width:900px;margin:0 auto;padding:16px;} .eb2-section{background:#fff;border:1px solid #dde1e7;border-radius:10px;margin-bottom:14px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.06);} .eb2-section-header{background:#f7f8fa;padding:10px 16px;font-size:14px;font-weight:700;color:#333;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;border-bottom:1px solid #dde1e7;} .eb2-section-header .eb2-toggle{margin-left:auto;font-size:16px;color:#999;} .eb2-section-body{padding:14px 16px;} .eb2-row{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap;} .eb2-label{font-size:12px;color:#555;min-width:80px;flex-shrink:0;} .eb2-input{background:#f7f8fa;border:1px solid #dde1e7;border-radius:6px;color:#222;padding:7px 10px;font-size:13px;flex:1;min-width:120px;} .eb2-input:focus{outline:none;border-color:#4a90e2;} .eb2-btn{background:#fff;border:1px solid #4a90e2;border-radius:6px;color:#4a90e2;padding:7px 14px;font-size:12px;cursor:pointer;white-space:nowrap;} .eb2-btn:hover{background:#4a90e2;color:#fff;} .eb2-btn-sm{padding:4px 10px;font-size:11px;} .eb2-img-preview{width:90px;height:56px;object-fit:contain;border:1px solid #dde1e7;border-radius:6px;background:#f7f8fa;} .eb2-img-placeholder{width:90px;height:56px;border:1px dashed #bbb;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#aaa;background:#f7f8fa;} .eb2-radio-group{display:flex;gap:8px;flex-wrap:wrap;} .eb2-radio-label{display:flex;align-items:center;gap:5px;font-size:12px;color:#555;cursor:pointer;background:#f7f8fa;border:1px solid #dde1e7;border-radius:6px;padding:5px 10px;transition:all 0.15s;} .eb2-radio-label input{cursor:pointer;} .eb2-radio-label:hover{border-color:#4a90e2;color:#4a90e2;} .eb2-radio-label.selected{background:#e8f0fc;border-color:#4a90e2;color:#4a90e2;font-weight:700;} .eb2-check-label{display:flex;align-items:center;gap:6px;font-size:13px;color:#444;cursor:pointer;} .eb2-check-label input{cursor:pointer;width:15px;height:15px;} .eb2-file-list{display:flex;flex-direction:column;gap:6px;} .eb2-file-item{background:#f7f8fa;border:1px solid #dde1e7;border-radius:6px;padding:8px 12px;display:flex;align-items:center;gap:8px;} .eb2-file-item .eb2-file-name{font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;} .eb2-file-item .eb2-file-type{font-size:10px;color:#fff;background:#4a90e2;padding:2px 7px;border-radius:4px;white-space:nowrap;} .eb2-file-move{background:none;border:1px solid #dde1e7;border-radius:4px;color:#888;cursor:pointer;font-size:12px;padding:2px 6px;} .eb2-file-move:hover{border-color:#4a90e2;color:#4a90e2;} .eb2-file-del{background:none;border:none;color:#ccc;cursor:pointer;font-size:15px;padding:2px 4px;} .eb2-file-del:hover{color:#e94560;} .eb2-add-row{display:flex;gap:8px;margin-top:8px;} .eb2-opt-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;} .eb2-opt-item{display:flex;align-items:center;gap:7px;} .eb2-opt-item label{font-size:12px;color:#555;} .eb2-opt-item select{background:#f7f8fa;border:1px solid #dde1e7;border-radius:6px;color:#333;padding:5px 8px;font-size:13px;} .eb2-opt-item input[type=color]{padding:2px;width:38px;height:30px;cursor:pointer;border:1px solid #dde1e7;border-radius:4px;} .eb2-opt-item input[type=range]{width:80px;} .eb2-hint{font-size:11px;color:#999;margin-top:5px;line-height:1.5;} .eb2-hint span{color:#4a90e2;} .eb2-divider{border:none;border-top:1px solid #eee;margin:10px 0;} .eb2-sub-box{background:#f0f6ff;border:1px solid #c3d9f7;border-radius:7px;padding:12px;margin-top:8px;} .eb2-sub-box .eb2-row{margin-bottom:8px;} .eb2-sub-box .eb2-row:last-child{margin-bottom:0;} .eb2-banner-design-box{background:#fff8f0;border:1px solid #f5c97a;border-radius:7px;padding:12px;margin-top:8px;} .eb2-banner-zone{background:#fff;border:1px dashed #ddd;border-radius:6px;padding:10px 12px;margin-bottom:8px;} .eb2-banner-zone:last-child{margin-bottom:0;} .eb2-banner-zone-title{font-size:11px;color:#888;margin-bottom:7px;font-weight:700;letter-spacing:0.5px;} .eb2-preview-wrap{position:relative;border-radius:8px;overflow:hidden;background:#000;min-height:300px;} .eb2-preview-inner{width:100%;min-height:300px;display:flex;flex-direction:column;} .eb2-slide-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.4);border:none;color:#fff;font-size:24px;cursor:pointer;padding:8px 12px;border-radius:6px;z-index:10;} .eb2-slide-arrow.left{left:8px;} .eb2-slide-arrow.right{right:8px;} .eb2-main-btns{display:flex;gap:10px;justify-content:center;margin:10px 0 20px;} .eb2-btn-fullscreen{background:#4a90e2;border:none;border-radius:8px;color:#fff;font-size:15px;font-weight:700;padding:12px 36px;cursor:pointer;} .eb2-btn-fullscreen:hover{background:#2a70c2;} /* 전체화면 */ #eb2-fullscreen{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2147483647;flex-direction:column;} #eb2-fullscreen.active{display:flex;} #eb2-fs-close{position:fixed;top:10px;right:14px;background:rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.3);border-radius:6px;color:#fff;font-size:18px;cursor:pointer;padding:4px 10px;z-index:2147483647;} #eb2-fs-nav-wrap{position:fixed;bottom:0;left:0;width:100%;z-index:2147483646;transition:transform 0.3s ease;} #eb2-fs-nav-wrap.hidden-nav{transform:translateY(100%);} #eb2-laser-dot{display:none;position:fixed;width:18px;height:18px;border-radius:50%;background:rgba(255,30,30,0.92);box-shadow:0 0 10px 5px rgba(255,60,60,0.65),0 0 28px 10px rgba(255,0,0,0.35);transform:translate(-50%,-50%);pointer-events:none;z-index:2147483647;}#eb2-fs-nav{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;background:rgba(0,0,0,0.55);flex-wrap:wrap;} .eb2-nav-btn{position:relative;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.35);border-radius:5px;color:#fff;font-size:11px;padding:4px 10px;cursor:pointer;transition:background 0.15s;} .eb2-nav-btn:hover{background:rgba(255,255,255,0.3);} .eb2-nav-btn.active{background:#e94560;border-color:#e94560;} .eb2-nav-tooltip{position:absolute;bottom:calc(100%+6px);left:50%;transform:translateX(-50%);background:#222;color:#fff;font-size:10px;padding:4px 8px;border-radius:4px;white-space:nowrap;pointer-events:none;display:none;z-index:20;} .eb2-nav-btn:hover .eb2-nav-tooltip{display:block;} .eb2-nav-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:#222;} .eb2-nav-autohide-btn{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25);border-radius:5px;color:rgba(255,255,255,0.5);font-size:10px;padding:4px 10px;cursor:pointer;margin-left:8px;transition:all 0.2s;} .eb2-nav-autohide-btn.off{background:rgba(74,144,226,0.3);border-color:#4a90e2;color:#7ab8f5;} .eb2-fs-arr{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.35);border:none;color:#fff;font-size:40px;cursor:pointer;padding:14px 18px;border-radius:8px;z-index:10;} .eb2-fs-arr.left{left:12px;} .eb2-fs-arr.right{right:12px;} </style> </head> <body> <div id="eb2-root"> <div style="text-align:center;padding:16px 0 8px;"> <h1 style="font-size:22px;font-weight:700;color:#4a90e2;letter-spacing:1px;">행사전게시판2</h1> <p style="font-size:12px;color:#aaa;margin-top:4px;">설정 후 전체화면으로 운영하세요</p> </div> <!-- 미리보기 --> <div class="eb2-section"> <div class="eb2-section-header" onclick="eb2Toggle('preview')"> 미리보기<span class="eb2-toggle" id="eb2-tog-preview">▲</span></div> <div class="eb2-section-body" id="eb2-body-preview" style="padding:0;"> <div class="eb2-preview-wrap"> <div class="eb2-preview-inner" id="eb2-pv-main"></div> </div> <div id="eb2-pv-indicator" style="text-align:center;font-size:11px;color:#999;padding:5px;background:#f7f8fa;border-top:1px solid #eee;"></div> </div> </div> <!-- 현수막/로고 --> <div class="eb2-section"> <div class="eb2-section-header" onclick="eb2Toggle('banner')"> 현수막 / 로고 이미지<span class="eb2-toggle" id="eb2-tog-banner">▲</span></div> <div class="eb2-section-body" id="eb2-body-banner"> <div class="eb2-row"> <span class="eb2-label">배치 방식</span> <div class="eb2-radio-group" id="eb2-layout-group"> <label class="eb2-radio-label selected"><input type="radio" name="eb2-layout" value="text" checked onchange="eb2LayoutChange()"> 직접입력(임시현수막)</label> <label class="eb2-radio-label"><input type="radio" name="eb2-layout" value="top-fit" onchange="eb2LayoutChange()"> 상단고정배너(꽉찬화면)</label> <label class="eb2-radio-label"><input type="radio" name="eb2-layout" value="top-ori" onchange="eb2LayoutChange()"> 상단고정배너(원본)</label> <label class="eb2-radio-label"><input type="radio" name="eb2-layout" value="side" onchange="eb2LayoutChange()"> 양옆배너</label> <label class="eb2-radio-label"><input type="radio" name="eb2-layout" value="logo" onchange="eb2LayoutChange()"> 로고(배너내)</label> </div> </div> <div id="eb2-img-upload-area"> <div class="eb2-row"> <span class="eb2-label" id="eb2-img-label">현수막 이미지</span> <div id="eb2-img-preview-wrap"><div class="eb2-img-placeholder">없음</div></div> <input type="file" id="eb2-main-img-file" accept="image/*" style="display:none" onchange="eb2LoadMainImg(this)"> <button class="eb2-btn eb2-btn-sm" onclick="document.getElementById('eb2-main-img-file').click()">업로드</button> <button class="eb2-btn eb2-btn-sm" onclick="eb2ClearMainImg()">삭제</button> </div> <p class="eb2-hint" id="eb2-img-hint">추천 사이즈: <span>1920×200px</span> 권장 — 가로 꽉차게 표시 · 배너 높이 조절로 크기 조정</p> </div> <div id="eb2-banner-style-row" style="margin-top:6px;"> <div class="eb2-row" style="margin-bottom:0;"> <span class="eb2-label">배너 배경</span><input type="color" id="eb2-banner-bg" value="#1a2a4a" oninput="eb2Render()"> <span class="eb2-label" style="margin-left:10px;">글자색</span><input type="color" id="eb2-banner-fg" value="#ffffff" oninput="eb2Render()"> <span class="eb2-label" style="margin-left:10px;">배너높이</span> <input class="eb2-input" type="number" id="eb2-banner-h" value="170" min="40" max="500" style="max-width:65px" oninput="eb2Render()"> <span style="font-size:12px;color:#888;">px</span> </div> </div> <div id="eb2-side-row" style="display:none;margin-top:6px;"> <div class="eb2-row" style="margin-bottom:0;"> <span class="eb2-label">배너 배경</span><input type="color" id="eb2-side-bg" value="#1a2a4a" oninput="eb2Render()"> <span class="eb2-label" style="margin-left:10px;">배너 너비</span> <input class="eb2-input" type="number" id="eb2-side-w" value="160" min="60" max="400" style="max-width:65px" oninput="eb2Render()"> <span style="font-size:12px;color:#888;">px</span> </div> </div> <hr class="eb2-divider"> <div class="eb2-row" id="eb2-title-check-row"> <label class="eb2-check-label"><input type="checkbox" id="eb2-show-title" onchange="eb2Render()"> 전체화면에 행사명/부제목 텍스트 표기</label> <span style="font-size:11px;color:#aaa;margin-left:6px;">(기본: 비활성)</span> </div> <div id="eb2-title-box" class="eb2-sub-box" style="display:none;"> <div class="eb2-row"><span class="eb2-label">행사명</span><input class="eb2-input" id="eb2-ev-title" placeholder="행사 제목" oninput="eb2Render()"></div> <div class="eb2-row"><span class="eb2-label">부제목</span><input class="eb2-input" id="eb2-ev-sub" placeholder="부제목 (선택)" oninput="eb2Render()"></div> </div> <!-- 임시현수막 --> <div id="eb2-text-banner-box" class="eb2-banner-design-box" style="display:none;"> <div style="font-size:12px;font-weight:700;color:#c17f00;margin-bottom:10px;"> 임시현수막 디자인 설정 <span style="font-weight:400;color:#aaa;">— 배너 높이(px)로 전체 크기 조절</span></div> <div class="eb2-opt-row" style="margin-bottom:10px;"> <div class="eb2-opt-item"><label>배경색</label><input type="color" id="tb-bg-color" value="#1a2a4a" oninput="eb2Render()"></div> <div class="eb2-opt-item"> <label>배경 투명도</label> <input type="range" id="tb-bg-opacity" min="0" max="100" value="100" oninput="document.getElementById('tb-bg-opacity-val').textContent=this.value+'%';eb2Render()"> <span id="tb-bg-opacity-val" style="font-size:11px;color:#888;min-width:32px;">100%</span> </div> <div class="eb2-opt-item"><label>폰트</label> <select id="tb-font" onchange="eb2Render()"> <option value="'Noto Sans KR',sans-serif">Noto Sans (기본)</option> <option value="'Nanum Gothic',sans-serif">나눔고딕</option> <option value="'Nanum Myeongjo',serif">나눔명조</option> <option value="'Malgun Gothic',sans-serif">맑은고딕</option> <option value="Georgia,serif">Georgia</option> <option value="'Nanum Pen Script',cursive">나눔펜글씨 (손글씨)</option> <option value="'Black Han Sans',sans-serif">블랙한산스 (굵고 임팩트)</option> <option value="'Jua',sans-serif">주아체 (둥글둥글)</option> <option value="'Gaegu',cursive">개구체 (캐주얼)</option> <option value="'Do Hyeon',sans-serif">도현체 (모던 슬림)</option> </select> </div> <div class="eb2-opt-item"><label>정렬</label> <select id="tb-align" onchange="eb2Render()"> <option value="center" selected>가운데</option> <option value="left">왼쪽</option> <option value="right">오른쪽</option> </select> </div> </div> <div class="eb2-opt-row" style="margin-bottom:10px;"> <div class="eb2-opt-item"><label>로고 배치</label> <select id="tb-logo-mode" onchange="eb2Render()"> <option value="none">없음</option> <option value="left" selected>텍스트 왼쪽</option> <option value="right">텍스트 오른쪽</option> <option value="behind">글자 뒤(워터마크)</option> </select> </div> <div class="eb2-opt-item"> <label>로고 이미지</label> <input type="file" id="tb-logo-file" accept="image/*" style="display:none" onchange="eb2LoadTbLogo(this)"> <button class="eb2-btn eb2-btn-sm" onclick="document.getElementById('tb-logo-file').click()">업로드</button> <span id="tb-logo-name" style="font-size:11px;color:#888;"></span> </div> </div> <p class="eb2-hint" style="margin-top:-4px;margin-bottom:8px;">로고 추천 사이즈: <span>정방형 200×200px</span> 이상 · 배너높이에 비례해 자동 조절</p> <div class="eb2-opt-row" style="margin-bottom:10px;"> <div class="eb2-opt-item"><label>배경 이미지</label> <select id="tb-bg-img-mode" onchange="eb2Render()"> <option value="none">없음</option> <option value="cover">꽉찬 흐린 배경</option> <option value="contain">원본 흐리게</option> <option value="gradient" selected>그라데이션✨추천</option> </select> </div> <div class="eb2-opt-item"> <label>흐림강도</label> <input type="range" id="tb-bg-blur" min="0" max="20" value="8" oninput="document.getElementById('tb-bg-blur-val').textContent=this.value;eb2Render()"> <span id="tb-bg-blur-val" style="font-size:11px;color:#888;min-width:20px;">8</span> </div> </div> <div class="eb2-opt-row" style="margin-bottom:4px;"> <div class="eb2-opt-item"> <label>배경 이미지<br><span style="font-size:10px;color:#aaa;">별도파일</span></label> <input type="file" id="tb-bgimg-file" accept="image/*" style="display:none" onchange="eb2LoadTbBgImg(this)"> <button class="eb2-btn eb2-btn-sm" onclick="document.getElementById('tb-bgimg-file').click()">업로드</button> <button class="eb2-btn eb2-btn-sm" onclick="eb2ClearTbBgImg()">삭제</button> <span id="tb-bgimg-name" style="font-size:11px;color:#888;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;"></span> </div> </div> <p class="eb2-hint" style="margin-bottom:10px;">배경 이미지 미업로드 시 로고 이미지가 배경으로 사용됩니다 · 추천 사이즈: <span>1920×200px</span> 이상 (가로형)</p> <div class="eb2-banner-zone"> <div class="eb2-banner-zone-title">▲ 상단 텍스트</div> <div class="eb2-opt-row"> <div class="eb2-opt-item" style="flex:1;min-width:180px;"><input class="eb2-input" id="tb-top-text" placeholder="예) 2025 경남 청년창업 경진대회" oninput="eb2Render()"></div> <div class="eb2-opt-item"><label>색</label><input type="color" id="tb-top-color" value="#aaccff" oninput="eb2Render()"></div> <div class="eb2-opt-item"><label>비율</label> <select id="tb-top-size" onchange="eb2Render()"> <option value="0">없음</option> <option value="0.12" selected>소</option><option value="0.18">중</option><option value="0.25">대</option> </select> </div> </div> </div> <div class="eb2-banner-zone"> <div class="eb2-banner-zone-title">★ 중간 텍스트 (메인)</div> <div class="eb2-opt-row"> <div class="eb2-opt-item" style="flex:1;min-width:180px;"><input class="eb2-input" id="tb-mid-text" placeholder="예) 개회식" oninput="eb2Render()"></div> <div class="eb2-opt-item"><label>색</label><input type="color" id="tb-mid-color" value="#ffffff" oninput="eb2Render()"></div> <div class="eb2-opt-item"><label>비율</label> <select id="tb-mid-size" onchange="eb2Render()"> <option value="0">없음</option> <option value="0.30">소</option><option value="0.45" selected>중</option><option value="0.60">대</option><option value="0.75">특대</option> </select> </div> </div> </div> <div class="eb2-banner-zone"> <div class="eb2-banner-zone-title">▼ 하단 텍스트</div> <div class="eb2-opt-row"> <div class="eb2-opt-item" style="flex:1;min-width:180px;"><input class="eb2-input" id="tb-bot-text" placeholder="예) 2025. 11. 15(금)" oninput="eb2Render()"></div> <div class="eb2-opt-item"><label>색</label><input type="color" id="tb-bot-color" value="#aaccff" oninput="eb2Render()"></div> <div class="eb2-opt-item"><label>비율</label> <select id="tb-bot-size" onchange="eb2Render()"> <option value="0" selected>없음</option> <option value="0.12">소</option><option value="0.18">중</option><option value="0.25">대</option> </select> </div> </div> </div> <div class="eb2-opt-row" style="margin-top:8px;"> <div class="eb2-opt-item"><label>장식선</label> <select id="tb-deco" onchange="eb2Render()"> <option value="none">없음</option><option value="line" selected>라인</option><option value="double">이중라인</option><option value="glow">빛나는선</option> </select> </div> <div class="eb2-opt-item"><label>장식선 색</label><input type="color" id="tb-deco-color" value="#4a90e2" oninput="eb2Render()"></div> </div> </div> </div> </div> <!-- 발표자료 --> <div class="eb2-section"> <div class="eb2-section-header" onclick="eb2Toggle('files')"> 발표자료 (PDF / 이미지)<span class="eb2-toggle" id="eb2-tog-files">▲</span></div> <div class="eb2-section-body" id="eb2-body-files"> <div id="eb2-file-list" class="eb2-file-list"></div> <div class="eb2-add-row"> <input type="file" id="eb2-add-pdf" accept=".pdf" style="display:none" onchange="eb2AddFiles(this,'pdf')"> <input type="file" id="eb2-add-img" accept="image/*" multiple style="display:none" onchange="eb2AddFiles(this,'img')"> <button class="eb2-btn" onclick="document.getElementById('eb2-add-pdf').click()">+ PDF 추가</button> <button class="eb2-btn" onclick="document.getElementById('eb2-add-img').click()">+ 이미지 추가</button> </div> <p class="eb2-hint" style="margin-top:6px;">순서 ▲▼ 변경 / 전체화면 하단 네비 클릭으로 즉시 전환</p> </div> </div> <!-- 공지멘트 --> <div class="eb2-section"> <div class="eb2-section-header" onclick="eb2Toggle('notice')"> 공지멘트 슬라이드<span class="eb2-toggle" id="eb2-tog-notice">▲</span></div> <div class="eb2-section-body" id="eb2-body-notice"> <div style="margin-bottom:10px;"> <div style="font-size:11px;font-weight:700;color:#4a90e2;margin-bottom:5px;"> 첫화면 공지 <span style="color:#aaa;font-weight:400;">(main 다음에 표시 — 내용 없으면 스킵)</span></div> <textarea id="eb2-first-notice" placeholder="첫화면 공지 내용 입력" style="width:100%;background:#f0f6ff;border:1px solid #c3d9f7;border-radius:6px;color:#222;padding:8px 10px;font-size:13px;resize:vertical;min-height:56px;font-family:inherit;" oninput="eb2BuildNav()"></textarea> </div> <hr style="border:none;border-top:1px solid #eee;margin:8px 0;"> <div style="font-size:11px;font-weight:700;color:#888;margin-bottom:8px;"> 발표자료별 공지 <span style="font-weight:400;">(각 발표 후 표시 — 내용 없으면 스킵)</span></div> <div id="eb2-file-notice-list"></div> <div id="eb2-no-files-hint" style="font-size:12px;color:#bbb;padding:4px 0;">← 발표자료를 추가하면 여기에 공지 입력란이 생깁니다</div> </div> </div> <!-- 스타일 옵션 --> <div class="eb2-section"> <div class="eb2-section-header" onclick="eb2Toggle('style')"> 스타일 옵션<span class="eb2-toggle" id="eb2-tog-style">▲</span></div> <div class="eb2-section-body" id="eb2-body-style"> <div class="eb2-opt-row"> <div class="eb2-opt-item"><label>콘텐츠 배경</label><input type="color" id="eb2-content-bg" value="#1a1a2e" oninput="eb2Render()"></div> <div class="eb2-opt-item"><label>글자색</label><input type="color" id="eb2-content-fg" value="#ffffff" oninput="eb2Render()"></div> <div class="eb2-opt-item"><label>시계</label> <select id="eb2-clock-size" onchange="eb2Render()"> <option value="0" selected>없음</option> <option value="2">소(우하단)</option><option value="3.5">중(우하단)</option><option value="8">대(중앙)</option> </select> </div> <div class="eb2-opt-item"><label>공지크기</label> <select id="eb2-notice-size" onchange="eb2Render()"> <option value="3">소</option><option value="4" selected>중</option><option value="6">대</option> </select> </div> </div> </div> </div> <!-- 사진촬영 옵션 --> <div class="eb2-section"> <div class="eb2-section-header" onclick="eb2Toggle('photo')"> 사진촬영 옵션<span class="eb2-toggle" id="eb2-tog-photo">▼</span></div> <div class="eb2-section-body" id="eb2-body-photo" style="display:none;"> <div style="font-size:12px;color:#666;margin-bottom:10px;"> 마지막 슬라이드에서 현수막만 단독 표시합니다.<br> <span style="color:#4a90e2;">위치(%)를 조절해 사진 구도를 맞추세요 — 10%=상단, 50%=중간, 90%=하단</span> </div> <div class="eb2-opt-row"> <div class="eb2-opt-item"><label class="eb2-check-label"><input type="checkbox" id="eb2-photo-enabled" onchange="eb2PhotoToggle()"> 사진촬영 슬라이드 활성화</label></div> </div> <div id="eb2-photo-opts" style="display:none;margin-top:12px;"> <div class="eb2-row" style="align-items:center;gap:14px;"> <span class="eb2-label">현수막 위치</span> <input type="range" id="eb2-photo-pos" min="0" max="90" value="10" style="flex:1;max-width:200px;" oninput="eb2PhotoSlider()"> <span id="eb2-photo-pos-val" style="font-size:13px;font-weight:700;color:#4a90e2;min-width:36px;">10%</span> <span style="font-size:11px;color:#aaa;">(0%=최상단 / 90%=최하단)</span> </div> <p class="eb2-hint" style="margin-top:4px;">전체화면 슬라이드에서 슬라이더 또는 ▲▼ 키로 조정 가능</p> </div> <hr class="eb2-divider" style="margin-top:14px;"> </div> </div> <!-- 전체보기 하단 메뉴바 --> <div class="eb2-section"> <div class="eb2-section-header" onclick="eb2Toggle('navmode')"> 전체보기 하단 메뉴바<span class="eb2-toggle" id="eb2-tog-navmode">▲</span></div> <div class="eb2-section-body" id="eb2-body-navmode"> <div class="eb2-radio-group" id="eb2-nav-mode-group"> <label class="eb2-radio-label"><input type="radio" name="eb2-nav-mode" value="none" onchange="eb2NavModeChange()"> 없음</label> <label class="eb2-radio-label selected"><input type="radio" name="eb2-nav-mode" value="auto" checked onchange="eb2NavModeChange()"> 생성(자동숨김)</label> <label class="eb2-radio-label"><input type="radio" name="eb2-nav-mode" value="fixed" onchange="eb2NavModeChange()"> 고정배치</label> </div> <p class="eb2-hint" style="margin-top:8px;">없음: 하단 메뉴 미표시 / 자동숨김: 마우스 하단 이동 시 나타남 / 고정: 항상 표시</p> </div> </div> <div class="eb2-main-btns"> <button class="eb2-btn-fullscreen" onclick="eb2OpenFS()">⛶ 전체화면으로 시작</button> </div> </div> <!-- 전체화면 --> <div id="eb2-fullscreen" tabindex="-1" style="outline:none;"> <button id="eb2-fs-close" onclick="eb2CloseFS()">✕</button> <div id="eb2-fs-inner" style="flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;"></div> <div id="eb2-laser-dot"></div> <div id="eb2-fs-nav-wrap" class="hidden-nav"><div id="eb2-fs-nav"></div></div> </div> <script> (function(){ 'use strict'; var S = { mainImgSrc: null, tbLogoSrc: null, tbBgImgSrc: null, files: [], fileNotices: [], pvIdx: 0, fsIdx: 0, autoHide: true, pdfCache: {}, photoPercent: 10 }; /* ── 유틸 ── */ function pad(n){ return n<10?'0'+n:String(n); } function nowStr(){ var d=new Date(); return pad(d.getHours())+':'+pad(d.getMinutes())+':'+pad(d.getSeconds()); } function hexToRgba(hex, a){ var h=hex.replace('#',''); var r=parseInt(h.substring(0,2),16)||0; var g=parseInt(h.substring(2,4),16)||0; var b=parseInt(h.substring(4,6),16)||0; return 'rgba('+r+','+g+','+b+','+a+')'; } /* ── 섹션 토글 ── */ window.eb2Toggle = function(key){ var body=document.getElementById('eb2-body-'+key); var tog=document.getElementById('eb2-tog-'+key); if(!body) return; var hidden=body.style.display==='none'; body.style.display=hidden?'':'none'; tog.textContent=hidden?'▲':'▼'; }; /* ── 라디오 스타일 ── */ function syncRadio(){ var labels=document.querySelectorAll('#eb2-layout-group .eb2-radio-label'); for(var i=0;i<labels.length;i++){ labels[i].classList.toggle('selected', labels[i].querySelector('input').checked); } } /* ── 배치 변경 ── */ window.eb2LayoutChange = function(){ var val=document.querySelector('input[name="eb2-layout"]:checked').value; syncRadio(); var isText=(val==='text'), isSide=(val==='side'); document.getElementById('eb2-img-upload-area').style.display=isText?'none':''; document.getElementById('eb2-banner-style-row').style.display=isSide?'none':''; document.getElementById('eb2-side-row').style.display=isSide?'':'none'; document.getElementById('eb2-text-banner-box').style.display=isText?'':'none'; var chk=document.getElementById('eb2-show-title'); var row=document.getElementById('eb2-title-check-row'); if(isText){ chk.checked=false; row.style.display='none'; document.getElementById('eb2-title-box').style.display='none'; } else { row.style.display=''; document.getElementById('eb2-title-box').style.display=chk.checked?'':'none'; } var hints={'top-fit':'추천: <span>1920×200px</span> — 가로 꽉차게','top-ori':'원본 비율 그대로 표시','side':'추천: <span>200×1080px</span> — 세로 배너','logo':'추천: <span>200×200px</span> — 로고'}; var hintEl=document.getElementById('eb2-img-hint'); if(hints[val]) hintEl.innerHTML=hints[val]; var lbMap={'top-fit':'현수막 이미지','top-ori':'현수막 이미지','side':'배너 이미지','logo':'로고 이미지'}; if(lbMap[val]) document.getElementById('eb2-img-label').textContent=lbMap[val]; eb2Render(); }; document.getElementById('eb2-show-title').addEventListener('change',function(){ document.getElementById('eb2-title-box').style.display=this.checked?'':'none'; eb2Render(); }); /* ── 이미지 로드 ── */ window.eb2LoadMainImg=function(input){ if(!input.files||!input.files[0]) return; var r=new FileReader(); r.onload=function(e){ S.mainImgSrc=e.target.result; var w=document.getElementById('eb2-img-preview-wrap'); w.innerHTML=''; var img=document.createElement('img'); img.src=S.mainImgSrc; img.className='eb2-img-preview'; w.appendChild(img); eb2Render(); }; r.readAsDataURL(input.files[0]); }; window.eb2ClearMainImg=function(){ S.mainImgSrc=null; document.getElementById('eb2-img-preview-wrap').innerHTML='<div class="eb2-img-placeholder">없음</div>'; eb2Render(); }; window.eb2LoadTbLogo=function(input){ if(!input.files||!input.files[0]) return; var r=new FileReader(); r.onload=function(e){ S.tbLogoSrc=e.target.result; document.getElementById('tb-logo-name').textContent=input.files[0].name; eb2Render(); }; r.readAsDataURL(input.files[0]); }; window.eb2LoadTbBgImg=function(input){ if(!input.files||!input.files[0]) return; var r=new FileReader(); r.onload=function(e){ S.tbBgImgSrc=e.target.result; document.getElementById('tb-bgimg-name').textContent=input.files[0].name; eb2Render(); }; r.readAsDataURL(input.files[0]); }; window.eb2ClearTbBgImg=function(){ S.tbBgImgSrc=null; document.getElementById('tb-bgimg-name').textContent=''; document.getElementById('tb-bgimg-file').value=''; eb2Render(); }; /* ── 파일 추가 ── */ window.eb2AddFiles=function(input,type){ if(!input.files) return; var files=Array.prototype.slice.call(input.files); var done=0, firstIdx=S.files.length; files.forEach(function(f){ var r=new FileReader(); r.onload=function(e){ S.files.push({type:type,name:f.name,src:e.target.result}); S.fileNotices.push(''); done++; if(done===files.length){ S.pvIdx=firstIdx+1; eb2RenderFileList(); eb2RenderFileNotices(); eb2BuildNav(); eb2Render(); } }; r.readAsDataURL(f); }); input.value=''; }; function eb2RenderFileList(){ var list=document.getElementById('eb2-file-list'); list.innerHTML=''; S.files.forEach(function(f,i){ var item=document.createElement('div'); item.className='eb2-file-item'; item.innerHTML='<span style="font-size:16px;">'+(f.type==='pdf'?' ':' ')+'</span>' +'<span class="eb2-file-name">'+f.name+'</span>' +'<span class="eb2-file-type">'+getFileLabel(i)+'</span>' +'<button class="eb2-file-move" onclick="eb2MoveFile('+i+',-1)">▲</button>' +'<button class="eb2-file-move" onclick="eb2MoveFile('+i+',1)">▼</button>' +'<button class="eb2-file-del" onclick="eb2DelFile('+i+')">✕</button>'; list.appendChild(item); }); } function getFileLabel(i){ var pn=0,im=0; for(var j=0;j<=i;j++){ if(S.files[j].type==='pdf') pn++; else im++; } return S.files[i].type==='pdf'?'pdf'+pn:'img'+im; } window.eb2MoveFile=function(i,dir){ var j=i+dir; if(j<0||j>=S.files.length) return; var t=S.files[i]; S.files[i]=S.files[j]; S.files[j]=t; var tn=S.fileNotices[i]; S.fileNotices[i]=S.fileNotices[j]; S.fileNotices[j]=tn; eb2RenderFileList(); eb2RenderFileNotices(); eb2BuildNav(); eb2Render(); }; window.eb2DelFile=function(i){ S.files.splice(i,1); S.fileNotices.splice(i,1); S.pvIdx=Math.max(0,S.pvIdx-1); eb2RenderFileList(); eb2RenderFileNotices(); eb2BuildNav(); eb2Render(); }; /* ── 파일별 공지 UI ── */ function eb2RenderFileNotices(){ var wrap=document.getElementById('eb2-file-notice-list'); var hint=document.getElementById('eb2-no-files-hint'); wrap.innerHTML=''; if(S.files.length===0){ hint.style.display=''; eb2BuildNav(); return; } hint.style.display='none'; S.files.forEach(function(f,i){ var row=document.createElement('div'); row.style.cssText='margin-bottom:8px;'; var lbl=document.createElement('div'); lbl.style.cssText='font-size:11px;color:#888;margin-bottom:4px;'; lbl.innerHTML='<span style="color:#4a90e2;font-weight:700;">['+getFileLabel(i)+']</span> '+f.name+' 다음 공지'; var ta=document.createElement('textarea'); ta.placeholder='내용 없으면 스킵됩니다'; ta.value=S.fileNotices[i]||''; ta.style.cssText='width:100%;background:#f7f8fa;border:1px solid #dde1e7;border-radius:6px;color:#222;padding:8px 10px;font-size:13px;resize:vertical;min-height:48px;font-family:inherit;'; (function(idx){ ta.addEventListener('input',function(){ S.fileNotices[idx]=ta.value; eb2BuildNav(); }); })(i); row.appendChild(lbl); row.appendChild(ta); wrap.appendChild(row); }); eb2BuildNav(); } /* ── 슬라이드 목록 ── */ // main → [첫공지?] → file0 → [file0공지?] → file1 → ... → [ ?] function getSlides(){ var slides=[{type:'main'}]; var fn=document.getElementById('eb2-first-notice'); if(fn&&fn.value.trim()) slides.push({type:'notice',text:fn.value,nLabel:'첫공지'}); S.files.forEach(function(f,i){ slides.push({type:f.type,file:f,fileIdx:i}); if((S.fileNotices[i]||'').trim()) slides.push({type:'notice',text:S.fileNotices[i],nLabel:'공지'+(i+1)}); }); var pc=document.getElementById('eb2-photo-enabled'); if(pc&&pc.checked) slides.push({type:'photo'}); return slides; } function getSlideLabel(slides,idx){ var s=slides[idx]; if(s.type==='main') return 'main'; if(s.type==='photo') return ' '; if(s.type==='notice') return s.nLabel; var pn=0,im=0; for(var i=0;i<=idx;i++){ if(!slides[i]||slides[i].type==='notice'||slides[i].type==='main'||slides[i].type==='photo') continue; if(slides[i].type==='pdf') pn++; else im++; } if(s.type==='pdf') return 'pdf'+pn; if(s.type==='img') return 'img'+im; return ''; } /* ── 옵션 읽기 ── */ function opts(){ return { layout: document.querySelector('input[name="eb2-layout"]:checked').value, bannerBg: document.getElementById('eb2-banner-bg').value, bannerFg: document.getElementById('eb2-banner-fg').value, bannerH: parseInt(document.getElementById('eb2-banner-h').value)||170, sideBg: document.getElementById('eb2-side-bg').value, sideW: parseInt(document.getElementById('eb2-side-w').value)||160, contentBg: document.getElementById('eb2-content-bg').value, contentFg: document.getElementById('eb2-content-fg').value, clockSize: parseFloat(document.getElementById('eb2-clock-size').value), noticeSize: document.getElementById('eb2-notice-size').value, showTitle: document.getElementById('eb2-show-title').checked, title: document.getElementById('eb2-ev-title').value||'', sub: document.getElementById('eb2-ev-sub').value||'', tbBg: document.getElementById('tb-bg-color').value, tbBgOpacity: parseInt(document.getElementById('tb-bg-opacity').value)/100, tbFont: document.getElementById('tb-font').value, tbAlign: document.getElementById('tb-align').value, tbLogoMode: document.getElementById('tb-logo-mode').value, tbBgImgMode: document.getElementById('tb-bg-img-mode').value, tbBgBlur: parseInt(document.getElementById('tb-bg-blur').value), tbTopText: document.getElementById('tb-top-text').value, tbTopColor: document.getElementById('tb-top-color').value, tbTopRatio: parseFloat(document.getElementById('tb-top-size').value), tbMidText: document.getElementById('tb-mid-text').value, tbMidColor: document.getElementById('tb-mid-color').value, tbMidRatio: parseFloat(document.getElementById('tb-mid-size').value), tbBotText: document.getElementById('tb-bot-text').value, tbBotColor: document.getElementById('tb-bot-color').value, tbBotRatio: parseFloat(document.getElementById('tb-bot-size').value), tbDeco: document.getElementById('tb-deco').value, tbDecoColor: document.getElementById('tb-deco-color').value }; } /* ── 임시현수막 배너 생성 ── */ function makeTextBanner(o, h){ var wrap=document.createElement('div'); wrap.style.cssText='position:relative;width:100%;height:'+h+'px;overflow:hidden;display:flex;flex-direction:row;align-items:stretch;background:'+hexToRgba(o.tbBg,o.tbBgOpacity)+';font-family:'+o.tbFont+';flex-shrink:0;'; // 배경이미지 레이어 (별도 배경이미지 우선, 없으면 로고 이미지 사용) var bgSrc = S.tbBgImgSrc || S.tbLogoSrc; if(o.tbBgImgMode!=='none' && bgSrc){ var bgL=document.createElement('div'); bgL.style.cssText='position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden;'; var bgI=document.createElement('img'); bgI.src=bgSrc; if(o.tbBgImgMode==='cover') bgI.style.cssText='width:100%;height:100%;object-fit:cover;filter:blur('+o.tbBgBlur+'px);opacity:0.35;transform:scale(1.05);'; else if(o.tbBgImgMode==='contain') bgI.style.cssText='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-height:100%;max-width:100%;filter:blur('+o.tbBgBlur+'px);opacity:0.25;'; else if(o.tbBgImgMode==='gradient'){ bgI.style.cssText='width:100%;height:100%;object-fit:cover;filter:blur('+o.tbBgBlur+'px);opacity:0.4;transform:scale(1.05);'; var grd=document.createElement('div'); grd.style.cssText='position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,0.55),rgba(0,40,80,0.45));z-index:1;'; bgL.appendChild(grd); } bgL.appendChild(bgI); wrap.appendChild(bgL); } // 로고 왼쪽 if(o.tbLogoMode==='left'&&S.tbLogoSrc){ var ll=document.createElement('div'); ll.style.cssText='flex-shrink:0;display:flex;align-items:center;padding:6px 12px;z-index:2;'; var li=document.createElement('img'); li.src=S.tbLogoSrc; li.style.cssText='height:'+(h-16)+'px;object-fit:contain;'; ll.appendChild(li); wrap.appendChild(ll); } // 텍스트 영역 var ta=document.createElement('div'); var align=o.tbAlign==='center'?'center':o.tbAlign==='right'?'flex-end':'flex-start'; ta.style.cssText='flex:1;display:flex;flex-direction:column;align-items:'+align+';justify-content:center;text-align:'+o.tbAlign+';padding:6px 24px;z-index:2;overflow:hidden;position:relative;gap:4px;'; // 워터마크 if(o.tbLogoMode==='behind'&&S.tbLogoSrc){ var wm=document.createElement('img'); wm.src=S.tbLogoSrc; wm.style.cssText='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:'+(h*0.85)+'px;object-fit:contain;opacity:0.1;pointer-events:none;'; ta.appendChild(wm); } // 장식선 상단 (flex item) if(o.tbDeco!=='none') ta.appendChild(makeDecoLine(o,true)); if(o.tbTopText && o.tbTopRatio>0){ var tel=document.createElement('div'); tel.style.cssText='font-size:'+(h*o.tbTopRatio)+'px;color:'+o.tbTopColor+';line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;flex-shrink:0;'; tel.textContent=o.tbTopText; ta.appendChild(tel); } if(o.tbMidText && o.tbMidRatio>0){ var mel=document.createElement('div'); mel.style.cssText='font-size:'+(h*o.tbMidRatio)+'px;color:'+o.tbMidColor+';font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;flex-shrink:0;'; mel.textContent=o.tbMidText; ta.appendChild(mel); } if(o.tbBotText && o.tbBotRatio>0){ var bel=document.createElement('div'); bel.style.cssText='font-size:'+(h*o.tbBotRatio)+'px;color:'+o.tbBotColor+';line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;flex-shrink:0;'; bel.textContent=o.tbBotText; ta.appendChild(bel); } if(o.tbDeco!=='none') ta.appendChild(makeDecoLine(o,false)); wrap.appendChild(ta); // 로고 오른쪽 if(o.tbLogoMode==='right'&&S.tbLogoSrc){ var rl=document.createElement('div'); rl.style.cssText='flex-shrink:0;display:flex;align-items:center;padding:6px 12px;z-index:2;'; var ri=document.createElement('img'); ri.src=S.tbLogoSrc; ri.style.cssText='height:'+(h-16)+'px;object-fit:contain;'; rl.appendChild(ri); wrap.appendChild(rl); } return wrap; } function makeDecoLine(o,isTop){ var d=document.createElement('div'); var base='width:100%;flex-shrink:0;'+(isTop?'margin-bottom:4px;':'margin-top:4px;'); if(o.tbDeco==='line') d.style.cssText=base+'height:2px;background:'+o.tbDecoColor+';border-radius:1px;'; else if(o.tbDeco==='double') d.style.cssText=base+'height:6px;border-top:2px solid '+o.tbDecoColor+';border-bottom:2px solid '+o.tbDecoColor+';'; else if(o.tbDeco==='glow') d.style.cssText=base+'height:2px;background:'+o.tbDecoColor+';box-shadow:0 0 8px '+o.tbDecoColor+',0 0 20px '+o.tbDecoColor+'66;border-radius:1px;'; return d; } /* ── 일반 배너 생성 ── */ function makeBannerTop(o, small){ var div=document.createElement('div'); div.style.cssText='display:flex;align-items:center;gap:14px;overflow:hidden;flex-shrink:0;background:'+o.bannerBg+';color:'+o.bannerFg+';height:'+o.bannerH+'px;padding:0 16px;position:relative;'; if(S.mainImgSrc){ var img=document.createElement('img'); img.src=S.mainImgSrc; if(o.layout==='top-fit') img.style.cssText='position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;'; else if(o.layout==='top-ori') img.style.cssText='height:'+(o.bannerH-8)+'px;object-fit:contain;flex-shrink:0;position:relative;z-index:1;'; else img.style.cssText='height:'+(o.bannerH-16)+'px;object-fit:contain;flex-shrink:0;position:relative;z-index:1;'; div.appendChild(img); } if(o.showTitle){ var tw=document.createElement('div'); tw.style.cssText='position:relative;z-index:1;overflow:hidden;'; var t=document.createElement('div'); t.style.cssText='font-size:'+(small?14:20)+'px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:'+o.bannerFg+';'; t.textContent=o.title||'(행사명)'; tw.appendChild(t); if(o.sub){ var ss=document.createElement('div'); ss.style.cssText='font-size:'+(small?11:14)+'px;opacity:0.7;margin-top:2px;color:'+o.bannerFg+';'; ss.textContent=o.sub; tw.appendChild(ss); } div.appendChild(tw); } return div; } /* ── 슬라이드 콘텐츠 생성 ── */ function makeSlideContent(slide, o, forFS){ var wrap=document.createElement('div'); wrap.style.cssText='position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;'; if(slide.type==='main'){ wrap.style.background=o.contentBg; wrap.style.color=o.contentFg; if(o.clockSize>=8){ var clk=document.createElement('div'); clk.style.cssText='font-size:'+o.clockSize+'vw;font-weight:700;font-variant-numeric:tabular-nums;'; clk.className=forFS?'eb2-fs-clk-main':'eb2-pv-clk-main'; wrap.appendChild(clk); } else if(o.clockSize>0){ var corner=document.createElement('div'); corner.style.cssText='position:absolute;right:14px;bottom:10px;font-size:'+o.clockSize+'vw;font-variant-numeric:tabular-nums;opacity:0.8;'; corner.className=forFS?'eb2-fs-clk-corner':'eb2-pv-clk-corner'; wrap.appendChild(corner); } } else if(slide.type==='img'){ wrap.style.background='#000'; var img=document.createElement('img'); img.src=slide.file.src; img.style.cssText='width:100%;height:100%;object-fit:contain;display:block;'; wrap.appendChild(img); if(o.clockSize>0&&o.clockSize<8){ var c2=document.createElement('div'); c2.style.cssText='position:absolute;right:14px;bottom:10px;font-size:'+o.clockSize+'vw;font-variant-numeric:tabular-nums;opacity:0.7;color:'+o.contentFg+';'; c2.className=forFS?'eb2-fs-clk-corner':'eb2-pv-clk-corner'; wrap.appendChild(c2); } } else if(slide.type==='pdf'){ wrap.style.background='#404040'; var canvas=document.createElement('canvas'); canvas.style.cssText='display:block;max-width:100%;max-height:100%;pointer-events:none;'; wrap.appendChild(canvas); // DOM에 붙은 뒤 렌더 (setTimeout 0으로 다음 틱에) (function(cv, sl){ setTimeout(function(){ renderPdf(sl, cv, forFS); }, 0); })(canvas, slide); } else if(slide.type==='notice'){ wrap.style.background=o.contentBg; wrap.style.color=o.contentFg; var nt=document.createElement('div'); nt.style.cssText='font-size:'+o.noticeSize+'vw;text-align:center;padding:40px;line-height:1.7;white-space:pre-wrap;'; nt.textContent=slide.text; wrap.appendChild(nt); if(o.clockSize>0&&o.clockSize<8){ var c3=document.createElement('div'); c3.style.cssText='position:absolute;right:14px;bottom:10px;font-size:'+o.clockSize+'vw;font-variant-numeric:tabular-nums;opacity:0.7;'; c3.className=forFS?'eb2-fs-clk-corner':'eb2-pv-clk-corner'; wrap.appendChild(c3); } } else if(slide.type==='photo'){ wrap.style.background=o.contentBg; var pct = S.photoPercent||10; var pw=document.createElement('div'); pw.style.cssText='position:absolute;left:0;top:'+pct+'%;width:100%;'; var pb; if(o.layout==='text') pb=makeTextBanner(o,o.bannerH); else { pb=makeBannerTop(o,false); } pb.style.width='100%'; pw.appendChild(pb); wrap.appendChild(pw); } return wrap; } /* ── PDF.js 렌더 ── */ function renderPdf(slide, canvas, forFS){ if(typeof pdfjsLib==='undefined'){ if(canvas.parentElement) canvas.parentElement.innerHTML='<div style="color:#fff;padding:20px;text-align:center;">PDF.js 로드 실패<br>인터넷 연결을 확인하세요</div>'; return; } var key=slide.fileIdx+'_'+slide.file.name; var state=S.pdfCache[key]; var doRender=function(pdf, page){ pdf.getPage(page).then(function(pg){ var par=canvas.parentElement; var pw=par?par.offsetWidth:800; var ph=par?par.offsetHeight:600; if(!pw||!ph){ pw=800; ph=600; } var vp0=pg.getViewport({scale:1}); var scale=Math.min(pw/vp0.width, ph/vp0.height)*0.98; var vp=pg.getViewport({scale:scale}); canvas.width=vp.width; canvas.height=vp.height; pg.render({canvasContext:canvas.getContext('2d'), viewport:vp}); // 페이지 수 표시 (버튼 없이, 우하단 작게) if(par && pdf.numPages>1){ var old=par.querySelector('.eb2-pdf-info'); if(old) old.remove(); var info=document.createElement('div'); info.className='eb2-pdf-info'; info.style.cssText='position:absolute;bottom:8px;right:12px;background:rgba(0,0,0,0.5);color:#fff;font-size:12px;padding:3px 10px;border-radius:12px;pointer-events:none;z-index:5;'; info.textContent=page+' / '+pdf.numPages; par.appendChild(info); } }); }; if(state){ doRender(state.pdf, state.curPage); return; } try{ var b64=slide.file.src.split(',')[1]; var bc=atob(b64), ba=new Uint8Array(bc.length); for(var i=0;i<bc.length;i++) ba[i]=bc.charCodeAt(i); pdfjsLib.getDocument({data:ba}).promise.then(function(pdf){ S.pdfCache[key]={pdf:pdf, curPage:1, totalPages:pdf.numPages}; doRender(pdf,1); }).catch(function(){ if(canvas.parentElement) canvas.parentElement.innerHTML='<div style="color:#fff;padding:20px;text-align:center;">PDF 로드 실패</div>'; }); }catch(e){ if(canvas.parentElement) canvas.parentElement.innerHTML='<div style="color:#fff;padding:20px;text-align:center;">PDF 처리 오류</div>'; } } /* ── 화살표 ── */ function appendArrows(container, isPv){ var aL=document.createElement('button'); aL.className='eb2-slide-arrow left'; aL.innerHTML='&#8249;'; aL.style.zIndex='50'; aL.addEventListener('click',function(e){ e.stopPropagation(); isPv?eb2PvSlide(-1):eb2FSSlide(-1); }); container.appendChild(aL); var aR=document.createElement('button'); aR.className='eb2-slide-arrow right'; aR.innerHTML='&#8250;'; aR.style.zIndex='50'; aR.addEventListener('click',function(e){ e.stopPropagation(); isPv?eb2PvSlide(1):eb2FSSlide(1); }); container.appendChild(aR); } function makeFSArrows(){ var f=document.createDocumentFragment(); var aL=document.createElement('button'); aL.className='eb2-fs-arr left'; aL.innerHTML='&#8249;'; aL.style.zIndex='50'; aL.addEventListener('click',function(e){ e.stopPropagation(); eb2FSSlide(-1); }); f.appendChild(aL); var aR=document.createElement('button'); aR.className='eb2-fs-arr right'; aR.innerHTML='&#8250;'; aR.style.zIndex='50'; aR.addEventListener('click',function(e){ e.stopPropagation(); eb2FSSlide(1); }); f.appendChild(aR); return f; } /* ── 공통 렌더 핵심: 배너+콘텐츠 조립 ── */ function buildScreen(container, slide, o, forFS){ // 사진촬영 슬라이드: 배너 없이 전체 화면 = 배경 + 배너를 % 위치에 배치 if(slide.type==='photo'){ var ca2=document.createElement('div'); ca2.style.cssText='flex:1;position:relative;min-height:0;overflow:hidden;background:'+o.contentBg+';'; ca2.appendChild(makeSlideContent(slide,o,forFS)); if(forFS) ca2.appendChild(makeFSArrows()); else appendArrows(ca2,true); container.appendChild(ca2); return; } // 배너 var banner; if(o.layout==='text') banner=makeTextBanner(o,o.bannerH); else if(o.layout==='side'){ var row=document.createElement('div'); row.style.cssText='display:flex;flex:1;min-height:0;overflow:hidden;'; var mkS=function(){ var d=document.createElement('div'); d.style.cssText='width:'+o.sideW+'px;background:'+o.sideBg+';flex-shrink:0;overflow:hidden;'; if(S.mainImgSrc){ var img=document.createElement('img'); img.src=S.mainImgSrc; img.style.cssText='width:100%;height:100%;object-fit:cover;'; d.appendChild(img); } return d; }; var center=document.createElement('div'); center.style.cssText='flex:1;position:relative;min-height:0;overflow:hidden;'; center.appendChild(makeSlideContent(slide,o,forFS)); if(forFS) center.appendChild(makeFSArrows()); else appendArrows(center,true); row.appendChild(mkS()); row.appendChild(center); row.appendChild(mkS()); container.appendChild(row); return; } else banner=makeBannerTop(o,!forFS); container.appendChild(banner); // 콘텐츠 영역 var ca=document.createElement('div'); ca.style.cssText='flex:1;position:relative;min-height:0;overflow:hidden;background:'+o.contentBg+';'; ca.appendChild(makeSlideContent(slide,o,forFS)); if(forFS) ca.appendChild(makeFSArrows()); else appendArrows(ca,true); container.appendChild(ca); } /* ── 미리보기 렌더 ── */ window.eb2Render=function(){ var o=opts(), slides=getSlides(); if(S.pvIdx>=slides.length) S.pvIdx=0; var pv=document.getElementById('eb2-pv-main'); pv.innerHTML=''; pv.style.cssText='display:flex;flex-direction:column;min-height:300px;background:'+o.contentBg+';overflow:hidden;'; buildScreen(pv, slides[S.pvIdx], o, false); document.getElementById('eb2-pv-indicator').textContent=(S.pvIdx+1)+' / '+slides.length+' — '+getSlideLabel(slides,S.pvIdx); }; window.eb2PvSlide=function(dir){ var sl=getSlides(); S.pvIdx=(S.pvIdx+dir+sl.length)%sl.length; eb2Render(); }; /* ── 전체화면 ── */ /* ── Tistory 메뉴 차단 ── */ // Tistory 스킨의 고정 헤더/메뉴 요소들을 전체화면 진입 시 숨김 var TISTORY_SELECTORS = [ '#header', '.header', '#tistory-header', '.tistory-header', '#nav', '.nav', '#gnb', '.gnb', '#lnb', '.lnb', '.tistory-layer-popup', '#tistory_layer', '[id*="tistory"][class*="header"]', '[id*="tistory"][class*="nav"]', '.aside', '#aside', '.sidebar', '#sidebar' ]; var _hiddenEls = []; function tistoryHide(){ _hiddenEls = []; TISTORY_SELECTORS.forEach(function(sel){ try{ var els = document.querySelectorAll(sel); for(var i=0;i<els.length;i++){ // 전체화면 div 안쪽 요소는 건드리지 않음 if(!document.getElementById('eb2-fullscreen').contains(els[i]) && !document.getElementById('eb2-root').contains(els[i])){ _hiddenEls.push({el:els[i], z:els[i].style.zIndex, vis:els[i].style.visibility}); els[i].style.setProperty('z-index','-1','important'); els[i].style.setProperty('visibility','hidden','important'); } } }catch(e){} }); // 추가로 body의 직계 자식 중 높은 z-index 요소도 강제 하강 var bodyChildren = document.body.children; for(var j=0;j<bodyChildren.length;j++){ var ch = bodyChildren[j]; if(ch.id==='eb2-fullscreen'||ch.id==='eb2-root') continue; var cs = window.getComputedStyle(ch); var zi = parseInt(cs.zIndex); if(!isNaN(zi) && zi > 9000){ _hiddenEls.push({el:ch, z:ch.style.zIndex, vis:ch.style.visibility}); ch.style.setProperty('z-index','-1','important'); } } } function tistoryRestore(){ _hiddenEls.forEach(function(item){ item.el.style.zIndex = item.z; item.el.style.visibility = item.vis; }); _hiddenEls = []; } window.eb2OpenFS=function(){ var fs=document.getElementById('eb2-fullscreen'); fs.classList.add('active'); var fn=document.getElementById('eb2-first-notice'); var hasFirstNotice = fn && fn.value.trim().length > 0; S.fsIdx = (hasFirstNotice || S.files.length > 0) ? 1 : 0; document.body.style.overflow='hidden'; tistoryHide(); // Tistory 메뉴 숨김 setTimeout(function(){ fs.focus(); }, 100); var o=opts(); fs.style.background=o.contentBg; fs.style.color=o.contentFg; eb2BuildNav(); applyNavMode(); eb2RenderFS(); if(document.documentElement.requestFullscreen){ document.documentElement.requestFullscreen().catch(function(){}); } }; window.eb2CloseFS=function(){ document.getElementById('eb2-fullscreen').classList.remove('active'); document.body.style.overflow=''; tistoryRestore(); // Tistory 메뉴 복원 if(document.exitFullscreen) document.exitFullscreen().catch(function(){}); }; function eb2RenderFS(){ var o=opts(), slides=getSlides(); if(S.fsIdx>=slides.length) S.fsIdx=0; var inner=document.getElementById('eb2-fs-inner'); inner.innerHTML=''; inner.style.cssText='flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;background:'+o.contentBg+';color:'+o.contentFg+';'; buildScreen(inner, slides[S.fsIdx], o, true); updateNavActive(); } /* ── 전체화면 슬라이드 전환 (PDF 페이지 인식) ── */ window.eb2FSSlide=function(dir){ var slides=getSlides(); var cur=slides[S.fsIdx]; // 현재 슬라이드가 PDF이면 페이지 먼저 넘김 if(cur && cur.type==='pdf'){ var key=cur.fileIdx+'_'+cur.file.name; var state=S.pdfCache[key]; if(state){ if(dir>0 && state.curPage < state.totalPages){ // 다음 페이지 state.curPage++; eb2RenderFS(); return; } else if(dir<0 && state.curPage > 1){ // 이전 페이지 state.curPage--; eb2RenderFS(); return; } // 첫/마지막 페이지 → 슬라이드 전환 } } S.fsIdx=(S.fsIdx+dir+slides.length)%slides.length; // 새 슬라이드가 PDF이고 뒤로 이동한 경우 → 마지막 페이지부터 시작 if(dir<0){ var newSlide=slides[S.fsIdx]; if(newSlide && newSlide.type==='pdf'){ var k2=newSlide.fileIdx+'_'+newSlide.file.name; if(S.pdfCache[k2]) S.pdfCache[k2].curPage=S.pdfCache[k2].totalPages; } } eb2RenderFS(); }; /* ── 네비 ── */ function eb2BuildNav(){ var slides=getSlides(), nav=document.getElementById('eb2-fs-nav'); nav.innerHTML=''; slides.forEach(function(s,i){ var label=getSlideLabel(slides,i); var tip=s.type==='main'?'메인 대기화면':s.type==='photo'?'사진촬영':s.type==='notice'?s.text.slice(0,20)+'…':s.file.name; var btn=document.createElement('button'); btn.className='eb2-nav-btn'+(i===S.fsIdx?' active':''); btn.innerHTML=label+'<span class="eb2-nav-tooltip">'+tip+'</span>'; btn.addEventListener('click',function(){ S.fsIdx=i; eb2RenderFS(); updateNavActive(); }); nav.appendChild(btn); }); } window.eb2BuildNav=eb2BuildNav; function updateNavActive(){ var btns=document.querySelectorAll('#eb2-fs-nav .eb2-nav-btn'); for(var i=0;i<btns.length;i++) btns[i].classList.toggle('active',i===S.fsIdx); } /* ── 자동숨김 트리거 ── */ var navTimer=null; document.addEventListener('mousemove',function(e){ var fs=document.getElementById('eb2-fullscreen'); // 레이저포인터 (전체화면) var dot=document.getElementById('eb2-laser-dot'); if(dot&&fs&&fs.classList.contains('active')){ dot.style.display='block'; dot.style.left=e.clientX+'px'; dot.style.top=e.clientY+'px'; } else if(dot) dot.style.display='none'; // 자동숨김 if(!fs||!fs.classList.contains('active')||!S.autoHide) return; if(e.clientY>=window.innerHeight-80){ var w=document.getElementById('eb2-fs-nav-wrap'); if(w){ w.classList.remove('hidden-nav'); if(navTimer) clearTimeout(navTimer); navTimer=setTimeout(function(){ if(S.autoHide){ var w2=document.getElementById('eb2-fs-nav-wrap'); if(w2) w2.classList.add('hidden-nav'); } },2500); } } }); /* ── 시계 ── */ setInterval(function(){ var t=nowStr(); var els=document.querySelectorAll('.eb2-pv-clk-corner,.eb2-pv-clk-main,.eb2-fs-clk-corner,.eb2-fs-clk-main'); for(var i=0;i<els.length;i++) els[i].textContent=t; },1000); /* ── 키보드 (레이저포인터 포함) ── */ function handleKey(e){ var fs=document.getElementById('eb2-fullscreen'); if(!fs||!fs.classList.contains('active')) return; // 전진: ArrowRight, ArrowDown, PageDown, Space, Enter if(e.key==='ArrowRight'||e.key==='ArrowDown'||e.key==='PageDown'||e.key===' '||e.key==='Enter'){ e.preventDefault(); eb2FSSlide(1); } // 후진: ArrowLeft, ArrowUp, PageUp if(e.key==='ArrowLeft'||e.key==='ArrowUp'||e.key==='PageUp'){ e.preventDefault(); eb2FSSlide(-1); } if(e.key==='Escape') eb2CloseFS(); } document.addEventListener('keydown', handleKey); // 전체화면 div에도 직접 이벤트 (포커스 확보용) var fsDiv=document.getElementById('eb2-fullscreen'); if(fsDiv) fsDiv.addEventListener('keydown', handleKey); /* ── 네비 모드 ── */ function getNavMode(){ var r=document.querySelector('input[name="eb2-nav-mode"]:checked'); return r?r.value:'auto'; } window.eb2NavModeChange=function(){ var labels=document.querySelectorAll('#eb2-nav-mode-group .eb2-radio-label'); var val=getNavMode(); for(var i=0;i<labels.length;i++) labels[i].classList.toggle('selected', labels[i].querySelector('input').value===val); applyNavMode(); }; function applyNavMode(){ var mode=getNavMode(); var wrap=document.getElementById('eb2-fs-nav-wrap'); if(!wrap) return; if(mode==='none'){ wrap.style.display='none'; } else if(mode==='fixed'){ wrap.style.display=''; wrap.classList.remove('hidden-nav'); S.autoHide=false; } else { wrap.style.display=''; S.autoHide=true; wrap.classList.add('hidden-nav'); } } /* ── 사진촬영 ── */ window.eb2PhotoToggle=function(){ document.getElementById('eb2-photo-opts').style.display=document.getElementById('eb2-photo-enabled').checked?'':'none'; eb2BuildNav(); eb2Render(); }; window.eb2PhotoSlider=function(){ var val=parseInt(document.getElementById('eb2-photo-pos').value)||0; document.getElementById('eb2-photo-pos-val').textContent=val+'%'; S.photoPercent=val; // 전체화면 열려있으면 실시간 반영 if(document.getElementById('eb2-fullscreen').classList.contains('active')) eb2RenderFS(); }; window.eb2PhotoReset=function(){ document.getElementById('eb2-photo-pos').value=10; eb2PhotoSlider(); }; /* ── 초기화 ── */ eb2LayoutChange(); // 기본값 text 모드 UI 상태 동기화 eb2Render(); eb2RenderFileNotices(); })(); </script> </body> </html> 모두의계산기/행사공지계산기_16 공지 모두 발표자료를 넘겨도 현수막이 고정됩니다 행사전 현수막&amp;발표자료 현수막과발표자료가 공존 최매슨생 https://0-1.kr/21 https://0-1.kr/21#entry21comment Thu, 12 Nov 2020 16:07:50 +0900 https://0-1.kr/19 <!-- 모두의 프롬프터 v5.0 | 티스토리 HTML 위젯 --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=Nanum+Gothic:wght@400;700&family=Nanum+Myeongjo:wght@400;700&family=Black+Han+Sans&family=IBM+Plex+Sans+KR:wght@400;500&family=Gowun+Dodum&display=swap" rel="stylesheet"> <style> /* ★ 페이지 전체 스크롤바 완전 제거 */ html,body{overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none} html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0} #mpt-root,#mpt-root *{box-sizing:border-box;margin:0;padding:0} #mpt-root{font-family:'Noto Sans KR',sans-serif;background:#f0f4fa;border-radius:16px;border:1px solid #cbd5e1;overflow:hidden;width:100%;max-width:100%;margin:0;color:#1e293b;box-shadow:0 4px 24px rgba(0,0,0,.10)} /* ══ 헤더 ══ */ #mpt-header{ padding:20px 22px 18px; background:linear-gradient(135deg,#1e3a5f 0%,#1e40af 60%,#2563eb 100%); border-bottom:2px solid #1d4ed8; display:flex;align-items:flex-start;justify-content:space-between;gap:16px; flex-wrap:wrap; } #mpt-header-left{display:flex;flex-direction:column;flex:1;min-width:180px} #mpt-title{font-size:30px;font-weight:900;letter-spacing:-1px;line-height:1.15;background:linear-gradient(90deg,#bfdbfe 0%,#93c5fd 50%,#a5f3fc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px} #mpt-subtitle{font-size:12px;color:#93c5fd;opacity:.8;margin-bottom:14px;letter-spacing:.03em} /* 좌측 보조버튼들 */ #mpt-header-btns{display:flex;gap:7px;flex-wrap:wrap;align-items:center} /* 우측 주요버튼 패널 */ #mpt-header-right{ display:flex;flex-direction:column;gap:8px;align-items:stretch; min-width:155px;flex-shrink:0; } .mpt-btn{ background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25); color:#dbeafe;font-size:13px;font-weight:600; padding:9px 16px;border-radius:6px;/* ★ 사각형 */ cursor:pointer;font-family:'Noto Sans KR',sans-serif; transition:all .18s;white-space:nowrap; display:inline-flex;align-items:center;gap:5px;line-height:1;position:relative; } .mpt-btn:hover{background:rgba(255,255,255,.22);color:#fff} /* 공유 버튼 — 우측 사각형 */ .mpt-btn.share{ background:rgba(99,102,241,.3);border-color:rgba(165,180,252,.6); color:#c7d2fe;font-weight:700;font-size:14px; padding:13px 16px;border-radius:6px; justify-content:center;width:100%; } .mpt-btn.share:hover{background:rgba(99,102,241,.5);color:#e0e7ff} /* 프롬프터 보기 버튼 — 공유하기(40px)의 3배 = 120px */ .mpt-btn.accent{ background:linear-gradient(135deg,#f59e0b,#ef4444); border-color:transparent;color:#fff;font-weight:800; padding:0 16px;border-radius:6px; box-shadow:0 4px 18px rgba(245,158,11,.5); justify-content:center;width:100%; flex-direction:column;gap:4px; height:120px; font-size:16px; } .mpt-btn.accent .btn-shortcut{ font-size:10px;font-weight:500;opacity:.75;letter-spacing:.03em; } .mpt-btn.accent:hover{ background:linear-gradient(135deg,#d97706,#dc2626); box-shadow:0 4px 26px rgba(245,158,11,.7);transform:translateY(-1px); } /* 말풍선 툴팁 */ .mpt-tooltip{position:relative;display:inline-flex} .mpt-tooltip .tip{ position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%); background:#1e293b;color:#f1f5f9;font-size:11px;font-weight:600; white-space:nowrap;padding:5px 10px;border-radius:7px; pointer-events:none;opacity:0;transition:opacity .2s;z-index:100; box-shadow:0 2px 8px rgba(0,0,0,.3); } .mpt-tooltip .tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1e293b} .mpt-tooltip:hover .tip{opacity:1} /* ══ 공유 모달 ══ */ #mpt-share-modal{ display:none;position:fixed;inset:0;z-index:99999; background:rgba(0,0,0,.55);align-items:center;justify-content:center; backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); } #mpt-share-modal.show{display:flex} #mpt-share-box{ background:#fff;border-radius:18px;padding:24px; width:min(440px,94vw); box-shadow:0 8px 40px rgba(0,0,0,.25); display:flex;flex-direction:column;gap:16px; max-height:90vh;overflow-y:auto; } #mpt-share-box h3{font-size:17px;font-weight:800;color:#1e293b;display:flex;align-items:center;gap:8px} .share-section{display:flex;flex-direction:column;gap:7px} .share-label{font-size:12px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.06em} .share-url-row{display:flex;gap:6px} .share-url-row input{flex:1;background:#f1f5f9;border:1.5px solid #e2e8f0;color:#334155;font-size:12px;padding:8px 10px;border-radius:8px;outline:none;font-family:'Noto Sans KR',sans-serif} .share-copy-btn{background:#1e40af;border:none;color:#fff;font-size:12px;font-weight:700;padding:8px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;font-family:'Noto Sans KR',sans-serif;transition:background .15s} .share-copy-btn:hover{background:#1d4ed8} .share-copy-btn.ok{background:#22c55e} #mpt-qr-wrap{display:flex;justify-content:center;padding:8px;background:#f8fafc;border-radius:10px;border:1px solid #e2e8f0} #mpt-qr-img{max-width:180px;max-height:180px} .share-close-btn{background:#f1f5f9;border:1.5px solid #e2e8f0;color:#475569;font-size:13px;font-weight:700;padding:10px;border-radius:9px;cursor:pointer;font-family:'Noto Sans KR',sans-serif;transition:all .15s} .share-close-btn:hover{background:#e2e8f0} .share-tinyurl-row{display:flex;gap:6px;align-items:center} .share-tinyurl-btn{background:#7c3aed;border:none;color:#fff;font-size:12px;font-weight:700;padding:8px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;font-family:'Noto Sans KR',sans-serif;transition:background .15s} .share-tinyurl-btn:hover{background:#6d28d9} .share-warn{font-size:11px;color:#94a3b8;padding:6px 8px;background:#f8fafc;border-radius:6px;border:1px solid #e2e8f0} /* ══ 탭 ══ */ #mpt-tabs{display:flex;background:#e8eef8;border-bottom:2px solid #cbd5e1} .mpt-tab{padding:12px 22px;font-size:13px;font-weight:600;color:#64748b;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .18s;font-family:'Noto Sans KR',sans-serif} .mpt-tab:hover{color:#1e40af;background:#dde8f8} .mpt-tab.active{color:#1e40af;border-bottom-color:#1e40af;background:#f0f6ff} /* ══ 에디터 ══ */ #mpt-editor-zone{background:#fff} #mpt-textarea{width:100%;min-height:260px;resize:vertical;background:#fff;color:#1e293b;border:none;outline:none;padding:20px 22px;font-size:15px;line-height:1.85;font-family:'Noto Sans KR',sans-serif} #mpt-textarea::placeholder{color:#94a3b8;font-size:14px} #mpt-pdf-zone{display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;min-height:260px;background:#fff} #mpt-pdf-zone.show{display:flex} #mpt-pdf-drop{width:100%;border:2px dashed #94a3b8;border-radius:12px;padding:36px 20px;text-align:center;color:#64748b;cursor:pointer;transition:all .2s;font-size:14px;background:#f8fafc} #mpt-pdf-drop:hover{border-color:#1e40af;color:#1e40af;background:#eff6ff} #mpt-pdf-preview-wrap{width:100%;overflow-y:auto;max-height:240px;background:#f1f5f9;border-radius:10px;display:none} #mpt-pdf-preview-wrap canvas{display:block;margin:0 auto;max-width:100%} #mpt-pdf-pageinfo{font-size:12px;color:#64748b;display:none;text-align:center} /* ══ 상태바 ══ */ #mpt-statusbar{display:flex;gap:14px;flex-wrap:wrap;padding:8px 22px;background:#f1f5f9;border-top:1px solid #e2e8f0;font-size:11px;color:#94a3b8} #mpt-shortcut-hint{margin-left:auto;color:#cbd5e1;font-size:10px} .mpt-sdot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#22c55e;vertical-align:middle;margin-right:3px} /* ══ 옵션 구분 ══ */ #mpt-opts-divider{height:5px;background:linear-gradient(90deg,#1e3a5f,#2563eb,#1e3a5f);opacity:.18} #mpt-opts-toggle-bar{display:flex;align-items:center;gap:10px;padding:13px 22px;background:#1e3a5f;cursor:pointer;user-select:none;transition:background .15s} #mpt-opts-toggle-bar:hover{background:#1e40af} #mpt-opts-toggle-icon{font-size:16px;background:rgba(255,255,255,.15);border-radius:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0} #mpt-opts-toggle-text{flex:1} #mpt-opts-toggle-title{font-size:14px;font-weight:700;color:#bfdbfe} #mpt-opts-toggle-sub{font-size:11px;color:#60a5fa;opacity:.7;margin-top:2px} #mpt-opts-arrow{font-size:11px;color:#93c5fd;transition:transform .25s;display:inline-block} #mpt-opts-arrow.open{transform:rotate(180deg)} /* ══ 옵션 바디 ══ */ #mpt-opts-body{background:#f8fafc;border-top:1px solid #e2e8f0;overflow:hidden;max-height:0;transition:max-height .35s ease} #mpt-opts-body.open{max-height:2400px} .opts-section{padding:6px 0 12px;border-bottom:3px solid #cbd5e1} .opts-section:last-child{border-bottom:none} .opts-section-title{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.1em;margin:14px 24px 4px;display:flex;align-items:center;gap:8px} .opts-section-title::after{content:'';flex:1;height:1px;background:#e2e8f0} /* ★ 핵심: 한 줄 배치 + 번호 + 충분한 여백 */ .opts-grid{display:flex;flex-direction:column;gap:0;counter-reset:opt-counter} .opt-group{ display:flex;align-items:center;gap:0; padding:15px 24px 15px 20px; border-bottom:1.5px solid #e9eef5; min-height:64px; counter-increment:opt-counter; } .opt-group:last-child{border-bottom:none} .opt-num{ content:counter(opt-counter); font-size:11px;font-weight:800;color:#fff; background:#1e40af;min-width:22px;height:22px;border-radius:50%; display:flex;align-items:center;justify-content:center;flex-shrink:0; margin-right:14px; } .opt-label{font-size:13px;font-weight:700;color:#334155;min-width:155px;flex-shrink:0;padding-right:16px} .opt-control{flex:1;display:flex;align-items:center} .mpt-range-row{display:flex;align-items:center;gap:10px;width:100%} .mpt-range{flex:1;height:5px;accent-color:#1e40af;cursor:pointer} .mpt-val{font-size:12px;font-weight:700;color:#1e40af;min-width:46px;text-align:right;background:#eff6ff;border-radius:5px;padding:3px 8px;border:1px solid #bfdbfe} .mpt-select{width:100%;background:#fff;border:1.5px solid #cbd5e1;color:#1e293b;font-size:13px;padding:8px 10px;border-radius:8px;outline:none;cursor:pointer;font-family:'Noto Sans KR',sans-serif;transition:border-color .15s} .mpt-select:focus{border-color:#1e40af} .mpt-tags{display:flex;gap:6px;flex-wrap:wrap} .mpt-tag{padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;background:#f1f5f9;border:1.5px solid #cbd5e1;color:#475569;transition:all .15s;font-family:'Noto Sans KR',sans-serif} .mpt-tag:hover{border-color:#1e40af;color:#1e40af} .mpt-tag.active{background:#1e40af;border-color:#1e40af;color:#fff} .mpt-swatches{display:flex;gap:7px;flex-wrap:wrap;align-items:center} .mpt-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2.5px solid transparent;transition:all .15s;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.2)} .mpt-swatch:hover{transform:scale(1.15)} .mpt-swatch.active{border-color:#1e40af!important;transform:scale(1.18);box-shadow:0 0 0 2px rgba(30,64,175,.35)} .mpt-swatch-plus{width:28px;height:28px;border-radius:6px;cursor:pointer;border:1.5px dashed #94a3b8;display:flex;align-items:center;justify-content:center;font-size:14px;color:#94a3b8;position:relative;flex-shrink:0;overflow:hidden;transition:all .15s} .mpt-swatch-plus:hover{border-color:#1e40af;color:#1e40af} .mpt-swatch-plus input[type=color]{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer} /* 레이저 섹션 */ .laser-grid{display:flex;flex-direction:column;gap:0;counter-reset:laser-counter} .laser-row{ display:flex;align-items:center;gap:0; padding:15px 24px 15px 20px; border-bottom:1.5px solid #e9eef5; min-height:64px; counter-increment:laser-counter; } .laser-row:last-child{border-bottom:none} .laser-num{font-size:11px;font-weight:800;color:#fff;background:#ef4444;min-width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:14px} .laser-lbl{font-size:13px;color:#334155;min-width:155px;white-space:nowrap;font-weight:700;flex-shrink:0;padding-right:16px} .laser-sel{flex:1;background:#fff;border:1.5px solid #cbd5e1;color:#1e293b;font-size:13px;padding:8px 10px;border-radius:8px;outline:none;font-family:'Noto Sans KR',sans-serif} /* ══ 전체화면 ══ */ #mpt-fs{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2147483647;flex-direction:column;overflow:hidden;touch-action:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)} #mpt-fs.show{display:flex} /* ★ 스크롤바 완전 제거 */ #mpt-fs *::-webkit-scrollbar{display:none !important;width:0 !important} #mpt-fs *{scrollbar-width:none !important;-ms-overflow-style:none !important} #mpt-fs-viewport{flex:1;overflow:hidden;position:relative;cursor:none} #mpt-fs-content{position:absolute;top:0;left:0;width:100%;will-change:transform;padding:6vh 8vw 50vh;line-height:1.8;word-break:keep-all;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap} #mpt-fs-content.horiz{display:flex;flex-direction:row;align-items:center;padding:5vh 8vw;white-space:pre;height:100%;width:max-content} #mpt-fs-content p{width:100%;word-break:keep-all;word-wrap:break-word;overflow-wrap:break-word;margin-bottom:.45em} #mpt-fs-content p:last-child{margin-bottom:0} #mpt-fs-pdf{display:none;flex:1;overflow:hidden;position:relative;background:#111} #mpt-fs-pdf.show{display:block} #mpt-fs-pdf canvas{position:absolute;left:50%;transform:translateX(-50%);width:100%;height:auto} /* ★ 레이저 커서 — pointer-events:none 필수 */ #mpt-laser-cursor{ position:fixed;pointer-events:none !important; z-index:2147483647; width:22px;height:22px;border-radius:50%; background:radial-gradient(circle,#ff2222 20%,rgba(255,50,50,.5) 60%,transparent 100%); box-shadow:0 0 0 2px rgba(255,60,60,.4),0 0 18px 6px rgba(255,40,40,.5); transform:translate(-50%,-50%);display:none; transition:width .08s,height .08s; } /* 레이저 클릭 시 커지는 효과 */ #mpt-laser-cursor.clicked{width:32px;height:32px} #mpt-laser-hint{position:absolute;top:14px;left:14px;background:rgba(5,10,22,.88);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 14px;font-size:11px;color:#4a6080;line-height:2;pointer-events:none;transition:opacity .4s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10} .lh-row{display:flex;align-items:center;gap:7px} .lh-dot{width:7px;height:7px;border-radius:50%;background:#ef4444;box-shadow:0 0 5px #ef4444;flex-shrink:0} .lh-act{color:#8aaccc;font-weight:600} .lh-sep{color:#1e3050} #mpt-pause-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;z-index:5} #mpt-pause-overlay.show{display:flex} #mpt-pause-icon{width:88px;height:88px;border-radius:50%;background:rgba(0,0,0,.6);border:2px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff;animation:mpt-pop .2s ease;backdrop-filter:blur(6px)} @keyframes mpt-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}} /* 워터마크 */ #mpt-watermark{position:fixed;right:44px;bottom:52px;font-size:10px;color:rgba(255,255,255,.12);pointer-events:none;z-index:2147483646;letter-spacing:.04em;font-family:monospace;user-select:none} /* ══ 하단 진행바 (업그레이드) ══ */ #mpt-fs-prog-wrap{ flex-shrink:0; background:rgba(0,0,0,.3); position:relative; height:22px; display:flex;align-items:center; } #mpt-fs-prog{ height:4px; background:linear-gradient(90deg,#3b82f6,#818cf8,#7dd3fc); width:0%; transition:width .4s linear; flex-shrink:0; } #mpt-fs-prog-pct{ position:absolute; right:10px;top:50%;transform:translateY(-50%); font-size:11px;font-weight:700; color:rgba(255,255,255,.45); font-variant-numeric:tabular-nums; pointer-events:none; letter-spacing:.04em; } #mpt-fs-prog-remain{ position:absolute; left:10px;top:50%;transform:translateY(-50%); font-size:11px;color:rgba(255,255,255,.3); pointer-events:none; } /* ══ 전체화면 컨트롤바 ══ */ #mpt-fs-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:rgba(8,14,28,.93);border-top:1px solid rgba(255,255,255,.07);padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom));z-index:2147483647;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .fs-btn{background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.14);color:#8aaccc;font-size:13px;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:all .15s;font-family:'Noto Sans KR',sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation;display:inline-flex;align-items:center;gap:4px} .fs-btn:hover,.fs-btn:active{background:rgba(255,255,255,.18);color:#e2e8f0} .fs-btn.playing{background:#1e1b4b;border-color:#4f46e5;color:#a5b4fc} .fs-btn.exit-btn{background:#3b0f0f;border-color:#7f1d1d;color:#fca5a5} .fs-btn.exit-btn:hover,.fs-btn.exit-btn:active{background:#7f1d1d} .fs-sg{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 11px} .fs-sg label{font-size:11px;color:#475569;font-weight:600;white-space:nowrap} .fs-sl{height:4px;accent-color:#818cf8;cursor:pointer} #fs-speed-sl{width:100px} #fs-size-sl{width:70px} .fs-sv{font-size:12px;color:#6080a0;min-width:36px;font-weight:600} #fs-timer-block{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px} #fs-timer{font-size:15px;color:#3d5470;font-variant-numeric:tabular-nums;letter-spacing:.07em;font-weight:700} #fs-goal-lbl{font-size:10px;color:#243040} /* 타이틀 옆 태그 */ #mpt-title-tag{ font-size:13px;font-weight:600; color:rgba(147,197,253,.7); vertical-align:middle; margin-left:8px; letter-spacing:.02em; -webkit-text-fill-color:rgba(147,197,253,.7); } /* 전체화면 브랜드 표기 */ #fs-brand{ display:flex;flex-direction:column;gap:1px; padding:4px 10px; border-left:1px solid rgba(255,255,255,.1); margin-left:4px; } #fs-brand-url{ font-size:12px;font-weight:800; color:#60a5fa;letter-spacing:.04em; } #fs-brand-name{ font-size:10px;font-weight:700; color:#475569;letter-spacing:.08em; } /* ══ 반응형 ══ */ @media(max-width:680px){ #mpt-root{border-radius:8px} #mpt-title{font-size:22px} #mpt-header{padding:14px 14px 12px} .mpt-btn{font-size:12px;padding:8px 12px} .mpt-btn.accent{font-size:13px;padding:10px 16px} #mpt-textarea{font-size:14px;padding:14px 14px;min-height:200px} .opt-group,.laser-row{padding:13px 14px 13px 12px;min-height:56px} .opt-label,.laser-lbl{min-width:110px;font-size:12px;padding-right:10px} .opts-section-title{margin:12px 14px 4px} #mpt-fs-bar{gap:5px;padding:6px 8px} .fs-btn{font-size:11px;padding:7px 10px} #fs-speed-sl{width:70px} #fs-size-sl{width:50px} } @media(max-width:400px){ #mpt-title{font-size:18px} #mpt-header{flex-direction:column;gap:12px} #mpt-header-right{flex-direction:row;width:100%} #mpt-header-right .mpt-btn{flex:1} .opt-group,.laser-row{padding:11px 10px;min-height:52px} .opt-label,.laser-lbl{min-width:85px;font-size:11px;padding-right:8px} #mpt-header-btns .mpt-btn{font-size:11px;padding:7px 10px} #mpt-statusbar{padding:6px 12px} } @media(max-height:480px) and (orientation:landscape){ #mpt-textarea{min-height:100px} #mpt-fs-bar{padding:4px 8px;gap:4px} .fs-btn{padding:5px 8px;font-size:10px} } </style> <div id="mpt-root"> <!-- 헤더 --> <div id="mpt-header"> <!-- 좌측: 타이틀 + 보조버튼 --> <div id="mpt-header-left"> <div id="mpt-title"> 모두의 프롬프터 <span id="mpt-title-tag">0-1.kr/19</span></div> <div id="mpt-subtitle">발표 · 뉴스 · 강의를 위한 스마트 프롬프터 &nbsp;|&nbsp; v5.0</div> <div id="mpt-header-btns"> <button class="mpt-btn" id="btn-pdf"> PDF</button> <button class="mpt-btn" id="btn-save"> 저장</button> <button class="mpt-btn" id="btn-load"> 불러오기</button> <button class="mpt-btn" id="btn-reset" style="background:rgba(239,68,68,.2);border-color:rgba(252,165,165,.4);color:#fca5a5"> 초기화</button> </div> </div> <!-- 우측: 공유 + 프롬프터 보기 (사각형, 세로 배치) --> <div id="mpt-header-right"> <div class="mpt-tooltip"> <button class="mpt-btn share" id="btn-share"> 공유하기</button> <span class="tip">스크립트·설정을 URL/QR/단축URL로 공유</span> </div> <div class="mpt-tooltip"> <button class="mpt-btn accent" id="btn-fs"> <span>▶ 프롬프터 보기</span> <span class="btn-shortcut">Ctrl + Enter</span> </button> <span class="tip">전체화면 발표 모드 시작</span> </div> </div> </div> <!-- 탭 --> <div id="mpt-tabs"> <div class="mpt-tab active" data-tab="text">✏️ 텍스트 편집</div> <div class="mpt-tab" data-tab="pdf"> PDF 모드</div> </div> <!-- 에디터 --> <div id="mpt-editor-zone"> <textarea id="mpt-textarea"></textarea> <div id="mpt-pdf-zone"> <div id="mpt-pdf-drop" onclick="document.getElementById('inp-pdf').click()"> PDF 파일을 클릭하거나 드래그하여 불러오세요</div> <div id="mpt-pdf-preview-wrap"><canvas id="mpt-pdf-canvas"></canvas></div> <div id="mpt-pdf-pageinfo"></div> </div> </div> <!-- 상태바 --> <div id="mpt-statusbar"> <span><span class="mpt-sdot" id="sdot"></span>자동저장</span> <span id="sb-chars">글자 0</span> <span id="sb-lines">줄 0</span> <span id="sb-est">낭독 ~0분</span> <span id="mpt-shortcut-hint">Ctrl+Enter: 프롬프터 보기</span> </div> <div id="mpt-opts-divider"></div> <!-- 옵션 토글 --> <div id="mpt-opts-toggle-bar" onclick="mptToggleOpts()"> <div id="mpt-opts-toggle-icon">⚙</div> <div id="mpt-opts-toggle-text"> <div id="mpt-opts-toggle-title">⚙ 옵션 설정</div> <div id="mpt-opts-toggle-sub">폰트 · 크기 · 배경색 · 글자색 · 스크롤 · 레이저</div> </div> <span id="mpt-opts-arrow" class="open">▾</span> </div> <!-- 옵션 바디 --> <div id="mpt-opts-body" class="open"> <!-- 섹션A: 텍스트 --> <div class="opts-section"> <div class="opts-section-title"> 텍스트 스타일</div> <div class="opts-grid"> <div class="opt-group"> <div class="opt-num">1</div><div class="opt-label">폰트</div> <div class="opt-control"> <select class="mpt-select" id="opt-font"> <option value="'Noto Sans KR',sans-serif">Noto Sans KR (기본)</option> <option value="'Nanum Gothic',sans-serif">나눔고딕</option> <option value="'Nanum Myeongjo',serif">나눔명조</option> <option value="'Black Han Sans',sans-serif">블랙한산스</option> <option value="'IBM Plex Sans KR',sans-serif">IBM Plex KR</option> <option value="'Gowun Dodum',sans-serif">고운돋움</option> </select> </div> </div> <div class="opt-group"> <div class="opt-num">2</div><div class="opt-label">글자 크기</div> <div class="opt-control"> <div class="mpt-range-row"> <input type="range" class="mpt-range" id="opt-size" min="20" max="120" value="52"> <span class="mpt-val" id="opt-size-v">52px</span> </div> </div> </div> <div class="opt-group"> <div class="opt-num">3</div><div class="opt-label">줄 간격</div> <div class="opt-control"> <div class="mpt-range-row"> <input type="range" class="mpt-range" id="opt-lh" min="10" max="30" value="18"> <span class="mpt-val" id="opt-lh-v">1.8×</span> </div> </div> </div> <div class="opt-group"> <div class="opt-num">4</div><div class="opt-label">텍스트 정렬</div> <div class="opt-control"> <div class="mpt-tags" id="opt-align"> <div class="mpt-tag active" data-v="left">좌측</div> <div class="mpt-tag" data-v="center">중앙</div> <div class="mpt-tag" data-v="right">우측</div> </div> </div> </div> </div> </div> <!-- 섹션B: 색상 --> <div class="opts-section"> <div class="opts-section-title"> 색상</div> <div class="opts-grid"> <div class="opt-group"> <div class="opt-num">1</div><div class="opt-label">배경색</div> <div class="opt-control"> <div class="mpt-swatches" id="opt-bg"> <div class="mpt-swatch active" data-v="#0d0d1a" style="background:#0d0d1a;border-color:#333" title="다크 네이비"></div> <div class="mpt-swatch" data-v="#000000" style="background:#000;border-color:#333" title="블랙"></div> <div class="mpt-swatch" data-v="#0a1628" style="background:#0a1628;border-color:#1a2a3a" title="딥 블루"></div> <div class="mpt-swatch" data-v="#1a0a2e" style="background:#1a0a2e;border-color:#333" title="딥 퍼플"></div> <div class="mpt-swatch" data-v="#0a1f0a" style="background:#0a1f0a;border-color:#333" title="딥 그린"></div> <div class="mpt-swatch" data-v="#1a0808" style="background:#1a0808;border-color:#333" title="딥 레드"></div> <div class="mpt-swatch" data-v="#1a1000" style="background:#1a1000;border-color:#333" title="딥 브라운"></div> <div class="mpt-swatch" data-v="#2a2a2a" style="background:#2a2a2a;border-color:#444" title="다크 그레이"></div> <div class="mpt-swatch" data-v="#ffffff" style="background:#fff;border-color:#ccc" title="화이트"></div> <div class="mpt-swatch" data-v="#f5f0e8" style="background:#f5f0e8;border-color:#ccc" title="크림"></div> <div class="mpt-swatch" data-v="#e8f0f8" style="background:#e8f0f8;border-color:#bbb" title="라이트 블루"></div> <div class="mpt-swatch" data-v="#f0f8e8" style="background:#f0f8e8;border-color:#bbb" title="라이트 그린"></div> <div class="mpt-swatch-plus" title="직접 선택">+<input type="color" id="opt-bg-custom" value="#0d0d1a"></div> </div> </div> </div> <div class="opt-group"> <div class="opt-num">2</div><div class="opt-label">글자색</div> <div class="opt-control"> <div class="mpt-swatches" id="opt-fg"> <div class="mpt-swatch active" data-v="#ffffff" style="background:#fff;border-color:#aaa" title="화이트"></div> <div class="mpt-swatch" data-v="#f0f0b0" style="background:#f0f0b0;border-color:#aaa" title="옐로우 크림"></div> <div class="mpt-swatch" data-v="#b0e0ff" style="background:#b0e0ff;border-color:#aaa" title="스카이 블루"></div> <div class="mpt-swatch" data-v="#90ee90" style="background:#90ee90;border-color:#aaa" title="라이트 그린"></div> <div class="mpt-swatch" data-v="#ffcc80" style="background:#ffcc80;border-color:#aaa" title="오렌지"></div> <div class="mpt-swatch" data-v="#ffa0a0" style="background:#ffa0a0;border-color:#aaa" title="핑크 레드"></div> <div class="mpt-swatch" data-v="#d0b0ff" style="background:#d0b0ff;border-color:#aaa" title="라벤더"></div> <div class="mpt-swatch" data-v="#80ffee" style="background:#80ffee;border-color:#aaa" title="시안"></div> <div class="mpt-swatch" data-v="#ffe566" style="background:#ffe566;border-color:#aaa" title="골드"></div> <div class="mpt-swatch" data-v="#222222" style="background:#222;border-color:#888" title="다크 (밝은 배경용)"></div> <div class="mpt-swatch" data-v="#1a3a6a" style="background:#1a3a6a;border-color:#888" title="네이비 (밝은 배경용)"></div> <div class="mpt-swatch-plus" title="직접 선택">+<input type="color" id="opt-fg-custom" value="#ffffff"></div> </div> </div> </div> </div> </div> <!-- 섹션C: 스크롤 --> <div class="opts-section"> <div class="opts-section-title">⚡ 스크롤 &amp; 발표</div> <div class="opts-grid"> <div class="opt-group" style="flex-direction:column;align-items:flex-start;gap:8px;padding:16px 24px 16px 20px"> <div style="display:flex;align-items:center;gap:0;width:100%"> <div class="opt-num">1</div> <div class="opt-label" style="min-width:155px">발표 목표 시간</div> <div class="opt-control" style="gap:8px;flex-wrap:wrap"> <div style="display:flex;align-items:center;gap:6px"> <input type="number" id="goal-h" min="0" max="5" value="0" style="width:52px;background:#fff;border:1.5px solid #cbd5e1;border-radius:7px;padding:7px 8px;font-size:14px;font-weight:700;text-align:center;color:#1e293b;outline:none"> <span style="font-size:12px;color:#64748b;font-weight:600">시</span> <input type="number" id="goal-m" min="0" max="59" value="0" style="width:52px;background:#fff;border:1.5px solid #cbd5e1;border-radius:7px;padding:7px 8px;font-size:14px;font-weight:700;text-align:center;color:#1e293b;outline:none"> <span style="font-size:12px;color:#64748b;font-weight:600">분</span> <input type="number" id="goal-s" min="0" max="59" value="0" style="width:52px;background:#fff;border:1.5px solid #cbd5e1;border-radius:7px;padding:7px 8px;font-size:14px;font-weight:700;text-align:center;color:#1e293b;outline:none"> <span style="font-size:12px;color:#64748b;font-weight:600">초</span> <button id="goal-clear-btn" style="background:#f1f5f9;border:1.5px solid #cbd5e1;color:#64748b;font-size:11px;padding:6px 10px;border-radius:6px;cursor:pointer;font-family:'Noto Sans KR',sans-serif;white-space:nowrap">해제</button> </div> <div id="goal-desc" style="font-size:11px;color:#94a3b8;width:100%">목표 시간 미설정</div> </div> </div> <div style="padding-left:36px;font-size:11px;color:#64748b;line-height:1.6;background:#eff6ff;border-radius:8px;padding:8px 12px;width:100%;border:1px solid #bfdbfe"> ⏱ 지정한 시간에 스크롤이 마무리되도록 자동으로 속도가 세팅됩니다.<br> 발표 1분 30초에 맞춰 놓으면 그 시간 안에 정확히 끝납니다. </div> </div> <div class="opt-group"> <div class="opt-num">2</div><div class="opt-label">스크롤 방향</div> <div class="opt-control"> <div class="mpt-tags" id="opt-dir"> <div class="mpt-tag active" data-v="vertical">세로 ↕</div> <div class="mpt-tag" data-v="horizontal">가로 ↔</div> </div> </div> </div> <div class="opt-group"> <div class="opt-num">3</div><div class="opt-label">기본 속도</div> <div class="opt-control"> <div class="mpt-range-row"> <input type="range" class="mpt-range" id="opt-speed" min="1" max="20" value="6" step="1"> <span class="mpt-val" id="opt-speed-v">3.0</span> </div> </div> </div> <div class="opt-group"> <div class="opt-num">4</div><div class="opt-label">거울 모드</div> <div class="opt-control"> <div class="mpt-tags" id="opt-mirror"> <div class="mpt-tag active" data-v="off">OFF</div> <div class="mpt-tag" data-v="h">좌우반전</div> <div class="mpt-tag" data-v="v">상하반전</div> </div> </div> </div> </div> </div> <!-- 섹션D: 레이저 --> <div class="opts-section"> <div class="opts-section-title"> 레이저 포인터 동작</div> <div class="laser-grid"> <div class="laser-row"> <div class="laser-num">1</div><span class="laser-lbl">⬆ 상단 클릭</span> <select class="laser-sel" id="lz-click"> <option value="scrollup">위로 1/3 이동</option> <option value="pause">일시정지/재개</option> <option value="speedup">속도 빠르게</option> <option value="fromhere">현재위치 시작</option> <option value="none">없음</option> </select> </div> <div class="laser-row"> <div class="laser-num">2</div><span class="laser-lbl">⬆⬆ 상단 더블클릭</span> <select class="laser-sel" id="lz-dbl"> <option value="speedup">속도 빠르게</option> <option value="scrollup">위로 1/3 이동</option> <option value="exit">전체화면 종료</option> <option value="none">없음</option> </select> </div> <div class="laser-row"> <div class="laser-num">3</div><span class="laser-lbl">⬛ 가운데 클릭</span> <select class="laser-sel" id="lz-mid"> <option value="togglepause">일시정지/재개</option> <option value="fromhere">현재위치 시작</option> <option value="restart">처음으로</option> <option value="none">없음</option> </select> </div> <div class="laser-row"> <div class="laser-num">4</div><span class="laser-lbl">⬇ 하단 클릭</span> <select class="laser-sel" id="lz-bot-click"> <option value="scrolldown">아래로 1/3 이동</option> <option value="pause">일시정지/재개</option> <option value="speeddown">속도 느리게</option> <option value="none">없음</option> </select> </div> <div class="laser-row"> <div class="laser-num">5</div><span class="laser-lbl">⬇⬇ 하단 더블클릭</span> <select class="laser-sel" id="lz-bot-dbl"> <option value="speeddown">속도 느리게</option> <option value="scrolldown">아래로 1/3 이동</option> <option value="exit">전체화면 종료</option> <option value="none">없음</option> </select> </div> </div> <!-- 레이저 테스트 패널 --> <div id="laser-test-wrap" style="margin:12px 20px 4px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:14px 16px"> <div style="font-size:12px;font-weight:700;color:#475569;margin-bottom:10px"> 레이저 포인터 테스트</div> <div style="font-size:11px;color:#64748b;margin-bottom:10px;line-height:1.6"> 아래 박스를 클릭해서 내 기기가 어떤 방식으로 인식되는지 확인하세요.<br> <b>프레젠터 리모컨</b>은 키보드로 인식 (PageUp/Down) | <b>마우스형</b>은 클릭 위치로 인식 </div> <div id="laser-test-box" style=" width:100%;height:80px;background:#1e293b;border-radius:8px; display:flex;align-items:center;justify-content:center; color:#64748b;font-size:13px;cursor:pointer; border:2px solid #334155;transition:all .2s;user-select:none; position:relative;overflow:hidden; "> <span id="laser-test-msg">여기를 클릭하거나 프레젠터 버튼을 눌러보세요</span> <div id="laser-test-zone" style="position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column"> <div style="flex:1;border-bottom:1px dashed #334155;display:flex;align-items:center;justify-content:center;font-size:11px;color:#334155">상단 1/3</div> <div style="flex:1;border-bottom:1px dashed #334155;display:flex;align-items:center;justify-content:center;font-size:11px;color:#334155">가운데 1/3</div> <div style="flex:1;display:flex;align-items:center;justify-content:center;font-size:11px;color:#334155">하단 1/3</div> </div> </div> <div id="laser-test-result" style="margin-top:8px;font-size:12px;color:#22c55e;font-weight:600;min-height:18px;text-align:center"></div> <div style="margin-top:6px;font-size:11px;color:#94a3b8;text-align:center"> ⌨️ 키보드: PageUp=위 | PageDown=아래 | Space/F5/B=정지 </div> </div> </div> </div><!-- /opts-body --> <input type="file" id="inp-pdf" accept=".pdf" style="display:none"> <input type="file" id="inp-txt" accept=".txt" style="display:none"> </div><!-- /mpt-root --> <!-- 공유 모달 --> <div id="mpt-share-modal"> <div id="mpt-share-box"> <h3> 공유하기</h3> <div class="share-section"> <div class="share-label"> 전체 URL (스크립트+설정 포함)</div> <div class="share-url-row"> <input type="text" id="share-full-url" readonly placeholder="URL 생성 중..."> <button class="share-copy-btn" id="share-copy-full">복사</button> </div> <div class="share-warn">⚠ URL이 길면 일부 환경에서 열리지 않을 수 있어요.</div> </div> <div class="share-section"> <div class="share-label">✂ 단축 URL (TinyURL)</div> <div class="share-tinyurl-row"> <input type="text" id="share-tiny-url" readonly placeholder="단축 버튼을 누르세요"> <button class="share-tinyurl-btn" id="share-tiny-btn">단축하기</button> <button class="share-copy-btn" id="share-copy-tiny" style="display:none">복사</button> </div> </div> <div class="share-section"> <div class="share-label"> QR 코드</div> <div id="mpt-qr-wrap"><img id="mpt-qr-img" src="" alt="QR 코드 생성 중..."></div> </div> <button class="share-close-btn" id="share-close">✕ 닫기</button> </div> </div> <!-- 전체화면 오버레이 --> <div id="mpt-fs"> <div id="mpt-laser-cursor"></div> <div id="mpt-fs-viewport"> <div id="mpt-fs-content"></div> <div id="mpt-pause-overlay"><div id="mpt-pause-icon">⏸</div></div> <div id="mpt-laser-hint"> <div class="lh-row"><span class="lh-dot"></span><span class="lh-act">상단 클릭 / PageUp 1번</span><span class="lh-sep"> → 위로 1/3</span></div> <div class="lh-row"><span class="lh-dot"></span><span class="lh-act">상단 더블 / PageUp 연속</span><span class="lh-sep"> → 속도↑</span></div> <div class="lh-row"><span class="lh-dot"></span><span class="lh-act">가운데 / Space / F5 / B</span><span class="lh-sep"> → 정지/재개</span></div> <div class="lh-row"><span class="lh-dot"></span><span class="lh-act">하단 클릭 / PageDown 1번</span><span class="lh-sep"> → 아래로 1/3</span></div> <div class="lh-row"><span class="lh-dot"></span><span class="lh-act">하단 더블 / PageDown 연속</span><span class="lh-sep"> → 속도↓</span></div> <div style="margin-top:5px;color:#1e3050;font-size:10px">ESC: 나가기 | R: 처음 | +/-: 속도 | ↑↓: 수동이동</div> </div> <!-- 전체화면 버튼 안내 패널 --> <div id="mpt-key-guide" style=" position:absolute;bottom:70px;left:14px; background:rgba(5,10,22,.88);border:1px solid rgba(255,255,255,.1); border-radius:10px;padding:10px 14px;font-size:11px; color:#4a6080;line-height:1.9;pointer-events:none; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10; transition:opacity .4s;opacity:0; "> <div style="font-size:10px;font-weight:700;color:#60a5fa;margin-bottom:4px;letter-spacing:.06em">⌨ 컨트롤바 버튼 안내</div> <div>▶ 재개 / ⏸ 정지 — 재생 토글</div> <div> 현재위치 — 지금 위치부터 시작</div> <div>↺ 처음 — 맨 위로 돌아가 재시작</div> <div>⇔ 미러 — 좌우/상하 반전 전환</div> <div>속도 슬라이더 — 0.5 단위 세밀 조정</div> <div>크기 슬라이더 — 글자 크기 즉시 변경</div> <div style="margin-top:4px;color:#1e3050;font-size:10px">H키: 이 안내 토글 | 우측 바: 드래그로 위치이동</div> </div> </div> <div id="mpt-fs-pdf"><canvas id="mpt-fs-pdf-cv"></canvas></div> <div id="mpt-fs-prog-wrap"> <div id="mpt-fs-prog-remain"></div> <div id="mpt-fs-prog"></div> <div id="mpt-fs-prog-pct">0%</div> </div> <!-- 워터마크 --> <div id="mpt-watermark">0-1.kr/19_startupEX</div> <div id="mpt-fs-bar"> <button class="fs-btn playing" id="fsb-play">▶ 시작</button> <button class="fs-btn" id="fsb-fromhere"> 현재위치 시작</button> <button class="fs-btn" id="fsb-restart">↺ 처음</button> <button class="fs-btn" id="fsb-mirror">⇔ 미러</button> <div class="fs-sg"> <label>속도</label> <input type="range" class="fs-sl" id="fs-speed-sl" min="1" max="20" value="6" step="1"> <span class="fs-sv" id="fs-speed-v">3.0</span> </div> <div class="fs-sg"> <label>크기</label> <input type="range" class="fs-sl" id="fs-size-sl" min="20" max="120" value="52"> <span class="fs-sv" id="fs-size-v">52px</span> </div> <!-- 브랜드 표기 --> <div id="fs-brand"> <span id="fs-brand-url">0-1.kr/19</span> <span id="fs-brand-name">STARTUP_EX</span> </div> <div id="fs-timer-block"> <span id="fs-timer">00:00</span> <span id="fs-goal-lbl"></span> </div> <button class="fs-btn exit-btn" id="fsb-exit">✕ 나가기</button> </div> </div> <script> (function(){ 'use strict'; /* ── 속도값: 슬라이더 1~20 → 실제 0.5~10.0 (0.5 단위) ── */ function rawToSpeed(v){return v*0.5} function speedToRaw(s){return Math.round(s*2)} function speedLabel(v){return rawToSpeed(v).toFixed(1)} var C={ font:"'Noto Sans KR',sans-serif", size:52,lh:18,align:'left', bg:'#0d0d1a',fg:'#ffffff', dir:'vertical',speedRaw:6,goal:0,mirror:'off', lzClick:'scrollup', /* 1. 상단클릭 = 위로 1/3 */ lzDbl:'speedup', /* 2. 상단더블 = 속도 빠르게 */ lzMid:'togglepause', /* 3. 가운데 = 일시정지/현재위치시작 */ lzBotClick:'scrolldown', /* 4. 하단클릭 = 아래로 1/3 */ lzBotDbl:'speeddown', /* 5. 하단더블 = 속도 느리게 */ mode:'text' }; var pdfDoc=null,pdfPage=1,pdfTotal=0,pdfJsOk=false; var scrolling=false,paused=false,scrollPos=0,animId=null,lastTs=0; var fsPdfY=0,hoverZone='mid'; var timerSec=0,timerInt=null,hintVisible=true; var $=function(id){return document.getElementById(id)}; var fsEl=$('mpt-fs'),vp=$('mpt-fs-viewport'),fc=$('mpt-fs-content'); var fsPdf=$('mpt-fs-pdf'),fsPdfCv=$('mpt-fs-pdf-cv'); var lCur=$('mpt-laser-cursor'),pauseOv=$('mpt-pause-overlay'),lHint=$('mpt-laser-hint'); var ta=$('mpt-textarea'); var pdfZone=$('mpt-pdf-zone'),pdfPrevW=$('mpt-pdf-preview-wrap'),pdfCv=$('mpt-pdf-canvas'),pdfPI=$('mpt-pdf-pageinfo'); /* body에 마운트 — 티스토리 스킨 위 최상단 */ document.body.appendChild(fsEl); document.body.appendChild(lCur); /* ── 옵션 토글 ── */ var optsOpen=true; window.mptToggleOpts=function(){ optsOpen=!optsOpen; $('mpt-opts-body').classList.toggle('open',optsOpen); $('mpt-opts-arrow').classList.toggle('open',optsOpen); }; /* ── 탭 ── */ document.querySelectorAll('.mpt-tab').forEach(function(t){ t.onclick=function(){ document.querySelectorAll('.mpt-tab').forEach(function(x){x.classList.remove('active')}); t.classList.add('active'); C.mode=t.dataset.tab; ta.style.display=C.mode==='text'?'':'none'; pdfZone.classList.toggle('show',C.mode==='pdf'); }; }); /* ── 옵션 바인딩 ── */ function rng(id,vId,key,fmt){ var el=$(id),vEl=$(vId); el.value=C[key]; vEl.textContent=fmt(C[key]); el.oninput=function(){ C[key]=+this.value; vEl.textContent=fmt(C[key]); if(key==='size'){applyStyle();syncSl();} if(key==='speedRaw'){syncSl();} save(); }; } function tags(wId,key,cb){ var w=$(wId); w.querySelectorAll('.mpt-tag').forEach(function(t){ t.classList.toggle('active',t.dataset.v===String(C[key])); t.onclick=function(){ w.querySelectorAll('.mpt-tag').forEach(function(x){x.classList.remove('active')}); t.classList.add('active'); C[key]=t.dataset.v; if(cb)cb(); save(); }; }); } function swatches(wId,key){ var w=$(wId); w.querySelectorAll('.mpt-swatch').forEach(function(s){ s.classList.toggle('active',s.dataset.v===C[key]); s.onclick=function(){ w.querySelectorAll('.mpt-swatch').forEach(function(x){x.classList.remove('active')}); s.classList.add('active'); C[key]=s.dataset.v; save(); }; }); } function sel(id,key,cb){ var el=$(id); el.value=C[key]; el.onchange=function(){C[key]=this.value;if(cb)cb();save();}; } function initOpts(){ rng('opt-size','opt-size-v','size',function(v){return v+'px'}); rng('opt-lh','opt-lh-v','lh',function(v){return (v/10).toFixed(1)+'×'}); /* 속도: raw 값으로 바인딩 */ var spEl=$('opt-speed'),spVEl=$('opt-speed-v'); spEl.value=C.speedRaw; spVEl.textContent=speedLabel(C.speedRaw); spEl.oninput=function(){C.speedRaw=+this.value;spVEl.textContent=speedLabel(C.speedRaw);syncSl();save();}; tags('opt-align','align'); tags('opt-dir','dir'); tags('opt-mirror','mirror'); swatches('opt-bg','bg'); swatches('opt-fg','fg'); sel('opt-font','font'); sel('lz-click','lzClick',updateHint); sel('lz-dbl','lzDbl',updateHint); sel('lz-mid','lzMid',updateHint); sel('lz-bot-click','lzBotClick',updateHint); sel('lz-bot-dbl','lzBotDbl',updateHint); $('opt-bg-custom').oninput=function(){ $('opt-bg').querySelectorAll('.mpt-swatch').forEach(function(x){x.classList.remove('active')}); C.bg=this.value; save(); }; $('opt-fg-custom').oninput=function(){ $('opt-fg').querySelectorAll('.mpt-swatch').forEach(function(x){x.classList.remove('active')}); C.fg=this.value; save(); }; /* 전체화면 속도 슬라이더 */ $('fs-speed-sl').oninput=function(){ C.speedRaw=+this.value; $('fs-speed-v').textContent=speedLabel(C.speedRaw); $('opt-speed').value=C.speedRaw; $('opt-speed-v').textContent=speedLabel(C.speedRaw); save(); }; $('fs-size-sl').oninput=function(){ C.size=+this.value; $('fs-size-v').textContent=C.size+'px'; $('opt-size').value=C.size; $('opt-size-v').textContent=C.size+'px'; applyStyle(); save(); }; /* ── 목표시간 시분초 입력 ── */ function updateGoalFromInputs(){ var h=parseInt($('goal-h').value)||0; var m=parseInt($('goal-m').value)||0; var s=parseInt($('goal-s').value)||0; C.goal=h*3600+m*60+s; var desc=$('goal-desc'); if(C.goal>0){ var hh=Math.floor(C.goal/3600),mm=Math.floor((C.goal%3600)/60),ss=C.goal%60; desc.textContent='✅ '+(hh>0?hh+'시 ':'')+mm+'분 '+ss+'초 → 자동 속도 적용됨'; desc.style.color='#16a34a'; } else { desc.textContent='목표 시간 미설정 (기본 속도 사용)'; desc.style.color='#94a3b8'; } save(); } /* 저장된 goal 복원 */ if(C.goal>0){ $('goal-h').value=Math.floor(C.goal/3600); $('goal-m').value=Math.floor((C.goal%3600)/60); $('goal-s').value=C.goal%60; updateGoalFromInputs(); } $('goal-h').oninput=updateGoalFromInputs; $('goal-m').oninput=updateGoalFromInputs; $('goal-s').oninput=updateGoalFromInputs; $('goal-clear-btn').onclick=function(){ $('goal-h').value=0;$('goal-m').value=0;$('goal-s').value=0; updateGoalFromInputs(); }; /* ── 레이저 테스트 박스 ── */ var testBox=$('laser-test-box'); var testResult=$('laser-test-result'); if(testBox){ testBox.addEventListener('click',function(e){ var rect=testBox.getBoundingClientRect(); var ry=(e.clientY-rect.top)/rect.height; var zone; if(ry<0.33) zone='상단 1/3 영역 클릭됨 → 마우스형 호환 ✅'; else if(ry>0.67) zone='하단 1/3 영역 클릭됨 → 마우스형 호환 ✅'; else zone='가운데 영역 클릭됨 → 마우스형 호환 ✅'; testBox.style.borderColor='#22c55e'; testResult.textContent=zone; setTimeout(function(){testBox.style.borderColor='#334155';},1200); }); var kbTestHandler=function(e2){ if(!$('mpt-opts-body').classList.contains('open'))return; var msg=''; if(e2.key==='PageUp'){msg='⬆ PageUp 감지! → 프레젠터 리모컨 호환 ✅';} else if(e2.key==='PageDown'){msg='⬇ PageDown 감지! → 프레젠터 리모컨 호환 ✅';} else if(e2.key===' '){msg='⏸ Space 감지! → 정지/재개 동작 ✅';} else if(e2.key==='F5'){msg='⏸ F5 감지! → 정지/재개 동작 ✅';} else if(e2.key==='b'||e2.key==='B'){msg='⏸ B키 감지! → 블랙아웃/정지 동작 ✅';} if(msg){ testBox.style.borderColor='#3b82f6'; testResult.textContent=msg; setTimeout(function(){testBox.style.borderColor='#334155';},1200); } }; document.addEventListener('keydown',kbTestHandler); } } /* ── 상태바 ── */ function updateStatus(){ var txt=ta.value; $('sb-chars').textContent='글자 '+txt.replace(/\s/g,'').length; $('sb-lines').textContent='줄 '+txt.split('\n').length; var w=txt.trim().split(/\s+/).filter(Boolean).length; $('sb-est').textContent='낭독 ~'+Math.max(1,Math.round(w/280))+'분'; } ta.oninput=function(){updateStatus();save();}; var DEFAULT_SCRIPT = '여기에 발표 스크립트를 입력하세요.\n\n안녕하세요 스타트업EX입니다.\n전세계 어디서든 0-1.kr/19만 누르시면\n프롬프터를 활용하실 수 있습니다.\n\n━━━━━━━━━━━━━━━━━━━━━━━━\n 모두의 프롬프터 주요 기능\n━━━━━━━━━━━━━━━━━━━━━━━━\n\n▶ 프롬프터 보기\n우측 상단 버튼 또는 Ctrl+Enter를 누르면\n전체화면 발표 모드가 시작됩니다.\n\n 현재위치 시작\n스크롤을 원하는 위치로 이동 후\n[현재위치 시작] 버튼을 누르면\n그 위치부터 자동 스크롤이 시작됩니다.\n\n 레이저 포인터 조작\n화면 상단 1/3 클릭 → 위로 스크롤\n화면 상단 1/3 더블클릭 → 속도 증가\n화면 하단 1/3 클릭 → 아래로 스크롤\n화면 하단 1/3 더블클릭 → 속도 감소\n화면 가운데 클릭 → 일시정지/재개\n\n 진행 내비게이터\n오른쪽 파란 바를 드래그하면\n원하는 위치로 바로 이동할 수 있습니다.\n\n⚙ 옵션 설정\n폰트·글자크기·배경색·글자색·속도 등\n다양한 설정을 하단 옵션 패널에서 조정하세요.\n\n 공유하기\nURL·QR코드·단축URL로\n스크립트와 설정을 함께 공유할 수 있습니다.\n\n━━━━━━━━━━━━━━━━━━━━━━━━\n위 내용을 지우고 발표 스크립트를 입력하거나\n[불러오기]로 텍스트 파일을 열어 사용하세요.\n━━━━━━━━━━━━━━━━━━━━━━━━'; /* ── 저장/로드 ── */ var saveT; function save(){ clearTimeout(saveT); saveT=setTimeout(function(){ try{ localStorage.setItem('mpt5_s',ta.value); localStorage.setItem('mpt5_c',JSON.stringify(C)); }catch(e){} },600); } function loadData(){ try{ var s=localStorage.getItem('mpt5_s'); if(s!=null) ta.value=s; else ta.value=DEFAULT_SCRIPT; var c=localStorage.getItem('mpt5_c'); if(c){var p=JSON.parse(c);for(var k in p)if(Object.prototype.hasOwnProperty.call(p,k))C[k]=p[k];} }catch(e){ta.value=DEFAULT_SCRIPT;} } /* ── 초기화 ── */ $('btn-reset').onclick=function(){ if(confirm('스크립트를 전부 지울까요?')){ ta.value=''; updateStatus(); save(); ta.focus(); } }; /* ── 파일 저장/불러오기 ── */ $('btn-save').onclick=function(){ var a=document.createElement('a'); a.href=URL.createObjectURL(new Blob([ta.value],{type:'text/plain;charset=utf-8'})); a.download='prompter_script.txt'; a.click(); }; $('btn-load').onclick=function(){$('inp-txt').click();}; $('inp-txt').onchange=function(){ var f=this.files[0]; if(!f)return; var r=new FileReader(); r.onload=function(e){ta.value=e.target.result; updateStatus(); save();}; r.readAsText(f); }; /* ── PDF ── */ function loadPdfJs(cb){ if(pdfJsOk){cb();return;} var s=document.createElement('script'); s.src='https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js'; s.onload=function(){ pdfjsLib.GlobalWorkerOptions.workerSrc='https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'; pdfJsOk=true; cb(); }; document.head.appendChild(s); } function loadPdfFile(file){ loadPdfJs(function(){ var r=new FileReader(); r.onload=function(e){ pdfjsLib.getDocument({data:e.target.result}).promise.then(function(doc){ pdfDoc=doc; pdfPage=1; pdfTotal=doc.numPages; $('mpt-pdf-drop').style.display='none'; pdfPrevW.style.display='block'; pdfPI.style.display='block'; renderPrev(1); }); }; r.readAsArrayBuffer(file); }); } function renderPrev(n){ pdfDoc.getPage(n).then(function(page){ var vp2=page.getViewport({scale:1.0}); pdfCv.width=vp2.width; pdfCv.height=vp2.height; page.render({canvasContext:pdfCv.getContext('2d'),viewport:vp2}).promise.then(function(){ pdfPI.textContent=n+' / '+pdfTotal+' 페이지'; }); }); } $('btn-pdf').onclick=function(){$('inp-pdf').click();document.querySelector('[data-tab="pdf"]').click();}; $('inp-pdf').onchange=function(){if(this.files[0])loadPdfFile(this.files[0]);}; var drop=$('mpt-pdf-drop'); drop.ondragover=function(e){e.preventDefault();this.style.borderColor='#1e40af';}; drop.ondragleave=function(){this.style.borderColor='';}; drop.ondrop=function(e){ e.preventDefault(); this.style.borderColor=''; var f=e.dataTransfer.files[0]; if(f&&f.type==='application/pdf')loadPdfFile(f); }; /* ════════════════════════════ 공유 기능 ════════════════════════════ */ function buildSharePayload(){ /* 스크립트 + 설정 모두 포함 */ var payload={ s: ta.value, c: C }; return encodeURIComponent(JSON.stringify(payload)); } function buildShareUrl(){ var base=window.location.href.split('?')[0].split('#')[0]; return base+'?mpt='+buildSharePayload(); } $('btn-share').onclick=function(){ var modal=$('mpt-share-modal'); modal.classList.add('show'); /* URL 생성 */ var url=buildShareUrl(); $('share-full-url').value=url; /* QR */ var qrUrl='https://api.qrserver.com/v1/create-qr-code/?size=180x180&data='+encodeURIComponent(url); $('mpt-qr-img').src=qrUrl; /* TinyURL 초기화 */ $('share-tiny-url').value=''; $('share-copy-tiny').style.display='none'; }; $('share-close').onclick=function(){$('mpt-share-modal').classList.remove('show');}; $('mpt-share-modal').onclick=function(e){if(e.target===this)this.classList.remove('show');}; function copyText(text,btn){ if(navigator.clipboard&&navigator.clipboard.writeText){ navigator.clipboard.writeText(text).then(function(){ btn.textContent='✔ 완료'; btn.classList.add('ok'); setTimeout(function(){btn.textContent='복사';btn.classList.remove('ok');},2500); }); } else { var ta2=document.createElement('textarea'); ta2.value=text; ta2.style.cssText='position:fixed;opacity:0'; document.body.appendChild(ta2); ta2.select(); document.execCommand('copy'); document.body.removeChild(ta2); btn.textContent='✔ 완료'; btn.classList.add('ok'); setTimeout(function(){btn.textContent='복사';btn.classList.remove('ok');},2500); } } $('share-copy-full').onclick=function(){copyText($('share-full-url').value,this);}; $('share-copy-tiny').onclick=function(){copyText($('share-tiny-url').value,this);}; $('share-tiny-btn').onclick=function(){ var self=this; self.textContent='생성 중...'; self.disabled=true; var longUrl=buildShareUrl(); /* TinyURL API (CORS 지원) */ fetch('https://tinyurl.com/api-create.php?url='+encodeURIComponent(longUrl)) .then(function(r){return r.text();}) .then(function(t){ $('share-tiny-url').value=t; $('share-copy-tiny').style.display=''; /* QR도 단축URL로 갱신 */ $('mpt-qr-img').src='https://api.qrserver.com/v1/create-qr-code/?size=180x180&data='+encodeURIComponent(t); self.textContent='단축하기'; self.disabled=false; }) .catch(function(){ $('share-tiny-url').value='오류 — 잠시 후 다시 시도해 주세요'; self.textContent='단축하기'; self.disabled=false; }); }; /* 페이지 로드 시 URL 파라미터로 공유 데이터 복원 */ function loadFromUrl(){ try{ var params=new URLSearchParams(window.location.search); var mpt=params.get('mpt'); if(!mpt)return; var payload=JSON.parse(decodeURIComponent(mpt)); if(payload.s) ta.value=payload.s; if(payload.c){var p=payload.c;for(var k in p)if(Object.prototype.hasOwnProperty.call(p,k))C[k]=p[k];} }catch(e){} } /* ════════════════════════════ 전체화면 ════════════════════════════ */ function enterFs(){ buildContent(); applyBg(); applyStyle(); autoSpeedPending = C.goal > 0; fsEl.classList.add('show'); lCur.style.display='block'; scrollPos=0; fsPdfY=0; lastHoverZone='mid'; hoverZone='mid'; applyScroll(); timerSec=0; $('fs-timer').textContent='00:00'; $('fs-timer').style.color=''; clearInterval(timerInt); timerInt=setInterval(tick,1000); /* 2프레임 후 자동속도 계산 (maxScroll 확정 후) */ requestAnimationFrame(function(){ requestAnimationFrame(function(){ if(autoSpeedPending && C.goal > 0){ var mx2 = maxScroll(); if(mx2 > 0){ var autoSpd = mx2 / (C.goal * 0.55 * 60); C.speedRaw = Math.max(1, Math.min(20, Math.round(autoSpd / 0.5))); syncSl(); autoSpeedPending = false; } } }); }); startScroll(); hintVisible=false; lHint.style.opacity='0'; updateHint(); syncSl(); goalLabel(); requestFs(); } function exitFs(){ fsEl.classList.remove('show'); lCur.style.display='none'; stopScroll(); clearInterval(timerInt); exitFsApi(); } function requestFs(){ var el=document.documentElement; try{ if(el.requestFullscreen)el.requestFullscreen(); else if(el.webkitRequestFullscreen)el.webkitRequestFullscreen(); else if(el.mozRequestFullScreen)el.mozRequestFullScreen(); else if(el.msRequestFullscreen)el.msRequestFullscreen(); }catch(e){} } function exitFsApi(){ try{ if(document.exitFullscreen)document.exitFullscreen(); else if(document.webkitExitFullscreen)document.webkitExitFullscreen(); else if(document.mozCancelFullScreen)document.mozCancelFullScreen(); else if(document.msExitFullscreen)document.msExitFullscreen(); }catch(e){} } function buildContent(){ if(C.mode==='pdf'&&pdfDoc){ fc.style.display='none'; vp.style.display='none'; fsPdf.classList.add('show'); renderFsPdf(pdfPage); return; } fsPdf.classList.remove('show'); fc.style.display=''; vp.style.display=''; fc.innerHTML=''; fc.className=C.dir==='horizontal'?'horiz':''; ta.value.split('\n').forEach(function(line){ var p=document.createElement('p'); p.textContent=line||'\u00a0'; fc.appendChild(p); }); } function applyBg(){fsEl.style.background=C.bg;} function applyStyle(){ var sx=C.mirror==='h'?-1:1, sy=C.mirror==='v'?-1:1; fc.style.color=C.fg; fc.style.fontSize=C.size+'px'; fc.style.lineHeight=(C.lh/10).toFixed(1); fc.style.fontFamily=C.font; fc.style.textAlign=C.align; fc.style.transformOrigin='50% 0'; if(!scrolling) fc.style.transform='scale('+sx+','+sy+')'; } /* ── 스크롤 엔진 ── */ var autoSpeedPending=false; function getSpd(){ return rawToSpeed(C.speedRaw); } function maxScroll(){ if(C.dir==='horizontal') return Math.max(0,fc.scrollWidth-vp.clientWidth); return Math.max(0,fc.scrollHeight-vp.clientHeight); } function applyScroll(){ var sx=C.mirror==='h'?-1:1, sy=C.mirror==='v'?-1:1; var m='scale('+sx+','+sy+')'; if(C.dir==='horizontal') fc.style.transform=m+' translateX(-'+scrollPos+'px)'; else fc.style.transform=m+' translateY(-'+scrollPos+'px)'; var mx=maxScroll(); var pct=mx>0?Math.min(100,Math.round(scrollPos/mx*100)):0; /* 하단 진행바 업데이트 */ var progEl=$('mpt-fs-prog'); var pctEl=$('mpt-fs-prog-pct'); var remEl=$('mpt-fs-prog-remain'); if(progEl) progEl.style.width=pct+'%'; if(pctEl){ pctEl.textContent=pct+'%'; if(pct>=95) pctEl.style.color='rgba(239,68,68,.7)'; else if(pct>=80) pctEl.style.color='rgba(245,158,11,.7)'; else pctEl.style.color='rgba(255,255,255,.45)'; } if(remEl){ if(C.goal>0){ var remSec=Math.max(0,C.goal-timerSec); var rm=Math.floor(remSec/60),rs=remSec%60; remEl.textContent='남은 '+(rm>0?rm+'분 ':'')+rs+'초'; } else { var remPct2=100-pct; var tw=ta.value.trim().split(/\s+/).filter(Boolean).length; var ts2=Math.round(tw/280*60); var re=Math.round(ts2*remPct2/100); var rm2=Math.floor(re/60); remEl.textContent=re>0?'약 '+(rm2>0?rm2+'분':'잠시')+'후 끝':'완료!'; } } } function manualScroll(delta){ scrollPos=Math.max(0,Math.min(maxScroll(),scrollPos+delta)); applyScroll(); } function scrollLoop(ts){ if(!scrolling||paused){animId=null;return;} var dt=ts-lastTs; lastTs=ts; if(dt>200)dt=16; var spd=getSpd(); scrollPos+=spd*0.55*(dt/16); var mx=maxScroll(); if(scrollPos>=mx){scrollPos=mx;applyScroll();setPlay(false);animId=null;return;} applyScroll(); animId=requestAnimationFrame(scrollLoop); } function pdfLoop(ts){ if(!scrolling||paused){animId=null;return;} var dt=ts-lastTs; lastTs=ts; if(dt>200)dt=16; fsPdfY+=getSpd()*0.35*(dt/16); var barH=$('mpt-fs-bar').offsetHeight+3; var viewH=window.innerHeight-barH; var maxH=Math.max(0,fsPdfCv.height-viewH); if(fsPdfY>=maxH){ fsPdfY=maxH; fsPdfCv.style.top=(-fsPdfY)+'px'; if(pdfPage<pdfTotal){ stopScroll(); setTimeout(function(){pdfPage++;fsPdfY=0;renderFsPdf(pdfPage,function(){startScroll();});},600); } else {setPlay(false);animId=null;} return; } fsPdfCv.style.top=(-fsPdfY)+'px'; animId=requestAnimationFrame(pdfLoop); } function renderFsPdf(n,cb){ pdfDoc.getPage(n).then(function(page){ var barH=$('mpt-fs-bar').offsetHeight+3; var nat=page.getViewport({scale:1}); var scale=window.innerWidth/nat.width; var vp2=page.getViewport({scale:scale}); fsPdfCv.width=vp2.width; fsPdfCv.height=vp2.height; fsPdfCv.style.top='0px'; fsPdfCv.style.left='0'; fsPdfCv.style.transform='none'; fsPdfCv.style.width='100%'; fsPdfCv.style.height='auto'; page.render({canvasContext:fsPdfCv.getContext('2d'),viewport:vp2}).promise.then(function(){ fsPdfY=0; if(cb)cb(); }); }); } function startScroll(){ if(scrolling)return; scrolling=true; paused=false; setPlay(true); lastTs=performance.now(); animId=requestAnimationFrame(C.mode==='pdf'&&pdfDoc?pdfLoop:scrollLoop); } function pauseScroll(){ paused=true; scrolling=false; if(animId){cancelAnimationFrame(animId);animId=null;} setPlay(false); } function stopScroll(){ scrolling=false; paused=false; if(animId){cancelAnimationFrame(animId);animId=null;} setPlay(false); } function togglePause(){if(scrolling)pauseScroll();else startScroll();} function setPlay(v){ scrolling=v; pauseOv.classList.toggle('show',!v&&fsEl.classList.contains('show')); var btn=$('fsb-play'); if(v){btn.textContent='⏸ 일시정지';btn.classList.add('playing');} else{btn.textContent='▶ 재개';btn.classList.remove('playing');} } function tick(){ timerSec++; var m=Math.floor(timerSec/60),s=timerSec%60; $('fs-timer').textContent=(m<10?'0':'')+m+':'+(s<10?'0':'')+s; if(C.goal>0){ $('fs-timer').style.color=timerSec>=C.goal?'#ef4444':timerSec>=C.goal*.8?'#f59e0b':''; } } function goalLabel(){ if(C.goal>0){ var hh=Math.floor(C.goal/3600),mm=Math.floor((C.goal%3600)/60),ss=C.goal%60; $('fs-goal-lbl').textContent='목표 '+(hh>0?hh+'h ':'')+mm+'m '+ss+'s'; } else { $('fs-goal-lbl').textContent=''; } }function syncSl(){ $('fs-speed-sl').value=C.speedRaw; $('fs-speed-v').textContent=speedLabel(C.speedRaw); $('fs-size-sl').value=C.size; $('fs-size-v').textContent=C.size+'px'; } var AL={ pause:'일시정지/재개',togglepause:'일시정지/재개', speedup:'속도 빠르게',speeddown:'속도 느리게', scrollup:'위로 1/3',scrolldown:'아래로 1/3', exit:'종료',none:'없음',fromhere:'현재위치 시작',restart:'처음으로' }; function updateHint(){ $('lh-click-t').textContent=AL[C.lzClick]||C.lzClick; $('lh-dbl-t').textContent=AL[C.lzDbl]||C.lzDbl; $('lh-top-t').textContent=AL[C.lzMid]||C.lzMid; $('lh-bot-t').textContent=AL[C.lzBotClick]||C.lzBotClick; /* select 기본값 맞추기 */ if($('lz-click')) $('lz-click').value=C.lzClick; if($('lz-dbl')) $('lz-dbl').value=C.lzDbl; if($('lz-mid')) $('lz-mid').value=C.lzMid; if($('lz-bot-click')) $('lz-bot-click').value=C.lzBotClick; if($('lz-bot-dbl')) $('lz-bot-dbl').value=C.lzBotDbl; } /* 하단 영역 클릭 카운터 (1번=빠르게, 2번=느리게) */ var botClickCount=0, botClickTimer=null; function doAct(a){ if(a==='pause') togglePause(); else if(a==='speedup'){C.speedRaw=Math.min(20,C.speedRaw+2);syncSl();} else if(a==='speeddown'){C.speedRaw=Math.max(1,C.speedRaw-2);syncSl();} else if(a==='exit') exitFs(); else if(a==='fromhere'){if(!scrolling)startScroll();} else if(a==='restart'){stopScroll();scrollPos=0;fsPdfY=0;applyScroll();startScroll();} } /* 레이저 커서 클릭 효과 */ function laserClick(){ lCur.classList.add('clicked'); setTimeout(function(){lCur.classList.remove('clicked');},200); } /* ── 버튼 이벤트 ── */ $('btn-fs').onclick=enterFs; $('fsb-exit').onclick=exitFs; $('fsb-play').onclick=togglePause; $('fsb-restart').onclick=function(){stopScroll();scrollPos=0;fsPdfY=0;applyScroll();startScroll();}; $('fsb-fromhere').onclick=function(){if(!scrolling)startScroll();}; $('fsb-mirror').onclick=function(){ var a=['off','h','v']; C.mirror=a[(a.indexOf(C.mirror)+1)%a.length]; applyStyle(); save(); }; /* ════════════════════════════ 레이저 포인터 — 클릭 위치 기반 상단1/3: 클릭=위로, 더블=속도↑ 하단1/3: 클릭=아래로, 더블=속도↓ 가운데: 클릭/더블=정지/시작 ════════════════════════════ */ var dblT=null; var lastHoverZone='mid'; /* doAct 확장 */ function doAct(a){ if(a==='pause'||a==='togglepause') togglePause(); else if(a==='speedup'){C.speedRaw=Math.min(20,C.speedRaw+2);syncSl();} else if(a==='speeddown'){C.speedRaw=Math.max(1,C.speedRaw-2);syncSl();} else if(a==='exit') exitFs(); else if(a==='fromhere'){if(!scrolling)startScroll();} else if(a==='restart'){stopScroll();scrollPos=0;fsPdfY=0;applyScroll();startScroll();} else if(a==='scrollup'){ /* 위로 1/3 이동 */ var jump=Math.max(100,maxScroll()/3); scrollPos=Math.max(0,scrollPos-jump); applyScroll(); } else if(a==='scrolldown'){ /* 아래로 1/3 이동 */ var jump2=Math.max(100,maxScroll()/3); scrollPos=Math.min(maxScroll(),scrollPos+jump2); applyScroll(); } } /* 레이저 커서 클릭 효과 */ function laserClick(){ lCur.classList.add('clicked'); setTimeout(function(){lCur.classList.remove('clicked');},200); } /* mousemove — 커서만 추적 (zone 진입 액션 없음) */ document.addEventListener('mousemove',function(e){ if(!fsEl.classList.contains('show'))return; lCur.style.left=e.clientX+'px'; lCur.style.top=e.clientY+'px'; var ry=e.clientY/window.innerHeight; hoverZone=ry<0.33?'top':ry>0.67?'bot':'mid'; },{passive:true}); /* click — 클릭 위치로 zone 판단 */ fsEl.addEventListener('click',function(e){ if(e.target.closest('#mpt-fs-bar'))return; if(e.target.closest('#mpt-nav'))return; laserClick(); var ry=e.clientY/window.innerHeight; var zone=ry<0.33?'top':ry>0.67?'bot':'mid'; if(dblT){ /* 더블클릭 */ clearTimeout(dblT); dblT=null; if(zone==='top') doAct(C.lzDbl); /* 상단 더블 = 속도증가 */ else if(zone==='bot') doAct(C.lzBotDbl); /* 하단 더블 = 속도감소 */ else doAct(C.lzMid); /* 가운데 더블 = 정지/시작 */ return; } dblT=setTimeout(function(){ dblT=null; if(zone==='top') doAct(C.lzClick); /* 상단 클릭 = 위로 */ else if(zone==='bot') doAct(C.lzBotClick); /* 하단 클릭 = 아래로 */ else doAct(C.lzMid); /* 가운데 클릭 = 정지/시작 */ },260); }); /* ── 마우스 휠 — 위↑아래↓ 수동 스크롤 ── */ fsEl.addEventListener('wheel',function(e){ e.preventDefault(); e.stopPropagation(); var delta=C.dir==='horizontal'?(e.deltaX||e.deltaY):e.deltaY; /* 휠 위 = deltaY 음수 = 위로 스크롤(역방향) */ manualScroll(delta); /* 재생 중이면 일시정지 후 수동조작 허용 */ if(scrolling) pauseScroll(); },{passive:false,capture:true}); /* ── 터치 드래그 + 핀치 줌 ── */ var pinchD=0,pinchS=0; var dragY=0,dragX=0,dragging=false,dragStartPos=0; fsEl.addEventListener('touchstart',function(e){ if(e.target.closest('#mpt-fs-bar'))return; if(e.touches.length===2){ pinchD=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY); pinchS=C.size; dragging=false; return; } dragging=true; dragY=e.touches[0].clientY; dragX=e.touches[0].clientX; dragStartPos=scrollPos; var ry=e.touches[0].clientY/window.innerHeight; hoverZone=ry<.33?'top':ry>.67?'bot':'mid'; },{passive:true}); fsEl.addEventListener('touchmove',function(e){ if(e.target.closest('#mpt-fs-bar'))return; if(e.touches.length===2){ dragging=false; var d=Math.hypot(e.touches[0].clientX-e.touches[1].clientX,e.touches[0].clientY-e.touches[1].clientY); C.size=Math.max(20,Math.min(120,Math.round(pinchS*(d/pinchD)))); applyStyle(); syncSl(); return; } if(!dragging)return; var dy=dragY-e.touches[0].clientY; var dx=dragX-e.touches[0].clientX; var delta=C.dir==='horizontal'?dx:dy; scrollPos=Math.max(0,Math.min(maxScroll(),dragStartPos+delta)); applyScroll(); if(scrolling) pauseScroll(); },{passive:true}); fsEl.addEventListener('touchend',function(e){ if(e.target.closest('#mpt-fs-bar'))return; if(!dragging)return; dragging=false; var dy=Math.abs(dragY-(e.changedTouches[0]?e.changedTouches[0].clientY:dragY)); var dx=Math.abs(dragX-(e.changedTouches[0]?e.changedTouches[0].clientX:dragX)); if(dy<10&&dx<10){ if(dblT){clearTimeout(dblT);dblT=null;doAct(C.lzDbl);} else{dblT=setTimeout(function(){dblT=null;doAct(C.lzClick);},280);} } },{passive:true}); /* ── 키보드 ── */ var laserPageUpTimer=null, laserPageDownTimer=null; document.addEventListener('keydown',function(e){ if(!fsEl.classList.contains('show')){ if((e.ctrlKey||e.metaKey)&&e.key==='Enter'){e.preventDefault();enterFs();} return; } switch(e.key){ case 'Escape': exitFs(); break; case ' ': case 'k': case 'K': e.preventDefault(); togglePause(); break; case 'ArrowUp': case 'ArrowLeft': e.preventDefault(); manualScroll(-150); break; case 'ArrowDown': case 'ArrowRight': e.preventDefault(); manualScroll(150); break; case '+': case '=': C.speedRaw=Math.min(20,C.speedRaw+1); syncSl(); break; case '-': case '_': C.speedRaw=Math.max(1,C.speedRaw-1); syncSl(); break; case 'r': case 'R': stopScroll();scrollPos=0;fsPdfY=0;applyScroll();startScroll(); break; case 'h': case 'H': hintVisible=!hintVisible; lHint.style.opacity=hintVisible?'1':'0'; var kg=$('mpt-key-guide'); if(kg) kg.style.opacity=hintVisible?'1':'0'; break; case 'Enter': if(!scrolling)startScroll(); break; /* ★ 레이저 포인터(프레젠터 리모컨) PageUp/Down 전용 지원 */ case 'PageUp': e.preventDefault(); if(laserPageUpTimer){ /* 400ms 내 두 번 = 더블 → 속도 증가 */ clearTimeout(laserPageUpTimer); laserPageUpTimer=null; doAct('speedup'); } else { /* 단일 → 위로 1/3 이동 */ doAct('scrollup'); laserPageUpTimer=setTimeout(function(){laserPageUpTimer=null;},400); } break; case 'PageDown': e.preventDefault(); if(laserPageDownTimer){ /* 400ms 내 두 번 = 더블 → 속도 감소 */ clearTimeout(laserPageDownTimer); laserPageDownTimer=null; doAct('speeddown'); } else { /* 단일 → 아래로 1/3 이동 */ doAct('scrolldown'); laserPageDownTimer=setTimeout(function(){laserPageDownTimer=null;},400); } break; /* F5: 일부 프레젠터 리모컨 전송 → 일시정지/재개 */ case 'F5': e.preventDefault(); togglePause(); break; /* b/B: 블랙아웃 버튼 (로지텍 등) → 일시정지 */ case 'b': case 'B': togglePause(); break; case 'n': case 'N': if(C.mode==='pdf'&&pdfDoc&&pdfPage<pdfTotal){pdfPage++;fsPdfY=0;renderFsPdf(pdfPage,null);} break; case 'p': case 'P': if(C.mode==='pdf'&&pdfDoc&&pdfPage>1){pdfPage--;fsPdfY=0;renderFsPdf(pdfPage,null);} break; } }); /* ── 초기화 ── */ loadFromUrl(); loadData(); initOpts(); updateStatus(); updateHint(); })(); </script> 모두의계산기/프롬포터_19 0-1.kr/19 계산기 모두 발표 웹앱 프롬프터 최매슨생 https://0-1.kr/19 https://0-1.kr/19#entry19comment Thu, 12 Nov 2020 15:26:48 +0900 https://0-1.kr/18 <p data-ke-size="size16">&nbsp;</p> <p></p> <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/pako/2.1.0/pako.min.js"></script> <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/qrcodejs/1.0.0/qrcode.min.js"></script> <div id="trip-app-root"> <style> :root { --bg:#f0f2f5; --card:#fff; --header:#0a0f1e; --accent:#2563eb; --accent2:#10b981; --accent3:#f59e0b; --danger:#ef4444; --text:#0f172a; --text2:#64748b; --border:#e2e8f0; --input-bg:#f8fafc; --shadow:0 2px 12px rgba(0,0,0,.07); --shadow-lg:0 8px 32px rgba(0,0,0,.12); --radius:16px; --font:'Pretendard',-apple-system,sans-serif; } [data-dark]{--bg:#0d1117;--card:#161b22;--header:#010409;--text:#e6edf3;--text2:#7d8590;--border:#30363d;--input-bg:#0d1117;--shadow:0 2px 12px rgba(0,0,0,.4);} *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;} #trip-app-root{width:100%;max-width:100%;box-sizing:border-box;overflow-x:hidden;font-family:var(--font);background:var(--bg);color:var(--text);} @media (max-width:600px){ /* 티스토리 게시글 기본 좌우 여백을 살짝 줄여 화면을 조금 더 넓게 사용 (완전히 꽉 채우지는 않음) */ #trip-app-root{margin-left:-8px;margin-right:-8px;width:calc(100% + 16px);max-width:calc(100% + 16px);} } .app-header{background:var(--header);padding:12px 8px 8px;position:relative;box-shadow:0 2px 20px rgba(0,0,0,.3);box-sizing:border-box;width:100%;} .header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:nowrap;gap:6px;} .header-title-wrap{display:flex;flex-direction:column;flex-shrink:0;gap:1px;} .header-title{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.3px;display:flex;align-items:center;gap:5px;} .header-title .title-emoji{display:inline-block;width:18px;flex-shrink:0;} .header-version{font-size:9px;font-weight:500;color:#94a3b8;padding-left:23px;} /* 헤더 액션 - 높이 완전 정렬 */ .header-actions{display:flex;gap:4px;align-items:center;flex-wrap:nowrap;height:30px;} .hbtn{height:30px;padding:0 8px;border:none;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;} .hbtn:active{transform:scale(.95);} .hbtn-blue{background:var(--accent);color:#fff;} .hbtn-green{background:var(--accent2);color:#fff;} .hbtn-amber{background:var(--accent3);color:#fff;} .hbtn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);} .hbtn-red{background:var(--danger);color:#fff;} .hbtn-reply{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;} /* tooltip-wrap도 높이 맞춤 */ .tooltip-wrap{position:relative;display:inline-flex;align-items:center;height:30px;} /* 말풍선 툴팁 */ .tooltip-box{display:none;position:absolute;top:calc(100% + 6px);right:0;background:#1e293b;color:#fff;font-size:10px;padding:8px 10px;border-radius:10px;white-space:normal;word-break:keep-all;z-index:9999;line-height:1.7;width:200px;box-shadow:0 4px 16px rgba(0,0,0,.35);} .tooltip-box::before{content:'';position:absolute;top:-5px;right:12px;border:5px solid transparent;border-bottom-color:#1e293b;border-top:none;} .global-tap-tip{display:none;position:fixed;z-index:99999;background:#1e293b;color:#fff;font-size:11px;padding:8px 11px;border-radius:10px;max-width:220px;line-height:1.6;box-shadow:0 4px 16px rgba(0,0,0,.35);pointer-events:none;word-break:keep-all;} .tooltip-wrap:hover .tooltip-box,.tooltip-wrap.tip-active .tooltip-box{display:block;} .progress-wrap{display:flex;align-items:center;gap:8px;margin-top:8px;} .progress-bar-bg{flex:1;height:4px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;} .progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:99px;transition:width .4s cubic-bezier(.34,1.56,.64,1);} .progress-label{font-size:10px;color:#94a3b8;font-weight:600;white-space:nowrap;} /* 26년목표 / 8월목표 헤더 미니 표시 */ .wake-row{display:flex;align-items:center;gap:5px;row-gap:6px;margin-top:8px;width:100%;box-sizing:border-box;flex-wrap:wrap;} .hdr-goal-mini{display:flex;flex-direction:column;justify-content:center;gap:1px;height:28px;flex:1 1 120px;min-width:100px;} .hdr-goal-mini-full{width:100%;height:auto;gap:5px;padding:2px 0;} .hdr-goal-mini-full .hdr-goal-row{gap:6px;} .hdr-goal-mini-full .hdr-goal-label{font-size:10.5px;} .hdr-goal-mini-full .hdr-goal-input{font-size:12px!important;padding:2px 0!important;border-bottom:1px solid rgba(251,191,36,.35)!important;} .hdr-goal-row{display:flex;align-items:center;gap:3px;line-height:1.15;} .hdr-goal-label{font-size:8.5px;font-weight:800;color:#fbbf24;white-space:nowrap;flex-shrink:0;} .hdr-goal-input{flex:1;min-width:0;border:none!important;border-bottom:1px solid rgba(251,191,36,.25)!important;background:transparent!important;outline:none!important;box-shadow:none!important;font-family:var(--font)!important;font-size:9px!important;font-weight:700!important;color:#fde68a!important;padding:1px 0!important;margin:0!important;-webkit-appearance:none!important;appearance:none!important;height:auto!important;min-height:0!important;border-radius:0!important;} .hdr-goal-input::placeholder{color:rgba(253,230,138,.45)!important;font-weight:400!important;} /* 자동저장 상태 */ .autosave-status{font-size:10px;color:var(--text2);padding:2px 4px;} .autosave-under{font-size:9px;color:var(--text2);padding:2px 4px;margin-top:2px;} .app-body{width:100%;max-width:100%;box-sizing:border-box;padding:8px 3px 60px;overflow-x:hidden;} /* 타이틀 */ .trip-title-wrap{background:var(--card);border-radius:var(--radius);padding:10px 12px;margin-bottom:10px;box-shadow:var(--shadow);border:1.5px solid #bfdbfe;box-sizing:border-box;} .trip-title-input{width:100%;border:none;font-size:15px;font-weight:800;outline:none;background:transparent;color:var(--text);font-family:var(--font);box-sizing:border-box;-webkit-appearance:none;} .trip-title-input::placeholder{color:#94a3b8;font-weight:500;font-size:13px;} /* 공유 바 */ .share-bar{background:var(--card);border-radius:var(--radius);padding:10px 12px;margin-bottom:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;box-sizing:border-box;} .share-row{display:flex;gap:6px;} .share-url-input{flex:1;height:34px;padding:0 10px;border:1.5px solid var(--border);border-radius:9px;font-size:11px;background:var(--input-bg);color:var(--text2);font-family:var(--font);outline:none;min-width:0;-webkit-appearance:none;} .share-btn-row{display:flex;gap:4px;flex-wrap:wrap;align-items:center;} .share-save-btn{height:34px;padding:0 12px;background:var(--accent);color:#fff;border:none;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap;-webkit-appearance:none;display:flex;align-items:center;gap:2px;} .share-save-btn:active{opacity:.85;} /* 섹션 카드 */ .section-card{background:var(--card);border-radius:var(--radius);margin-bottom:10px;box-shadow:var(--shadow);overflow:hidden;border:1.5px solid var(--border);transition:border-color .2s;box-sizing:border-box;} .section-card.completed{border-color:var(--accent2);} .section-card.completed .sec-num-badge{background:var(--accent2);} /* 완료 시: 제목에 취소선+회색, sec-collapsed와 함께 접힘 */ .sec-title-input.done-title{color:#94a3b8!important;text-decoration:line-through;text-decoration-color:#94a3b8;} /* sec-collapsed(완료 or 번호클릭): 헤더만 보이고 바디 숨김 */ .section-card.sec-collapsed .sec-body{display:none;} .section-card.sec-collapsed .sec-header{border-bottom:none;} .section-card.sec-collapsed{opacity:.85;} .section-card.sec-collapsed .sec-collapse-hint{display:block;} /* 진한 화살표 */ .divider-arrow{text-align:center;color:#94a3b8;font-size:20px;margin:-2px 0 3px;display:block;font-weight:900;} /* 섹션 헤더 */ .sec-header{padding:9px 10px 8px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border);min-width:0;} .sec-num-badge{width:34px;height:34px;padding:0;border-radius:9px;background:var(--accent);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s;cursor:pointer;line-height:1.15;} .sec-num-badge .badge-main{font-size:10px;font-weight:800;} .sec-num-badge .badge-sub{font-size:8px;font-weight:600;opacity:.85;} .sec-num-badge:active{transform:scale(.9);} .sec-title-input{flex:1;min-width:0;border:none;font-size:13px;font-weight:700;outline:none;background:transparent;color:var(--text);font-family:var(--font);overflow:hidden;text-overflow:ellipsis;-webkit-appearance:none;} .sec-actions{display:flex;gap:3px;align-items:center;flex-shrink:0;} .sec-act-btn{width:26px;height:26px;border:1px solid var(--border);border-radius:7px;background:var(--input-bg);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;color:var(--text2);flex-shrink:0;-webkit-appearance:none;} .sec-act-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);} .complete-btn{font-size:13px!important;font-weight:700!important;} .complete-btn.done{background:var(--accent2)!important;color:#fff!important;border-color:var(--accent2)!important;} .section-card.completed .sec-header{border-bottom:1px solid var(--border);} .section-card.completed{opacity:1;} .sec-collapse-hint{font-size:9px;color:var(--text2);padding:0 10px 6px;display:none;text-align:right;} .section-card.sec-collapsed .sec-body{display:none;} .section-card.sec-collapsed .sec-header{border-bottom:none;} .section-card.sec-collapsed{opacity:.75;} .section-card.sec-collapsed .sec-collapse-hint{display:block;} .sec-rel-tag{display:none !important;} /* 오늘 날짜 헤더 */ /* 패턴탭 */ .postit-theme-row{border-top:1px solid var(--border);padding-top:8px;margin-top:10px;} .postit-theme-label{font-size:10px;font-weight:700;color:var(--text2);margin-bottom:6px;} .pattern-hint{font-size:10px;color:var(--text2);background:var(--input-bg);border-radius:8px;padding:7px 9px;margin-bottom:10px;line-height:1.6;} .pattern-cat-block{border:1.5px solid var(--border);border-radius:10px;padding:8px 9px;margin-bottom:8px;} .pattern-cat-header{display:flex;align-items:center;gap:6px;cursor:pointer;margin-bottom:6px;} .pattern-cat-arrow{font-size:9px;color:var(--text2);flex-shrink:0;width:10px;} .pattern-cat-title{font-size:11px;font-weight:800;color:var(--accent);} .pattern-cat-add-btn{width:18px;height:18px;flex-shrink:0;border-radius:50%;border:1px dashed var(--accent);background:transparent;color:var(--accent);font-size:11px;line-height:1;cursor:pointer;padding:0;-webkit-appearance:none;} .pattern-cat-summary{margin-left:auto;font-size:9px;font-weight:700;color:var(--text2);background:var(--input-bg);padding:2px 7px;border-radius:20px;flex-shrink:0;} .pattern-cat-block.pattern-collapsed .pattern-cat-header{margin-bottom:0;} .pattern-cat-block.pattern-collapsed .pattern-cat-body{display:none;} .pattern-row{display:flex;align-items:center;gap:6px;margin-bottom:5px;} .pattern-chk{width:16px;height:16px;flex-shrink:0;accent-color:var(--accent);} .pattern-label-input{flex:1;min-width:0;height:26px;border:none !important;border-bottom:1px solid var(--border) !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;color:var(--text);font-size:12px;font-weight:600;padding:2px 2px;font-family:var(--font);-webkit-appearance:none;outline:none !important;} .pattern-label-input::placeholder{color:#b0b8c8;font-weight:400;font-size:11px;} .pattern-label-input:focus{border:none !important;border-bottom:1.5px solid var(--accent) !important;box-shadow:none !important;outline:none !important;} .pattern-count{font-size:10px;font-weight:700;color:var(--text2);flex-shrink:0;min-width:34px;text-align:right;} .pattern-del-btn{width:22px;height:22px;flex-shrink:0;border:none;background:transparent;color:var(--text2);font-size:12px;cursor:pointer;} /* 작업순서탭 */ .ws-toolbar{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;align-items:center;} .ws-dir-btn,.ws-add-btn{height:30px;padding:0 12px;border-radius:8px;border:1.5px solid var(--border);background:var(--input-bg);color:var(--text);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} .ws-add-btn{background:var(--accent);color:#fff;border-color:var(--accent);} .ws-flow{display:flex;flex-direction:column;align-items:stretch;} body.view-pc .ws-flow:not(.ws-horizontal){max-height:460px;overflow-y:auto;padding-right:2px;} .ws-flow.ws-horizontal{flex-direction:row;flex-wrap:nowrap;align-items:center;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;} .ws-box{border:1.5px solid;border-radius:10px;padding:0;margin-bottom:0;box-sizing:border-box;overflow:hidden;transition:width .15s;} .ws-flow:not(.ws-horizontal) .ws-box{width:100%;} .ws-flow.ws-horizontal .ws-box{width:165px;flex-shrink:0;} .ws-flow.ws-horizontal .ws-box.ws-done{width:86px;} .ws-box-topline{display:flex;align-items:center;gap:6px;padding:7px 8px;border-bottom:1px solid;} .ws-done-chk-wrap{flex-shrink:0;display:flex;align-items:center;} .ws-done-chk{width:15px;height:15px;accent-color:#16a34a;cursor:pointer;} .ws-box-title{flex:1;min-width:0;height:22px;border:none;background:transparent;color:var(--text);font-size:12px;font-weight:700;padding:0;font-family:var(--font);-webkit-appearance:none;} .ws-box-title::placeholder{color:#b0b8c8;font-weight:400;} .ws-box-del{width:20px;height:20px;flex-shrink:0;border:none;background:transparent;color:var(--text2);font-size:11px;cursor:pointer;} .ws-box-mid{padding:7px 8px 9px;} .ws-box-body{width:100%;min-height:52px;border:none;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font-size:11px;padding:2px 0 4px;font-family:var(--font);resize:vertical;box-sizing:border-box;line-height:1.6;} .ws-box-body::placeholder{color:#b0b8c8;} .ws-box-body:focus{outline:none;border-bottom-color:var(--accent);} .ws-done-badge{font-size:10px;font-weight:800;color:#16a34a;flex-shrink:0;} .ws-box.ws-done{opacity:.8;} .ws-box.ws-done .ws-box-title{text-decoration:line-through;color:var(--text2);} /* 화살표 구간: 세로모드는 위→아래로 길게, 가로모드는 좌→우 + 위/아래 부연설명 */ .ws-arrow-seg{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:2px 0;min-height:64px;} .ws-flow.ws-horizontal .ws-arrow-seg{flex-direction:column;flex-shrink:0;padding:0 4px;align-self:center;justify-content:center;min-height:0;min-width:64px;} .ws-ann-slot{display:flex;align-items:center;justify-content:center;min-height:1px;width:130px;flex-shrink:0;} .ws-flow.ws-horizontal .ws-ann-slot{width:auto;height:58px;} .ws-flow.ws-horizontal .ws-ann-slot-top{margin-bottom:2px;} .ws-flow.ws-horizontal .ws-ann-slot-bottom{margin-top:2px;} .ws-arrow-core{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;position:relative;} .ws-flow:not(.ws-horizontal) .ws-arrow-core{min-height:50px;justify-content:center;} .ws-arrow-v{position:relative;display:block;width:4px;height:40px;background:linear-gradient(180deg,var(--accent),var(--accent2,var(--accent)));border-radius:3px;box-shadow:0 1px 4px rgba(37,99,235,.3);} .ws-arrow-v::after{content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid var(--accent2,var(--accent));} .ws-arrow-h{position:relative;display:block;width:40px;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2,var(--accent)));border-radius:3px;box-shadow:0 1px 4px rgba(37,99,235,.3);} .ws-arrow-h::after{content:'';position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:9px solid var(--accent2,var(--accent));} .ws-insert-btn{width:20px;height:20px;border-radius:50%;border:1px dashed var(--accent);background:transparent;color:var(--accent);font-size:11px;cursor:pointer;line-height:1;flex-shrink:0;} .ws-ann-box{border:1.3px dashed;border-radius:8px;padding:4px 20px 4px 6px;width:130px;flex-shrink:0;box-sizing:border-box;position:relative;} .ws-ann-del{position:absolute;top:2px;right:2px;width:16px;height:16px;border:none;background:transparent;color:var(--text2);font-size:9px;cursor:pointer;line-height:1;} .ws-ann-body{width:100%;min-height:34px;border:none;background:transparent;color:var(--text2);font-size:10px;padding:0;font-family:var(--font);resize:vertical;box-sizing:border-box;line-height:1.5;} .ws-ann-body::placeholder{color:#c2c9d6;} .ws-ann-body:focus{outline:none;} .pc-box-title{display:none;} body.view-pc .pc-box-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--text);margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid var(--accent);} .pc-swap-btn{display:none;} body.view-pc .pc-swap-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:22px;border-radius:6px;border:1.3px solid var(--border);background:var(--input-bg);color:var(--text2);font-size:12px;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} /* PC모드: 섹션 하나에 5개 탭을 아코디언 묶음으로 표시 */ body.view-pc .nav-tabs{display:none !important;} body.view-pc .sec-body{display:flex;flex-direction:column;gap:10px;} .pc-pair-group{display:contents;} .pc-pair-body{display:contents;} body.view-pc .pc-pair-group{display:flex;flex-direction:column;gap:8px;} body.view-pc .pc-pair-body{display:flex;gap:12px;align-items:stretch;} body.view-pc .pc-pair-body-single{display:block;} body.view-pc .pc-pair-body .content-area{display:block !important;flex:2;min-width:0;border:1px solid var(--border);border-radius:10px;padding:10px;margin:0;} body.view-pc .pc-pair-body .content-area + .content-area{flex:1;} body.view-pc .pc-pair-group.pc-swapped .pc-pair-body .content-area{flex:1;} body.view-pc .pc-pair-group.pc-swapped .pc-pair-body .content-area + .content-area{flex:2;} /* 3/3 전체화면 모드: 한쪽은 전체폭, 다른 한쪽은 숨김(제목줄의 재오픈 버튼으로 복귀) */ body.view-pc .pc-pair-group.pc-full-a .pc-pair-body .content-area:first-child{flex:1;} body.view-pc .pc-pair-group.pc-full-a .pc-pair-body .content-area+.content-area{display:none !important;} body.view-pc .pc-pair-group.pc-full-b .pc-pair-body .content-area:first-child{display:none !important;} body.view-pc .pc-pair-group.pc-full-b .pc-pair-body .content-area+.content-area{flex:1;} .pc-reopen-btn{display:none;} body.view-pc .pc-pair-group.pc-full-a .pc-reopen-b, body.view-pc .pc-pair-group.pc-full-b .pc-reopen-a{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 8px;border-radius:6px;border:1.3px dashed var(--accent);background:transparent;color:var(--accent);font-size:10px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;margin-left:auto;} body.view-pc .pc-pair-body-single .content-area{max-height:440px;overflow-y:auto;} body.view-pc [id^="t1-"]{display:none !important;} body.view-pc .pc-pair-group.pc-row-collapsed .pc-pair-body{display:none;} .pc-row-header{display:none;} body.view-pc .pc-row-header{display:flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:9px;cursor:pointer;font-size:11.5px;font-weight:800;color:#1e293b;user-select:none;transition:opacity .15s;} body.view-pc .pc-hdr-vp{background:linear-gradient(135deg,#fef3c7,#fef9e7);border:1.5px solid #fbbf24;} body.view-pc .pc-hdr-pl{background:linear-gradient(135deg,#dbeafe,#eff6ff);border:1.5px solid #60a5fa;} body.view-pc .pc-hdr-wo{background:linear-gradient(135deg,#ede9fe,#f5f3ff);border:1.5px solid #a78bfa;} body.view-pc .pc-pair-group.pc-row-collapsed .pc-row-header{opacity:.6;} [data-dark] body.view-pc .pc-hdr-vp{background:rgba(251,191,36,.12);color:var(--text);} [data-dark] body.view-pc .pc-hdr-pl{background:rgba(96,165,250,.12);color:var(--text);} [data-dark] body.view-pc .pc-hdr-wo{background:rgba(167,139,250,.12);color:var(--text);} /* 신규 페어행 헤더 색상 */ body.view-pc .pc-hdr-qz{background:linear-gradient(135deg,#fee2e2,#fef2f2);border:1.5px solid #f87171;} body.view-pc .pc-hdr-tm{background:linear-gradient(135deg,#e0e7ff,#eef2ff);border:1.5px solid #818cf8;} [data-dark] body.view-pc .pc-hdr-qz{background:rgba(248,113,113,.12);color:var(--text);} [data-dark] body.view-pc .pc-hdr-tm{background:rgba(129,140,248,.12);color:var(--text);} /* 오답노트 */ .wn-hint{font-size:10.5px;color:var(--text2);background:var(--input-bg);border-radius:8px;padding:7px 9px;margin-bottom:8px;line-height:1.5;} .wn-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;} .wn-card{border:1.5px solid var(--border);border-radius:10px;padding:8px;background:var(--input-bg);} .wn-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;} .wn-card-label{font-size:10.5px;font-weight:800;color:#ef4444;} .wn-card-del{width:20px;height:20px;border:none;border-radius:6px;background:transparent;color:#94a3b8;font-size:11px;cursor:pointer;-webkit-appearance:none;} .wn-card-del:active{color:#ef4444;} .wn-card textarea{margin-bottom:5px;min-height:32px;} .wn-card textarea:last-child{margin-bottom:0;} /* 암기카드 */ .fc-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;} .fc-card{border:1.5px solid var(--border);border-radius:10px;padding:8px;background:var(--input-bg);} .fc-row-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;} .fc-label{font-size:10.5px;font-weight:800;color:#6366f1;} .fc-front-input{width:100%;height:30px;padding:0 8px;border:1.5px solid var(--border);border-radius:7px;font-size:12px;font-weight:700;background:var(--card);color:var(--text);font-family:var(--font);outline:none;-webkit-appearance:none;box-sizing:border-box;margin-bottom:5px;} .fc-flip-wrap{display:flex;flex-direction:column;gap:5px;} .fc-flip-btn{align-self:flex-start;height:24px;padding:0 10px;border:1.3px solid #a5b4fc;border-radius:20px;background:#eef2ff;color:#6366f1;font-size:10px;font-weight:700;cursor:pointer;-webkit-appearance:none;} [data-dark] .fc-flip-btn{background:rgba(99,102,241,.15);} .fc-back-input{min-height:34px;} /* 뽀모도로 */ .pomo-wrap{display:flex;flex-direction:column;align-items:center;padding:10px 0 4px;} .pomo-mode-label{font-size:12px;font-weight:800;color:var(--text2);margin-bottom:4px;} .pomo-display{font-size:38px;font-weight:900;letter-spacing:1px;color:var(--text);font-variant-numeric:tabular-nums;margin-bottom:10px;} .pomo-btn-row{display:flex;gap:6px;margin-bottom:8px;} .pomo-session-count{font-size:11px;color:var(--text2);} .pomo-session-count b{color:var(--accent);font-size:13px;} /* D-day */ .dday-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;} .dday-item{display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--input-bg);} .dday-badge{flex-shrink:0;min-width:52px;text-align:center;padding:4px 6px;border-radius:8px;background:#fee2e2;color:#dc2626;font-weight:900;font-size:13px;} .dday-badge.dday-past{background:#f1f5f9;color:#94a3b8;} .dday-badge.dday-today{background:#fef3c7;color:#d97706;} [data-dark] .dday-badge{background:rgba(220,38,38,.15);} [data-dark] .dday-badge.dday-past{background:rgba(148,163,184,.12);} [data-dark] .dday-badge.dday-today{background:rgba(217,119,6,.15);} .dday-info{flex:1;min-width:0;} .dday-info-label{font-size:12px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .dday-info-date{font-size:10px;color:var(--text2);} .dday-del{width:22px;height:22px;border:none;border-radius:6px;background:transparent;color:#94a3b8;font-size:12px;cursor:pointer;flex-shrink:0;-webkit-appearance:none;} .dday-add-row{display:flex;gap:5px;} .dday-label-input{flex:1;min-width:0;height:30px;padding:0 8px;border:1.5px solid var(--border);border-radius:7px;font-size:11px;background:var(--card);color:var(--text);font-family:var(--font);outline:none;-webkit-appearance:none;box-sizing:border-box;} .dday-date-input{width:120px;height:30px;padding:0 6px;border:1.5px solid var(--border);border-radius:7px;font-size:11px;background:var(--card);color:var(--text);font-family:var(--font);outline:none;-webkit-appearance:none;box-sizing:border-box;} .dday-add-btn{width:34px!important;height:30px!important;padding:0!important;flex-shrink:0;} /* 영상보기 모드 선택 */ .vmode-select{display:flex;gap:5px;margin-bottom:8px;} .vmode-btn{flex:1;height:32px;border:1.5px solid var(--border);border-radius:9px;background:var(--input-bg);color:var(--text2);font-size:10.5px;font-weight:800;cursor:pointer;font-family:var(--font);-webkit-appearance:none;white-space:nowrap;padding:0 2px;} .vmode-btn.active{background:#fbbf24;border-color:#fbbf24;color:#78350f;} .vmode-desc{font-size:10.5px;color:var(--text2);background:var(--input-bg);border-radius:8px;padding:7px 9px;margin-bottom:8px;line-height:1.5;} /* 유튜브 재생목록 */ .video-playlist-wrap{margin-top:2px;} .video-playlist-list{display:flex;flex-direction:column;gap:5px;} .vplist-item{display:flex;align-items:center;gap:6px;border:1.3px solid var(--border);border-radius:9px;padding:5px 7px;background:var(--input-bg);} .vplist-play-btn{width:24px;height:24px;flex-shrink:0;border:none;border-radius:50%;background:#fbbf24;color:#78350f;font-size:11px;cursor:pointer;-webkit-appearance:none;display:flex;align-items:center;justify-content:center;padding:0;} .vplist-label{flex:1;min-width:0;font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .vplist-star-btn{width:22px;height:22px;flex-shrink:0;border:none;background:transparent;color:#cbd5e1;font-size:14px;cursor:pointer;-webkit-appearance:none;padding:0;} .vplist-star-btn.fav{color:#f59e0b;} .vplist-del-btn{width:20px;height:20px;flex-shrink:0;border:none;background:transparent;color:#94a3b8;font-size:11px;cursor:pointer;-webkit-appearance:none;padding:0;} .video-plist-more{width:100%;height:26px;margin-top:5px;border:1.3px dashed var(--border);border-radius:8px;background:transparent;color:var(--text2);font-size:10.5px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} /* 포스T잇 쪽 미니 재생목록 */ .postit-plist-toggle-row{margin-bottom:6px;} .postit-plist-toggle-btn{width:100%;height:28px;border:1.3px solid #fde68a;border-radius:8px;background:#fffbeb;color:#b45309;font-size:11px;font-weight:800;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} [data-dark] .postit-plist-toggle-btn{background:rgba(251,191,36,.1);color:#fbbf24;border-color:rgba(251,191,36,.3);} .postit-plist-mini{border:1.3px solid var(--border);border-radius:9px;padding:8px;margin-bottom:8px;background:var(--card);} /* 영상파일 재생 */ .vfile-pick-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border:1.5px dashed var(--border);border-radius:10px;background:var(--input-bg);color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;margin-bottom:8px;} .vfile-player-wrap{} .vfile-player{width:100%;border-radius:10px;background:#000;display:block;margin-bottom:6px;max-height:280px;} .vfile-speed-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap;} .vfile-speed-label{font-size:10px;color:var(--text2);font-weight:700;margin-right:2px;} .vfile-speed-btn{height:24px;padding:0 8px;border:1.3px solid var(--border);border-radius:20px;background:var(--input-bg);color:var(--text2);font-size:10px;font-weight:700;cursor:pointer;-webkit-appearance:none;} .vfile-speed-btn.vfile-speed-active{background:#6366f1;border-color:#6366f1;color:#fff;} /* 사진 불러오기 */ .photo-stage-wrap{} .photo-stage{position:relative;width:100%;height:300px;overflow:hidden;border-radius:10px;background:#000;touch-action:none;margin-bottom:8px;} .photo-stage-img{position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:contain;transform:translate(-50%,-50%);user-select:none;-webkit-user-drag:none;pointer-events:none;} .photo-stage-img.photo-blurred{filter:blur(7px) brightness(.7);} .photo-note-overlay{position:absolute;left:0;right:0;bottom:0;min-height:18%;max-height:55%;overflow-y:auto;background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15) 70%, transparent);color:#fff;font-size:13px;line-height:1.55;padding:10px 10px 8px;outline:none;font-family:var(--font);text-shadow:0 1px 3px rgba(0,0,0,.6);} .photo-note-overlay:empty:before{content:attr(data-placeholder);color:rgba(255,255,255,.55);} .photo-stage-tools{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;} .photo-tool-btn{height:28px;padding:0 10px;border:1.3px solid var(--border);border-radius:8px;background:var(--input-bg);color:var(--text2);font-size:11px;font-weight:700;cursor:pointer;-webkit-appearance:none;} .photo-tool-btn.active{background:#6366f1;border-color:#6366f1;color:#fff;} .photo-thumb-strip{display:flex;gap:6px;overflow-x:auto;padding:2px 0;} .photo-thumb{width:44px;height:44px;object-fit:cover;border-radius:7px;border:2px solid transparent;cursor:pointer;flex-shrink:0;opacity:.6;} .photo-thumb.active{border-color:#fbbf24;opacity:1;} /* 코넬노트 */ body.view-pc .pc-hdr-cornell{background:linear-gradient(135deg,#d1fae5,#ecfdf5);border:1.5px solid #34d399;} [data-dark] body.view-pc .pc-hdr-cornell{background:rgba(52,211,153,.12);color:var(--text);} .cornell-top{display:flex;gap:8px;margin-bottom:8px;} .cornell-cue{flex:0 0 30%;min-width:80px;min-height:120px;} .cornell-note{flex:1;min-width:0;min-height:120px;} .cornell-summary{width:100%;min-height:48px;background:linear-gradient(135deg,#f0fdf4,#fff);border-color:#86efac!important;} @media (max-width:420px){ .cornell-top{flex-direction:column;} .cornell-cue{flex:none;min-height:60px;} .cornell-note{min-height:90px;} } .pc-row-arrow{font-size:9px;color:#64748b;} @media (max-width:900px){ body.view-pc .pc-pair-body{flex-direction:column;} body.view-pc .pc-pair-group.pc-swapped .pc-pair-body .content-area, body.view-pc .pc-pair-body .content-area{flex:1 1 auto;} body.view-pc .pc-row-header{font-size:10px;gap:4px;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .nav-tabs{padding:4px 4px;gap:2px;} .nav-tab{font-size:9.5px;padding:6px 1px;} } .today-nav-wrap{display:flex;align-items:center;gap:6px;margin:2px 0 12px;} .today-nav-arrow{width:34px;height:52px;flex-shrink:0;border:1.5px solid var(--border);border-radius:10px;background:var(--input-bg);color:var(--text2);font-size:16px;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} .today-nav-today-btn{width:40px;height:52px;flex-shrink:0;border:1.5px solid var(--border);border-radius:10px;background:var(--input-bg);color:var(--accent);font-size:11px;font-weight:800;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} .today-nav-cal-btn{width:30px;height:52px;flex-shrink:0;border:1.5px solid var(--border);border-radius:10px;background:var(--input-bg);color:var(--text2);font-size:12px;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} .today-nav-label-col{flex:1;min-width:0;height:52px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:5px 10px;border-radius:12px;background:linear-gradient(135deg,#fef3c7,#fff);border:2px solid #fbbf24;box-shadow:var(--shadow);} .today-nav-label-col:focus-within{border-color:var(--accent);} [data-dark] .today-nav-label-col{background:rgba(245,158,11,.1);} .today-nav-sub{width:100%;border:none!important;background:transparent!important;outline:none!important;box-shadow:none!important;font-family:var(--font)!important;font-size:10px!important;font-weight:700!important;color:#b45309!important;padding:0!important;margin:0!important;-webkit-appearance:none!important;appearance:none!important;text-align:center;letter-spacing:-.2px;height:auto!important;min-height:0!important;border-radius:0!important;} .today-nav-sub::placeholder{color:#b45309;opacity:.7;font-weight:700;} [data-dark] .today-nav-sub{color:#fbbf24!important;opacity:.85;} [data-dark] .today-nav-sub::placeholder{color:#fbbf24;opacity:.6;} .today-nav-label{width:100%;border:none!important;background:transparent!important;outline:none!important;box-shadow:none!important;font-family:var(--font)!important;font-size:14px!important;font-weight:900!important;color:#92400e!important;padding:0!important;margin:0!important;-webkit-appearance:none!important;appearance:none!important;letter-spacing:-.3px;cursor:text;text-align:center;height:auto!important;min-height:0!important;border-radius:0!important;} .today-nav-label::placeholder{color:#92400e;opacity:1;font-weight:900;} [data-dark] .today-nav-label{color:#fbbf24!important;} [data-dark] .today-nav-label::placeholder{color:#fbbf24;opacity:.9;} .view-badge-wrap{display:none;flex-wrap:wrap;gap:5px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px;margin-bottom:12px;box-shadow:var(--shadow);} .view-date-badge{flex:0 0 calc(16.66% - 5px);min-width:44px;height:28px;border-radius:7px;border:1.3px solid var(--border);background:var(--input-bg);color:var(--text2);font-size:10.5px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} .view-date-badge.has-content{background:linear-gradient(135deg,#dbeafe,#eff6ff);border-color:#60a5fa;color:#1e3a8a;font-weight:800;} .view-date-badge.no-content{opacity:.4;} .view-date-badge.is-today{border-color:#fbbf24;border-width:2px;box-shadow:0 0 0 2px rgba(251,191,36,.25);} [data-dark] .view-date-badge.has-content{background:rgba(96,165,250,.14);color:#93c5fd;} .view-badge-empty{width:100%;text-align:center;font-size:11px;color:var(--text2);padding:8px;} @media (max-width:380px){ .today-nav-wrap{gap:4px;} .today-nav-label{font-size:12px;} .today-nav-sub{font-size:9px;} .today-nav-arrow{height:46px;width:28px;} .today-nav-today-btn{height:46px;width:34px;} .today-nav-cal-btn{height:46px;width:26px;} .today-nav-label-col{height:46px;padding:4px 6px;} body.view-pc .pc-row-header{font-size:9px;} } /* 탭 */ .nav-tabs{display:flex;background:var(--input-bg);padding:5px 8px;gap:4px;} .nav-tab{flex:1;min-width:0;padding:6px 2px;border:none;border-radius:8px;background:none;font-size:11px;font-weight:700;color:var(--text2);cursor:pointer;font-family:var(--font);transition:all .15s;-webkit-appearance:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .nav-tab.active{background:var(--card);color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.1);} .content-area{display:none;padding:10px 12px;} .content-area.active{display:block;} /* 입력 공통 - placeholder 연회색, 실제 입력 진한검은색+굵게 */ .field-row{margin-bottom:8px;} .compact-input,.compact-select,.compact-textarea{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:8px 10px;font-size:13px;background:var(--input-bg);color:#0f172a;font-family:var(--font);outline:none;transition:border-color .15s;box-sizing:border-box;-webkit-appearance:none;font-weight:700;} .compact-input::placeholder,.compact-textarea::placeholder{color:#b0b8c8;font-weight:400;font-size:12px;} .compact-input:focus,.compact-select:focus,.compact-textarea:focus{border-color:var(--accent);background:#fff;color:#0f172a;} .compact-textarea{resize:none;min-height:52px;line-height:1.5;} .compact-textarea.memo-big{min-height:68px;resize:vertical;touch-action:none;min-width:0;box-sizing:border-box;overflow:hidden;transition:height .1s ease;} .postit-box{display:grid;grid-template-columns:repeat(var(--pcols,1),1fr);gap:8px;margin-bottom:8px;} body.view-pc .postit-box{max-height:500px;overflow-y:auto;padding-right:2px;} .postit-note{background:linear-gradient(135deg,#fffbeb,#fff);border:1.5px solid #fde68a;border-radius:10px;padding:6px 8px;min-width:0;} [data-dark] .postit-note{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.35);} .postit-col-select{display:flex;gap:4px;margin-bottom:8px;} .postit-col-btn{flex:1;height:26px;border:1.5px solid var(--border);border-radius:7px;background:var(--input-bg);color:var(--text2);font-size:10px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} .postit-col-btn.active{background:#f59e0b;border-color:#f59e0b;color:#fff;} .postit-swatch-row{display:flex;gap:4px;margin-top:2px;align-items:center;min-height:16px;} .postit-swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;flex-shrink:0;-webkit-appearance:none;} /* 포스T잇 영상(유튜브) 패널 */ .postit-video-panel{margin-bottom:6px;} .postit-video-url-row{display:flex;gap:4px;margin-bottom:6px;} .postit-video-url-input{flex:1;min-width:0;height:28px;padding:0 8px;border:1.5px solid var(--border);border-radius:8px;font-size:11px;background:#fff;color:var(--text);font-family:var(--font);outline:none;-webkit-appearance:none;box-sizing:border-box;} [data-dark] .postit-video-url-input{background:var(--input-bg);} .postit-video-url-input:focus{border-color:var(--accent);} .postit-video-bm-btn{width:auto;min-width:28px;height:28px;padding:0 9px;border:1.5px solid #fde68a;border-radius:8px;background:#fffbeb;color:#d97706;font-size:11px;font-weight:800;cursor:pointer;flex-shrink:0;-webkit-appearance:none;white-space:nowrap;} .postit-video-bm-btn:active{opacity:.7;} .postit-video-embed-wrap{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:8px;overflow:hidden;margin-bottom:6px;} .postit-video-embed-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;} .postit-video-embed-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:10px;padding:8px;text-align:center;line-height:1.6;} .postit-video-bm-list{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px;} .postit-video-bm-chip{display:inline-flex;align-items:center;gap:3px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:3px 8px;font-size:10px;color:var(--text2);cursor:pointer;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;} [data-dark] .postit-video-bm-chip{background:var(--input-bg);} .postit-video-bm-chip b{font-weight:400;color:#cbd5e1;cursor:pointer;padding-left:2px;} .postit-video-bm-chip b:hover{color:#ef4444;} .postit-note-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;} .postit-note-label{font-size:10px;font-weight:800;color:#b45309;} [data-dark] .postit-note-label{color:#fbbf24;} .postit-note-toolbar-btns{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;} .compact-textarea.postit-area{min-height:90px;resize:vertical;touch-action:none;min-width:0;box-sizing:border-box;overflow:hidden;transition:height .1s ease;border:none;background:transparent;padding:2px 0;} .compact-textarea.postit-area:focus{border:none;background:transparent;} .postit-mode-btn{width:24px;height:24px;border:1.5px solid var(--border);border-radius:7px;background:var(--input-bg);color:var(--text2);font-size:11px;cursor:pointer;font-family:var(--font);flex-shrink:0;-webkit-appearance:none;padding:0;} .postit-mode-btn.active{background:#2563eb;border-color:#2563eb;color:#fff;} .postit-fmt-btn{width:24px;height:24px;border:1.5px solid #fbbf24;border-radius:7px;background:#fffbeb;color:#b45309;font-size:11px;cursor:pointer;font-family:var(--font);flex-shrink:0;-webkit-appearance:none;padding:0;} [data-dark] .postit-fmt-btn{background:rgba(245,158,11,.12);color:#fbbf24;} .postit-share-note-btn{width:24px;height:24px;border:1.5px solid #a7f3d0;border-radius:7px;background:#ecfdf5;color:#059669;font-size:11px;cursor:pointer;flex-shrink:0;-webkit-appearance:none;} [data-dark] .postit-share-note-btn{background:rgba(16,185,129,.12);color:#34d399;} .postit-del-btn{width:24px;height:24px;border:1.5px solid var(--border);border-radius:7px;background:var(--input-bg);color:var(--text2);font-size:11px;cursor:pointer;flex-shrink:0;-webkit-appearance:none;} .postit-check-list{margin-top:4px;} .postit-check-row{display:flex;align-items:center;gap:6px;margin-bottom:5px;} .postit-check-box{width:16px;height:16px;flex-shrink:0;accent-color:#2563eb;} .postit-check-list-round .postit-check-box{border-radius:50%;accent-color:#16a34a;} .postit-check-text{flex:1;min-width:0;height:26px;border:none;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font-size:12px;padding:2px 2px;font-family:var(--font);-webkit-appearance:none;} .postit-check-list-round .postit-check-row:has(.postit-check-box:checked) .postit-check-text{text-decoration:line-through;color:var(--text2);} .postit-check-del{width:20px;height:20px;flex-shrink:0;border:none;background:transparent;color:var(--text2);font-size:11px;cursor:pointer;} .postit-check-add{width:100%;height:26px;border-radius:7px;border:1.5px dashed var(--border);background:transparent;color:var(--text2);font-size:10px;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} .add-postit-btn{width:100%;height:34px;border-radius:9px;border:2px dashed #fbbf24;background:transparent;color:#b45309;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);box-sizing:border-box;-webkit-appearance:none;} [data-dark] .add-postit-btn{color:#fbbf24;} .postit-share-master{border-top:1px solid var(--border);padding-top:8px;margin-top:10px;} .postit-share-master-label{font-size:11px;font-weight:700;color:var(--text2);margin-bottom:6px;} .postit-share-master-row{display:flex;gap:14px;} .postit-share-master-row label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;} .postit-share-master-row input[type="checkbox"]{accent-color:var(--accent);width:15px;height:15px;flex-shrink:0;} .compact-select{height:38px;color:#0f172a;font-weight:700;} /* 날짜+시간 통합 라인 */ .datetime-row{display:flex;gap:6px;margin-bottom:8px;align-items:center;} /* 날짜 버튼 - 굵은 진한 검은색 */ .date-display-btn{flex:1.4;height:38px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-weight:800;background:var(--input-bg);color:#0f172a;cursor:pointer;font-family:var(--font);display:flex;align-items:center;justify-content:center;-webkit-appearance:none;position:relative;overflow:hidden;} .date-display-btn.has-val{color:var(--accent);border-color:var(--accent);font-weight:800;} /* iOS: input[type=date]를 버튼 위에 투명하게 덮어 네이티브 picker 트리거 */ .date-input-overlay{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;border:none;background:transparent;font-size:16px;} /* 시간 select - 굵은 진한 검은색, 가운데 정렬 */ .time-select{flex:1;height:38px;font-weight:800;font-size:13px;color:#0f172a;background:var(--input-bg);border:1.5px solid var(--border);border-radius:10px;padding:0 6px;-webkit-appearance:none;outline:none;cursor:pointer;text-align:center;text-align-last:center;} .time-select:focus{border-color:var(--accent);} .time-select.has-time{color:#0f172a;font-weight:800;border-color:var(--accent);} .time-select option{color:#0f172a;font-weight:600;} /* 주소 */ .addr-label-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;} .addr-label-badge{font-size:11px;font-weight:800;color:var(--accent);background:#eff6ff;padding:2px 8px;border-radius:99px;white-space:nowrap;flex-shrink:0;} .addr-row{position:relative;margin-bottom:6px;} .addr-copy-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;border-radius:7px;background:var(--accent);color:#fff;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;} .addr-input-pad{padding-right:46px!important;} /* 공유 버튼 + 말풍선 */ .addr-share-wrap{position:absolute;right:6px;top:50%;transform:translateY(-50%);} .addr-share-btn{width:30px;height:30px;border:none;border-radius:8px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;padding:0;} .addr-share-btn:active{opacity:.8;} .addr-share-tip{display:none;position:absolute;bottom:calc(100% + 8px);right:0;background:#1e293b;color:#fff;font-size:10px;padding:9px 11px;border-radius:10px;line-height:1.7;width:220px;z-index:9999;box-shadow:0 4px 16px rgba(0,0,0,.35);word-break:keep-all;} .addr-share-tip::after{content:'';position:absolute;bottom:-5px;right:10px;border:5px solid transparent;border-top-color:#1e293b;border-bottom:none;} .addr-share-tip.show{display:block;} .map-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px;} .map-btn{padding:7px 0;border:none;border-radius:9px;font-size:11px;font-weight:700;color:#fff;cursor:pointer;transition:opacity .15s;letter-spacing:-.2px;-webkit-appearance:none;} .map-btn:active{opacity:.7;} /* 메모 */ .qmemo-wrap{background:linear-gradient(135deg,#eff6ff,#f0fdf4);border:1.5px solid #bfdbfe;border-radius:12px;padding:8px 10px;margin-bottom:6px;} [data-dark] .qmemo-wrap{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.3);} .qmemo-label{font-size:10px;font-weight:700;color:var(--accent);margin-bottom:4px;display:flex;align-items:center;gap:4px;} .qmemo-wrap .compact-textarea{background:transparent;border:none;padding:0;font-size:12px;min-height:44px;resize:vertical;} .qmemo-wrap .compact-textarea:focus{border:none;background:transparent;} .memo-label{font-size:10px;font-weight:700;color:var(--text2);margin-bottom:4px;} .phone-row{display:flex;gap:6px;margin-bottom:6px;} .call-btn{width:64px;border:none;border-radius:10px;background:var(--accent2);color:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} .block-btn{width:100%;margin-bottom:8px;height:32px;border:1.5px solid #94a3b8;background:transparent;color:var(--text2);border-radius:99px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .15s;-webkit-appearance:none;} .block-btn:active{background:#64748b;color:#fff;} .todo-item{display:flex;align-items:center;gap:7px;margin-bottom:5px;} .todo-check{width:17px;height:17px;accent-color:var(--accent2);cursor:pointer;flex-shrink:0;} .todo-text{flex:1;border:none;border-bottom:1px solid var(--border);font-size:13px;outline:none;background:transparent;color:var(--text);font-family:var(--font);padding:2px 0;-webkit-appearance:none;} .todo-del{border:none;background:none;color:var(--danger);cursor:pointer;font-size:14px;-webkit-appearance:none;} .add-todo-btn{background:none;border:none;color:var(--accent);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);padding:4px 0;-webkit-appearance:none;} /* ── 일정탭 ── */ .sched-box{display:flex;flex-direction:column;gap:4px;} .sched-item{display:flex;align-items:center;gap:4px;padding:5px 6px;background:var(--input-bg);border:1.5px solid var(--border);border-radius:10px;transition:opacity .2s;flex-wrap:nowrap;} .sched-item.done-item{opacity:.5;} .sched-item.done-item .sched-text{text-decoration:line-through;color:var(--text2);} .sched-check{width:18px;height:18px;accent-color:var(--accent2);cursor:pointer;flex-shrink:0;} .sched-time-label{font-size:10px;font-weight:700;color:var(--accent);white-space:nowrap;flex-shrink:0;min-width:44px;padding:0 2px;} .sched-text{flex:1;border:none;border-bottom:1px solid var(--border);font-size:12px;font-weight:600;background:transparent;color:var(--text);font-family:var(--font);outline:none;min-width:60px;-webkit-appearance:none;padding:2px 0;resize:none;overflow:hidden;line-height:1.6;min-height:26px;display:block;word-break:break-all;white-space:pre-wrap;} .sched-text::placeholder{color:#b0b8c8;font-weight:400;font-size:12px;} .sched-move-wrap{display:flex;flex-direction:column;gap:1px;flex-shrink:0;} .sched-mv-btn{width:18px;height:13px;border:none;background:transparent;color:var(--text2);font-size:9px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;} .sched-del{width:22px;height:22px;border:none;background:none;color:var(--danger);font-size:13px;cursor:pointer;flex-shrink:0;-webkit-appearance:none;display:flex;align-items:center;justify-content:center;} /* ── 일정탭 추가 버튼/핸들 ── */ .sched-drag-handle{width:24px;height:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;cursor:grab;flex-shrink:0;opacity:.5;touch-action:none;} .sched-drag-handle:active{cursor:grabbing;opacity:1;} .sched-drag-handle span{display:block;width:14px;height:2px;background:var(--text2);border-radius:2px;} .sched-item.dragging{opacity:.4;background:var(--accent)!important;} .sched-item.drag-over{border-top:2px solid var(--accent);} .sched-undo-btn{height:28px;padding:0 9px;border:1.5px solid var(--border);border-radius:7px;background:var(--input-bg);color:var(--text);font-size:16px;font-weight:900;cursor:pointer;font-family:var(--font);-webkit-appearance:none;line-height:1;display:flex;align-items:center;justify-content:center;} body.view-pc [id^="t3-"] .add-schedule-btn{padding:0 6px;font-size:10px;height:24px;} body.view-pc [id^="t3-"] .sched-undo-btn{padding:0 6px;height:24px;font-size:13px;} body.view-pc [id^="t3-"] .sched-actions-row{gap:3px;} .sched-undo-btn:active{background:var(--accent);color:#fff;} .add-schedule-btn{height:26px;padding:0 9px;border:1.5px solid var(--border);border-radius:7px;background:var(--input-bg);color:var(--accent);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} /* ── 이멜 팝업 ── */ .mail-popup{background:var(--card);border-radius:20px;padding:20px;max-width:360px;width:94%;box-shadow:var(--shadow-lg);font-family:var(--font);max-height:85vh;overflow-y:auto;} .mail-popup h3{font-size:15px;font-weight:800;color:var(--text);margin-bottom:12px;} .mail-input{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:8px 10px;font-size:13px;background:var(--input-bg);color:var(--text);font-family:var(--font);outline:none;-webkit-appearance:none;box-sizing:border-box;margin-bottom:8px;} .mail-input:focus{border-color:var(--accent);} .mail-label{font-size:10px;font-weight:700;color:var(--text2);margin-bottom:4px;} .mail-preview{background:var(--input-bg);border:1px solid var(--border);border-radius:10px;padding:10px;font-size:11px;color:var(--text2);line-height:1.7;max-height:140px;overflow-y:auto;margin-bottom:10px;word-break:break-all;} /* 지도탭 */ .map-frame-wrap{width:100%;height:150px;background:var(--input-bg);border-radius:12px;overflow:hidden;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:12px;border:1.5px solid var(--border);} .coords-box{font-size:11px;color:var(--text2);padding:7px 10px;background:var(--input-bg);border-radius:9px;margin-bottom:8px;border:1px solid var(--border);line-height:1.7;} .coords-link{color:var(--accent);text-decoration:underline;cursor:pointer;font-weight:600;} .map-action-row{display:flex;gap:5px;margin-bottom:6px;flex-wrap:wrap;} .map-action-btn{flex:1;min-width:0;height:34px;border:none;border-radius:9px;font-size:10px;font-weight:700;color:#fff;cursor:pointer;font-family:var(--font);transition:opacity .15s;white-space:nowrap;-webkit-appearance:none;} .map-action-btn:active{opacity:.75;} .sec-share-btn{flex:1.4!important;background:linear-gradient(135deg,#7c3aed,#4f46e5)!important;font-size:10px!important;} /* 섹션 삭제 */ .sec-del-btn{width:100%;padding:7px;border:none;background:#fff5f5;color:var(--danger);font-size:11px;cursor:pointer;font-family:var(--font);transition:background .15s;-webkit-appearance:none;} .sec-del-btn:hover{background:#fee2e2;} [data-dark] .sec-del-btn{background:rgba(239,68,68,.08);} .theme-row{display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap;} .theme-dot{width:22px;height:22px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s;} .theme-dot:hover{transform:scale(1.2);} .theme-dot.sel{border-color:var(--text);transform:scale(1.15);} /* 섹션 추가 */ .add-sec-btn{width:100%;height:42px;border-radius:12px;border:2px dashed var(--accent);background:transparent;color:var(--accent);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);margin-bottom:12px;transition:all .15s;box-sizing:border-box;-webkit-appearance:none;} .add-sec-btn:hover{background:rgba(37,99,235,.06);} /* 하단 버튼 */ .bottom-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:14px;} .bot-btn{height:40px;border:none;border-radius:12px;color:#fff;font-weight:700;font-size:11px;cursor:pointer;font-family:var(--font);transition:all .15s;letter-spacing:-.2px;-webkit-appearance:none;} .bot-btn:active{transform:scale(.95);} /* 사용설명서 */ .guide-wrap{background:var(--card);border-radius:var(--radius);overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow);} .guide-summary{width:100%;padding:12px 14px;font-weight:700;font-size:13px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:var(--input-bg);color:var(--text);border:none;outline:none;font-family:var(--font);text-align:left;-webkit-appearance:none;} .guide-tabs{display:flex;gap:4px;padding:8px 10px 4px;background:var(--input-bg);border-bottom:1px solid var(--border);} .guide-tab{flex:1;padding:7px 4px;border:none;border-radius:8px;background:none;font-size:11px;font-weight:700;color:var(--text2);cursor:pointer;font-family:var(--font);transition:all .15s;-webkit-appearance:none;} .guide-tab.active{background:var(--accent);color:#fff;} .guide-panel{display:none;padding:14px;font-size:12px;color:var(--text2);line-height:1.8;} .guide-panel.active{display:block;} .guide-panel b{color:var(--text);} .guide-tip-step{background:var(--input-bg);border-radius:10px;padding:10px 12px;margin-bottom:8px;border-left:3px solid var(--accent);} .guide-tip-step .step-title{font-weight:700;color:var(--text);font-size:12px;margin-bottom:4px;} .guide-tip-step .step-body{font-size:11px;color:var(--text2);line-height:1.7;} .guide-notice-item{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px;padding:8px 10px;background:var(--input-bg);border-radius:9px;} .guide-notice-icon{font-size:14px;flex-shrink:0;margin-top:1px;} .guide-notice-text{font-size:11px;line-height:1.7;color:var(--text2);} .guide-notice-text b{color:var(--text);} /* 즐겨찾기 - 사용설명서 첫탭에 통합 */ .fav-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px;width:100%;box-sizing:border-box;} .fav-item{display:flex;align-items:center;gap:3px;background:var(--input-bg);border:1.5px solid var(--border);border-radius:8px;padding:4px 6px;transition:border-color .15s;min-width:0;box-sizing:border-box;} .fav-item.selected{border-color:var(--accent);background:#eff6ff;} .fav-check{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;} .fav-input{flex:1;border:none;font-size:10px;background:transparent;color:var(--text);font-family:var(--font);outline:none;min-width:0;-webkit-appearance:none;width:100%;} .fav-input::placeholder{color:var(--text2);font-size:9px;} .fav-nav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px;} .fav-nav-btn{padding:7px 4px;border:none;border-radius:8px;font-size:11px;font-weight:700;color:#fff;cursor:pointer;font-family:var(--font);transition:opacity .15s;-webkit-appearance:none;} .fav-nav-btn:active{opacity:.7;} /* 즐겨가기 추가 버튼 */ .fav-add-item{justify-content:center;border:1.5px dashed var(--accent)!important;background:transparent!important;} .fav-add-btn{border:none;background:transparent;color:var(--accent);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;padding:0;width:100%;} /* 근처 생활편의시설 아이콘 그리드 */ .nearby-icon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;} .nearby-icon-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 5px;border:1.5px solid var(--border);border-radius:10px;background:var(--input-bg);cursor:pointer;font-family:var(--font);transition:all .15s;-webkit-appearance:none;} .nearby-icon-btn:active{transform:scale(.92);background:#eff6ff;border-color:var(--accent);} .nearby-icon-btn span:first-child{font-size:18px;line-height:1;} .nearby-icon-btn span:last-child{font-size:9px;font-weight:700;color:var(--text2);} /* 모달 */ .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);} .modal-overlay.on{display:flex!important;} .modal-box{background:var(--card);width:100%;border-radius:20px;padding:20px;max-height:85vh;overflow-y:auto;max-width:420px;box-shadow:var(--shadow-lg);} .modal-box h3{font-size:15px;font-weight:800;color:var(--text);margin-bottom:12px;} .modal-textarea{width:100%;height:90px;border-radius:10px;padding:10px;border:1.5px solid var(--border);box-sizing:border-box;font-size:12px;background:var(--input-bg);color:var(--text);font-family:var(--font);outline:none;resize:none;-webkit-appearance:none;} .modal-textarea:focus{border-color:var(--accent);} .modal-btns{display:flex;gap:8px;margin-top:14px;} .modal-btn{flex:1;height:44px;border:none;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} /* QR 모달 */ .qr-box{background:var(--card);border-radius:20px;padding:20px;text-align:center;max-width:320px;width:92%;box-shadow:var(--shadow-lg);max-height:85vh;overflow-y:auto;} .qr-box h3{font-size:15px;font-weight:800;color:var(--text);margin-bottom:4px;} .qr-box p{font-size:11px;color:var(--text2);margin-bottom:12px;line-height:1.5;} #qr-container{display:flex;align-items:center;justify-content:center;min-height:180px;margin-bottom:10px;} #qr-container canvas,#qr-container img{border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.12);} .qr-url-input{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:7px 10px;font-size:10px;color:var(--text2);background:var(--input-bg);font-family:var(--font);outline:none;margin-bottom:10px;cursor:text;box-sizing:border-box;-webkit-appearance:none;} .qr-tiny-row{display:flex;align-items:center;gap:7px;padding:8px 10px;background:var(--input-bg);border-radius:9px;margin-bottom:10px;cursor:pointer;border:1.5px solid var(--border);transition:border-color .15s;} .qr-tiny-row:hover{border-color:var(--accent);} .qr-tiny-row input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;} .qr-tiny-label-text{font-size:11px;font-weight:700;color:var(--text2);flex:1;text-align:left;} .qr-tiny-status{font-size:10px;color:var(--accent);font-weight:600;} .qr-tiny-result{display:none;background:var(--input-bg);border-radius:10px;padding:10px;margin-bottom:10px;border:1.5px solid var(--border);} .qr-tiny-url{font-size:11px;color:var(--accent);word-break:break-all;margin-top:4px;font-weight:700;} .qr-btns{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;} .qr-btns div:hover .qr-tip,.qr-btns div.tip-on .qr-tip{display:block !important;} .qr-btn{padding:8px 14px;border:none;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} /* 북마크 모달 */ .bm-box{background:var(--card);border-radius:20px;padding:20px;max-width:340px;width:92%;box-shadow:var(--shadow-lg);font-family:var(--font);} .bm-link-card{display:block;background:linear-gradient(135deg,#eff6ff,#f0fdf4);border:2px dashed #93c5fd;border-radius:12px;padding:12px 14px;text-decoration:none;cursor:grab;margin-bottom:12px;transition:box-shadow .2s;} .bm-link-card:hover{box-shadow:0 4px 16px rgba(37,99,235,.2);} /* 섹션공유 팝업 */ .sec-share-popup{background:var(--card);border-radius:20px;padding:22px;max-width:340px;width:92%;box-shadow:var(--shadow-lg);font-family:var(--font);} .sec-share-popup h3{font-size:15px;font-weight:800;color:var(--text);margin-bottom:8px;} .sec-share-url-box{background:var(--input-bg);border:1.5px solid var(--border);border-radius:10px;padding:8px 10px;font-size:10px;color:var(--text2);word-break:break-all;margin:10px 0;line-height:1.6;min-height:40px;} /* 주차층 모달 */ .floor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0;} .floor-btn{height:36px;border:1.5px solid var(--border);border-radius:9px;background:var(--input-bg);color:var(--text);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} .floor-btn.sel{background:var(--accent);color:#fff;border-color:var(--accent);} .floor-btn-above{border-color:#bfdbfe;color:var(--accent);} .floor-btn-below{border-color:#fecaca;color:var(--danger);} /* 토스트 */ #toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(12px);background:#1e293b;color:#fff;padding:9px 20px;border-radius:30px;font-size:12px;font-weight:700;z-index:9999999;opacity:0;transition:all .22s;pointer-events:none;white-space:nowrap;font-family:var(--font);box-shadow:0 4px 20px rgba(0,0,0,.3);} #toast.on{transform:translateX(-50%) translateY(0);opacity:1;} #wakeLockBtn{height:30px!important;display:inline-flex!important;align-items:center;justify-content:center;visibility:visible!important;opacity:1!important;} @media(max-width:480px){ .header-actions{gap:3px;} .hbtn{padding:0 6px;font-size:10px;height:30px;} .header-title{font-size:13px;} .app-body{padding:8px 3px 60px;} .bottom-btns{grid-template-columns:repeat(4,1fr);} .bot-btn{height:36px;font-size:10px;} /* [V55] 일정탭 버튼줄 모바일 이탈 방지: 버튼 폭 축소 + 한줄 고정 */ .sched-actions-row{gap:3px;} .sched-actions-row .add-schedule-btn{padding:0 6px;font-size:10px;height:24px;} .sched-actions-row .sched-undo-btn{padding:0 6px;height:26px;} /* [V5] 상단 REPLY 버튼 숨김(공간 확보) */ .hbtn-reply{display:none;} /* [V11] 초기화~뷰모드 버튼: 이제 4개뿐이라 글자도 같이 보이게, 대신 폭을 줄여서 한 줄 유지 */ .share-btn-row{flex-wrap:wrap;gap:3px;} .share-btn-row .hbtn{padding:0 6px;font-size:9.5px;} #autoSaveStatus{flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;} } @media(max-width:360px){ .sched-actions-row{gap:2px;} .sched-actions-row .add-schedule-btn{padding:0 4px;font-size:9px;} } @media(max-width:360px){.hbtn{padding:0 4px;font-size:9px;}} /* ── 타이틀 월선택 ── */ .trip-title-wrap{position:relative;} .title-month-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);height:28px;padding:0 10px;border:1.5px solid var(--border);border-radius:8px;background:var(--input-bg);color:var(--text2);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);white-space:nowrap;-webkit-appearance:none;display:flex;align-items:center;gap:4px;} .title-month-btn:active{background:var(--accent);color:#fff;} .title-month-dropdown{display:none;position:absolute;top:calc(100% + 4px);right:0;left:0;background:var(--card);border:1.5px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);z-index:9999;overflow:hidden;max-height:260px;overflow-y:auto;} .title-month-dropdown.open{display:block;} .title-month-item{padding:9px 14px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s;font-family:var(--font);} .title-month-item:last-child{border-bottom:none;} .title-month-item:hover,.title-month-item:active{background:var(--input-bg);} .title-month-item.direct{color:var(--accent);} #tripMainTitle{padding-right:90px;} /* ── 링크바로가기 ── */ .link-item{display:flex;align-items:center;gap:5px;margin-bottom:5px;} .link-url-input{flex:1;border:1.5px solid var(--border);border-radius:9px;padding:6px 10px;font-size:12px;background:var(--input-bg);color:var(--text);font-family:var(--font);outline:none;-webkit-appearance:none;font-weight:600;min-width:0;} .link-url-input::placeholder{color:#b0b8c8;font-weight:400;font-size:11px;} .link-url-input:focus{border-color:var(--accent);} .link-go-btn{width:36px;height:36px;border:none;border-radius:9px;background:var(--accent);color:#fff;font-size:14px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;} .link-go-btn:active{opacity:.75;} .link-del-btn{width:28px;height:28px;border:none;border-radius:7px;background:#fff5f5;color:var(--danger);font-size:12px;cursor:pointer;flex-shrink:0;-webkit-appearance:none;display:flex;align-items:center;justify-content:center;} .add-link-btn{background:none;border:none;color:var(--accent);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);padding:4px 0;-webkit-appearance:none;} /* ── 달력 위젯 ── */ .cal-widget{background:var(--card);border-radius:var(--radius);padding:10px 12px;margin-bottom:10px;box-shadow:var(--shadow);box-sizing:border-box;transition:background .2s,border-color .2s;border:1.5px solid transparent;} .cal-widget.collapsed{background:linear-gradient(135deg,#eff6ff,#f5f3ff);border-color:#bfdbfe;padding-bottom:2px;} [data-dark] .cal-widget.collapsed{background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(139,92,246,.10));border-color:rgba(37,99,235,.35);} .cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:6px;} .cal-header-center{display:flex;align-items:center;gap:6px;flex:1;justify-content:center;min-width:0;} .cal-today-inline{display:none;font-size:10.5px;font-weight:800;color:var(--accent);background:rgba(37,99,235,.12);padding:2px 8px;border-radius:20px;white-space:nowrap;} .cal-widget.collapsed .cal-today-inline{display:inline-block;} .cal-nav-btn{width:30px;height:30px;border:none;border-radius:8px;background:var(--input-bg);color:var(--text);font-size:13px;font-weight:700;cursor:pointer;-webkit-appearance:none;flex-shrink:0;} .cal-collapse-toggle{width:100%;height:32px;border:none;border-radius:8px;background:rgba(37,99,235,.08);color:var(--accent);font-size:11px;font-weight:800;cursor:pointer;-webkit-appearance:none;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font);} .cal-widget.collapsed .cal-collapse-toggle{background:rgba(37,99,235,.14);} [data-dark] .cal-collapse-toggle{background:rgba(37,99,235,.16);} #calCollapseIcon{display:inline-block;transition:transform .2s;font-size:9px;} .cal-month-label{font-size:13px;font-weight:800;color:var(--text);} .cal-legend{display:flex;gap:8px;justify-content:center;margin-bottom:8px;font-size:8.5px;color:var(--text2);font-weight:600;flex-wrap:wrap;} .cal-legend span{display:flex;align-items:center;gap:3px;} .cal-legend i{width:7px;height:7px;border-radius:2px;display:inline-block;} .cal-grid{display:grid;grid-template-columns:28px repeat(7,1fr);gap:2px;} .cal-week-label{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:var(--text2);background:var(--input-bg);border-radius:6px;padding:2px 0;line-height:1.35;} .cal-week-label .cwl-year{font-size:9px;color:var(--accent);} .cal-week-label .cwl-month{font-size:7px;opacity:.8;} .cal-dow{text-align:center;font-size:9px;font-weight:700;color:var(--text2);padding:2px 0 4px;} .cal-dow.sun{color:#ef4444;} .cal-dow.sat{color:#2563eb;} .cal-cell{min-height:44px;border-radius:7px;background:var(--input-bg);padding:3px 2px;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:background .15s;} .cal-cell:active{background:var(--border);} .cal-cell.empty{background:transparent;cursor:default;} .cal-cell.cal-today{border:1.5px solid var(--accent);} .cal-cell.cal-has{background:rgba(37,99,235,.08);} .cal-cell.cal-selected{background:var(--accent);box-shadow:0 0 0 1.5px var(--accent);} .cal-cell.cal-selected .cal-daynum,.cal-cell.cal-selected .cal-snip{color:#fff;} .cal-daynum{font-size:10px;font-weight:700;color:var(--text);} .cal-marks{display:flex;gap:2px;margin-top:2px;} .cal-mark{width:6px;height:6px;border-radius:2px;background:transparent;border:1px solid var(--border);opacity:.6;} .cal-mark.on{opacity:1;border-color:transparent;} .cal-month-select{font-size:13px;font-weight:800;color:var(--text);background:transparent;border:none;outline:none;text-align:center;font-family:var(--font);-webkit-appearance:none;appearance:none;} .monthly-view-btn{width:100%;height:36px;border-radius:10px;border:2px dashed #64748b;background:transparent;color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);margin-bottom:12px;box-sizing:border-box;-webkit-appearance:none;} .monthly-view-btn.active{border-style:solid;border-color:var(--accent);background:rgba(37,99,235,.08);color:var(--accent);} .cal-snip{font-size:7px;color:var(--text2);margin-top:1px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .cal-actions{display:flex;gap:6px;margin-top:8px;} .cal-filter-btn,.cal-viewer-btn{flex:1;height:32px;border:1.5px solid var(--border);border-radius:9px;background:var(--input-bg);color:var(--text);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} .cal-viewer-btn{background:var(--accent);color:#fff;border-color:var(--accent);} .cal-collapse-toggle-bottom{width:100%;height:30px;margin-top:8px;border:none;border-radius:8px;background:rgba(37,99,235,.08);color:var(--accent);font-size:11px;font-weight:800;cursor:pointer;-webkit-appearance:none;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font);} [data-dark] .cal-collapse-toggle-bottom{background:rgba(37,99,235,.16);} /* ── 월간 뷰어 모달 ── */ .mv-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;} .mv-close{width:26px;height:26px;border:none;border-radius:7px;background:var(--input-bg);color:var(--text);font-size:13px;cursor:pointer;} .mv-filter-btn{width:100%;height:32px;border:1.5px solid var(--border);border-radius:9px;background:var(--input-bg);color:var(--text);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);margin-bottom:8px;-webkit-appearance:none;} .mv-list{max-height:50vh;overflow-y:auto;} .mv-row{display:flex;align-items:center;gap:8px;padding:8px 6px;border-bottom:1px solid var(--border);cursor:pointer;} .mv-row:active{background:var(--input-bg);} .mv-date{font-size:11px;font-weight:800;color:var(--accent);flex-shrink:0;width:64px;} .mv-title{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* ── 포스T잇 서식 팝업 ── */ .pf-cats{display:flex;gap:5px;overflow-x:auto;margin-bottom:8px;padding-bottom:2px;} .pf-cat-btn{flex-shrink:0;height:30px;padding:0 12px;border-radius:9px;border:1.5px solid var(--border);background:var(--input-bg);color:var(--text);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);white-space:nowrap;-webkit-appearance:none;} .pf-cat-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;} .pf-list{max-height:46vh;overflow-y:auto;} .pf-item{padding:9px 8px;border-bottom:1px solid var(--border);cursor:pointer;} .pf-item:active{background:var(--input-bg);} .pf-item-title{font-size:12.5px;font-weight:700;color:var(--text);} .pf-item-body{font-size:10px;color:var(--text2);margin-top:2px;white-space:pre-line;line-height:1.4;} /* ── 섹션 상대 날짜 태그 ── */ .sec-rel-tag{font-size:8px;font-weight:800;padding:1px 4px;border-radius:5px;flex-shrink:0;white-space:nowrap;text-align:center;line-height:1.3;} .sec-rel-tag.rel-today{background:#dbeafe;color:#2563eb;} .sec-rel-tag.rel-yesterday{background:#f1f5f9;color:#64748b;} .sec-rel-tag.rel-tomorrow{background:#dcfce7;color:#16a34a;} .sec-rel-tag-empty{background:transparent!important;color:transparent!important;} .sec-badge-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;} /* ── 결재라인 ── */ .approval-section{background:var(--card);border-radius:var(--radius);margin-bottom:10px;box-shadow:var(--shadow);border:1.5px solid var(--border);box-sizing:border-box;overflow:hidden;} .approval-header{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:var(--input-bg);} .approval-title{font-size:13px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:6px;} .approval-add-btn{height:28px;padding:0 10px;border:none;border-radius:7px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} .approval-body{padding:12px;display:none;} .approval-body.open{display:block;} .approval-section-collapsed .approval-header{border-bottom:none;} .approval-grid{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px;} .approval-box{flex:0 0 88px;border:1.5px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card);transition:border-color .2s;} .approval-box.signed{border-color:var(--accent2);} .approval-box-top{background:var(--input-bg);padding:5px 6px;text-align:center;border-bottom:1px solid var(--border);} .approval-name-input{width:100%;border:none;font-size:11px;font-weight:800;text-align:center;background:transparent;color:var(--text);font-family:var(--font);outline:none;-webkit-appearance:none;} .approval-stamp-area{min-height:62px;display:flex;align-items:center;justify-content:center;padding:6px;cursor:pointer;position:relative;} .approval-stamp{width:50px;height:50px;border:2px solid var(--danger);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--danger);opacity:0;transition:opacity .2s;position:relative;background:rgba(239,68,68,.04);} .approval-stamp.on{opacity:1;} .approval-stamp::before{content:'決';font-size:22px;font-weight:900;opacity:.15;position:absolute;} .approval-stamp-check{width:28px;height:28px;accent-color:var(--danger);cursor:pointer;position:relative;z-index:2;} .approval-role-input{width:100%;border:none;font-size:9px;text-align:center;background:var(--input-bg);color:var(--text2);font-family:var(--font);outline:none;padding:4px 4px;border-top:1px solid var(--border);-webkit-appearance:none;} .approval-del-btn{width:100%;padding:3px;border:none;background:#fff5f5;color:var(--danger);font-size:10px;cursor:pointer;font-family:var(--font);border-top:1px solid #fecaca;-webkit-appearance:none;} .approval-receive-wrap{position:relative;display:inline-flex;} .approval-receive-btn{height:28px;padding:0 10px;border:none;border-radius:7px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} .approval-receive-dropdown{display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--card);border:1.5px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:9999;overflow:hidden;min-width:160px;} .approval-receive-dropdown.open{display:block;} .approval-receive-item{padding:11px 14px;font-size:12px;font-weight:700;color:var(--text);cursor:pointer;border-bottom:1px solid var(--border);font-family:var(--font);white-space:nowrap;} .approval-receive-item:last-child{border-bottom:none;} .approval-receive-item:active{background:var(--input-bg);} /* ── 결재 버튼 말풍선 ── */ .ap-tip-wrap{position:relative;display:inline-flex;} .ap-tip-box{display:none;position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;font-size:10px;font-weight:600;padding:5px 9px;border-radius:7px;white-space:nowrap;pointer-events:none;z-index:9999;line-height:1.5;text-align:center;} .ap-tip-box::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1e293b;} .ap-tip-wrap:hover .ap-tip-box{display:block;} .kakao-share-btn{height:28px;padding:0 10px;border:none;border-radius:7px;background:#FEE500;color:#3C1E1E;font-size:11px;font-weight:800;cursor:pointer;font-family:var(--font);-webkit-appearance:none;display:flex;align-items:center;gap:4px;} .kakao-share-btn:active{opacity:.8;} .approval-comments-section{border-top:1px solid var(--border);padding:8px 12px 10px;display:none;} .approval-comments-hd{font-size:10px;font-weight:800;color:var(--text2);margin-bottom:6px;letter-spacing:.3px;} /* 결재 코멘트 한줄 스타일 */ .approval-comment-row{display:flex;align-items:center;gap:6px;margin-bottom:5px;} .approval-comment-lbl{display:flex;align-items:center;gap:4px;flex-shrink:0;min-width:56px;max-width:72px;} .approval-comment-lbl-name{font-size:11px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52px;} .approval-comment-lbl-signed{font-size:8px;font-weight:700;color:#059669;flex-shrink:0;} .approval-comment-ta{flex:1;border:1.5px solid var(--border);border-radius:8px;padding:5px 8px;font-size:11px;background:var(--input-bg);color:var(--text);font-family:var(--font);outline:none;resize:none;height:30px;box-sizing:border-box;line-height:1.4;-webkit-appearance:none;overflow:hidden;} .approval-comment-ta:focus{border-color:var(--accent);background:#fff;} .approval-dl-row{padding:0 12px 12px;display:flex;gap:6px;} .approval-dl-btn{flex:1;height:34px;border:none;border-radius:9px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);-webkit-appearance:none;} </style> <!-- ── 헤더 ── --> <div class="app-header"> <div class="header-top"> <div class="header-title-wrap"> <div class="header-title"><span class="title-emoji"> </span><span class="title-text">강의노트 계산기</span></div> <div class="header-version">수험생용 V12(260811)</div> </div> <div class="header-actions"> <!-- QR 말풍선 --> <div class="tooltip-wrap"> <button class="hbtn hbtn-amber" onclick="openQR()" title="현재 내용을 공유 링크·QR코드로 만들어요"> 공유</button> <div class="tooltip-box">현재 입력한 모든 내용을 QR코드로 만들어 폰 카메라로 스캔하면 모바일에서 바로 열 수 있습니다. 폰에서 [기기저장]을 눌러야 저장됩니다.</div> </div> <!-- 즐겨찾기 말풍선 --> <div class="tooltip-wrap"> <button class="hbtn hbtn-green" onclick="openBookmark()" title="자주 가는 주소를 즐겨찾기로 저장해두고 빠르게 길찾기"> 즐겨추가</button> <div class="tooltip-box">클릭하면 모든 내용이 저장된 주소가 생성됩니다. 즐겨찾기에 추가하면 PC·모바일 어디서든 같은 브라우저로 바로 확인 가능합니다.</div> </div> <button class="hbtn" onclick="exportXLSX()" style="background:#16a34a;color:#fff;" title="월별로 시트를 나눠서 진짜 엑셀(.xlsx) 파일로 저장합니다"> 엑셀저장</button> <button id="wakeLockBtn" class="hbtn hbtn-ghost" onclick="toggleWakeLock()" style="height:30px;background:#1e293b;"> 켜짐</button> </div> </div> <div class="progress-wrap"> <div class="progress-bar-bg"><div id="progress-fill" class="progress-bar-fill" style="width:0%">&nbsp;</div></div> <div id="progress-label" class="progress-label">0 / 0 완료</div> </div> <!-- 26년목표 / 8월목표 (헤더 미니 표시) --> <div class="wake-row" id="wakeRow"> <div class="hdr-goal-mini hdr-goal-mini-full"> <div class="hdr-goal-row"><span class="hdr-goal-label" id="hdrGoalYearLabel">26년목표</span><input type="text" class="hdr-goal-input" id="hdrGoalYear" placeholder="목표를 적어보세요" oninput="saveYearPlan()"></div> <div class="hdr-goal-row"><span class="hdr-goal-label" id="hdrGoalMonthLabel">8월목표</span><input type="text" class="hdr-goal-input" id="hdrGoalMonth" placeholder="이번달 목표" oninput="saveMonthPlan()"></div> </div> </div> </div> <!-- ── 메인 ── --> <div class="app-body"> <!-- 사용설명서 및 즐겨가기 --> <div class="guide-wrap" id="guideWrap"> <button class="guide-summary" onclick="toggleGuide()"> 사용설명서 및 즐겨가기 <span id="guideArrow" style="font-size:10px;">▼</span></button> <div id="guideBody" style="display:none;"> <div class="guide-tabs"> <button class="guide-tab active" onclick="switchGuideTab(0)"> 사용&공유</button> <button class="guide-tab" onclick="switchGuideTab(1)">⚡ 핵심기능</button> <button class="guide-tab" onclick="switchGuideTab(2)">⚠️ 유의사항</button> <button class="guide-tab" onclick="switchGuideTab(3)">⭐ 즐겨가기</button> </div> <!-- 사용&공유 탭 (첫번째) --> <div class="guide-panel active" id="gp1"> <div style="font-size:12px;font-weight:800;color:var(--text);margin-bottom:10px;"> 강의노트 계산기 사용법</div> <div class="guide-tip-step"><div class="step-title">1️⃣ 섹션 = 오늘 하루</div><div class="step-body">앱을 열면 오늘 날짜 섹션 하나가 자동으로 생깁니다. 상단 날짜 헤더는 2줄로 표시돼요 — 윗줄엔 주차·음력, 아랫줄엔 "26년 08월 11일 (화) 강의메모"처럼 날짜가 나오고, 둘 다 직접 눌러 수정할 수 있어요. ◀▶로 하루씩 이동, [오늘] 버튼으로 바로 복귀, 우측 ▼ 버튼으로 달력을 펼치거나 접을 수 있습니다. 그 아래 노란 글씨로 26년목표·이달목표를 한 줄씩 적어둘 수 있어요.</div></div> <div class="guide-tip-step"><div class="step-title">2️⃣ 섹션 구성</div><div class="step-body"> <b>영상보기</b>: 유튜브 재생목록, 영상파일, 사진 3가지 모드 선택<br> <b>포스T잇</b>: 서식 없는 자유 메모, 여러 장 만들 수 있어요<br> <b>패턴</b>: 매일 반복하는 루틴 체크(날짜 무관 고정, 월간 카운트 표시)<br> <b>일정</b>: 시간대별 체크리스트<br> <b>작업순서</b>: 오늘 학습 순서를 박스+화살표 흐름도로 정리<br>✍️ <b>코넬노트</b>: 키워드·본문·요약 3분할 필기<br>❌ <b>오답노트</b> / <b>암기카드</b>: 날짜 무관 고정 보관<br>⏱️ <b>뽀모도로</b> / ️ <b>D-day</b>: 타이머·시험 카운트다운<br>PC모드에서는 관련있는 탭끼리 좌우로 나란히 보이고 폭 조절도 가능해요. 모바일에서는 탭을 눌러 전환하며, 마지막 본 탭을 날짜별로 기억합니다.</div></div> <div class="guide-tip-step"><div class="step-title">3️⃣ 포스T잇 여러 장 쓰기</div><div class="step-body">[＋ 포스T잇 추가]로 메모지를 계속 늘릴 수 있어요. 각 메모지의 [ 서식] 버튼을 누르면 업무·계획·프로젝트·여행·출장·SNS·공문·메뉴 8개 카테고리, 총 170개 서식 중 골라서 바로 삽입할 수 있습니다.</div></div> <div class="guide-tip-step"><div class="step-title">4️⃣ 하단 달력</div><div class="step-body">이번달이 자동으로 표시돼요(달 선택 드롭다운으로 다른 달도 바로 이동 가능). 날짜를 누르면 그 날짜로 화면이 바뀌고, 해당 섹션으로 자동 스크롤됩니다. 점 색깔 = 포스T잇 / 패턴 / 작업순서 / 일정 / 메모 (입력된 탭만 점이 표시돼요). 상단 날짜 좌우 화살표로 하루씩, 날짜 클릭으로 오늘 이동도 가능합니다.</div></div> <div class="guide-tip-step"><div class="step-title">5️⃣ 입력섹션만보기</div><div class="step-body">이번달에 뭔가 입력된 날짜만 모아서 접힌 상태로 보여줍니다(제목만 써도 인정돼요). 원하는 항목을 눌러 펼쳐보고, [원래대로]를 누르면 오늘 기준 화면으로 돌아갑니다.</div></div> <div style="border-top:1px solid var(--border);margin:14px 0 10px;"></div> <div style="font-size:12px;font-weight:800;color:var(--text);margin-bottom:8px;"> 저장·공유하는 3가지 방법</div> <div style="background:#eff6ff;border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:11px;color:#1e40af;border:1.5px solid var(--accent);line-height:1.8;"> ⭐ <b>추천: URL공유</b><br> 하단 [기본URL저장] 또는 [압축URL저장]을 누르면 지금까지 입력한 모든 내용이 링크 하나에 압축돼서 복사됩니다.<br> 이 링크를 카톡·문자·메모앱 등 <b>본인만의 공간(나만의 링크)</b>에 붙여두면, 다음에 그 링크만 열어도 바로 이어서 쓸 수 있어요. 설치나 로그인 없이 가장 간편한 방법입니다.<br> <span style="color:#1d4ed8;"> 압축URL은 짧아서 문자·카톡·QR에 특히 편해요.</span> </div> <div class="guide-tip-step"><div class="step-title"> 공유 (QR·링크·이메일)</div><div class="step-body">헤더의 [ 공유] 버튼 → QR코드로 모바일에 바로 전송하거나, 단축링크를 복사하거나, 이메일로 보내거나, 그 자리에서 바로 [ 파일(html)로 저장]까지 한번에 할 수 있어요.</div></div> <div class="guide-tip-step"><div class="step-title"> 파일(html)저장</div><div class="step-body">하단 [파일저장] 버튼(또는 공유 팝업 안의 저장 버튼) → 파일명을 확인/수정 후 저장하면, 그 파일을 더블클릭(탭)하기만 해도 저장된 시점 그대로 복원됩니다. 파일명은 자동으로 "날짜_시간_제목" 형식(예: 260708_1250_7월출장)이 붙어서, 여러 번 저장해도 이름순 정렬이 됩니다. [파일불러오기]로 그 파일을 다시 선택하면 복원돼요.</div></div> <div class="guide-tip-step"><div class="step-title"> 엑셀(.xlsx) 저장/불러오기</div><div class="step-body">하단 [저장_엑셀] → 진짜 엑셀 파일(.xlsx)로 저장되며, <b>월별로 시트가 나뉩니다</b>(예: 2026-08 시트에 8월 전체가 들어감). 엑셀·구글시트에서 열어서 직접 수정하거나, 맨 위 안내행 형식대로 새 행을 추가할 수 있어요(날짜 칸은 꼭 YYYY-MM-DD 형식으로). 수정한 파일을 [불러오기_엑셀]로 다시 불러오면 모든 시트를 한번에 읽어 같은 날짜는 덮어쓰고, 새 날짜는 추가됩니다.</div></div> <div class="guide-tip-step"><div class="step-title"> 섹션 하나만 공유</div><div class="step-body">각 섹션 우측 상단 아이콘을 누르면 그 섹션(하루치)만 골라서 링크로 공유할 수 있어요. 포스T잇은 항상 포함되고, 작업순서 포함 여부는 포스T잇탭 하단(또는 작업순서탭 하단)의 체크박스로 직접 선택할 수 있어요(기본값: 포함). 일정·메모·패턴은 섹션 공유에 포함되지 않아요.</div></div> <div style="background:var(--input-bg);border-radius:10px;padding:10px 12px;margin-top:6px;font-size:11px;color:var(--text2);line-height:1.8;"> <b> PC ↔ 모바일 이어쓰기</b><br> PC에서 입력 → 공유 또는 URL생성 → 모바일에서 스캔/접속 → [ 기기저장]을 눌러야 그 기기에도 저장됩니다. </div> </div> <!-- 핵심기능 탭 --> <div class="guide-panel" id="gp2"> <div class="guide-notice-item" style="border-left:3px solid #f59e0b;border-radius:0 9px 9px 0;"><div class="guide-notice-icon"> </div><div class="guide-notice-text"><b>포스T잇 다중 메모 + 서식 140종</b><br>메모지를 여러 장 만들고, 8개 카테고리(업무·계획·프로젝트·여행·출장·SNS·공문·메뉴) 서식을 눌러서 바로 삽입하세요.</div></div> <div class="guide-notice-item" style="border-left:3px solid var(--accent);border-radius:0 9px 9px 0;"><div class="guide-notice-icon"> </div><div class="guide-notice-text"><b>날짜 기반 섹션</b><br>모든 섹션은 실제 달력 날짜에 연결돼요. 날짜 사각형을 눌러 접기/펼치기, 달력에서 날짜를 눌러 그 날로 이동할 수 있습니다.</div></div> <div class="guide-notice-item" style="border-left:3px solid #8b5cf6;border-radius:0 9px 9px 0;"><div class="guide-notice-icon"> ️</div><div class="guide-notice-text"><b>달력 & 입력섹션만보기</b><br>이번달 입력 현황을 한눈에, 원하는 날짜만 골라보고 자동 스크롤까지 지원합니다.</div></div> <div class="guide-notice-item" style="border-left:3px solid var(--accent2);border-radius:0 9px 9px 0;"><div class="guide-notice-icon"> </div><div class="guide-notice-text"><b>섹션별 개별 공유</b><br>하루치만 쏙 골라서 링크로 공유. 포스T잇은 항상 포함, 작업순서는 체크박스로 선택할 수 있어요.</div></div> <div class="guide-notice-item" style="border-left:3px solid #16a34a;border-radius:0 9px 9px 0;"><div class="guide-notice-icon"> </div><div class="guide-notice-text"><b>엑셀(.xlsx) 저장/불러오기</b><br>월별 시트로 나눠 저장·수정하고, 다시 불러와 병합할 수 있습니다.</div></div> <div class="guide-notice-item" style="border-left:3px solid #10b981;border-radius:0 9px 9px 0;"><div class="guide-notice-icon"> ️</div><div class="guide-notice-text"><b>즐겨가기 & 네비게이션</b><br>즐겨가기 탭에 저장한 주소로 T맵/네이버/카카오/구글 즉시 연결.</div></div> <div class="guide-notice-item" style="border-left:3px solid #ef4444;border-radius:0 9px 9px 0;"><div class="guide-notice-icon"> </div><div class="guide-notice-text"><b>[기기저장] 버튼</b><br>이 기기 브라우저에 저장. 재접속 시 자동 복원됩니다.</div></div> </div> <!-- 유의사항 탭 --> <div class="guide-panel" id="gp3"> <!-- 기기 호환 정보 --> <div style="background:#fef3c7;border:1px solid #f59e0b;border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:11px;color:#92400e;line-height:1.9;"> <b> 권장 환경 (이 버전 기준)</b><br> <b>iPhone·iPad</b> — Safari 14 이상 (iOS 14+)<br> <b>Android</b> — Chrome 90 이상 (Android 8+)<br> ️ <b>PC</b> — Chrome 90+ / Edge 90+ / Firefox 90+<br> <span style="font-size:10px;color:#b45309;">※ 구형 Safari(iOS 13↓)는 일부 기능(clipboard 등) 미지원<br>※ 삼성 인터넷·카카오 인앱브라우저는 일부 제한 있을 수 있음</span> </div> <div class="guide-notice-item"><div class="guide-notice-icon"> </div><div class="guide-notice-text"><b>동일 브라우저 필수</b><br>Chrome에서 저장했으면 Chrome으로 접속해야 복원됩니다.</div></div> <div class="guide-notice-item"><div class="guide-notice-icon"> ️</div><div class="guide-notice-text"><b>캐시 삭제 금지</b><br>브라우저 캐시를 지우면 기기저장 데이터가 삭제됩니다.</div></div> <div class="guide-notice-item"><div class="guide-notice-icon"> </div><div class="guide-notice-text"><b>서버 저장 없음</b><br>모든 데이터는 기기 브라우저에만 저장됩니다. 개인정보 안전.</div></div> <div class="guide-notice-item"><div class="guide-notice-icon"> </div><div class="guide-notice-text"><b>바탕화면 바로가기</b><br>[기기저장] 후 파라미터 없는 주소로 홈화면 바로가기를 만드세요.</div></div> </div> <!-- 즐겨가기 탭 (마지막) --> <div class="guide-panel" id="gp0"> <div style="font-size:10px;color:var(--text2);margin-bottom:8px;line-height:1.7;">주소를 입력하고 체크박스 선택 후 하단 네비 버튼 클릭 → 해당 앱으로 바로 이동<br>✅ 초기화해도 삭제되지 않으며 입력 즉시 자동저장됩니다<br>✅ URL공유·QR공유·기기저장 모두 즐겨가기는 유지됩니다</div> <!-- ★★★ HTML에서 즐겨가기 기본 주소 직접 입력 방법 ★★★ JS 코드에서 FAV_DEFAULTS 배열을 찾아 수정하세요. 예) const FAV_DEFAULTS = ['집 주소', '회사 주소', '단골집', '', '']; 앱을 처음 열거나 초기화 후 새로고침 시 이 기본값이 자동 적용됩니다. 앱 사용 중에는 아래 입력창에서 직접 수정 가능 (입력 즉시 자동저장). [추가] 버튼으로 슬롯을 늘릴 수 있습니다. --> <div class="fav-grid" id="favGrid"></div> <div class="fav-nav-grid"> <button class="fav-nav-btn" style="background:#ff3b30;" onclick="navFav('tmap')" title="저장한 주소로 T맵 길찾기 열기">T맵</button> <button class="fav-nav-btn" style="background:#2db400;" onclick="navFav('naver')" title="저장한 주소로 네이버지도 길찾기 열기">네이버</button> <button class="fav-nav-btn" style="background:#fae100;color:#3c1e1e;" onclick="navFav('kakao')" title="저장한 주소로 카카오맵 길찾기 열기">카카오</button> <button class="fav-nav-btn" style="background:#4285f4;" onclick="navFav('google')" title="저장한 주소로 구글맵 길찾기 열기">구글</button> </div> <!-- 근처 생활편의시설 --> <div style="border-top:1px solid var(--border);margin:10px 0 8px;"></div> <div style="font-size:10px;font-weight:800;color:var(--text2);margin-bottom:6px;letter-spacing:.3px;"> 근처 — 현재위치 기반 검색</div> <div style="font-size:9px;color:var(--text2);margin-bottom:6px;line-height:1.6;">지도 선택 후 아이콘 클릭 → 해당 지도에서 현재위치 근처 검색</div> <!-- 지도 선택 라디오 --> <div style="display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;" id="nearbyMapSel"> <label style="display:flex;align-items:center;gap:3px;font-size:10px;font-weight:700;color:var(--text2);cursor:pointer;"> <input type="radio" name="nearbyMap" value="naver" checked style="accent-color:#2db400;"> 네이버 </label> <label style="display:flex;align-items:center;gap:3px;font-size:10px;font-weight:700;color:var(--text2);cursor:pointer;"> <input type="radio" name="nearbyMap" value="google" style="accent-color:#4285f4;"> 구글 </label> <label style="display:flex;align-items:center;gap:3px;font-size:10px;font-weight:700;color:var(--text2);cursor:pointer;"> <input type="radio" name="nearbyMap" value="kakao" style="accent-color:#fae100;"> 카카오 </label> </div> <!-- 생활편의 아이콘 그리드 --> <div class="nearby-icon-grid"> <button class="nearby-icon-btn" onclick="searchNearby('편의점')" title="주변 편의점 검색"><span> </span><span>편의점</span></button> <button class="nearby-icon-btn" onclick="searchNearby('약국')" title="주변 약국 검색"><span> </span><span>약국</span></button> <button class="nearby-icon-btn" onclick="searchNearby('마트')" title="주변 마트 검색"><span> </span><span>마트</span></button> <button class="nearby-icon-btn" onclick="searchNearby('음식점')" title="주변 음식점 검색"><span> ️</span><span>음식점</span></button> <button class="nearby-icon-btn" onclick="searchNearby('카페')" title="주변 카페 검색"><span>☕</span><span>카페</span></button> <button class="nearby-icon-btn" onclick="searchNearby('주유소')" title="주변 주유소 검색"><span>⛽</span><span>주유소</span></button> <button class="nearby-icon-btn" onclick="searchNearby('병원')" title="주변 병원 검색"><span> </span><span>병원</span></button> <button class="nearby-icon-btn" onclick="searchNearby('주차장')" title="주변 주차장 검색"><span> ️</span><span>주차장</span></button> <button class="nearby-icon-btn" onclick="searchNearby('은행')" title="주변 은행 검색"><span> </span><span>은행</span></button> <button class="nearby-icon-btn" onclick="searchNearby('숙박')" title="주변 숙박 검색"><span> </span><span>숙박</span></button> </div> <div style="font-size:9px;color:var(--text2);margin-top:6px;line-height:1.6;"> 네이버·구글·카카오 모두 현재위치 근처 검색 지원<br> (앱 최초 실행 시 위치 권한 허용 필요) </div> </div> </div> </div> <!-- 공유 바 --> <div class="share-bar"> <div class="share-row"> <input id="shareUrlDisplay" class="share-url-input" readonly type="text" placeholder=" URL생성 후 Ctrl+D(PC) / 공유메뉴(모바일)로 즐겨찾기 저장 추천" /> <div class="tooltip-wrap" style="flex-shrink:0;"> <button class="share-save-btn" onclick="saveAndCopy()"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:3px;"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>URL생성 </button> <div class="tooltip-box" style="right:0;width:210px;top:calc(100% + 6px);"> 클릭하면 현재 입력한 내용이 저장된 URL이 생성되고 자동으로 복사됩니다.<br> 카카오톡·문자·메일에 바로 붙여넣기 해서 공유하세요.<br> 같은 링크로 접속하면 입력한 내용이 그대로 복원됩니다. </div> </div> </div> <div class="share-btn-row"> <button class="hbtn hbtn-red" onclick="factoryReset()" style="height:28px;" title="⚠️ 모든 입력 내용을 지우고 새로 시작합니다"> ️<span class="hbtn-txt"> 초기화</span></button> <div class="tooltip-wrap"> <button class="hbtn hbtn-green" onclick="deviceSave()" style="height:28px;" title="현재 내용을 이 기기에 저장해서 다음에 열 때 자동 복원"> <span class="hbtn-txt"> 기기저장</span></button> <div class="tooltip-box" style="width:220px;left:0;right:auto;"> 현재 입력내용을 이 기기·브라우저에 저장합니다.<br>저장 후 → 주소창 URL을 즐겨찾기에 추가하거나 공유링크를 카카오톡·문자로 전달하세요.<br>⚠️ 브라우저 캐시 삭제 시 기기저장 데이터도 삭제됩니다.</div> </div> <div class="tooltip-wrap"> <button class="hbtn" id="viewModeBtn" onclick="toggleViewMode()" style="height:28px;background:#334155;color:#fff;"> 폰모드</button> <div class="tooltip-box" style="width:220px;"> PC모드: 포스T잇·패턴·작업순서·일정·메모를 한 화면에.<br> 폰모드: 탭을 눌러 하나씩 전환.<br>처음 접속 시 화면 폭으로 자동 판단되고, 한번 직접 누르면 그 다음부턴 그 선택이 기억됩니다.</div> </div> <div class="tooltip-wrap"> <button class="hbtn" id="dateViewModeBtn" onclick="cycleDateViewMode()" style="height:28px;background:#7c3aed;color:#fff;"> 뷰1_오늘만</button> <div class="tooltip-box" style="width:230px;"> <b>뷰1_오늘만</b>: 오늘(또는 선택한 날) 섹션만 표시<br> <b>뷰2_입력만</b>: 오늘 섹션 + 위에 내용 있는 지난 날짜를 작은 배지로 압축 표시<br> <b>뷰3_월별</b>: 이번 달 전체를 배지로 표시(입력 있는 날은 진하게)<br>버튼을 계속 누르면 뷰1→뷰2→뷰3→뷰1 순으로 돌아갑니다.</div> </div> <div id="autoSaveStatus" class="autosave-status"></div> </div> <div id="autoSaveUnder" class="autosave-under"> 자동저장 대기중</div> </div> <!-- 오늘 날짜 헤더 (병합: 좌우이동 + 오늘이동 + 2줄 날짜정보(모두 수정가능) + 달력토글) --> <div class="today-nav-wrap" id="todayNavWrap"> <button class="today-nav-arrow" onclick="navDay(-1)" title="어제로 이동">◀</button> <button class="today-nav-today-btn" onclick="goToToday()" title="오늘 날짜로 바로 이동">오늘</button> <div class="today-nav-label-col"> <input type="text" class="today-nav-sub" id="todayWeekLunar" oninput="updateTodayWeekLunar(this.value)" title="클릭해서 직접 수정할 수 있어요"> <input type="text" class="today-nav-label" id="todayNavLabel" oninput="updateTodayTitle(this.value)" title="클릭해서 직접 수정할 수 있어요"> </div> <button class="today-nav-arrow" onclick="navDay(1)" title="내일로 이동">▶</button> <button class="today-nav-cal-btn" id="calCollapseBtn" onclick="toggleCalCollapse()" title="눌러서 달력을 펼치거나 접어요"><span id="calCollapseIcon">▼</span></button> </div> <div class="view-badge-wrap" id="viewBadgeWrap" style="display:none;"></div> <div class="cal-widget" id="calWidget"> <div class="cal-header" id="calHeaderRow"> <button class="cal-nav-btn" onclick="calPrevMonth()" title="이전 달 보기">◀</button> <div class="cal-header-center"> <select class="cal-month-select" id="calMonthSelect" onchange="onCalMonthSelectChange(this.value)"></select> </div> <button class="cal-nav-btn" onclick="calNextMonth()" title="다음 달 보기">▶</button> </div> <div id="calBody"> <div class="cal-legend"> <span><i style="background:#f59e0b"></i>포스T잇</span> <span><i style="background:#8b5cf6"></i>패턴</span> <span><i style="background:#ec4899"></i>작업순서</span> <span><i style="background:#2563eb"></i>일정</span> <span><i style="background:#10b981"></i>메모</span> </div> <div class="cal-grid" id="calGrid"></div> <div class="cal-actions"> <button class="cal-filter-btn" id="calFilterBtn" onclick="toggleCalFilter()" title="내용이 있는 날짜만 달력에 표시합니다">☐ 입력일정만 보기</button> <button class="cal-viewer-btn" onclick="openMonthViewer()" title="이번 달 전체 내용을 목록으로 모아 봅니다"> 달력보기</button> </div> </div> </div> <!-- 섹션 동적 영역 --> <div id="dynamic-sections">&nbsp;</div> <div style="display:flex;gap:8px;margin-bottom:12px;"> <button class="add-sec-btn" style="margin-bottom:0;flex:1;" onclick="addDaySection()" title="새 날짜 섹션을 추가로 만듭니다">＋ 섹션 추가</button> <button class="monthly-view-btn" id="monthlyViewBtn" style="margin-bottom:0;flex:1;" onclick="toggleMonthlyView()" title="내용을 입력한 섹션만 모아서 봅니다"> 입력섹션만보기</button> </div> <!-- 하단 버튼 --> <div class="bottom-btns"> <div class="tooltip-wrap" style="display:contents;"> <button class="bot-btn" onclick="saveAndCopyBasic()" style="background:#34c759;">기본URL저장</button> <div class="tooltip-box" style="left:0;right:auto;width:220px;"> ✅ <b>기본URL저장</b><br> 모든 섹션 내용을 긴 URL로 생성·복사합니다.<br> <b>장점</b>: 인터넷 없이도 즉시 생성, 서버 의존 없음<br> <b>단점</b>: URL이 길어 문자·카톡에서 잘릴 수 있음, QR 인식 어려움 </div> </div> <div class="tooltip-wrap" style="display:contents;"> <button class="bot-btn" onclick="saveAndCopyTiny()" style="background:#10b981;">압축URL저장</button> <div class="tooltip-box" style="left:0;right:auto;width:220px;"> <b>압축URL저장</b><br> TinyURL로 단축한 짧은 URL을 생성·복사합니다.<br> <b>장점</b>: 짧아서 문자·카톡·QR에 최적, 보기 깔끔<br> <b>단점</b>: 인터넷 연결 필요, TinyURL 서버 상태에 의존 </div> </div> <button class="bot-btn" onclick="showRecovery()" style="background:#5856d6;" title="예전에 받은 링크를 붙여넣어 데이터를 복구합니다">복구</button> <button class="bot-btn" onclick="showSummary()" style="background:#1c1c1e;" title="모든 섹션 내용을 한눈에 요약해서 보여줍니다">요약</button> <button class="bot-btn" onclick="sendKakao()" style="background:#fae100;color:#3c1e1e;" title="카카오톡으로 오늘 내용과 링크를 공유합니다">카톡</button> <button class="bot-btn" onclick="openMailPopup()" style="background:#2563eb;" title="이메일로 오늘 내용을 보낼 수 있어요"> 이멜공유</button> <button class="bot-btn" id="arrowToggleBtn" onclick="toggleArrows()" style="background:#64748b;font-size:10px;" title="섹션 사이 이동 화살표를 숨기거나 다시 보여줍니다">화살표삭제</button> <button class="bot-btn" onclick="exportRedirectHTML()" style="background:#0ea5e9;font-size:10px;" title="더블클릭하면 자동 복원되는 HTML 파일로 저장합니다">파일저장</button> <button class="bot-btn" onclick="importRedirectHTML()" style="background:#f59e0b;color:#000;font-size:10px;" title="저장해둔 HTML 파일을 선택해 내용을 복원합니다">파일불러오기</button> <button class="bot-btn" onclick="exportXLSX()" style="background:#16a34a;font-size:10px;" title="월별로 시트를 나눠서 진짜 엑셀(.xlsx) 파일로 저장합니다">저장_엑셀</button> <button class="bot-btn" onclick="triggerImportXLSX()" style="background:#84cc16;color:#000;font-size:10px;" title="저장한 엑셀(.xlsx) 파일을 불러와 날짜별로 반영합니다">불러오기_엑셀</button> <input type="file" id="xlsxFileInput" accept=".xlsx" style="display:none;" onchange="handleXLSXFileSelect(event)"> <input type="file" id="csvFileInput" accept=".csv" style="display:none;" onchange="handleCSVFileSelect(event)"> </div> <!-- 하단 달력 (상단 달력과 동일, 기본값은 펼쳐진 상태) --> <div class="cal-widget" id="calWidget2"> <div class="cal-header" id="calHeaderRow2"> <button class="cal-nav-btn" onclick="calPrevMonth()" title="이전 달 보기">◀</button> <div class="cal-header-center"> <select class="cal-month-select" id="calMonthSelect2" onchange="onCalMonthSelectChange(this.value)"></select> </div> <button class="cal-nav-btn" onclick="calNextMonth()" title="다음 달 보기">▶</button> </div> <div id="calBody2"> <div class="cal-legend"> <span><i style="background:#f59e0b"></i>포스T잇</span> <span><i style="background:#8b5cf6"></i>패턴</span> <span><i style="background:#ec4899"></i>작업순서</span> <span><i style="background:#2563eb"></i>일정</span> <span><i style="background:#10b981"></i>메모</span> </div> <div class="cal-grid" id="calGrid2"></div> <div class="cal-actions"> <button class="cal-filter-btn" onclick="toggleCalFilter()" title="내용이 있는 날짜만 달력에 표시합니다">☐ 입력일정만 보기</button> <button class="cal-viewer-btn" onclick="openMonthViewer()" title="이번 달 전체 내용을 목록으로 모아 봅니다"> 달력보기</button> </div> </div> <button class="cal-collapse-toggle-bottom" onclick="toggleCalCollapse('2')" id="calCollapseBtn2" title="눌러서 이 달력을 접거나 펼쳐요"> <span id="calCollapseIcon2">▲</span> 달력 접기/펼치기 </button> </div> <!-- ── 결재라인 ── --> <div class="approval-section" id="approvalSection"> <div class="approval-header" onclick="toggleApprovalSection()" style="cursor:pointer;"> <div class="approval-title"> 결재라인 <span id="approvalArrow" style="font-size:10px;color:var(--text2);margin-left:4px;">▼</span></div> <div style="display:flex;gap:5px;align-items:center;"> <button class="approval-add-btn" onclick="addApprovalBox()" style="background:#10b981;" title="결재라인에 담당자 칸을 추가합니다">라인＋</button> <div class="approval-receive-wrap"> <button class="approval-receive-btn" onclick="toggleApprovalReceiveMenu(event)" title="결재를 요청할 방법(링크/카톡/메일)을 선택합니다">결재받기 ▾</button> <div class="approval-receive-dropdown" id="approvalReceiveMenu"> <div class="approval-receive-item" onclick="copyApprovalUrl('mine')"> 내링크결재</div> <div class="approval-receive-item" onclick="copyApprovalUrl('public')"> 공유형링크결재</div> </div> </div> </div> </div> <div class="approval-body"> <div class="approval-grid" id="approvalGrid"></div> </div> <div class="approval-comments-section" id="approvalCommentsOuter"> <div class="approval-comments-hd"> 결재 코멘트</div> <div id="approvalCommentsList"></div> </div> <div class="approval-flair" style="padding:6px 14px 10px;text-align:center;display:none;"><span style="font-size:10px;color:#3b82f6;font-weight:600;"> 상사나 가족에게 결재받고 가세요!</span></div> </div> <!-- 하단 설명 --> <div style="padding:6px 2px 10px;line-height:2.0;"> <div style="font-size:10px;color:#3b82f6;font-weight:600;"> 매일을 기록하고 달력으로 한눈에 정리해 보세요</div> <div style="font-size:10px;color:#3b82f6;font-weight:600;"> PC로 입력 → 공유링크 or QR코드로 모바일 전달 추천</div> <div style="font-size:10px;color:#3b82f6;font-weight:600;">⭐ 입력 후 URL생성 → 즐겨찾기 업데이트 (강력 추천)</div> </div> <!-- ★★★ 섹션 사이 배너(광고) 이미지 삽입 방법 ★★★ [방법 1] 티스토리 스킨 이미지 파일 업로드 후 URL 사용: 스킨편집 → 파일업로드 → banner.jpg 업로드 → URL 복사 <img src="https://티스토리cdn주소/banner.jpg" style="width:100%;max-width:100%;border-radius:12px;margin:4px 0;display:block;" alt="배너"> [방법 2] 섹션 사이 직접 삽입 위치: 아래 HTML에서 원하는 divider-arrow 사이에 아래 코드를 넣으세요: <div class="sec-banner" id="banner-1"> <a href="https://링크주소" target="_blank"> <img src="이미지URL" style="width:100%;border-radius:12px;margin:2px 0;display:block;" alt="배너"> </a> </div> [권장 이미지 사이즈] 가로: 720px 이상 (모바일 최적) 세로: 90~200px (띠배너), 300~400px (박스배너) 파일형식: JPG 또는 WebP (PNG는 용량 큼) [배너 보이기/숨기기]: document.getElementById('banner-1').style.display = 'block'; // 보이기 document.getElementById('banner-1').style.display = 'none'; // 숨기기 [화살표삭제 버튼]: 섹션간 ↓ 화살표를 모두 제거합니다. 배너를 직접 삽입하면 화살표 삭제 후 배너만 남겨 깔끔하게 보입니다. --> </div> <p></p> <!-- 모달들 --> <div id="modalOverlay" class="modal-overlay"><div id="modalContent" class="modal-box">&nbsp;</div></div> <div id="monthViewerOverlay" class="modal-overlay"> <div class="modal-box"> <div class="mv-header"> <h3 style="font-size:14px;"> <span id="mvMonthLabel"></span> 전체보기</h3> <button class="mv-close" onclick="closeMonthViewer()">✕</button> </div> <button class="mv-filter-btn" id="mvFilterBtn" onclick="toggleMonthViewerFilter()" title="제목이 입력된 섹션만 모아서 봅니다">☐ 제목 입력된 섹션만 보기</button> <div class="mv-list" id="mvList"></div> </div> </div> <div id="postitFmtOverlay" class="modal-overlay"> <div class="modal-box"> <div class="mv-header"> <h3 style="font-size:14px;"> 포스T잇 서식 고르기</h3> <button class="mv-close" onclick="closePostitFormat()">✕</button> </div> <div class="pf-cats" id="pfCats"></div> <div class="pf-list" id="pfList"></div> </div> </div> <div id="qrOverlay" class="modal-overlay"> <div class="qr-box"> <h3> QR 코드 공유</h3> <p>TinyURL 단축 후 QR스캔 → 모바일에서 현재 일정이 그대로 열립니다</p> <!-- URL 타입 탭: 공유용이 기본(앞), 나만의URL이 뒤 --> <div style="display:flex;gap:5px;margin-bottom:8px;background:var(--input-bg);border-radius:10px;padding:4px;"> <button id="qrTabPublic" onclick="switchQrTab('public')" style="flex:1;padding:7px 4px;border:none;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);background:var(--accent);color:#fff;transition:all .15s;"> 공유용URL</button> <button id="qrTabMine" onclick="switchQrTab('mine')" style="flex:1;padding:7px 4px;border:none;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);background:transparent;color:var(--text2);transition:all .15s;"> 나만의URL</button> </div> <div id="qrTabDesc" style="font-size:10px;color:#0369a1;margin-bottom:8px;text-align:left;padding:5px 8px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;line-height:1.6;"> <b>공유용URL</b>: 0-1.kr/6 기준 (상대방 공유용)</div> <div style="background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:7px 10px;font-size:10px;color:#0369a1;margin-bottom:10px;line-height:1.7;text-align:left;"> <b>폰에서 저장하려면</b> 스캔 후 <b>[ 기기저장]</b> 클릭<br><span style="color:#64748b;">※ 동일 기기·동일 브라우저에서만 복원됩니다</span> </div> <div id="qr-warn" style="display:none;background:#fef3c7;border:1px solid #f59e0b;border-radius:8px;padding:7px 10px;font-size:11px;color:#92400e;margin-bottom:10px;text-align:left;">&nbsp;</div> <!-- 기본 QR 컨테이너 제거 → TinyURL QR이 메인 --> <div id="qr-container" style="display:none;">&nbsp;</div> <!-- TinyURL이 기본으로 항상 표시 --> <div id="qrTinyResult" style="display:block;background:var(--input-bg);border-radius:10px;padding:10px;margin-bottom:10px;border:1.5px solid var(--border);"> <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;"> <div style="font-size:11px;font-weight:700;color:var(--text);"> TinyURL 단축 QR</div> <span class="qr-tiny-status" id="qrTinyStatus" style="font-size:10px;color:var(--accent);font-weight:600;"></span> </div> <div class="qr-tiny-url" id="qrTinyUrl" style="font-size:11px;color:var(--accent);word-break:break-all;margin-bottom:6px;font-weight:700;min-height:16px;"></div> <div id="qr-tiny-container" style="display:flex;align-items:center;justify-content:center;min-height:180px;"></div> </div> <!-- 원본URL 토글 (체크박스로 보이기/숨기기) --> <label class="qr-tiny-row" for="qrTinyCheck" style="margin-bottom:6px;align-items:center;"> <input type="checkbox" id="qrTinyCheck" onchange="toggleQrRawUrl()"> <span class="qr-tiny-label-text"> 원본URL 보기</span> <span style="font-size:9px;color:#94a3b8;margin-left:4px;">(주소가 길지만 안전한 링크임)</span> </label> <input id="qr-url" class="qr-url-input" readonly type="text" placeholder="원본URL (체크 시 표시)" style="display:none;margin-bottom:10px;" /> <!-- [V43] 하단 버튼: 원본링크복사 + 단축링크복사 + 닫기 / 말풍선 포함 --> <div class="qr-btns" style="flex-wrap:wrap;gap:6px;"> <div style="position:relative;display:inline-block;"> <button class="qr-btn" onclick="copyQrOriginalUrl()" style="background:#475569;color:#fff;" title="QR과 동일한 원본(긴) 링크를 복사합니다"> 원본URL복사</button> <div style="display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;font-size:9px;padding:6px 9px;border-radius:8px;white-space:nowrap;z-index:9999;line-height:1.7;box-shadow:0 4px 12px rgba(0,0,0,.3);pointer-events:none;" class="qr-tip"> <b>원본URL</b>: 파라미터 포함 원본 주소 복사<br>인터넷 없이도 항상 동작<br>단, QR·문자에선 너무 길 수 있음 <div style="position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1e293b;border-bottom:none;"></div> </div> </div> <div style="position:relative;display:inline-block;"> <button class="qr-btn" onclick="copyQrTinyUrl()" style="background:#10b981;color:#fff;" title="짧게 줄인 링크를 복사합니다 (인터넷 필요)"> 단축링크복사</button> <div style="display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;font-size:9px;padding:6px 9px;border-radius:8px;white-space:nowrap;z-index:9999;line-height:1.7;box-shadow:0 4px 12px rgba(0,0,0,.3);pointer-events:none;" class="qr-tip"> <b>단축링크(TinyURL)</b>: 짧은 URL 복사<br>카톡·문자·QR에 최적<br>단, 인터넷 연결 필요 <div style="position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1e293b;border-bottom:none;"></div> </div> </div> <button class="qr-btn" onclick="closeQR();openMailPopup();" style="background:#2563eb;color:#fff;" title="이메일로 오늘 내용을 보낼 수 있어요"> 이멜공유</button> <button class="qr-btn" onclick="exportRedirectHTML()" style="background:#0ea5e9;color:#fff;"> 파일(html)저장</button> </div> <button class="qr-btn" onclick="closeQR()" style="width:100%;margin-top:8px;background:#e2e8f0;color:#1e293b;">닫기</button> </div> </div> <div id="bmOverlay" class="modal-overlay"><div id="bmContent" class="bm-box">&nbsp;</div></div> <div id="secShareOverlay" class="modal-overlay"> <div class="sec-share-popup"> <h3> 섹션공유 <span style="font-size:11px;font-weight:500;color:var(--text2);">(추천)</span></h3> <div style="font-size:11px;color:var(--text2);line-height:1.8;margin-bottom:8px;background:var(--input-bg);border-radius:9px;padding:9px 11px;"> <b>포스T잇</b>은 항상 포함됩니다.<br>일정·메모·출장 포함 여부는 포스T잇탭 하단 또는 각 탭 하단 체크박스에서 설정하세요(기본 모두 포함).</div> <div style="font-size:11px;font-weight:700;color:var(--text);margin-bottom:4px;" id="secShareTitle"></div> <div class="sec-share-url-box" id="secShareUrl" style="max-height:38px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">생성 중...</div> <div id="secShareIncludeNote" style="font-size:9px;color:#94a3b8;margin:4px 0 2px;"></div> <div style="display:flex;gap:7px;margin-top:6px;flex-wrap:wrap;"> <div style="flex:1;min-width:110px;display:flex;flex-direction:column;gap:3px;"> <button onclick="copySecShareUrl('mine')" style="width:100%;padding:9px;background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff;border:none;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);"> 나만의링크복사</button> <div style="font-size:9px;color:#94a3b8;text-align:center;">개인 링크 — 비공개용</div> </div> <button onclick="copySecShareUrl('public')" style="flex:1;min-width:110px;padding:9px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border:none;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);"> 공유형링크복사</button> </div> <div style="margin-top:10px;border-top:1px solid var(--border);padding-top:10px;"> <div style="font-size:10px;font-weight:700;color:var(--text2);margin-bottom:6px;"> 이메일로 섹션 공유</div> <div style="font-size:9px;color:var(--text2);margin-bottom:5px;">제목 (수정 가능)</div> <input type="text" id="secMailSubj" class="compact-input" style="margin-bottom:6px;font-size:12px;" placeholder="섹션 제목"> <div style="font-size:9px;color:var(--text2);margin-bottom:5px;">받는 사람 이메일</div> <input type="email" id="secMailInput" class="compact-input" style="margin-bottom:6px;font-size:12px;" placeholder="example@email.com"> <div id="secMailPreview" style="font-size:10px;color:var(--text2);background:var(--input-bg);border:1px solid var(--border);border-radius:8px;padding:7px 9px;margin-bottom:7px;min-height:36px;line-height:1.7;word-break:break-all;max-height:100px;overflow-y:auto;"></div> <button onclick="doSendSecMail(window._currentSecId)" style="width:100%;padding:9px;background:#2563eb;color:#fff;border:none;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);margin-bottom:6px;"> 해당 섹션 이멜공유</button> </div> <button onclick="closeSecShare()" style="width:100%;padding:9px;background:var(--input-bg);color:var(--text2);border:1px solid var(--border);border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);">닫기</button> </div> </div> <!-- 주차층 선택 모달 - z-index 최상위로 티스토리 호환 --> <div id="floorOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:999999;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);"> <div style="background:var(--card);width:100%;border-radius:20px;padding:20px;max-height:85vh;overflow-y:auto;max-width:300px;box-shadow:var(--shadow-lg);"> <h3 id="floorModalTitle" style="font-size:15px;font-weight:800;color:var(--text);margin-bottom:12px;"> ️ 주차 층수 선택</h3> <div class="floor-grid" id="floorGrid"></div> <div style="display:flex;gap:8px;margin-top:14px;"> <button style="flex:1;height:44px;border:none;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;font-family:var(--font);background:#e2e8f0;color:#1e293b;" onclick="closeFloorModal()">닫기</button> </div> </div> </div> <div id="toast">&nbsp;</div> <script> /* ═══════════════════════════════════ 강의노트 계산기 V1 - BASE_URL 동적화 (현재 페이지 URL 자동 사용) - URL생성 버튼 + 말풍선 - 난독화 버전 별도 제공 ═══════════════════════════════════ */ let secIdx = 0; let _approvalRestored = false; /* ── 강의노트 계산기: 날짜 기반 상태 ── */ let dayStore = {}; // { 'YYYY-MM-DD': {ti,dtitle,wtitle,dt,ad,qm,pt,pcol,vu,vbm,ccue,cnote,csum,me,ph,sm,sc,pk,to,lk,ws,done,theme,collapsed,tab} } let secDateMap = {}; // { secId: 'YYYY-MM-DD' } let secLastTab = {}; // { secId: 1|2|3 } let anchorDate = null; // 기준일 'YYYY-MM-DD' let visibleDates = []; // 현재 화면에 보이는 날짜 목록 (표시 순서) let calYear, calMonth; // 달력 위젯이 보여주는 연/월 (0-indexed month) - 두 달력이 공유 let calFilterFilledOnly = false; let calSelectedDate = null; let calCollapsed = true; // 상단 달력(기본 접힘) let calCollapsed2 = false; // 하단 달력(기본 펼침) let monthViewerFilterTitleOnly = false; let forceCollapseAll = false; // 월별입력섹션만보기 모드일 때 전체 강제 접힘 let monthlyViewActive = false; // 월별입력섹션만보기 on/off let _savedVisibleDates = null; // 월별뷰 진입 전 상태 백업 let _savedAnchorDate = null; function dayDiff(ds, base) { const d1 = new Date(ds+'T00:00:00'); const d2 = new Date(base+'T00:00:00'); return Math.round((d1-d2)/86400000); } function pad2(n){ return String(n).padStart(2,'0'); } function todayStr(){ const d=new Date(); return d.getFullYear()+'-'+pad2(d.getMonth()+1)+'-'+pad2(d.getDate()); } function addDays(ds, n){ const d = new Date(ds+'T00:00:00'); d.setDate(d.getDate()+n); return d.getFullYear()+'-'+pad2(d.getMonth()+1)+'-'+pad2(d.getDate()); } function ymd(y,m,day){ return y+'-'+pad2(m+1)+'-'+pad2(day); } function daysInMonth(y,m){ return new Date(y,m+1,0).getDate(); } /* ── 음력 변환 (한국천문연구원 KASI 알고리즘 포팅, 1999~2050년) ── */ const LUNAR_BASE_YEAR = 1999; const LUNAR_CUM_BASE = 364880; const SOLAR_CUM_BASE = 364877; const SOLAR_LUNAR_DAY_DIFF = 43; const SOLAR_MONTH_DAYS = [31,28,31,30,31,30,31,31,30,31,30,31,29]; const 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){ const 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){ const 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){ let s=LUNAR_CUM_BASE; for (let y=LUNAR_BASE_YEAR;y<=year;y++) s+=_lunarDays(y); return s; } function _solarDaysBeforeYear(year){ let s=SOLAR_CUM_BASE; for (let y=LUNAR_BASE_YEAR;y<=year;y++) s+=_solarDays(y); return s; } function _lunarDaysBeforeMonth(year, month, isInter){ let s=0; if (year>=LUNAR_BASE_YEAR && month>0) { for (let m=1;m<=month;m++) s+=_lunarDays(year,m,false); if (isInter) { const im=_lunarInterMonth(_lunarData(year)); if (im>0 && im<month+1) s+=_lunarDays(year,im,true); } } return s; } function _solarDaysBeforeMonth(year, month){ let s=0; for (let m=1;m<=month;m++) s+=_solarDays(year,m); return s; } function _lunarAbsDays(year,month,day,isInter){ let 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; const absDays = _solarAbsDays(sy,sm,sd); let lunarYear = (absDays >= _lunarAbsDays(sy,1,1,false)) ? sy : sy-1; let lunarMonth=0, lunarDay=0, isInter=false; for (let month=12; month>=1; month--){ const 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; } } /* ── ISO 8601 연간 주차 (한국 표준: 월요일 시작, 목요일 포함주 기준) ── */ function isoWeekInfo(ds){ const d = new Date(ds+'T00:00:00'); const dow = (d.getDay()+6)%7; // 월=0 ... 일=6 d.setDate(d.getDate() - dow + 3); // 해당 주의 목요일 const isoYear = d.getFullYear(); const firstThu = new Date(isoYear,0,4); const fDow = (firstThu.getDay()+6)%7; firstThu.setDate(firstThu.getDate() - fDow + 3); const week = 1 + Math.round((d - firstThu) / (7*86400000)); return {year:isoYear, week:week}; } /* ── 미국식 연간 주차 (일요일 시작, 1월1일이 속한 주가 1주차) ── */ function usWeekInfo(ds){ const d = new Date(ds+'T00:00:00'); const year = d.getFullYear(); const jan1 = new Date(year,0,1); const jan1Dow = jan1.getDay(); // 0=일 const dayOfYear = Math.round((d - jan1)/86400000) + 1; const week = Math.ceil((dayOfYear + jan1Dow) / 7); return {year:year, week:week}; } /* ── 월 몇째주 (한국 표준: ISO 8601 목요일 규칙 — 그 주의 목요일이 속한 달 기준) ── */ function monthWeekKorean(ds){ const d = new Date(ds+'T00:00:00'); const dow = (d.getDay()+6)%7; // 월=0 ... 일=6 const thu = new Date(d); thu.setDate(d.getDate() - dow + 3); // 이 주의 목요일 const targetMonth = thu.getMonth(), targetYear = thu.getFullYear(); let cursorThu = new Date(targetYear, targetMonth, 1); const cDow = (cursorThu.getDay()+6)%7; cursorThu.setDate(cursorThu.getDate() - cDow + 3); // 그 달 1일이 속한 주의 목요일 if (cursorThu.getMonth() !== targetMonth) cursorThu.setDate(cursorThu.getDate() + 7); // 목요일이 전달이면 다음주로 const weekNum = Math.round((thu - cursorThu) / (7*86400000)) + 1; const names = ['','첫째주','둘째주','셋째주','넷째주','다섯째주','여섯째주']; return (targetMonth+1)+'월 '+(names[weekNum] || (weekNum+'주차')); } /* ── 접속 시간대 기반 지역 자동감지 (외부 API 호출 없이 브라우저 정보만 사용, 근사치) ── */ function detectWeekRegion(){ try { const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || ''; if (tz.indexOf('America/') === 0 || tz.indexOf('Pacific/Honolulu') === 0) return 'us'; return 'kr'; } catch(e) { return 'kr'; } } function getYearWeekInfo(ds){ return (detectWeekRegion() === 'us') ? usWeekInfo(ds) : isoWeekInfo(ds); } function formatSecDate(ds){ if(!ds) return ''; const d = new Date(ds+'T00:00:00'); const days=['일','월','화','수','목','금','토']; return (d.getMonth()+1)+'/'+d.getDate()+'('+days[d.getDay()]+')'; } function formatDateTitleLine(ds){ if(!ds) return ''; const d = new Date(ds+'T00:00:00'); const days=['일','월','화','수','목','금','토']; const yy = String(d.getFullYear()).slice(2); return yy+'년 '+pad2(d.getMonth()+1)+'월 '+pad2(d.getDate())+'일 ('+days[d.getDay()]+') 강의메모'; } /* ── 한국 공휴일 (고정일 + 2025~2027 음력·대체공휴일, 출처: 관공서의 공휴일에 관한 규정) ── */ const HOLIDAYS_FIXED = { '01-01':'신정', '03-01':'삼일절', '05-05':'어린이날', '06-06':'현충일', '08-15':'광복절', '10-03':'개천절', '10-09':'한글날', '12-25':'성탄절' }; const HOLIDAYS_SPECIAL = { '2025-01-27':'설날 임시공휴일','2025-01-28':'설날 연휴','2025-01-29':'설날','2025-01-30':'설날 연휴', '2025-03-03':'삼일절 대체공휴일','2025-05-05':'어린이날·부처님오신날', '2025-10-05':'추석 연휴','2025-10-06':'추석','2025-10-07':'추석 연휴','2025-10-08':'추석 대체공휴일', '2026-02-16':'설날 연휴','2026-02-17':'설날','2026-02-18':'설날 연휴','2026-03-02':'삼일절 대체공휴일', '2026-05-24':'부처님오신날','2026-05-25':'부처님오신날 대체공휴일','2026-08-17':'광복절 대체공휴일', '2026-09-24':'추석 연휴','2026-09-25':'추석','2026-09-26':'추석 연휴','2026-10-05':'개천절 대체공휴일', '2027-02-06':'설날 연휴','2027-02-07':'설날','2027-02-08':'설날 연휴','2027-02-09':'설날 대체공휴일', '2027-05-13':'부처님오신날','2027-08-16':'광복절 대체공휴일', '2027-09-14':'추석 연휴','2027-09-15':'추석','2027-09-16':'추석 연휴', '2027-10-04':'개천절 대체공휴일','2027-10-11':'한글날 대체공휴일','2027-12-27':'성탄절 대체공휴일' }; function getHolidayName(ds){ if (HOLIDAYS_SPECIAL[ds]) return HOLIDAYS_SPECIAL[ds]; const mmdd = ds.slice(5); return HOLIDAYS_FIXED[mmdd] || ''; } function formatWeekLunarLine(ds){ if(!ds) return ''; const d = new Date(ds+'T00:00:00'); const week = getYearWeekInfo(ds); const wYy = String(week.year).slice(2); const mWeek = monthWeekKorean(ds); const lunar = solarToLunar(d.getFullYear(), d.getMonth()+1, d.getDate()); const lunarStr = lunar ? ('음력 '+pad2(lunar.month)+'월'+pad2(lunar.day)+'일'+(lunar.isInter?'(윤달)':'')) : '음력 정보없음'; const holiday = getHolidayName(ds); return wYy+'년 '+week.week+'주차 / '+mWeek+' / '+lunarStr + (holiday ? ' · '+holiday : ''); } function updateTodayTitle(val){ const ds = anchorDate || todayStr(); if (!dayStore[ds]) dayStore[ds] = {}; dayStore[ds].dtitle = val; scheduleAutoSave(); } function updateTodayWeekLunar(val){ const ds = anchorDate || todayStr(); if (!dayStore[ds]) dayStore[ds] = {}; dayStore[ds].wtitle = val; scheduleAutoSave(); } function updateTodayNavLabel(){ const el = document.getElementById('todayNavLabel'); if (!el) return; const ds = anchorDate || todayStr(); const custom = dayStore[ds] && dayStore[ds].dtitle; el.value = (custom !== undefined && custom !== null && custom !== '') ? custom : formatDateTitleLine(ds); const wl = document.getElementById('todayWeekLunar'); if (wl) { const customW = dayStore[ds] && dayStore[ds].wtitle; wl.value = (customW !== undefined && customW !== null && customW !== '') ? customW : formatWeekLunarLine(ds); } } function navDay(delta){ syncVisibleToDayStore(); if (monthlyViewActive) { monthlyViewActive = false; forceCollapseAll = false; updateMonthlyViewBtnLabel(); } const ds = addDays(anchorDate || todayStr(), delta); calSelectedDate = ds; anchorDate = ds; visibleDates = [ds]; rebuildVisibleSections(); refreshCalendarToAnchor(); scheduleAutoSave(); } /* ── 날짜 뷰모드: 뷰1(오늘만) / 뷰2(입력만 배지) / 뷰3(월별 배지) ── */ let dateViewMode = 'v1'; function loadDateViewMode() { try { dateViewMode = localStorage.getItem(LS_DATEVIEWMODE) || 'v1'; } catch(e){ dateViewMode = 'v1'; } } function cycleDateViewMode() { dateViewMode = (dateViewMode === 'v1') ? 'v2' : (dateViewMode === 'v2') ? 'v3' : 'v1'; try { localStorage.setItem(LS_DATEVIEWMODE, dateViewMode); } catch(e){} applyDateViewMode(); } function applyDateViewMode() { const btn = document.getElementById('dateViewModeBtn'); const labels = { v1:' 뷰1_오늘만', v2:' 뷰2_입력만', v3:' 뷰3_월별' }; if (btn) btn.textContent = labels[dateViewMode] || labels.v1; renderDateViewBadges(); } function jumpToDateBadge(ds) { onCalDayClick(ds); } function renderDateViewBadges() { const wrap = document.getElementById('viewBadgeWrap'); if (!wrap) return; if (dateViewMode === 'v1') { wrap.style.display = 'none'; wrap.innerHTML = ''; return; } const today = anchorDate || todayStr(); let html = ''; if (dateViewMode === 'v2') { const dates = Object.keys(dayStore).filter(function(ds){ return ds < today && dayHasContent(dayStore[ds], ds).any; }).sort().reverse().slice(0, 24); // 최근 24개까지 if (!dates.length) { html = '<div class="view-badge-empty">아직 지난 날짜에 입력된 내용이 없어요</div>'; } else { dates.forEach(function(ds){ const d = new Date(ds+'T00:00:00'); const days=['일','월','화','수','목','금','토']; html += '<button class="view-date-badge has-content" onclick="jumpToDateBadge(\''+ds+'\')" title="'+ds+' 로 이동">'+(d.getMonth()+1)+'/'+d.getDate()+'('+days[d.getDay()]+')</button>'; }); } } else if (dateViewMode === 'v3') { const d = new Date(today+'T00:00:00'); const y = d.getFullYear(), m = d.getMonth(); const total = daysInMonth(y, m); for (let day=1; day<=total; day++) { const ds = ymd(y, m, day); const has = dayHasContent(dayStore[ds], ds).any; const isToday = (ds === todayStr()); html += '<button class="view-date-badge'+(has?' has-content':' no-content')+(isToday?' is-today':'')+'" onclick="jumpToDateBadge(\''+ds+'\')" title="'+ds+' 로 이동">'+day+'</button>'; } } wrap.innerHTML = html; wrap.style.display = 'flex'; } function formatSecDateLines(ds){ if(!ds) return {main:'', sub:''}; const d = new Date(ds+'T00:00:00'); const days=['일','월','화','수','목','금','토']; return { main: (d.getMonth()+1)+'/'+d.getDate(), sub: '('+days[d.getDay()]+')' }; } function relDateTag(ds){ if (!anchorDate) return null; const diff = dayDiff(ds, anchorDate); if (diff === 0) return {cls:'rel-today', label:'오늘'}; if (diff === -1) return {cls:'rel-yesterday', label:'어제'}; if (diff === 1) return {cls:'rel-tomorrow', label:'내일'}; if (diff > 1) return {cls:'rel-tomorrow', label:'+'+diff}; if (diff < -1) return {cls:'rel-yesterday', label:String(diff)}; return null; } function escapeHtml(s){ return String(s).replace(/[&<>"']/g, function(c){ return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]; }); } window._currentSecId = 0; let wakeLock = null; let autoSaveTimer = null; let _arrowsHidden = false; /* URL 경로까지 포함한 고유 키 */ const _storeKey = (function(){ try { const h = window.location.hostname.replace(/[^a-z0-9]/gi,'_') || 'local'; const p = window.location.pathname.replace(/[^a-z0-9]/gi,'_').replace(/^_+|_+$/g,'') || 'root'; return h + '__' + p; } catch(e){ return 'local__root'; } })(); const LS_KEY = 'lecnote_v01_' + _storeKey; const LS_YEARPLAN = 'lecnote_v01_yearplan_' + _storeKey; const LS_MONTHPLAN = 'lecnote_v01_monthplan_' + _storeKey; const LS_FAV = 'lecnote_v01_fav_' + _storeKey; const LS_PATTERN = 'lecnote_v01_pattern_' + _storeKey; const LS_WRONGNOTES = 'lecnote_v01_wrongnotes_' + _storeKey; const LS_FLASHCARDS = 'lecnote_v01_flashcards_' + _storeKey; const LS_POMODORO = 'lecnote_v01_pomodoro_' + _storeKey; const LS_DDAY = 'lecnote_v01_dday_' + _storeKey; const LS_DATEVIEWMODE = 'lecnote_v01_dateviewmode_' + _storeKey; /* ── 패턴(루틴) 탭: 날짜와 무관한 고정 루틴 + 날짜별 체크로그 ── */ const PATTERN_CATS = ['기상','출근전','출근','오전일과','점심','오후일과','퇴근','저녁','취침전']; let patternData = { items: [], log: {} }; // items:[{id,cat,label}] log:{ 'YYYY-MM-DD':[itemId,...] } let _patternIdSeq = 0; function loadPatternData() { try { const raw = localStorage.getItem(LS_PATTERN); if (raw) { const p = JSON.parse(raw); patternData = { items: Array.isArray(p.items)?p.items:[], log: p.log && typeof p.log==='object' ? p.log : {} }; } } catch(e){ patternData = { items: [], log: {} }; } // [V8] 카테고리명 변경(오후→오후일과) 하위호환 마이그레이션 patternData.items.forEach(function(it){ if (it.cat === '오후') it.cat = '오후일과'; }); let maxId = 0; patternData.items.forEach(function(it){ const n = parseInt((it.id||'').replace('pi',''),10); if (!isNaN(n) && n>maxId) maxId = n; }); _patternIdSeq = maxId; } function savePatternData() { try { localStorage.setItem(LS_PATTERN, JSON.stringify(patternData)); } catch(e){} } function addPatternItem(cat) { _patternIdSeq++; const id = 'pi' + _patternIdSeq; patternData.items.push({id:id, cat:cat, label:''}); savePatternData(); renderAllPatternTabs(); setTimeout(function(){ const el = document.getElementById('pat-label-'+id); if (el) el.focus(); }, 30); } function patternLabelKeydown(e, cat) { if (e.key === 'Enter') { e.preventDefault(); addPatternItem(cat); } } function removePatternItem(itemId) { patternData.items = patternData.items.filter(function(it){ return it.id !== itemId; }); Object.keys(patternData.log).forEach(function(ds){ patternData.log[ds] = (patternData.log[ds]||[]).filter(function(x){ return x !== itemId; }); }); savePatternData(); renderAllPatternTabs(); } function updatePatternLabel(itemId, val) { const it = patternData.items.find(function(x){ return x.id === itemId; }); if (it) it.label = val; savePatternData(); } function togglePatternCheck(itemId, dateStr) { if (!patternData.log[dateStr]) patternData.log[dateStr] = []; const idx = patternData.log[dateStr].indexOf(itemId); if (idx >= 0) patternData.log[dateStr].splice(idx,1); else patternData.log[dateStr].push(itemId); const it = patternData.items.find(function(x){ return x.id === itemId; }); if (it) { Object.keys(_patCatManual).forEach(function(k){ if (k.indexOf('|'+it.cat+'|'+dateStr) >= 0) delete _patCatManual[k]; }); } savePatternData(); renderAllPatternTabs(); } function patternMonthCount(itemId, dateStr) { const d = new Date((dateStr||todayStr())+'T00:00:00'); const y = d.getFullYear(), m = d.getMonth(); const total = daysInMonth(y,m); let cnt = 0; for (let day=1; day<=total; day++) { const ds = ymd(y,m,day); if (patternData.log[ds] && patternData.log[ds].indexOf(itemId) >= 0) cnt++; } return cnt + '/' + total; } let _patCatManual = {}; // 'id|cat|ds' -> true(펼침)/false(접힘) 수동 오버라이드 /* ── 오답노트 (전역 저장, 날짜 무관) ── */ function loadWrongNotes() { try { return JSON.parse(localStorage.getItem(LS_WRONGNOTES) || '[]'); } catch(e) { return []; } } function saveWrongNotesArr(arr) { try { localStorage.setItem(LS_WRONGNOTES, JSON.stringify(arr)); } catch(e) {} } function wnEmptyHtml() { return '<div class="wn-empty" style="font-size:11px;color:var(--text2);text-align:center;padding:10px 0;">아직 등록된 오답이 없어요</div>'; } function buildWrongNoteCardHtml(idx, n) { n = n || {}; return '<div class="wn-card"><div class="wn-card-top"><span class="wn-card-label">❌ '+(idx+1)+'</span><button class="wn-card-del" onclick="removeWrongNote(this)">✕</button></div>' +'<textarea class="compact-textarea wn-q" placeholder="문제 요약" oninput="autoExpandMemo(this);saveWrongNotesFromDom(this)">'+escapeHtml(n.q||'')+'</textarea>' +'<textarea class="compact-textarea wn-why" placeholder="틀린 이유" oninput="autoExpandMemo(this);saveWrongNotesFromDom(this)">'+escapeHtml(n.why||'')+'</textarea>' +'<textarea class="compact-textarea wn-ans" placeholder="정답 · 풀이" oninput="autoExpandMemo(this);saveWrongNotesFromDom(this)">'+escapeHtml(n.ans||'')+'</textarea></div>'; } function buildWrongNotesListHTML() { const arr = loadWrongNotes(); if (!arr.length) return wnEmptyHtml(); return arr.map(function(n,i){ return buildWrongNoteCardHtml(i,n); }).join(''); } function loadWrongNotesFromList(list) { return Array.from(list.querySelectorAll('.wn-card')).map(function(card){ return { q:(card.querySelector('.wn-q')||{value:''}).value, why:(card.querySelector('.wn-why')||{value:''}).value, ans:(card.querySelector('.wn-ans')||{value:''}).value }; }); } function saveWrongNotesFromDom(el) { const list = el.closest('.wn-list'); if (!list) return; saveWrongNotesArr(loadWrongNotesFromList(list)); } function removeWrongNote(btnEl) { const card = btnEl.closest('.wn-card'); const list = btnEl.closest('.wn-list'); if (card) card.remove(); if (!list) return; Array.from(list.querySelectorAll('.wn-card')).forEach(function(c,i){ const lab=c.querySelector('.wn-card-label'); if (lab) lab.textContent='❌ '+(i+1); }); saveWrongNotesArr(loadWrongNotesFromList(list)); if (!list.querySelectorAll('.wn-card').length) list.innerHTML = wnEmptyHtml(); } function addWrongNote(id) { const list = document.getElementById('wn-list-' + id); if (!list) return; const empty = list.querySelector('.wn-empty'); if (empty) empty.remove(); const idx = list.querySelectorAll('.wn-card').length; const wrap = document.createElement('div'); wrap.innerHTML = buildWrongNoteCardHtml(idx, {}); const card = wrap.firstElementChild; list.appendChild(card); saveWrongNotesArr(loadWrongNotesFromList(list)); const q = card.querySelector('.wn-q'); if (q) q.focus(); } /* ── 암기카드(플래시카드) (전역 저장, 날짜 무관) ── */ function loadFlashcards() { try { return JSON.parse(localStorage.getItem(LS_FLASHCARDS) || '[]'); } catch(e) { return []; } } function saveFlashcardsArr(arr) { try { localStorage.setItem(LS_FLASHCARDS, JSON.stringify(arr)); } catch(e) {} } function fcEmptyHtml() { return '<div class="wn-empty" style="font-size:11px;color:var(--text2);text-align:center;padding:10px 0;">아직 등록된 카드가 없어요</div>'; } function buildFlashcardHtml(idx, c) { c = c || {}; return '<div class="fc-card"><div class="fc-row-top"><span class="fc-label"> '+(idx+1)+'</span><button class="wn-card-del" onclick="removeFlashcard(this)">✕</button></div>' +'<input type="text" class="fc-front-input" placeholder="앞면(용어·질문)" value="'+escapeHtml(c.front||'')+'" oninput="saveFlashcardsFromDom(this)">' +'<div class="fc-flip-wrap"><button class="fc-flip-btn" onclick="toggleFcBack(this)">뒷면 보기</button><textarea class="compact-textarea fc-back-input" placeholder="뒷면(설명·답)" style="display:none;" oninput="autoExpandMemo(this);saveFlashcardsFromDom(this)">'+escapeHtml(c.back||'')+'</textarea></div></div>'; } function buildFlashcardsListHTML() { const arr = loadFlashcards(); if (!arr.length) return fcEmptyHtml(); return arr.map(function(c,i){ return buildFlashcardHtml(i,c); }).join(''); } function loadFlashcardsFromList(list) { return Array.from(list.querySelectorAll('.fc-card')).map(function(card){ return { front:(card.querySelector('.fc-front-input')||{value:''}).value, back:(card.querySelector('.fc-back-input')||{value:''}).value }; }); } function saveFlashcardsFromDom(el) { const list = el.closest('.fc-list'); if (!list) return; saveFlashcardsArr(loadFlashcardsFromList(list)); } function removeFlashcard(btnEl) { const card = btnEl.closest('.fc-card'); const list = btnEl.closest('.fc-list'); if (card) card.remove(); if (!list) return; Array.from(list.querySelectorAll('.fc-card')).forEach(function(c,i){ const lab=c.querySelector('.fc-label'); if (lab) lab.textContent=' '+(i+1); }); saveFlashcardsArr(loadFlashcardsFromList(list)); if (!list.querySelectorAll('.fc-card').length) list.innerHTML = fcEmptyHtml(); } function addFlashcard(id) { const list = document.getElementById('fc-list-' + id); if (!list) return; const empty = list.querySelector('.wn-empty'); if (empty) empty.remove(); const idx = list.querySelectorAll('.fc-card').length; const wrap = document.createElement('div'); wrap.innerHTML = buildFlashcardHtml(idx, {}); const card = wrap.firstElementChild; list.appendChild(card); saveFlashcardsArr(loadFlashcardsFromList(list)); const f = card.querySelector('.fc-front-input'); if (f) f.focus(); } function toggleFcBack(btnEl) { const wrap = btnEl.closest('.fc-flip-wrap'); const ta = wrap ? wrap.querySelector('.fc-back-input') : null; if (!ta) return; const showing = ta.style.display !== 'none'; ta.style.display = showing ? 'none' : ''; btnEl.textContent = showing ? '뒷면 보기' : '뒷면 가리기'; if (!showing) autoExpandMemo(ta); } /* ── 뽀모도로 타이머 (전역 상태 하나를 모든 화면 인스턴스에 동기화) ── */ let _pomo = { mode:'focus', remaining:25*60, running:false, timerId:null, focusMin:25, breakMin:5 }; let _pomoCount = 0; function pomoLoadCount() { try { const data = JSON.parse(localStorage.getItem(LS_POMODORO) || '{}'); return (data.date === todayStr()) ? (data.count || 0) : 0; } catch(e) { return 0; } } function pomoSaveCount() { try { localStorage.setItem(LS_POMODORO, JSON.stringify({ date: todayStr(), count: _pomoCount })); } catch(e) {} } function pomoFormatTime(sec) { const m = Math.floor(sec/60), s = sec%60; return String(m).padStart(2,'0') + ':' + String(s).padStart(2,'0'); } function pomoRender() { document.querySelectorAll('.pomo-display').forEach(function(el){ el.textContent = pomoFormatTime(_pomo.remaining); }); document.querySelectorAll('.pomo-mode-label').forEach(function(el){ el.textContent = (_pomo.mode === 'focus') ? ' 집중시간' : '☕ 쉬는시간'; }); document.querySelectorAll('.pomo-count').forEach(function(el){ el.textContent = _pomoCount; }); } function pomoTick() { if (_pomo.remaining > 0) { _pomo.remaining--; } else { if (_pomo.mode === 'focus') { _pomoCount++; pomoSaveCount(); _pomo.mode = 'break'; _pomo.remaining = _pomo.breakMin * 60; toast('☕ 집중시간 끝! 5분 쉬어가요'); } else { _pomo.mode = 'focus'; _pomo.remaining = _pomo.focusMin * 60; toast(' 다시 집중할 시간이에요!'); } } pomoRender(); } function pomoStart() { if (_pomo.running) return; _pomo.running = true; _pomo.timerId = setInterval(pomoTick, 1000); } function pomoPause() { _pomo.running = false; if (_pomo.timerId) clearInterval(_pomo.timerId); _pomo.timerId = null; } function pomoReset() { pomoPause(); _pomo.mode = 'focus'; _pomo.remaining = _pomo.focusMin * 60; pomoRender(); } /* ── D-day 카운트다운 (전역 저장, 날짜 무관) ── */ function loadDdayArr() { try { return JSON.parse(localStorage.getItem(LS_DDAY) || '[]'); } catch(e) { return []; } } function saveDdayArr(arr) { try { localStorage.setItem(LS_DDAY, JSON.stringify(arr)); } catch(e) {} } function ddayEmptyHtml() { return '<div class="wn-empty" style="font-size:11px;color:var(--text2);text-align:center;padding:10px 0;">등록된 D-day가 없어요</div>'; } function ddayDiffLabel(dateStr) { const today = new Date(todayStr() + 'T00:00:00'); const target = new Date(dateStr + 'T00:00:00'); const diff = Math.round((target - today) / 86400000); if (diff > 0) return { text: 'D-' + diff, cls: '' }; if (diff === 0) return { text: 'D-DAY', cls: 'dday-today' }; return { text: 'D+' + Math.abs(diff), cls: 'dday-past' }; } function buildDdayListHTML() { const arr = loadDdayArr().slice().sort(function(a,b){ return (a.date||'').localeCompare(b.date||''); }); if (!arr.length) return ddayEmptyHtml(); return arr.map(function(it){ const d = ddayDiffLabel(it.date); return '<div class="dday-item"><div class="dday-badge '+d.cls+'">'+d.text+'</div><div class="dday-info"><div class="dday-info-label">'+escapeHtml(it.label||'')+'</div><div class="dday-info-date">'+it.date+'</div></div><button class="dday-del" onclick="removeDdayById(this,\''+it.id+'\')">✕</button></div>'; }).join(''); } function addDday(id) { const labelEl = document.getElementById('dday-label-' + id); const dateEl = document.getElementById('dday-date-' + id); const label = labelEl ? labelEl.value.trim() : ''; const date = dateEl ? dateEl.value : ''; if (!label || !date) { toast('이름과 날짜를 모두 입력하세요'); return; } const arr = loadDdayArr(); arr.push({ id: String(Date.now()) + Math.random().toString(36).slice(2,6), label: label, date: date }); saveDdayArr(arr); document.querySelectorAll('.dday-list').forEach(function(list){ list.innerHTML = buildDdayListHTML(); }); if (labelEl) labelEl.value = ''; if (dateEl) dateEl.value = ''; toast(' ️ D-day 추가됨'); } function removeDdayById(btnEl, itemId) { let arr = loadDdayArr(); arr = arr.filter(function(it){ return String(it.id) !== String(itemId); }); saveDdayArr(arr); document.querySelectorAll('.dday-list').forEach(function(list){ list.innerHTML = buildDdayListHTML(); }); } function buildPatternTabHTML(id, dateStr) { const ds = dateStr || anchorDate || todayStr(); let html = '<div class="pattern-hint"> 매일 반복하는 루틴을 등록하고 체크하세요. 항목은 날짜와 무관하게 고정되고, 체크만 날짜별로 기록됩니다. 모두 완료하면 자동으로 접혀요.</div>'; PATTERN_CATS.forEach(function(cat){ const items = patternData.items.filter(function(it){ return it.cat === cat; }); const checkedCount = items.filter(function(it){ return patternData.log[ds] && patternData.log[ds].indexOf(it.id) >= 0; }).length; const total = items.length; const defaultCollapsed = total > 0 && checkedCount === total; const manualKey = id + '|' + cat + '|' + ds; const collapsed = (_patCatManual[manualKey] !== undefined) ? !_patCatManual[manualKey] : defaultCollapsed; html += '<div class="pattern-cat-block' + (collapsed?' pattern-collapsed':'') + '">'; html += '<div class="pattern-cat-header" onclick="togglePatternCatCollapse(' + id + ',\'' + cat + '\',\'' + ds + '\')">' + '<span class="pattern-cat-arrow">' + (collapsed?'▶':'▼') + '</span>' + '<span class="pattern-cat-title">' + cat + '</span>' + '<button class="pattern-cat-add-btn" onclick="event.stopPropagation();addPatternItem(\'' + cat + '\')" title="' + cat + ' 루틴을 추가해요">＋</button>' + (total>0 ? '<span class="pattern-cat-summary">완료 ' + checkedCount + ' · 미완료 ' + (total-checkedCount) + '</span>' : '') + '</div>'; html += '<div class="pattern-cat-body">'; items.forEach(function(it){ const checked = !!(patternData.log[ds] && patternData.log[ds].indexOf(it.id) >= 0); html += '<div class="pattern-row">' + '<input type="checkbox" class="pattern-chk" ' + (checked?'checked':'') + ' onchange="togglePatternCheck(\'' + it.id + '\',\'' + ds + '\')">' + '<input type="text" class="pattern-label-input" id="pat-label-' + it.id + '" value="' + (it.label||'').replace(/"/g,'&quot;') + '" placeholder="루틴 내용 입력" oninput="updatePatternLabel(\'' + it.id + '\',this.value)" onkeydown="patternLabelKeydown(event,\'' + cat + '\')">' + '<span class="pattern-count">(' + patternMonthCount(it.id, ds) + ')</span>' + '<button class="pattern-del-btn" onclick="removePatternItem(\'' + it.id + '\')" title="이 루틴 삭제">✕</button>' + '</div>'; }); html += '</div>'; // pattern-cat-body html += '</div>'; // pattern-cat-block }); return html; } function togglePatternCatCollapse(id, cat, ds) { const items = patternData.items.filter(function(it){ return it.cat === cat; }); const checkedCount = items.filter(function(it){ return patternData.log[ds] && patternData.log[ds].indexOf(it.id) >= 0; }).length; const defaultCollapsed = items.length > 0 && checkedCount === items.length; const manualKey = id + '|' + cat + '|' + ds; const currentlyExpanded = (_patCatManual[manualKey] !== undefined) ? _patCatManual[manualKey] : !defaultCollapsed; _patCatManual[manualKey] = !currentlyExpanded; renderAllPatternTabs(); } function renderAllPatternTabs() { document.querySelectorAll('[id^="t5-"]').forEach(function(el){ const id = el.id.split('-')[1]; const ds = secDateMap[id] || anchorDate || todayStr(); el.innerHTML = buildPatternTabHTML(id, ds); }); } /* ── 작업순서 탭: 오늘 하루 업무 흐름도(박스+화살표) ── */ const WS_COLORS = ['#f59e0b','#2563eb','#10b981','#8b5cf6','#ef4444','#06b6d4','#ec4899','#84cc16']; function getWsSteps(id) { const ds = secDateMap[id]; const entry = ds && dayStore[ds]; if (entry && Array.isArray(entry.ws)) return entry.ws; return null; } function setWsSteps(id, steps) { const flow = document.getElementById('ws-flow-'+id); if (flow) flow.dataset.steps = JSON.stringify(steps); renderWsFlow(id, steps); } function initWsFlow(id, steps) { const flow = document.getElementById('ws-flow-'+id); if (!flow) return; const s = (steps && steps.length) ? steps : [{id:'ws1',title:'',body:'',color:WS_COLORS[0]}, {id:'ws2',title:'',body:'',color:WS_COLORS[1]}, {id:'ws3',title:'',body:'',color:WS_COLORS[2]}]; flow.dataset.steps = JSON.stringify(s); renderWsFlow(id, s); saveWsHistory(id); } function readWsSteps(id) { const flow = document.getElementById('ws-flow-'+id); if (!flow) return []; try { return JSON.parse(flow.dataset.steps || '[]'); } catch(e){ return []; } } function wsAnnBoxHTML(id, idx, side, ann, color) { if (!ann) return ''; return '<div class="ws-ann-box" style="border-color:' + color + ';background:' + color + '14;">' + '<button class="ws-ann-del" onclick="removeWsAnn(' + id + ',' + idx + ',\'' + side + '\')" title="부연설명 삭제">✕</button>' + '<textarea class="ws-ann-body" placeholder="부연설명 입력" oninput="updateWsAnn(' + id + ',' + idx + ',\'' + side + '\',this.value)" onblur="saveWsHistory(' + id + ')">' + (ann.body||'') + '</textarea>' + '</div>'; } function renderWsFlow(id, steps) { const flow = document.getElementById('ws-flow-'+id); if (!flow) return; const horizontal = flow.classList.contains('ws-horizontal'); let html = ''; steps.forEach(function(st, i){ const done = !!st.done; const hasNext = i < steps.length-1; const annCount = (st.annL?1:0) + (st.annR?1:0); html += '<div class="ws-box' + (done?' ws-done':'') + '" style="border-color:' + st.color + ';background:' + st.color + '0f;">' + '<div class="ws-box-topline" style="border-bottom-color:' + st.color + ';">' + '<label class="ws-done-chk-wrap" title="체크하면 이 작업을 완료 처리해요"><input type="checkbox" class="ws-done-chk" ' + (done?'checked':'') + ' onchange="updateWsStep(' + id + ',\'' + st.id + '\',\'done\',this.checked)"></label>' + '<input type="text" class="ws-box-title" value="' + (st.title||'').replace(/"/g,'&quot;') + '" placeholder="제목" oninput="updateWsStep(' + id + ',\'' + st.id + '\',\'title\',this.value)" onblur="saveWsHistory(' + id + ')">' + (done ? '<span class="ws-done-badge">✔ 완료</span>' : '') + (hasNext && annCount<2 ? '<button class="ws-insert-btn" onclick="addWsAnn(' + id + ',' + i + ')" title="다음 작업으로 넘어가는 화살표에 부연설명을 추가해요">＋</button>' : '') + (steps.length>1 ? '<button class="ws-box-del" onclick="removeWsStep(' + id + ',\'' + st.id + '\')" title="이 작업 삭제">✕</button>' : '') + '</div>' + (done ? '' : '<div class="ws-box-mid">' + '<textarea class="ws-box-body" placeholder="업무 내용" oninput="updateWsStep(' + id + ',\'' + st.id + '\',\'body\',this.value)" onblur="saveWsHistory(' + id + ')">' + (st.body||'') + '</textarea>' + '</div>') + '</div>'; if (hasNext) { const showAnn = !done && annCount > 0; // 앞 작업이 완료되면 부연설명 숨김(다시 펼치면 복원), 없으면 슬롯 자체를 생략 if (horizontal) { html += '<div class="ws-arrow-seg">' + (showAnn ? '<div class="ws-ann-slot ws-ann-slot-top">' + wsAnnBoxHTML(id, i, 'L', st.annL, st.color) + '</div>' : '') + '<div class="ws-arrow-core"><span class="ws-arrow ws-arrow-h"></span></div>' + (showAnn ? '<div class="ws-ann-slot ws-ann-slot-bottom">' + wsAnnBoxHTML(id, i, 'R', st.annR, st.color) + '</div>' : '') + '</div>'; } else { html += '<div class="ws-arrow-seg">' + (showAnn ? '<div class="ws-ann-slot">' + wsAnnBoxHTML(id, i, 'L', st.annL, st.color) + '</div>' : '') + '<div class="ws-arrow-core"><span class="ws-arrow ws-arrow-v"></span></div>' + (showAnn ? '<div class="ws-ann-slot">' + wsAnnBoxHTML(id, i, 'R', st.annR, st.color) + '</div>' : '') + '</div>'; } } }); flow.innerHTML = html; } function updateWsStep(id, stepId, field, val) { const steps = readWsSteps(id); const st = steps.find(function(x){ return x.id === stepId; }); if (st) st[field] = val; const flow = document.getElementById('ws-flow-'+id); if (flow) flow.dataset.steps = JSON.stringify(steps); if (field === 'done') { renderWsFlow(id, steps); saveWsHistory(id); } scheduleAutoSave(); } function addWsStep(id) { const steps = readWsSteps(id); const n = steps.length + 1; steps.push({id:'ws'+Date.now(), title:'', body:'', color: WS_COLORS[(n-1)%WS_COLORS.length]}); setWsSteps(id, steps); saveWsHistory(id); scheduleAutoSave(); } function addWsAnn(id, idx) { const steps = readWsSteps(id); const st = steps[idx]; if (!st) return; if (!st.annR) st.annR = {body:''}; else if (!st.annL) st.annL = {body:''}; else return; setWsSteps(id, steps); saveWsHistory(id); scheduleAutoSave(); } function updateWsAnn(id, idx, side, val) { const steps = readWsSteps(id); const st = steps[idx]; if (!st) return; const ann = side === 'L' ? st.annL : st.annR; if (ann) ann.body = val; const flow = document.getElementById('ws-flow-'+id); if (flow) flow.dataset.steps = JSON.stringify(steps); scheduleAutoSave(); } function removeWsAnn(id, idx, side) { const steps = readWsSteps(id); const st = steps[idx]; if (!st) return; if (side === 'L') st.annL = null; else st.annR = null; setWsSteps(id, steps); saveWsHistory(id); scheduleAutoSave(); } function removeWsStep(id, stepId) { let steps = readWsSteps(id); if (steps.length <= 1) return; steps = steps.filter(function(x){ return x.id !== stepId; }); setWsSteps(id, steps); saveWsHistory(id); scheduleAutoSave(); } /* ── 작업순서 실행취소/다시실행 ── */ var _wsHistory = {}; // {secId: [snapshot,...]} var _wsRedoStack = {}; // {secId: [snapshot,...]} function saveWsHistory(id) { if (!_wsHistory[id]) _wsHistory[id] = []; if (!_wsRedoStack[id]) _wsRedoStack[id] = []; const snap = JSON.stringify(readWsSteps(id)); const hist = _wsHistory[id]; if (hist.length && hist[hist.length-1] === snap) return; hist.push(snap); if (hist.length > 10) hist.shift(); _wsRedoStack[id] = []; } function undoWs(id) { if (!_wsHistory[id] || _wsHistory[id].length < 2) { toast('↩ 더 이상 되돌릴 내용이 없습니다'); return; } if (!_wsRedoStack[id]) _wsRedoStack[id] = []; const current = _wsHistory[id].pop(); _wsRedoStack[id].push(current); const prev = _wsHistory[id][_wsHistory[id].length - 1]; setWsSteps(id, JSON.parse(prev)); scheduleAutoSave(); toast('↩ 실행취소'); } function redoWs(id) { if (!_wsRedoStack[id] || !_wsRedoStack[id].length) { toast('↪ 다시실행할 내용이 없습니다'); return; } const next = _wsRedoStack[id].pop(); if (!_wsHistory[id]) _wsHistory[id] = []; _wsHistory[id].push(next); setWsSteps(id, JSON.parse(next)); scheduleAutoSave(); toast('↪ 다시실행'); } /* ── PC모드 / 모바일모드 ── */ const LS_VIEWMODE = 'lecnote_v01_viewmode_' + _storeKey; function getViewMode() { try { const saved = localStorage.getItem(LS_VIEWMODE); if (saved) return saved; // 사용자가 직접 버튼을 눌러 선택한 적이 있으면 항상 그 값을 우선 사용 } catch(e){} // 저장된 선택이 없으면(첫 방문) 화면 폭으로 자동 판단: 900px 이상이면 PC, 미만이면 폰 return (window.innerWidth >= 900) ? 'pc' : 'mobile'; } function applyViewMode() { const mode = getViewMode(); document.body.classList.toggle('view-pc', mode === 'pc'); document.body.classList.toggle('view-mobile', mode !== 'pc'); const btn = document.getElementById('viewModeBtn'); if (btn) btn.textContent = mode === 'pc' ? ' 폰모드' : ' PC모드'; } function toggleViewMode() { const cur = getViewMode(); const next = cur === 'pc' ? 'mobile' : 'pc'; try { localStorage.setItem(LS_VIEWMODE, next); } catch(e){} applyViewMode(); } function togglePcRow(id, key) { const grp = document.getElementById('pcPair-'+key+'-'+id); if (!grp) return; const collapsed = grp.classList.toggle('pc-row-collapsed'); const hdr = document.getElementById('pcHdr-'+key+'-'+id); if (hdr) { const arrow = hdr.querySelector('.pc-row-arrow'); if (arrow) arrow.textContent = collapsed ? '▶' : '▼'; } } const LS_PCSWAP = 'lecnote_v01_pcswap_' + _storeKey; function getPcSwapState() { try { return JSON.parse(localStorage.getItem(LS_PCSWAP) || '{}'); } catch(e){ return {}; } } // 상태: 0=기본(A 2/3·B 1/3), 1=폭전환(A 1/3·B 2/3), 2=A 전체화면(B 숨김), 3=B 전체화면(A 숨김) // pp(포스T잇·패턴): 포스T잇 버튼은 기본→전체화면→좁게→기본 순환, 패턴 버튼은 좁게↔넓게만 순환(전체화면 없음) const PC_SWAP_NEXT_PP_A = {0:2, 1:0, 2:1, 3:0}; // 포스T잇 <-> 버튼 const PC_SWAP_NEXT_PP_B = {0:1, 1:0, 2:1, 3:0}; // 패턴 <-> 버튼 // ws(작업순서·일정): 기존 4단계 순환 유지 const PC_SWAP_NEXT_WS_A = {0:1, 1:2, 2:0, 3:1}; const PC_SWAP_NEXT_WS_B = {0:3, 1:3, 2:1, 3:0}; function togglePcSwap(id, key, side) { const grp = document.getElementById('pcPair-'+key+'-'+id); if (!grp) return; const cur = parseInt(grp.dataset.swapState || '0', 10); const tableA = (key === 'vp') ? PC_SWAP_NEXT_PP_A : PC_SWAP_NEXT_WS_A; const tableB = (key === 'vp') ? PC_SWAP_NEXT_PP_B : PC_SWAP_NEXT_WS_B; const next = (side === 'b') ? tableB[cur] : tableA[cur]; applyPcSwapClass(grp, next); const st = getPcSwapState(); st[key] = next; try { localStorage.setItem(LS_PCSWAP, JSON.stringify(st)); } catch(e){} } function applyPcSwapClass(grp, state) { grp.dataset.swapState = state; grp.classList.toggle('pc-swapped', state === 1); grp.classList.toggle('pc-full-a', state === 2); grp.classList.toggle('pc-full-b', state === 3); } function applyPcSwapState() { const st = getPcSwapState(); document.querySelectorAll('.pc-pair-group').forEach(function(grp){ const key = grp.id.replace('pcPair-','').replace(/-\d+$/,''); if (st[key] !== undefined) applyPcSwapClass(grp, st[key]); }); } function toggleWsDirection(id) { const flow = document.getElementById('ws-flow-'+id); const btn = document.getElementById('ws-dir-btn-'+id); if (!flow) return; const horizontal = flow.classList.toggle('ws-horizontal'); if (btn) btn.textContent = horizontal ? '↔ 가로모드' : '↕ 세로모드'; renderWsFlow(id, readWsSteps(id)); } /* ★ BASE_URL 동적화 ★ 하드코딩 제거 → 현재 페이지의 실제 URL을 사용 0-1.kr/6 에 올리면 0-1.kr/6?d=... 로 생성 어느 티스토리에 올려도 자동으로 해당 링크가 기본값이 됩니다 */ function getBaseUrl() { try { const loc = window.location; return loc.origin + loc.pathname; } catch(e) { return 'https://0-1.kr/6'; } } /* ── pk1_: pako(deflate) 기반 압축 (LZString 대비 더 짧은 URL, base64url) ── */ function pakoEncode(str) { const utf8 = new TextEncoder().encode(str); const compressed = pako.deflate(utf8); let binary = ''; for (let i=0;i<compressed.length;i++) binary += String.fromCharCode(compressed[i]); return btoa(binary).replace(/\+/g,'-').replace(/\//g,'_').replace(/=+$/,''); } function pakoDecode(b64url) { let b64 = b64url.replace(/-/g,'+').replace(/_/g,'/'); while (b64.length % 4) b64 += '='; const binary = atob(b64); const bytes = new Uint8Array(binary.length); for (let i=0;i<binary.length;i++) bytes[i] = binary.charCodeAt(i); return new TextDecoder().decode(pako.inflate(bytes)); } function encodeUrlData(json) { if (typeof pako !== 'undefined') { try { return 'pk1_' + pakoEncode(json); } catch(e){} } if (typeof LZString !== 'undefined') return 'lz2_' + LZString.compressToEncodedURIComponent(json); return btoa(unescape(encodeURIComponent(json))); } function decodeUrlData(enc) { if (enc.indexOf('pk1_') === 0) return pakoDecode(enc.slice(4)); if (enc.indexOf('lz2_') === 0) return LZString.decompressFromEncodedURIComponent(enc.slice(4)); if (enc.indexOf('lz_') === 0) return LZString.decompressFromEncodedURIComponent(enc.slice(3)); return decodeURIComponent(escape(atob(enc))); } const SEC_THEMES = [ {name:'블루', num:'#2563eb', border:'#bfdbfe'}, {name:'그린', num:'#10b981', border:'#a7f3d0'}, {name:'퍼플', num:'#8b5cf6', border:'#ddd6fe'}, {name:'레드', num:'#ef4444', border:'#fecaca'}, {name:'앰버', num:'#f59e0b', border:'#fde68a'}, {name:'핑크', num:'#ec4899', border:'#fbcfe8'}, {name:'슬레이트',num:'#64748b', border:'#e2e8f0'}, ]; /* ── iOS 호환 클립보드 복사 ── */ function clipCopy(text) { return new Promise((resolve, reject) => { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(resolve).catch(() => fallbackCopy(text, resolve, reject)); } else { fallbackCopy(text, resolve, reject); } }); } function fallbackCopy(text, resolve, reject) { try { const ta = document.createElement('textarea'); ta.value = text; ta.style.cssText = 'position:fixed;top:-9999px;left:-9999px;opacity:0;'; document.body.appendChild(ta); ta.focus(); ta.select(); if (document.execCommand('copy')) { document.body.removeChild(ta); resolve(); } else { document.body.removeChild(ta); reject(new Error('execCommand 실패')); } } catch(e) { reject(e); } } /* ── 토스트 ── */ function toast(msg, ms=2200) { const el = document.getElementById('toast'); el.textContent = msg; el.classList.add('on'); setTimeout(() => el.classList.remove('on'), ms); } /* ── 사용설명서 ── */ function toggleGuide() { const body = document.getElementById('guideBody'); const arrow = document.getElementById('guideArrow'); const isOpen = body.style.display !== 'none'; body.style.display = isOpen ? 'none' : 'block'; arrow.textContent = isOpen ? '▼' : '▲'; } function switchGuideTab(idx) { document.querySelectorAll('.guide-tab').forEach((t,i) => t.classList.toggle('active', i===idx)); document.querySelectorAll('.guide-panel').forEach((p,i) => p.classList.toggle('active', i===idx)); } /* ★ HTML에서 즐겨가기 기본 주소 수정 방법 ★ 아래 FAV_DEFAULTS 배열의 '' 부분에 주소를 입력하세요. 예: '서울 강남구 테헤란로 123' 또는 '우리집' localStorage에 저장값이 없을 때(첫 실행 또는 초기화 후)만 적용됩니다. */ const FAV_DEFAULTS = [ '', /* 주소1: 예) '집 주소' */ '', /* 주소2: 예) '회사 주소' */ '', /* 주소3: 예) '자주 가는 곳' */ '', /* 주소4 */ '', /* 주소5 */ '', /* 주소6 */ '', /* 주소7 */ '', /* 주소8 */ '', /* 주소9 */ ]; const FAV_COUNT = 9; // 고정 9개 function getFavData() { const raw = localStorage.getItem(LS_FAV); if (!raw) { const init = { addrs: [...FAV_DEFAULTS], sel: -1 }; localStorage.setItem(LS_FAV, JSON.stringify(init)); return init; } try { const p = JSON.parse(raw); // 구버전(배열) 호환 if (Array.isArray(p)) { const addrs = p.slice(0, p.length > 0 ? p.length - 1 : 0); const sel = typeof p[p.length-1] === 'number' ? p[p.length-1] : -1; return { addrs, sel }; } return { addrs: p.addrs || [], sel: p.sel !== undefined ? p.sel : -1 }; } catch(e) { return { addrs: [...FAV_DEFAULTS], sel: -1 }; } } function saveFavData(data) { localStorage.setItem(LS_FAV, JSON.stringify(data)); } function renderFavGrid() { const grid = document.getElementById('favGrid'); if (!grid) return; const data = getFavData(); // 항상 FAV_COUNT(9)개 표시 while (data.addrs.length < FAV_COUNT) data.addrs.push(''); const selIdx = data.sel; grid.innerHTML = ''; for (let i = 0; i < FAV_COUNT; i++) { const val = data.addrs[i] || ''; const isChecked = selIdx === i; const div = document.createElement('div'); div.className = 'fav-item' + (isChecked ? ' selected' : ''); div.id = 'fav-item-' + i; div.innerHTML = `<input type="checkbox" class="fav-check" id="fav-chk-${i}" ${isChecked?'checked':''} onclick="toggleFavCheck(${i})"> <input type="text" class="fav-input" id="fav-addr-${i}" value="${val.replace(/"/g,'&quot;')}" placeholder="주소 ${i+1}" oninput="saveFavAddr(${i})">`; grid.appendChild(div); } } function toggleFavCheck(idx) { const data = getFavData(); if (data.sel === idx) { data.sel = -1; // 재클릭 → 해제 } else { data.sel = idx; } saveFavData(data); // UI 갱신 for (let i = 0; i < 20; i++) { const chk = document.getElementById('fav-chk-' + i); const item = document.getElementById('fav-item-' + i); if (!chk) break; chk.checked = (i === data.sel); if (item) item.classList.toggle('selected', i === data.sel); } } function saveFavAddr(idx) { const val = (document.getElementById('fav-addr-' + idx)||{value:""}).value || ''; const data = getFavData(); data.addrs[idx] = val; saveFavData(data); } function addFavSlot() { const data = getFavData(); data.addrs.push(''); saveFavData(data); renderFavGrid(); const newIdx = data.addrs.length - 1; setTimeout(() => { const inp = document.getElementById('fav-addr-' + newIdx); if (inp) inp.focus(); }, 80); } function getSelectedFavAddr() { const data = getFavData(); if (data.sel < 0) return ''; return data.addrs[data.sel] || ''; } function searchNearby(keyword) { const mapType = (document.querySelector('input[name="nearbyMap"]:checked')||{value:""}).value || 'naver'; const enc = encodeURIComponent('근처 ' + keyword); const encKw = encodeURIComponent(keyword); // 각 지도별 현재위치 근처 검색 URL // 네이버: /v5/search/근처 약국 (현재위치 기반으로 자동 처리) // 구글: maps/search/근처+약국 (현재위치 기반) // 카카오: 검색어로 현재위치 근처 검색 const urls = { naver: `https://map.naver.com/v5/search/${enc}`, google: `https://www.google.com/maps/search/${encKw}+near+me`, kakao: `https://map.kakao.com/?q=${enc}` }; const url = urls[mapType]; if (!url) return; try { const link = document.createElement('a'); link.href = url; link.target = '_blank'; link.rel = 'noopener noreferrer'; link.style.cssText = 'position:fixed;top:-9999px;left:-9999px;'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch(e) { window.location.href = url; } } function navFav(type) { const addr = getSelectedFavAddr(); if (!addr) { toast('체크박스로 주소를 먼저 선택하세요'); return; } _openMapUrl(type, addr); } /* ── 1년계획 (연도별로 계속 유지) ── */ function getCurrentYearStr() { return String(new Date().getFullYear()); } function loadYearPlan() { try { const data = JSON.parse(localStorage.getItem(LS_YEARPLAN) || '{}'); const y = getCurrentYearStr(); const labelEl = document.getElementById('hdrGoalYearLabel'); if (labelEl) labelEl.textContent = y.slice(2) + '년목표'; const el = document.getElementById('hdrGoalYear'); if (el) el.value = data[y] || ''; } catch(e) {} } function saveYearPlan() { try { const data = JSON.parse(localStorage.getItem(LS_YEARPLAN) || '{}'); const el = document.getElementById('hdrGoalYear'); data[getCurrentYearStr()] = el ? el.value : ''; localStorage.setItem(LS_YEARPLAN, JSON.stringify(data)); } catch(e) {} } /* ── 이달목표 (헤더 미니 표시, 월이 바뀌면 자동 전환) ── */ function getCurrentMonthKey() { const d = new Date(); return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0'); } function loadMonthPlan() { try { const data = JSON.parse(localStorage.getItem(LS_MONTHPLAN) || '{}'); const key = getCurrentMonthKey(); const labelEl = document.getElementById('hdrGoalMonthLabel'); if (labelEl) labelEl.textContent = (parseInt(key.split('-')[1],10)) + '월목표'; const el = document.getElementById('hdrGoalMonth'); if (el) el.value = data[key] || ''; } catch(e) {} } function saveMonthPlan() { try { const data = JSON.parse(localStorage.getItem(LS_MONTHPLAN) || '{}'); const el = document.getElementById('hdrGoalMonth'); data[getCurrentMonthKey()] = el ? el.value : ''; localStorage.setItem(LS_MONTHPLAN, JSON.stringify(data)); } catch(e) {} } /* ── 시간 옵션 ── */ function buildTimeOptions() { let opts = '<option value="">시간</option>'; const order = []; for (let h=6;h<24;h++) order.push(h); for (let h=0;h<6;h++) order.push(h); order.forEach(h => ['00','30'].forEach(m => { const v = `${String(h).padStart(2,'0')}:${m}`; opts += `<option value="${v}">${v}</option>`; })); return opts; } /* ── 진행률 ── */ function updateProgress() { const cards = document.querySelectorAll('.section-card'); const done = document.querySelectorAll('.section-card.completed').length; const total = cards.length; document.getElementById('progress-fill').style.width = (total ? done/total*100 : 0) + '%'; document.getElementById('progress-label').textContent = `${done} / ${total} 완료`; } /* ── 저장시간 포맷: 260522_13:00 ── */ function fmtSaveTime() { const d = new Date(); const yy = String(d.getFullYear()).slice(2); const mm = String(d.getMonth()+1).padStart(2,'0'); const dd = String(d.getDate()).padStart(2,'0'); const hh = String(d.getHours()).padStart(2,'0'); const mi = String(d.getMinutes()).padStart(2,'0'); return yy+'년'+mm+'월'+dd+'일_'+hh+'시'+mi+'분'; } /* ── 자동저장 ── */ /* ── 상세메모 자동 높이 확장 ── */ function autoExpandMemo(el) { el.style.height = 'auto'; var minH = 68; // 기본 3줄 var newH = Math.max(minH, el.scrollHeight); el.style.height = newH + 'px'; } let _isRestoring = false; // [V41] 복원 중 autoSave 차단 플래그 function scheduleAutoSave() { if (_isRestoring) return; // 복원 중에는 autoSave 예약 금지 clearTimeout(autoSaveTimer); autoSaveTimer = setTimeout(autoSave, 700); } function autoSave() { try { const enc = collectData(); localStorage.setItem(LS_KEY, enc); document.getElementById('autoSaveUnder').textContent = ' 최종저장: ' + fmtSaveTime(); } catch(e) {} } /* ── 페이지 로드 ── */ /* ── 모바일 탭 툴팁: title 속성은 터치기기에서 호버가 없어 표시되지 않으므로, 탭하면 짧게 말풍선으로 보여주는 전역 핸들러 (기존 title="..."을 그대로 활용) ── */ (function(){ let tipEl = null, tipTimer = null; function ensureTipEl(){ if (tipEl) return tipEl; tipEl = document.createElement('div'); tipEl.className = 'global-tap-tip'; document.body.appendChild(tipEl); return tipEl; } function showTapTip(target, text){ const el = ensureTipEl(); el.textContent = text; el.style.display = 'block'; const r = target.getBoundingClientRect(); const tipW = el.offsetWidth || 160; let left = r.left + r.width/2 - tipW/2; left = Math.max(8, Math.min(left, window.innerWidth - tipW - 8)); let top = r.bottom + 8; if (top + el.offsetHeight > window.innerHeight - 8) top = r.top - el.offsetHeight - 8; el.style.left = left + 'px'; el.style.top = top + 'px'; clearTimeout(tipTimer); tipTimer = setTimeout(function(){ el.style.display='none'; }, 2200); } document.addEventListener('click', function(e){ const t = e.target.closest('[title]'); if (t && t.title) showTapTip(t, t.title); else if (tipEl) tipEl.style.display = 'none'; }, true); })(); try { if ('scrollRestoration' in history) history.scrollRestoration = 'manual'; } catch(e){} window.scrollTo(0, 0); window.addEventListener('load', function() { window.scrollTo(0, 0); const _initErrors = []; function _safeRun(label, fn) { try { fn(); } catch(e) { console.error('[init] '+label+' 오류:', e); _initErrors.push(label+': '+(e && e.message ? e.message : e)); } } _safeRun('연간목표 불러오기', function(){ loadYearPlan(); }); _safeRun('월간목표 불러오기', function(){ loadMonthPlan(); }); _safeRun('뽀모도로', function(){ _pomoCount = pomoLoadCount(); pomoRender(); }); _safeRun('패턴 불러오기', function(){ loadPatternData(); }); _safeRun('날짜뷰모드', function(){ loadDateViewMode(); applyDateViewMode(); }); _safeRun('PC/모바일뷰', function(){ applyViewMode(); }); _safeRun('즐겨찾기', function(){ renderFavGrid(); }); let restored = false; const p = new URLSearchParams(window.location.search); const d = p.get('d'); if (d) { _safeRun('URL 데이터 복원', function(){ applyData(d); restored = true; }); } if (!restored) { const saved = localStorage.getItem(LS_KEY); if (saved) { try { applyData(saved); restored = true; } catch(e) { console.error('[init] 저장된 데이터 복원 오류, 저장값 초기화:', e); _initErrors.push('저장된 데이터 복원: '+(e && e.message ? e.message : e)+' (저장값을 초기화했어요)'); localStorage.removeItem(LS_KEY); } } } if (!restored) { anchorDate = todayStr(); visibleDates = [anchorDate]; _safeRun('오늘 섹션 생성', function(){ rebuildVisibleSections(); }); _safeRun('달력 갱신', function(){ refreshCalendarToAnchor(); }); } /* 위 복원 경로가 전부 실패해서 섹션이 하나도 안 만들어졌으면 마지막 안전망 */ _safeRun('최종 안전망', function(){ if (!document.querySelector('.section-card')) { anchorDate = todayStr(); visibleDates = [anchorDate]; rebuildVisibleSections(); refreshCalendarToAnchor(); } }); _safeRun('진행률', function(){ updateProgress(); }); _safeRun('결재란', function(){ if (!_approvalRestored) initApproval(); }); _safeRun('즐겨찾기(2차)', function(){ renderFavGrid(); }); if (_initErrors.length) { const banner = document.createElement('div'); banner.style.cssText = 'position:relative;background:#fef2f2;border:1.5px solid #fca5a5;color:#991b1b;font-size:11px;line-height:1.6;padding:10px 12px;margin:8px 8px 0;border-radius:10px;font-family:var(--font);'; banner.innerHTML = '⚠️ 일부 기능을 불러오는 중 오류가 ' + _initErrors.length + '건 발생했어요 (아래 목록을 캡처해서 알려주시면 빠르게 고칠 수 있어요):<br>' + _initErrors.map(function(m){ return '· ' + m.replace(/[<>]/g,''); }).join('<br>'); document.body.insertBefore(banner, document.body.firstChild); } // [V47] 페이지 완전 렌더 후 모든 일정 textarea 높이 재계산 // requestAnimationFrame x2: 브라우저 레이아웃 계산 완료 보장 // [V49] sched-text 줄바꿈 높이 3단계 재계산 function recalcSchedHeights() { document.querySelectorAll('.sched-text').forEach(function(el) { if (el.value) { el.style.height = 'auto'; el.style.height = Math.max(26, el.scrollHeight) + 'px'; } }); } requestAnimationFrame(function() { requestAnimationFrame(function() { recalcSchedHeights(); setTimeout(recalcSchedHeights, 200); // 최종 보장 setTimeout(function(){ window.scrollTo(0, 0); }, 60); }); }); }); /* ── 섹션(=날짜) 렌더링 ── */ function renderSectionForDate(dateStr) { secIdx++; const id = secIdx; secDateMap[id] = dateStr; const container = document.getElementById('dynamic-sections'); if (container.innerHTML.trim() === '&nbsp;' || container.innerHTML.trim() === '') container.innerHTML = ''; if (container.querySelectorAll('.section-card').length > 0) { const arrow = document.createElement('div'); arrow.className = 'divider-arrow'; arrow.textContent = '↓'; container.appendChild(arrow); } const sec = document.createElement('div'); sec.className = 'section-card'; sec.id = `sec-container-${id}`; sec.innerHTML = buildSecHTML(id, dateStr, SEC_THEMES[0]); container.appendChild(sec); applyPcSwapState(); const entry = dayStore[dateStr]; if (entry) { applyTheme(id, entry.theme || 0); let el; el = document.getElementById('sec-title-'+id); if(el) el.value = entry.ti || ''; setDateTime(id, entry.dt || ''); el = document.getElementById('addr-'+id); if(el) el.value = entry.ad || ''; el = document.getElementById('qmemo-'+id); if(el) el.value = entry.qm || ''; { const ptItems = Array.isArray(entry.pt) ? entry.pt : (entry.pt ? [entry.pt] : ['']); setPostitItems(id, ptItems); } applyPostitCols(id, entry.pcol || 1); el = document.getElementById('video-url-'+id); if (el) el.value = entry.vu || ''; { const vbm = document.getElementById('video-bm-'+id); if (vbm) vbm.value = JSON.stringify(entry.vbm || []); } { const vwrap = document.getElementById('video-embed-'+id); applyVideoEmbed(vwrap, entry.vu || ''); } renderVideoPlaylist(id); setVideoMode(id, entry.vmode || 'yt'); el = document.getElementById('cornell-cue-'+id); if (el) { el.value = entry.ccue || ''; autoExpandMemo(el); } el = document.getElementById('cornell-note-'+id); if (el) { el.value = entry.cnote || ''; autoExpandMemo(el); } el = document.getElementById('cornell-sum-'+id); if (el) { el.value = entry.csum || ''; autoExpandMemo(el); } el = document.getElementById('memo-'+id); if(el){ el.value = entry.me||''; if(entry.me) setTimeout(function(){ autoExpandMemo(el); },0); } el = document.getElementById('phone-'+id); if(el) el.value = entry.ph || ''; el = document.getElementById('smemo-'+id); if(el) el.value = entry.sm || ''; if (entry.sc && entry.sc.length) { try { setScheduleItems(id, entry.sc); } catch(se){} } else { ['0-5시','5-8시','8-10시','10-12시','12-14시','14-16시','16-18시','18-23시'].forEach(function(lbl){ addScheduleItem(id,'',lbl,null); }); } el = document.getElementById('park-loc-'+id); if(el) el.value = entry.pk || ''; if (entry.lk && entry.lk.length) { try { setLinks(id, entry.lk); } catch(le){ addLinkItem(id); } } else addLinkItem(id); const bx = document.getElementById('todo-box-'+id); if(bx) bx.innerHTML=''; if (entry.to && entry.to.length) entry.to.forEach(function(t){ addTodo(id, t.v, t.c); }); else addTodo(id); if (entry.done) { const c = document.getElementById('sec-container-'+id); if(c) c.classList.add('completed'); } if (entry.collapsed) { const c = document.getElementById('sec-container-'+id); if(c) c.classList.add('sec-collapsed'); } initWsFlow(id, entry.ws); let tab = entry.tab || 4; if (tab === 1) tab = 4; // 구버전 출장탭 기록은 포스T잇으로 대체 secLastTab[id] = tab; if (tab !== 4) switchTab(id, tab); saveSchedHistory(id); } else { applyTheme(id, 0); addPostitNote(id, ''); addPostitNote(id, ''); addPostitNote(id, ''); addPostitNote(id, ''); addPostitNote(id, ''); addPostitNote(id, ''); applyPostitCols(id, 1); renderVideoPlaylist(id); setVideoMode(id, 'yt'); addTodo(id); addLinkItem(id); initWsFlow(id, null); ['0-5시','5-8시','8-10시','10-12시','12-14시','14-16시','16-18시','18-23시'].forEach(function(lbl) { addScheduleItem(id, '', lbl, null); }); saveSchedHistory(id); secLastTab[id] = 4; // 어제/내일(기본 3섹션 중 오늘이 아닌 쪽)은 기본 접힘, 오늘/그 외 추가섹션은 펼침 const diff = dayDiff(dateStr, anchorDate); if (diff === -1 || diff === 1) { const c = document.getElementById('sec-container-'+id); if (c) c.classList.add('sec-collapsed'); } } if (forceCollapseAll) { const c = document.getElementById('sec-container-'+id); if (c) c.classList.add('sec-collapsed'); } } /* "＋ 섹션 추가" 버튼: 현재 마지막 표시일 다음날을 이어붙임 */ function addDaySection() { syncVisibleToDayStore(); const lastDate = visibleDates.length ? visibleDates[visibleDates.length-1] : (anchorDate || todayStr()); const nextDate = addDays(lastDate, 1); visibleDates.push(nextDate); renderSectionForDate(nextDate); scheduleAutoSave(); updateProgress(); } /* 화면에 보이는 섹션 전체를 anchorDate 기준 [어제,오늘,내일]로 재구성 */ function rebuildVisibleSections() { const container = document.getElementById('dynamic-sections'); container.innerHTML = ''; secIdx = 0; secDateMap = {}; secLastTab = {}; visibleDates.forEach(function(ds){ renderSectionForDate(ds); }); updateProgress(); } /* 현재 화면의 섹션 DOM 값을 dayStore로 동기화 (달력/공유/저장 전에 항상 호출) */ function syncVisibleToDayStore() { document.querySelectorAll('#dynamic-sections .section-card').forEach(function(c){ const id = c.id.split('-')[2]; const date = secDateMap[id]; if (!date) return; const ts = []; const todoBox = document.getElementById(`todo-box-${id}`); if (todoBox) { todoBox.querySelectorAll('.todo-item').forEach(function(d){ const v = (d.querySelector('input[type="text"]')||{value:""}).value || ''; const ch = !!((d.querySelector('input[type="checkbox"]'))||{}).checked; ts.push({v:v, c:ch}); }); } dayStore[date] = { ti: (document.getElementById(`sec-title-${id}`)||{value:""}).value || '', dtitle: (dayStore[date] && dayStore[date].dtitle) || '', wtitle: (dayStore[date] && dayStore[date].wtitle) || '', dt: getDateTime(id), ad: (document.getElementById(`addr-${id}`)||{value:""}).value || '', qm: (document.getElementById(`qmemo-${id}`)||{value:""}).value || '', pt: getPostitItems(id), pcol: getPostitCols(id), vu: (document.getElementById(`video-url-${id}`)||{value:""}).value || '', vbm: (function(){ try { return JSON.parse((document.getElementById('video-bm-'+id)||{}).value || '[]'); } catch(e){ return []; } })(), vmode: _videoMode[id] || 'yt', ccue: (document.getElementById(`cornell-cue-${id}`)||{value:""}).value || '', cnote: (document.getElementById(`cornell-note-${id}`)||{value:""}).value || '', csum: (document.getElementById(`cornell-sum-${id}`)||{value:""}).value || '', me: (document.getElementById(`memo-${id}`)||{value:""}).value || '', ph: (document.getElementById(`phone-${id}`)||{value:""}).value || '', sm: (document.getElementById(`smemo-${id}`)||{value:""}).value || '', sc: getScheduleItems(id), pk: (document.getElementById(`park-loc-${id}`)||{value:""}).value || '', to: ts, lk: getLinks(id), ws: readWsSteps(id), done: c.classList.contains('completed'), theme: parseInt(c.dataset.theme || '0'), collapsed: c.classList.contains('sec-collapsed'), tab: secLastTab[id] || 4 }; }); } /* 섹션 순서를 바꾸면(▲▼) visibleDates 순서도 동일하게 맞춘다 */ function syncVisibleDatesOrder() { const arr = []; document.querySelectorAll('#dynamic-sections .section-card').forEach(function(c){ const id = c.id.split('-')[2]; if (secDateMap[id]) arr.push(secDateMap[id]); }); visibleDates = arr; } function buildSecHTML(id, dateStr, th) { const relTag = relDateTag(dateStr); const dl = formatSecDateLines(dateStr); return ` <div class="sec-header"> <div class="sec-badge-wrap"> ${relTag ? `<span class="sec-rel-tag ${relTag.cls}">${relTag.label}</span>` : '<span class="sec-rel-tag sec-rel-tag-empty">&nbsp;</span>'} <div class="sec-num-badge" id="sec-badge-${id}" onclick="toggleSecBody(${id})" title="클릭하여 접기/펼치기"><span class="badge-main">${dl.main}</span><span class="badge-sub">${dl.sub}</span></div> </div> <input type="text" class="sec-title-input" id="sec-title-${id}" value="" placeholder="오늘은 뭐라고 표현해볼까요?" oninput="scheduleAutoSave()"> <div class="sec-actions"> <button class="sec-act-btn" id="chk-${id}" onclick="openSecShare(${id})" title="이 섹션 공유"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg> </button> <button class="sec-act-btn" onclick="moveSec(${id},-1)" title="위로">▲</button> <button class="sec-act-btn" onclick="moveSec(${id},1)" title="아래로">▼</button> </div> </div> <div class="sec-collapse-hint">날짜 클릭하면 접힙니다</div> <div class="sec-body" id="sec-body-${id}"> <div class="nav-tabs"> <button class="nav-tab" data-tab="7" onclick="switchTab(${id},7)"> 영상</button> <button class="nav-tab active" data-tab="4" onclick="switchTab(${id},4)"> 포스T잇</button> <button class="nav-tab" data-tab="5" onclick="switchTab(${id},5)"> 패턴</button> <button class="nav-tab" data-tab="3" onclick="switchTab(${id},3)"> 일정</button> <button class="nav-tab" data-tab="6" onclick="switchTab(${id},6)"> 작업순서</button> <button class="nav-tab" data-tab="12" onclick="switchTab(${id},12)">✍️ 코넬노트</button> <button class="nav-tab" data-tab="8" onclick="switchTab(${id},8)">❌ 오답노트</button> <button class="nav-tab" data-tab="9" onclick="switchTab(${id},9)"> 암기카드</button> <button class="nav-tab" data-tab="10" onclick="switchTab(${id},10)">⏱️ 뽀모도로</button> <button class="nav-tab" data-tab="11" onclick="switchTab(${id},11)"> ️ D-day</button> </div> <!-- 영상보기+포스T잇 묶음 (PC모드 아코디언+폭조절) --> <div class="pc-pair-group pc-pair-vp" id="pcPair-vp-${id}"> <div class="pc-row-header pc-hdr-vp" id="pcHdr-vp-${id}" onclick="togglePcRow(${id},'vp')" title="눌러서 영상보기·포스T잇 영역을 접거나 펼쳐요"><span class="pc-row-arrow">▼</span> 영상보기 · 포스T잇</div> <div class="pc-pair-body"> <!-- 영상보기탭 (유튜브 링크 임베드 + 북마크) --> <div id="t7-${id}" class="content-area"> <div class="pc-box-title"> 영상보기 <button class="pc-swap-btn" onclick="togglePcSwap(${id},'vp','a')" title="누를 때마다 [기본 2/3] → [전체화면] → [좁게 1/3] → [기본] 순으로 폭이 바뀌어요">⟷</button><button class="pc-reopen-btn pc-reopen-b" onclick="togglePcSwap(${id},'vp','b')" title="숨겨진 포스T잇 영역을 다시 보여줘요"> 포스T잇 ⟷</button></div> <div class="vmode-select" id="vmode-select-${id}"> <button class="vmode-btn active" data-mode="yt" onclick="setVideoMode(${id},'yt')"> Y영상보기</button> <button class="vmode-btn" data-mode="file" onclick="setVideoMode(${id},'file')"> 영상불러오기</button> <button class="vmode-btn" data-mode="photo" onclick="setVideoMode(${id},'photo')"> ️ 사진불러오기</button> </div> <!-- 모드1: 유튜브 링크 재생 + 재생목록 --> <div class="vmode-panel" id="vmode-yt-${id}"> <div class="vmode-desc">유튜브 링크를 붙여넣으면 바로 재생돼요. ＋목록으로 여러 개 등록해서 재생목록처럼 쓸 수 있어요.</div> <div class="postit-video-url-row"> <input type="text" class="postit-video-url-input" id="video-url-${id}" placeholder="유튜브 링크 붙여넣기 (youtube.com 또는 youtu.be)" oninput="onSecVideoUrlInput(${id})"> <button class="postit-video-bm-btn" onclick="addSecVideoToPlaylist(${id})" title="이 링크를 재생목록에 추가">＋목록</button> </div> <div class="postit-video-embed-wrap" id="video-embed-${id}" style="display:none;"></div> <input type="hidden" id="video-bm-${id}" value=""> <div class="video-playlist-wrap"> <div class="video-playlist-list" id="video-plist-${id}"></div> <button class="video-plist-more" id="video-plist-more-${id}" onclick="toggleVideoPlaylistMore(${id})" style="display:none;">더보기 ▾</button> </div> </div> <!-- 모드2: 내 기기 영상파일 재생 (세션 중에만 유지, 새로고침시 재선택 필요) --> <div class="vmode-panel" id="vmode-file-${id}" style="display:none;"> <div class="vmode-desc">내 기기(폰·PC)에 저장된 영상 파일을 불러와 재생해요. 새로고침하면 다시 선택해야 해요.</div> <label class="vfile-pick-btn"> 영상 파일 선택<input type="file" accept="video/*" style="display:none;" onchange="onVideoFilePick(${id},this)"></label> <div class="vfile-player-wrap" id="vfile-wrap-${id}" style="display:none;"> <video class="vfile-player" id="vfile-player-${id}" controls playsinline></video> <div class="vfile-speed-row"> <span class="vfile-speed-label">배속</span> <button class="vfile-speed-btn" onclick="setVideoSpeed(${id},0.5)">0.5x</button> <button class="vfile-speed-btn vfile-speed-active" onclick="setVideoSpeed(${id},1)">1x</button> <button class="vfile-speed-btn" onclick="setVideoSpeed(${id},1.25)">1.25x</button> <button class="vfile-speed-btn" onclick="setVideoSpeed(${id},1.5)">1.5x</button> <button class="vfile-speed-btn" onclick="setVideoSpeed(${id},2)">2x</button> </div> </div> </div> <!-- 모드3: 사진 불러와 확대/축소 필기 --> <div class="vmode-panel" id="vmode-photo-${id}" style="display:none;"> <div class="vmode-desc">강의 중 찍은 사진을 불러와 확대·축소하며 볼 수 있고, 사진 위에 바로 필기해서 포스T잇으로 보낼 수 있어요. 새로고침하면 다시 선택해야 해요.</div> <label class="vfile-pick-btn"> ️ 사진 추가 (여러장 가능)<input type="file" accept="image/*" multiple style="display:none;" onchange="onPhotoFilesPick(${id},this)"></label> <div class="photo-stage-wrap" id="photo-stage-wrap-${id}" style="display:none;"> <div class="photo-stage" id="photo-stage-${id}"> <img class="photo-stage-img" id="photo-stage-img-${id}" src="" draggable="false"> <div class="photo-note-overlay" id="photo-note-overlay-${id}" contenteditable="true" data-placeholder="사진 위를 눌러 필기하세요"></div> </div> <div class="photo-stage-tools"> <button class="photo-tool-btn" onclick="photoZoom(${id},0.8)" title="축소">－</button> <button class="photo-tool-btn" onclick="photoZoom(${id},1.25)" title="확대">＋</button> <button class="photo-tool-btn" onclick="photoResetZoom(${id})" title="원래크기로">⟲</button> <button class="photo-tool-btn photo-blur-btn" id="photo-blur-btn-${id}" onclick="togglePhotoBlur(${id})" title="배경을 흐리게 해서 필기가 잘 보이게"> 배경흐림</button> <button class="photo-tool-btn" onclick="copyPhotoNoteText(${id})" title="사진 위 필기 내용을 복사해요"> 복사</button> <button class="photo-tool-btn photo-send-btn" onclick="sendPhotoNoteToPostit(${id})" title="사진 위 필기 내용을 새 포스T잇으로 보내요"> 포스T잇으로 보내기</button> </div> <div class="photo-thumb-strip" id="photo-thumb-strip-${id}"></div> </div> </div> </div> <!-- 포스T잇탭 (여러개 생성 가능) --> <div id="t4-${id}" class="content-area active"> <div class="pc-box-title"> 포스T잇 <button class="pc-swap-btn" onclick="togglePcSwap(${id},'vp','b')" title="누를 때마다 [넓게 2/3] ↔ [기본 1/3]으로 폭이 바뀌어요">⟷</button><button class="pc-reopen-btn pc-reopen-a" onclick="togglePcSwap(${id},'vp','a')" title="숨겨진 영상보기 영역을 다시 보여줘요"> 영상보기 ⟷</button></div> <div class="postit-plist-toggle-row"> <button class="postit-plist-toggle-btn" onclick="togglePostitPlaylist(${id})"> 재생목록 <span id="postit-plist-count-${id}">0</span>개 ▾</button> </div> <div class="postit-plist-mini" id="postit-plist-mini-${id}" style="display:none;"> <div class="postit-video-url-row"> <input type="text" class="postit-video-url-input" id="postit-plist-input-${id}" placeholder="유튜브 링크 붙여넣기"> <button class="postit-video-bm-btn" onclick="addFromPostitPlaylist(${id})" title="재생목록에 추가">＋목록</button> </div> <div class="video-playlist-list" id="postit-plist-list-${id}"></div> </div> <div class="postit-col-select"> <button class="postit-col-btn active" data-cols="1" onclick="setPostitCols(${id},1)" title="포스T잇을 1줄로 넓게 배치">▭ 1열</button> <button class="postit-col-btn" data-cols="2" onclick="setPostitCols(${id},2)" title="포스T잇을 2줄로 나란히 배치">▤ 2열</button> </div> <div class="postit-box" id="postit-box-${id}"></div> <button class="add-postit-btn" onclick="addPostitNote(${id})">＋ 포스T잇 추가</button> <div class="postit-share-master"> <div class="postit-share-master-label"> 공유시 포함 <span style="font-weight:500;color:var(--text2);">(포스T잇은 항상 포함)</span></div> <div class="postit-share-master-row"> <label><input type="checkbox" id="share-master-ws-${id}" checked onchange="syncShareCheckbox(${id},'ws',this.checked)"> 작업순서</label> </div> </div> <div class="postit-theme-row"> <div class="postit-theme-label"> 섹션 강조색</div> <div class="theme-row"> ${SEC_THEMES.map((t,i) => `<div class="theme-dot${i===0?' sel':''}" id="dot-${id}-${i}" style="background:${t.num};" onclick="applyTheme(${id},${i})" title="${t.name}"></div>`).join('')} </div> </div> </div> </div> </div> <!-- 패턴+일정 묶음 (PC모드 아코디언+폭조절) --> <div class="pc-pair-group pc-pair-pl pc-row-collapsed" id="pcPair-pl-${id}"> <div class="pc-row-header pc-hdr-pl" id="pcHdr-pl-${id}" onclick="togglePcRow(${id},'pl')" title="눌러서 패턴·일정 영역을 접거나 펼쳐요"><span class="pc-row-arrow">▶</span> 패턴 · 일정</div> <div class="pc-pair-body"> <!-- 패턴탭 (날짜 무관 고정 루틴, 전역 저장) --> <div id="t5-${id}" class="content-area"> <div class="pc-box-title"> 패턴 <button class="pc-swap-btn" onclick="togglePcSwap(${id},'pl','a')" title="누를 때마다 [2:1 기본] → [1:2 넓게] → [전체화면] 순으로 폭이 바뀌어요">⟷</button><button class="pc-reopen-btn pc-reopen-b" onclick="togglePcSwap(${id},'pl','b')" title="숨겨진 일정 영역을 다시 보여줘요"> 일정 ⟷</button></div> ${buildPatternTabHTML(id, dateStr)} </div> <!-- 일정탭 --> <div id="t3-${id}" class="content-area"> <div class="pc-box-title"> 일정 <button class="pc-swap-btn" onclick="togglePcSwap(${id},'pl','b')" title="누를 때마다 [2:1 기본] → [1:2 넓게] → [전체화면] 순으로 폭이 바뀌어요">⟷</button><button class="pc-reopen-btn pc-reopen-a" onclick="togglePcSwap(${id},'pl','a')" title="숨겨진 패턴 영역을 다시 보여줘요"> 패턴 ⟷</button></div> <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:nowrap;"> <div class="memo-label" style="margin:0;flex-shrink:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"> 하루 일정</div> <div class="sched-actions-row" style="display:flex;gap:5px;align-items:center;flex-wrap:wrap;flex-shrink:0;"> <div class="tooltip-wrap"> <button class="add-schedule-btn" onclick="addScheduleAtCursor(${id})">일정+</button> <div class="ap-tip-box" style="white-space:nowrap;">커서 위치 아래에 추가<br>커서 없으면 맨 아래 추가</div> </div> <button class="add-schedule-btn" id="sched-time-toggle-${id}" onclick="toggleSchedTime(${id})" style="color:#64748b;">시간-</button> <div class="tooltip-wrap"> <button class="add-schedule-btn" onclick="deleteCheckedSched(${id})" style="color:var(--danger);">일정섹션-</button> <div class="ap-tip-box" style="white-space:nowrap;">✅ 체크된 일정 삭제</div> </div> <div class="tooltip-wrap"> <button class="sched-undo-btn" onclick="undoSched(${id})" title="실행취소">↩</button> <div class="ap-tip-box" style="white-space:nowrap;">실행취소 (최대10단계)<br>Ctrl+Z 와 동일</div> </div> <div class="tooltip-wrap"> <button class="sched-undo-btn" onclick="redoSched(${id})" title="다시실행">↪</button> <div class="ap-tip-box" style="white-space:nowrap;">다시실행 (최대10단계)<br>Ctrl+Y 와 동일</div> </div> </div> </div> <div id="sched-box-${id}" class="sched-box"></div> <div style="margin-top:10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;"> <button class="add-schedule-btn" id="view-all-btn-${id}" onclick="toggleViewAllSched(${id})" style="background:#f0f9ff;color:#2563eb;border-color:#bae6fd;font-size:11px;padding:0 12px;height:28px;"> 입력한일정만 보기</button> <span style="font-size:9px;color:#94a3b8;">누르면 빈 칸 숨기고 내용 모두 표시</span> </div> </div> </div> </div> <!-- 코넬노트 (오늘 날짜 기준 저장) --> <div class="pc-pair-group pc-pair-cornell" id="pcPair-cornell-${id}"> <div class="pc-row-header pc-hdr-cornell" id="pcHdr-cornell-${id}" onclick="togglePcRow(${id},'cornell')" title="눌러서 코넬노트 영역을 접거나 펼쳐요"><span class="pc-row-arrow">▼</span> ✍️ 코넬노트</div> <div class="pc-pair-body pc-pair-body-single"> <div id="t12-${id}" class="content-area"> <div class="cornell-top"> <textarea class="compact-textarea cornell-cue" id="cornell-cue-${id}" placeholder=" 키워드 · 질문" oninput="autoExpandMemo(this);scheduleAutoSave()"></textarea> <textarea class="compact-textarea cornell-note" id="cornell-note-${id}" placeholder=" 본문 필기" oninput="autoExpandMemo(this);scheduleAutoSave()"></textarea> </div> <textarea class="compact-textarea cornell-summary" id="cornell-sum-${id}" placeholder=" 오늘 배운 내용 요약 (3줄 이내)" oninput="autoExpandMemo(this);scheduleAutoSave()"></textarea> </div> </div> </div> <!-- 작업순서탭 (오늘 하루 업무/학습 흐름도) --> <div class="pc-pair-group pc-pair-wo pc-row-collapsed" id="pcPair-wo-${id}"> <div class="pc-row-header pc-hdr-wo" id="pcHdr-wo-${id}" onclick="togglePcRow(${id},'wo')" title="눌러서 작업순서 영역을 접거나 펼쳐요"><span class="pc-row-arrow">▶</span> 작업순서</div> <div class="pc-pair-body pc-pair-body-single"> <div id="t6-${id}" class="content-area"> <div class="pc-box-title"> 작업순서</div> <div class="ws-toolbar"> <button class="ws-dir-btn" id="ws-dir-btn-${id}" onclick="toggleWsDirection(${id})" title="작업 배치를 세로↔가로로 전환해요">↕ 세로모드</button> <button class="ws-add-btn" onclick="addWsStep(${id})" title="맨 끝에 새 작업 박스를 추가해요">＋ 작업추가</button> <div class="tooltip-wrap"> <button class="sched-undo-btn" onclick="undoWs(${id})" title="실행취소">↩</button> <div class="ap-tip-box" style="white-space:nowrap;">실행취소 (최대10단계)</div> </div> <div class="tooltip-wrap"> <button class="sched-undo-btn" onclick="redoWs(${id})" title="다시실행">↪</button> <div class="ap-tip-box" style="white-space:nowrap;">다시실행 (최대10단계)</div> </div> </div> <div class="ws-flow" id="ws-flow-${id}"></div> <div style="border-top:1px solid var(--border);padding-top:8px;margin-top:10px;"> <label style="display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;"> <input type="checkbox" id="share-ws-${id}" checked style="accent-color:var(--accent);width:15px;height:15px;flex-shrink:0;" onchange="syncShareCheckbox(${id},'ws',this.checked)"> 공유 시 작업순서 내용 포함 </label> </div> </div> </div> </div> <!-- 출장탭(구 네비, 숨김-하위호환용) --> <div id="t1-${id}" class="content-area" style="display:none !important;"> <div class="datetime-row"> <!-- 날짜: 버튼 위에 투명 input 올려서 iOS도 네이티브 picker 작동 --> <div class="date-display-btn" id="date-btn-${id}"> <span id="date-txt-${id}" style="font-size:12px;font-weight:700;">날짜 선택</span> <input type="date" class="date-input-overlay" id="date-${id}" onchange="onDateChange(${id})" onfocus="this.showPicker&&this.showPicker()"> </div> <!-- 시간 --> <select class="time-select" id="time-${id}" onchange="onTimeChange(${id})" style="text-align:center;text-align-last:center;"> ${buildTimeOptions()} </select> </div> <div class="addr-label-row"> <span class="addr-label-badge"> 주소입력</span> </div> <div class="addr-row field-row" style="position:relative;"> <input type="text" class="compact-input addr-input-pad" id="addr-${id}" placeholder="강남로00 or 건물명 입력 후 하단네비선택" oninput="scheduleAutoSave()"> <!-- 공유버튼 말풍선 (단일) --> <div class="addr-share-wrap" id="share-wrap-${id}"> <button class="addr-share-btn" onclick="openSecShare(${id})" onmouseenter="showShareTip(${id})" onmouseleave="hideShareTip(${id})" ontouchstart="toggleShareTip(${id})"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg> </button> <div class="addr-share-tip" id="share-tip-${id}"> 이 섹션에 작성한 내용만(주소, 메모 등) 공유됩니다.<br> 클릭 시 주소가 복사되고 메신저를 통해 상대방에게 공유 가능합니다.<br> 전화메모 등 목적지와 메모 공유 시 활용해보세요. </div> </div> </div> <div class="map-grid"> <button class="map-btn" style="background:#ff3b30;" onclick="setMap(${id},'tmap')">T맵</button> <button class="map-btn" style="background:#2db400;" onclick="setMap(${id},'naver')">네이버</button> <button class="map-btn" style="background:#fae100;color:#3c1e1e;" onclick="setMap(${id},'kakao')">카카오</button> <button class="map-btn" style="background:#4285f4;" onclick="setMap(${id},'google')">구글</button> </div> <div class="qmemo-wrap"> <div class="qmemo-label">✏️ 간단 메모</div> <textarea class="compact-textarea" id="qmemo-${id}" placeholder="(간단 메모 입력)" oninput="autoExpandMemo(this);scheduleAutoSave()"></textarea> </div> <div class="field-row" style="margin-top:6px;"> <div class="memo-label"> ️ 주차위치 or 블박기록</div> <input type="text" class="compact-input" id="park-loc-${id}" placeholder="주차위치 또는 블랙박스 기록 메모" oninput="scheduleAutoSave()"> </div> <div style="border-top:1px solid var(--border);padding-top:8px;margin-top:8px;"> <label style="display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;"> <input type="checkbox" id="share-trip-${id}" checked style="accent-color:var(--accent);width:15px;height:15px;flex-shrink:0;" onchange="syncShareCheckbox(${id},'trip',this.checked)"> 공유 시 출장탭내용 포함 </label> </div> </div> <!-- 오답노트+암기카드 묶음 (전역 저장, 날짜 무관) --> <div class="pc-pair-group pc-pair-qz pc-row-collapsed" id="pcPair-qz-${id}"> <div class="pc-row-header pc-hdr-qz" id="pcHdr-qz-${id}" onclick="togglePcRow(${id},'qz')" title="눌러서 오답노트·암기카드 영역을 접거나 펼쳐요"><span class="pc-row-arrow">▶</span> ❌ 오답노트 · 암기카드</div> <div class="pc-pair-body"> <div id="t8-${id}" class="content-area"> <div class="pc-box-title">❌ 오답노트 <button class="pc-swap-btn" onclick="togglePcSwap(${id},'qz','a')" title="누를 때마다 [기본 2/3] → [전체화면] → [좁게 1/3] → [기본] 순으로 폭이 바뀌어요">⟷</button><button class="pc-reopen-btn pc-reopen-b" onclick="togglePcSwap(${id},'qz','b')" title="숨겨진 암기카드 영역을 다시 보여줘요"> 암기카드 ⟷</button></div> <div class="wn-hint"> 틀린 문제를 [문제]→[틀린 이유]→[정답·풀이] 순으로 정리해두면 시험 직전 복습에 유용해요. 날짜와 무관하게 계속 쌓입니다.</div> <div class="wn-list" id="wn-list-${id}">${buildWrongNotesListHTML()}</div> <button class="add-postit-btn" onclick="addWrongNote(${id})">＋ 오답 추가</button> </div> <div id="t9-${id}" class="content-area"> <div class="pc-box-title"> 암기카드 <button class="pc-swap-btn" onclick="togglePcSwap(${id},'qz','b')" title="누를 때마다 [넓게 2/3] ↔ [기본 1/3]으로 폭이 바뀌어요">⟷</button><button class="pc-reopen-btn pc-reopen-a" onclick="togglePcSwap(${id},'qz','a')" title="숨겨진 오답노트 영역을 다시 보여줘요">❌ 오답노트 ⟷</button></div> <div class="wn-hint"> 앞면에 용어·질문, 뒷면에 답을 적어보세요. [뒷면 보기]를 누르기 전까지 가려져서 실제 암기 테스트처럼 쓸 수 있어요.</div> <div class="fc-list" id="fc-list-${id}">${buildFlashcardsListHTML()}</div> <button class="add-postit-btn" onclick="addFlashcard(${id})">＋ 카드 추가</button> </div> </div> </div> <!-- 뽀모도로 타이머 + D-day 묶음 (전역 저장, 날짜 무관) --> <div class="pc-pair-group pc-pair-tm pc-row-collapsed" id="pcPair-tm-${id}"> <div class="pc-row-header pc-hdr-tm" id="pcHdr-tm-${id}" onclick="togglePcRow(${id},'tm')" title="눌러서 뽀모도로·D-day 영역을 접거나 펼쳐요"><span class="pc-row-arrow">▶</span> ⏱️ 뽀모도로 · ️ D-day</div> <div class="pc-pair-body"> <div id="t10-${id}" class="content-area"> <div class="pc-box-title">⏱️ 뽀모도로 <button class="pc-swap-btn" onclick="togglePcSwap(${id},'tm','a')" title="누를 때마다 [기본 2/3] → [전체화면] → [좁게 1/3] → [기본] 순으로 폭이 바뀌어요">⟷</button><button class="pc-reopen-btn pc-reopen-b" onclick="togglePcSwap(${id},'tm','b')" title="숨겨진 D-day 영역을 다시 보여줘요"> ️ D-day ⟷</button></div> <div class="pomo-wrap"> <div class="pomo-mode-label pomo-mode-label"> 집중시간</div> <div class="pomo-display pomo-display">25:00</div> <div class="pomo-btn-row"> <button class="add-schedule-btn pomo-start-btn" onclick="pomoStart()">▶ 시작</button> <button class="add-schedule-btn pomo-pause-btn" onclick="pomoPause()">⏸ 일시정지</button> <button class="add-schedule-btn" onclick="pomoReset()">↺ 초기화</button> </div> <div class="pomo-session-count">오늘 완료 <b class="pomo-count">0</b>세트</div> </div> </div> <div id="t11-${id}" class="content-area"> <div class="pc-box-title"> ️ D-day <button class="pc-swap-btn" onclick="togglePcSwap(${id},'tm','b')" title="누를 때마다 [넓게 2/3] ↔ [기본 1/3]으로 폭이 바뀌어요">⟷</button><button class="pc-reopen-btn pc-reopen-a" onclick="togglePcSwap(${id},'tm','a')" title="숨겨진 뽀모도로 영역을 다시 보여줘요">⏱️ 뽀모도로 ⟷</button></div> <div class="dday-list" id="dday-list-${id}">${buildDdayListHTML()}</div> <div class="dday-add-row"> <input type="text" class="dday-label-input" id="dday-label-${id}" placeholder="예: 수능, 중간고사"> <input type="date" class="dday-date-input" id="dday-date-${id}"> <button class="add-postit-btn dday-add-btn" onclick="addDday(${id})">＋</button> </div> </div> </div> </div> <button class="sec-del-btn" onclick="removeSec(${id})">✕ 섹션 삭제</button> </div>`; } /* ── 5. 번호배지 클릭으로 접기/펼치기 ── */ function toggleSecBody(id) { const card = document.getElementById(`sec-container-${id}`); if (!card) return; const isCollapsed = card.classList.toggle('sec-collapsed'); const badge = document.getElementById(`sec-badge-${id}`); if (badge) badge.title = isCollapsed ? '클릭하여 펼치기' : '클릭하여 접기'; scheduleAutoSave(); updateProgress(); } /* ── 날짜 선택 (iOS 완전 호환 - overlay 방식) ── */ function openDatePicker(id) { // overlay 방식이므로 직접 클릭 트리거만 유지 (폴백용) const inp = document.getElementById(`date-${id}`); if (!inp) return; try { if (inp.showPicker) inp.showPicker(); else inp.click(); } catch(e) { inp.click(); } } function onDateChange(id) { const val = document.getElementById(`date-${id}`).value; const txt = document.getElementById(`date-txt-${id}`); const btn = document.getElementById(`date-btn-${id}`); if (val) { const d = new Date(val + 'T00:00:00'); const days = ['일','월','화','수','목','금','토']; const yy = String(d.getFullYear()).slice(2); const mm = String(d.getMonth()+1).padStart(2,'0'); const dd = String(d.getDate()).padStart(2,'0'); const day = days[d.getDay()]; const label = `${yy}.${mm}.${dd}(${day})`; if (txt) txt.textContent = label; if (btn) btn.classList.add('has-val'); } else { if (txt) txt.textContent = '날짜 선택'; if (btn) btn.classList.remove('has-val'); } scheduleAutoSave(); } function onTimeChange(id) { const sel = document.getElementById(`time-${id}`); if (sel) sel.classList.toggle('has-time', !!sel.value); scheduleAutoSave(); } /* ── 테마 ── */ function applyTheme(id, idx) { const th = SEC_THEMES[idx % SEC_THEMES.length]; const card = document.getElementById(`sec-container-${id}`); const badge = document.getElementById(`sec-badge-${id}`); if (card) { card.style.borderColor = th.border; card.dataset.theme = idx; } if (badge) badge.style.background = th.num; const titleInput = document.getElementById(`sec-title-${id}`); if (titleInput) titleInput.style.color = idx === 0 ? 'var(--text)' : th.num; SEC_THEMES.forEach((_,i) => { const dot = document.getElementById(`dot-${id}-${i}`); if (dot) dot.classList.toggle('sel', i===idx); }); scheduleAutoSave(); } /* ── 완료 체크 - 제목 취소선+회색 + 섹션 접기 동시 ── */ function toggleComplete(id) { const card = document.getElementById(`sec-container-${id}`); const btn = document.getElementById(`chk-${id}`); const titleInput = document.getElementById(`sec-title-${id}`); const done = card.classList.toggle('completed'); btn.classList.toggle('done', done); // 제목 취소선+회색 if (titleInput) titleInput.classList.toggle('done-title', done); // 완료 → 섹션 접기 / 취소 → 섹션 펼치기 if (done) { card.classList.add('sec-collapsed'); } else { card.classList.remove('sec-collapsed'); } const badge = document.getElementById(`sec-badge-${id}`); if (badge) badge.title = done ? '클릭하여 펼치기' : '클릭하여 접기'; toast(done ? '✅ 완료! (섹션 접힘)' : '↩ 완료 취소'); scheduleAutoSave(); updateProgress(); } /* ── 번호배지 클릭 → 섹션 접기/펼치기 ── */ /* ── 탭 전환 (마지막으로 본 탭을 날짜별로 기억) ── */ function switchTab(s, t) { const c = document.getElementById(`sec-container-${s}`); if (!c) return; c.querySelectorAll('.content-area').forEach(a => a.classList.remove('active')); c.querySelectorAll('.nav-tab').forEach(b => b.classList.remove('active')); const area = document.getElementById(`t${t}-${s}`); if (area) area.classList.add('active'); const btn = c.querySelector(`.nav-tab[data-tab="${t}"]`); if (btn) btn.classList.add('active'); secLastTab[s] = t; scheduleAutoSave(); } /* ── 날짜+시간 ── */ function getDateTime(s) { const date = document.getElementById(`date-${s}`).value; const time = document.getElementById(`time-${s}`).value; if (date && time) return `${date}T${time}`; return date || ''; } function setDateTime(s, dt) { if (!dt) return; const dateEl = document.getElementById(`date-${s}`); if (!dateEl) return; if (dt.includes('T')) { const [d,t] = dt.split('T'); dateEl.value = d; const timeEl = document.getElementById(`time-${s}`); if (timeEl) { timeEl.value = t; timeEl.classList.toggle('has-time', !!t); } } else { dateEl.value = dt; } onDateChange(s); } /* ── 주소 복사 ── */ function copyAddr(s) { const v = (document.getElementById(`addr-${s}`)||{value:""}).value; if (!v) { toast('주소를 먼저 입력하세요'); return; } clipCopy(v).then(()=>toast(' 주소 복사됨!')).catch(()=>toast('복사 실패')); } /* ── 체크리스트 ── */ function addTodo(s, val='', chk=false) { const b = document.getElementById(`todo-box-${s}`); if (!b) return; const d = document.createElement('div'); d.className = 'todo-item'; d.innerHTML = `<input type="checkbox" class="todo-check" ${chk?'checked':''}><input type="text" class="todo-text" value="${val.replace(/"/g,'&quot;')}" placeholder="항목 입력" style="text-decoration:${chk?'line-through':'none'}"><button class="todo-del">✕</button>`; const cb = d.querySelector('.todo-check'); const txt = d.querySelector('.todo-text'); const del = d.querySelector('.todo-del'); cb.addEventListener('change', function() { txt.style.textDecoration = this.checked ? 'line-through' : 'none'; scheduleAutoSave(); }); txt.addEventListener('input', scheduleAutoSave); del.addEventListener('click', function() { d.remove(); scheduleAutoSave(); }); b.appendChild(d); } /* ── 링크 바로가기 ── */ function addLinkItem(s, url_val='') { const b = document.getElementById(`link-box-${s}`); if (!b) return; const d = document.createElement('div'); d.className = 'link-item'; const safe = url_val.replace(/"/g,'&quot;'); d.innerHTML = `<input type="url" class="link-url-input" value="${safe}" placeholder="https://..." oninput="scheduleAutoSave()"> <button class="link-go-btn" onclick="goLink(this)" title="링크 이동">↗</button> <button class="link-del-btn" onclick="this.parentElement.remove();scheduleAutoSave()">✕</button>`; b.appendChild(d); } function goLink(btn) { const inp = btn.previousElementSibling; if (!inp) return; let url = inp.value.trim(); if (!url) { toast('링크를 입력하세요'); return; } if (!/^https?:\/\//i.test(url)) url = 'https://' + url; try { const a = document.createElement('a'); a.href = url; a.target = '_blank'; a.rel = 'noopener noreferrer'; a.style.cssText = 'position:fixed;top:-9999px;left:-9999px;'; document.body.appendChild(a); a.click(); document.body.removeChild(a); } catch(e) { window.open(url, '_blank'); } } function getLinks(s) { const b = document.getElementById(`link-box-${s}`); if (!b) return []; return Array.from(b.querySelectorAll('.link-url-input')).map(inp => inp.value); } function setLinks(s, urls) { const b = document.getElementById(`link-box-${s}`); if (!b) return; b.innerHTML = ''; (urls||[]).forEach(u => addLinkItem(s, u)); } /* ── 통화 ── */ function makeCall(s) { const p = (document.getElementById(`phone-${s}`)||{value:""}).value; if (!p) { toast('전화번호를 입력하세요'); return; } window.location.href = `tel:${p.replace(/[^0-9]/g,'')}`; } function makeCallBlocked(s) { const p = (document.getElementById(`phone-${s}`)||{value:""}).value; if (!p) { toast('전화번호를 입력하세요'); return; } if (confirm('발신번호제한으로 전화됩니다.\n연결하시겠습니까?')) window.location.href = `tel:*23%23${p.replace(/[^0-9]/g,'')}`; } /* ── 지도보기 ── */ async function showMapInTab(s) { const a = (document.getElementById(`addr-${s}`)||{value:""}).value; if (!a) { toast('주소를 먼저 입력하세요'); return; } const f = document.getElementById(`map-frame-${s}`); f.innerHTML = `<iframe width="100%" height="100%" frameborder="0" src="https://maps.google.com/maps?q=${encodeURIComponent(a)}&t=&z=15&ie=UTF8&iwloc=&output=embed" loading="lazy"></iframe>`; const coordEl = document.getElementById(`coords-${s}`); coordEl.innerHTML = '<span style="color:var(--text2);"> 좌표 조회 중...</span>'; try { const res = await fetch(`https://geocode.maps.co/search?q=${encodeURIComponent(a)}&limit=1`,{headers:{'Accept':'application/json'}}); const data = await res.json(); if (data && data.length > 0) { const lat = parseFloat(data[0].lat).toFixed(6); const lon = parseFloat(data[0].lon).toFixed(6); coordEl.innerHTML = `<a class="coords-link" onclick="_openMapUrl('google','${lat},${lon}')" href="javascript:void(0)">위도 ${lat}, 경도 ${lon}</a><br><span style="font-size:9px;color:var(--text2);">※ 클릭 → 구글맵 오픈</span>`; coordEl.dataset.lat = lat; coordEl.dataset.lon = lon; } else { coordEl.innerHTML = '<span style="color:var(--danger);">좌표를 찾을 수 없습니다</span>'; } } catch(e) { coordEl.innerHTML = '<span style="color:#f59e0b;">⚠️ 오프라인 — 좌표 조회 불가</span>'; } } /* ── 지도앱 연결 (iOS Safari 완전 호환) ── */ function setMap(s, type) { const a = (document.getElementById(`addr-${s}`)||{value:""}).value; if (!a) { toast('주소를 입력하세요'); return; } _openMapUrl(type, a); } function _openMapUrl(type, addr) { const enc = encodeURIComponent(addr); const isCoord = /^-?\d+\.\d+,-?\d+\.\d+$/.test(addr.trim()); const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent); if (type === 'tmap') { if (isIOS) { // iOS: T맵 앱 스킴 시도, 1.5초 후 네이버 웹으로 새창 폴백 window.location.href = `tmap://search?name=${enc}`; setTimeout(() => { try { const link = document.createElement('a'); link.href = `https://map.naver.com/v5/search/${enc}`; link.target = '_blank'; link.rel = 'noopener noreferrer'; link.style.cssText = 'position:fixed;top:-9999px;'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch(e) {} }, 1500); } else { // Android/PC: 현재 탭에서 앱 스킴 window.location.href = `tmap://search?name=${enc}`; } return; } const urls = { naver: `https://map.naver.com/v5/search/${enc}`, kakao: `https://map.kakao.com/?q=${enc}`, google: isCoord ? `https://www.google.com/maps?q=${enc}` : `https://www.google.com/maps/search/${enc}` }; const url = urls[type]; if (!url) return; // iOS는 항상 새 탭(뒤로가기 문제 해결), 안드로이드도 새 탭으로 통일 try { const link = document.createElement('a'); link.href = url; link.target = '_blank'; link.rel = 'noopener noreferrer'; link.style.cssText = 'position:fixed;top:-9999px;left:-9999px;'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch(e) { window.open(url, '_blank'); } } /* ── 화면켜짐 (iOS: wakeLock 미지원 시 graceful) ── */ async function toggleWakeLock() { const b = document.getElementById('wakeLockBtn'); if (!navigator.wakeLock) { toast('⚠️ 화면켜짐은 Android Chrome만 지원합니다'); return; } if (!wakeLock) { try { wakeLock = await navigator.wakeLock.request('screen'); b.innerHTML = ' ON'; b.style.background = '#f59e0b'; b.style.color = '#000'; wakeLock.addEventListener('release', () => { wakeLock = null; b.innerHTML = ' 켜짐'; b.style.background = '#1e293b'; b.style.color = '#fff'; }); } catch(e) { toast('화면켜짐 설정 실패: ' + e.message); } } else { await wakeLock.release(); wakeLock = null; b.innerHTML = ' 켜짐'; b.style.background = '#1e293b'; b.style.color = '#fff'; } } /* ── 타이틀 ── */ function getTripTitle() { return ((document.getElementById('tripMainTitle')||{value:""}).value || '').trim() || '강의노트 계산기'; } /* ── 데이터 수집 ── */ function collectData() { syncVisibleToDayStore(); const approvalBoxes = []; document.querySelectorAll('#approvalGrid .approval-box').forEach(box => { const bid = box.id.replace('approval-box-',''); const taEl = document.getElementById('apc-ta-'+bid); approvalBoxes.push({ name: (document.getElementById('ap-name-'+bid)||{value:''}).value, role: (document.getElementById('ap-role-'+bid)||{value:''}).value, signed: !!(document.getElementById('ap-chk-'+bid)||{}).checked, comment: taEl ? taEl.value : '' }); }); var apBody = document.querySelector('.approval-body'); var approval_open = apBody ? apBody.classList.contains('open') : false; // 즐겨가기 데이터 포함 var favData = null; try { favData = JSON.parse(localStorage.getItem(LS_FAV) || 'null'); } catch(e) {} const payload = { shareType:'full', title: getTripTitle(), dayStore: dayStore, visibleDates: visibleDates, anchorDate: anchorDate, approval: approvalBoxes, approval_open: approval_open, fav: favData }; const json = JSON.stringify(payload); return encodeUrlData(json); } /* ── 데이터 복원 ── */ /* [V41] 복원 중 autoSave 차단(_isRestoring), lz2_/lz_ 파싱 안정화, 전체 섹션 복원 보장 */ function applyData(enc) { _isRestoring = true; // 복원 시작: autoSave 예약 차단 clearTimeout(autoSaveTimer); let payload = null, title = ''; try { payload = JSON.parse(decodeUrlData(enc)); } catch(e) { try { payload = JSON.parse(decodeURIComponent(atob(enc))); } catch(e2) { _isRestoring = false; throw new Error('복원 실패: 데이터 형식 오류'); } } if (!payload || typeof payload !== 'object') { _isRestoring = false; throw new Error('복원 실패: 데이터 형식 오류'); } title = payload.title || ''; dayStore = (payload.dayStore && typeof payload.dayStore === 'object') ? payload.dayStore : {}; // [V1] 섹션 단일공유(shareType:'section')만 저장된 날짜를 유지하고, // 그 외(개인 저장/전체 URL 복원)는 항상 오늘 날짜로 강제 이동 if (payload.shareType === 'section' && payload.anchorDate) { anchorDate = payload.anchorDate; visibleDates = (Array.isArray(payload.visibleDates) && payload.visibleDates.length) ? payload.visibleDates : [anchorDate]; } else { anchorDate = todayStr(); visibleDates = [anchorDate]; } const titleEl = document.getElementById('tripMainTitle'); if (titleEl) titleEl.value = title; try { rebuildVisibleSections(); } catch(e) { console.error('[applyData] 섹션 복원 중 오류:', e); } refreshCalendarToAnchor(); // 즐겨가기 복원 if (payload && payload.fav) { try { localStorage.setItem(LS_FAV, JSON.stringify(payload.fav)); renderFavGrid(); } catch(e) {} } if (payload && payload.approval && payload.approval.length > 0) { const grid = document.getElementById('approvalGrid'); if (grid) { grid.innerHTML = ''; _approvalCount = 0; _approvalRestored = true; payload.approval.forEach(b => addApprovalBox(b)); if (payload.approval_open) openApprovalSection(); renderApprovalComments(); // 코멘트 값 복원 document.querySelectorAll('#approvalGrid .approval-box').forEach(box => { const bid = box.id.replace('approval-box-',''); const taEl = document.getElementById('apc-ta-'+bid); if (taEl && box.dataset.comment) taEl.value = box.dataset.comment; }); } } // [V41] 복원 완료: autoSave 허용 + 완전한 상태로 1회 저장 _isRestoring = false; try { var finalEnc = collectData(); localStorage.setItem(LS_KEY, finalEnc); document.getElementById('autoSaveUnder').textContent = ' 복원완료 자동저장: ' + fmtSaveTime(); } catch(e2) {} } /* ══════════════════════════════════════ 달력 위젯 + 월간 뷰어 ══════════════════════════════════════ */ function populateCalMonthSelectOptions(suffix) { suffix = suffix || ''; const sel = document.getElementById('calMonthSelect'+suffix); if (!sel) return; const base = new Date(); let html = ''; for (let i=-24; i<=24; i++) { const y = base.getFullYear(); const m = base.getMonth() + i; const d = new Date(y, m, 1); const val = d.getFullYear() + '-' + pad2(d.getMonth()+1); html += '<option value="' + val + '">' + d.getFullYear() + '년 ' + (d.getMonth()+1) + '월</option>'; } sel.innerHTML = html; } function syncCalMonthSelectValue(suffix) { suffix = suffix || ''; const sel = document.getElementById('calMonthSelect'+suffix); if (!sel) return; const val = calYear + '-' + pad2(calMonth+1); if (sel.value !== val) { if (!sel.querySelector('option[value="'+val+'"]')) { const opt = document.createElement('option'); opt.value = val; opt.textContent = calYear + '년 ' + (calMonth+1) + '월'; sel.appendChild(opt); } sel.value = val; } } function onCalMonthSelectChange(val) { const parts = val.split('-'); calYear = parseInt(parts[0]); calMonth = parseInt(parts[1]) - 1; renderCalendar(''); renderCalendar('2'); if (monthlyViewActive) refreshMonthlyViewList(); } function refreshCalendarToAnchor() { const d = new Date((anchorDate||todayStr())+'T00:00:00'); calYear = d.getFullYear(); calMonth = d.getMonth(); calSelectedDate = anchorDate; populateCalMonthSelectOptions(''); populateCalMonthSelectOptions('2'); renderCalendar(''); renderCalendar('2'); updateCalTodayInline(); applyCalCollapseState(''); applyCalCollapseState('2'); updateTodayNavLabel(); renderDateViewBadges(); } function calPrevMonth() { calMonth--; if (calMonth < 0) { calMonth = 11; calYear--; } renderCalendar(''); renderCalendar('2'); if (monthlyViewActive) refreshMonthlyViewList(); } function calNextMonth() { calMonth++; if (calMonth > 11) { calMonth = 0; calYear++; } renderCalendar(''); renderCalendar('2'); if (monthlyViewActive) refreshMonthlyViewList(); } function toggleCalFilter() { calFilterFilledOnly = !calFilterFilledOnly; document.querySelectorAll('.cal-filter-btn').forEach(function(btn){ btn.textContent = calFilterFilledOnly ? '☑ 입력일정만 보기' : '☐ 입력일정만 보기'; }); renderCalendar(''); renderCalendar('2'); } function dayHasContent(entry, ds) { if (!entry) entry = {}; const postit = Array.isArray(entry.pt) ? entry.pt.some(function(it){ const v = (typeof it === 'string') ? it : ((it && it.v) || ''); return v && v.trim(); }) : !!(entry.pt && entry.pt.trim()); const sched = !!(entry.sc && entry.sc.some(function(s){ return s && (s.v && s.v.trim()); })); const memo = !!(entry.me && entry.me.trim()); const ws = !!(Array.isArray(entry.ws) && entry.ws.some(function(st){ return st && (st.title || st.body); })); const pattern = !!(ds && patternData.log[ds] && patternData.log[ds].length); const hasTitle = !!(entry.ti && entry.ti.trim()); return {postit:postit, sched:sched, memo:memo, ws:ws, pattern:pattern, any: postit||sched||memo||ws||pattern||hasTitle}; } function renderCalendar(suffix) { suffix = suffix || ''; syncVisibleToDayStore(); const grid = document.getElementById('calGrid'+suffix); if (!grid) return; syncCalMonthSelectValue(suffix); const dowNames = ['일','월','화','수','목','금','토']; let html = '<div class="cal-week-label" style="background:transparent;">주차</div>'; dowNames.forEach(function(n,i){ html += '<div class="cal-dow' + (i===0?' sun':i===6?' sat':'') + '">' + n + '</div>'; }); const firstDow = new Date(calYear, calMonth, 1).getDay(); const total = daysInMonth(calYear, calMonth); const today = todayStr(); let dayNum = 1 - firstDow; while (dayNum <= total) { const rowSunday = new Date(calYear, calMonth, dayNum); const rowThu = new Date(rowSunday); rowThu.setDate(rowSunday.getDate() + 4); const rowThuDs = rowThu.getFullYear()+'-'+pad2(rowThu.getMonth()+1)+'-'+pad2(rowThu.getDate()); const yw = getYearWeekInfo(rowThuDs); const mw = monthWeekKorean(rowThuDs); const mwShort = mw.replace('째주',''); html += '<div class="cal-week-label"><span class="cwl-year">'+yw.week+'주</span><span class="cwl-month">'+mwShort+'</span></div>'; for (let i=0; i<7; i++) { const d = dayNum + i; if (d < 1 || d > total) { html += '<div class="cal-cell empty"></div>'; continue; } const ds = ymd(calYear, calMonth, d); const entry = dayStore[ds]; const flags = dayHasContent(entry, ds); if (calFilterFilledOnly && !flags.any) { html += '<div class="cal-cell empty"></div>'; continue; } let snippet = ''; if (entry && entry.ti) snippet = entry.ti.toString().trim().slice(0,6); let marksHtml = ''; if (flags.postit) marksHtml += '<span class="cal-mark on" style="background:#f59e0b"></span>'; if (flags.pattern) marksHtml += '<span class="cal-mark on" style="background:#8b5cf6"></span>'; if (flags.ws) marksHtml += '<span class="cal-mark on" style="background:#ec4899"></span>'; if (flags.sched) marksHtml += '<span class="cal-mark on" style="background:#2563eb"></span>'; if (flags.memo) marksHtml += '<span class="cal-mark on" style="background:#10b981"></span>'; html += '<div class="cal-cell' + (ds===today?' cal-today':'') + (ds===calSelectedDate?' cal-selected':'') + (flags.any?' cal-has':'') + '" onclick="onCalDayClick(\'' + ds + '\',this)">' + '<div class="cal-daynum">' + d + '</div>' + (snippet ? '<div class="cal-snip">' + escapeHtml(snippet) + '</div>' : '') + (marksHtml ? '<div class="cal-marks">' + marksHtml + '</div>' : '') + '</div>'; } dayNum += 7; } grid.innerHTML = html; } function applyCalCollapseState(suffix) { suffix = suffix || ''; const collapsed = suffix === '2' ? calCollapsed2 : calCollapsed; const widget = document.getElementById('calWidget'+suffix); const body = document.getElementById('calBody'+suffix); const headerRow = document.getElementById('calHeaderRow'+suffix); const icon = document.getElementById('calCollapseIcon'+suffix); if (widget) widget.classList.toggle('collapsed', collapsed); if (body) body.style.display = collapsed ? 'none' : ''; if (headerRow) headerRow.style.display = collapsed ? 'none' : ''; if (icon) icon.textContent = collapsed ? '▼' : '▲'; } function toggleCalCollapse(suffix) { suffix = suffix || ''; if (suffix === '2') calCollapsed2 = !calCollapsed2; else calCollapsed = !calCollapsed; applyCalCollapseState(suffix); } function updateCalTodayInline() { /* [V9] 상단 오늘 텍스트와 중복되어 제거됨 (하위호환용 빈 함수) */ } function goToToday() { syncVisibleToDayStore(); if (monthlyViewActive) { monthlyViewActive = false; forceCollapseAll = false; updateMonthlyViewBtnLabel(); } const today = todayStr(); calSelectedDate = today; anchorDate = today; visibleDates = [today]; rebuildVisibleSections(); refreshCalendarToAnchor(); scheduleAutoSave(); toast(' 오늘(' + formatSecDate(today) + ') 기준으로 이동'); setTimeout(function() { for (const key in secDateMap) { if (secDateMap[key] === today) { const el = document.getElementById('sec-container-' + key); if (el) el.scrollIntoView({behavior:'smooth', block:'start'}); break; } } }, 80); } function onCalDayClick(ds, clickedEl) { syncVisibleToDayStore(); if (monthlyViewActive) { monthlyViewActive = false; forceCollapseAll = false; updateMonthlyViewBtnLabel(); } const widget = clickedEl ? clickedEl.closest('.cal-widget') : null; const beforeTop = widget ? widget.getBoundingClientRect().top : null; calSelectedDate = ds; anchorDate = ds; visibleDates = [ds]; rebuildVisibleSections(); refreshCalendarToAnchor(); scheduleAutoSave(); if (widget && beforeTop !== null) { const afterTop = widget.getBoundingClientRect().top; const delta = afterTop - beforeTop; if (delta) window.scrollBy(0, delta); } toast(' ' + formatSecDate(ds) + ' 기준으로 이동'); } /* ── 달력보기(월간 전체 목록) ── */ function openMonthViewer() { syncVisibleToDayStore(); document.getElementById('mvMonthLabel').textContent = calYear + '년 ' + (calMonth+1) + '월'; renderMonthViewerList(); document.getElementById('monthViewerOverlay').classList.add('on'); } function closeMonthViewer() { document.getElementById('monthViewerOverlay').classList.remove('on'); } function toggleMonthViewerFilter() { monthViewerFilterTitleOnly = !monthViewerFilterTitleOnly; renderMonthViewerList(); } function renderMonthViewerList() { const total = daysInMonth(calYear, calMonth); const btn = document.getElementById('mvFilterBtn'); if (btn) btn.textContent = monthViewerFilterTitleOnly ? '☑ 제목 입력된 섹션만 보기' : '☐ 제목 입력된 섹션만 보기'; let html = ''; for (let d=1; d<=total; d++) { const ds = ymd(calYear, calMonth, d); const entry = dayStore[ds]; const title = (entry && entry.ti) ? entry.ti.trim() : ''; if (monthViewerFilterTitleOnly && !title) continue; html += '<div class="mv-row" onclick="onCalDayClick(\'' + ds + '\');closeMonthViewer();">' + '<span class="mv-date">' + formatSecDate(ds) + '</span>' + '<span class="mv-title">' + (title ? escapeHtml(title) : '<span style="color:var(--text2);">(제목 없음)</span>') + '</span>' + '</div>'; } if (!html) html = '<div style="padding:20px;text-align:center;color:var(--text2);font-size:12px;">표시할 항목이 없습니다</div>'; document.getElementById('mvList').innerHTML = html; } /* ── 월별입력섹션만보기 ── */ function updateMonthlyViewBtnLabel() { const btn = document.getElementById('monthlyViewBtn'); if (!btn) return; btn.textContent = monthlyViewActive ? '↩ 원래대로' : ' 입력섹션만보기'; btn.classList.toggle('active', monthlyViewActive); } function toggleMonthlyView() { syncVisibleToDayStore(); if (!monthlyViewActive) { _savedVisibleDates = visibleDates.slice(); _savedAnchorDate = anchorDate; monthlyViewActive = true; forceCollapseAll = true; refreshMonthlyViewList(); } else { monthlyViewActive = false; forceCollapseAll = false; anchorDate = todayStr(); visibleDates = [anchorDate]; rebuildVisibleSections(); updateProgress(); } updateMonthlyViewBtnLabel(); scheduleAutoSave(); } function refreshMonthlyViewList() { const total = daysInMonth(calYear, calMonth); const dates = []; for (let d=1; d<=total; d++) { const ds = ymd(calYear, calMonth, d); const entry = dayStore[ds]; if (entry && dayHasContent(entry, ds).any) dates.push(ds); } visibleDates = dates; rebuildVisibleSections(); updateProgress(); if (!dates.length) { document.getElementById('dynamic-sections').innerHTML = '<div style="text-align:center;padding:30px 10px;color:var(--text2);font-size:12px;">이 달에 입력된 내용이 없습니다</div>'; } } /* ══════════════════════════════════════ 포스T잇 서식 (8개 카테고리 x 약 20~30개) ══════════════════════════════════════ */ const POSTIT_TEMPLATES = { '업무': [ {t:'이메일 전달 메모', b:'- 제목: \n- 보낸사람: \n- 요약: \n- 회신 필요: (Y/N)'}, {t:'전화 메모', b:'- 발신자: \n- 연락처: \n- 용건: \n- 콜백 필요: (Y/N)'}, {t:'회의록', b:'- 회의명: \n- 일시: \n- 참석자: \n- 안건: \n- 결정사항: \n- 후속조치: '}, {t:'업무 인수인계', b:'- 업무명: \n- 인수자: \n- 현재 진행상황: \n- 주의사항: \n- 관련 파일/링크: '}, {t:'업무 지시사항', b:'- 지시자: \n- 내용: \n- 기한: \n- 우선순위: '}, {t:'요청사항', b:'- 요청자: \n- 요청내용: \n- 필요시점: \n- 담당자: '}, {t:'협조 요청', b:'- 협조 대상: \n- 요청내용: \n- 사유: \n- 희망일정: '}, {t:'결과 보고', b:'- 건명: \n- 진행결과: \n- 특이사항: \n- 다음단계: '}, {t:'진행상황 공유', b:'- 프로젝트/업무명: \n- 현재 진행률: \n- 이슈사항: \n- 예정일정: '}, {t:'문제 발생 보고', b:'- 발생일시: \n- 문제내용: \n- 영향범위: \n- 임시조치: \n- 재발방지책: '}, {t:'승인 요청', b:'- 요청건: \n- 사유: \n- 예상비용/기간: \n- 승인자: '}, {t:'견적 요청', b:'- 요청 항목: \n- 수량: \n- 희망 납기: \n- 참고사항: '}, {t:'자료 요청', b:'- 요청 자료: \n- 사용 목적: \n- 필요 시점: \n- 담당자: '}, {t:'미팅 일정 조율', b:'- 미팅 목적: \n- 후보일시(1): \n- 후보일시(2): \n- 참석 대상: '}, {t:'담당자 변경 안내', b:'- 기존 담당자: \n- 신규 담당자: \n- 변경 사유: \n- 적용일: '}, {t:'마감일 안내', b:'- 업무명: \n- 마감일시: \n- 제출방법: \n- 담당자: '}, {t:'피드백 요청', b:'- 검토 대상: \n- 확인 포인트: \n- 회신 기한: '}, {t:'확인 요청', b:'- 확인 필요 사항: \n- 배경: \n- 회신 기한: '}, {t:'참고 자료 공유', b:'- 자료명: \n- 링크/위치: \n- 요약: '}, {t:'긴급 전달사항', b:'⚠️ 긴급\n- 내용: \n- 대응 필요 사항: \n- 담당자: '} ], '계획': [ {t:'오늘 할 일', b:'- 오늘 목표: \n1. \n2. \n3. '}, {t:'이번주 할 일', b:'- 이번주 목표: \n월: \n화: \n수: \n목: \n금: '}, {t:'우선순위 정리', b:'[긴급+중요]\n\n[중요, 안급하지않음]\n\n[급하지만 안중요]\n\n[둘다 아님]\n'}, {t:'목표 설정', b:'- 목표: \n- 기한: \n- 측정 방법: \n- 세부 단계: '}, {t:'주간 계획', b:'- 이번주 핵심 목표: \n- 주요 일정: \n- 신경써야 할 일: '}, {t:'월간 계획', b:'- 이번달 핵심 목표: \n- 주요 이벤트: \n- 마감일 목록: '}, {t:'체크리스트', b:'□ \n□ \n□ \n□ '}, {t:'준비물 목록', b:'- 목적: \n□ \n□ \n□ '}, {t:'예산 계획', b:'- 항목: \n- 예상 비용: \n- 실제 비용: \n- 비고: '}, {t:'일정 조율', b:'- 조율할 일정: \n- 가능한 시간대: \n- 관련자: '}, {t:'회의 준비', b:'- 회의 목적: \n- 준비할 자료: \n- 예상 질문: '}, {t:'발표 준비', b:'- 발표 주제: \n- 시간: \n- 핵심 메시지: \n- 준비물: '}, {t:'학습 계획', b:'- 학습 목표: \n- 기간: \n- 학습 방법: \n- 체크포인트: '}, {t:'운동 계획', b:'- 목표: \n- 요일별 계획: \n- 기록: '}, {t:'식단 계획', b:'- 목표: \n- 오늘 식단: \n- 참고사항: '}, {t:'독서 계획', b:'- 책 제목: \n- 목표 완독일: \n- 오늘 읽은 부분: \n- 메모: '}, {t:'습관 만들기', b:'- 습관: \n- 목표 기간: \n- 오늘 실천 여부: (Y/N)\n- 메모: '}, {t:'데드라인 정리', b:'- 항목: \n- 마감일: \n- 남은 일수: \n- 진행률: '}, {t:'아이디어 정리', b:'- 아이디어: \n- 배경/계기: \n- 다음 액션: '}, {t:'문제 해결 계획', b:'- 문제: \n- 원인: \n- 해결 방안: \n- 실행 일정: '} ], '프로젝트': [ {t:'프로젝트 개요', b:'- 프로젝트명: \n- 목표: \n- 기간: \n- 담당자: '}, {t:'요구사항 정리', b:'- 요구사항: \n- 배경: \n- 우선순위: \n- 승인 여부: '}, {t:'일정(마일스톤)', b:'- 마일스톤: \n- 목표일: \n- 담당자: \n- 상태: '}, {t:'역할 분담', b:'- 이름: \n- 역할: \n- 담당 범위: '}, {t:'리스크 관리', b:'- 리스크: \n- 발생 가능성: \n- 영향도: \n- 대응 방안: '}, {t:'이슈 트래킹', b:'- 이슈: \n- 발생일: \n- 담당자: \n- 상태: \n- 해결 예정일: '}, {t:'킥오프 메모', b:'- 프로젝트명: \n- 목표: \n- 참여자: \n- 첫 액션: '}, {t:'진행률 체크', b:'- 항목: \n- 목표 대비 진행률: \n- 이슈: '}, {t:'회고(회고록)', b:'- 잘된 점: \n- 아쉬운 점: \n- 다음에 시도할 것: '}, {t:'예산/비용 정리', b:'- 항목: \n- 예산: \n- 집행액: \n- 잔액: '}, {t:'산출물 목록', b:'- 산출물명: \n- 담당자: \n- 완료 여부: \n- 위치/링크: '}, {t:'테스트 체크리스트', b:'□ 기능 테스트\n□ 예외 케이스 테스트\n□ 성능 확인\n□ 최종 검수'}, {t:'배포 계획', b:'- 배포일: \n- 배포 범위: \n- 롤백 계획: \n- 담당자: '}, {t:'이해관계자 목록', b:'- 이름: \n- 소속/역할: \n- 관심사항: \n- 연락처: '}, {t:'커뮤니케이션 계획', b:'- 보고 주기: \n- 보고 대상: \n- 채널: '}, {t:'변경 이력', b:'- 변경일: \n- 변경내용: \n- 사유: \n- 승인자: '}, {t:'완료 보고', b:'- 프로젝트명: \n- 완료일: \n- 최종 결과: \n- 특이사항: '}, {t:'다음 단계', b:'- 현재 완료된 것: \n- 다음에 할 일: \n- 필요 리소스: '}, {t:'의사결정 기록', b:'- 결정사항: \n- 배경: \n- 대안 검토: \n- 결정자: '}, {t:'참고 링크 모음', b:'- 문서명: \n- 링크: \n- 설명: '} ], '여행': [ {t:'여행 일정', b:'- 여행지: \n- 기간: \n- Day1: \n- Day2: '}, {t:'준비물 체크리스트', b:'□ 여권/신분증\n□ 충전기\n□ 세면도구\n□ 옷가지\n□ '}, {t:'숙소 정보', b:'- 숙소명: \n- 주소: \n- 체크인/아웃: \n- 예약번호: '}, {t:'항공/교통편', b:'- 편명: \n- 출발/도착 시간: \n- 좌석: \n- 예약번호: '}, {t:'예산 계획', b:'- 항목: 항공/숙소/식비/기타\n- 예상 비용: \n- 실제 비용: '}, {t:'맛집 리스트', b:'- 식당명: \n- 위치: \n- 추천 메뉴: \n- 예약 필요: (Y/N)'}, {t:'관광지 리스트', b:'- 장소명: \n- 위치: \n- 운영시간: \n- 소요시간: '}, {t:'필수 서류', b:'□ 여권(유효기간 확인)\n□ 비자\n□ 여행자보험\n□ 예약 확인증'}, {t:'환전/카드', b:'- 환전 금액: \n- 사용 카드: \n- 해외결제 알림 신청: (Y/N)'}, {t:'긴급 연락처', b:'- 대사관: \n- 현지 경찰: \n- 여행자보험 상담: \n- 동행자: '}, {t:'짐 리스트', b:'□ 캐리어\n□ 보조가방\n□ 기내 반입 물품\n□ '}, {t:'여행 동선', b:'- 오전: \n- 오후: \n- 저녁: \n- 이동수단: '}, {t:'사진 스팟', b:'- 장소: \n- 추천 시간대: \n- 참고 메모: '}, {t:'선물 리스트', b:'- 받는사람: \n- 선물 아이디어: \n- 예산: '}, {t:'여행 후기 메모', b:'- 좋았던 점: \n- 아쉬웠던 점: \n- 다음에 다시 갈지: '}, {t:'렌트카 정보', b:'- 업체: \n- 차종: \n- 대여/반납 일시: \n- 예약번호: '}, {t:'유심/로밍', b:'- 통신사: \n- 요금제: \n- 사용기간: '}, {t:'날씨 체크', b:'- 날짜: \n- 예상 날씨: \n- 준비물(우산 등): '}, {t:'여행 동행자 정보', b:'- 이름: \n- 연락처: \n- 특이사항(알레르기 등): '}, {t:'취소/환불 규정', b:'- 예약처: \n- 취소 가능 기한: \n- 환불 조건: '} ], '출장': [ {t:'출장 일정', b:'- 출장지: \n- 기간: \n- 목적: \n- 일정: '}, {t:'미팅 안건', b:'- 미팅 대상: \n- 안건: \n- 목표: \n- 준비자료: '}, {t:'참석자 명단', b:'- 이름: \n- 소속/직함: \n- 연락처: '}, {t:'이동 경로', b:'- 출발: \n- 도착: \n- 교통수단: \n- 소요시간: '}, {t:'숙소/호텔 정보', b:'- 호텔명: \n- 주소: \n- 체크인/아웃: \n- 예약번호: '}, {t:'법인카드/경비', b:'- 사용 항목: \n- 금액: \n- 영수증 확보: (Y/N)'}, {t:'거래처 정보', b:'- 회사명: \n- 담당자: \n- 연락처: \n- 주요 이슈: '}, {t:'회의 결과 요약', b:'- 미팅명: \n- 주요 논의: \n- 합의사항: \n- 후속조치: '}, {t:'후속 조치', b:'- 조치 항목: \n- 담당자: \n- 기한: '}, {t:'계약/견적 메모', b:'- 건명: \n- 금액: \n- 조건: \n- 유효기간: '}, {t:'접대비 내역', b:'- 대상: \n- 장소: \n- 금액: \n- 목적: '}, {t:'출장 보고서 초안', b:'- 출장 목적: \n- 주요 성과: \n- 특이사항: \n- 향후 계획: '}, {t:'명함 정리', b:'- 이름: \n- 회사/직함: \n- 연락처: \n- 만난 계기: '}, {t:'다음 미팅 일정', b:'- 일시: \n- 장소: \n- 참석자: \n- 안건: '}, {t:'현지 교통 정보', b:'- 이동수단: \n- 예상 비용: \n- 소요시간: '}, {t:'통역/언어 메모', b:'- 통역 필요 여부: \n- 자주쓰는 표현: \n- 주의할 문화: '}, {t:'시차 정보', b:'- 현지시간: \n- 한국시간 차이: \n- 연락 가능 시간대: '}, {t:'준비물', b:'□ 명함\n□ 노트북/충전기\n□ 발표자료\n□ '}, {t:'비상연락망', b:'- 회사 담당자: \n- 현지 파트너: \n- 긴급 연락처: '}, {t:'정산 항목', b:'- 항목: \n- 금액: \n- 증빙 여부: (Y/N)'} ], 'SNS': [ {t:'인스타 캡션', b:'- 주제: \n- 캡션 초안: \n- 해시태그: '}, {t:'유튜브 스크립트', b:'- 제목: \n- 인트로: \n- 본론: \n- 마무리(CTA): '}, {t:'블로그 초안', b:'- 제목: \n- 서론: \n- 본문 목차: \n- 결론: '}, {t:'릴스/숏폼 아이디어', b:'- 아이디어: \n- 훅(첫 3초): \n- 사용 음악: '}, {t:'해시태그 모음', b:'- 주제: \n- 태그 목록: '}, {t:'콘텐츠 기획', b:'- 주제: \n- 목표: \n- 포맷: \n- 업로드 일정: '}, {t:'이벤트 공지', b:'- 이벤트명: \n- 기간: \n- 참여방법: \n- 경품: '}, {t:'후기 포스팅', b:'- 대상: \n- 좋았던 점: \n- 아쉬운 점: \n- 별점: '}, {t:'Q&A 답변 초안', b:'- 질문: \n- 답변: '}, {t:'공지사항', b:'- 제목: \n- 내용: \n- 적용일: '}, {t:'상품 소개', b:'- 상품명: \n- 특징: \n- 가격: \n- 구매 링크: '}, {t:'협찬/광고 표기', b:'- 협찬사: \n- 표기 문구: (유료광고 포함)'}, {t:'라이브 방송 대본', b:'- 오프닝: \n- 주요 코너: \n- 이벤트 안내: \n- 클로징: '}, {t:'댓글 답변 템플릿', b:'- 상황: \n- 답변 문구: '}, {t:'커뮤니티 공지', b:'- 제목: \n- 대상: \n- 내용: '}, {t:'팔로워 이벤트', b:'- 이벤트명: \n- 참여조건: \n- 발표일: '}, {t:'캡션 문구 모음', b:'- 톤앤매너: \n- 문구 후보1: \n- 문구 후보2: '}, {t:'콘텐츠 캘린더', b:'- 날짜: \n- 콘텐츠 주제: \n- 담당자: '}, {t:'저작권 표기', b:'- 출처: \n- 라이선스: \n- 표기 문구: '}, {t:'프로필 소개 문구', b:'- 한줄 소개: \n- 연락처/링크: '} ], '공문': [ {t:'공문 기본서식', b:'- 수신: \n- 제목: \n- 내용: \n- 첨부: '}, {t:'안내문', b:'- 제목: \n- 대상: \n- 안내 내용: \n- 시행일: '}, {t:'협조문', b:'- 수신: \n- 협조 요청 사항: \n- 사유: \n- 회신 기한: '}, {t:'초청장', b:'- 행사명: \n- 일시: \n- 장소: \n- 참석 요청: '}, {t:'감사장', b:'- 수신: \n- 감사 사유: \n- 내용: '}, {t:'사과문', b:'- 수신: \n- 사과 사유: \n- 재발방지 대책: '}, {t:'공지문', b:'- 제목: \n- 공지 내용: \n- 적용 대상: \n- 시행일: '}, {t:'회신문', b:'- 수신: \n- 회신 내용: \n- 참고사항: '}, {t:'요청 공문', b:'- 수신: \n- 요청 사항: \n- 사유: \n- 회신 기한: '}, {t:'통보문', b:'- 수신: \n- 통보 내용: \n- 시행일: '}, {t:'결과 통지', b:'- 수신: \n- 건명: \n- 결과: \n- 비고: '}, {t:'신청서 양식', b:'- 성명: \n- 신청 내용: \n- 신청일: \n- 연락처: '}, {t:'확인서', b:'- 대상: \n- 확인 내용: \n- 발급일: '}, {t:'위임장', b:'- 위임자: \n- 수임자: \n- 위임 내용: \n- 유효기간: '}, {t:'서약서', b:'- 서약자: \n- 서약 내용: \n- 서약일: '}, {t:'동의서', b:'- 동의자: \n- 동의 내용: \n- 동의일: '}, {t:'견적서 양식', b:'- 항목: \n- 수량: \n- 단가: \n- 합계: '}, {t:'청구서 양식', b:'- 청구 항목: \n- 금액: \n- 입금 계좌: \n- 기한: '}, {t:'회의 소집 공문', b:'- 회의명: \n- 일시/장소: \n- 참석 대상: \n- 안건: '}, {t:'인사말/서두 문구', b:'- 계절 인사: \n- 감사 인사: \n- 본문으로 연결: '} ], '메뉴': [ {t:'한식 메뉴 취합', b:'- 이름: \n- 메뉴(예: 김치찌개/된장찌개/제육볶음): \n- 맵기: \n- 요청사항: '}, {t:'중식 메뉴 취합', b:'- 이름: \n- 메뉴(예: 짜장면/짬뽕/탕수육): \n- 곱빼기 여부: \n- 요청사항: '}, {t:'일식 메뉴 취합', b:'- 이름: \n- 메뉴(예: 초밥/돈까스/우동): \n- 세트 여부: \n- 요청사항: '}, {t:'양식 메뉴 취합', b:'- 이름: \n- 메뉴(예: 파스타/피자/스테이크): \n- 굽기/소스: \n- 요청사항: '}, {t:'분식 메뉴 취합', b:'- 이름: \n- 메뉴(예: 떡볶이/김밥/순대): \n- 맵기: \n- 요청사항: '}, {t:'치킨 메뉴 취합', b:'- 이름: \n- 브랜드: \n- 맛(후라이드/양념/반반): \n- 사이즈/마리수: '}, {t:'족발·보쌈 메뉴 취합', b:'- 이름: \n- 종류(족발/보쌈/막국수 등): \n- 크기(소/중/대): \n- 요청사항: '}, {t:'피자 메뉴 취합', b:'- 이름: \n- 브랜드: \n- 맛/토핑: \n- 사이즈: \n- 도우: '}, {t:'회식 메뉴 취합', b:'- 이름: \n- 고기/메뉴 종류: \n- 술 종류: \n- 알러지/못먹는것: '}, {t:'야식 메뉴 취합', b:'- 이름: \n- 메뉴: \n- 배달앱/매장: \n- 예상 도착시간: '}, {t:'배달음식 주문 취합', b:'- 이름: \n- 메뉴명: \n- 가격: \n- 배달주소: \n- 요청사항: '}, {t:'도시락 메뉴 취합', b:'- 이름: \n- 도시락 종류: \n- 밥 종류(공기밥/잡곡): \n- 반찬 요청사항: '}, {t:'뷔페·출장뷔페 메뉴 취합', b:'- 이름: \n- 인원수: \n- 선호 메뉴: \n- 못먹는 음식: '}, {t:'커피 메뉴 취합', b:'- 이름: \n- 메뉴(아메리카노/라떼 등): \n- 온도(HOT/ICE): \n- 샷 추가 여부: '}, {t:'음료·에이드 메뉴 취합', b:'- 이름: \n- 메뉴(에이드/스무디/주스): \n- 당도 조절: \n- 얼음량: '}, {t:'디저트·베이커리 메뉴 취합', b:'- 이름: \n- 메뉴(케이크/빵/쿠키): \n- 수량: \n- 알러지: '}, {t:'티(차) 메뉴 취합', b:'- 이름: \n- 메뉴(녹차/홍차/허브티): \n- 온도(HOT/ICE): \n- 당도: '}, {t:'점심메뉴 투표', b:'- 후보1: \n- 후보2: \n- 후보3: \n- 최종 선택: '}, {t:'저녁메뉴 투표', b:'- 후보1: \n- 후보2: \n- 후보3: \n- 최종 선택: '}, {t:'워크샵·야유회 식사 취합', b:'- 이름: \n- 식사 시간대: \n- 메뉴 선호: \n- 알러지/못먹는것: '}, {t:'생일·기념일 케이크 취합', b:'- 대상자: \n- 케이크 종류: \n- 문구: \n- 촛불 개수: '}, {t:'단체 주문 취합(총괄)', b:'- 총 인원: \n- 마감시간: \n- 결제 방법(더치페이/일괄): \n- 참고사항: '}, {t:'술자리 안주 메뉴 취합', b:'- 이름: \n- 안주 메뉴: \n- 술 종류: \n- 인원: '}, {t:'브런치 메뉴 취합', b:'- 이름: \n- 메뉴: \n- 음료 포함 여부: \n- 요청사항: '}, {t:'샐러드·다이어트식 취합', b:'- 이름: \n- 메뉴: \n- 드레싱: \n- 토핑 추가: '}, {t:'명절·제사 음식 취합', b:'- 품목: \n- 수량: \n- 준비 담당자: \n- 구매처: '}, {t:'과일·간식 취합', b:'- 이름: \n- 품목: \n- 수량: \n- 예산: '}, {t:'맛집 리스트 정리', b:'- 상호명: \n- 위치: \n- 대표메뉴: \n- 가격대: \n- 한줄평: '}, {t:'알러지·못먹는음식 체크', b:'- 이름: \n- 알러지 항목: \n- 못먹는 음식: \n- 비고: '}, {t:'식비 정산', b:'- 항목: \n- 금액: \n- 인원수: \n- 1인당 금액: '} ] }; /* ── 포스T잇 여러개 관리 (배경색 + 칸수 레이아웃) ── */ const POSTIT_COLORS = ['#fffbeb','#fee2e2','#dbeafe','#dcfce7','#f3e8ff','#f1f5f9']; function buildPostitNoteHTML(idx, value, bg, mode) { bg = bg || POSTIT_COLORS[0]; mode = mode || ''; const swatches = POSTIT_COLORS.map(function(c){ return '<button class="postit-swatch" style="background:'+c+'" onclick="setPostitNoteColor(this,\''+c+'\')" title="배경색"></button>'; }).join(''); const placeholder = '자유롭게 메모하세요 (서식 버튼으로 빠른 양식 삽입 가능)'; const taStyle = (mode === 'check' || mode === 'todo') ? ' style="display:none;"' : ''; return `<div class="postit-note" style="background:${bg};" data-bg="${bg}" data-mode="${mode}"> <div class="postit-note-toolbar"> <span class="postit-note-label"> ${idx+1}</span> <div class="postit-note-toolbar-btns"> <button class="postit-mode-btn${mode==='todo'?' active':''}" onclick="setPostitMode(this,'todo')" title="할일: 동그란 체크로 완료하면 줄이 그어지는 할일 목록으로 전환해요 (다시 누르면 해제)">○</button> <button class="postit-mode-btn${mode==='check'?' active':''}" onclick="setPostitMode(this,'check')" title="체크: 네모 체크박스로 항목을 추가·완료 표시하는 체크리스트로 전환해요 (줄긋기 없음, 다시 누르면 해제)">☑</button> <button class="postit-fmt-btn" onclick="openPostitFormat(this)" title="서식: 자주 쓰는 서식을 빠르게 넣어요"> </button> <button class="postit-share-note-btn" onclick="openPostitNoteShare(this)" title="이 포스트잇 하나만 링크로 공유해요 (섹션 상단의 공유와 같은 방식, 이 메모지만 담아서 보냅니다)"> </button> <button class="postit-del-btn" onclick="removePostitNote(this)" title="이 포스트잇 삭제">✕</button> </div> </div> <textarea class="compact-textarea postit-area"${taStyle} placeholder="${placeholder}" oninput="autoExpandMemo(this);scheduleAutoSave()">${escapeHtml(value||'')}</textarea> <div class="postit-check-list${mode==='todo'?' postit-check-list-round':''}" style="${(mode==='check'||mode==='todo')?'':'display:none;'}"></div> <div class="postit-swatch-row">${swatches}</div> </div>`; } /* ── 영상보기 영역: 3모드(유튜브 재생목록 / 영상파일 / 사진) ── */ function extractYoutubeId(url) { if (!url) return null; const m = String(url).match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/); return m ? m[1] : null; } function applyVideoEmbed(wrap, url) { if (!wrap) return; const id = extractYoutubeId(url); if (id) { wrap.style.display = ''; wrap.innerHTML = '<iframe src="https://www.youtube.com/embed/'+id+'" title="영상" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>'; } else if (url && url.trim()) { wrap.style.display = ''; wrap.innerHTML = '<div class="postit-video-embed-empty">유튜브 링크만 지원돼요<br>(youtube.com 또는 youtu.be 링크를 붙여넣어주세요)</div>'; } else { wrap.style.display = 'none'; wrap.innerHTML = ''; } } function onSecVideoUrlInput(secId) { const wrap = document.getElementById('video-embed-' + secId); const input = document.getElementById('video-url-' + secId); applyVideoEmbed(wrap, input ? input.value : ''); scheduleAutoSave(); } /* 모드 전환 ( Y영상보기 / 영상불러오기 / ️ 사진불러오기) */ let _videoMode = {}; function setVideoMode(secId, mode) { _videoMode[secId] = mode; const sel = document.getElementById('vmode-select-' + secId); if (sel) sel.querySelectorAll('.vmode-btn').forEach(function(b){ b.classList.toggle('active', b.dataset.mode === mode); }); ['yt','file','photo'].forEach(function(m){ const panel = document.getElementById('vmode-' + m + '-' + secId); if (panel) panel.style.display = (m === mode) ? '' : 'none'; }); scheduleAutoSave(); } /* 유튜브 재생목록: {id,url,label,fav}[] — 기존 video-bm-* 저장키 그대로 재사용 */ function getVideoPlaylist(secId) { const bmInput = document.getElementById('video-bm-' + secId); try { return JSON.parse((bmInput && bmInput.value) || '[]'); } catch(e) { return []; } } function setVideoPlaylistData(secId, arr) { const bmInput = document.getElementById('video-bm-' + secId); if (bmInput) bmInput.value = JSON.stringify(arr); } function addUrlToPlaylist(secId, url) { if (!extractYoutubeId(url)) { toast('유튜브 링크만 재생목록에 담을 수 있어요'); return; } let arr = getVideoPlaylist(secId); if (arr.some(function(b){ return b.url === url; })) { toast('이미 재생목록에 있어요'); return; } const label = url.replace(/^https?:\/\/(www\.)?/,'').slice(0,32); arr.unshift({ id: String(Date.now())+Math.random().toString(36).slice(2,5), url: url, label: label, fav: false }); if (arr.length > 30) arr = arr.slice(0, 30); setVideoPlaylistData(secId, arr); renderVideoPlaylist(secId); renderPostitPlaylistMini(secId); scheduleAutoSave(); toast(' 재생목록에 추가됨'); } function addSecVideoToPlaylist(secId) { const input = document.getElementById('video-url-' + secId); const url = input ? input.value.trim() : ''; if (!url) { toast('먼저 영상 링크를 입력하세요'); return; } addUrlToPlaylist(secId, url); } function addFromPostitPlaylist(secId) { const input = document.getElementById('postit-plist-input-' + secId); const url = input ? input.value.trim() : ''; if (!url) { toast('먼저 영상 링크를 입력하세요'); return; } addUrlToPlaylist(secId, url); if (input) input.value = ''; } function buildPlaylistItemHtml(secId, it) { return '<div class="vplist-item"><button class="vplist-play-btn" onclick="playPlaylistItem('+secId+',\''+it.id+'\')" title="이 영상 재생">▶</button>' + '<span class="vplist-label">'+escapeHtml(it.label)+'</span>' + '<button class="vplist-star-btn'+(it.fav?' fav':'')+'" onclick="toggleVideoFav('+secId+',\''+it.id+'\')" title="즐겨찾기">'+(it.fav?'★':'☆')+'</button>' + '<button class="vplist-del-btn" onclick="removeVideoFromPlaylist('+secId+',\''+it.id+'\')" title="삭제">✕</button></div>'; } let _plistExpanded = {}; function renderVideoPlaylist(secId) { const listEl = document.getElementById('video-plist-' + secId); const moreBtn = document.getElementById('video-plist-more-' + secId); if (!listEl) return; const arr = getVideoPlaylist(secId).slice().sort(function(a,b){ return (b.fav?1:0)-(a.fav?1:0); }); const expanded = !!_plistExpanded[secId]; const visible = expanded ? arr : arr.slice(0,3); listEl.innerHTML = visible.map(function(it){ return buildPlaylistItemHtml(secId,it); }).join('') || '<div class="wn-empty" style="font-size:11px;color:var(--text2);text-align:center;padding:8px 0;">재생목록이 비어있어요</div>'; if (moreBtn) { if (arr.length > 3) { moreBtn.style.display = ''; moreBtn.textContent = expanded ? '접기 ▴' : ('더보기 ('+(arr.length-3)+'개 더) ▾'); } else moreBtn.style.display = 'none'; } const cntEl = document.getElementById('postit-plist-count-' + secId); if (cntEl) cntEl.textContent = arr.length; } function toggleVideoPlaylistMore(secId) { _plistExpanded[secId] = !_plistExpanded[secId]; renderVideoPlaylist(secId); } function playPlaylistItem(secId, itemId) { const arr = getVideoPlaylist(secId); const it = arr.find(function(b){ return String(b.id) === String(itemId); }); if (!it) return; setVideoMode(secId, 'yt'); const input = document.getElementById('video-url-' + secId); if (input) input.value = it.url; applyVideoEmbed(document.getElementById('video-embed-' + secId), it.url); scheduleAutoSave(); } function toggleVideoFav(secId, itemId) { const arr = getVideoPlaylist(secId); const it = arr.find(function(b){ return String(b.id) === String(itemId); }); if (it) it.fav = !it.fav; setVideoPlaylistData(secId, arr); renderVideoPlaylist(secId); renderPostitPlaylistMini(secId); scheduleAutoSave(); } function removeVideoFromPlaylist(secId, itemId) { let arr = getVideoPlaylist(secId); arr = arr.filter(function(b){ return String(b.id) !== String(itemId); }); setVideoPlaylistData(secId, arr); renderVideoPlaylist(secId); renderPostitPlaylistMini(secId); scheduleAutoSave(); } /* 포스T잇 쪽 미니 재생목록 패널 (같은 데이터를 공유) */ function togglePostitPlaylist(secId) { const mini = document.getElementById('postit-plist-mini-' + secId); if (!mini) return; const showing = mini.style.display !== 'none'; mini.style.display = showing ? 'none' : ''; if (!showing) renderPostitPlaylistMini(secId); } function renderPostitPlaylistMini(secId) { const listEl = document.getElementById('postit-plist-list-' + secId); if (!listEl) return; const arr = getVideoPlaylist(secId).slice().sort(function(a,b){ return (b.fav?1:0)-(a.fav?1:0); }); listEl.innerHTML = arr.map(function(it){ return buildPlaylistItemHtml(secId,it); }).join('') || '<div class="wn-empty" style="font-size:11px;color:var(--text2);text-align:center;padding:8px 0;">재생목록이 비어있어요</div>'; const cntEl = document.getElementById('postit-plist-count-' + secId); if (cntEl) cntEl.textContent = arr.length; } /* ── 영상 파일 불러오기 (기기 저장 파일, 세션 중에만 유지) ── */ let _videoFileUrls = {}; function onVideoFilePick(secId, inputEl) { const file = inputEl.files && inputEl.files[0]; if (!file) return; if (_videoFileUrls[secId]) { try { URL.revokeObjectURL(_videoFileUrls[secId]); } catch(e){} } const url = URL.createObjectURL(file); _videoFileUrls[secId] = url; const player = document.getElementById('vfile-player-' + secId); const wrap = document.getElementById('vfile-wrap-' + secId); if (player) { player.src = url; player.playbackRate = 1; } if (wrap) { wrap.style.display = ''; wrap.querySelectorAll('.vfile-speed-btn').forEach(function(b){ b.classList.toggle('vfile-speed-active', b.textContent.trim()==='1x'); }); } } function setVideoSpeed(secId, rate) { const player = document.getElementById('vfile-player-' + secId); if (player) player.playbackRate = rate; const wrap = document.getElementById('vfile-wrap-' + secId); if (wrap) wrap.querySelectorAll('.vfile-speed-btn').forEach(function(b){ b.classList.toggle('vfile-speed-active', parseFloat(b.textContent) === rate); }); } /* ── 사진 불러오기 (확대/축소/이동 + 사진 위 필기, 세션 중에만 유지) ── */ let _photoState = {}; function onPhotoFilesPick(secId, inputEl) { const files = Array.from(inputEl.files || []); if (!files.length) return; if (!_photoState[secId]) _photoState[secId] = { photos: [], activeIdx: 0, scale: 1, tx: 0, ty: 0, blur: false }; const st = _photoState[secId]; const startIdx = st.photos.length; files.forEach(function(f){ st.photos.push(URL.createObjectURL(f)); }); const wrapEl = document.getElementById('photo-stage-wrap-' + secId); if (wrapEl) wrapEl.style.display = ''; renderPhotoThumbs(secId); selectPhoto(secId, startIdx); } function renderPhotoThumbs(secId) { const st = _photoState[secId]; if (!st) return; const strip = document.getElementById('photo-thumb-strip-' + secId); if (!strip) return; strip.innerHTML = st.photos.map(function(url,i){ return '<img class="photo-thumb'+(i===st.activeIdx?' active':'')+'" src="'+url+'" onclick="selectPhoto('+secId+','+i+')">'; }).join(''); } function selectPhoto(secId, idx) { const st = _photoState[secId]; if (!st || !st.photos[idx]) return; st.activeIdx = idx; st.scale = 1; st.tx = 0; st.ty = 0; const img = document.getElementById('photo-stage-img-' + secId); if (img) img.src = st.photos[idx]; applyPhotoTransform(secId); renderPhotoThumbs(secId); } function applyPhotoTransform(secId) { const st = _photoState[secId]; if (!st) return; const img = document.getElementById('photo-stage-img-' + secId); if (img) img.style.transform = 'translate(-50%,-50%) translate('+st.tx+'px,'+st.ty+'px) scale('+st.scale+')'; } function photoZoom(secId, factor) { const st = _photoState[secId]; if (!st) return; st.scale = Math.min(4, Math.max(1, st.scale * factor)); applyPhotoTransform(secId); } function photoResetZoom(secId) { const st = _photoState[secId]; if (!st) return; st.scale = 1; st.tx = 0; st.ty = 0; applyPhotoTransform(secId); } function togglePhotoBlur(secId) { const st = _photoState[secId]; if (!st) return; st.blur = !st.blur; const img = document.getElementById('photo-stage-img-' + secId); const btn = document.getElementById('photo-blur-btn-' + secId); if (img) img.classList.toggle('photo-blurred', st.blur); if (btn) btn.classList.toggle('active', st.blur); } function copyPhotoNoteText(secId) { const overlay = document.getElementById('photo-note-overlay-' + secId); const text = overlay ? overlay.innerText.trim() : ''; if (!text) { toast('먼저 사진 위에 텍스트를 입력하세요'); return; } if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(function(){ toast(' 복사됨! 원하는 곳에 붙여넣으세요'); }).catch(function(){ toast('복사에 실패했어요'); }); } else { toast('이 브라우저는 복사 기능을 지원하지 않아요'); } } function sendPhotoNoteToPostit(secId) { const overlay = document.getElementById('photo-note-overlay-' + secId); const text = overlay ? overlay.innerText.trim() : ''; if (!text) { toast('먼저 사진 위에 필기를 입력하세요'); return; } addPostitNote(secId, text); overlay.innerText = ''; toast(' 포스T잇으로 보냈어요'); } /* 사진 확대(핀치)/이동(드래그) — Pointer Events로 마우스·터치 통합 처리 */ let _photoPointers = {}, _photoPinchStart = {}, _photoPanStart = {}; function _photoStageSecId(el) { const m = el && el.id && el.id.match(/^photo-stage-(\d+)$/); return m ? m[1] : null; } document.addEventListener('pointerdown', function(e){ const stage = e.target.closest && e.target.closest('.photo-stage'); if (!stage) return; const secId = _photoStageSecId(stage); if (!secId || !_photoState[secId]) return; if (!_photoPointers[secId]) _photoPointers[secId] = {}; _photoPointers[secId][e.pointerId] = { x: e.clientX, y: e.clientY }; const pts = Object.values(_photoPointers[secId]); const st = _photoState[secId]; if (pts.length === 2) { const dx = pts[0].x-pts[1].x, dy = pts[0].y-pts[1].y; _photoPinchStart[secId] = { dist: Math.hypot(dx,dy) || 1, scale: st.scale }; } else if (pts.length === 1) { _photoPanStart[secId] = { x: e.clientX, y: e.clientY, tx: st.tx, ty: st.ty }; } try { stage.setPointerCapture(e.pointerId); } catch(err) {} }); document.addEventListener('pointermove', function(e){ const stage = e.target.closest && e.target.closest('.photo-stage'); if (!stage) return; const secId = _photoStageSecId(stage); if (!secId || !_photoPointers[secId] || !_photoPointers[secId][e.pointerId]) return; _photoPointers[secId][e.pointerId] = { x: e.clientX, y: e.clientY }; const pts = Object.values(_photoPointers[secId]); const st = _photoState[secId]; if (!st) return; if (pts.length === 2 && _photoPinchStart[secId]) { const dx = pts[0].x-pts[1].x, dy = pts[0].y-pts[1].y; const dist = Math.hypot(dx,dy) || 1; const startInfo = _photoPinchStart[secId]; st.scale = Math.min(4, Math.max(1, startInfo.scale * (dist/startInfo.dist))); applyPhotoTransform(secId); e.preventDefault(); } else if (pts.length === 1 && _photoPanStart[secId]) { const startInfo = _photoPanStart[secId]; st.tx = startInfo.tx + (e.clientX-startInfo.x); st.ty = startInfo.ty + (e.clientY-startInfo.y); applyPhotoTransform(secId); e.preventDefault(); } }); function _photoPointerEnd(e){ for (const secId in _photoPointers) { if (_photoPointers[secId][e.pointerId] !== undefined) delete _photoPointers[secId][e.pointerId]; } } document.addEventListener('pointerup', _photoPointerEnd); document.addEventListener('pointercancel', _photoPointerEnd); function setPostitNoteColor(btnEl, color) { const note = btnEl.closest('.postit-note'); if (!note) return; note.style.background = color; note.dataset.bg = color; scheduleAutoSave(); } /* ── 포스T잇 모드: 할일(자동 ☐ 줄바꿈) / 체크(인터랙티브 체크리스트) / 기본(서식) ── */ function setPostitMode(btnEl, mode) { const note = btnEl.closest('.postit-note'); if (!note) return; const cur = note.dataset.mode || ''; const next = (cur === mode) ? '' : mode; // 같은 모드 재클릭 시 기본으로 해제 const ta = note.querySelector('.postit-area'); const val = ta ? ta.value : ''; note.dataset.mode = next; note.querySelectorAll('.postit-mode-btn').forEach(function(b){ b.classList.remove('active'); }); if (next) btnEl.classList.add('active'); const listBox = note.querySelector('.postit-check-list'); if (next === 'todo' || next === 'check') { if (ta) ta.style.display = 'none'; if (listBox) { listBox.style.display = ''; listBox.classList.toggle('postit-check-list-round', next === 'todo'); renderPostitCheckList(note, val); } } else { if (ta) { ta.style.display = ''; ta.placeholder = '자유롭게 메모하세요 (서식 버튼으로 빠른 양식 삽입 가능)'; } if (listBox) { listBox.style.display = 'none'; listBox.innerHTML = ''; } } scheduleAutoSave(); } function renderPostitCheckList(note, rawText) { const listBox = note.querySelector('.postit-check-list'); if (!listBox) return; const lines = (rawText || '').split('\n').filter(function(l){ return l.trim(); }); let html = ''; lines.forEach(function(line, i){ const checked = /^\s*☑/.test(line); const text = line.replace(/^\s*[☑☐]\s?/, ''); html += '<div class="postit-check-row">' + '<input type="checkbox" class="postit-check-box" ' + (checked?'checked':'') + ' onchange="syncPostitCheckList(this)">' + '<input type="text" class="postit-check-text" value="' + text.replace(/"/g,'&quot;') + '" oninput="syncPostitCheckList(this)" placeholder="항목 입력">' + '<button class="postit-check-del" onclick="removePostitCheckRow(this)" title="이 항목 삭제">✕</button>' + '</div>'; }); html += '<button class="postit-check-add" onclick="addPostitCheckRow(this)" title="체크리스트 항목을 추가해요">＋ 항목추가</button>'; listBox.innerHTML = html; } function syncPostitCheckList(el) { const note = el.closest('.postit-note'); if (!note) return; const ta = note.querySelector('.postit-area'); const rows = note.querySelectorAll('.postit-check-row'); let text = ''; rows.forEach(function(row){ const chk = row.querySelector('.postit-check-box'); const txt = row.querySelector('.postit-check-text'); text += (chk && chk.checked ? '☑ ' : '☐ ') + (txt ? txt.value : '') + '\n'; }); if (ta) ta.value = text.replace(/\n$/, ''); scheduleAutoSave(); } function addPostitCheckRow(btnEl) { const note = btnEl.closest('.postit-note'); if (!note) return; const row = document.createElement('div'); row.className = 'postit-check-row'; row.innerHTML = '<input type="checkbox" class="postit-check-box" onchange="syncPostitCheckList(this)">' + '<input type="text" class="postit-check-text" value="" oninput="syncPostitCheckList(this)" placeholder="항목 입력">' + '<button class="postit-check-del" onclick="removePostitCheckRow(this)" title="이 항목 삭제">✕</button>'; btnEl.parentNode.insertBefore(row, btnEl); const txt = row.querySelector('.postit-check-text'); if (txt) txt.focus(); syncPostitCheckList(row); } function removePostitCheckRow(btnEl) { const row = btnEl.closest('.postit-check-row'); const note = btnEl.closest('.postit-note'); if (row) row.remove(); if (note) syncPostitCheckList(note.querySelector('.postit-area') || btnEl); scheduleAutoSave(); } /* ── 포스T잇 1개만 공유 ── */ function openPostitNoteShare(btnEl) { const note = btnEl.closest('.postit-note'); const sec = btnEl.closest('.section-card'); if (!note || !sec) return; const id = sec.id.split('-')[2]; const date = secDateMap[id]; const ta = note.querySelector('.postit-area'); const text = ta ? ta.value : ''; if (!text.trim()) { toast('✏️ 먼저 포스트잇에 내용을 입력해주세요'); return; } const bg = note.dataset.bg || POSTIT_COLORS[0]; const entry = { ti:'', dt:'', ad:'', qm:'', pt:[{v:text, bg:bg}], pcol:1, me:'', ph:'', sm:'', pk:'', to:[], lk:[], sc:[], ws:[], done:false, theme:0, tab:4 }; const shareDayStore = {}; shareDayStore[date] = entry; const json = JSON.stringify({shareType:'section', title:getTripTitle(), dayStore:shareDayStore, visibleDates:[date], anchorDate:date}); const enc = encodeUrlData(json); const url = PUBLIC_BASE + '?d=' + enc; clipCopy(url).then(function(){ toast(' 포스트잇 링크가 복사됐어요! 카카오톡·메일에 붙여넣기 하세요'); }).catch(function(){ toast('복사 실패 — 직접 선택해서 복사해주세요'); }); } function addPostitNote(secId, value, bg, mode) { const box = document.getElementById('postit-box-' + secId); if (!box) return; const idx = box.querySelectorAll('.postit-note').length; const wrap = document.createElement('div'); wrap.innerHTML = buildPostitNoteHTML(idx, value||'', bg, mode||''); const noteEl = wrap.firstElementChild; box.appendChild(noteEl); if (mode === 'todo' || mode === 'check') { noteEl.querySelector('.postit-check-list').classList.toggle('postit-check-list-round', mode==='todo'); renderPostitCheckList(noteEl, value||''); } if (value) { const ta = noteEl.querySelector('textarea'); if (ta) setTimeout(function(){ autoExpandMemo(ta); }, 0); } scheduleAutoSave(); } function removePostitNote(btnEl) { const note = btnEl.closest('.postit-note'); const box = note.closest('.postit-box'); if (box.querySelectorAll('.postit-note').length <= 1) { const ta = note.querySelector('textarea'); if (ta) ta.value = ''; scheduleAutoSave(); return; } note.remove(); renumberPostitNotes(box); scheduleAutoSave(); } function renumberPostitNotes(box) { box.querySelectorAll('.postit-note').forEach(function(n, i){ const label = n.querySelector('.postit-note-label'); if (label) label.textContent = ' ' + (i+1); }); } function getPostitItems(secId) { const box = document.getElementById('postit-box-' + secId); if (!box) return []; return Array.from(box.querySelectorAll('.postit-note')).map(function(n){ const ta = n.querySelector('textarea'); return { v: ta ? ta.value : '', bg: n.dataset.bg || POSTIT_COLORS[0], mode: n.dataset.mode || '' }; }); } function setPostitItems(secId, items) { const box = document.getElementById('postit-box-' + secId); if (!box) return; box.innerHTML = ''; const arr = (items && items.length) ? items : [{v:'',bg:POSTIT_COLORS[0],mode:''}]; arr.forEach(function(it, idx){ const v = (typeof it === 'string') ? it : ((it && it.v) || ''); const bg = (it && typeof it === 'object' && it.bg) ? it.bg : POSTIT_COLORS[0]; const mode = (it && typeof it === 'object' && it.mode) ? it.mode : ''; const wrap = document.createElement('div'); wrap.innerHTML = buildPostitNoteHTML(idx, v, bg, mode); const noteEl = wrap.firstElementChild; box.appendChild(noteEl); if (mode === 'todo' || mode === 'check') { noteEl.querySelector('.postit-check-list').classList.toggle('postit-check-list-round', mode==='todo'); renderPostitCheckList(noteEl, v); } if (v) { const ta = noteEl.querySelector('textarea'); if (ta) setTimeout(function(){ autoExpandMemo(ta); }, 0); } }); } /* 포스T잇 칸수(1/2/3열) 레이아웃 */ function applyPostitCols(secId, n) { const box = document.getElementById('postit-box-' + secId); if (box) box.style.setProperty('--pcols', n); const card = document.getElementById('sec-container-' + secId); if (card) card.querySelectorAll('.postit-col-btn').forEach(function(b){ b.classList.toggle('active', parseInt(b.dataset.cols,10) === n); }); } function setPostitCols(secId, n) { applyPostitCols(secId, n); scheduleAutoSave(); } function getPostitCols(secId) { const box = document.getElementById('postit-box-' + secId); if (!box) return 1; return parseInt(box.style.getPropertyValue('--pcols'), 10) || 1; } let _pfTargetTextarea = null; let _pfCurrentCat = '업무'; function openPostitFormat(btnEl) { const note = btnEl.closest('.postit-note'); _pfTargetTextarea = note ? note.querySelector('textarea') : null; renderPfCats(); renderPfList(); document.getElementById('postitFmtOverlay').classList.add('on'); } function closePostitFormat() { document.getElementById('postitFmtOverlay').classList.remove('on'); } function renderPfCats() { const cats = Object.keys(POSTIT_TEMPLATES); let html = ''; cats.forEach(function(c){ html += '<button class="pf-cat-btn' + (c===_pfCurrentCat?' active':'') + '" onclick="selectPfCat(\'' + c + '\')">' + c + '</button>'; }); document.getElementById('pfCats').innerHTML = html; } function selectPfCat(cat) { _pfCurrentCat = cat; renderPfCats(); renderPfList(); } function renderPfList() { const items = POSTIT_TEMPLATES[_pfCurrentCat] || []; let html = ''; items.forEach(function(it, idx){ html += '<div class="pf-item" onclick="insertPfTemplate(' + idx + ')">' + '<div class="pf-item-title">' + escapeHtml(it.t) + '</div>' + '<div class="pf-item-body">' + escapeHtml(it.b) + '</div>' + '</div>'; }); document.getElementById('pfList').innerHTML = html; } function insertPfTemplate(idx) { const it = (POSTIT_TEMPLATES[_pfCurrentCat]||[])[idx]; if (!it || !_pfTargetTextarea) { closePostitFormat(); return; } const ta = _pfTargetTextarea; const prefix = ta.value && ta.value.trim() ? ta.value.replace(/\s+$/,'') + '\n\n' : ''; ta.value = prefix + it.b; autoExpandMemo(ta); scheduleAutoSave(); closePostitFormat(); toast(' 서식 삽입됨: ' + it.t); } /* ── 저장·복사 ── */ /* ── [V40] saveAndCopyBasic: 기본URL(긴링크) 전체섹션 저장·복사 ── */ function saveAndCopy() { saveAndCopyBasic(); } function saveAndCopyBasic() { const enc = collectData(); // 전체 섹션 collectData localStorage.setItem(LS_KEY, enc); const url = getBaseUrl() + '?d=' + enc; document.getElementById('shareUrlDisplay').value = url; document.getElementById('autoSaveUnder').textContent = ' 기본URL 저장 완료'; if (url.length > 8000) toast('⚠️ URL이 깁니다. [압축URL저장] 사용을 권장합니다.'); // [V53] 주소창을 파라미터 URL로 교체 → Ctrl+D로 즐겨찾기 바로 저장 가능 try { history.replaceState(null, '', url); } catch(e) {} clipCopy(url) .then(() => toast('✓ URL 복사됨! 주소창도 업데이트 됨 → Ctrl+D로 즐겨찾기 추가 가능')) .catch(() => toast('링크 생성됨 — 주소창에서 Ctrl+D로 즐겨찾기 추가')); } /* ── [V40] saveAndCopyTiny: TinyURL 압축 전체섹션 저장·복사 ── */ async function saveAndCopyTiny() { const btn = document.querySelector('button[onclick="saveAndCopyTiny()"]'); if (btn) { btn.textContent = '생성중...'; btn.disabled = true; } try { const enc = collectData(); // 전체 섹션 collectData localStorage.setItem(LS_KEY, enc); const longUrl = getBaseUrl() + '?d=' + enc; let shortUrl = ''; try { const res = await fetch('https://tinyurl.com/api-create.php?url=' + encodeURIComponent(longUrl)); if (res.ok) { const t = (await res.text()).trim(); if (t.startsWith('http')) shortUrl = t; } } catch(e) {} if (shortUrl) { document.getElementById('shareUrlDisplay').value = shortUrl; document.getElementById('autoSaveUnder').textContent = ' 압축URL 저장 완료'; try { history.replaceState(null, '', shortUrl); } catch(e) {} clipCopy(shortUrl) .then(() => toast('✓ 압축URL 복사됨! 주소창 업데이트 → Ctrl+D로 즐겨찾기 추가 가능')) .catch(() => toast('압축URL 생성됨 — 주소창에서 Ctrl+D로 즐겨찾기 추가')); } else { toast('❌ TinyURL 생성 실패 — 인터넷 확인 후 [기본URL저장] 사용'); document.getElementById('shareUrlDisplay').value = longUrl; document.getElementById('autoSaveUnder').textContent = '⚠️ 압축 실패 — 기본URL로 대체'; } } catch(e) { toast('오류: ' + e.message); } finally { if (btn) { btn.textContent = '압축URL저장'; btn.disabled = false; } } } /* ── 초기화 (주차/즐겨찾기는 유지) ── */ function factoryReset() { if (confirm('⚠️ 초기화\n\n섹션 입력 내용을 모두 삭제합니다.\n✅ 주차위치·즐겨가기·결재라인은 유지됩니다.\n\n계속하시겠습니까?')) { localStorage.removeItem(LS_KEY); try { history.replaceState(null, '', window.location.pathname); } catch(e) {} dayStore = {}; anchorDate = todayStr(); visibleDates = [anchorDate]; rebuildVisibleSections(); refreshCalendarToAnchor(); document.getElementById('shareUrlDisplay').value = ''; document.getElementById('autoSaveUnder').textContent = ' 초기화됨'; const titleEl = document.getElementById('tripMainTitle'); if (titleEl) titleEl.value = ''; toast('✓ 초기화 완료 (주차·즐겨찾기 유지)'); } } /* ── 기기저장 ── */ function deviceSave() { try { const enc = collectData(); localStorage.setItem(LS_KEY, enc); document.getElementById('autoSaveUnder').textContent = ' 기기저장: ' + fmtSaveTime(); try { history.replaceState(null, '', window.location.href.split('?')[0]); } catch(e) {} toast(' 기기에 저장 완료!'); } catch(e) { toast('저장 실패: ' + e.message); } } /* ── REPLY ── */ function openReply() { const enc = collectData(); localStorage.setItem(LS_KEY, enc); const url = getBaseUrl() + '?d=' + enc; const title = getTripTitle(); const replyText = `paste+re\n${title}\n${url}`; clipCopy(replyText).then(() => { document.getElementById('modalOverlay').classList.add('on'); document.getElementById('modalContent').innerHTML = `<div style="text-align:center;padding:10px 0 6px;"><div style="font-size:36px;margin-bottom:8px;"> </div><div style="font-size:20px;font-weight:900;color:var(--text);letter-spacing:1px;">paste+re</div></div><div style="margin-top:10px;text-align:center;"><button class="modal-btn" style="background:var(--input-bg);color:var(--text2);" onclick="closeModal()">닫기</button></div>`; }).catch(() => { document.getElementById('modalOverlay').classList.add('on'); document.getElementById('modalContent').innerHTML = `<div style="text-align:center;padding:10px 0 6px;"><div style="font-size:36px;margin-bottom:8px;"> </div><div style="font-size:20px;font-weight:900;color:var(--text);letter-spacing:1px;">paste+re</div><div style="font-size:11px;color:var(--text2);margin-top:8px;">아래 텍스트를 복사하세요</div></div><textarea class="modal-textarea" style="height:70px;margin-top:8px;">${title}\n${url}</textarea><div style="margin-top:10px;text-align:center;"><button class="modal-btn" style="background:var(--input-bg);color:var(--text2);" onclick="closeModal()">닫기</button></div>`; }); } /* ── 지도 공유 ── */ function shareDataMail(s) { const addr = (document.getElementById(`addr-${s}`)||{value:""}).value; const title = (document.getElementById(`sec-title-${s}`)||{value:""}).value || ''; const smemo = (document.getElementById(`smemo-${s}`)||{value:""}).value || ''; if (!addr) { toast('주소를 먼저 입력하세요'); return; } let body = ` ${title}\n주소: ${addr}\n`; if (smemo) body += `메모: ${smemo}\n`; body += `\n ️ 구글맵: https://www.google.com/maps/search/${encodeURIComponent(addr)}\n 네이버맵: https://map.naver.com/v5/search/${encodeURIComponent(addr)}`; window.location.href = `mailto:?subject=${encodeURIComponent('[위치 공유] ' + title)}&body=${encodeURIComponent(body)}`; } function shareDataText(s) { const addr = (document.getElementById(`addr-${s}`)||{value:""}).value; const title = (document.getElementById(`sec-title-${s}`)||{value:""}).value || ''; const smemo = (document.getElementById(`smemo-${s}`)||{value:""}).value || ''; if (!addr) { toast('주소를 먼저 입력하세요'); return; } let msg = ` ${title}\n주소: ${addr}\n`; if (smemo) msg += `메모: ${smemo}\n`; msg += `\n ️ 구글맵: https://www.google.com/maps/search/${encodeURIComponent(addr)}\n 네이버맵: https://map.naver.com/v5/search/${encodeURIComponent(addr)}`; clipCopy(msg).then(()=>toast(' 텍스트 복사 완료!')).catch(()=>toast('복사 실패')); } function openNaverMap(s) { const addr = (document.getElementById(`addr-${s}`)||{value:""}).value; if (!addr) { toast('주소를 먼저 입력하세요'); return; } _openMapUrl('naver', addr); } function openKakaoTalkShare(s) { const addr = (document.getElementById(`addr-${s}`)||{value:""}).value; const title = (document.getElementById(`sec-title-${s}`)||{value:""}).value || ''; const smemo = (document.getElementById(`smemo-${s}`)||{value:""}).value || ''; if (!addr) { toast('주소를 먼저 입력하세요'); return; } const msg = ` ${title}\n주소: ${addr}${smemo?'\n메모: '+smemo:''}\n\n ️ 구글맵: https://www.google.com/maps/search/${encodeURIComponent(addr)}\n 네이버맵: https://map.naver.com/v5/search/${encodeURIComponent(addr)}`; clipCopy(msg).then(()=>{toast(' 복사됨! 카카오톡으로 이동합니다');setTimeout(()=>{window.location.href='kakaotalk://launch';},600);}).catch(()=>{window.location.href='kakaotalk://launch';}); } /* ── 섹션공유 ── */ let _secShareUrlMine = ''; let _secShareUrlPublic = ''; const PUBLIC_BASE = 'https://0-1.kr/6'; /* 포스T잇탭 마스터 체크박스 ↔ 각 탭 개별 체크박스 양방향 연동 */ function syncShareCheckbox(id, kind, val) { const pairs = { ws: ['share-master-ws-'+id, 'share-ws-'+id] }[kind]; if (!pairs) return; pairs.forEach(function(elId){ const el = document.getElementById(elId); if (el) el.checked = val; }); } function openSecShare(id) { const c = document.getElementById(`sec-container-${id}`); const date = secDateMap[id]; const ts = []; const todoBox = document.getElementById(`todo-box-${id}`); if (todoBox) { todoBox.querySelectorAll('.todo-item').forEach(d => { ts.push({v:(d.querySelector('input[type="text"]')||{value:""}).value||'',c:(!!((d.querySelector('input[type="checkbox"]'))||{}).checked)||false}); }); } // [V71] 공유시 포함 기능은 포스T잇(항상 포함)·작업순서(선택)만 지원 const inclWs = !!(document.getElementById('share-ws-'+id) && document.getElementById('share-ws-'+id).checked); const entry = { ti:(document.getElementById('sec-title-'+id)||{value:""}).value||'', dtitle:(dayStore[date] && dayStore[date].dtitle) || '', wtitle:(dayStore[date] && dayStore[date].wtitle) || '', dt:getDateTime(id), ad: '', qm: '', // 출장탭(제거됨, 하위호환용 빈값) pt: getPostitItems(id), // 포스T잇은 항상 포함 pcol: getPostitCols(id), vu: (document.getElementById('video-url-'+id)||{value:""}).value || '', vbm: (function(){ try { return JSON.parse((document.getElementById('video-bm-'+id)||{}).value || '[]'); } catch(e){ return []; } })(), ccue: (document.getElementById('cornell-cue-'+id)||{value:""}).value || '', cnote: (document.getElementById('cornell-note-'+id)||{value:""}).value || '', csum: (document.getElementById('cornell-sum-'+id)||{value:""}).value || '', me: '', ph: '', sm:(document.getElementById('smemo-'+id)||{value:""}).value||'', pk: '', to: [], lk: [], sc: [], ws: inclWs ? readWsSteps(id) : [], done:false, theme:parseInt(c.dataset.theme||'0'), tab: secLastTab[id] || 4 }; const shareDayStore = {}; shareDayStore[date] = entry; const json = JSON.stringify({shareType:'section', title:getTripTitle(), dayStore:shareDayStore, visibleDates:[date], anchorDate:date}); const enc = encodeUrlData(json); _secShareUrlMine = getBaseUrl() + '?d=' + enc; _secShareUrlPublic = PUBLIC_BASE + '?d=' + enc; var secTitle = ((document.getElementById(`sec-title-${id}`)||{value:""}).value || formatSecDate(date)); document.getElementById('secShareTitle').textContent = ' ' + secTitle; document.getElementById('secShareUrl').textContent = _secShareUrlPublic; window._currentSecId = id; window._secInclMemo = false; window._secInclSched = false; window._secInclTrip = false; window._secInclWs = inclWs; var noteEl = document.getElementById('secShareIncludeNote'); if (noteEl) { var parts = ['포스T잇']; if (inclWs) parts.push('작업순서탭'); noteEl.textContent = '포함: ' + parts.join(' + '); } document.getElementById('secShareOverlay').classList.add('on'); setTimeout(function() { var subjEl = document.getElementById('secMailSubj'); if (subjEl) subjEl.value = secTitle; var prevEl = document.getElementById('secMailPreview'); if (prevEl) prevEl.innerHTML = '<span style="color:var(--text2);font-size:10px;">공유 버튼 클릭 시 내용이 표시됩니다</span>'; openSecMail(id); }, 80); } function copySecShareUrl(type) { const url = (type === 'mine') ? _secShareUrlMine : _secShareUrlPublic; const label = (type === 'mine') ? ' 나만의 링크' : ' 공유형 링크'; clipCopy(url).then(()=>{toast(' ' + label + ' 복사됨!');closeSecShare();}).catch(()=>toast('복사 실패')); } function closeSecShare() { document.getElementById('secShareOverlay').classList.remove('on'); } /* ── 섹션 이동 ── */ function rebuildArrows() { const container = document.getElementById('dynamic-sections'); container.querySelectorAll('.divider-arrow').forEach(a=>a.remove()); Array.from(container.querySelectorAll('.section-card')).forEach((card,idx)=>{ if(idx>0){const arrow=document.createElement('div');arrow.className='divider-arrow';arrow.textContent='↓';container.insertBefore(arrow,card);} }); } function moveSec(id, dir) { const c=document.getElementById(`sec-container-${id}`); const container=document.getElementById('dynamic-sections'); const cards=Array.from(container.querySelectorAll('.section-card')); const idx=cards.indexOf(c); if(dir===-1&&idx>0) container.insertBefore(c,cards[idx-1]); else if(dir===1&&idx<cards.length-1) cards[idx+1].after(c); rebuildArrows();syncVisibleDatesOrder();scheduleAutoSave(); } function removeSec(id) { if(confirm('이 섹션을 삭제하시겠습니까? (달력에는 입력했던 내용이 계속 남아있습니다)')){ (function(){var _r=document.getElementById(`sec-container-${id}`);if(_r)_r.remove();})(); rebuildArrows();syncVisibleDatesOrder();scheduleAutoSave();updateProgress(); } } /* ── 복구 ── */ function showRecovery() { document.getElementById('modalOverlay').classList.add('on'); document.getElementById('modalContent').innerHTML=`<h3> 데이터 복구</h3><p style="font-size:12px;color:var(--text2);margin-bottom:10px;">링크를 붙여넣으면 일정이 복원됩니다.</p><textarea class="modal-textarea" id="recIn" placeholder="https://0-1.kr/6?d=... 전체 링크 붙여넣기"></textarea><div class="modal-btns"><button class="modal-btn" style="background:#e2e8f0;color:#1e293b;" onclick="closeModal()">취소</button><button class="modal-btn" style="background:#2563eb;color:#fff;" onclick="applyRec()">복구 시작</button></div>`; } function applyRec() { try{ const input=document.getElementById('recIn').value.trim(); let d=input.startsWith('http')?new URL(input).searchParams.get('d'):(input.length>50?input:null); if(d){applyData(d);localStorage.setItem(LS_KEY,d);closeModal();toast('✓ 데이터가 복구되었습니다!');} else toast('❌ 올바른 링크 형식이 아닙니다.'); }catch(e){toast('❌ 링크 형식이 잘못되었습니다.');} } /* ── 요약 ── */ function showSummary() { document.getElementById('modalOverlay').classList.add('on'); let txt = `<h3> ${getTripTitle()}</h3><div style="font-size:13px;">`; document.querySelectorAll('.section-card').forEach(c=>{ const id=c.id.split('-')[2]; const done=c.classList.contains('completed'); const ti=(document.getElementById(`sec-title-${id}`)||{value:""}).value||''; const dt=getDateTime(id); const pt=getPostitItems(id).filter(v=>v); const ws=readWsSteps(id).filter(st=>st.title||st.body); const me=(document.getElementById(`memo-${id}`)||{value:""}).value||''; const ph=(document.getElementById(`phone-${id}`)||{value:""}).value||''; txt+=`<div style="padding:10px;background:var(--input-bg);margin-bottom:7px;border-radius:10px;border-left:3px solid ${done?'#10b981':'#2563eb'};">`; txt+=`<b style="color:${done?'#10b981':'#2563eb'};">${done?'✅ ':''}${ti}</b><br>`; if(dt) txt+=` ${dt.replace('T',' ')}<br>`; if(pt.length) txt+=` ${pt.join(' · ')}<br>`; if(ws.length) txt+=` ${ws.map(st=>(st.done?'✔':'')+(st.title||st.body.slice(0,15))).join(' → ')}<br>`; if(me) txt+=` ${me}<br>`; if(ph) txt+=` ${ph}<br>`; txt+='</div>'; }); txt+='</div>'; txt+=`<div style="display:flex;gap:7px;margin-top:12px;"><button class="modal-btn" style="flex:1;background:#2563eb;color:#fff;" onclick="copySummary()"> 복사</button><button class="modal-btn" style="flex:1;background:#1c1c1e;color:#fff;" onclick="closeModal()">닫기</button></div>`; document.getElementById('modalContent').innerHTML=txt; } function copySummary() { let text=` ${getTripTitle()}\n──────────────────────\n`; document.querySelectorAll('.section-card').forEach(c=>{ const id=c.id.split('-')[2]; const done=c.classList.contains('completed'); const ti=(document.getElementById(`sec-title-${id}`)||{value:""}).value||''; const dt=getDateTime(id); const pt=getPostitItems(id).filter(v=>v); const ws=readWsSteps(id).filter(st=>st.title||st.body); const me=(document.getElementById(`memo-${id}`)||{value:""}).value||''; const ph=(document.getElementById(`phone-${id}`)||{value:""}).value||''; text+=(done?'✅ ':'')+ti+'\n'; if(dt) text+=' '+dt.replace('T',' ')+'\n'; if(pt.length) text+=' '+pt.join(' · ')+'\n'; if(ws.length) text+=' '+ws.map(st=>(st.done?'✔':'')+(st.title||st.body.slice(0,15))).join(' → ')+'\n'; if(me) text+=' '+me+'\n'; if(ph) text+=' '+ph+'\n'; text+='\n'; }); clipCopy(text).then(()=>toast(' 복사됨!')).catch(()=>toast('복사 실패')); } /* ── 공통 메시지 ── */ async function buildShareMessage() { const enc=collectData();localStorage.setItem(LS_KEY,enc); const dataUrl=getBaseUrl()+'?d='+enc; document.getElementById('shareUrlDisplay').value=dataUrl; let shortUrl=''; try{const res=await fetch('https://tinyurl.com/api-create.php?url='+encodeURIComponent(dataUrl));if(res.ok){const t=(await res.text()).trim();if(t.startsWith('http'))shortUrl=t;}}catch(e){} const tripTitle=getTripTitle();let summary=''; document.querySelectorAll('.section-card').forEach(c=>{ const id=c.id.split('-')[2]; const ti=(document.getElementById('sec-title-'+id)||{value:""}).value||''; const dt=getDateTime(id); const pt=getPostitItems(id).filter(v=>v); const ws=readWsSteps(id).filter(st=>st.title||st.body); const me=(document.getElementById('memo-'+id)||{value:""}).value||''; if(!ti&&!pt.length&&!ws.length) return; summary+=(c.classList.contains('completed')?'✅ ':'')+ti+'\n'; if(dt) summary+=' '+dt.replace('T',' ')+'\n'; if(pt.length) summary+=' '+pt.join(' · ')+'\n'; if(ws.length) summary+=' '+ws.map(st=>(st.done?'✔':'')+(st.title||st.body.slice(0,15))).join(' → ')+'\n'; if(me) summary+=' '+me+'\n'; summary+='\n'; }); const div='──────────────────────'; let linkBlock=' 전체일정 편집\n'+dataUrl; if(shortUrl) linkBlock+='\n\n 단축링크\n'+shortUrl; return{msg:` ${tripTitle}\n${div}\n${summary.trim()}\n${div}\n${linkBlock}\n${div}\n✅ 0-1.kr/6`,dataUrl,shortUrl}; } /* ── 카톡/메일 ── */ async function sendKakao() { const btn=document.querySelector('button[onclick="sendKakao()"]'); if(btn){btn.textContent='처리중..';btn.disabled=true;} try{ const{msg}=await buildShareMessage(); try{ await clipCopy(msg); alert(' 카카오톡 공유 준비 완료!\n\n클립보드에 복사됐습니다.\n① 카카오톡 앱 열기\n② 채팅방에서 붙여넣기'); }catch(e){ const ta=document.createElement('textarea');ta.value=msg;ta.style.cssText='position:fixed;top:0;left:0;width:100%;height:50%;z-index:99999;font-size:12px;padding:10px;'; document.body.appendChild(ta);ta.focus();ta.select(); alert('위 텍스트를 전체선택 후 카카오톡에 붙여넣기 해주세요.\n확인을 누르면 닫힙니다.'); document.body.removeChild(ta); } }catch(e){toast('오류: '+e.message);} finally{if(btn){btn.textContent='카톡';btn.disabled=false;}} } /* ── 일정탭 ── */ function addScheduleItem(s, text, timeLabel, insertAfterEl) { var b = document.getElementById('sched-box-' + s); if (!b) return null; var existingItems = b.querySelectorAll('.sched-item').length; var _togEl = document.getElementById('sched-time-toggle-' + s); var showTime = !(_togEl ? _togEl._timeHidden : false); var slots = ['0-5시','5-8시','8-10시','10-12시','12-14시','14-16시','16-18시','18-23시']; var tLabel = (timeLabel !== undefined) ? timeLabel : slots[existingItems % slots.length]; var uid = 'si-' + s + '-' + Date.now() + '-' + Math.floor(Math.random()*1000); var d = document.createElement('div'); d.className = 'sched-item'; d.id = uid; d.dataset.timeLabel = tLabel; d.draggable = true; // 드래그 핸들 (☰, 맨 앞) var handle = document.createElement('div'); handle.className = 'sched-drag-handle'; handle.title = '드래그로 순서 변경'; handle.innerHTML = '<span></span><span></span><span></span>'; initDragHandle(handle, d, b, s); // 체크박스 var chk = document.createElement('input'); chk.type = 'checkbox'; chk.className = 'sched-check'; chk.addEventListener('change', function() { d.classList.toggle('done-item', this.checked); scheduleAutoSave(); }); // 시간 라벨 var timeLbl = document.createElement('span'); timeLbl.className = 'sched-time-label'; timeLbl.textContent = tLabel; timeLbl.style.display = showTime ? '' : 'none'; // textarea (다중줄 지원) var txt = document.createElement('textarea'); txt.className = 'sched-text'; txt.placeholder = '일정 내용'; txt.value = text || ''; txt.addEventListener('focus', function() { // 마지막 포커스된 항목 기억 if (!window._lastSchedFocus) window._lastSchedFocus = {}; window._lastSchedFocus[s] = d; }); txt.addEventListener('input', function() { this.style.height = 'auto'; this.style.height = Math.max(22, this.scrollHeight) + 'px'; saveSchedHistory(s); scheduleAutoSave(); }); txt.addEventListener('keydown', function(e) { if (e.key === 'Tab') { e.preventDefault(); // 다음 sched-text로 포커스 이동 var all = b.querySelectorAll('.sched-text'); var arr = Array.from(all); var idx = arr.indexOf(txt); if (idx < arr.length - 1) arr[idx + 1].focus(); } if (e.key === 'z' && (e.ctrlKey || e.metaKey) && !e.shiftKey) { e.preventDefault(); undoSched(s); } if (e.key === 'y' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); redoSched(s); } if (e.key === 'z' && (e.ctrlKey || e.metaKey) && e.shiftKey) { e.preventDefault(); redoSched(s); } }); d.appendChild(handle); d.appendChild(chk); d.appendChild(timeLbl); d.appendChild(txt); // 지정 위치에 삽입, 없으면 맨 아래 if (insertAfterEl && insertAfterEl.parentNode === b) { b.insertBefore(d, insertAfterEl.nextSibling); } else { b.appendChild(d); } // DOM 추가 후 높이 조정 if (text) { txt.style.height = 'auto'; txt.style.height = Math.max(22, txt.scrollHeight) + 'px'; } txt.focus(); scheduleAutoSave(); return d; } /* [V49] 드래그: 내용만 교환, 시간라벨은 위치 그대로 */ function swapSchedContent(a, b) { var aTxt = a.querySelector('.sched-text'); var bTxt = b.querySelector('.sched-text'); var aChk = a.querySelector('.sched-check'); var bChk = b.querySelector('.sched-check'); if (!aTxt || !bTxt) return; // 텍스트 교환 var tmpV = aTxt.value; aTxt.value = bTxt.value; bTxt.value = tmpV; // 체크 교환 var tmpC = aChk.checked; aChk.checked = bChk.checked; bChk.checked = tmpC; // done-item 클래스 교환 var aDone = a.classList.contains('done-item'); var bDone = b.classList.contains('done-item'); a.classList.toggle('done-item', bDone); b.classList.toggle('done-item', aDone); // 높이 재계산 [aTxt, bTxt].forEach(function(el) { el.style.height = 'auto'; el.style.height = Math.max(22, el.scrollHeight) + 'px'; }); } /* 드래그앤드롭 핸들 초기화 */ function initDragHandle(handle, item, box, s) { handle.addEventListener('mousedown', function(e) { item.draggable = true; }); item.addEventListener('dragstart', function(e) { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', item.id); setTimeout(function(){ item.classList.add('dragging'); }, 0); }); item.addEventListener('dragend', function() { item.classList.remove('dragging'); box.querySelectorAll('.sched-item').forEach(function(it){ it.classList.remove('drag-over'); }); saveSchedHistory(s); scheduleAutoSave(); }); item.addEventListener('dragover', function(e) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; box.querySelectorAll('.sched-item').forEach(function(it){ it.classList.remove('drag-over'); }); item.classList.add('drag-over'); }); item.addEventListener('drop', function(e) { e.preventDefault(); var dragId = e.dataTransfer.getData('text/plain'); var dragged = document.getElementById(dragId); if (dragged && dragged !== item) { // [V49] 내용만 교환 (시간라벨은 위치 고정) swapSchedContent(dragged, item); } item.classList.remove('drag-over'); }); // 터치 드래그 (모바일) var touchStartY = 0, touchItem = null; handle.addEventListener('touchstart', function(e) { touchStartY = e.touches[0].clientY; touchItem = item; item.classList.add('dragging'); }, {passive:true}); handle.addEventListener('touchmove', function(e) { e.preventDefault(); var y = e.touches[0].clientY; var els = Array.from(box.querySelectorAll('.sched-item')); var target = els.find(function(el) { var rect = el.getBoundingClientRect(); return y >= rect.top && y <= rect.bottom && el !== touchItem; }); els.forEach(function(el){ el.classList.remove('drag-over'); }); if (target) target.classList.add('drag-over'); }, {passive:false}); handle.addEventListener('touchend', function(e) { item.classList.remove('dragging'); var target = box.querySelector('.sched-item.drag-over'); if (target && target !== item) swapSchedContent(item, target); box.querySelectorAll('.sched-item').forEach(function(el){ el.classList.remove('drag-over'); }); saveSchedHistory(s); scheduleAutoSave(); }); } /* 커서 위치 아래에 일정 추가 */ /* ── 일정 Undo/Redo (10단계) ── */ var _schedHistory = {}; // {secId: [snapshot, ...]} var _schedRedoStack= {}; // {secId: [snapshot, ...]} var _schedSaving = {}; // 저장 중 플래그 function getSchedSnapshot(s) { var b = document.getElementById('sched-box-' + s); if (!b) return []; var snap = []; b.querySelectorAll('.sched-item').forEach(function(d) { var chk = d.querySelector('.sched-check'); var txt = d.querySelector('.sched-text'); var lbl = d.querySelector('.sched-time-label'); var tog = document.getElementById('sched-time-toggle-' + s); snap.push({ v: txt ? txt.value : '', c: chk ? chk.checked: false, tl: d.dataset.timeLabel || (lbl ? lbl.textContent : ''), th: tog ? !!tog._timeHidden : false }); }); return snap; } function applySchedSnapshot(s, snap) { _schedSaving[s] = true; setScheduleItems(s, snap); _schedSaving[s] = false; scheduleAutoSave(); } function saveSchedHistory(s) { if (_schedSaving[s]) return; if (!_schedHistory[s]) _schedHistory[s] = []; if (!_schedRedoStack[s]) _schedRedoStack[s] = []; var snap = getSchedSnapshot(s); var hist = _schedHistory[s]; // 마지막 스냅샷과 동일하면 저장 안 함 if (hist.length && JSON.stringify(hist[hist.length-1]) === JSON.stringify(snap)) return; hist.push(snap); if (hist.length > 10) hist.shift(); _schedRedoStack[s] = []; // 새 액션 시 redo 스택 초기화 } function undoSched(s) { if (!_schedHistory[s] || _schedHistory[s].length < 2) { toast('↩ 더 이상 되돌릴 내용이 없습니다'); return; } if (!_schedRedoStack[s]) _schedRedoStack[s] = []; var current = _schedHistory[s].pop(); _schedRedoStack[s].push(current); var prev = _schedHistory[s][_schedHistory[s].length - 1]; applySchedSnapshot(s, JSON.parse(JSON.stringify(prev))); toast('↩ 실행취소'); } function redoSched(s) { if (!_schedRedoStack[s] || !_schedRedoStack[s].length) { toast('↪ 다시실행할 내용이 없습니다'); return; } var next = _schedRedoStack[s].pop(); if (!_schedHistory[s]) _schedHistory[s] = []; _schedHistory[s].push(next); applySchedSnapshot(s, JSON.parse(JSON.stringify(next))); toast('↪ 다시실행'); } /* [V50] 입력일정 모두보기 토글 */ function toggleViewAllSched(s) { var b = document.getElementById('sched-box-' + s); var btn = document.getElementById('view-all-btn-' + s); if (!b || !btn) return; var isExpanded = btn.dataset.expanded === '1'; if (!isExpanded) { // 펼치기: 빈 항목 숨기고 내용 있는 것만 표시 + 높이 확장 b.querySelectorAll('.sched-item').forEach(function(item) { var txt = item.querySelector('.sched-text'); if (!txt || !txt.value.trim()) { item.style.display = 'none'; } else { item.style.display = ''; txt.style.height = 'auto'; txt.style.height = Math.max(26, txt.scrollHeight) + 'px'; } }); // 같은 섹션의 메모탭 textarea들도 확장 var card = document.getElementById('sec-container-' + s); if (card) { card.querySelectorAll('.compact-textarea').forEach(function(ta) { if (ta.value.trim()) { ta.style.height = 'auto'; ta.style.height = Math.max(52, ta.scrollHeight) + 'px'; } }); } btn.textContent = ' 원래대로'; btn.style.background = '#fff7ed'; btn.style.borderColor = '#fed7aa'; btn.style.color = '#ea580c'; btn.dataset.expanded = '1'; toast(' 내용 있는 항목만 표시됩니다'); } else { // 접기: 모든 항목 다시 표시 b.querySelectorAll('.sched-item').forEach(function(item) { item.style.display = ''; var txt = item.querySelector('.sched-text'); if (txt && txt.value) { txt.style.height = 'auto'; txt.style.height = Math.max(26, txt.scrollHeight) + 'px'; } }); btn.textContent = ' 입력한일정만 보기'; btn.style.background = '#f0f9ff'; btn.style.borderColor = '#bae6fd'; btn.style.color = '#2563eb'; btn.dataset.expanded = '0'; toast(' 전체 목록으로 복원됐습니다'); } } function addScheduleAtCursor(s) { var b = document.getElementById('sched-box-' + s); if (!b) return; // 마지막으로 포커스된 항목 사용 (버튼 클릭 시 activeElement가 바뀌므로) var focusedItem = (window._lastSchedFocus && window._lastSchedFocus[s]) || null; // focusedItem이 현재 b 안에 있는지 확인 if (focusedItem && !b.contains(focusedItem)) focusedItem = null; if (focusedItem) { var sameTimeLabel = focusedItem.dataset.timeLabel || ''; addScheduleItem(s, '', sameTimeLabel, focusedItem); // 같은 시간대로 추가 toast('✅ ' + sameTimeLabel + ' 시간대에 추가됨'); } else { // 커서 없으면 맨 아래에 추가 addScheduleItem(s, '', undefined, null); toast('✅ 맨 아래에 추가됨'); } saveSchedHistory(s); } /* 체크된 일정 삭제 */ function deleteCheckedSched(s) { var b = document.getElementById('sched-box-' + s); if (!b) return; var checked = b.querySelectorAll('.sched-item .sched-check:checked'); if (!checked.length) { toast('삭제할 항목을 먼저 체크하세요'); return; } saveSchedHistory(s); checked.forEach(function(chk) { chk.closest('.sched-item').remove(); }); scheduleAutoSave(); toast('✅ 체크된 일정 ' + checked.length + '개 삭제됨'); } function getDefaultTimeLabel(idx) { var slots = ['0-5시','5-8시','8-10시','10-12시','12-14시','14-16시','16-18시','18-23시']; return slots[idx % slots.length] || (idx + '시'); } /* 섹션 전체 시간 토글 */ function toggleSchedTime(s) { var btn = document.getElementById('sched-time-toggle-' + s); if (!btn) return; var hidden = btn._timeHidden; btn._timeHidden = !hidden; btn.textContent = hidden ? '시간-' : '시간+'; btn.style.color = hidden ? '#64748b' : '#2563eb'; var b = document.getElementById('sched-box-' + s); if (!b) return; b.querySelectorAll('.sched-time-label').forEach(function(lbl) { lbl.style.display = hidden ? '' : 'none'; }); scheduleAutoSave(); } function moveSchedItem(el, dir) { var parent = el.parentNode; var items = Array.from(parent.querySelectorAll('.sched-item')); var idx = items.indexOf(el); if (dir === -1 && idx > 0) { parent.insertBefore(el, items[idx - 1]); } else if (dir === 1 && idx < items.length - 1) { items[idx + 1].after(el); } scheduleAutoSave(); } function getScheduleItems(s) { var b = document.getElementById('sched-box-' + s); if (!b) return []; var btn = document.getElementById('sched-time-toggle-' + s); var timeHidden = btn ? !!btn._timeHidden : false; var items = []; b.querySelectorAll('.sched-item').forEach(function(d) { var chk = d.querySelector('.sched-check'); var txt = d.querySelector('.sched-text'); var lbl = d.querySelector('.sched-time-label'); items.push({ v: txt ? txt.value : '', c: chk ? chk.checked : false, tl: d.dataset.timeLabel || (lbl ? lbl.textContent : ''), th: timeHidden }); }); return items; } function setScheduleItems(s, items) { var b = document.getElementById('sched-box-' + s); if (!b) return; b.innerHTML = ''; if (!items || !items.length) return; var timeHidden = items[0] && items[0].th; // 토글 버튼 상태 복원 var btn = document.getElementById('sched-time-toggle-' + s); if (btn) { btn._timeHidden = timeHidden; btn.textContent = timeHidden ? '시간+' : '시간-'; btn.style.color = timeHidden ? '#2563eb' : '#64748b'; } items.forEach(function(it) { addScheduleItem(s, it.v, it.tl); var last = b.lastElementChild; if (!last) return; var chk = last.querySelector('.sched-check'); var lbl = last.querySelector('.sched-time-label'); var txt = last.querySelector('.sched-text'); /* [V42 버그수정] txt 미선언 → ReferenceError로 forEach 중단되던 원인 */ if (chk && it.c) { chk.checked = true; last.classList.add('done-item'); } if (lbl && it.tl) { lbl.textContent = it.tl; last.dataset.timeLabel = it.tl; } if (lbl) lbl.style.display = timeHidden ? 'none' : ''; if (txt && it.v) { // [V49] 즉시 + 지연 2단계로 줄바꿈 높이 보장 txt.style.height = 'auto'; txt.style.height = Math.max(26, txt.scrollHeight) + 'px'; (function(el){ setTimeout(function(){ el.style.height='auto'; el.style.height=Math.max(26,el.scrollHeight)+'px'; }, 100); })(txt); } }); } /* ── 전체 이멜 팝업 ── */ function openMailPopup() { var title = getTripTitle(); var d = new Date(); var yy = String(d.getFullYear()).slice(2); var mm = String(d.getMonth()+1).padStart(2,'0'); var dd2 = String(d.getDate()).padStart(2,'0'); var mailSubject = yy+mm+dd2+'_'+title+'_메모장'; // [V51] 모든 섹션의 모든 탭(네비+메모+일정) 완전 요약 var summary = ''; var summaryHtml = ''; document.querySelectorAll('.section-card').forEach(function(card) { var id = card.id.split('-')[2]; var ti = (document.getElementById('sec-title-'+id)||{value:""}).value || ''; var dt = getDateTime(id); var pt = getPostitItems(id).filter(function(v){ return v; }); var ws = readWsSteps(id).filter(function(st){ return st.title || st.body; }); var me = (document.getElementById('memo-'+id)||{value:""}).value || ''; var ph = (document.getElementById('phone-'+id)||{value:""}).value || ''; var links = getLinks(id).filter(function(u){ return u; }); var schedItems = getScheduleItems(id); var schedFilledCheck = schedItems.filter(function(it){ return it.v && it.v.trim(); }); if (!ti && !pt.length && !ws.length && !schedFilledCheck.length && !me) return; var done = card.classList.contains('completed'); summary += (done ? '[완료] ' : '') + ti + '\n'; summaryHtml += '<b style="color:'+(done?'#10b981':'#2563eb')+';">'+(done?'[완료] ':'')+ti+'</b><br>'; if (dt) { summary += ' 일시: ' + dt.replace('T',' ') + '\n'; summaryHtml += '&nbsp;&nbsp; ' + dt.replace('T',' ') + '<br>'; } if (pt.length) { summary += ' [포스T잇] ' + pt.join(' · ') + '\n'; summaryHtml += '&nbsp;&nbsp; ' + pt.join(' · ') + '<br>'; } if (ws.length) { var wsLine = ws.map(function(st){ return (st.done?'✔':'')+(st.title||st.body.slice(0,15)); }).join(' → '); summary += ' [작업순서] ' + wsLine + '\n'; summaryHtml += '&nbsp;&nbsp; ' + wsLine + '<br>'; } // 메모탭 if (ph) { summary += ' 연락처: ' + ph + '\n'; summaryHtml += '&nbsp;&nbsp; ' + ph + '<br>'; } if (me) { summary += ' 상세메모: ' + me + '\n'; summaryHtml += '&nbsp;&nbsp; ' + me.replace(/\n/g,'<br>&nbsp;&nbsp;&nbsp;&nbsp;') + '<br>'; } if (links.length) { summary += ' 관련링크: ' + links.join(', ') + '\n'; summaryHtml += '&nbsp;&nbsp; ' + links.map(function(u){ return '<a href="'+u+'" style="color:#2563eb;">'+u+'</a>'; }).join(', ') + '<br>'; } // 일정탭 var schedFilled = schedFilledCheck; if (schedFilled.length) { summary += ' [하루 일정]\n'; summaryHtml += '&nbsp;&nbsp;<b> 하루 일정</b><br>'; schedFilled.forEach(function(it) { var label = it.tl ? it.tl + ' ' : ''; summary += ' ' + label + (it.c?'[완료] ':'') + it.v.replace(/\n/g,' / ') + '\n'; summaryHtml += '&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#2563eb;font-size:10px;">'+label+'</span>' + (it.c?'<s>':'') + it.v.replace(/\n/g,'<br>&nbsp;&nbsp;&nbsp;&nbsp;') + (it.c?'</s>':'') + '<br>'; }); } summary += '\n'; summaryHtml += '<br>'; }); document.getElementById('modalOverlay').classList.add('on'); document.getElementById('modalContent').innerHTML = '<div class="mail-popup">' + '<h3> 전체 일정 이메일 공유</h3>' + '<div class="mail-label">받는 사람</div>' + '<input class="mail-input" id="mailTo" type="email" placeholder="example@email.com">' + '<div class="mail-label">제목</div>' + '<input class="mail-input" id="mailSubj" type="text" value="' + mailSubject.replace(/"/g,'&quot;') + '">' + '<div class="mail-label">내용 미리보기 <span style="font-weight:400;color:#94a3b8;">(모든 탭 포함)</span></div>' + '<div class="mail-preview" id="mailPreviewHtml" style="max-height:220px;overflow-y:auto;font-size:11px;line-height:1.8;margin-bottom:10px;padding:10px;background:var(--input-bg);border:1px solid var(--border);border-radius:10px;">' + '<span style="color:var(--text2);">링크 생성 중...</span></div>' + '<div style="display:flex;gap:7px;">' + '<button class="modal-btn" style="flex:1;background:#e2e8f0;color:#1e293b;" onclick="closeModal()">취소</button>' + '<button class="modal-btn" style="flex:1;background:#2563eb;color:#fff;" onclick="doSendMail()"> 메일 열기</button>' + '</div></div>'; (async function() { var enc = collectData(); var fullUrl = getBaseUrl() + '?d=' + enc; var tinyUrl = ''; try { var res = await fetch('https://tinyurl.com/api-create.php?url=' + encodeURIComponent(fullUrl)); if (res.ok) { var t = (await res.text()).trim(); if (t.startsWith('http')) tinyUrl = t; } } catch(e) {} var previewHtml = summaryHtml; if (tinyUrl) previewHtml += '<b> 단축링크:</b> <a href="'+tinyUrl+'" style="color:#2563eb;">'+tinyUrl+'</a><br>'; previewHtml += '<b> 전체링크:</b> <a href="'+fullUrl+'" style="color:#2563eb;">클릭하여 바로보기</a><br>'; previewHtml += '<br><span style="color:#94a3b8;font-size:10px;">강의노트 계산기 | 스타트업EX</span>'; var prev = document.getElementById('mailPreviewHtml'); if (prev) prev.innerHTML = previewHtml; var body = '안녕하세요.\n\n' + title + ' 출장 일정입니다.\n\n'; body += '=== 전체 일정 요약 (모든 항목) ===\n' + summary; if (tinyUrl) body += '=== 단축 링크 ===\n' + tinyUrl + '\n\n'; body += '=== 전체 일정 링크 ===\n' + fullUrl + '\n\n'; body += '---\n강의노트 계산기\n스타트업EX | 하루를 더 스마트하게'; window._mailBody = body; })(); } function doSendMail() { var to = ((document.getElementById('mailTo')||{value:""}).value || '').trim(); var subj = ((document.getElementById('mailSubj')||{value:""}).value || '').trim(); var body = window._mailBody || ''; if (!to) { alert('받는 사람 이메일을 입력하세요'); return; } var mailto = 'mailto:' + encodeURIComponent(to) + '?subject=' + encodeURIComponent(subj) + '&body=' + encodeURIComponent(body); window.location.href = mailto; closeModal(); } /* ── 섹션 이멜 공유 ── */ /* [V39 수정] openSecMail: 섹션 전용 enc/_secShareUrlMine 사용 (이전: collectData()로 전체 URL 생성하던 버그 수정) */ function openSecMail(id) { var ti = (document.getElementById('sec-title-'+id)||{value:""}).value || ('섹션'+id); var dt = getDateTime(id); // [V51] 팝업 체크박스 상태에 따라 메모/일정/출장 포함 여부 결정 // [V52] openSecShare에서 저장한 값 사용 var inclMemoChk = false; var inclSchedChk = false; var inclTripChk = false; var inclWsChk = !!window._secInclWs; var ad = ''; var qm = ''; var me = ''; var ph = ''; // 제목 항상 최신값으로 var subjEl = document.getElementById('secMailSubj'); if (subjEl) subjEl.value = ti; // 이 섹션 전용 URL (출장탭만 포함된 _secShareUrlMine 사용) var fullUrl = _secShareUrlMine || (getBaseUrl() + '?d=' + collectData()); // ── mailto body (출장탭 내용만) var lines = []; lines.push('[' + ti + '] 출장 일정 공유'); lines.push(''); lines.push('안녕하세요. 출장 일정을 공유드립니다.'); lines.push('※ 스팸이 아닙니다 (메모장 자동생성)'); lines.push(''); if (dt) lines.push('일시: ' + dt.replace('T',' ')); if (ad) { lines.push('주소: ' + ad); lines.push('지도: https://map.naver.com/v5/search/' + encodeURIComponent(ad)); } if (qm) { lines.push(''); lines.push('[메모] ' + qm); } if (ph) lines.push('연락처: ' + ph); if (me) { lines.push(''); lines.push('[상세] ' + me.slice(0,200) + (me.length>200?'...(이하생략)':'')); } if (inclWsChk) { var wsSteps = readWsSteps(id); var wsText = ''; wsSteps.forEach(function(st) { if (st.title || st.body) wsText += (st.title?st.title+': ':'') + (st.body||'').replace(/\n/g,' / ') + '\n'; }); if (wsText) { lines.push(''); lines.push('[작업순서]'); lines.push(wsText.trim()); } } lines.push(''); lines.push('▶ 이 섹션 내용 보기 (클릭):'); lines.push(fullUrl); lines.push(''); lines.push('---'); lines.push('강의노트 계산기 | 스타트업EX'); var body = lines.join('\n'); window._secMailBody = body; // ── 미리보기 HTML (출장탭만) var previewEl = document.getElementById('secMailPreview'); if (!previewEl) return; var ph2 = '<div style="font-size:11px;line-height:1.8;">'; ph2 += '<b>' + ti + '</b><br>'; if (dt) ph2 += ' ' + dt.replace('T',' ') + '<br>'; if (ad) ph2 += ' <a href="https://map.naver.com/v5/search/' + encodeURIComponent(ad) + '" style="color:#2563eb;">' + ad + '</a><br>'; if (qm) ph2 += ' ' + qm + '<br>'; if (ph) ph2 += ' ' + ph + '<br>'; if (me) ph2 += ' ' + me.slice(0,60) + (me.length>60?'...':'') + '<br>'; if (inclWsChk) { var wsSteps2 = readWsSteps(id).filter(function(x){return x.title||x.body;}); if (wsSteps2.length) { ph2 += '<br><b> 작업순서</b><br>'; wsSteps2.forEach(function(st) { ph2 += (st.title?'<span style="color:#2563eb;">'+st.title+'</span> ':'') + (st.done?'<s>':'')+(st.body||'').replace(/\n/g,'<br>')+(st.done?'</s>':'') + '<br>'; }); } } ph2 += '<br> <a href="' + fullUrl + '" style="color:#2563eb;font-weight:700;">이 섹션 링크 클릭하여 바로보기</a><br>'; ph2 += '<span style="color:#94a3b8;font-size:9px;">※ ' + (inclWsChk ? '포스T잇+작업순서 포함' : '포스T잇만 포함') + ' | 스팸 아님</span>'; ph2 += '</div>'; previewEl.innerHTML = ph2; } function doSendSecMail(id) { var to = ((document.getElementById('secMailInput')||{value:""}).value || '').trim(); var subj = ((document.getElementById('secMailSubj')||{value:""}).value || '').trim(); var body = window._secMailBody || ''; if (!to) { alert('받는 사람 이메일을 입력하세요'); return; } if (!body) { alert('잠시 후 다시 시도하세요 (링크 생성 중)'); return; } var mailto = 'mailto:' + encodeURIComponent(to) + '?subject=' + encodeURIComponent(subj) + '&body=' + encodeURIComponent(body); window.location.href = mailto; } async function sendMail() { const btn=document.querySelector('button[onclick="sendMail()"]'); if(btn){btn.textContent='처리중..';btn.disabled=true;} try{const{msg}=await buildShareMessage();const tripTitle=getTripTitle();setTimeout(()=>{window.location.href='mailto:?subject='+encodeURIComponent(' '+tripTitle)+'&body='+encodeURIComponent(msg);},100);} catch(e){toast('오류: '+e.message);} finally{if(btn){btn.textContent='메일';btn.disabled=false;}} } /* ── QR ── */ let _qrEncData = ''; function openQR() { autoSave(); _qrEncData = collectData(); // 전체 섹션 데이터 수집 // [V40] 기본: 공유용URL 탭 + TinyURL 자동 생성 document.getElementById('qrTinyCheck').checked = false; document.getElementById('qrTinyStatus').textContent = ''; document.getElementById('qrOverlay').classList.add('on'); switchQrTab('public'); // 공유용이 기본 } /* [V40] switchQrTab: 공유용 기본, TinyURL 자동 생성, 기본QR 제거 */ function switchQrTab(type) { const enc = _qrEncData || collectData(); // 전체 섹션 데이터 const mineUrl = getBaseUrl() + '?d=' + enc; const publicUrl = PUBLIC_BASE + '?d=' + enc; const longUrl = (type === 'mine') ? mineUrl : publicUrl; const tabMine = document.getElementById('qrTabMine'); const tabPublic = document.getElementById('qrTabPublic'); const desc = document.getElementById('qrTabDesc'); // [V40] 탭 스타일: 공유용이 앞(기본 활성), 나만의가 뒤 if (tabMine && tabPublic) { tabPublic.style.background = (type==='public') ? 'var(--accent)' : 'transparent'; tabPublic.style.color = (type==='public') ? '#fff' : 'var(--text2)'; tabMine.style.background = (type==='mine') ? 'var(--accent)' : 'transparent'; tabMine.style.color = (type==='mine') ? '#fff' : 'var(--text2)'; } if (desc) desc.innerHTML = (type==='public') ? ' <b>공유용URL</b>: 나만의url이나 0-1.kr/6 링크에서 모두에게 공유 시 활용가능' : ' <b>나만의URL</b>: 할당받은 나만의 링크에서 나만의 링크로 공유시 활용'; // 원본URL 필드(숨김 상태 유지, 체크시 표시) const rawInput = document.getElementById('qr-url'); if (rawInput) { rawInput.value = longUrl; rawInput.dataset.rawUrl = longUrl; rawInput.style.display = 'none'; } // [V43] dataset.rawUrl에도 저장 document.getElementById('qrTinyCheck').checked = false; // 경고 const warn = document.getElementById('qr-warn'); if (warn) { if (longUrl.length > 2500) { warn.style.display = 'block'; warn.textContent = '⚠️ 내용이 많아 원본URL QR 인식 어려움 ('+longUrl.length+'자). TinyURL QR 자동생성 중...'; } else { warn.style.display = 'none'; } } // [V40] TinyURL QR 자동 생성 (기본) const statusEl = document.getElementById('qrTinyStatus'); const tinyUrlEl = document.getElementById('qrTinyUrl'); const tinyContainer = document.getElementById('qr-tiny-container'); if (statusEl) statusEl.textContent = '생성 중...'; if (tinyUrlEl) tinyUrlEl.textContent = '단축링크 생성 중...'; if (tinyContainer) tinyContainer.innerHTML = '<div style="font-size:11px;color:var(--text2);">TinyURL 생성 중...</div>'; fetch('https://tinyurl.com/api-create.php?url=' + encodeURIComponent(longUrl)) .then(function(res){ return res.text(); }) .then(function(shortUrl){ shortUrl = shortUrl.trim(); if (!shortUrl.startsWith('http')) throw new Error('생성 실패'); if (tinyUrlEl) tinyUrlEl.textContent = shortUrl; if (statusEl) statusEl.textContent = '✓ 완료'; if (tinyContainer) tinyContainer.innerHTML = ''; generateQR(shortUrl, 'qr-tiny-container', 'qr-dl'); // [V44] rawInput.value는 원본 파라미터 URL 유지 (덮어쓰지 않음) }) .catch(function(e){ if (tinyUrlEl) tinyUrlEl.textContent = '생성 실패 — 네트워크 확인'; if (statusEl) statusEl.textContent = '❌'; if (tinyContainer) tinyContainer.innerHTML = '<div style="font-size:11px;color:var(--danger);">TinyURL 생성 실패. 인터넷 연결 확인.</div>'; }); } /* [V40] toggleQrRawUrl: 원본URL 보이기/숨기기 */ function toggleQrRawUrl() { const checked = document.getElementById('qrTinyCheck').checked; const rawInput = document.getElementById('qr-url'); if (!rawInput) return; rawInput.style.display = checked ? 'block' : 'none'; if (checked) { // [V44] 원본 파라미터 URL 표시 (dataset.rawUrl 우선) const originalUrl = rawInput.dataset.rawUrl || rawInput.value; rawInput.value = originalUrl; } } function generateQR(url,containerId,dlBtnId) { if(typeof QRCode==='undefined'){document.getElementById(containerId).innerHTML='<p style="color:var(--text2);">QR 라이브러리 로딩 중...</p>';return;} try{ const sz=url.length>1500?240:220; new QRCode(document.getElementById(containerId),{text:url,width:sz,height:sz,colorDark:'#0f172a',colorLight:'#ffffff',correctLevel:QRCode.CorrectLevel.L}); if(dlBtnId){setTimeout(()=>{const cv=document.getElementById(containerId).querySelector('canvas');const dlBtn=document.getElementById(dlBtnId);if(cv&&dlBtn){dlBtn.style.display='inline-block';dlBtn.onclick=()=>{const a=document.createElement('a');a.href=cv.toDataURL('image/png');a.download='trip-qr-'+new Date().toISOString().slice(0,10)+'.png';a.click();};}},300);} }catch(e){document.getElementById(containerId).innerHTML='<p style="color:var(--danger);">QR 생성 불가. TinyURL 단축을 이용해주세요.</p>';} } async function toggleQrTiny() { const checked=document.getElementById('qrTinyCheck').checked; const resultDiv=document.getElementById('qrTinyResult'),statusEl=document.getElementById('qrTinyStatus'); if(!checked){resultDiv.style.display='none';statusEl.textContent='';return;} statusEl.textContent='생성 중...';resultDiv.style.display='block'; document.getElementById('qrTinyUrl').textContent='단축링크 생성 중...'; document.getElementById('qr-tiny-container').innerHTML=''; const longUrl=document.getElementById('qr-url').value; try{ const res=await fetch(`https://tinyurl.com/api-create.php?url=${encodeURIComponent(longUrl)}`); const shortUrl=(await res.text()).trim(); if(!shortUrl.startsWith('http')) throw new Error('생성 실패'); document.getElementById('qrTinyUrl').textContent=shortUrl;statusEl.textContent='✓ 완료'; generateQR(shortUrl,'qr-tiny-container',null); }catch(e){document.getElementById('qrTinyUrl').textContent='생성 실패 — 네트워크 확인';statusEl.textContent='❌';} } function closeQR(){ document.getElementById('qrOverlay').classList.remove('on'); document.getElementById('qrTinyCheck').checked=false; // [V40] TinyURL결과는 항상 표시 상태 유지 (display:block) var tinyResult=document.getElementById('qrTinyResult'); if(tinyResult) tinyResult.style.display='block'; var rawInput=document.getElementById('qr-url'); if(rawInput) rawInput.style.display='none'; var tinyContainer=document.getElementById('qr-tiny-container'); if(tinyContainer) tinyContainer.innerHTML=''; var tinyUrlEl=document.getElementById('qrTinyUrl'); if(tinyUrlEl) tinyUrlEl.textContent=''; var statusEl=document.getElementById('qrTinyStatus'); if(statusEl) statusEl.textContent=''; } function copyQrUrl(){const v=document.getElementById('qr-url').value;clipCopy(v).then(()=>toast(' URL 복사됨!')).catch(()=>toast('복사 실패'));} /* [V43] 원본링크복사: qr-url 인풋의 원본URL 복사 */ function copyQrOriginalUrl() { var rawInput = document.getElementById('qr-url'); var v = rawInput ? rawInput.dataset.rawUrl || rawInput.value : ''; if (!v) { toast('⚠️ 먼저 탭을 선택해 URL을 생성하세요'); return; } clipCopy(v).then(function(){ toast(' 원본URL 복사됨!'); }).catch(function(){ toast('복사 실패 — 직접 선택해서 복사하세요'); }); } /* [V43] 단축링크복사: TinyURL 단축 URL 복사 */ function copyQrTinyUrl() { var v = document.getElementById('qrTinyUrl') ? document.getElementById('qrTinyUrl').textContent.trim() : ''; if (!v || !v.startsWith('http')) { toast('⚠️ TinyURL 생성 중이거나 실패했습니다. 잠시 후 다시 시도하세요'); return; } clipCopy(v).then(function(){ toast(' 단축링크 복사됨! (TinyURL)'); }).catch(function(){ toast('복사 실패'); }); } /* ── 즐겨찾기 ── */ function openBookmark() { autoSave(); const enc = collectData(); const url = getBaseUrl() + '?d=' + enc; const titleText = getTripTitle() + '_' + fmtSaveTime(); // [V53] 주소창을 파라미터 URL로 교체 (Ctrl+D 즐겨찾기에 바로 저장 가능) try { history.replaceState(null, '', url); } catch(e) {} localStorage.setItem(LS_KEY, enc); document.getElementById('shareUrlDisplay').value = url; const isMobile = /iPhone|iPad|Android|Mobile/i.test(navigator.userAgent); const content = document.getElementById('bmContent'); let inner = `<div style="font-size:15px;font-weight:800;color:var(--text);margin-bottom:14px;"> 즐겨찾기 저장</div>`; inner += `<div style="background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:12px;padding:12px 14px;margin-bottom:10px;"> <div style="font-size:11px;font-weight:800;color:#1d4ed8;margin-bottom:6px;"> ${titleText}</div> <div style="font-size:10px;color:#3b82f6;word-break:break-all;line-height:1.6;">${url.slice(0,80)}${url.length>80?'…':''}</div> </div>`; // 방법 1: Ctrl+D inner += `<div style="background:var(--input-bg);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;"> <div style="font-size:12px;font-weight:800;color:var(--text);margin-bottom:6px;">✅ 방법 1 — 키보드 단축키 (추천)</div> <div style="font-size:11px;color:var(--text2);line-height:1.8;"> 지금 주소창 URL이 <b>현재 입력한 내용 포함된 주소</b>로 바뀌었습니다.<br> <b style="color:#2563eb;">PC:</b> <code style="background:#e0e7ff;padding:1px 5px;border-radius:4px;font-size:11px;">Ctrl+D</code> (Windows) 또는 <code style="background:#e0e7ff;padding:1px 5px;border-radius:4px;font-size:11px;">⌘+D</code> (Mac) 로 즐겨찾기 추가<br> <b style="color:#2563eb;">모바일:</b> 하단 공유버튼(□↑) → <b>즐겨찾기 추가</b> </div> </div>`; // 방법 2: 드래그 or 복사 if (!isMobile) { inner += `<p style="font-size:11px;color:var(--text2);line-height:1.7;margin-bottom:10px;background:var(--input-bg);border:1.5px solid var(--border);border-radius:12px;padding:11px 13px;"> <b style="font-size:12px;color:var(--text);">✅ 방법 2 — 드래그</b><br> 아래 링크를 즐겨찾기 바에 <b>드래그</b>하거나 우클릭 → <b>즐겨찾기에 추가</b> </p>`; inner += `<a id="bm-drag-link" href="${url}" draggable="true" class="bm-link-card" onmousedown="this.style.cursor='grabbing'" onmouseup="this.style.cursor='grab'"> <div style="font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;"> ${titleText}</div> <div style="font-size:10px;color:var(--text2);word-break:break-all;">${url.slice(0,60)}${url.length>60?'…':''}</div> <div style="font-size:10px;color:var(--accent);margin-top:5px;font-weight:700;">⟵ 즐겨찾기 바에 드래그하세요</div> </a>`; } else { const ua = navigator.userAgent; let guide = /Safari/i.test(ua) && !/Chrome/i.test(ua) ? '하단 공유버튼(□↑) → <b>즐겨찾기 추가</b>' : /Chrome/i.test(ua) ? '주소창 오른쪽 ☆ → <b>저장</b>' : /Samsung/i.test(ua) ? '하단 ☰ → <b>페이지 추가</b>' : '브라우저 메뉴 → <b>즐겨찾기 추가</b>'; inner += `<div style="background:#fef3c7;border-radius:9px;padding:9px 12px;margin-bottom:12px;font-size:11px;color:#92400e;line-height:1.7;"> <b>✅ 방법 2 — 브라우저 메뉴</b><br> ${guide} </div>`; inner += `<button id="bm-copy-btn" style="width:100%;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);margin-bottom:8px;"> URL 복사 후 즐겨찾기 추가</button>`; } inner += `<button onclick="closeBm()" style="width:100%;padding:10px;background:var(--input-bg);color:var(--text2);border:none;border-radius:12px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);">닫기</button>`; content.innerHTML = inner; document.getElementById('bmOverlay').classList.add('on'); const link = document.getElementById('bm-drag-link'); if (link) { link.addEventListener('dragstart', e => { e.dataTransfer.setData('text/uri-list', url); e.dataTransfer.setData('text/plain', url); toast(' 즐겨찾기 바에 놓으세요!'); }); link.addEventListener('click', e => e.preventDefault()); } const copyBtn = document.getElementById('bm-copy-btn'); if (copyBtn) copyBtn.onclick = () => { clipCopy(url).then(() => toast(' URL 복사됨!')).catch(() => toast('복사 실패')); }; } function closeBm(){document.getElementById('bmOverlay').classList.remove('on');} function bmNow(){const d=new Date();return(d.getMonth()+1)+'/'+(d.getDate())+' '+String(d.getHours()).padStart(2,'0')+':'+String(d.getMinutes()).padStart(2,'0');} /* ── 화살표 토글 (삭제 ↔ 복구) ── */ function toggleArrows() { const btn = document.getElementById('arrowToggleBtn'); if (!_arrowsHidden) { // 삭제 document.querySelectorAll('.divider-arrow').forEach(a => { a.dataset.hidden='1'; a.style.display='none'; }); _arrowsHidden = true; if (btn) btn.textContent = '화살표복구'; toast('↓ 화살표 숨김'); } else { // 복구 document.querySelectorAll('.divider-arrow').forEach(a => { a.dataset.hidden=''; a.style.display=''; }); _arrowsHidden = false; if (btn) btn.textContent = '화살표삭제'; toast('↓ 화살표 복구됨'); } } /* ── 저장 파일명 생성/확인 (HTML저장·엑셀저장 공통) ── 형식: YYMMDD_HHmm_제목 예) 260708_1250_7월출장 */ function generateDefaultFilename() { const now = new Date(); const yy = String(now.getFullYear()).slice(2); const title = (getTripTitle() || '강의노트 계산기').replace(/[\\\/:*?"<>|]/g, '_'); return `${yy}${pad2(now.getMonth()+1)}${pad2(now.getDate())}_${pad2(now.getHours())}${pad2(now.getMinutes())}_${title}`; } let _pendingSaveKind = null; function promptSaveFilename(kind) { _pendingSaveKind = kind; const def = generateDefaultFilename(); const ext = kind === 'csv' ? '.csv' : (kind === 'xlsx' ? '.xlsx' : '.html'); document.getElementById('modalContent').innerHTML = ` <h3> 파일명 확인</h3> <div style="font-size:11px;color:var(--text2);margin-bottom:8px;line-height:1.6;">저장할 파일명을 확인하거나 원하는대로 수정하세요.</div> <input type="text" id="saveFilenameInput" class="compact-input" style="width:100%;height:40px;box-sizing:border-box;margin-bottom:6px;" value="${escapeHtml(def)}"> <div style="font-size:10px;color:var(--text2);margin-bottom:12px;">확장자(${ext})는 자동으로 붙습니다.</div> <div class="modal-btns"> <button class="modal-btn" style="background:#e2e8f0;color:#1e293b;" onclick="closeModal()">취소</button> <button class="modal-btn" style="background:var(--accent);color:#fff;" onclick="confirmSaveFilename()">저장</button> </div>`; document.getElementById('modalOverlay').classList.add('on'); setTimeout(function(){ const inp = document.getElementById('saveFilenameInput'); if (inp) { inp.focus(); inp.select(); } }, 60); } function confirmSaveFilename() { const inp = document.getElementById('saveFilenameInput'); let name = (inp ? inp.value : '').trim(); if (!name) name = generateDefaultFilename(); name = name.replace(/[\\\/:*?"<>|]/g, '_'); const kind = _pendingSaveKind; closeModal(); if (kind === 'csv') doExportCSV(name); else if (kind === 'xlsx') doExportXLSX(name); else doExportRedirectHTML(name); } /* ── [V55] 리다이렉트 HTML 파일 내보내기 (iOS/Android/Windows 모두 지원) ── 파일을 열면(더블클릭/탭) 자동으로 저장된 링크로 이동하며 데이터가 즉시 복원됩니다. 저장 위치: - Android Chrome: 기기 [다운로드] 폴더 - iPhone Safari: [파일] 앱 → 다운로드 / 공유 시트로 저장 위치 선택 가능 - Windows Chrome/Edge: 브라우저 설정의 다운로드 폴더 (기본 C:\Users\이름\Downloads) */ function exportRedirectHTML() { promptSaveFilename('html'); } function doExportRedirectHTML(filenameBase) { try { const enc = collectData(); const title = getTripTitle() || '강의노트 계산기'; const savedAt = new Date().toLocaleString('ko-KR'); const url = getBaseUrl() + '?d=' + enc; const filename = filenameBase + '.html'; const safeTitle = String(title).replace(/</g,'&lt;').replace(/>/g,'&gt;'); const html = '<meta charset="utf-8">\n' + '<meta name="viewport" content="width=device-width,initial-scale=1">\n' + '<meta http-equiv="refresh" content="0; url=' + url + '">\n' + '<!-- SAVED_URL:' + url + ' -->\n' + '<!-- SAVED_DATE:' + savedAt + ' -->\n' + '<scr' + 'ipt>try{location.replace(' + JSON.stringify(url) + ');}catch(e){}</scr' + 'ipt>\n' + '<p style="font-family:sans-serif;text-align:center;padding:60px 20px 0;color:#333;"> ' + safeTitle + ' 불러오는 중...</p>\n' + '<p style="font-family:sans-serif;text-align:center;font-size:13px;color:#888;">자동으로 이동하지 않으면 <a href="' + url + '">여기를 눌러주세요</a>.</p>'; const blob = new Blob([html], { type: 'text/html;charset=utf-8' }); // iOS Safari: URL.createObjectURL → <a> click // Android/Windows: 동일 방식 동작 const dlUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = dlUrl; a.download = filename; a.style.cssText = 'position:fixed;top:-9999px;left:-9999px;'; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(dlUrl); }, 1000); toast(' 파일 저장됨: ' + filename); // 저장 위치 안내 모달 document.getElementById('modalOverlay').classList.add('on'); const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent); const isAndroid = /Android/i.test(navigator.userAgent); const guide = isIOS ? ' iPhone: [파일] 앱 → 다운로드 폴더\n또는 공유 시트에서 저장 위치 선택' : isAndroid ? ' Android: [다운로드] 앱 또는 파일 관리자 → 다운로드 폴더' : ' PC: 브라우저 다운로드 폴더 (기본: 내 PC → 다운로드)'; document.getElementById('modalContent').innerHTML = ` <h3> 파일로 저장 완료</h3> <div style="background:var(--input-bg);border-radius:10px;padding:12px;margin:10px 0;font-size:12px;color:var(--text);line-height:1.9;"> <b>파일명:</b> ${filename}<br> <b>저장 위치:</b><br>${guide.replace(/\n/g,'<br>')} </div> <div style="font-size:11px;color:var(--text2);line-height:1.7;margin-bottom:12px;"> 이 파일을 더블클릭(탭)하면 바로 링크로 이동해 내용이 복원됩니다.<br> [파일불러오기] 버튼으로도 같은 파일을 선택해 복원할 수 있습니다.<br> 다른 기기로 전송해도 동일하게 복원됩니다. </div> <button class="modal-btn" style="width:100%;background:var(--accent);color:#fff;" onclick="closeModal()">확인</button>`; } catch(e) { toast('❌ 파일 저장 실패: ' + e.message); } } /* ── [V55] 리다이렉트 HTML 파일 불러오기 ── 파일 안에 저장된 링크(SAVED_URL 주석 또는 리다이렉트 URL)에서 데이터를 추출해 바로 복원합니다. */ function importRedirectHTML() { const input = document.createElement('input'); input.type = 'file'; input.accept = '.html,.htm,text/html'; input.style.cssText = 'position:fixed;top:-9999px;'; document.body.appendChild(input); input.onchange = function(e) { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(ev) { try { const text = String(ev.target.result || ''); let url = null; let m = text.match(/<!--\s*SAVED_URL:(.*?)\s*-->/); if (m) url = m[1]; if (!url) { m = text.match(/location\.replace\((["'])(.*?)\1\)/); if (m) url = m[2]; } if (!url) { m = text.match(/content=["']0;\s*url=([^"'>]+)["']/i); if (m) url = m[1]; } if (!url) throw new Error('올바른 메모장 저장 파일이 아닙니다'); let enc = null; try { enc = new URL(url, window.location.href).searchParams.get('d'); } catch(ue) {} if (!enc) throw new Error('파일에서 데이터를 찾을 수 없습니다'); applyData(enc); localStorage.setItem(LS_KEY, enc); let savedDate = ''; const dm = text.match(/<!--\s*SAVED_DATE:(.*?)\s*-->/); if (dm) savedDate = dm[1]; toast('✅ 파일 복원 완료!' + (savedDate ? ' (' + savedDate + ')' : '')); document.getElementById('autoSaveUnder').textContent = ' 파일에서 복원됨: ' + (savedDate || ''); } catch(err) { toast('❌ 파일 오류: ' + err.message); } }; reader.readAsText(file, 'utf-8'); document.body.removeChild(input); }; input.click(); } /* ══════════════════════════════════════ 엑셀(CSV) 저장/불러오기 ══════════════════════════════════════ */ function csvEscape(v) { v = (v === null || v === undefined) ? '' : String(v); if (/[",\n]/.test(v)) v = '"' + v.replace(/"/g,'""') + '"'; return v; } function csvRow(arr) { return arr.map(csvEscape).join(','); } /* ── 진짜 엑셀(.xlsx) 저장/불러오기 — 월별로 시트를 나눠서 저장 ── ※ CSV는 형식 자체에 "시트" 개념이 없어(콤마로 구분된 하나의 표 뿐) 여러 시트로 나눌 수 없습니다. 그래서 진짜 엑셀 파일(.xlsx)로 만들고, SheetJS 라이브러리로 시트를 여러 개 생성합니다. 다만 날짜 하나마다 시트를 만들면 시트가 수백 개가 되어 오히려 찾기 어려워지므로, "월" 단위로 시트를 나눴습니다(예: 2026-08 시트에 8월 전체 날짜가 행으로 들어감). */ function buildDayRowForSheet(ds, e) { const ptArr = Array.isArray(e.pt) ? e.pt : (e.pt ? [e.pt] : []); const ptStr = ptArr.map(function(it){ return (typeof it === 'string') ? it : ((it && it.v) || ''); }) .filter(function(v){ return v && v.trim(); }).join('\n----\n'); const scArr = Array.isArray(e.sc) ? e.sc : []; const scStr = scArr.filter(function(it){ return it && it.v && it.v.trim(); }) .map(function(it){ return (it.tl||'') + ': ' + it.v; }).join('; '); const wsArr = Array.isArray(e.ws) ? e.ws : []; const wsStr = wsArr.filter(function(st){ return st && (st.title || st.body); }) .map(function(st){ return (st.title||'') + '|' + (st.body||''); }).join('\n----\n'); return [ds, e.ti||'', ptStr, e.me||'', scStr, wsStr]; } let _xlsxSheetMode = 'month'; function exportXLSX() { if (typeof XLSX === 'undefined') { toast('❌ 엑셀 기능을 불러오지 못했습니다. 인터넷 연결을 확인해주세요'); return; } document.getElementById('modalContent').innerHTML = ` <h3> 엑셀 저장 방식 선택</h3> <div style="font-size:11px;color:var(--text2);margin-bottom:14px;line-height:1.6;">시트를 어떻게 나눠서 저장할까요?</div> <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:14px;"> <button class="modal-btn" style="background:var(--accent);color:#fff;text-align:left;padding:12px;line-height:1.5;" onclick="chooseXlsxSheetMode('month')"> 월별 시트 (추천)<br><span style="font-weight:400;font-size:10.5px;opacity:.9;">한 달치가 시트 하나에 여러 행으로 들어가요. 시트 개수가 적어서 찾기 편해요.</span></button> <button class="modal-btn" style="background:#e2e8f0;color:#1e293b;text-align:left;padding:12px;line-height:1.5;" onclick="chooseXlsxSheetMode('day')"> 하루하루 시트<br><span style="font-weight:400;font-size:10.5px;opacity:.75;">날짜마다 시트가 하나씩 생겨요. 저장된 날짜가 많으면 시트도 매우 많아질 수 있어요.</span></button> </div> <div class="modal-btns"> <button class="modal-btn" style="background:#e2e8f0;color:#1e293b;" onclick="closeModal()">취소</button> </div>`; document.getElementById('modalOverlay').classList.add('on'); } function chooseXlsxSheetMode(mode) { _xlsxSheetMode = mode; closeModal(); promptSaveFilename('xlsx'); } function doExportXLSX(filenameBase) { try { syncVisibleToDayStore(); const dates = Object.keys(dayStore).sort(); const header = ['날짜(필수,YYYY-MM-DD)','제목','포스T잇','메모','일정','작업순서']; const guide = ['※ 이 줄과 다음 줄(제목행)은 그대로 두세요. 새 행 추가 시 날짜(YYYY-MM-DD) 칸을 꼭 채워주세요. 포스T잇 여러개는 줄바꿈 후 ----로 구분, 일정은 "시간대: 내용" 형태로 세미콜론(;) 구분, 작업순서는 "제목|내용"을 ----로 구분합니다.']; const wb = XLSX.utils.book_new(); let sheetNames = []; if (_xlsxSheetMode === 'day') { dates.forEach(function(ds){ const e = dayStore[ds]; if (!e) return; const ws = XLSX.utils.aoa_to_sheet([guide, header, buildDayRowForSheet(ds, e)]); ws['!cols'] = [{wch:12},{wch:16},{wch:30},{wch:24},{wch:24},{wch:30}]; XLSX.utils.book_append_sheet(wb, ws, ds); // 시트 이름 = 날짜(YYYY-MM-DD) sheetNames.push(ds); }); } else { const byMonth = {}; // {'2026-08': [[row],...]} dates.forEach(function(ds){ const e = dayStore[ds]; if (!e) return; const monthKey = ds.slice(0,7); // YYYY-MM if (!byMonth[monthKey]) byMonth[monthKey] = [guide, header]; byMonth[monthKey].push(buildDayRowForSheet(ds, e)); }); sheetNames = Object.keys(byMonth).sort(); sheetNames.forEach(function(mk){ const ws = XLSX.utils.aoa_to_sheet(byMonth[mk]); ws['!cols'] = [{wch:12},{wch:16},{wch:30},{wch:24},{wch:24},{wch:30}]; XLSX.utils.book_append_sheet(wb, ws, mk); // 시트 이름 = 'YYYY-MM' }); } if (!sheetNames.length) { toast('저장할 내용이 없습니다'); return; } const filename = filenameBase + '.xlsx'; XLSX.writeFile(wb, filename); const modeLabel = (_xlsxSheetMode === 'day') ? '일별' : '월별'; toast(' 엑셀 저장됨: ' + filename + ' (' + modeLabel + ' 시트 ' + sheetNames.length + '개)'); document.getElementById('modalOverlay').classList.add('on'); document.getElementById('modalContent').innerHTML = ` <h3> 엑셀(.xlsx) 저장 완료</h3> <div style="background:var(--input-bg);border-radius:10px;padding:12px;margin:10px 0;font-size:12px;color:var(--text);line-height:1.9;"> <b>파일명:</b> ${filename}<br> <b>시트(${modeLabel}, ${sheetNames.length}개):</b> ${sheetNames.slice(0,20).join(', ')}${sheetNames.length>20?' 외 '+(sheetNames.length-20)+'개':''} </div> <div style="font-size:11px;color:var(--text2);line-height:1.7;margin-bottom:12px;"> ${_xlsxSheetMode==='day' ? '날짜마다 시트가 하나씩 나뉘어 있어요(예: 2026-08-11 시트 = 그 날 하루치).' : '월별로 시트가 나뉘어 있어요(예: 2026-08 시트 = 8월 전체).'} 각 시트 안에서 직접 수정하거나 새 행을 추가할 수 있습니다.<br> 새 행 추가 시 <b>날짜(YYYY-MM-DD)</b> 칸은 꼭 채워주세요.<br> 수정한 파일을 [불러오기_엑셀]로 다시 불러오면, 있는 날짜는 <b>덮어쓰고</b> 없던 날짜는 <b>새로 추가</b>됩니다. 모든 시트를 한 번에 읽어들입니다. </div> <button class="modal-btn" style="width:100%;background:var(--accent);color:#fff;" onclick="closeModal()">확인</button>`; } catch(e) { toast('❌ 엑셀 저장 실패: ' + e.message); } } function triggerImportXLSX() { if (typeof XLSX === 'undefined') { toast('❌ 엑셀 기능을 불러오지 못했습니다. 인터넷 연결을 확인해주세요'); return; } const inp = document.getElementById('xlsxFileInput'); inp.value = ''; inp.click(); } function parseSheetRowsToDayStore(rows) { let added = 0, updated = 0; rows.forEach(function(cols) { if (!cols || !cols[0]) return; const ds = String(cols[0]).trim(); if (!/^\d{4}-\d{2}-\d{2}$/.test(ds)) return; // 안내행/제목행 자동 스킵 const ti = cols[1] || '', ptStr = cols[2] || '', me = cols[3] || '', scStr = cols[4] || '', wsStr = cols[5] || ''; const pt = ptStr ? String(ptStr).split(/\n----\n/) : []; const sc = scStr ? String(scStr).split(';').map(function(s){ s = s.trim(); if (!s) return null; const idx = s.indexOf(':'); if (idx < 0) return {v:s, c:false, tl:'', th:false}; return {v:s.slice(idx+1).trim(), c:false, tl:s.slice(0,idx).trim(), th:false}; }).filter(Boolean) : []; const ws = wsStr ? String(wsStr).split(/\n----\n/).map(function(s, i){ s = s.trim(); if (!s) return null; const idx = s.indexOf('|'); const title = idx>=0 ? s.slice(0,idx).trim() : s; const body = idx>=0 ? s.slice(idx+1).trim() : ''; return {id:'ws'+Date.now()+i+Math.floor(Math.random()*1000), title:title, body:body, color:WS_COLORS[i%WS_COLORS.length]}; }).filter(Boolean) : []; const existing = dayStore[ds] || {}; if (dayStore[ds]) updated++; else added++; dayStore[ds] = Object.assign({}, existing, { ti: ti, me: me, pt: pt.length ? pt : (existing.pt || []), sc: sc.length ? sc : (existing.sc || []), ws: ws.length ? ws : (existing.ws || []), to: existing.to || [], lk: existing.lk || [], done: existing.done || false, theme: existing.theme || 0, collapsed: existing.collapsed || false, tab: existing.tab || 4 }); }); return {added:added, updated:updated}; } function handleXLSXFileSelect(event) { const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(ev) { try { const data = new Uint8Array(ev.target.result); const wb = XLSX.read(data, {type:'array'}); let totalAdded = 0, totalUpdated = 0; wb.SheetNames.forEach(function(sheetName){ const sheet = wb.Sheets[sheetName]; const rows = XLSX.utils.sheet_to_json(sheet, {header:1}); const r = parseSheetRowsToDayStore(rows); totalAdded += r.added; totalUpdated += r.updated; }); rebuildVisibleSections(); renderCalendar(); scheduleAutoSave(); toast('✅ 엑셀 불러오기 완료! 시트 ' + wb.SheetNames.length + '개 · 추가 ' + totalAdded + '건 · 수정 ' + totalUpdated + '건'); } catch(e) { toast('❌ 엑셀 불러오기 실패: ' + e.message); } }; reader.readAsArrayBuffer(file); } function exportCSV() { promptSaveFilename('csv'); } function doExportCSV(filenameBase) { try { syncVisibleToDayStore(); const dates = Object.keys(dayStore).sort(); const rows = []; rows.push(['※안내: 이 줄과 다음 줄(제목행)은 그대로 두세요. 새 행을 추가할 땐 날짜(YYYY-MM-DD) 칸을 꼭 채워주세요. 포스T잇 여러개는 줄바꿈 후 ---- 로 구분, 일정은 "시간대: 내용" 형태로 세미콜론(;)으로 구분해서 적으면 됩니다. 작업순서는 "제목|내용"을 ---- 로 구분해서 적으면 됩니다.']); rows.push(['날짜(필수,YYYY-MM-DD)','제목','포스T잇','메모','일정','작업순서']); dates.forEach(function(ds){ const e = dayStore[ds]; if (!e) return; const ptArr = Array.isArray(e.pt) ? e.pt : (e.pt ? [e.pt] : []); const ptStr = ptArr.map(function(it){ return (typeof it === 'string') ? it : ((it && it.v) || ''); }) .filter(function(v){ return v && v.trim(); }).join('\n----\n'); const scArr = Array.isArray(e.sc) ? e.sc : []; const scStr = scArr.filter(function(it){ return it && it.v && it.v.trim(); }) .map(function(it){ return (it.tl||'') + ': ' + it.v; }).join('; '); const wsArr = Array.isArray(e.ws) ? e.ws : []; const wsStr = wsArr.filter(function(st){ return st && (st.title || st.body); }) .map(function(st){ return (st.title||'') + '|' + (st.body||''); }).join('\n----\n'); rows.push([ds, e.ti||'', ptStr, e.me||'', scStr, wsStr]); }); const csvBody = rows.map(csvRow).join('\r\n'); const blob = new Blob(['\uFEFF' + csvBody], { type: 'text/csv;charset=utf-8' }); const filename = filenameBase + '.csv'; const dlUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = dlUrl; a.download = filename; a.style.cssText = 'position:fixed;top:-9999px;left:-9999px;'; document.body.appendChild(a); a.click(); setTimeout(function(){ document.body.removeChild(a); URL.revokeObjectURL(dlUrl); }, 1000); toast(' 엑셀(CSV) 저장됨: ' + filename); document.getElementById('modalOverlay').classList.add('on'); document.getElementById('modalContent').innerHTML = ` <h3> 엑셀(CSV) 저장 완료</h3> <div style="background:var(--input-bg);border-radius:10px;padding:12px;margin:10px 0;font-size:12px;color:var(--text);line-height:1.9;"> <b>파일명:</b> ${filename} </div> <div style="font-size:11px;color:var(--text2);line-height:1.7;margin-bottom:12px;"> 엑셀·구글시트에서 열어 직접 수정하거나 새 행을 추가할 수 있어요.<br> 새 행 추가 시 <b>날짜(YYYY-MM-DD)</b> 칸은 꼭 채워주세요 — 이 값으로 어느 날짜인지 인식합니다.<br> 수정한 파일을 [불러오기_엑셀]로 다시 불러오면, 있는 날짜는 <b>덮어쓰고</b> 없던 날짜는 <b>새로 추가</b>됩니다. </div> <button class="modal-btn" style="width:100%;background:var(--accent);color:#fff;" onclick="closeModal()">확인</button>`; } catch(e) { toast('❌ 엑셀 저장 실패: ' + e.message); } } /* 간단 CSV 파서 (따옴표 안 줄바꿈/콤마 지원) */ function parseCSV(text) { const rows = []; let row = [], field = '', inQuotes = false; for (let i = 0; i < text.length; i++) { const c = text[i]; if (inQuotes) { if (c === '"') { if (text[i+1] === '"') { field += '"'; i++; } else { inQuotes = false; } } else { field += c; } } else { if (c === '"') inQuotes = true; else if (c === ',') { row.push(field); field = ''; } else if (c === '\r') { /* skip */ } else if (c === '\n') { row.push(field); rows.push(row); row = []; field = ''; } else field += c; } } if (field.length || row.length) { row.push(field); rows.push(row); } return rows; } function triggerImportCSV() { const inp = document.getElementById('csvFileInput'); inp.value = ''; inp.click(); } function handleCSVFileSelect(event) { const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(ev) { try { let text = String(ev.target.result || ''); if (text.charCodeAt(0) === 0xFEFF) text = text.slice(1); const rows = parseCSV(text); let added = 0, updated = 0; rows.forEach(function(cols) { if (!cols || !cols[0]) return; const ds = cols[0].trim(); if (!/^\d{4}-\d{2}-\d{2}$/.test(ds)) return; // 안내행/제목행 자동 스킵 const ti = cols[1] || '', ptStr = cols[2] || '', me = cols[3] || '', scStr = cols[4] || '', wsStr = cols[5] || ''; const pt = ptStr ? ptStr.split(/\n----\n/) : []; const sc = scStr ? scStr.split(';').map(function(s){ s = s.trim(); if (!s) return null; const idx = s.indexOf(':'); if (idx < 0) return {v:s, c:false, tl:'', th:false}; return {v:s.slice(idx+1).trim(), c:false, tl:s.slice(0,idx).trim(), th:false}; }).filter(Boolean) : []; const ws = wsStr ? wsStr.split(/\n----\n/).map(function(s, i){ s = s.trim(); if (!s) return null; const idx = s.indexOf('|'); const title = idx>=0 ? s.slice(0,idx).trim() : s; const body = idx>=0 ? s.slice(idx+1).trim() : ''; return {id:'ws'+Date.now()+i, title:title, body:body, color:WS_COLORS[i%WS_COLORS.length]}; }).filter(Boolean) : []; const existing = dayStore[ds] || {}; if (dayStore[ds]) updated++; else added++; dayStore[ds] = Object.assign({}, existing, { ti: ti, me: me, pt: pt.length ? pt : (existing.pt || []), sc: sc.length ? sc : (existing.sc || []), ws: ws.length ? ws : (existing.ws || []), to: existing.to || [], lk: existing.lk || [], done: existing.done || false, theme: existing.theme || 0, collapsed: existing.collapsed || false, tab: existing.tab || 4 }); }); rebuildVisibleSections(); renderCalendar(); scheduleAutoSave(); toast('✅ 엑셀 불러오기 완료! 추가 ' + added + '건 · 수정 ' + updated + '건'); } catch(err) { toast('❌ 엑셀 불러오기 오류: ' + err.message); } }; reader.readAsText(file, 'utf-8'); } /* ── 결재라인 ── */ const LS_APPROVAL = 'trip_v20_approval_' + _storeKey; let _approvalCount = 0; /* ── 결재라인 ── */ /* ── 결재라인 접기/펼치기 ── */ function toggleApprovalSection() { var body = document.querySelector('.approval-body'); var arrow = document.getElementById('approvalArrow'); var cSec = document.querySelector('.approval-comments-section'); if (!body) return; var isOpen = body.classList.toggle('open'); if (arrow) arrow.textContent = isOpen ? '▲' : '▼'; if (cSec) cSec.style.display = isOpen ? 'block' : 'none'; var flair = document.querySelector('#approvalSection .approval-flair'); if (flair) flair.style.display = isOpen ? 'block' : 'none'; scheduleAutoSave(); } function openApprovalSection() { var body = document.querySelector('.approval-body'); var arrow = document.getElementById('approvalArrow'); var cSec = document.querySelector('.approval-comments-section'); if (!body) return; body.classList.add('open'); if (arrow) arrow.textContent = '▲'; if (cSec) cSec.style.display = 'block'; var flair = document.querySelector('#approvalSection .approval-flair'); if (flair) flair.style.display = 'block'; } const APPROVAL_DEFAULTS = [ {name:'나', role:'담당', signed:false, comment:''}, {name:'팀장', role:'검토', signed:false, comment:''}, {name:'여친님',role:'승인', signed:false, comment:''}, {name:'절대자',role:'결재', signed:false, comment:''}, ]; /* 코멘트 섹션 렌더 - 먼저 선언 */ function renderApprovalComments() { var list = document.getElementById('approvalCommentsList'); if (!list) return; // 현재 값 백업 var backup = {}; var existing = list.querySelectorAll('textarea'); for (var i=0; i<existing.length; i++) { backup[existing[i].id] = existing[i].value; } list.innerHTML = ''; var boxes = document.querySelectorAll('#approvalGrid .approval-box'); for (var j=0; j<boxes.length; j++) { var box = boxes[j]; var bid = box.id.replace('approval-box-',''); var nameEl = document.getElementById('ap-name-'+bid); var chkEl = document.getElementById('ap-chk-'+bid); var nm = nameEl ? (nameEl.value || '이름 미입력') : '이름 미입력'; var signed = chkEl ? chkEl.checked : false; var taId = 'apc-ta-'+bid; var prev = (backup[taId] !== undefined) ? backup[taId] : (box.dataset.comment || ''); var row = document.createElement('div'); row.className = 'approval-comment-row'; var lbl = document.createElement('div'); lbl.className = 'approval-comment-lbl'; var nameSpan = document.createElement('span'); nameSpan.className = 'approval-comment-lbl-name'; nameSpan.textContent = (signed ? '✅' : '○') + ' ' + nm; nameSpan.title = nm + (signed ? ' (결재완료)' : ''); lbl.appendChild(nameSpan); var ta = document.createElement('textarea'); ta.className = 'approval-comment-ta'; ta.id = taId; ta.placeholder = '코멘트...'; ta.value = prev; ta.rows = 1; ta.addEventListener('input', function() { this.style.height = '30px'; if (this.scrollHeight > 30) this.style.height = this.scrollHeight + 'px'; saveApprovalData(); }); row.appendChild(lbl); row.appendChild(ta); list.appendChild(row); } } function initApproval() { try { var saved = JSON.parse(localStorage.getItem(LS_APPROVAL) || 'null'); if (saved && saved.boxes && saved.boxes.length > 0) { for (var i=0; i<saved.boxes.length; i++) addApprovalBox(saved.boxes[i]); } else { for (var i=0; i<APPROVAL_DEFAULTS.length; i++) addApprovalBox(APPROVAL_DEFAULTS[i]); } } catch(e) { for (var i=0; i<APPROVAL_DEFAULTS.length; i++) addApprovalBox(APPROVAL_DEFAULTS[i]); } renderApprovalComments(); } function addApprovalBox(data) { _approvalCount++; var id = _approvalCount; var d = data || {name:'', role:'', signed:false, comment:''}; var grid = document.getElementById('approvalGrid'); if (!grid) return; var box = document.createElement('div'); box.className = 'approval-box' + (d.signed ? ' signed' : ''); box.id = 'approval-box-' + id; box.dataset.comment = d.comment || ''; /* 이름 상단 */ var top = document.createElement('div'); top.className = 'approval-box-top'; var nameInp = document.createElement('input'); nameInp.type = 'text'; nameInp.className = 'approval-name-input'; nameInp.id = 'ap-name-' + id; nameInp.value = d.name || ''; nameInp.placeholder = '이름'; nameInp.addEventListener('input', function() { saveApprovalData(); renderApprovalComments(); }); top.appendChild(nameInp); /* 도장 영역 */ var stampArea = document.createElement('div'); stampArea.className = 'approval-stamp-area'; (function(sid){ stampArea.addEventListener('click', function(){ toggleApprovalSign(sid); }); })(id); var stamp = document.createElement('div'); stamp.className = 'approval-stamp' + (d.signed ? ' on' : ''); stamp.id = 'ap-stamp-' + id; var chk = document.createElement('input'); chk.type = 'checkbox'; chk.className = 'approval-stamp-check'; chk.id = 'ap-chk-' + id; chk.checked = !!d.signed; (function(sid){ chk.addEventListener('click', function(e){ e.stopPropagation(); toggleApprovalSign(sid); }); })(id); stamp.appendChild(chk); stampArea.appendChild(stamp); /* 역할 */ var roleInp = document.createElement('input'); roleInp.type = 'text'; roleInp.className = 'approval-role-input'; roleInp.id = 'ap-role-' + id; roleInp.value = d.role || ''; roleInp.placeholder = '직위/역할'; roleInp.addEventListener('input', saveApprovalData); /* 삭제 버튼 */ var delBtn = document.createElement('button'); delBtn.className = 'approval-del-btn'; delBtn.textContent = '✕ 삭제'; (function(sid){ delBtn.addEventListener('click', function(){ removeApprovalBox(sid); }); })(id); box.appendChild(top); box.appendChild(stampArea); box.appendChild(roleInp); box.appendChild(delBtn); grid.appendChild(box); renderApprovalComments(); saveApprovalData(); } function toggleApprovalSign(id) { var box = document.getElementById('approval-box-' + id); var stamp = document.getElementById('ap-stamp-' + id); var chk = document.getElementById('ap-chk-' + id); if (!box || !stamp) return; var isSigned = stamp.classList.toggle('on'); box.classList.toggle('signed', isSigned); if (chk) chk.checked = isSigned; renderApprovalComments(); saveApprovalData(); toast(isSigned ? '✅ 결재 완료' : '↩ 결재 취소'); } function removeApprovalBox(id) { var box = document.getElementById('approval-box-' + id); if (box) { box.remove(); renderApprovalComments(); saveApprovalData(); } } function saveApprovalData() { try { var boxes = []; var els = document.querySelectorAll('#approvalGrid .approval-box'); for (var i=0; i<els.length; i++) { var bid = els[i].id.replace('approval-box-',''); var taEl = document.getElementById('apc-ta-'+bid); boxes.push({ name: (document.getElementById('ap-name-'+bid)||{value:''}).value, role: (document.getElementById('ap-role-'+bid)||{value:''}).value, signed: !!(document.getElementById('ap-chk-'+bid)||{}).checked, comment: taEl ? taEl.value : '' }); } localStorage.setItem(LS_APPROVAL, JSON.stringify({boxes:boxes})); scheduleAutoSave(); } catch(e) {} } /* 결재받기 드롭다운 */ function toggleApprovalReceiveMenu(e) { e.stopPropagation(); var menu = document.getElementById('approvalReceiveMenu'); if (!menu) return; var isOpen = menu.classList.toggle('open'); if (isOpen) { setTimeout(function(){ document.addEventListener('click', closeApprovalReceiveMenu, {once:true}); }, 10); } } /* 결재 URL 복사 */ function copyApprovalUrl(type) { closeApprovalReceiveMenu(); var enc = collectData(); var url = (type === 'mine') ? (getBaseUrl() + '?d=' + enc) : (PUBLIC_BASE + '?d=' + enc); var label = (type === 'mine') ? ' 내링크결재' : ' 공유형링크결재'; clipCopy(url).then(function(){ toast(' ' + label + ' 링크 복사됨!'); }).catch(function(){ toast('복사 실패'); }); } /* ── 결재 다운로드 공통 ── */ function buildApprovalResult() { var title = (document.getElementById('tripMainTitle')||{value:'강의노트 계산기'}).value || '강의노트 계산기'; var now = fmtSaveTime(); var rows = []; var els = document.querySelectorAll('#approvalGrid .approval-box'); for (var i=0; i<els.length; i++) { var bid = els[i].id.replace('approval-box-',''); var taEl = document.getElementById('apc-ta-'+bid); rows.push({ name: (document.getElementById('ap-name-'+bid)||{value:''}).value, role: (document.getElementById('ap-role-'+bid)||{value:''}).value, signed: !!(document.getElementById('ap-chk-'+bid)||{}).checked, comment: taEl ? taEl.value : '' }); } return {title:title, now:now, rows:rows}; } function downloadApprovalHTML() { var d = buildApprovalResult(); var rowsHtml = ''; var ST = '<'+'style>'; var SE = '<'+'/style>'; var HE = '<'+'head>'; var HX = '<'+'/head>'; var BO = '<'+'body>'; var BX = '<'+'/body>'; var HX2 = '<'+'/html>'; var DT = '<'+'!DOCTYPE html>' + '<'+'html lang="ko">'; var TI = '<'+'title>'; var TX = '<'+'/title>'; for (var i=0; i<d.rows.length; i++) { var r = d.rows[i]; var esc = function(s){ return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }; var commentHtml = r.comment ? '<div class="rc">' + esc(r.comment).replace(/\n/g,'<br>') + '</div>' : ''; var stampHtml = r.signed ? '<div class="rs">&#xjuice;'.replace('&#xjuice;','&#x51B3;</div>') : '<div class="rs-e"></div>'; rowsHtml += '<div class="rb' + (r.signed ? ' signed' : '') + '">' + '<div class="rt">' + '<span class="rr">' + esc(r.role) + '</span>' + '<span class="rn">' + esc(r.name) + '</span>' + stampHtml + '</div>' + commentHtml + '</div>'; } var css = [ 'body{font-family:-apple-system,sans-serif;background:#f0f2f5;margin:0;padding:20px;color:#0f172a;}', 'h1{font-size:18px;font-weight:900;margin:0 0 4px;}', '.meta{font-size:11px;color:#64748b;margin-bottom:18px;}', '.grid{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;}', '.rb{flex:1 1 130px;border:2px solid #e2e8f0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.07);}', '.rb.signed{border-color:#10b981;}', '.rt{padding:12px 10px 8px;text-align:center;}', '.rr{display:block;font-size:10px;color:#64748b;font-weight:700;margin-bottom:4px;}', '.rn{display:block;font-size:15px;font-weight:900;margin-bottom:10px;}', '.rs{width:44px;height:44px;border:3px solid #ef4444;border-radius:8px;color:#ef4444;font-size:22px;font-weight:900;line-height:44px;text-align:center;margin:0 auto;}', '.rs-e{width:44px;height:44px;border:2px dashed #cbd5e1;border-radius:8px;background:#f8fafc;margin:0 auto;}', '.rc{padding:8px 12px;border-top:1px solid #e2e8f0;font-size:12px;color:#475569;line-height:1.6;background:#f8fafc;}', '.footer{font-size:10px;color:#94a3b8;text-align:right;margin-top:8px;}' ].join(''); var titleEsc = (d.title||'').replace(/&/g,'&amp;').replace(/</g,'&lt;'); var html = DT + HE + '<meta charset="UTF-8">' + '<meta name="viewport" content="width=device-width,initial-scale=1">' + TI + titleEsc + ' — 결재라인' + TX + ST + css + SE + HX + BO + '<h1>\ud83d\udccb ' + titleEsc + '</h1>' + '<div class="meta">결재라인 | 생성: ' + d.now + '</div>' + '<div class="grid">' + rowsHtml + '</div>' + '<div class="footer">강의노트 계산기</div>' + BX + HX2; triggerDownload(html, '결재라인_' + d.title + '_' + new Date().toISOString().slice(0,10) + '.html', 'text/html;charset=utf-8'); toast('\ud83d\udcc4 HTML 저장됨!'); } function downloadApprovalTXT() { var d = buildApprovalResult(); var line = '------------------------------\n'; var txt = '[결재라인] ' + d.title + '\n생성: ' + d.now + '\n' + line + '\n'; for (var i=0; i<d.rows.length; i++) { var r = d.rows[i]; txt += '[' + (i+1) + '] ' + (r.role||'') + ' ' + (r.name||'') + '\n'; txt += ' 결재: ' + (r.signed ? 'O 완료' : '- 미결재') + '\n'; if (r.comment) txt += ' 코멘트: ' + r.comment.replace(/\n/g, '\n ') + '\n'; txt += '\n'; } txt += line + '강의노트 계산기'; triggerDownload(txt, '결재라인_' + d.title + '_' + new Date().toISOString().slice(0,10) + '.txt', 'text/plain;charset=utf-8'); toast('TXT 저장됨!'); } function triggerDownload(content, filename, type) { try { var blob = new Blob([content], {type: type}); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = filename; a.style.cssText = 'position:fixed;top:-9999px;left:-9999px;'; document.body.appendChild(a); a.click(); setTimeout(function(){ document.body.removeChild(a); URL.revokeObjectURL(url); }, 1500); } catch(e) { toast('저장 실패: ' + e.message); } } /* ── 월선택 드롭다운 ── */ function toggleMonthDropdown(e) { e.stopPropagation(); var dd = document.getElementById('monthDropdown'); if (!dd) return; var isOpen = dd.classList.toggle('open'); if (isOpen) { setTimeout(function(){ document.addEventListener('click', closeMonthDropdown, {once:true}); }, 10); } } function closeMonthDropdown() { var dd = document.getElementById('monthDropdown'); if (dd) dd.classList.remove('open'); } function selectMonth(val) { closeMonthDropdown(); var inp = document.getElementById('tripMainTitle'); if (!inp) return; if (val === '') { inp.value = ''; inp.placeholder = '✏️ 직접 입력하세요'; inp.focus(); } else { inp.value = val; inp.focus(); inp.setSelectionRange(val.length, val.length); } scheduleAutoSave(); } function closeApprovalReceiveMenu() { (function(){var _e=document.getElementById('approvalReceiveMenu');if(_e)_e.classList.remove('open');})(); } /* ── 공유버튼 말풍선 (hover/touch) ── */ function showShareTip(id) { (function(){var _e=document.getElementById('share-tip-'+id);if(_e)_e.classList.add('show');})(); } function hideShareTip(id) { (function(){var _e=document.getElementById('share-tip-'+id);if(_e)_e.classList.remove('show');})(); } function toggleShareTip(id) { const tip = document.getElementById('share-tip-'+id); if (!tip) return; const isShown = tip.classList.contains('show'); // 다른 말풍선 모두 닫기 document.querySelectorAll('.addr-share-tip').forEach(t => t.classList.remove('show')); if (!isShown) tip.classList.add('show'); } // 화면 다른 곳 터치 시 말풍선 닫기 document.addEventListener('touchstart', function(e) { if (!e.target.closest('.addr-share-wrap')) { document.querySelectorAll('.addr-share-tip').forEach(t => t.classList.remove('show')); } }, {passive:true}); /* ── iOS 네비 후 복귀 대응 ── iOS Safari는 새 탭이 닫히면 이전 탭(메모장)으로 돌아옴. 단, 링크 클릭 전 history에 현재 상태를 push해두어 popstate로 복원 가능 */ (function() { // 페이지 로드 시 현재 URL을 history에 push (이미 같은 URL이면 replace) try { if (window.history && window.history.state === null) { window.history.replaceState({ tripApp: true }, '', window.location.href); } } catch(e) {} // popstate: 뒤로가기로 돌아왔을 때 데이터 재복원 (iOS에서 bfcache로 복귀 시) window.addEventListener('pageshow', function(e) { if (e.persisted) { // bfcache에서 복원됨 (iOS 정상 복귀) // autoSave 상태 표시 갱신 try { const el = document.getElementById('autoSaveUnder'); if (el) el.textContent = ' 복귀됨: ' + fmtSaveTime(); } catch(e2) {} } }); })(); /* ── 오프라인 지원 (Service Worker 인라인 등록) ── 네비/외부 지도는 네트워크 필요, 메모/입력/저장은 오프라인 OK */ (function() { if (!('serviceWorker' in navigator)) return; // SW 코드를 Blob으로 만들어 등록 (별도 sw.js 파일 불필요) const swCode = ` const CACHE = 'trip-v17-cache'; const ASSETS = [self.location.href.split('?')[0]]; // 현재 페이지 URL self.addEventListener('install', e => { e.waitUntil( caches.open(CACHE).then(c => c.addAll(ASSETS)).catch(()=>{}) ); self.skipWaiting(); }); self.addEventListener('activate', e => { e.waitUntil(clients.claim()); }); self.addEventListener('fetch', e => { // 외부 요청(지도 등)은 네트워크 우선 if (!e.request.url.startsWith(self.location.origin)) return; e.respondWith( caches.match(e.request).then(cached => { if (cached) return cached; return fetch(e.request).then(resp => { if (resp && resp.status === 200) { const clone = resp.clone(); caches.open(CACHE).then(c => c.put(e.request, clone)); } return resp; }).catch(() => cached || new Response('오프라인 상태입니다', {status:503})); }) ); }); `; try { const blob = new Blob([swCode], {type:'application/javascript'}); const url = URL.createObjectURL(blob); navigator.serviceWorker.register(url, {scope: '/'}) .then(() => { URL.revokeObjectURL(url); }) .catch(() => { URL.revokeObjectURL(url); }); } catch(e) {} })(); /* ── 모달 닫기 ── */ function closeModal(){document.getElementById('modalOverlay').classList.remove('on');} document.getElementById('modalOverlay').addEventListener('click',e=>{if(e.target===e.currentTarget)closeModal();}); document.getElementById('qrOverlay').addEventListener('click',e=>{if(e.target===e.currentTarget)closeQR();}); document.getElementById('bmOverlay').addEventListener('click',e=>{if(e.target===e.currentTarget)closeBm();}); document.getElementById('secShareOverlay').addEventListener('click',e=>{if(e.target===e.currentTarget)closeSecShare();}); document.getElementById('floorOverlay').addEventListener('click', e => { if(e.target===e.currentTarget) closeFloorModal(); }); </script> </div> 모두의계산기/강의노트_18 0-1.kr/18 강의노트 노트 모두 수험생 웹앱 학습 최매슨생 https://0-1.kr/18 https://0-1.kr/18#entry18comment Thu, 12 Nov 2020 15:04:42 +0900 https://0-1.kr/17 <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css"> <script src="https://cdn.jsdelivr.net/npm/lz-string@1.5.0/libs/lz-string.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.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/xlsx/0.18.5/xlsx.full.min.js"></script> <style> .wra-wrap * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .wra-wrap { max-width:1100px; width:100% !important; margin:0 auto !important; float:none !important; display:block !important; text-align:left; direction:ltr; padding:14px 14px 60px 14px; background:#eef1f6; font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic','Apple SD Gothic Neo',sans-serif; color:#222; box-sizing:border-box; } .wra-wrap input, .wra-wrap textarea, .wra-wrap select, .wra-wrap button { box-sizing:border-box !important; max-width:100% !important; } .wra-app-header { display:flex; align-items:center; justify-content:space-between; padding:6px 4px 14px 4px; flex-wrap:wrap; gap:8px; } .wra-app-title { font-size:22px; font-weight:900; color:#1f2937; letter-spacing:-.3px; } .wra-version-badge { font-size:12px; font-weight:700; color:#4f7cff; background:#eef2ff; padding:2px 8px; border-radius:10px; margin-left:8px; vertical-align:middle; } .wra-app-header-btns { display:flex; gap:5px; flex-wrap:nowrap; justify-content:flex-end; } .wra-app-btn { padding:7px 10px; border-radius:8px; border:1.5px solid #cddbff; background:#fff; color:#4f7cff; font-weight:700; font-size:11.5px; font-family:inherit; touch-action:manipulation; white-space:nowrap; } .wra-app-btn .wra-tip-icon { width:14px; height:14px; font-size:9px; margin-left:3px; } .wra-app-btn.wra-app-btn-dark { background:#1f2937; color:#fff; border-color:#1f2937; } .wra-app-btn.wra-app-btn-danger { background:#fff0f0; color:#d9463f; border-color:#f4c6c3; } .wra-top { background:#fff; border-radius:0; padding:12px; margin-bottom:10px; box-shadow:0 1px 4px rgba(0,0,0,.06); } .wra-3col-row { display:flex; gap:8px; flex-wrap:wrap; } .wra-3col-row > div { flex:1; min-width:100px; } .wra-3col-row label { display:block; font-size:12px; color:#888; margin-bottom:3px; } .wra-3col-row input { width:100%; padding:9px 8px; font-size:15px; border:1px solid #e2e5ea; border-radius:8px; touch-action:manipulation; font-family:inherit; } .wra-computed-title { margin-top:10px; font-size:13.5px; font-weight:700; color:#4f7cff; text-align:center; background:#f4f7ff; border-radius:8px; padding:8px; } .wra-hr-thick { border:none; border-top:4px solid #eef0f4; margin:22px 0; border-radius:2px; } .wra-format-row { display:flex; gap:8px; margin:12px 0 4px 0; } .wra-design-row { display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; } .wra-design-row > div { flex:1; min-width:150px; } .wra-design-row label { display:block; font-size:12px; color:#888; margin-bottom:5px; } .wra-swatch-row { display:flex; gap:5px; flex-wrap:wrap; } .wra-swatch-btn { padding:6px 10px; font-size:11.5px; font-weight:700; border-radius:16px; border:1.5px solid #e2e5ea; background:#fafbfc; color:#888; touch-action:manipulation; font-family:inherit; } .wra-swatch-btn.wra-active { background:#4f7cff; color:#fff; border-color:#4f7cff; } .wra-format-btn { flex:1; padding:10px 4px; font-size:13px; font-weight:600; border-radius:10px; border:1.5px solid #e2e5ea; background:#fafbfc; color:#aaa; touch-action:manipulation; position:relative; font-family:inherit; } .wra-format-btn.wra-active { background:#4f7cff; color:#fff; border-color:#4f7cff; } .wra-main-panel { background:linear-gradient(180deg,#eaf0ff 0%, #dfe8ff 100%); border-radius:0; padding:10px; margin-bottom:10px; box-shadow:0 4px 14px rgba(79,124,255,.12); border:1px solid #d7e0ff; } .wra-main-header { display:flex; justify-content:space-between; align-items:flex-end; gap:8px; padding:2px 4px 6px 4px; flex-wrap:wrap; } .wra-main-title { font-size:15px; font-weight:800; color:#1f2937; } .wra-main-title .wra-main-title-prefix { color:#4f7cff; display:block; font-size:12px; margin-bottom:2px; } .wra-main-date { font-size:13px; font-weight:700; color:#556; background:#fff; padding:5px 10px; border-radius:20px; white-space:nowrap; } .wra-ctrl-row { display:flex; justify-content:flex-end; gap:8px; margin-bottom:8px; flex-wrap:wrap; } .wra-add-row-btn { font-size:13px; padding:8px 12px; border-radius:20px; background:#fff; color:#4f7cff; border:1px solid #cddbff; font-weight:700; touch-action:manipulation; font-family:inherit; } .wra-full-btn { font-size:13px; padding:8px 12px; border-radius:20px; background:#1f2937; color:#fff; border:none; font-weight:700; touch-action:manipulation; font-family:inherit; } .wra-nextweek-btn { font-size:13px; padding:8px 12px; border-radius:20px; background:#fff; color:#e08a1f; border:1px solid #ffdba8; font-weight:700; touch-action:manipulation; font-family:inherit; } .wra-section-title { font-size:15px; font-weight:800; margin:18px 2px 8px 2px; display:flex; align-items:center; justify-content:space-between; } .wra-section-title .wra-badge { font-size:11px; font-weight:600; background:#e8edff; color:#4f7cff; padding:3px 8px; border-radius:20px; } .wra-card { background:#fff; border-radius:0; padding:12px; margin-bottom:10px; box-shadow:0 1px 4px rgba(0,0,0,.06); } .wra-common-card { background:linear-gradient(180deg,#fffdf2 0%, #fff8e0 100%); border:1px solid #f2e6ae; } .wra-common-card label { display:flex; align-items:center; gap:6px; font-weight:800; margin-bottom:8px; color:#8a6d1f; } .wra-common-card textarea { width:100%; min-height:90px; background:#fffefb; box-sizing:border-box; padding:10px; font-size:15px; border:1px solid #e2e5ea; border-radius:8px; font-family:inherit; resize:vertical; line-height:1.6; } .wra-acc-head { width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none; padding:2px 2px 6px 2px; font-size:14px; font-weight:800; color:#222; text-align:left; touch-action:manipulation; font-family:inherit; cursor:pointer; } .wra-acc-head-common, .wra-acc-head-exec { color:inherit; } .wra-acc-arrow { font-size:13px; color:#999; transition:transform .15s; flex-shrink:0; margin-left:8px; } .wra-acc-arrow.wra-acc-closed { transform:rotate(-90deg); } .wra-acc-body { overflow:hidden; } .wra-acc-head-main { width:100%; background:none; border:none; padding:2px 4px 6px 4px; touch-action:manipulation; } .wra-acc-input-summary { flex:1; text-align:center; font-size:17px; font-weight:900; color:#4f7cff; letter-spacing:-.2px; } .wra-hr-section { border-top-width:6px; border-top-color:#dfe2e8; margin:26px 0; } .wra-hr-heavy { border-top-width:6px; border-top-color:#c7ccd6; } .wra-collector-label { display:inline-block; font-weight:900; font-size:14px; color:#fff; background:#4f7cff; padding:4px 12px; border-radius:20px; margin-bottom:12px; } .wra-link-warning { color:#c0392b; font-weight:700; font-size:12.5px; margin-top:6px; line-height:1.5; } .wra-acc-head-myinput { position:relative; padding:8px 2px 10px 2px; } .wra-myinput-title { flex:1; text-align:center; font-size:18px; font-weight:900; color:#1f2937; } .wra-acc-head-myinput.wra-acc-collapsed .wra-myinput-title { color:#8a8f98; } .wra-link-sub-label { font-size:12px; color:#888; font-weight:700; margin-bottom:4px; } .wra-link-clickable { cursor:pointer; touch-action:manipulation; } .wra-exec-card { background:linear-gradient(180deg,#f5f3ff 0%, #ece7ff 100%); border:1px solid #ddd3ff; } .wra-field { margin-bottom:10px; } .wra-field label { display:block; font-size:13px; color:#666; margin-bottom:5px; font-weight:600; } .wra-field input, .wra-field textarea { width:100%; padding:9px; font-size:15px; border:1px solid #e2e5ea; border-radius:8px; font-family:inherit; touch-action:manipulation; } .wra-field textarea { min-height:70px; resize:vertical; line-height:1.5; } .wra-name-row { display:flex; gap:8px; } .wra-name-row > div { flex:1; } .wra-btn { display:inline-block; padding:12px 16px; font-size:15px; font-weight:700; border-radius:10px; border:none; background:#4f7cff; color:#fff; touch-action:manipulation; text-align:center; font-family:inherit; } .wra-btn.wra-gray { background:#eceff3; color:#333; } .wra-btn.wra-full { width:100%; } .wra-btn.wra-sm { padding:8px 10px; font-size:13px; border-radius:8px; } .wra-row2 { display:flex; gap:8px; } .wra-row2 > * { flex:1; } .wra-tip-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#dde3ee; color:#556; font-size:11px; font-weight:700; margin-left:5px; vertical-align:middle; touch-action:manipulation; } .wra-bubble { position:fixed; z-index:2147483647; max-width:240px; background:#1f2937; color:#fff; font-size:12.5px; line-height:1.4; padding:9px 11px; border-radius:9px; box-shadow:0 4px 14px rgba(0,0,0,.25); display:none; } .wra-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; background:#fff; border-radius:0; box-shadow:0 1px 4px rgba(0,0,0,.06); } .wra-table { width:100%; min-width:0; border-collapse:collapse; font-size:13.5px; table-layout:fixed; } .wra-table col.wra-c-handle { width:22px; } .wra-table col.wra-c-name { width:28px; } .wra-table col.wra-c-last { width:50%; } .wra-table col.wra-c-this { width:50%; } .wra-away-tag { margin-top:6px; padding-top:6px; border-top:1px dashed #ffbb66; color:#c9660a; font-weight:700; font-size:12.5px; white-space:pre-wrap; } #wra-paste-box { width:100%; min-height:80px; box-sizing:border-box; padding:9px; font-size:15px; border:1px solid #e2e5ea; border-radius:8px; font-family:inherit; resize:vertical; } .wra-table th { background:#1f2937; color:#fff; padding:8px 4px; text-align:center; font-size:11.5px; line-height:1.4; } .wra-table th .wra-th-range { display:block; font-size:10px; font-weight:400; color:#c6d3ff; margin-top:2px; } .wra-table td { padding:8px 6px; border-bottom:1px solid #eee; vertical-align:top; line-height:1.5; overflow:hidden; } .wra-row-main td { border-bottom:none; } .wra-row-note td { padding-top:2px; padding-bottom:6px; } .wra-col-namewrap { display:flex; flex-direction:row; gap:2px; justify-content:center; padding:6px 1px !important; } .wra-vert-name, .wra-vert-role { writing-mode:vertical-rl; text-orientation:upright; text-align:center; outline:none; letter-spacing:1px; } .wra-vert-name { font-weight:700; font-size:13px; } .wra-vert-role { font-weight:500; font-size:10.5px; color:#888; } .wra-vert-name:empty:before, .wra-vert-role:empty:before { content:attr(data-ph); color:#c2c6cc; font-size:10px; } .wra-theme-blue .wra-col-last { background:#eef4ff; } .wra-theme-blue .wra-col-this { background:#fff6e8; } .wra-theme-blue tr:nth-child(4n+1) .wra-col-last, .wra-theme-blue tr:nth-child(4n+2) .wra-col-last { background:#e2ecff; } .wra-theme-blue tr:nth-child(4n+1) .wra-col-this, .wra-theme-blue tr:nth-child(4n+2) .wra-col-this { background:#ffedd2; } .wra-theme-green .wra-col-last { background:#eafaf0; } .wra-theme-green .wra-col-this { background:#fdfbe0; } .wra-theme-green tr:nth-child(4n+1) .wra-col-last, .wra-theme-green tr:nth-child(4n+2) .wra-col-last { background:#dcf4e6; } .wra-theme-green tr:nth-child(4n+1) .wra-col-this, .wra-theme-green tr:nth-child(4n+2) .wra-col-this { background:#f8f3c4; } .wra-theme-purple .wra-col-last { background:#f3ecff; } .wra-theme-purple .wra-col-this { background:#ffeef5; } .wra-theme-purple tr:nth-child(4n+1) .wra-col-last, .wra-theme-purple tr:nth-child(4n+2) .wra-col-last { background:#e8dcff; } .wra-theme-purple tr:nth-child(4n+1) .wra-col-this, .wra-theme-purple tr:nth-child(4n+2) .wra-col-this { background:#ffd9ea; } .wra-table td.wra-col-note { color:#555; word-break:break-word; text-align:left; padding:6px; } .wra-note-flex { display:flex; align-items:flex-start; gap:6px; } .wra-note-inline-label { font-size:10px; color:#999; font-weight:700; flex-shrink:0; width:50px; text-align:center; padding-top:3px; } .wra-note-content { flex:1; min-width:0; min-height:1.3em; outline:none; } .wra-note-btns { flex-shrink:0; display:flex; gap:3px; } .wra-table td[contenteditable="true"], .wra-table div[contenteditable="true"] { outline:none; word-break:break-word; white-space:pre-wrap; } .wra-table td[contenteditable="true"]:focus, .wra-table div[contenteditable="true"]:focus { background:#fffbe0; box-shadow:inset 0 0 0 2px #4f7cff; } .wra-table td[contenteditable="true"]:empty:before, .wra-note-content:empty:before { content:attr(data-ph); color:#c2c6cc; writing-mode:horizontal-tb; } .wra-drag-cell { text-align:center; color:#b7bcc4; touch-action:none; padding:8px 0; } .wra-drag-cell .wra-drag { display:block; font-size:15px; cursor:grab; padding:2px 0; } .wra-drag-cell .wra-num { display:block; font-size:10px; color:#c2c6cc; } .wra-note-btns button { width:18px; height:18px; border-radius:5px; background:#eceff3; border:none; font-size:10px; touch-action:manipulation; padding:0; flex-shrink:0; } .wra-note-btns button.wra-x-btn { color:#ff5c5c; font-weight:700; } .wra-fmt-mixed .wra-drag-cell { display:inline-block; vertical-align:middle; } .wra-away-icon { margin-right:3px; writing-mode:horizontal-tb; display:inline-block; } .wra-sortable-ghost { opacity:.35; background:#dbe6ff !important; } .wra-empty { text-align:center; color:#aaa; font-size:14px; padding:26px 0; background:#fff; border-radius:0; } /* 혼합형: 사람별 타임라인 카드 */ .wra-fmt-mixed table, .wra-fmt-mixed thead, .wra-fmt-mixed tbody, .wra-fmt-mixed tr, .wra-fmt-mixed td { display:block; width:auto; } .wra-fmt-mixed thead { display:none; } .wra-fmt-mixed table { min-width:0; } .wra-fmt-mixed tr.wra-row-main { border-left:4px solid #4f7cff; border-radius:10px 10px 0 0; background:#fafbff; margin:10px 10px 0 10px; padding:4px 8px 8px 10px; border-bottom:none; } .wra-fmt-mixed tr.wra-row-note { border-left:4px solid #4f7cff; border-radius:0 0 10px 10px; background:#fafbff; margin:0 10px 10px 10px; padding:0 8px 8px 10px; } .wra-fmt-mixed td { border-bottom:none; padding:4px 2px; } .wra-fmt-mixed .wra-col-namewrap { flex-direction:row; align-items:baseline; gap:8px; padding:4px 2px !important; } .wra-fmt-mixed .wra-vert-name, .wra-fmt-mixed .wra-vert-role { writing-mode:horizontal-tb; letter-spacing:normal; } .wra-fmt-mixed .wra-vert-name { font-size:15px; } .wra-fmt-mixed .wra-col-last:before { content:" 지난주"; display:block; font-size:10.5px; font-weight:700; color:#4f7cff; margin-bottom:2px; } .wra-fmt-mixed .wra-col-this:before { content:" 이번주"; display:block; font-size:10.5px; font-weight:700; color:#c98a1f; margin-bottom:2px; } .wra-fmt-mixed .wra-drag-cell, .wra-fmt-mixed .wra-note-ctrl { display:inline-block; vertical-align:middle; } .wra-checkbox-row { display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:#555; margin-bottom:6px; } .wra-checkbox-row input[type="checkbox"] { width:17px; height:17px; } .wra-away-note-input { width:100%; padding:9px; font-size:14px; border:1px solid #ffd7a8; background:#fff8ee; border-radius:8px; display:none; margin-bottom:10px; font-family:inherit; } .wra-task-list { } .wra-task-item { display:flex; align-items:center; gap:7px; padding:7px 0; border-bottom:1px solid #f1f1f1; } .wra-task-item input[type="checkbox"] { width:18px; height:18px; flex-shrink:0; } .wra-task-item input[type="text"] { flex:1; border:none; background:transparent; font-size:14.5px; padding:4px 2px; font-family:inherit; min-width:0; } .wra-task-item input[type="text"]:focus { outline:none; background:#f7f9ff; border-radius:6px; } .wra-task-item.wra-task-done input[type="text"] { text-decoration:line-through; color:#aaa; } .wra-task-del { width:22px; height:22px; border-radius:6px; background:#f5f5f5; border:none; font-size:12px; color:#999; flex-shrink:0; touch-action:manipulation; } .wra-task-add-btn { margin-top:8px; font-size:13px; padding:7px 11px; border-radius:16px; background:#eef4ff; color:#4f7cff; border:none; font-weight:700; touch-action:manipulation; font-family:inherit; } .wra-task-empty { font-size:13px; color:#bbb; padding:8px 0; } .wra-exec-row { display:flex; gap:6px; align-items:center; padding:8px 0; border-bottom:1px solid #eee2ff; } .wra-exec-row:last-child { border-bottom:none; } .wra-exec-name { width:86px; flex-shrink:0; padding:9px 8px; font-size:13.5px; border:1px solid #e2e5ea; border-radius:8px; font-family:inherit; } .wra-exec-schedule { flex:1; min-width:0; padding:9px 8px; font-size:13.5px; border:1px solid #e2e5ea; border-radius:8px; font-family:inherit; } .wra-exec-copybtn { font-size:12px; padding:9px 10px; white-space:nowrap; flex-shrink:0; } .wra-exec-del { width:28px; height:28px; border-radius:6px; background:#f5f5f5; border:none; font-size:12px; color:#999; touch-action:manipulation; flex-shrink:0; } .wra-modal-bg { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.55); z-index:2147483647; display:none; touch-action:none; } .wra-modal-bg.wra-show { display:flex; align-items:center; justify-content:center; } .wra-modal { background:#fff; border-radius:0; width:90%; max-width:560px; max-height:85%; overflow-y:auto; padding:20px; -webkit-overflow-scrolling:touch; } .wra-modal.wra-modal-wide { width:100%; max-width:100%; height:100%; max-height:100%; border-radius:0; margin:0; } .wra-modal h3 { margin-top:0; } #wra-fs-title { text-align:center; margin-bottom:20px; font-size:15px; line-height:1.5; } .wra-modal-close { float:right; background:#eceff3; border:none; border-radius:8px; width:32px; height:32px; font-size:16px; touch-action:manipulation; } .wra-expand-modal .wra-member-name { font-size:26px; font-weight:800; } .wra-expand-modal .wra-member-body { font-size:19px; line-height:1.75; margin-top:14px; } .wra-expand-modal .wra-member-body div { margin-bottom:14px; } .wra-expand-nav { display:flex; justify-content:space-between; margin-top:16px; gap:8px; } .wra-fs-toggle-row { display:flex; gap:8px; margin:10px 0 16px 0; } .wra-fs-toggle-btn { flex:1; padding:11px; border-radius:10px; border:1.5px solid #e2e5ea; background:#fafbfc; color:#888; font-weight:700; font-family:inherit; touch-action:manipulation; } .wra-fs-toggle-btn.wra-active { background:#1f2937; color:#fff; border-color:#1f2937; } .wra-fs-person-nav { display:flex; align-items:center; gap:10px; } .wra-fs-nav-btn { flex-shrink:0; width:48px; height:48px; border-radius:50%; background:#eceff3; border:none; font-size:20px; touch-action:manipulation; } .wra-fs-person-content { flex:1; min-width:0; } .wra-fs-person-content .wra-member-name { font-size:26px; font-weight:800; } .wra-fs-person-content .wra-member-body { font-size:19px; line-height:1.75; margin-top:14px; } .wra-fs-person-content .wra-member-body div { margin-bottom:14px; } .wra-fs-common { background:#fff8e0; border:1px solid #f2e6ae; border-radius:10px; padding:12px 14px; margin:16px 0 6px 0; white-space:pre-wrap; font-size:14px; line-height:1.6; } .wra-fs-table table { width:100%; border-collapse:collapse; font-size:16px; table-layout:fixed; } .wra-fs-table col.wra-fs-c-name { width:50px; } .wra-fs-table col.wra-fs-c-last { width:50%; } .wra-fs-table col.wra-fs-c-this { width:50%; } .wra-fs-table th { background:#1f2937; color:#fff; padding:10px 8px; text-align:center; } .wra-fs-table td { padding:12px 8px; border-bottom:1px solid #eee; vertical-align:top; white-space:pre-wrap; line-height:1.6; word-break:break-word; } .wra-fs-table td.wra-fs-name { writing-mode:vertical-rl; text-orientation:upright; text-align:center; font-weight:700; letter-spacing:1px; } .wra-fs-table td.wra-fs-name .wra-fs-role { font-weight:500; color:#ddd; font-size:12px; } .wra-fs-table td.wra-fs-last { background:#eef4ff; } .wra-fs-table td.wra-fs-this { background:#fff6e8; } .wra-fs-table td.wra-fs-note { background:#fafafa; font-size:13.5px; color:#555; white-space:pre-wrap; } .wra-fs-table .wra-fs-note-label { font-size:11px; color:#999; font-weight:700; } @media screen and (orientation: landscape) and (max-width: 1024px) { .wra-modal-wide { height:100vh; max-height:100vh; } } .wra-fs-summary { margin-top:18px; padding-top:14px; border-top:2px dashed #eee; } .wra-fs-summary-title { font-weight:800; font-size:15px; margin-bottom:8px; } .wra-fs-summary-item { font-size:14px; padding:6px 0; color:#555; } .wra-fs-summary-item b { color:#222; } .wra-fs-summary-compact { font-size:14px; color:#555; line-height:1.9; } .wra-fs-summary-compact b { color:#222; } .wra-toast { position:fixed; left:50%; bottom:24px; -webkit-transform:translateX(-50%); transform:translateX(-50%); background:#1f2937; color:#fff; padding:11px 18px; border-radius:24px; font-size:13.5px; z-index:2147483647; display:none; padding-bottom:calc(11px + env(safe-area-inset-bottom, 0px)); } .wra-footer { text-align:center; font-size:11px; color:#b2b6bd; margin-top:26px; line-height:1.6; } .wra-qr-box { text-align:center; margin-top:10px; } .wra-link-box { font-size:12px; word-break:break-all; background:#f5f6f8; border-radius:8px; padding:8px; margin-top:8px; color:#556; } hr.wra-hr { margin:16px 0; border:none; border-top:1px solid #eee; } @media print { .wra-noprint { display:none !important; } } </style> <div class="wra-wrap"> <div class="wra-app-header"> <div class="wra-app-title">주간회의취합계산기<span class="wra-version-badge">V16</span></div> <div class="wra-app-header-btns wra-noprint"> <button class="wra-app-btn wra-app-btn-danger" id="wra-reset-all">초기화<span class="wra-tip-icon">?</span></button> <button class="wra-app-btn" id="wra-quick-share">링크저장<span class="wra-tip-icon">?</span></button> <button class="wra-app-btn wra-app-btn-dark" id="wra-quick-save">지난주링크<span class="wra-tip-icon">?</span></button> </div> </div> <div class="wra-top"> <button class="wra-acc-head wra-acc-head-input" data-acc="wra-acc-input"> <span>입력</span> <span class="wra-acc-input-summary" id="wra-acc-input-summary"></span> <span class="wra-acc-arrow" id="wra-acc-input-arrow">▾</span> </button> <div class="wra-acc-body" id="wra-acc-input"> <div class="wra-3col-row"> <div> <label>회사명(_부서명)</label> <input id="wra-company-name" placeholder="예: OO회사_영업부"> </div> <div> <label>회의날짜</label> <input id="wra-meeting-date" type="date"> </div> <div> <label>인원</label> <input id="wra-attendee-count" type="number" min="0" placeholder="명"> </div> </div> <div class="wra-3col-row" style="margin-top:8px;"> <div> <label id="wra-month-goal-label">월목표</label> <input id="wra-month-goal" placeholder="이번 달 목표"> </div> <div> <label id="wra-year-goal-label">년목표</label> <input id="wra-year-goal" placeholder="올해 목표"> </div> </div> <div class="wra-format-row"> <button class="wra-format-btn wra-active" id="wra-fmt-card">① 카드형</button> <button class="wra-format-btn" id="wra-fmt-mix">② 혼합형</button> </div> <div class="wra-design-row"> <div> <label>표 색상</label> <div class="wra-swatch-row" id="wra-theme-row"> <button class="wra-swatch-btn" data-theme="none">없음</button> <button class="wra-swatch-btn" data-theme="blue">블루</button> <button class="wra-swatch-btn wra-active" data-theme="green">그린</button> <button class="wra-swatch-btn" data-theme="purple">퍼플</button> </div> </div> <div> <label>전체보기 배경</label> <div class="wra-swatch-row" id="wra-fsbg-row"> <button class="wra-swatch-btn wra-active" data-fsbg="#ffffff">흰색</button> <button class="wra-swatch-btn" data-fsbg="#f3f4f6">연회색</button> <button class="wra-swatch-btn" data-fsbg="#fffdf5">아이보리</button> </div> </div> </div> </div> </div> <!-- 메인: 팀 취합 보기 --> <div class="wra-main-panel"> <button class="wra-main-header wra-acc-head-main" data-acc="wra-acc-team"> <div class="wra-main-title" id="wra-main-title-display"> 팀 취합 보기</div> <span class="wra-acc-arrow" id="wra-acc-team-arrow">▾</span> </button> <div class="wra-acc-body" id="wra-acc-team"> <div class="wra-ctrl-row wra-noprint"> <button class="wra-nextweek-btn" id="wra-prevweek-btn">◀ 지난</button> <button class="wra-nextweek-btn" id="wra-nextweek-btn">다음 ▶</button> <button class="wra-full-btn" id="wra-fullscreen-btn">⛶ 전체</button> <button class="wra-full-btn" id="wra-pdf-quick">PDF저장</button> <button class="wra-add-row-btn" id="wra-manual-add">인원+</button> </div> <div id="wra-member-list"></div> </div> </div> <div class="wra-card wra-common-card"> <button class="wra-acc-head wra-acc-head-common" data-acc="wra-acc-common"> <span> 공통 과제 / 추가 지시사항</span><span class="wra-acc-arrow" id="wra-acc-common-arrow">▾</span> </button> <div class="wra-acc-body" id="wra-acc-common"> <textarea id="wra-common-note" placeholder="이번주 팀 공통으로 진행할 과제나 전달사항을 적어주세요"></textarea> </div> </div> <div class="wra-card wra-exec-card wra-noprint"> <button class="wra-acc-head wra-acc-head-exec" data-acc="wra-acc-exec"> <span> 임원일정</span><span class="wra-acc-arrow" id="wra-acc-exec-arrow">▾</span> </button> <div class="wra-acc-body" id="wra-acc-exec"> <div id="wra-exec-list"></div> <button class="wra-add-row-btn" id="wra-exec-add" style="margin-top:10px;">+ 일정 추가</button> </div> </div> <div class="wra-card wra-noprint" id="wra-save-section"> <button class="wra-acc-head" data-acc="wra-acc-save"> <span>저장 / 공유 (팀 취합 보기 기준)</span><span class="wra-acc-arrow" id="wra-acc-save-arrow">▾</span> </button> <div class="wra-acc-body" id="wra-acc-save"> <div class="wra-row2"> <button class="wra-btn wra-gray" id="wra-save-pdf">PDF 저장</button> <button class="wra-btn wra-gray" id="wra-save-html">HTML 파일 저장</button> </div> <div class="wra-row2" style="margin-top:8px;"> <button class="wra-btn wra-gray wra-full" id="wra-save-link">전체 링크 만들기</button> </div> <div class="wra-row2" style="margin-top:8px;"> <button class="wra-btn wra-gray wra-full" id="wra-save-excel"> 엑셀로 저장 (주차별 시트)</button> </div> <div id="wra-team-link-result" style="display:none;"> <div class="wra-link-sub-label">일반 링크 (누르면 복사)</div> <div class="wra-link-box wra-link-clickable" id="wra-team-link"></div> <div class="wra-link-sub-label" style="margin-top:10px;">짧은 링크 <span style="font-weight:400;color:#999;">(사이트를 한 번 거쳐 이동해요, 댓글에 남기기 편해요)</span></div> <div class="wra-link-box wra-link-clickable" id="wra-team-short-link">눌러서 짧은 링크 만들기</div> </div> </div> </div> <!-- 내 업무 입력 (컴팩트) --> <hr class="wra-hr-thick wra-hr-section"> <div class="wra-card wra-noprint"> <button class="wra-acc-head wra-acc-head-myinput" data-acc="wra-acc-myinput"> <span class="wra-myinput-title">✏️ 내 업무 입력 <span class="wra-badge" id="wra-my-date-badge"></span></span><span class="wra-acc-arrow" id="wra-acc-myinput-arrow">▾</span> </button> <div class="wra-acc-body" id="wra-acc-myinput"> <div class="wra-name-row"> <div class="wra-field"><label>이름</label><input id="wra-my-name" placeholder="이름"></div> <div class="wra-field"><label>담당</label><input id="wra-my-role" placeholder="담당"></div> </div> <hr class="wra-hr-thick"> <div class="wra-field"> <label>지난주 업무 <span style="font-weight:400;color:#999;">(자동으로 불러와요)</span></label> <div class="wra-task-list" id="wra-my-last-list"></div> <button class="wra-task-add-btn" id="wra-my-last-add">+ 항목 추가</button> </div> <div class="wra-field"> <label>이번주 업무 (할 일)</label> <div class="wra-task-list" id="wra-my-this-list"></div> <button class="wra-task-add-btn" id="wra-my-this-add">+ 할 일 추가</button> </div> <hr class="wra-hr-thick"> <div class="wra-field"><label>비고</label><textarea id="wra-my-note" placeholder="특이사항 / 막힌 점"></textarea></div> <div class="wra-checkbox-row"> <input type="checkbox" id="wra-my-away-check"> <label for="wra-my-away-check">이번주 자리비움(휴가/출장 등) 있음</label> </div> <input id="wra-my-away-note" class="wra-away-note-input" placeholder="예: 7/29(수) 휴가, 8/1(금) 출장"> <button class="wra-btn wra-full" id="wra-my-generate">내 업무 링크 만들기<span class="wra-tip-icon">?</span></button> <div id="wra-my-result" style="display:none; margin-top:12px;"> <div class="wra-link-box" id="wra-my-link"></div> <div id="wra-my-link-warning" class="wra-link-warning" style="display:none;">⚠️ 링크가 900자를 넘어요! 댓글에 그대로 붙이면 잘릴 수 있어요. 아래 "짧은 URL 만들기"를 눌러 그 링크를 댓글에 남겨주세요.</div> <div class="wra-row2" style="margin-top:8px;"> <button class="wra-btn wra-gray wra-sm" id="wra-my-copy">링크 복사</button> <button class="wra-btn wra-gray wra-sm" id="wra-my-short">짧은 URL 만들기</button> </div> <div class="wra-row2" style="margin-top:8px;"> <button class="wra-btn wra-gray wra-sm" id="wra-my-copytext">댓글용 텍스트 복사</button> <button class="wra-btn wra-gray wra-sm" id="wra-my-qr">QR코드 보기</button> </div> <div id="wra-my-qrbox" class="wra-qr-box"></div> </div> <hr class="wra-hr-thick wra-hr-heavy"> <div class="wra-collector-label"> ️ 취합담당자용</div> <label style="font-weight:700; display:block; margin-bottom:8px;">댓글에서 긁어온 링크 붙여넣기<span class="wra-tip-icon" id="wra-paste-add-hint">?</span></label> <textarea id="wra-paste-box" placeholder="댓글 전체를 그대로 복사해서 붙여넣어도 돼요. 링크가 여러 개 섞여있어도 자동으로 다 찾아요"></textarea> <button class="wra-btn wra-gray wra-full" id="wra-paste-add" style="margin-top:8px;">붙여넣은 내용 취합하기<span class="wra-tip-icon">?</span></button> </div> </div> <div class="wra-card wra-noprint" style="display:flex; gap:8px;"> <button class="wra-btn wra-gray" id="wra-undo">되돌리기</button> <button class="wra-btn wra-gray" id="wra-redo">되살리기</button> <button class="wra-btn wra-gray" id="wra-help">사용설명서</button> </div> <div class="wra-card wra-noprint"> <div style="font-weight:700; margin-bottom:10px;">전체 백업 (모든 주차, 월별 시트)</div> <div class="wra-row2"> <button class="wra-btn wra-gray" id="wra-excel-backup"> 엑셀저장<span class="wra-tip-icon">?</span></button> <button class="wra-btn wra-gray" id="wra-excel-restore"> 엑셀불러<span class="wra-tip-icon">?</span></button> </div> <input type="file" id="wra-excel-restore-input" accept=".xlsx" style="display:none;"> </div> <div class="wra-footer"> 스타트업ex _ cds1981@naver.com<br> ①② 서식은 모두 같은 데이터를 다른 모양으로 보여줘요. </div> </div> <!-- 확대보기 모달 --> <div class="wra-modal-bg" id="wra-expand-bg"> <div class="wra-modal wra-expand-modal" id="wra-expand-modal"> <button class="wra-modal-close" id="wra-expand-close">✕</button> <div id="wra-expand-content"></div> <div class="wra-expand-nav"> <button class="wra-btn wra-gray" id="wra-expand-prev">◀ 이전</button> <button class="wra-btn wra-gray" id="wra-expand-next">다음 ▶</button> </div> </div> </div> <!-- 전체화면 모달 --> <div class="wra-modal-bg" id="wra-fs-bg"> <div class="wra-modal wra-modal-wide" id="wra-fs-modal-box"> <button class="wra-modal-close" id="wra-fs-close">✕</button> <h3 id="wra-fs-title"></h3> <div class="wra-fs-toggle-row wra-noprint"> <button class="wra-fs-toggle-btn wra-active" id="wra-fs-view-all">전체보기</button> <button class="wra-fs-toggle-btn" id="wra-fs-view-person">개별보기</button> </div> <div id="wra-fs-allview"> <div class="wra-fs-table" id="wra-fs-table"></div> </div> <div id="wra-fs-personview" style="display:none;"> <div class="wra-fs-person-nav"> <button class="wra-fs-nav-btn" id="wra-fs-person-prev">◀</button> <div id="wra-fs-person-content" class="wra-fs-person-content"></div> <button class="wra-fs-nav-btn" id="wra-fs-person-next">▶</button> </div> </div> </div> </div> <!-- 링크저장 모달 --> <div class="wra-modal-bg" id="wra-share-bg"> <div class="wra-modal"> <button class="wra-modal-close" id="wra-share-close">✕</button> <h3>링크 저장</h3> <div class="wra-link-sub-label">일반 링크</div> <div class="wra-link-box" id="wra-share-long-link"></div> <div class="wra-link-sub-label" style="margin-top:10px;">짧은 링크 <span style="font-weight:400;color:#999;">(사이트를 한 번 거쳐 이동해요)</span></div> <div class="wra-link-box" id="wra-share-short-link">생성 중...</div> <div class="wra-row2" style="margin-top:14px;"> <button class="wra-btn wra-gray" id="wra-share-linkonly">링크만 저장</button> <button class="wra-btn" id="wra-share-comment">댓글저장용</button> </div> <div style="font-size:12px;color:#999;margin-top:8px;line-height:1.5;">댓글저장용은 "[제목] 링크 : 주소" 형태로 복사돼요. 댓글창에 그대로 붙여넣으면 돼요.</div> </div> </div> <!-- 지난주링크 모달 --> <div class="wra-modal-bg" id="wra-lastlink-bg"> <div class="wra-modal"> <button class="wra-modal-close" id="wra-lastlink-close">✕</button> <h3>지난주 링크</h3> <label style="font-weight:700; display:block; margin-bottom:8px;">지난주 링크를 입력하세요</label> <input id="wra-lastlink-input" style="width:100%;padding:9px;font-size:14px;border:1px solid #e2e5ea;border-radius:8px;box-sizing:border-box;" placeholder="댓글에 저장했던 링크를 붙여넣으세요"> <button class="wra-btn wra-full" id="wra-lastlink-save" style="margin-top:10px;">저장</button> <div id="wra-lastlink-saved-box" style="margin-top:16px; display:none;"> <div class="wra-link-sub-label">저장된 링크</div> <div class="wra-link-box" id="wra-lastlink-saved-link"></div> <div style="font-size:12px;color:#999;margin-top:8px;line-height:1.5;">이번주 링크를 댓글에 남길 때, 지난주 입력한 이 링크만 클릭해도 됩니다~</div> </div> </div> </div> <!-- 사용설명서 모달 --> <div class="wra-modal-bg" id="wra-help-bg"> <div class="wra-modal"> <button class="wra-modal-close" id="wra-help-close">✕</button> <h3>사용설명서</h3> <ol style="font-size:14px; line-height:1.9; padding-left:18px;"> <li>맨 위 <b>팀 취합 보기</b> 표가 이 페이지의 메인이에요. 표 안의 이름/담당/지난주/이번주/비고 칸을 눌러 바로 수정할 수 있어요.</li> <li>상단 ①② 버튼으로 카드형/혼합형 중 원하는 모양으로 바꿔볼 수 있어요. 데이터는 그대로 유지돼요.</li> <li>"◀ 지난" / "다음 ▶" 버튼으로 주차를 이동할 수 있어요. 저장된 주차가 있으면 그대로 불러오고, 없으면 이번주 업무를 지난주로 넘기며 새 주를 시작해요.</li> <li>"⛶ 전체"에서 "전체보기"는 표 전체를, "개별보기"는 화살표로 사람별로 넘겨보는 큰 화면이에요.</li> <li>제목 앞부분은 회의날짜 기준으로 자동 계산되고, 뒤 이름만 수정하면 돼요.</li> <li><b>내 업무 입력</b>의 지난주 업무는 지난번 "이번주 할 일"이 자동으로 넘어와요. 이번주 할 일은 "+ 할 일 추가"로 쌓아가면 돼요.</li> <li>휴가/출장 등 자리비움은 체크박스로 남기면 전체화면에 명단으로 정리돼요.</li> <li>임원일정은 이름+일정을 적고 "복사 후 댓글입력"을 누르면 링크가 바로 복사돼요. 댓글에 붙여넣으면 취합 시 자동 반영돼요.</li> <li>댓글에 달린 링크들은 붙여넣기 칸에 통째로 복사해서 넣고 "취합하기"를 누르면 자동으로 채워져요.</li> <li>모든 입력은 즉시 저장돼요. 상단 "링크저장"으로 이번주 전체를 링크로 남기고, 페이지 맨 아래 "엑셀저장"으로 모든 주차를 통째로 백업할 수 있어요.</li> </ol> </div> </div> <div class="wra-toast" id="wra-toast"></div> <script type="text/plain">CihmdW5jdGlvbigpewogICd1c2Ugc3RyaWN0JzsKICB2YXIgUFJFRklYID0gJ3dyYV8nOwogIHZhciBTVE9SQUdFX0tFWSA9IFBSRUZJWCArICdzdGF0ZV92MCc7CiAgdmFyIE1ZVEFTS1NfS0VZID0gUFJFRklYICsgJ215dGFza3NfdjAnOwogIHZhciBBUkNISVZFX0tFWSA9IFBSRUZJWCArICdhcmNoaXZlX3YwJzsKICB2YXIgX3RvdWNoaW5nID0gZmFsc2U7CgogIHZhciBNT05USF9XRUVLX0tPUiA9IFsn7LKr7Ke4Jywn65GY7Ke4Jywn7IWL7Ke4Jywn64S37Ke4Jywn64uk7ISv7Ke4Jywn7Jes7ISv7Ke4J107CgogIHZhciBzdGF0ZSA9IHsKICAgIGNvbXBhbnlOYW1lOiAnJywKICAgIG1lZXRpbmdEYXRlOiAnJywKICAgIGF0dGVuZGVlQ291bnQ6ICcnLAogICAgbW9udGhHb2FsOiAnJywKICAgIHllYXJHb2FsOiAnJywKICAgIGxhc3RSYW5nZU92ZXJyaWRlOiAnJywKICAgIHRoaXNSYW5nZU92ZXJyaWRlOiAnJywKICAgIGNvbW1vbk5vdGU6ICcnLAogICAgbWVtYmVyczogW10sCiAgICBleGVjTGlzdDogW10sCiAgICB2aWV3Rm9ybWF0OiAnY2FyZCcsCiAgICBjb2xvclRoZW1lOiAnZ3JlZW4nLAogICAgZnNCYWNrZ3JvdW5kOiAnI2ZmZmZmZicKICB9OwogIHZhciBteVRhc2tzID0geyBsYXN0V2VlazogW10sIHRoaXNXZWVrOiBbXSwgc2F2ZWRXZWVrOiAnJyB9OwogIHZhciB1bmRvU3RhY2sgPSBbXTsKICB2YXIgcmVkb1N0YWNrID0gW107CiAgdmFyIGV4cGFuZEluZGV4ID0gMDsKICB2YXIgZnNQZXJzb25JZHggPSAwOwogIHZhciBzb3J0YWJsZUluc3RhbmNlID0gbnVsbDsKCiAgZnVuY3Rpb24gc25hcHNob3QoKXsgcmV0dXJuIEpTT04uc3RyaW5naWZ5KHN0YXRlKTsgfQoKICBmdW5jdGlvbiBwdXNoVW5kbygpewogICAgdW5kb1N0YWNrLnB1c2goc25hcHNob3QoKSk7CiAgICBpZiAodW5kb1N0YWNrLmxlbmd0aCA+IDI1KSB1bmRvU3RhY2suc2hpZnQoKTsKICAgIHJlZG9TdGFjayA9IFtdOwogIH0KCiAgZnVuY3Rpb24gc2F2ZU5vdygpewogICAgdHJ5IHsgbG9jYWxTdG9yYWdlLnNldEl0ZW0oU1RPUkFHRV9LRVksIHNuYXBzaG90KCkpOyB9IGNhdGNoKGUpe30KICB9CiAgZnVuY3Rpb24gc2F2ZU15VGFza3MoKXsKICAgIHRyeSB7IGxvY2FsU3RvcmFnZS5zZXRJdGVtKE1ZVEFTS1NfS0VZLCBKU09OLnN0cmluZ2lmeShteVRhc2tzKSk7IH0gY2F0Y2goZSl7fQogIH0KCiAgZnVuY3Rpb24gZ2VuSWQoKXsgcmV0dXJuICdtJyArIERhdGUubm93KCkgKyBNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkqMTAwMCk7IH0KCiAgZnVuY3Rpb24gYmluZFRhcChlbCwgZm4pewogICAgaWYgKCFlbCkgcmV0dXJuOwogICAgZWwuYWRkRXZlbnRMaXN0ZW5lcigndG91Y2hlbmQnLCBmdW5jdGlvbihlKXsKICAgICAgX3RvdWNoaW5nID0gdHJ1ZTsKICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpOwogICAgICBmbihlKTsKICAgICAgc2V0VGltZW91dChmdW5jdGlvbigpeyBfdG91Y2hpbmcgPSBmYWxzZTsgfSwgMzUwKTsKICAgIH0sIGZhbHNlKTsKICAgIGVsLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24oZSl7CiAgICAgIGlmIChfdG91Y2hpbmcpIHsgcmV0dXJuOyB9CiAgICAgIGZuKGUpOwogICAgfSwgZmFsc2UpOwogIH0KCiAgdmFyIHRvYXN0VGltZXIgPSBudWxsOwogIGZ1bmN0aW9uIHNob3dUb2FzdChtc2cpewogICAgdmFyIHQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXRvYXN0Jyk7CiAgICB0LnRleHRDb250ZW50ID0gbXNnOwogICAgdC5zdHlsZS5kaXNwbGF5ID0gJ2Jsb2NrJzsKICAgIGlmICh0b2FzdFRpbWVyKSBjbGVhclRpbWVvdXQodG9hc3RUaW1lcik7CiAgICB0b2FzdFRpbWVyID0gc2V0VGltZW91dChmdW5jdGlvbigpeyB0LnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7IH0sIDIyMDApOwogIH0KCiAgdmFyIFRJUFMgPSB7CiAgICAnd3JhLXJlc2V0LWFsbCc6ICfsp4DquIgg7J6F66Cl65CcIOuqqOuToCDrgrTsmqnqs7wsIOyngOq4iOq5jOyngCDsoIDsnqXrkJwg7KeA64KcIOyjvOywqCDquLDroZ3quYzsp4Ag7KCE67aAIOyngOybjOyalC4g65CY64+M66a0IOyImCDsl4bsnLzri4gg6rytIO2VhOyalO2VoCDrlYzrp4wg64iM65+s7KO87IS47JqULicsCiAgICAnd3JhLW15LWdlbmVyYXRlJzogJ+yXheustCDsnpHshLEg7ZuEIOunge2BrOulvCDsg53shLHtlZjqs6AsIOq3uCDrp4Htgazrpbwg64yT6riAIOuYkOuKlCDst6jtlanri7Tri7nsnpDsl5Dqsowg7KCE64us7ZWY7IS47JqULiDst6jtlantlaAg65WMIOyekOuPmeycvOuhnCDtkZzsl5Ag7LGE7JuM7KC47JqULicsCiAgICAnd3JhLXBhc3RlLWFkZCc6ICfrjJPquIDsl5Ag7Jis65287JioIOunge2BrOuTpOydhCDthrXsp7jroZwg67aZ7Jes64Sj6rOgIOuIhOultOuptCwg66qHIOqwnOuToCDsnpDrj5nsnLzroZwg7ZGcL+ydvOygleyXkCDssYTsm4zsoLjsmpQuJywKICAgICd3cmEtcGFzdGUtYWRkLWhpbnQnOiAn64yT6riAIOyghOyytOulvCDrs7XsgqztlbTshJwg6re464yA66GcIOu2meyXrOuEo+yWtOuPhCDrj7zsmpQuIOunge2BrOqwgCDsl6zrn6wg6rCcIOyEnuyXrCDsnojslrTrj4Qg64ukIOywvuyVhOuDheuLiOuLpC4nLAogICAgJ3dyYS1xdWljay1zaGFyZSc6ICfsp4DquIgg7J6F66Cl65CcIOydtOuyiOyjvCDsoITssrQg64K07Jqp7J2EIOunge2BrOuhnCDrp4zrk6TslrTsmpQuIOydvOuwmC/sp6fsnYAg66eB7YGs66W8IOqzqOudvCDrp4Htgazrp4wg7KCA7J6l7ZWY6rGw64KYLCDrjJPquIDsl5Ag67CU66GcIOu2meyXrOuEo+ydhCDrrLjqtazroZwg7KCA7J6l7ZWgIOyImCDsnojslrTsmpQuJywKICAgICd3cmEtcXVpY2stc2F2ZSc6ICfrjJPquIDsl5Ag7KCA7J6l7ZW065GUIOyngOuCnOyjvCDrp4Htgazrpbwg7Jes6riw7JeQIOu2meyXrOuEo+yWtCDrs7TqtIDtlZjrqbQsIOuLpOydjOyXkCDri6Tsi5wg7LC+7J2EIO2VhOyalCDsl4bsnbQg64iM65+s7IScIOuwlOuhnCDsnbTrj5ntlaAg7IiYIOyeiOyWtOyalC4nLAogICAgJ3dyYS1leGNlbC1iYWNrdXAnOiAn7KeA6riI6rmM7KeAIOyeheugpeuQnCDrqqjrk6Ag7KO87LCoIOuNsOydtO2EsOulvCDsm5Trs4Qg7Iuc7Yq466GcIOuCmOuIoCDsl5HshYAg7YyM7J28IO2VmOuCmOuhnCDsoIDsnqXtlbTsmpQuIO2ajOyCrCDsnpDsgrDsnLzroZwg67O06rSA7ZWY6riwIOyii+yVhOyalC4nLAogICAgJ3dyYS1leGNlbC1yZXN0b3JlJzogJ+ydtOyghOyXkCDsoIDsnqXtlbTrkZQg7JeR7IWAIOuwseyXhSDtjIzsnbzsnYQg67aI65+s7JmA7IScIOuqqOuToCDso7zssKgg642w7J207YSw66W8IOuzteybkO2VtOyalC4nCiAgfTsKICB2YXIgYnViYmxlID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnZGl2Jyk7CiAgYnViYmxlLmNsYXNzTmFtZSA9ICd3cmEtYnViYmxlJzsKICBidWJibGUuaWQgPSAnd3JhLWJ1YmJsZSc7CiAgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZChidWJibGUpOwogIGZ1bmN0aW9uIGhpZGVCdWJibGUoKXsgYnViYmxlLnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7IH0KICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uKGUpewogICAgdmFyIHRhcmdldCA9IGUudGFyZ2V0OwogICAgdmFyIHRpcEtleSA9IG51bGw7CiAgICBpZiAodGFyZ2V0LmNsYXNzTmFtZSA9PT0gJ3dyYS10aXAtaWNvbicpIHsKICAgICAgdmFyIGhvc3QgPSB0YXJnZXQucGFyZW50RWxlbWVudDsKICAgICAgaWYgKGhvc3QgJiYgVElQU1tob3N0LmlkXSkgdGlwS2V5ID0gaG9zdC5pZDsKICAgICAgZWxzZSBpZiAoVElQU1t0YXJnZXQuaWRdKSB0aXBLZXkgPSB0YXJnZXQuaWQ7CiAgICB9CiAgICBpZiAodGlwS2V5KXsKICAgICAgdmFyIHJlY3QgPSB0YXJnZXQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7CiAgICAgIGJ1YmJsZS50ZXh0Q29udGVudCA9IFRJUFNbdGlwS2V5XTsKICAgICAgYnViYmxlLnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snOwogICAgICB2YXIgdG9wID0gcmVjdC5ib3R0b20gKyA4OwogICAgICB2YXIgbGVmdCA9IHJlY3QubGVmdCAtIDEwMDsKICAgICAgaWYgKGxlZnQgPCA4KSBsZWZ0ID0gODsKICAgICAgaWYgKGxlZnQgKyAyNDAgPiB3aW5kb3cuaW5uZXJXaWR0aCkgbGVmdCA9IHdpbmRvdy5pbm5lcldpZHRoIC0gMjQ4OwogICAgICBidWJibGUuc3R5bGUudG9wID0gdG9wICsgJ3B4JzsKICAgICAgYnViYmxlLnN0eWxlLmxlZnQgPSBsZWZ0ICsgJ3B4JzsKICAgICAgZS5zdG9wUHJvcGFnYXRpb24oKTsKICAgIH0gZWxzZSBpZiAoYnViYmxlLnN0eWxlLmRpc3BsYXkgPT09ICdibG9jaycpIHsKICAgICAgaGlkZUJ1YmJsZSgpOwogICAgfQogIH0sIGZhbHNlKTsKCiAgZnVuY3Rpb24gY29tcHJlc3Mob2JqKXsKICAgIHJldHVybiBMWlN0cmluZy5jb21wcmVzc1RvRW5jb2RlZFVSSUNvbXBvbmVudChKU09OLnN0cmluZ2lmeShvYmopKTsKICB9CiAgZnVuY3Rpb24gZGVjb21wcmVzcyhjb2RlKXsKICAgIHRyeSB7CiAgICAgIHZhciBqc29uID0gTFpTdHJpbmcuZGVjb21wcmVzc0Zyb21FbmNvZGVkVVJJQ29tcG9uZW50KGNvZGUpOwogICAgICBpZiAoIWpzb24pIHJldHVybiBudWxsOwogICAgICByZXR1cm4gSlNPTi5wYXJzZShqc29uKTsKICAgIH0gY2F0Y2goZSl7IHJldHVybiBudWxsOyB9CiAgfQoKICBmdW5jdGlvbiBleHRyYWN0QWxsQ29kZXMocmF3KXsKICAgIHZhciByZXN1bHRzID0gW107CiAgICB2YXIgcmVUID0gL1s/Jl10PShbQS1aYS16MC05K1wtXyQlLl0rKS9nOwogICAgdmFyIHJlRCA9IC9bPyZdZD0oW0EtWmEtejAtOStcLV8kJS5dKykvZzsKICAgIHZhciBtOwogICAgd2hpbGUgKChtID0gcmVULmV4ZWMocmF3KSkgIT09IG51bGwpeyByZXN1bHRzLnB1c2goeyB0eXBlOid0JywgY29kZTptWzFdIH0pOyB9CiAgICB3aGlsZSAoKG0gPSByZUQuZXhlYyhyYXcpKSAhPT0gbnVsbCl7IHJlc3VsdHMucHVzaCh7IHR5cGU6J2QnLCBjb2RlOm1bMV0gfSk7IH0KICAgIGlmIChyZXN1bHRzLmxlbmd0aCA9PT0gMCl7CiAgICAgIHZhciB0b2tlbnMgPSByYXcuc3BsaXQoL1xzKy8pOwogICAgICB0b2tlbnMuZm9yRWFjaChmdW5jdGlvbih0b2spewogICAgICAgIHRvayA9IHRvay50cmltKCk7CiAgICAgICAgaWYgKC9eW0EtWmEtejAtOStcLV8kXXsxMCx9JC8udGVzdCh0b2spKSByZXN1bHRzLnB1c2goeyB0eXBlOidkJywgY29kZTogdG9rIH0pOwogICAgICB9KTsKICAgIH0KICAgIHJldHVybiByZXN1bHRzOwogIH0KCiAgZnVuY3Rpb24gZm10RmllbGQobGFiZWwsIHZhbHVlKXsKICAgIGlmICghdmFsdWUpIHJldHVybiAnJzsKICAgIHJldHVybiAnPGRpdj48Yj4nICsgbGFiZWwgKyAnPC9iPjxicj4nICsgZXNjYXBlSHRtbCh2YWx1ZSkucmVwbGFjZSgvXG4vZywnPGJyPicpICsgJzwvZGl2Pic7CiAgfQogIGZ1bmN0aW9uIGVzY2FwZUh0bWwocyl7CiAgICByZXR1cm4gU3RyaW5nKHMpLnJlcGxhY2UoLyYvZywnJmFtcDsnKS5yZXBsYWNlKC88L2csJyZsdDsnKS5yZXBsYWNlKC8+L2csJyZndDsnKTsKICB9CgogIC8vIC0tLS0tLS0tLS0g64Kg7KecIOycoO2LuCAtLS0tLS0tLS0tCiAgZnVuY3Rpb24gdG9EYXRlKGRhdGVTdHIpewogICAgcmV0dXJuIGRhdGVTdHIgPyBuZXcgRGF0ZShkYXRlU3RyICsgJ1QwMDowMDowMCcpIDogbmV3IERhdGUoKTsKICB9CiAgZnVuY3Rpb24gZm10TUQoZCl7IHJldHVybiAoZC5nZXRNb250aCgpKzEpICsgJy8nICsgZC5nZXREYXRlKCk7IH0KICBmdW5jdGlvbiBnZXRJc29XZWVrS2V5KGQpewogICAgdmFyIGRhdGUgPSBuZXcgRGF0ZShEYXRlLlVUQyhkLmdldEZ1bGxZZWFyKCksIGQuZ2V0TW9udGgoKSwgZC5nZXREYXRlKCkpKTsKICAgIHZhciBkYXlOdW0gPSBkYXRlLmdldFVUQ0RheSgpIHx8IDc7CiAgICBkYXRlLnNldFVUQ0RhdGUoZGF0ZS5nZXRVVENEYXRlKCkgKyA0IC0gZGF5TnVtKTsKICAgIHZhciB5ZWFyU3RhcnQgPSBuZXcgRGF0ZShEYXRlLlVUQyhkYXRlLmdldFVUQ0Z1bGxZZWFyKCksIDAsIDEpKTsKICAgIHZhciB3ZWVrID0gTWF0aC5jZWlsKCgoKGRhdGUgLSB5ZWFyU3RhcnQpIC8gODY0MDAwMDApICsgMSkgLyA3KTsKICAgIHJldHVybiBkYXRlLmdldFVUQ0Z1bGxZZWFyKCkgKyAnLVcnICsgd2VlazsKICB9CiAgZnVuY3Rpb24gZ2V0TW9uZGF5T2YoZCl7CiAgICB2YXIgZGF5ID0gZC5nZXREYXkoKTsKICAgIHZhciBkaWZmVG9Nb25kYXkgPSAoZGF5ID09PSAwID8gLTYgOiAxIC0gZGF5KTsKICAgIHZhciBtb25kYXkgPSBuZXcgRGF0ZShkKTsKICAgIG1vbmRheS5zZXREYXRlKGQuZ2V0RGF0ZSgpICsgZGlmZlRvTW9uZGF5KTsKICAgIHJldHVybiBtb25kYXk7CiAgfQogIGZ1bmN0aW9uIGdldFRpdGxlUHJlZml4KGRhdGVTdHIpewogICAgdmFyIGQgPSB0b0RhdGUoZGF0ZVN0cik7CiAgICB2YXIgeWVhciA9IGQuZ2V0RnVsbFllYXIoKTsKICAgIHZhciB5eSA9IFN0cmluZyh5ZWFyKS5zbGljZSgyKTsKICAgIHZhciBpc29XZWVrID0gZ2V0SXNvV2Vla0tleShkKS5zcGxpdCgnLVcnKVsxXTsKICAgIHZhciBpc29XZWVrUGFkZGVkID0gKGlzb1dlZWsubGVuZ3RoIDwgMiA/ICcwJyA6ICcnKSArIGlzb1dlZWs7CiAgICB2YXIgbW9uZGF5ID0gZ2V0TW9uZGF5T2YoZCk7CiAgICB2YXIgd2Vla09mTW9udGggPSBNYXRoLmNlaWwobW9uZGF5LmdldERhdGUoKSAvIDcpOwogICAgdmFyIHdlZWtPZk1vbnRoTGFiZWwgPSBNT05USF9XRUVLX0tPUltNYXRoLm1pbih3ZWVrT2ZNb250aCAtIDEsIE1PTlRIX1dFRUtfS09SLmxlbmd0aCAtIDEpXSB8fCAod2Vla09mTW9udGggKyAn67KI7Ke4Jyk7CiAgICB2YXIgbW9uZGF5TW9udGggPSBtb25kYXkuZ2V0TW9udGgoKSArIDE7CiAgICB2YXIgbW0gPSAoJzAnICsgKGQuZ2V0TW9udGgoKSsxKSkuc2xpY2UoLTIpOwogICAgdmFyIGRkID0gKCcwJyArIGQuZ2V0RGF0ZSgpKS5zbGljZSgtMik7CiAgICB2YXIgY29tcGFjdERhdGUgPSB5eSArIG1tICsgZGQ7CiAgICB2YXIgY29tcGFueVBhcnQgPSAoc3RhdGUuY29tcGFueU5hbWUgJiYgc3RhdGUuY29tcGFueU5hbWUudHJpbSgpKSA/IHN0YXRlLmNvbXBhbnlOYW1lLnRyaW0oKSA6ICftmozsgqzrqoUnOwogICAgcmV0dXJuICdbJyArIHl5ICsgJ+uFhCAnICsgaXNvV2Vla1BhZGRlZCArICfso7zssKgoJyArIG1vbmRheU1vbnRoICsgJ+yblCAnICsgd2Vla09mTW9udGhMYWJlbCArICfso7wpXygnICsgY29tcGFueVBhcnQgKyAnKV/so7zqsITrs7Tqs6AoJyArIGNvbXBhY3REYXRlICsgJyldJzsKICB9CiAgZnVuY3Rpb24gZ2V0V2Vla1JhbmdlKGRhdGVTdHIsIG9mZnNldFdlZWtzKXsKICAgIHZhciBkID0gdG9EYXRlKGRhdGVTdHIpOwogICAgdmFyIG1vbmRheSA9IGdldE1vbmRheU9mKGQpOwogICAgbW9uZGF5LnNldERhdGUobW9uZGF5LmdldERhdGUoKSArIG9mZnNldFdlZWtzICogNyk7CiAgICB2YXIgZnJpZGF5ID0gbmV3IERhdGUobW9uZGF5KTsKICAgIGZyaWRheS5zZXREYXRlKG1vbmRheS5nZXREYXRlKCkgKyA0KTsKICAgIHJldHVybiBmbXRNRChtb25kYXkpICsgJ34nICsgZm10TUQoZnJpZGF5KTsKICB9CiAgZnVuY3Rpb24gZm10RnVsbERhdGUoZGF0ZVN0cil7CiAgICB2YXIgZCA9IHRvRGF0ZShkYXRlU3RyKTsKICAgIHZhciBkYXlzID0gWyfsnbwnLCfsm5QnLCftmZQnLCfsiJgnLCfrqqknLCfquIgnLCfthqAnXTsKICAgIHJldHVybiBkLmdldEZ1bGxZZWFyKCkgKyAnLicgKyAoJzAnKyhkLmdldE1vbnRoKCkrMSkpLnNsaWNlKC0yKSArICcuJyArICgnMCcrZC5nZXREYXRlKCkpLnNsaWNlKC0yKSArICcgKCcgKyBkYXlzW2QuZ2V0RGF5KCldICsgJyknOwogIH0KICBmdW5jdGlvbiBhZGREYXlzKGRhdGVTdHIsIG4pewogICAgdmFyIGQgPSB0b0RhdGUoZGF0ZVN0cik7CiAgICBkLnNldERhdGUoZC5nZXREYXRlKCkgKyBuKTsKICAgIHJldHVybiBkLmdldEZ1bGxZZWFyKCkgKyAnLScgKyAoJzAnKyhkLmdldE1vbnRoKCkrMSkpLnNsaWNlKC0yKSArICctJyArICgnMCcrZC5nZXREYXRlKCkpLnNsaWNlKC0yKTsKICB9CgogIGZ1bmN0aW9uIHVwZGF0ZVRpdGxlRGlzcGxheXMoKXsKICAgIHZhciBmdWxsVGl0bGUgPSBnZXRUaXRsZVByZWZpeChzdGF0ZS5tZWV0aW5nRGF0ZSk7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW1haW4tdGl0bGUtZGlzcGxheScpLnRleHRDb250ZW50ID0gZnVsbFRpdGxlOwogICAgdmFyIGFjY1N1bW1hcnkgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWFjYy1pbnB1dC1zdW1tYXJ5Jyk7CiAgICBpZiAoYWNjU3VtbWFyeSkgYWNjU3VtbWFyeS50ZXh0Q29udGVudCA9IGZ1bGxUaXRsZTsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtbXktZGF0ZS1iYWRnZScpLnRleHRDb250ZW50ID0gZm10RnVsbERhdGUoc3RhdGUubWVldGluZ0RhdGUpOwogIH0KCiAgLy8gLS0tLS0tLS0tLSDshJzsi50g7Iqk7JyE7LKYIC0tLS0tLS0tLS0KICBmdW5jdGlvbiB1cGRhdGVGb3JtYXRCdXR0b25zKCl7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWZtdC1jYXJkJykuY2xhc3NOYW1lID0gJ3dyYS1mb3JtYXQtYnRuJyArIChzdGF0ZS52aWV3Rm9ybWF0ID09PSAnY2FyZCcgPyAnIHdyYS1hY3RpdmUnIDogJycpOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1mbXQtbWl4JykuY2xhc3NOYW1lID0gJ3dyYS1mb3JtYXQtYnRuJyArIChzdGF0ZS52aWV3Rm9ybWF0ID09PSAnbWl4ZWQnID8gJyB3cmEtYWN0aXZlJyA6ICcnKTsKICB9CiAgZnVuY3Rpb24gc2V0Rm9ybWF0KGYpewogICAgc3RhdGUudmlld0Zvcm1hdCA9IGY7CiAgICB1cGRhdGVGb3JtYXRCdXR0b25zKCk7CiAgICByZW5kZXJNZW1iZXJMaXN0KCk7CiAgICBzYXZlTm93KCk7CiAgfQogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1mbXQtY2FyZCcpLCBmdW5jdGlvbigpeyBzZXRGb3JtYXQoJ2NhcmQnKTsgfSk7CiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWZtdC1taXgnKSwgZnVuY3Rpb24oKXsgc2V0Rm9ybWF0KCdtaXhlZCcpOyB9KTsKCiAgLy8gLS0tLS0tLS0tLSDrlJTsnpDsnbgg7ISg7YOdICjtkZwg7IOJ7IOBIC8g7KCE7LK067O06riwIOuwsOqyvSkgLS0tLS0tLS0tLQogIGZ1bmN0aW9uIHVwZGF0ZURlc2lnbkJ1dHRvbnMoKXsKICAgIHZhciB0aGVtZUJ0bnMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcjd3JhLXRoZW1lLXJvdyBbZGF0YS10aGVtZV0nKTsKICAgIGZvciAodmFyIGk9MDtpPHRoZW1lQnRucy5sZW5ndGg7aSsrKXsKICAgICAgdGhlbWVCdG5zW2ldLmNsYXNzTmFtZSA9ICd3cmEtc3dhdGNoLWJ0bicgKyAodGhlbWVCdG5zW2ldLmdldEF0dHJpYnV0ZSgnZGF0YS10aGVtZScpID09PSBzdGF0ZS5jb2xvclRoZW1lID8gJyB3cmEtYWN0aXZlJyA6ICcnKTsKICAgIH0KICAgIHZhciBmc2JnQnRucyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJyN3cmEtZnNiZy1yb3cgW2RhdGEtZnNiZ10nKTsKICAgIGZvciAodmFyIGo9MDtqPGZzYmdCdG5zLmxlbmd0aDtqKyspewogICAgICBmc2JnQnRuc1tqXS5jbGFzc05hbWUgPSAnd3JhLXN3YXRjaC1idG4nICsgKGZzYmdCdG5zW2pdLmdldEF0dHJpYnV0ZSgnZGF0YS1mc2JnJykgPT09IHN0YXRlLmZzQmFja2dyb3VuZCA/ICcgd3JhLWFjdGl2ZScgOiAnJyk7CiAgICB9CiAgfQogIHZhciB0aGVtZUJ1dHRvbnMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcjd3JhLXRoZW1lLXJvdyBbZGF0YS10aGVtZV0nKTsKICBmb3IgKHZhciB0aT0wOyB0aTx0aGVtZUJ1dHRvbnMubGVuZ3RoOyB0aSsrKXsKICAgIChmdW5jdGlvbihidG4pewogICAgICBiaW5kVGFwKGJ0biwgZnVuY3Rpb24oKXsKICAgICAgICBzdGF0ZS5jb2xvclRoZW1lID0gYnRuLmdldEF0dHJpYnV0ZSgnZGF0YS10aGVtZScpOwogICAgICAgIHVwZGF0ZURlc2lnbkJ1dHRvbnMoKTsKICAgICAgICByZW5kZXJNZW1iZXJMaXN0KCk7CiAgICAgICAgc2F2ZU5vdygpOwogICAgICB9KTsKICAgIH0pKHRoZW1lQnV0dG9uc1t0aV0pOwogIH0KICB2YXIgZnNiZ0J1dHRvbnMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcjd3JhLWZzYmctcm93IFtkYXRhLWZzYmddJyk7CiAgZm9yICh2YXIgZmk9MDsgZmk8ZnNiZ0J1dHRvbnMubGVuZ3RoOyBmaSsrKXsKICAgIChmdW5jdGlvbihidG4pewogICAgICBiaW5kVGFwKGJ0biwgZnVuY3Rpb24oKXsKICAgICAgICBzdGF0ZS5mc0JhY2tncm91bmQgPSBidG4uZ2V0QXR0cmlidXRlKCdkYXRhLWZzYmcnKTsKICAgICAgICB1cGRhdGVEZXNpZ25CdXR0b25zKCk7CiAgICAgICAgc2F2ZU5vdygpOwogICAgICB9KTsKICAgIH0pKGZzYmdCdXR0b25zW2ZpXSk7CiAgfQoKICAvLyAtLS0tLS0tLS0tIO2MgCDst6jtlakg7ZGcIC0tLS0tLS0tLS0KICBmdW5jdGlvbiByZW5kZXJNZW1iZXJMaXN0KCl7CiAgICB2YXIgd3JhcCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtbWVtYmVyLWxpc3QnKTsKICAgIHdyYXAuaW5uZXJIVE1MID0gJyc7CiAgICB2YXIgbGFzdFJhbmdlID0gc3RhdGUubGFzdFJhbmdlT3ZlcnJpZGUgfHwgZ2V0V2Vla1JhbmdlKHN0YXRlLm1lZXRpbmdEYXRlLCAtMSk7CiAgICB2YXIgdGhpc1JhbmdlID0gc3RhdGUudGhpc1JhbmdlT3ZlcnJpZGUgfHwgZ2V0V2Vla1JhbmdlKHN0YXRlLm1lZXRpbmdEYXRlLCAwKTsKICAgIGlmIChzdGF0ZS5tZW1iZXJzLmxlbmd0aCA9PT0gMCl7CiAgICAgIHdyYXAuaW5uZXJIVE1MID0gJzxkaXYgY2xhc3M9IndyYS1lbXB0eSI+7JWE7KeBIOy3qO2VqeuQnCDsl4XrrLTqsIAg7JeG7Ja07JqULjxicj4i7J247JuQKyLrpbwg64iE66W06rGw64KYLCDslYTrnpgg66eB7YGsIOu2meyXrOuEo+q4sOuhnCDssYTsm4zrs7TshLjsmpQuPC9kaXY+JzsKICAgICAgcmV0dXJuOwogICAgfQogICAgdmFyIHRhYmxlV3JhcCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2RpdicpOwogICAgdmFyIGZtdENsYXNzID0gKHN0YXRlLnZpZXdGb3JtYXQgPT09ICdtaXhlZCcpID8gJyB3cmEtZm10LW1peGVkJyA6ICcnOwogICAgdmFyIHRoZW1lQ2xhc3MgPSAoc3RhdGUuY29sb3JUaGVtZSAmJiBzdGF0ZS5jb2xvclRoZW1lICE9PSAnbm9uZScpID8gJyB3cmEtdGhlbWUtJyArIHN0YXRlLmNvbG9yVGhlbWUgOiAnJzsKICAgIHRhYmxlV3JhcC5jbGFzc05hbWUgPSAnd3JhLXRhYmxld3JhcCcgKyBmbXRDbGFzcyArIHRoZW1lQ2xhc3M7CiAgICB2YXIgcm93c0h0bWwgPSAnJzsKICAgIHN0YXRlLm1lbWJlcnMuZm9yRWFjaChmdW5jdGlvbihtLCBpZHgpewogICAgICB2YXIgYXdheUljb24gPSBtLmF3YXkgPyAnPHNwYW4gY2xhc3M9IndyYS1hd2F5LWljb24iIHRpdGxlPSLrtoDsnqw6ICcgKyBlc2NhcGVIdG1sKG0uYXdheSkgKyAnIj7wn4+W77iPPC9zcGFuPicgOiAnJzsKICAgICAgdmFyIGF3YXlUYWcgPSBtLmF3YXkgPyAnPGRpdiBjbGFzcz0id3JhLWF3YXktdGFnIj7wn4+W77iPICcgKyBlc2NhcGVIdG1sKG0uYXdheSkgKyAnPC9kaXY+JyA6ICcnOwogICAgICByb3dzSHRtbCArPQogICAgICAgICc8dHIgZGF0YS1pZHg9IicgKyBpZHggKyAnIiBjbGFzcz0id3JhLXJvdy1tYWluIj4nICsKICAgICAgICAgICc8dGQgY2xhc3M9IndyYS1kcmFnLWNlbGwgd3JhLW5vcHJpbnQiPjxzcGFuIGNsYXNzPSJ3cmEtZHJhZyI+4qC/PC9zcGFuPjxzcGFuIGNsYXNzPSJ3cmEtbnVtIj4nICsgKGlkeCsxKSArICc8L3NwYW4+PC90ZD4nICsKICAgICAgICAgICc8dGQgY2xhc3M9IndyYS1jb2wtbmFtZXdyYXAiPicgKwogICAgICAgICAgICAnPGRpdiBjbGFzcz0id3JhLXZlcnQtbmFtZSIgY29udGVudGVkaXRhYmxlPSJ0cnVlIiBkYXRhLWZpZWxkPSJuYW1lIiBkYXRhLWlkeD0iJyArIGlkeCArICciIGRhdGEtcGg9IuydtOumhCI+JyArIGF3YXlJY29uICsgZXNjYXBlSHRtbChtLm5hbWUgfHwgJycpICsgJzwvZGl2PicgKwogICAgICAgICAgICAnPGRpdiBjbGFzcz0id3JhLXZlcnQtcm9sZSIgY29udGVudGVkaXRhYmxlPSJ0cnVlIiBkYXRhLWZpZWxkPSJyb2xlIiBkYXRhLWlkeD0iJyArIGlkeCArICciIGRhdGEtcGg9IuuLtOuLuSI+JyArIGVzY2FwZUh0bWwobS5yb2xlIHx8ICcnKSArICc8L2Rpdj4nICsKICAgICAgICAgICc8L3RkPicgKwogICAgICAgICAgJzx0ZCBjbGFzcz0id3JhLWNvbC1sYXN0IiBjb250ZW50ZWRpdGFibGU9InRydWUiIGRhdGEtZmllbGQ9Imxhc3RXZWVrIiBkYXRhLWlkeD0iJyArIGlkeCArICciIGRhdGEtcGg9IuyngOuCnOyjvCDsl4XrrLQiPicgKyBlc2NhcGVIdG1sKG0ubGFzdFdlZWsgfHwgJycpICsgJzwvdGQ+JyArCiAgICAgICAgICAnPHRkIGNsYXNzPSJ3cmEtY29sLXRoaXMiPjxkaXYgY29udGVudGVkaXRhYmxlPSJ0cnVlIiBkYXRhLWZpZWxkPSJ0aGlzV2VlayIgZGF0YS1pZHg9IicgKyBpZHggKyAnIiBkYXRhLXBoPSLsnbTrsojso7wg7JeF66y0Ij4nICsgZXNjYXBlSHRtbChtLnRoaXNXZWVrIHx8ICcnKSArICc8L2Rpdj4nICsgYXdheVRhZyArICc8L3RkPicgKwogICAgICAgICc8L3RyPicgKwogICAgICAgICc8dHIgZGF0YS1pZHg9IicgKyBpZHggKyAnIiBjbGFzcz0id3JhLXJvdy1ub3RlIj4nICsKICAgICAgICAgICc8dGQgY2xhc3M9IndyYS1jb2wtbm90ZSIgY29sc3Bhbj0iNCI+JyArCiAgICAgICAgICAgICc8ZGl2IGNsYXNzPSJ3cmEtbm90ZS1mbGV4Ij4nICsKICAgICAgICAgICAgICAnPHNwYW4gY2xhc3M9IndyYS1ub3RlLWlubGluZS1sYWJlbCI+67mE6rOgPC9zcGFuPicgKwogICAgICAgICAgICAgICc8ZGl2IGNsYXNzPSJ3cmEtbm90ZS1jb250ZW50IiBjb250ZW50ZWRpdGFibGU9InRydWUiIGRhdGEtZmllbGQ9Im5vdGUiIGRhdGEtaWR4PSInICsgaWR4ICsgJyIgZGF0YS1waD0i7ZqM7J2YIOykkSDsvZTrqZjtirjrpbwg7KCB7Ja07KO87IS47JqUIj4nICsgZXNjYXBlSHRtbChtLm5vdGUgfHwgJycpICsgJzwvZGl2PicgKwogICAgICAgICAgICAgICc8c3BhbiBjbGFzcz0id3JhLW5vdGUtYnRucyB3cmEtbm9wcmludCI+JyArCiAgICAgICAgICAgICAgICAnPGJ1dHRvbiBkYXRhLWFjdD0iZXhwYW5kIiBkYXRhLWlkeD0iJyArIGlkeCArICciIHRpdGxlPSLtmZXrjIDrs7TquLAiPuKkojwvYnV0dG9uPicgKwogICAgICAgICAgICAgICAgJzxidXR0b24gZGF0YS1hY3Q9ImRlbCIgZGF0YS1pZHg9IicgKyBpZHggKyAnIiBjbGFzcz0id3JhLXgtYnRuIiB0aXRsZT0i7IKt7KCcIj7DlzwvYnV0dG9uPicgKwogICAgICAgICAgICAgICc8L3NwYW4+JyArCiAgICAgICAgICAgICc8L2Rpdj4nICsKICAgICAgICAgICc8L3RkPicgKwogICAgICAgICc8L3RyPic7CiAgICB9KTsKICAgIHRhYmxlV3JhcC5pbm5lckhUTUwgPQogICAgICAnPHRhYmxlIGNsYXNzPSJ3cmEtdGFibGUiPicgKwogICAgICAgICc8Y29sZ3JvdXA+JyArCiAgICAgICAgICAnPGNvbCBjbGFzcz0id3JhLWMtaGFuZGxlIHdyYS1ub3ByaW50Ij48Y29sIGNsYXNzPSJ3cmEtYy1uYW1lIj4nICsKICAgICAgICAgICc8Y29sIGNsYXNzPSJ3cmEtYy1sYXN0Ij48Y29sIGNsYXNzPSJ3cmEtYy10aGlzIj4nICsKICAgICAgICAnPC9jb2xncm91cD4nICsKICAgICAgICAnPHRoZWFkPjx0cj4nICsKICAgICAgICAgICc8dGggY2xhc3M9IndyYS1ub3ByaW50Ij48L3RoPjx0aD5OPC90aD4nICsKICAgICAgICAgICc8dGg+7KeA64Kc7KO8IOyXheustDxzcGFuIGNsYXNzPSJ3cmEtdGgtcmFuZ2UiIGNvbnRlbnRlZGl0YWJsZT0idHJ1ZSIgaWQ9IndyYS10aC1sYXN0LXJhbmdlIj4oJyArIGxhc3RSYW5nZSArICcpPC9zcGFuPjwvdGg+JyArCiAgICAgICAgICAnPHRoPuydtOuyiOyjvCDsl4XrrLQ8c3BhbiBjbGFzcz0id3JhLXRoLXJhbmdlIiBjb250ZW50ZWRpdGFibGU9InRydWUiIGlkPSJ3cmEtdGgtdGhpcy1yYW5nZSI+KCcgKyB0aGlzUmFuZ2UgKyAnKTwvc3Bhbj48L3RoPicgKwogICAgICAgICc8L3RyPjwvdGhlYWQ+JyArCiAgICAgICAgJzx0Ym9keSBpZD0id3JhLXRib2R5Ij4nICsgcm93c0h0bWwgKyAnPC90Ym9keT4nICsKICAgICAgJzwvdGFibGU+JzsKICAgIHdyYXAuYXBwZW5kQ2hpbGQodGFibGVXcmFwKTsKCiAgICB2YXIgY3RybEJ1dHRvbnMgPSB3cmFwLnF1ZXJ5U2VsZWN0b3JBbGwoJ1tkYXRhLWFjdF0nKTsKICAgIGZvciAodmFyIGk9MDtpPGN0cmxCdXR0b25zLmxlbmd0aDtpKyspewogICAgICAoZnVuY3Rpb24oYnRuKXsKICAgICAgICBiaW5kVGFwKGJ0biwgZnVuY3Rpb24oKXsKICAgICAgICAgIHZhciBhY3QgPSBidG4uZ2V0QXR0cmlidXRlKCdkYXRhLWFjdCcpOwogICAgICAgICAgdmFyIGlkeCA9IHBhcnNlSW50KGJ0bi5nZXRBdHRyaWJ1dGUoJ2RhdGEtaWR4JyksIDEwKTsKICAgICAgICAgIGlmIChhY3QgPT09ICdkZWwnKXsKICAgICAgICAgICAgcHVzaFVuZG8oKTsKICAgICAgICAgICAgc3RhdGUubWVtYmVycy5zcGxpY2UoaWR4LDEpOwogICAgICAgICAgICByZW5kZXJNZW1iZXJMaXN0KCk7CiAgICAgICAgICAgIHNhdmVOb3coKTsKICAgICAgICAgIH0gZWxzZSBpZiAoYWN0ID09PSAnZXhwYW5kJyl7CiAgICAgICAgICAgIG9wZW5FeHBhbmQoaWR4KTsKICAgICAgICAgIH0KICAgICAgICB9KTsKICAgICAgfSkoY3RybEJ1dHRvbnNbaV0pOwogICAgfQoKICAgIHZhciBlZGl0YWJsZUNlbGxzID0gd3JhcC5xdWVyeVNlbGVjdG9yQWxsKCdbY29udGVudGVkaXRhYmxlPSJ0cnVlIl0nKTsKICAgIGZvciAodmFyIGo9MDtqPGVkaXRhYmxlQ2VsbHMubGVuZ3RoO2orKyl7CiAgICAgIGVkaXRhYmxlQ2VsbHNbal0uYWRkRXZlbnRMaXN0ZW5lcignYmx1cicsIGZ1bmN0aW9uKCl7CiAgICAgICAgdmFyIGZpZWxkID0gdGhpcy5nZXRBdHRyaWJ1dGUoJ2RhdGEtZmllbGQnKTsKICAgICAgICBpZiAoIWZpZWxkKSByZXR1cm47CiAgICAgICAgdmFyIGlkeCA9IHBhcnNlSW50KHRoaXMuZ2V0QXR0cmlidXRlKCdkYXRhLWlkeCcpLCAxMCk7CiAgICAgICAgdmFyIHZhbCA9IHRoaXMuaW5uZXJUZXh0LnJlcGxhY2UoL1x1MDBBMC9nLCcgJykucmVwbGFjZSgvXG4rJC8sJycpLnRyaW0oKTsKICAgICAgICBpZiAoKHN0YXRlLm1lbWJlcnNbaWR4XVtmaWVsZF0gfHwgJycpICE9PSB2YWwpewogICAgICAgICAgcHVzaFVuZG8oKTsKICAgICAgICAgIHN0YXRlLm1lbWJlcnNbaWR4XVtmaWVsZF0gPSB2YWw7CiAgICAgICAgICBzYXZlTm93KCk7CiAgICAgICAgfQogICAgICB9LCBmYWxzZSk7CiAgICAgIGVkaXRhYmxlQ2VsbHNbal0uYWRkRXZlbnRMaXN0ZW5lcigna2V5ZG93bicsIGZ1bmN0aW9uKGUpewogICAgICAgIGlmIChlLmtleSA9PT0gJ0VudGVyJyAmJiAodGhpcy5nZXRBdHRyaWJ1dGUoJ2RhdGEtZmllbGQnKSA9PT0gJ25hbWUnIHx8IHRoaXMuZ2V0QXR0cmlidXRlKCdkYXRhLWZpZWxkJykgPT09ICdyb2xlJykpewogICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpOwogICAgICAgICAgdGhpcy5ibHVyKCk7CiAgICAgICAgfQogICAgICB9LCBmYWxzZSk7CiAgICB9CgogICAgdmFyIHRoTGFzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtdGgtbGFzdC1yYW5nZScpOwogICAgdmFyIHRoVGhpcyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtdGgtdGhpcy1yYW5nZScpOwogICAgaWYgKHRoTGFzdCkgdGhMYXN0LmFkZEV2ZW50TGlzdGVuZXIoJ2JsdXInLCBmdW5jdGlvbigpewogICAgICB2YXIgdmFsID0gdGhpcy5pbm5lclRleHQudHJpbSgpOwogICAgICBpZiAodmFsICYmIHZhbCAhPT0gc3RhdGUubGFzdFJhbmdlT3ZlcnJpZGUpeyBzdGF0ZS5sYXN0UmFuZ2VPdmVycmlkZSA9IHZhbDsgc2F2ZU5vdygpOyB9CiAgICB9LCBmYWxzZSk7CiAgICBpZiAodGhUaGlzKSB0aFRoaXMuYWRkRXZlbnRMaXN0ZW5lcignYmx1cicsIGZ1bmN0aW9uKCl7CiAgICAgIHZhciB2YWwgPSB0aGlzLmlubmVyVGV4dC50cmltKCk7CiAgICAgIGlmICh2YWwgJiYgdmFsICE9PSBzdGF0ZS50aGlzUmFuZ2VPdmVycmlkZSl7IHN0YXRlLnRoaXNSYW5nZU92ZXJyaWRlID0gdmFsOyBzYXZlTm93KCk7IH0KICAgIH0sIGZhbHNlKTsKCiAgICB2YXIgdGJvZHkgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXRib2R5Jyk7CiAgICBpZiAoc29ydGFibGVJbnN0YW5jZSkgeyBzb3J0YWJsZUluc3RhbmNlLmRlc3Ryb3koKTsgc29ydGFibGVJbnN0YW5jZSA9IG51bGw7IH0KICAgIGlmICh0eXBlb2YgU29ydGFibGUgIT09ICd1bmRlZmluZWQnKXsKICAgICAgc29ydGFibGVJbnN0YW5jZSA9IG5ldyBTb3J0YWJsZSh0Ym9keSwgewogICAgICAgIGhhbmRsZTogJy53cmEtZHJhZycsCiAgICAgICAgZHJhZ2dhYmxlOiAnLndyYS1yb3ctbWFpbicsCiAgICAgICAgYW5pbWF0aW9uOiAxNTAsCiAgICAgICAgZ2hvc3RDbGFzczogJ3dyYS1zb3J0YWJsZS1naG9zdCcsCiAgICAgICAgZm9yY2VGYWxsYmFjazogdHJ1ZSwKICAgICAgICBvblN0YXJ0OiBmdW5jdGlvbigpeyBwdXNoVW5kbygpOyB9LAogICAgICAgIG9uRW5kOiBmdW5jdGlvbigpewogICAgICAgICAgdmFyIHRycyA9IHRib2R5LnF1ZXJ5U2VsZWN0b3JBbGwoJ3RyLndyYS1yb3ctbWFpbicpOwogICAgICAgICAgdmFyIG5ld09yZGVyID0gW107CiAgICAgICAgICBmb3IgKHZhciBrPTA7azx0cnMubGVuZ3RoO2srKyl7CiAgICAgICAgICAgIHZhciBvbGRJZHggPSBwYXJzZUludCh0cnNba10uZ2V0QXR0cmlidXRlKCdkYXRhLWlkeCcpLCAxMCk7CiAgICAgICAgICAgIG5ld09yZGVyLnB1c2goc3RhdGUubWVtYmVyc1tvbGRJZHhdKTsKICAgICAgICAgIH0KICAgICAgICAgIHN0YXRlLm1lbWJlcnMgPSBuZXdPcmRlcjsKICAgICAgICAgIHJlbmRlck1lbWJlckxpc3QoKTsKICAgICAgICAgIHNhdmVOb3coKTsKICAgICAgICB9CiAgICAgIH0pOwogICAgfQogIH0KCiAgZnVuY3Rpb24gb3BlbkV4cGFuZChpZHgpewogICAgZXhwYW5kSW5kZXggPSBpZHg7CiAgICByZW5kZXJFeHBhbmQoKTsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZXhwYW5kLWJnJykuY2xhc3NOYW1lID0gJ3dyYS1tb2RhbC1iZyB3cmEtc2hvdyc7CiAgfQogIGZ1bmN0aW9uIHJlbmRlckV4cGFuZCgpewogICAgdmFyIG0gPSBzdGF0ZS5tZW1iZXJzW2V4cGFuZEluZGV4XTsKICAgIGlmICghbSkgcmV0dXJuOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1leHBhbmQtY29udGVudCcpLmlubmVySFRNTCA9CiAgICAgICc8ZGl2IGNsYXNzPSJ3cmEtbWVtYmVyLW5hbWUiPicgKyBlc2NhcGVIdG1sKG0ubmFtZXx8JycpICsgKG0ucm9sZSA/ICcgPHNwYW4gc3R5bGU9ImZvbnQtc2l6ZToxNHB4O2NvbG9yOiM4ODg7Zm9udC13ZWlnaHQ6NDAwOyI+KCcgKyBlc2NhcGVIdG1sKG0ucm9sZSkgKyAnKTwvc3Bhbj4nIDogJycpICsgJzwvZGl2PicgKwogICAgICAobS5hd2F5ID8gJzxkaXYgc3R5bGU9Im1hcmdpbi10b3A6OHB4O2ZvbnQtc2l6ZToxNHB4O2ZvbnQtd2VpZ2h0OjcwMDtjb2xvcjojYzk2NjBhOyI+8J+Plu+4jyAnICsgZXNjYXBlSHRtbChtLmF3YXkpICsgJzwvZGl2PicgOiAnJykgKwogICAgICAnPGRpdiBjbGFzcz0id3JhLW1lbWJlci1ib2R5Ij4nICsKICAgICAgICBmbXRGaWVsZCgn7KeA64Kc7KO8IOyXheustCcsIG0ubGFzdFdlZWspICsKICAgICAgICBmbXRGaWVsZCgn7J2067KI7KO8IOyXheustCcsIG0udGhpc1dlZWspICsKICAgICAgICBmbXRGaWVsZCgn67mE6rOgJywgbS5ub3RlKSArCiAgICAgICc8L2Rpdj4nOwogIH0KCiAgLy8gLS0tLS0tLS0tLSDsoITssrTtmZTrqbQgLS0tLS0tLS0tLQogIGZ1bmN0aW9uIGJ1aWxkRnNTdW1tYXJpZXMoKXsKICAgIHZhciBhd2F5TGlzdCA9IFtdOwogICAgc3RhdGUubWVtYmVycy5mb3JFYWNoKGZ1bmN0aW9uKG0peyBpZiAobS5hd2F5KSBhd2F5TGlzdC5wdXNoKG0pOyB9KTsKICAgIHZhciBodG1sID0gJyc7CiAgICBpZiAoYXdheUxpc3QubGVuZ3RoID4gMCl7CiAgICAgIGh0bWwgKz0gJzxkaXYgY2xhc3M9IndyYS1mcy1zdW1tYXJ5Ij48ZGl2IGNsYXNzPSJ3cmEtZnMtc3VtbWFyeS10aXRsZSI+8J+Plu+4jyDsnbTrsojso7wg67aA7J6sIOyViOuCtDwvZGl2PjxkaXYgY2xhc3M9IndyYS1mcy1zdW1tYXJ5LWNvbXBhY3QiPic7CiAgICAgIGh0bWwgKz0gYXdheUxpc3QubWFwKGZ1bmN0aW9uKG0pewogICAgICAgIHJldHVybiAnPGI+JyArIGVzY2FwZUh0bWwobS5uYW1lfHwnJykgKyAnPC9iPignICsgZXNjYXBlSHRtbChtLmF3YXkpICsgJyknOwogICAgICB9KS5qb2luKCcgwrcgJyk7CiAgICAgIGh0bWwgKz0gJzwvZGl2PjwvZGl2Pic7CiAgICB9CiAgICB2YXIgZXhlY0ZpbHRlcmVkID0gKHN0YXRlLmV4ZWNMaXN0IHx8IFtdKS5maWx0ZXIoZnVuY3Rpb24oZSl7IHJldHVybiAoZS5uYW1lfHwnJykudHJpbSgpOyB9KTsKICAgIGlmIChleGVjRmlsdGVyZWQubGVuZ3RoID4gMCl7CiAgICAgIGh0bWwgKz0gJzxkaXYgY2xhc3M9IndyYS1mcy1zdW1tYXJ5Ij48ZGl2IGNsYXNzPSJ3cmEtZnMtc3VtbWFyeS10aXRsZSI+8J+RlCDsnoTsm5DsnbzsoJU8L2Rpdj4nOwogICAgICBleGVjRmlsdGVyZWQuZm9yRWFjaChmdW5jdGlvbihlKXsKICAgICAgICBodG1sICs9ICc8ZGl2IGNsYXNzPSJ3cmEtZnMtc3VtbWFyeS1pdGVtIj48Yj4nICsgZXNjYXBlSHRtbChlLm5hbWUpICsgJzwvYj4nICsgKGUuc2NoZWR1bGUgPyAnIOKAlCAnICsgZXNjYXBlSHRtbChlLnNjaGVkdWxlKSA6ICcnKSArICc8L2Rpdj4nOwogICAgICB9KTsKICAgICAgaHRtbCArPSAnPC9kaXY+JzsKICAgIH0KICAgIGlmICgoc3RhdGUubW9udGhHb2FsICYmIHN0YXRlLm1vbnRoR29hbC50cmltKCkpIHx8IChzdGF0ZS55ZWFyR29hbCAmJiBzdGF0ZS55ZWFyR29hbC50cmltKCkpKXsKICAgICAgdmFyIGQgPSB0b0RhdGUoc3RhdGUubWVldGluZ0RhdGUpOwogICAgICBodG1sICs9ICc8ZGl2IGNsYXNzPSJ3cmEtZnMtc3VtbWFyeSI+PGRpdiBjbGFzcz0id3JhLWZzLXN1bW1hcnktdGl0bGUiPvCfjq8g66qp7ZGcPC9kaXY+PGRpdiBjbGFzcz0id3JhLWZzLXN1bW1hcnktY29tcGFjdCI+JzsKICAgICAgdmFyIGdvYWxQYXJ0cyA9IFtdOwogICAgICBpZiAoc3RhdGUubW9udGhHb2FsICYmIHN0YXRlLm1vbnRoR29hbC50cmltKCkpIGdvYWxQYXJ0cy5wdXNoKCc8Yj4nICsgKGQuZ2V0TW9udGgoKSsxKSArICfsm5TrqqntkZw8L2I+ICcgKyBlc2NhcGVIdG1sKHN0YXRlLm1vbnRoR29hbCkpOwogICAgICBpZiAoc3RhdGUueWVhckdvYWwgJiYgc3RhdGUueWVhckdvYWwudHJpbSgpKSBnb2FsUGFydHMucHVzaCgnPGI+JyArIGQuZ2V0RnVsbFllYXIoKSArICfrhYTrqqntkZw8L2I+ICcgKyBlc2NhcGVIdG1sKHN0YXRlLnllYXJHb2FsKSk7CiAgICAgIGh0bWwgKz0gZ29hbFBhcnRzLmpvaW4oJyDCtyAnKSArICc8L2Rpdj48L2Rpdj4nOwogICAgfQogICAgcmV0dXJuIGh0bWw7CiAgfQoKICBmdW5jdGlvbiBidWlsZEFsbFZpZXdIdG1sKCl7CiAgICB2YXIgbGFzdFJhbmdlID0gZ2V0V2Vla1JhbmdlKHN0YXRlLm1lZXRpbmdEYXRlLCAtMSk7CiAgICB2YXIgdGhpc1JhbmdlID0gZ2V0V2Vla1JhbmdlKHN0YXRlLm1lZXRpbmdEYXRlLCAwKTsKICAgIHZhciByb3dzID0gJyc7CiAgICBzdGF0ZS5tZW1iZXJzLmZvckVhY2goZnVuY3Rpb24obSl7CiAgICAgIHJvd3MgKz0gJzx0cj48dGQgY2xhc3M9IndyYS1mcy1uYW1lIj4nICsgZXNjYXBlSHRtbChtLm5hbWV8fCcnKSArIChtLnJvbGUgPyAnPHNwYW4gY2xhc3M9IndyYS1mcy1yb2xlIj4nICsgZXNjYXBlSHRtbChtLnJvbGUpICsgJzwvc3Bhbj4nIDogJycpICsgJzwvdGQ+JyArCiAgICAgICAgJzx0ZCBjbGFzcz0id3JhLWZzLWxhc3QiPicgKyBlc2NhcGVIdG1sKG0ubGFzdFdlZWt8fCctJykgKyAnPC90ZD4nICsKICAgICAgICAnPHRkIGNsYXNzPSJ3cmEtZnMtdGhpcyI+JyArIGVzY2FwZUh0bWwobS50aGlzV2Vla3x8Jy0nKSArICc8L3RkPjwvdHI+JyArCiAgICAgICAgJzx0cj48dGQgY29sc3Bhbj0iMyIgY2xhc3M9IndyYS1mcy1ub3RlIj48c3BhbiBjbGFzcz0id3JhLWZzLW5vdGUtbGFiZWwiPuu5hOqzoDwvc3Bhbj4gJyArIGVzY2FwZUh0bWwobS5ub3RlfHwnLScpICsgJzwvdGQ+PC90cj4nOwogICAgfSk7CiAgICB2YXIgc3VtbWFyeUh0bWwgPSBidWlsZEZzU3VtbWFyaWVzKCk7CiAgICB2YXIgY29tbW9uSHRtbCA9ICcnOwogICAgaWYgKHN0YXRlLmNvbW1vbk5vdGUgJiYgc3RhdGUuY29tbW9uTm90ZS50cmltKCkpewogICAgICBjb21tb25IdG1sID0gJzxkaXYgY2xhc3M9IndyYS1mcy1jb21tb24iPjxiPvCfk50g6rO17Ya1IOqzvOygnCAvIOyngOyLnOyCrO2VrTwvYj48YnI+JyArIGVzY2FwZUh0bWwoc3RhdGUuY29tbW9uTm90ZSkgKyAnPC9kaXY+JzsKICAgIH0KICAgIHJldHVybiAnPHRhYmxlPjxjb2xncm91cD48Y29sIGNsYXNzPSJ3cmEtZnMtYy1uYW1lIj48Y29sIGNsYXNzPSJ3cmEtZnMtYy1sYXN0Ij48Y29sIGNsYXNzPSJ3cmEtZnMtYy10aGlzIj48L2NvbGdyb3VwPicgKwogICAgICAnPHRoZWFkPjx0cj48dGg+TjwvdGg+PHRoPuyngOuCnOyjvCDsl4XrrLQgKCcgKyBsYXN0UmFuZ2UgKyAnKTwvdGg+PHRoPuydtOuyiOyjvCDsl4XrrLQgKCcgKyB0aGlzUmFuZ2UgKyAnKTwvdGg+PC90cj48L3RoZWFkPicgKwogICAgICAnPHRib2R5PicgKyByb3dzICsgJzwvdGJvZHk+PC90YWJsZT4nICsgc3VtbWFyeUh0bWwgKyBjb21tb25IdG1sOwogIH0KCiAgZnVuY3Rpb24gb3BlbkZ1bGxzY3JlZW4oKXsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZnMtdGl0bGUnKS50ZXh0Q29udGVudCA9IGdldFRpdGxlUHJlZml4KHN0YXRlLm1lZXRpbmdEYXRlKTsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZnMtdGFibGUnKS5pbm5lckhUTUwgPSBidWlsZEFsbFZpZXdIdG1sKCk7CiAgICB2YXIgYm94ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1mcy1tb2RhbC1ib3gnKTsKICAgIGlmIChib3gpIGJveC5zdHlsZS5iYWNrZ3JvdW5kID0gc3RhdGUuZnNCYWNrZ3JvdW5kIHx8ICcjZmZmZmZmJzsKCiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWZzLWFsbHZpZXcnKS5zdHlsZS5kaXNwbGF5ID0gJ2Jsb2NrJzsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZnMtcGVyc29udmlldycpLnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWZzLXZpZXctYWxsJykuY2xhc3NOYW1lID0gJ3dyYS1mcy10b2dnbGUtYnRuIHdyYS1hY3RpdmUnOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1mcy12aWV3LXBlcnNvbicpLmNsYXNzTmFtZSA9ICd3cmEtZnMtdG9nZ2xlLWJ0bic7CiAgICBmc1BlcnNvbklkeCA9IDA7CgogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1mcy1iZycpLmNsYXNzTmFtZSA9ICd3cmEtbW9kYWwtYmcgd3JhLXNob3cnOwogIH0KCiAgZnVuY3Rpb24gcmVuZGVyRnNQZXJzb24oKXsKICAgIHZhciBjb250ZW50ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1mcy1wZXJzb24tY29udGVudCcpOwogICAgdmFyIG0gPSBzdGF0ZS5tZW1iZXJzW2ZzUGVyc29uSWR4XTsKICAgIGlmICghbSl7IGNvbnRlbnQuaW5uZXJIVE1MID0gJzxkaXYgY2xhc3M9IndyYS1lbXB0eSI+7ZGc7Iuc7ZWgIOyduOybkOydtCDsl4bslrTsmpQ8L2Rpdj4nOyByZXR1cm47IH0KICAgIGNvbnRlbnQuaW5uZXJIVE1MID0KICAgICAgJzxkaXYgY2xhc3M9IndyYS1tZW1iZXItbmFtZSI+JyArIGVzY2FwZUh0bWwobS5uYW1lfHwnJykgKyAobS5yb2xlID8gJyA8c3BhbiBzdHlsZT0iZm9udC1zaXplOjE2cHg7Y29sb3I6Izg4ODtmb250LXdlaWdodDo0MDA7Ij4oJyArIGVzY2FwZUh0bWwobS5yb2xlKSArICcpPC9zcGFuPicgOiAnJykgKyAnPC9kaXY+JyArCiAgICAgIChtLmF3YXkgPyAnPGRpdiBzdHlsZT0ibWFyZ2luLXRvcDo4cHg7Zm9udC1zaXplOjE2cHg7Zm9udC13ZWlnaHQ6NzAwO2NvbG9yOiNjOTY2MGE7Ij7wn4+W77iPICcgKyBlc2NhcGVIdG1sKG0uYXdheSkgKyAnPC9kaXY+JyA6ICcnKSArCiAgICAgICc8ZGl2IGNsYXNzPSJ3cmEtbWVtYmVyLWJvZHkiPicgKwogICAgICAgIGZtdEZpZWxkKCfsp4Drgpzso7wg7JeF66y0JywgbS5sYXN0V2VlaykgKwogICAgICAgIGZtdEZpZWxkKCfsnbTrsojso7wg7JeF66y0JywgbS50aGlzV2VlaykgKwogICAgICAgIGZtdEZpZWxkKCfruYTqs6AnLCBtLm5vdGUpICsKICAgICAgJzwvZGl2Pic7CiAgfQoKICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZnMtdmlldy1hbGwnKSwgZnVuY3Rpb24oKXsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZnMtYWxsdmlldycpLnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1mcy1wZXJzb252aWV3Jykuc3R5bGUuZGlzcGxheSA9ICdub25lJzsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZnMtdmlldy1hbGwnKS5jbGFzc05hbWUgPSAnd3JhLWZzLXRvZ2dsZS1idG4gd3JhLWFjdGl2ZSc7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWZzLXZpZXctcGVyc29uJykuY2xhc3NOYW1lID0gJ3dyYS1mcy10b2dnbGUtYnRuJzsKICB9KTsKICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZnMtdmlldy1wZXJzb24nKSwgZnVuY3Rpb24oKXsKICAgIGlmIChzdGF0ZS5tZW1iZXJzLmxlbmd0aCA9PT0gMCl7IHNob3dUb2FzdCgn7Leo7ZWp65CcIOyXheustOqwgCDsl4bslrTsmpQnKTsgcmV0dXJuOyB9CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWZzLWFsbHZpZXcnKS5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1mcy1wZXJzb252aWV3Jykuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWZzLXZpZXctcGVyc29uJykuY2xhc3NOYW1lID0gJ3dyYS1mcy10b2dnbGUtYnRuIHdyYS1hY3RpdmUnOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1mcy12aWV3LWFsbCcpLmNsYXNzTmFtZSA9ICd3cmEtZnMtdG9nZ2xlLWJ0bic7CiAgICBmc1BlcnNvbklkeCA9IDA7CiAgICByZW5kZXJGc1BlcnNvbigpOwogIH0pOwogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1mcy1wZXJzb24tcHJldicpLCBmdW5jdGlvbigpewogICAgaWYgKHN0YXRlLm1lbWJlcnMubGVuZ3RoID09PSAwKSByZXR1cm47CiAgICBmc1BlcnNvbklkeCA9IChmc1BlcnNvbklkeCAtIDEgKyBzdGF0ZS5tZW1iZXJzLmxlbmd0aCkgJSBzdGF0ZS5tZW1iZXJzLmxlbmd0aDsKICAgIHJlbmRlckZzUGVyc29uKCk7CiAgfSk7CiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWZzLXBlcnNvbi1uZXh0JyksIGZ1bmN0aW9uKCl7CiAgICBpZiAoc3RhdGUubWVtYmVycy5sZW5ndGggPT09IDApIHJldHVybjsKICAgIGZzUGVyc29uSWR4ID0gKGZzUGVyc29uSWR4ICsgMSkgJSBzdGF0ZS5tZW1iZXJzLmxlbmd0aDsKICAgIHJlbmRlckZzUGVyc29uKCk7CiAgfSk7CgogIC8vIC0tLS0tLS0tLS0g64K0IO2VoCDsnbwoVGFzaykg6rSA66asIC0tLS0tLS0tLS0KICBmdW5jdGlvbiBsb2FkTXlUYXNrcygpewogICAgdHJ5IHsKICAgICAgdmFyIHNhdmVkID0gbG9jYWxTdG9yYWdlLmdldEl0ZW0oTVlUQVNLU19LRVkpOwogICAgICBpZiAoc2F2ZWQpewogICAgICAgIHZhciBwYXJzZWQgPSBKU09OLnBhcnNlKHNhdmVkKTsKICAgICAgICBpZiAocGFyc2VkKSBteVRhc2tzID0gcGFyc2VkOwogICAgICB9CiAgICB9IGNhdGNoKGUpe30KICAgIGlmICghbXlUYXNrcy5sYXN0V2VlaykgbXlUYXNrcy5sYXN0V2VlayA9IFtdOwogICAgaWYgKCFteVRhc2tzLnRoaXNXZWVrKSBteVRhc2tzLnRoaXNXZWVrID0gW107CiAgICB2YXIgY3VyV2Vla0tleSA9IGdldElzb1dlZWtLZXkodG9EYXRlKHN0YXRlLm1lZXRpbmdEYXRlKSk7CiAgICBpZiAobXlUYXNrcy5zYXZlZFdlZWsgJiYgbXlUYXNrcy5zYXZlZFdlZWsgIT09IGN1cldlZWtLZXkpewogICAgICBteVRhc2tzLmxhc3RXZWVrID0gbXlUYXNrcy50aGlzV2Vlay5tYXAoZnVuY3Rpb24odCl7IHJldHVybiB7IGlkOiBnZW5JZCgpLCB0ZXh0OiB0LnRleHQsIGRvbmU6IHQuZG9uZSB9OyB9KTsKICAgICAgbXlUYXNrcy50aGlzV2VlayA9IFtdOwogICAgfQogICAgbXlUYXNrcy5zYXZlZFdlZWsgPSBjdXJXZWVrS2V5OwogICAgaWYgKG15VGFza3MubGFzdFdlZWsubGVuZ3RoID09PSAwKXsKICAgICAgZm9yICh2YXIgaT0wO2k8MztpKyspIG15VGFza3MubGFzdFdlZWsucHVzaCh7IGlkOiBnZW5JZCgpLCB0ZXh0OicnLCBkb25lOmZhbHNlIH0pOwogICAgfQogICAgaWYgKG15VGFza3MudGhpc1dlZWsubGVuZ3RoID09PSAwKXsKICAgICAgZm9yICh2YXIgaj0wO2o8MztqKyspIG15VGFza3MudGhpc1dlZWsucHVzaCh7IGlkOiBnZW5JZCgpLCB0ZXh0OicnLCBkb25lOmZhbHNlIH0pOwogICAgfQogICAgc2F2ZU15VGFza3MoKTsKICB9CgogIGZ1bmN0aW9uIHJlbmRlclRhc2tMaXN0KGtpbmQpewogICAgdmFyIGNvbnRhaW5lcklkID0gKGtpbmQgPT09ICdsYXN0V2VlaycpID8gJ3dyYS1teS1sYXN0LWxpc3QnIDogJ3dyYS1teS10aGlzLWxpc3QnOwogICAgdmFyIHdyYXAgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChjb250YWluZXJJZCk7CiAgICB2YXIgdGFza3MgPSBteVRhc2tzW2tpbmRdOwogICAgaWYgKCF0YXNrcyB8fCB0YXNrcy5sZW5ndGggPT09IDApewogICAgICB3cmFwLmlubmVySFRNTCA9ICc8ZGl2IGNsYXNzPSJ3cmEtdGFzay1lbXB0eSI+JyArIChraW5kID09PSAnbGFzdFdlZWsnID8gJ+u2iOufrOyYrCDsp4Drgpzso7wg7ZWt66qp7J20IOyXhuyWtOyalC4nIDogJ+yVhOyngSDrk7HroZ3tlZwg7ZWgIOydvOydtCDsl4bslrTsmpQuJykgKyAnPC9kaXY+JzsKICAgICAgcmV0dXJuOwogICAgfQogICAgdmFyIGh0bWwgPSAnJzsKICAgIHRhc2tzLmZvckVhY2goZnVuY3Rpb24odCl7CiAgICAgIGh0bWwgKz0gJzxkaXYgY2xhc3M9IndyYS10YXNrLWl0ZW0nICsgKHQuZG9uZSA/ICcgd3JhLXRhc2stZG9uZScgOiAnJykgKyAnIj4nICsKICAgICAgICAnPGlucHV0IHR5cGU9ImNoZWNrYm94IiBkYXRhLWtpbmQ9IicgKyBraW5kICsgJyIgZGF0YS1pZD0iJyArIHQuaWQgKyAnIiBkYXRhLWFjdD0idG9nZ2xlIicgKyAodC5kb25lID8gJyBjaGVja2VkJyA6ICcnKSArICc+JyArCiAgICAgICAgJzxpbnB1dCB0eXBlPSJ0ZXh0IiBkYXRhLWtpbmQ9IicgKyBraW5kICsgJyIgZGF0YS1pZD0iJyArIHQuaWQgKyAnIiBkYXRhLWFjdD0iZWRpdCIgdmFsdWU9IicgKyBlc2NhcGVIdG1sKHQudGV4dCkgKyAnIiBwbGFjZWhvbGRlcj0i7ZWgIOydvOydhCDsnoXroKXtlZjshLjsmpQiPicgKwogICAgICAgICc8YnV0dG9uIGNsYXNzPSJ3cmEtdGFzay1kZWwiIGRhdGEta2luZD0iJyArIGtpbmQgKyAnIiBkYXRhLWlkPSInICsgdC5pZCArICciIGRhdGEtYWN0PSJkZWwiPsOXPC9idXR0b24+JyArCiAgICAgICc8L2Rpdj4nOwogICAgfSk7CiAgICB3cmFwLmlubmVySFRNTCA9IGh0bWw7CgogICAgdmFyIGNoZWNrcyA9IHdyYXAucXVlcnlTZWxlY3RvckFsbCgnW2RhdGEtYWN0PSJ0b2dnbGUiXScpOwogICAgZm9yICh2YXIgaT0wO2k8Y2hlY2tzLmxlbmd0aDtpKyspewogICAgICBjaGVja3NbaV0uYWRkRXZlbnRMaXN0ZW5lcignY2hhbmdlJywgZnVuY3Rpb24oKXsKICAgICAgICB2YXIgayA9IHRoaXMuZ2V0QXR0cmlidXRlKCdkYXRhLWtpbmQnKSwgaWQgPSB0aGlzLmdldEF0dHJpYnV0ZSgnZGF0YS1pZCcpOwogICAgICAgIHZhciBhcnIgPSBteVRhc2tzW2tdOwogICAgICAgIGZvciAodmFyIHg9MDt4PGFyci5sZW5ndGg7eCsrKXsgaWYgKGFyclt4XS5pZCA9PT0gaWQpeyBhcnJbeF0uZG9uZSA9IHRoaXMuY2hlY2tlZDsgYnJlYWs7IH0gfQogICAgICAgIHNhdmVNeVRhc2tzKCk7CiAgICAgICAgcmVuZGVyVGFza0xpc3Qoayk7CiAgICAgIH0sIGZhbHNlKTsKICAgIH0KICAgIHZhciB0ZXh0cyA9IHdyYXAucXVlcnlTZWxlY3RvckFsbCgnW2RhdGEtYWN0PSJlZGl0Il0nKTsKICAgIGZvciAodmFyIGo9MDtqPHRleHRzLmxlbmd0aDtqKyspewogICAgICB0ZXh0c1tqXS5hZGRFdmVudExpc3RlbmVyKCdpbnB1dCcsIGZ1bmN0aW9uKCl7CiAgICAgICAgdmFyIGsgPSB0aGlzLmdldEF0dHJpYnV0ZSgnZGF0YS1raW5kJyksIGlkID0gdGhpcy5nZXRBdHRyaWJ1dGUoJ2RhdGEtaWQnKTsKICAgICAgICB2YXIgYXJyID0gbXlUYXNrc1trXTsKICAgICAgICBmb3IgKHZhciB4PTA7eDxhcnIubGVuZ3RoO3grKyl7IGlmIChhcnJbeF0uaWQgPT09IGlkKXsgYXJyW3hdLnRleHQgPSB0aGlzLnZhbHVlOyBicmVhazsgfSB9CiAgICAgICAgc2F2ZU15VGFza3MoKTsKICAgICAgfSwgZmFsc2UpOwogICAgICB0ZXh0c1tqXS5hZGRFdmVudExpc3RlbmVyKCdrZXlkb3duJywgZnVuY3Rpb24oZSl7CiAgICAgICAgaWYgKGUua2V5ID09PSAnRW50ZXInKXsKICAgICAgICAgIGUucHJldmVudERlZmF1bHQoKTsKICAgICAgICAgIHZhciBrID0gdGhpcy5nZXRBdHRyaWJ1dGUoJ2RhdGEta2luZCcpLCBpZCA9IHRoaXMuZ2V0QXR0cmlidXRlKCdkYXRhLWlkJyk7CiAgICAgICAgICBhZGRUYXNrQWZ0ZXIoaywgaWQpOwogICAgICAgIH0KICAgICAgfSwgZmFsc2UpOwogICAgfQogICAgdmFyIGRlbHMgPSB3cmFwLnF1ZXJ5U2VsZWN0b3JBbGwoJ1tkYXRhLWFjdD0iZGVsIl0nKTsKICAgIGZvciAodmFyIGQ9MDsgZDxkZWxzLmxlbmd0aDsgZCsrKXsKICAgICAgYmluZFRhcChkZWxzW2RdLCBmdW5jdGlvbigpewogICAgICAgIHZhciBrID0gdGhpcy5nZXRBdHRyaWJ1dGUoJ2RhdGEta2luZCcpLCBpZCA9IHRoaXMuZ2V0QXR0cmlidXRlKCdkYXRhLWlkJyk7CiAgICAgICAgbXlUYXNrc1trXSA9IG15VGFza3Nba10uZmlsdGVyKGZ1bmN0aW9uKHQpeyByZXR1cm4gdC5pZCAhPT0gaWQ7IH0pOwogICAgICAgIHNhdmVNeVRhc2tzKCk7CiAgICAgICAgcmVuZGVyVGFza0xpc3Qoayk7CiAgICAgIH0uYmluZChkZWxzW2RdKSk7CiAgICB9CiAgfQoKICBmdW5jdGlvbiBmb2N1c0xhc3RFbXB0eUlucHV0KGtpbmQpewogICAgdmFyIHdyYXAgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChraW5kID09PSAnbGFzdFdlZWsnID8gJ3dyYS1teS1sYXN0LWxpc3QnIDogJ3dyYS1teS10aGlzLWxpc3QnKTsKICAgIHZhciBpbnB1dHMgPSB3cmFwLnF1ZXJ5U2VsZWN0b3JBbGwoJ2lucHV0W3R5cGU9InRleHQiXScpOwogICAgaWYgKCFpbnB1dHMubGVuZ3RoKSByZXR1cm47CiAgICB2YXIgdGFyZ2V0ID0gaW5wdXRzW2lucHV0cy5sZW5ndGgtMV07CiAgICB0YXJnZXQuZm9jdXMoKTsKICAgIHZhciBsZW4gPSB0YXJnZXQudmFsdWUubGVuZ3RoOwogICAgaWYgKHRhcmdldC5zZXRTZWxlY3Rpb25SYW5nZSkgdGFyZ2V0LnNldFNlbGVjdGlvblJhbmdlKGxlbiwgbGVuKTsKICB9CgogIGZ1bmN0aW9uIGFkZFRhc2soa2luZCl7CiAgICBteVRhc2tzW2tpbmRdLnB1c2goeyBpZDogZ2VuSWQoKSwgdGV4dDonJywgZG9uZTpmYWxzZSB9KTsKICAgIHNhdmVNeVRhc2tzKCk7CiAgICByZW5kZXJUYXNrTGlzdChraW5kKTsKICAgIGZvY3VzTGFzdEVtcHR5SW5wdXQoa2luZCk7CiAgfQogIGZ1bmN0aW9uIGFkZFRhc2tBZnRlcihraW5kLCBhZnRlcklkKXsKICAgIHZhciBhcnIgPSBteVRhc2tzW2tpbmRdOwogICAgdmFyIGlkeCA9IC0xOwogICAgZm9yICh2YXIgaT0wO2k8YXJyLmxlbmd0aDtpKyspeyBpZiAoYXJyW2ldLmlkID09PSBhZnRlcklkKXsgaWR4ID0gaTsgYnJlYWs7IH0gfQogICAgdmFyIG5ld0l0ZW0gPSB7IGlkOiBnZW5JZCgpLCB0ZXh0OicnLCBkb25lOmZhbHNlIH07CiAgICBpZiAoaWR4ID09PSAtMSkgYXJyLnB1c2gobmV3SXRlbSk7CiAgICBlbHNlIGFyci5zcGxpY2UoaWR4KzEsIDAsIG5ld0l0ZW0pOwogICAgc2F2ZU15VGFza3MoKTsKICAgIHJlbmRlclRhc2tMaXN0KGtpbmQpOwogICAgdmFyIHdyYXAgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChraW5kID09PSAnbGFzdFdlZWsnID8gJ3dyYS1teS1sYXN0LWxpc3QnIDogJ3dyYS1teS10aGlzLWxpc3QnKTsKICAgIHZhciBpbnB1dCA9IHdyYXAucXVlcnlTZWxlY3RvcignW2RhdGEtaWQ9IicgKyBuZXdJdGVtLmlkICsgJyJdW2RhdGEtYWN0PSJlZGl0Il0nKTsKICAgIGlmIChpbnB1dCl7IGlucHV0LmZvY3VzKCk7IHZhciBsZW4gPSBpbnB1dC52YWx1ZS5sZW5ndGg7IGlmIChpbnB1dC5zZXRTZWxlY3Rpb25SYW5nZSkgaW5wdXQuc2V0U2VsZWN0aW9uUmFuZ2UobGVuLCBsZW4pOyB9CiAgfQogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1sYXN0LWFkZCcpLCBmdW5jdGlvbigpeyBhZGRUYXNrKCdsYXN0V2VlaycpOyB9KTsKICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtbXktdGhpcy1hZGQnKSwgZnVuY3Rpb24oKXsgYWRkVGFzaygndGhpc1dlZWsnKTsgfSk7CgogIGZ1bmN0aW9uIHRhc2tzVG9UZXh0KHRhc2tzKXsKICAgIHJldHVybiAodGFza3MgfHwgW10pLmZpbHRlcihmdW5jdGlvbih0KXsgcmV0dXJuIHQudGV4dCAmJiB0LnRleHQudHJpbSgpOyB9KQogICAgICAubWFwKGZ1bmN0aW9uKHQpeyByZXR1cm4gKHQuZG9uZSA/ICfimJEgJyA6ICfimJAgJykgKyB0LnRleHQudHJpbSgpOyB9KS5qb2luKCdcbicpOwogIH0KCiAgZnVuY3Rpb24gYnVpbGRNeU1lbWJlcigpewogICAgdmFyIGF3YXlDaGVja2VkID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1hd2F5LWNoZWNrJykuY2hlY2tlZDsKICAgIHJldHVybiB7CiAgICAgIG5hbWU6IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtbXktbmFtZScpLnZhbHVlLnRyaW0oKSwKICAgICAgcm9sZTogZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1yb2xlJykudmFsdWUudHJpbSgpLAogICAgICBsYXN0V2VlazogdGFza3NUb1RleHQobXlUYXNrcy5sYXN0V2VlayksCiAgICAgIHRoaXNXZWVrOiB0YXNrc1RvVGV4dChteVRhc2tzLnRoaXNXZWVrKSwKICAgICAgbm90ZTogZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1ub3RlJykudmFsdWUudHJpbSgpLAogICAgICBhd2F5OiBhd2F5Q2hlY2tlZCA/IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtbXktYXdheS1ub3RlJykudmFsdWUudHJpbSgpIDogJycKICAgIH07CiAgfQoKICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW15LWF3YXktY2hlY2snKS5hZGRFdmVudExpc3RlbmVyKCdjaGFuZ2UnLCBmdW5jdGlvbigpewogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1hd2F5LW5vdGUnKS5zdHlsZS5kaXNwbGF5ID0gdGhpcy5jaGVja2VkID8gJ2Jsb2NrJyA6ICdub25lJzsKICB9LCBmYWxzZSk7CgogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1nZW5lcmF0ZScpLCBmdW5jdGlvbigpewogICAgdmFyIG0gPSBidWlsZE15TWVtYmVyKCk7CiAgICBpZiAoIW0ubmFtZSl7IHNob3dUb2FzdCgn7J2066aE7J2EIOyeheugpe2VtOyjvOyEuOyalCcpOyByZXR1cm47IH0KICAgIHZhciBjb2RlID0gY29tcHJlc3MobSk7CiAgICB2YXIgdXJsID0gbG9jYXRpb24ub3JpZ2luICsgbG9jYXRpb24ucGF0aG5hbWUgKyAnP2Q9JyArIGNvZGU7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW15LWxpbmsnKS50ZXh0Q29udGVudCA9IHVybDsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtbXktcmVzdWx0Jykuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW15LXJlc3VsdCcpLnNldEF0dHJpYnV0ZSgnZGF0YS11cmwnLCB1cmwpOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1yZXN1bHQnKS5zZXRBdHRyaWJ1dGUoJ2RhdGEtdGV4dCcsCiAgICAgICdbJyArIG0ubmFtZSArIChtLnJvbGUgPyAnLycgKyBtLnJvbGUgOiAnJykgKyAnXSDsp4Drgpzso7w6ICcgKyBtLmxhc3RXZWVrICsgJyAvIOydtOuyiOyjvDogJyArIG0udGhpc1dlZWsgKyAobS5ub3RlID8gJyAvIOu5hOqzoDogJyArIG0ubm90ZSA6ICcnKSk7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW15LXFyYm94JykuaW5uZXJIVE1MID0gJyc7CiAgICB2YXIgd2FybkVsID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1saW5rLXdhcm5pbmcnKTsKICAgIGlmICh1cmwubGVuZ3RoID4gOTAwKXsKICAgICAgd2FybkVsLnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snOwogICAgfSBlbHNlIHsKICAgICAgd2FybkVsLnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7CiAgICAgIGlmICh1cmwubGVuZ3RoID4gMzAwKSBzaG93VG9hc3QoJ+unge2BrOqwgCDquLjslrTsmpQuICLsp6fsnYAgVVJMIOunjOuTpOq4sCLrpbwg64iM65+s67O07IS47JqUJyk7CiAgICB9CiAgfSk7CgogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1jb3B5JyksIGZ1bmN0aW9uKCl7CiAgICBjb3B5VGV4dChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW15LXJlc3VsdCcpLmdldEF0dHJpYnV0ZSgnZGF0YS11cmwnKSk7CiAgfSk7CiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW15LWNvcHl0ZXh0JyksIGZ1bmN0aW9uKCl7CiAgICBjb3B5VGV4dChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW15LXJlc3VsdCcpLmdldEF0dHJpYnV0ZSgnZGF0YS10ZXh0JykpOwogIH0pOwogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1zaG9ydCcpLCBmdW5jdGlvbigpewogICAgc2hvcnRlblVybChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW15LXJlc3VsdCcpLmdldEF0dHJpYnV0ZSgnZGF0YS11cmwnKSwgZnVuY3Rpb24oc2hvcnQpewogICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW15LWxpbmsnKS50ZXh0Q29udGVudCA9IHNob3J0OwogICAgfSk7CiAgfSk7CiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW15LXFyJyksIGZ1bmN0aW9uKCl7CiAgICB2YXIgdXJsID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1saW5rJykudGV4dENvbnRlbnQ7CiAgICByZW5kZXJRcignd3JhLW15LXFyYm94JywgdXJsKTsKICB9KTsKCiAgZnVuY3Rpb24gY29weVRleHQodGV4dCl7CiAgICBpZiAoIXRleHQpIHJldHVybjsKICAgIGlmIChuYXZpZ2F0b3IuY2xpcGJvYXJkICYmIG5hdmlnYXRvci5jbGlwYm9hcmQud3JpdGVUZXh0KXsKICAgICAgbmF2aWdhdG9yLmNsaXBib2FyZC53cml0ZVRleHQodGV4dCkudGhlbihmdW5jdGlvbigpewogICAgICAgIHNob3dUb2FzdCgn67O17IKs65CY7JeI7Iq164uI64ukJyk7CiAgICAgIH0pLmNhdGNoKGZ1bmN0aW9uKCl7IGZhbGxiYWNrQ29weSh0ZXh0KTsgfSk7CiAgICB9IGVsc2UgewogICAgICBmYWxsYmFja0NvcHkodGV4dCk7CiAgICB9CiAgfQogIGZ1bmN0aW9uIGZhbGxiYWNrQ29weSh0ZXh0KXsKICAgIHZhciB0YSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3RleHRhcmVhJyk7CiAgICB0YS52YWx1ZSA9IHRleHQ7CiAgICB0YS5zdHlsZS5wb3NpdGlvbiA9ICdmaXhlZCc7CiAgICB0YS5zdHlsZS5sZWZ0ID0gJy05OTk5cHgnOwogICAgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZCh0YSk7CiAgICB0YS5zZWxlY3QoKTsKICAgIHRyeSB7IGRvY3VtZW50LmV4ZWNDb21tYW5kKCdjb3B5Jyk7IHNob3dUb2FzdCgn67O17IKs65CY7JeI7Iq164uI64ukJyk7IH0KICAgIGNhdGNoKGUpeyBzaG93VG9hc3QoJ+uzteyCrOyXkCDsi6TtjKjtlojslrTsmpQuIOyngeygkSDshKDtg53tlbQg67O17IKs7ZW07KO87IS47JqUJyk7IH0KICAgIGRvY3VtZW50LmJvZHkucmVtb3ZlQ2hpbGQodGEpOwogIH0KCiAgZnVuY3Rpb24gc2hvcnRlblVybChsb25nVXJsLCBjYil7CiAgICBzaG93VG9hc3QoJ+ynp+ydgCBVUkwg7IOd7ISxIOykkS4uLicpOwogICAgZmV0Y2goJ2h0dHBzOi8vdGlueXVybC5jb20vYXBpLWNyZWF0ZS5waHA/dXJsPScgKyBlbmNvZGVVUklDb21wb25lbnQobG9uZ1VybCkpCiAgICAgIC50aGVuKGZ1bmN0aW9uKHJlcyl7IHJldHVybiByZXMudGV4dCgpOyB9KQogICAgICAudGhlbihmdW5jdGlvbih0ZXh0KXsKICAgICAgICBpZiAodGV4dCAmJiB0ZXh0LmluZGV4T2YoJ2h0dHAnKSA9PT0gMCl7CiAgICAgICAgICBjYih0ZXh0KTsKICAgICAgICAgIHNob3dUb2FzdCgn7Ken7J2AIFVSTCDsg53shLEg7JmE66OMJyk7CiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgIHNob3dUb2FzdCgn7Ken7J2AIFVSTCDsg53shLEg7Iuk7YyoLiDsm5Drnpgg66eB7YGs66W8IOyCrOyaqe2VtOyjvOyEuOyalCcpOwogICAgICAgIH0KICAgICAgfSkKICAgICAgLmNhdGNoKGZ1bmN0aW9uKCl7CiAgICAgICAgc2hvd1RvYXN0KCfsp6fsnYAgVVJMIOyEnOu5hOyKpCDsl7DqsrAg7Iuk7YyoLiDsm5Drnpgg66eB7YGs66W8IOyCrOyaqe2VtOyjvOyEuOyalCcpOwogICAgICB9KTsKICB9CgogIGZ1bmN0aW9uIHJlbmRlclFyKGJveElkLCB0ZXh0KXsKICAgIHZhciBib3ggPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChib3hJZCk7CiAgICBib3guaW5uZXJIVE1MID0gJyc7CiAgICBpZiAodHlwZW9mIFFSQ29kZSA9PT0gJ3VuZGVmaW5lZCcpewogICAgICBib3guaW5uZXJIVE1MID0gJzxkaXYgc3R5bGU9ImZvbnQtc2l6ZToxMnB4O2NvbG9yOiM5OTk7Ij5RUiDrnbzsnbTruIzrn6zrpqzrpbwg67aI65+s7Jik7KeAIOuqu+2WiOyWtOyalDwvZGl2Pic7CiAgICAgIHJldHVybjsKICAgIH0KICAgIG5ldyBRUkNvZGUoYm94LCB7IHRleHQ6IHRleHQsIHdpZHRoOjE2MCwgaGVpZ2h0OjE2MCB9KTsKICB9CgogIC8vIC0tLS0tLS0tLS0g67aZ7Jes64Sj6riwIOy3qO2VqSAo6rWs7ISx7JuQICsg7J6E7JuQ7J287KCVKSAtLS0tLS0tLS0tCiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXBhc3RlLWFkZCcpLCBmdW5jdGlvbigpewogICAgdmFyIHJhdyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtcGFzdGUtYm94JykudmFsdWU7CiAgICB2YXIgZm91bmQgPSBleHRyYWN0QWxsQ29kZXMocmF3KTsKICAgIHZhciBhZGRlZCA9IDA7CiAgICBwdXNoVW5kbygpOwogICAgZm91bmQuZm9yRWFjaChmdW5jdGlvbihpdGVtKXsKICAgICAgaWYgKGl0ZW0udHlwZSA9PT0gJ2QnKXsKICAgICAgICB2YXIgbSA9IGRlY29tcHJlc3MoaXRlbS5jb2RlKTsKICAgICAgICBpZiAobSAmJiBtLmtpbmQgPT09ICdleGVjJyl7CiAgICAgICAgICB1cHNlcnRFeGVjKG0pOwogICAgICAgICAgYWRkZWQrKzsKICAgICAgICB9IGVsc2UgaWYgKG0gJiYgbS5uYW1lKXsKICAgICAgICAgIHVwc2VydE1lbWJlcihtKTsKICAgICAgICAgIGFkZGVkKys7CiAgICAgICAgfQogICAgICB9IGVsc2UgaWYgKGl0ZW0udHlwZSA9PT0gJ3QnKXsKICAgICAgICB2YXIgdCA9IGRlY29tcHJlc3MoaXRlbS5jb2RlKTsKICAgICAgICBpZiAodCAmJiB0Lm1lbWJlcnMpewogICAgICAgICAgdC5tZW1iZXJzLmZvckVhY2goZnVuY3Rpb24obW0peyB1cHNlcnRNZW1iZXIobW0pOyBhZGRlZCsrOyB9KTsKICAgICAgICB9CiAgICAgICAgaWYgKHQgJiYgdC5leGVjTGlzdCl7CiAgICAgICAgICB0LmV4ZWNMaXN0LmZvckVhY2goZnVuY3Rpb24oZWUpeyB1cHNlcnRFeGVjKGVlKTsgYWRkZWQrKzsgfSk7CiAgICAgICAgfQogICAgICB9CiAgICB9KTsKICAgIGlmIChhZGRlZCA+IDApewogICAgICBzaG93VG9hc3QoYWRkZWQgKyAn6rG0IOy3qO2VqSDsmYTro4wnKTsKICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1wYXN0ZS1ib3gnKS52YWx1ZSA9ICcnOwogICAgICByZW5kZXJNZW1iZXJMaXN0KCk7CiAgICAgIHJlbmRlckV4ZWNMaXN0KCk7CiAgICAgIHNhdmVOb3coKTsKICAgIH0gZWxzZSB7CiAgICAgIHNob3dUb2FzdCgn7J247IudIOqwgOuKpe2VnCDrp4Htgazrpbwg7LC+7KeAIOuqu+2WiOyWtOyalCcpOwogICAgICB1bmRvU3RhY2sucG9wKCk7CiAgICB9CiAgfSk7CgogIGZ1bmN0aW9uIHVwc2VydE1lbWJlcihtKXsKICAgIHZhciBleGlzdGluZyA9IC0xOwogICAgZm9yICh2YXIgaT0wO2k8c3RhdGUubWVtYmVycy5sZW5ndGg7aSsrKXsKICAgICAgaWYgKHN0YXRlLm1lbWJlcnNbaV0ubmFtZSA9PT0gbS5uYW1lKSB7IGV4aXN0aW5nID0gaTsgYnJlYWs7IH0KICAgIH0KICAgIHZhciBjbGVhbiA9IHsKICAgICAgaWQ6IG0uaWQgfHwgZ2VuSWQoKSwKICAgICAgbmFtZTogbS5uYW1lIHx8ICcnLAogICAgICByb2xlOiBtLnJvbGUgfHwgJycsCiAgICAgIGxhc3RXZWVrOiBtLmxhc3RXZWVrIHx8ICcnLAogICAgICB0aGlzV2VlazogbS50aGlzV2VlayB8fCAnJywKICAgICAgbm90ZTogbS5ub3RlIHx8ICcnLAogICAgICBzdGF0dXM6IG0uc3RhdHVzIHx8ICdwcm9ncmVzcycsCiAgICAgIGF3YXk6IG0uYXdheSB8fCAnJwogICAgfTsKICAgIGlmIChleGlzdGluZyA+PSAwKXsKICAgICAgc3RhdGUubWVtYmVyc1tleGlzdGluZ10gPSBjbGVhbjsKICAgICAgcmV0dXJuOwogICAgfQogICAgdmFyIGVtcHR5U2xvdCA9IC0xOwogICAgZm9yICh2YXIgaj0wO2o8c3RhdGUubWVtYmVycy5sZW5ndGg7aisrKXsKICAgICAgaWYgKCFzdGF0ZS5tZW1iZXJzW2pdLm5hbWUgfHwgIXN0YXRlLm1lbWJlcnNbal0ubmFtZS50cmltKCkpeyBlbXB0eVNsb3QgPSBqOyBicmVhazsgfQogICAgfQogICAgaWYgKGVtcHR5U2xvdCA+PSAwKSBzdGF0ZS5tZW1iZXJzW2VtcHR5U2xvdF0gPSBjbGVhbjsKICAgIGVsc2Ugc3RhdGUubWVtYmVycy5wdXNoKGNsZWFuKTsKICB9CgogIGZ1bmN0aW9uIHVwc2VydEV4ZWMoZSl7CiAgICBpZiAoIXN0YXRlLmV4ZWNMaXN0KSBzdGF0ZS5leGVjTGlzdCA9IFtdOwogICAgdmFyIGNsZWFuID0geyBpZDogZS5pZCB8fCBnZW5JZCgpLCBuYW1lOiBlLm5hbWUgfHwgJycsIHNjaGVkdWxlOiBlLnNjaGVkdWxlIHx8ICcnIH07CiAgICB2YXIgZXhpc3RpbmcgPSAtMTsKICAgIGZvciAodmFyIGk9MDtpPHN0YXRlLmV4ZWNMaXN0Lmxlbmd0aDtpKyspewogICAgICBpZiAoc3RhdGUuZXhlY0xpc3RbaV0ubmFtZSAmJiBzdGF0ZS5leGVjTGlzdFtpXS5uYW1lID09PSBjbGVhbi5uYW1lKSB7IGV4aXN0aW5nID0gaTsgYnJlYWs7IH0KICAgIH0KICAgIGlmIChleGlzdGluZyA+PSAwKSBzdGF0ZS5leGVjTGlzdFtleGlzdGluZ10gPSBjbGVhbjsKICAgIGVsc2Ugc3RhdGUuZXhlY0xpc3QucHVzaChjbGVhbik7CiAgfQoKICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtbWFudWFsLWFkZCcpLCBmdW5jdGlvbigpewogICAgcHVzaFVuZG8oKTsKICAgIHN0YXRlLm1lbWJlcnMucHVzaCh7IGlkOiBnZW5JZCgpLCBuYW1lOicnLCByb2xlOicnLCBsYXN0V2VlazonJywgdGhpc1dlZWs6JycsIG5vdGU6JycsIHN0YXR1czoncHJvZ3Jlc3MnLCBhd2F5OicnIH0pOwogICAgcmVuZGVyTWVtYmVyTGlzdCgpOwogICAgc2F2ZU5vdygpOwogICAgc2hvd1RvYXN0KCfruYgg7ZaJ7J2EIOy2lOqwgO2WiOyWtOyalC4g7ZGc7JeQ7IScIOuwlOuhnCDsnoXroKXtlbTso7zshLjsmpQnKTsKICB9KTsKCiAgLy8gLS0tLS0tLS0tLSDsnoTsm5DsnbzsoJUgLS0tLS0tLS0tLQogIGZ1bmN0aW9uIGVuc3VyZUV4ZWNEZWZhdWx0KCl7CiAgICBpZiAoIXN0YXRlLmV4ZWNMaXN0IHx8IHN0YXRlLmV4ZWNMaXN0Lmxlbmd0aCA9PT0gMCl7CiAgICAgIHN0YXRlLmV4ZWNMaXN0ID0gW3sgaWQ6IGdlbklkKCksIG5hbWU6JycsIHNjaGVkdWxlOicnIH1dOwogICAgfQogIH0KCiAgZnVuY3Rpb24gcmVuZGVyRXhlY0xpc3QoKXsKICAgIGVuc3VyZUV4ZWNEZWZhdWx0KCk7CiAgICB2YXIgd3JhcCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZXhlYy1saXN0Jyk7CiAgICB2YXIgaHRtbCA9ICcnOwogICAgc3RhdGUuZXhlY0xpc3QuZm9yRWFjaChmdW5jdGlvbihlLCBpZHgpewogICAgICBodG1sICs9ICc8ZGl2IGNsYXNzPSJ3cmEtZXhlYy1yb3ciIGRhdGEtaWR4PSInICsgaWR4ICsgJyI+JyArCiAgICAgICAgJzxpbnB1dCBjbGFzcz0id3JhLWV4ZWMtbmFtZSIgZGF0YS1pZHg9IicgKyBpZHggKyAnIiBkYXRhLWZpZWxkPSJuYW1lIiB2YWx1ZT0iJyArIGVzY2FwZUh0bWwoZS5uYW1lKSArICciIHBsYWNlaG9sZGVyPSLsnbTrpoQgKOyYiDog64yA7ZGc64uYKSI+JyArCiAgICAgICAgJzxpbnB1dCBjbGFzcz0id3JhLWV4ZWMtc2NoZWR1bGUiIGRhdGEtaWR4PSInICsgaWR4ICsgJyIgZGF0YS1maWVsZD0ic2NoZWR1bGUiIHZhbHVlPSInICsgZXNjYXBlSHRtbChlLnNjaGVkdWxlKSArICciIHBsYWNlaG9sZGVyPSLsmKTripgg7J287KCV7J2EIOyggeyWtOyjvOyEuOyalCI+JyArCiAgICAgICAgJzxidXR0b24gY2xhc3M9IndyYS1idG4gd3JhLWdyYXkgd3JhLWV4ZWMtY29weWJ0biIgZGF0YS1hY3Q9ImV4ZWMtY29weSIgZGF0YS1pZHg9IicgKyBpZHggKyAnIj7rs7Xsgqwg7ZuEIOuMk+q4gOyeheugpTwvYnV0dG9uPicgKwogICAgICAgIChzdGF0ZS5leGVjTGlzdC5sZW5ndGggPiAxID8gJzxidXR0b24gY2xhc3M9IndyYS1leGVjLWRlbCIgZGF0YS1hY3Q9ImV4ZWMtZGVsIiBkYXRhLWlkeD0iJyArIGlkeCArICciPsOXPC9idXR0b24+JyA6ICcnKSArCiAgICAgICc8L2Rpdj4nOwogICAgfSk7CiAgICB3cmFwLmlubmVySFRNTCA9IGh0bWw7CgogICAgdmFyIGlucHV0cyA9IHdyYXAucXVlcnlTZWxlY3RvckFsbCgnW2RhdGEtZmllbGRdJyk7CiAgICBmb3IgKHZhciBpPTA7aTxpbnB1dHMubGVuZ3RoO2krKyl7CiAgICAgIGlucHV0c1tpXS5hZGRFdmVudExpc3RlbmVyKCdpbnB1dCcsIGZ1bmN0aW9uKCl7CiAgICAgICAgdmFyIGlkeCA9IHBhcnNlSW50KHRoaXMuZ2V0QXR0cmlidXRlKCdkYXRhLWlkeCcpLCAxMCk7CiAgICAgICAgdmFyIGZpZWxkID0gdGhpcy5nZXRBdHRyaWJ1dGUoJ2RhdGEtZmllbGQnKTsKICAgICAgICBzdGF0ZS5leGVjTGlzdFtpZHhdW2ZpZWxkXSA9IHRoaXMudmFsdWU7CiAgICAgICAgc2F2ZU5vdygpOwogICAgICB9LCBmYWxzZSk7CiAgICB9CgogICAgdmFyIGJ0bnMgPSB3cmFwLnF1ZXJ5U2VsZWN0b3JBbGwoJ1tkYXRhLWFjdF0nKTsKICAgIGZvciAodmFyIGI9MDtiPGJ0bnMubGVuZ3RoO2IrKyl7CiAgICAgIChmdW5jdGlvbihidG4pewogICAgICAgIGJpbmRUYXAoYnRuLCBmdW5jdGlvbigpewogICAgICAgICAgdmFyIGFjdCA9IGJ0bi5nZXRBdHRyaWJ1dGUoJ2RhdGEtYWN0Jyk7CiAgICAgICAgICB2YXIgaWR4ID0gcGFyc2VJbnQoYnRuLmdldEF0dHJpYnV0ZSgnZGF0YS1pZHgnKSwgMTApOwogICAgICAgICAgaWYgKGFjdCA9PT0gJ2V4ZWMtZGVsJyl7CiAgICAgICAgICAgIHB1c2hVbmRvKCk7CiAgICAgICAgICAgIHN0YXRlLmV4ZWNMaXN0LnNwbGljZShpZHgsMSk7CiAgICAgICAgICAgIHJlbmRlckV4ZWNMaXN0KCk7CiAgICAgICAgICAgIHNhdmVOb3coKTsKICAgICAgICAgIH0gZWxzZSBpZiAoYWN0ID09PSAnZXhlYy1jb3B5Jyl7CiAgICAgICAgICAgIHZhciBlID0gc3RhdGUuZXhlY0xpc3RbaWR4XTsKICAgICAgICAgICAgaWYgKCFlLm5hbWUgfHwgIWUubmFtZS50cmltKCkpeyBzaG93VG9hc3QoJ+ydtOumhOydhCDsnoXroKXtlbTso7zshLjsmpQnKTsgcmV0dXJuOyB9CiAgICAgICAgICAgIHZhciBwYXlsb2FkID0geyBraW5kOidleGVjJywgaWQ6IGUuaWQsIG5hbWU6IGUubmFtZSwgc2NoZWR1bGU6IGUuc2NoZWR1bGUgfTsKICAgICAgICAgICAgdmFyIGNvZGUgPSBjb21wcmVzcyhwYXlsb2FkKTsKICAgICAgICAgICAgdmFyIHVybCA9IGxvY2F0aW9uLm9yaWdpbiArIGxvY2F0aW9uLnBhdGhuYW1lICsgJz9kPScgKyBjb2RlOwogICAgICAgICAgICBjb3B5VGV4dCh1cmwpOwogICAgICAgICAgICBzaG93VG9hc3QoJ+uzteyCrOuQkOyWtOyalCEg64yT6riA7JeQIOu2meyXrOuEo+yWtOyjvOyEuOyalCcpOwogICAgICAgICAgfQogICAgICAgIH0pOwogICAgICB9KShidG5zW2JdKTsKICAgIH0KICB9CgogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1leGVjLWFkZCcpLCBmdW5jdGlvbigpewogICAgcHVzaFVuZG8oKTsKICAgIGVuc3VyZUV4ZWNEZWZhdWx0KCk7CiAgICBzdGF0ZS5leGVjTGlzdC5wdXNoKHsgaWQ6IGdlbklkKCksIG5hbWU6JycsIHNjaGVkdWxlOicnIH0pOwogICAgcmVuZGVyRXhlY0xpc3QoKTsKICAgIHNhdmVOb3coKTsKICB9KTsKCiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWZ1bGxzY3JlZW4tYnRuJyksIGZ1bmN0aW9uKCl7CiAgICBpZiAoc3RhdGUubWVtYmVycy5sZW5ndGggPT09IDApeyBzaG93VG9hc3QoJ+y3qO2VqeuQnCDsl4XrrLTqsIAg7JeG7Ja07JqUJyk7IHJldHVybjsgfQogICAgb3BlbkZ1bGxzY3JlZW4oKTsKICB9KTsKICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZnMtY2xvc2UnKSwgZnVuY3Rpb24oKXsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZnMtYmcnKS5jbGFzc05hbWUgPSAnd3JhLW1vZGFsLWJnJzsKICB9KTsKICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWZzLWJnJykuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbihlKXsKICAgIGlmIChlLnRhcmdldC5pZCA9PT0gJ3dyYS1mcy1iZycpIHRoaXMuY2xhc3NOYW1lID0gJ3dyYS1tb2RhbC1iZyc7CiAgfSwgZmFsc2UpOwoKICAvLyAtLS0tLS0tLS0tIOyjvOywqCDsnbTrj5kgKOyngOuCnOyjvOuhnCAvIOuLpOydjOyjvOuhnCkgOiDroZzsu6wg7JWE7Lm07J2067iMIC0tLS0tLS0tLS0KICBmdW5jdGlvbiBsb2FkQXJjaGl2ZSgpewogICAgdHJ5IHsgcmV0dXJuIEpTT04ucGFyc2UobG9jYWxTdG9yYWdlLmdldEl0ZW0oQVJDSElWRV9LRVkpIHx8ICd7fScpOyB9IGNhdGNoKGUpeyByZXR1cm4ge307IH0KICB9CiAgZnVuY3Rpb24gc2F2ZUFyY2hpdmUoYSl7CiAgICB0cnkgeyBsb2NhbFN0b3JhZ2Uuc2V0SXRlbShBUkNISVZFX0tFWSwgSlNPTi5zdHJpbmdpZnkoYSkpOyB9IGNhdGNoKGUpe30KICB9CiAgZnVuY3Rpb24gYXJjaGl2ZUN1cnJlbnRXZWVrKCl7CiAgICB2YXIgYSA9IGxvYWRBcmNoaXZlKCk7CiAgICB2YXIga2V5ID0gZ2V0SXNvV2Vla0tleSh0b0RhdGUoc3RhdGUubWVldGluZ0RhdGUpKTsKICAgIGFba2V5XSA9IGJ1aWxkVGVhbVBheWxvYWQoKTsKICAgIHNhdmVBcmNoaXZlKGEpOwogIH0KICBmdW5jdGlvbiBnb1RvV2VlayhvZmZzZXQpewogICAgdmFyIG5ld0RhdGUgPSBhZGREYXlzKHN0YXRlLm1lZXRpbmdEYXRlLCBvZmZzZXQgKiA3KTsKICAgIHZhciBrZXkgPSBnZXRJc29XZWVrS2V5KHRvRGF0ZShuZXdEYXRlKSk7CiAgICB2YXIgYXJjaCA9IGxvYWRBcmNoaXZlKCk7CiAgICBpZiAoYXJjaFtrZXldKXsKICAgICAgYXJjaGl2ZUN1cnJlbnRXZWVrKCk7CiAgICAgIHZhciBzbmFwID0gYXJjaFtrZXldOwogICAgICBzdGF0ZS5jb21wYW55TmFtZSA9IHNuYXAuY29tcGFueU5hbWUgfHwgc3RhdGUuY29tcGFueU5hbWU7CiAgICAgIHN0YXRlLm1lZXRpbmdEYXRlID0gc25hcC5tZWV0aW5nRGF0ZSB8fCBuZXdEYXRlOwogICAgICBzdGF0ZS5hdHRlbmRlZUNvdW50ID0gc25hcC5hdHRlbmRlZUNvdW50IHx8ICcnOwogICAgICBzdGF0ZS5tb250aEdvYWwgPSBzbmFwLm1vbnRoR29hbCB8fCAnJzsKICAgICAgc3RhdGUueWVhckdvYWwgPSBzbmFwLnllYXJHb2FsIHx8ICcnOwogICAgICBzdGF0ZS5jb21tb25Ob3RlID0gc25hcC5jb21tb25Ob3RlIHx8ICcnOwogICAgICBzdGF0ZS5tZW1iZXJzID0gc25hcC5tZW1iZXJzIHx8IFtdOwogICAgICBzdGF0ZS5leGVjTGlzdCA9IHNuYXAuZXhlY0xpc3QgfHwgW107CiAgICAgIGFmdGVyU3RhdGVDaGFuZ2UoKTsKICAgICAgc2F2ZU5vdygpOwogICAgICBzaG93VG9hc3Qob2Zmc2V0ID4gMCA/ICfri6TsnYwg7KO8IOuNsOydtO2EsOulvCDrtojrn6zsmZTslrTsmpQnIDogJ+yngOuCnOyjvCDrjbDsnbTthLDrpbwg67aI65+s7JmU7Ja07JqUJyk7CiAgICB9IGVsc2UgaWYgKG9mZnNldCA+IDApewogICAgICBpZiAoc3RhdGUubWVtYmVycy5sZW5ndGggPT09IDApeyBzaG93VG9hc3QoJ+y3qO2VqeuQnCDsl4XrrLTqsIAg7JeG7Ja07JqUJyk7IHJldHVybjsgfQogICAgICB2YXIgb2sgPSB3aW5kb3cuY29uZmlybSgn64uk7J2MIOyjvOuhnCDrhJjslrTqsIjquYzsmpQ/XG7qsIHsnpDsnZggIuydtOuyiOyjvCDsl4XrrLQi6rCAICLsp4Drgpzso7wg7JeF66y0IuuhnCDsnpDrj5kg7J2064+Z7ZWY6rOgLCDsg4Htg5wv67aA7J6sIOygleuztOuKlCDstIjquLDtmZTrj7zsmpQuJyk7CiAgICAgIGlmICghb2spIHJldHVybjsKICAgICAgYXJjaGl2ZUN1cnJlbnRXZWVrKCk7CiAgICAgIHB1c2hVbmRvKCk7CiAgICAgIHN0YXRlLm1lZXRpbmdEYXRlID0gbmV3RGF0ZTsKICAgICAgc3RhdGUubWVtYmVycy5mb3JFYWNoKGZ1bmN0aW9uKG0pewogICAgICAgIG0ubGFzdFdlZWsgPSBtLnRoaXNXZWVrIHx8ICcnOwogICAgICAgIG0udGhpc1dlZWsgPSAnJzsKICAgICAgICBtLnN0YXR1cyA9ICdwcm9ncmVzcyc7CiAgICAgICAgbS5hd2F5ID0gJyc7CiAgICAgIH0pOwogICAgICBhZnRlclN0YXRlQ2hhbmdlKCk7CiAgICAgIHNhdmVOb3coKTsKICAgICAgc2hvd1RvYXN0KCfri6TsnYwg7KO866GcIOuEmOyWtOqwlOyWtOyalCcpOwogICAgfSBlbHNlIHsKICAgICAgc2hvd1RvYXN0KCfsoIDsnqXrkJwg7KeA64Kc7KO8IOuNsOydtO2EsOqwgCDsl4bslrTsmpQnKTsKICAgIH0KICB9CiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW5leHR3ZWVrLWJ0bicpLCBmdW5jdGlvbigpeyBnb1RvV2VlaygxKTsgfSk7CiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXByZXZ3ZWVrLWJ0bicpLCBmdW5jdGlvbigpeyBnb1RvV2VlaygtMSk7IH0pOwoKICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZXhwYW5kLWNsb3NlJyksIGZ1bmN0aW9uKCl7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWV4cGFuZC1iZycpLmNsYXNzTmFtZSA9ICd3cmEtbW9kYWwtYmcnOwogIH0pOwogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1leHBhbmQtcHJldicpLCBmdW5jdGlvbigpewogICAgZXhwYW5kSW5kZXggPSAoZXhwYW5kSW5kZXggLSAxICsgc3RhdGUubWVtYmVycy5sZW5ndGgpICUgc3RhdGUubWVtYmVycy5sZW5ndGg7CiAgICByZW5kZXJFeHBhbmQoKTsKICB9KTsKICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZXhwYW5kLW5leHQnKSwgZnVuY3Rpb24oKXsKICAgIGV4cGFuZEluZGV4ID0gKGV4cGFuZEluZGV4ICsgMSkgJSBzdGF0ZS5tZW1iZXJzLmxlbmd0aDsKICAgIHJlbmRlckV4cGFuZCgpOwogIH0pOwogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZXhwYW5kLWJnJykuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbihlKXsKICAgIGlmIChlLnRhcmdldC5pZCA9PT0gJ3dyYS1leHBhbmQtYmcnKSB0aGlzLmNsYXNzTmFtZSA9ICd3cmEtbW9kYWwtYmcnOwogIH0sIGZhbHNlKTsKCiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWhlbHAnKSwgZnVuY3Rpb24oKXsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtaGVscC1iZycpLmNsYXNzTmFtZSA9ICd3cmEtbW9kYWwtYmcgd3JhLXNob3cnOwogIH0pOwogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1oZWxwLWNsb3NlJyksIGZ1bmN0aW9uKCl7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWhlbHAtYmcnKS5jbGFzc05hbWUgPSAnd3JhLW1vZGFsLWJnJzsKICB9KTsKICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWhlbHAtYmcnKS5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uKGUpewogICAgaWYgKGUudGFyZ2V0LmlkID09PSAnd3JhLWhlbHAtYmcnKSB0aGlzLmNsYXNzTmFtZSA9ICd3cmEtbW9kYWwtYmcnOwogIH0sIGZhbHNlKTsKCiAgZnVuY3Rpb24gcHJpbnRBbGxWaWV3KCl7CiAgICBpZiAoc3RhdGUubWVtYmVycy5sZW5ndGggPT09IDApeyBzaG93VG9hc3QoJ+y3qO2VqeuQnCDsl4XrrLTqsIAg7JeG7Ja07JqUJyk7IHJldHVybjsgfQogICAgdmFyIGZ1bGxUaXRsZSA9IGdldFRpdGxlUHJlZml4KHN0YXRlLm1lZXRpbmdEYXRlKTsKICAgIHZhciBwcmludENzcyA9ICdib2R5e2ZvbnQtZmFtaWx5OnNhbnMtc2VyaWY7cGFkZGluZzoyNHB4O2NvbG9yOiMyMjI7fScgKwogICAgICAnaDJ7bWFyZ2luLXRvcDowO2ZvbnQtc2l6ZToxOXB4O30nICsKICAgICAgJ3RhYmxle3dpZHRoOjEwMCU7Ym9yZGVyLWNvbGxhcHNlOmNvbGxhcHNlO2ZvbnQtc2l6ZToxMy41cHg7dGFibGUtbGF5b3V0OmZpeGVkO30nICsKICAgICAgJ2NvbC53cmEtZnMtYy1uYW1le3dpZHRoOjUwcHg7fWNvbC53cmEtZnMtYy1sYXN0e3dpZHRoOjUwJTt9Y29sLndyYS1mcy1jLXRoaXN7d2lkdGg6NTAlO30nICsKICAgICAgJ3Roe2JhY2tncm91bmQ6IzFmMjkzNztjb2xvcjojZmZmO3BhZGRpbmc6OHB4O3RleHQtYWxpZ246Y2VudGVyO30nICsKICAgICAgJ3Rke3BhZGRpbmc6OHB4O2JvcmRlci1ib3R0b206MXB4IHNvbGlkICNlZWU7dmVydGljYWwtYWxpZ246dG9wO3doaXRlLXNwYWNlOnByZS13cmFwO2xpbmUtaGVpZ2h0OjEuNTt3b3JkLWJyZWFrOmJyZWFrLXdvcmQ7fScgKwogICAgICAndGQud3JhLWZzLW5hbWV7d3JpdGluZy1tb2RlOnZlcnRpY2FsLXJsO3RleHQtb3JpZW50YXRpb246dXByaWdodDt0ZXh0LWFsaWduOmNlbnRlcjtmb250LXdlaWdodDo3MDA7fScgKwogICAgICAndGQud3JhLWZzLWxhc3R7YmFja2dyb3VuZDojZWVmNGZmO310ZC53cmEtZnMtdGhpc3tiYWNrZ3JvdW5kOiNmZmY2ZTg7fScgKwogICAgICAndGQud3JhLWZzLW5vdGV7YmFja2dyb3VuZDojZmFmYWZhO2ZvbnQtc2l6ZToxMi41cHg7Y29sb3I6IzU1NTt9JyArCiAgICAgICcud3JhLWZzLW5vdGUtbGFiZWx7Zm9udC1zaXplOjExcHg7Y29sb3I6Izk5OTtmb250LXdlaWdodDo3MDA7fScgKwogICAgICAnLndyYS1mcy1zdW1tYXJ5e21hcmdpbi10b3A6MTZweDtwYWRkaW5nLXRvcDoxMHB4O2JvcmRlci10b3A6MnB4IGRhc2hlZCAjZGRkO30nICsKICAgICAgJy53cmEtZnMtc3VtbWFyeS10aXRsZXtmb250LXdlaWdodDo4MDA7bWFyZ2luLWJvdHRvbTo2cHg7Zm9udC1zaXplOjE0cHg7fScgKwogICAgICAnLndyYS1mcy1zdW1tYXJ5LWNvbXBhY3R7Zm9udC1zaXplOjEzcHg7bGluZS1oZWlnaHQ6MS44O30nICsKICAgICAgJy53cmEtZnMtY29tbW9ue2JhY2tncm91bmQ6I2ZmZjhlMDtib3JkZXI6MXB4IHNvbGlkICNmMmU2YWU7Ym9yZGVyLXJhZGl1czo2cHg7cGFkZGluZzoxMHB4O21hcmdpbi10b3A6MTRweDt3aGl0ZS1zcGFjZTpwcmUtd3JhcDtmb250LXNpemU6MTMuNXB4O30nOwogICAgdmFyIGRvY0h0bWwgPSAnPCFET0NUWVBFIGh0bWw+PGh0bWwgbGFuZz0ia28iPjxoZWFkPjxtZXRhIGNoYXJzZXQ9IlVURi04Ij48dGl0bGU+JyArIGVzY2FwZUh0bWwoZnVsbFRpdGxlKSArICc8L3RpdGxlPicgKwogICAgICAnPHN0eWxlPicgKyBwcmludENzcyArICc8L3N0eWxlPjwvaGVhZD48Ym9keT48aDI+JyArIGVzY2FwZUh0bWwoZnVsbFRpdGxlKSArICc8L2gyPicgKyBidWlsZEFsbFZpZXdIdG1sKCkgKyAnPC9ib2R5PjwvaHRtbD4nOwogICAgdmFyIHByaW50V2luID0gd2luZG93Lm9wZW4oJycsICdfYmxhbmsnKTsKICAgIGlmICghcHJpbnRXaW4peyBzaG93VG9hc3QoJ+2MneyXheydtCDssKjri6jrkJDslrTsmpQuIO2MneyXhSDtl4jsmqkg7ZuEIOuLpOyLnCDriIzrn6zso7zshLjsmpQnKTsgcmV0dXJuOyB9CiAgICBwcmludFdpbi5kb2N1bWVudC5vcGVuKCk7CiAgICBwcmludFdpbi5kb2N1bWVudC53cml0ZShkb2NIdG1sKTsKICAgIHByaW50V2luLmRvY3VtZW50LmNsb3NlKCk7CiAgICBwcmludFdpbi5mb2N1cygpOwogICAgc2V0VGltZW91dChmdW5jdGlvbigpeyBwcmludFdpbi5wcmludCgpOyB9LCAzNTApOwogIH0KICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtc2F2ZS1wZGYnKSwgcHJpbnRBbGxWaWV3KTsKICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtcGRmLXF1aWNrJyksIHByaW50QWxsVmlldyk7CgogIGZ1bmN0aW9uIGJ1aWxkVGVhbVBheWxvYWQoKXsKICAgIHJldHVybiB7IGNvbXBhbnlOYW1lOiBzdGF0ZS5jb21wYW55TmFtZSwgbWVldGluZ0RhdGU6IHN0YXRlLm1lZXRpbmdEYXRlLCBhdHRlbmRlZUNvdW50OiBzdGF0ZS5hdHRlbmRlZUNvdW50LCBtb250aEdvYWw6IHN0YXRlLm1vbnRoR29hbCwgeWVhckdvYWw6IHN0YXRlLnllYXJHb2FsLCBjb21tb25Ob3RlOiBzdGF0ZS5jb21tb25Ob3RlLCBtZW1iZXJzOiBzdGF0ZS5tZW1iZXJzLCBleGVjTGlzdDogc3RhdGUuZXhlY0xpc3QgfTsKICB9CgogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1zYXZlLWxpbmsnKSwgZnVuY3Rpb24oKXsKICAgIGlmIChzdGF0ZS5tZW1iZXJzLmxlbmd0aCA9PT0gMCl7IHNob3dUb2FzdCgn7Leo7ZWp65CcIOyXheustOqwgCDsl4bslrTsmpQnKTsgcmV0dXJuOyB9CiAgICB2YXIgY29kZSA9IGNvbXByZXNzKGJ1aWxkVGVhbVBheWxvYWQoKSk7CiAgICB2YXIgdXJsID0gbG9jYXRpb24ub3JpZ2luICsgbG9jYXRpb24ucGF0aG5hbWUgKyAnP3Q9JyArIGNvZGU7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXRlYW0tbGluaycpLnRleHRDb250ZW50ID0gdXJsOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS10ZWFtLWxpbmsnKS5zZXRBdHRyaWJ1dGUoJ2RhdGEtdXJsJywgdXJsKTsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtdGVhbS1zaG9ydC1saW5rJykudGV4dENvbnRlbnQgPSAn64iM65+s7IScIOynp+ydgCDrp4Htgawg66eM65Ok6riwJzsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtdGVhbS1zaG9ydC1saW5rJykucmVtb3ZlQXR0cmlidXRlKCdkYXRhLXVybCcpOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS10ZWFtLWxpbmstcmVzdWx0Jykuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7CiAgfSk7CiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXRlYW0tbGluaycpLCBmdW5jdGlvbigpewogICAgY29weVRleHQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS10ZWFtLWxpbmsnKS5nZXRBdHRyaWJ1dGUoJ2RhdGEtdXJsJykpOwogIH0pOwogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS10ZWFtLXNob3J0LWxpbmsnKSwgZnVuY3Rpb24oKXsKICAgIHZhciBleGlzdGluZyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtdGVhbS1zaG9ydC1saW5rJykuZ2V0QXR0cmlidXRlKCdkYXRhLXVybCcpOwogICAgaWYgKGV4aXN0aW5nKXsgY29weVRleHQoZXhpc3RpbmcpOyByZXR1cm47IH0KICAgIHZhciBsb25nVXJsID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS10ZWFtLWxpbmsnKS5nZXRBdHRyaWJ1dGUoJ2RhdGEtdXJsJyk7CiAgICBzaG9ydGVuVXJsKGxvbmdVcmwsIGZ1bmN0aW9uKHNob3J0KXsKICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS10ZWFtLXNob3J0LWxpbmsnKS50ZXh0Q29udGVudCA9IHNob3J0OwogICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXRlYW0tc2hvcnQtbGluaycpLnNldEF0dHJpYnV0ZSgnZGF0YS11cmwnLCBzaG9ydCk7CiAgICAgIGNvcHlUZXh0KHNob3J0KTsKICAgIH0pOwogIH0pOwoKICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtc2F2ZS1odG1sJyksIGZ1bmN0aW9uKCl7CiAgICBpZiAoc3RhdGUubWVtYmVycy5sZW5ndGggPT09IDApeyBzaG93VG9hc3QoJ+y3qO2VqeuQnCDsl4XrrLTqsIAg7JeG7Ja07JqUJyk7IHJldHVybjsgfQogICAgdmFyIGNvZGUgPSBjb21wcmVzcyhidWlsZFRlYW1QYXlsb2FkKCkpOwogICAgdmFyIHRhcmdldFVybCA9IGxvY2F0aW9uLm9yaWdpbiArIGxvY2F0aW9uLnBhdGhuYW1lICsgJz90PScgKyBjb2RlOwogICAgdmFyIGZuYW1lID0gJ+yjvOqwhO2ajOydmOy3qO2VqeqzhOyCsOq4sF9WMF8oMjYwNzMxKS5odG1sJzsKICAgIHZhciBmdWxsVGl0bGUgPSBnZXRUaXRsZVByZWZpeChzdGF0ZS5tZWV0aW5nRGF0ZSk7CiAgICB2YXIgaHRtbCA9ICc8IURPQ1RZUEUgaHRtbD48aHRtbCBsYW5nPSJrbyI+PGhlYWQ+PG1ldGEgY2hhcnNldD0iVVRGLTgiPicgKwogICAgICAnPHRpdGxlPicgKyBlc2NhcGVIdG1sKGZ1bGxUaXRsZSkgKyAnPC90aXRsZT4nICsKICAgICAgJzxtZXRhIGh0dHAtZXF1aXY9InJlZnJlc2giIGNvbnRlbnQ9IjA7IHVybD0nICsgdGFyZ2V0VXJsICsgJyI+JyArCiAgICAgICc8L2hlYWQ+PGJvZHkgc3R5bGU9ImZvbnQtZmFtaWx5OnNhbnMtc2VyaWY7dGV4dC1hbGlnbjpjZW50ZXI7cGFkZGluZzo0MHB4OyI+JyArCiAgICAgICc8cD7snpDrj5nsnLzroZwg7J2064+Z7ZWY7KeAIOyViuycvOuptCDslYTrnpgg66eB7YGs66W8IOuIjOufrOyjvOyEuOyalC48L3A+JyArCiAgICAgICc8cD48YSBocmVmPSInICsgdGFyZ2V0VXJsICsgJyI+JyArIGVzY2FwZUh0bWwoZnVsbFRpdGxlKSArICcg67O17JuQIOunge2BrCDsl7TquLA8L2E+PC9wPicgKwogICAgICAnPC9ib2R5PjwvaHRtbD4nOwogICAgdmFyIGJsb2IgPSBuZXcgQmxvYihbaHRtbF0sIHsgdHlwZTondGV4dC9odG1sJyB9KTsKICAgIHZhciBhID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnYScpOwogICAgYS5ocmVmID0gVVJMLmNyZWF0ZU9iamVjdFVSTChibG9iKTsKICAgIGEuZG93bmxvYWQgPSBmbmFtZTsKICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQoYSk7CiAgICBhLmNsaWNrKCk7CiAgICBkb2N1bWVudC5ib2R5LnJlbW92ZUNoaWxkKGEpOwogICAgc2hvd1RvYXN0KCdIVE1MIO2MjOydvOydhCDsoIDsnqXtlojslrTsmpQnKTsKICB9KTsKCiAgZnVuY3Rpb24gYnVpbGRTaGVldFJvd3MocGF5bG9hZCl7CiAgICB2YXIgcm93cyA9IFtbJ+ydtOumhCcsJ+uLtOuLuScsJ+yngOuCnOyjvCDsl4XrrLQnLCfsnbTrsojso7wg7JeF66y0Jywn67mE6rOgJ11dOwogICAgKHBheWxvYWQubWVtYmVycyB8fCBbXSkuZm9yRWFjaChmdW5jdGlvbihtKXsKICAgICAgcm93cy5wdXNoKFttLm5hbWV8fCcnLCBtLnJvbGV8fCcnLCBtLmxhc3RXZWVrfHwnJywgbS50aGlzV2Vla3x8JycsIG0ubm90ZXx8JyddKTsKICAgIH0pOwogICAgcmV0dXJuIHJvd3M7CiAgfQoKICBmdW5jdGlvbiBzaGVldExhYmVsRm9yKHBheWxvYWQsIGZhbGxiYWNrS2V5KXsKICAgIHZhciBkYXRlU3RyID0gcGF5bG9hZCAmJiBwYXlsb2FkLm1lZXRpbmdEYXRlOwogICAgaWYgKCFkYXRlU3RyKSByZXR1cm4gZmFsbGJhY2tLZXkucmVwbGFjZSgvW1xcXC9cP1wqXFtcXTpdL2csICctJykuc2xpY2UoMCwzMSk7CiAgICB2YXIgZCA9IHRvRGF0ZShkYXRlU3RyKTsKICAgIHZhciB5eSA9IFN0cmluZyhkLmdldEZ1bGxZZWFyKCkpLnNsaWNlKDIpOwogICAgdmFyIG1tID0gKCcwJysoZC5nZXRNb250aCgpKzEpKS5zbGljZSgtMik7CiAgICB2YXIgZGQgPSAoJzAnK2QuZ2V0RGF0ZSgpKS5zbGljZSgtMik7CiAgICB2YXIgd2VlayA9IGdldElzb1dlZWtLZXkoZCkuc3BsaXQoJy1XJylbMV07CiAgICByZXR1cm4gKHl5ICsgbW0gKyBkZCArICdfJyArIHdlZWsgKyAn7KO87LCoJykuc2xpY2UoMCwzMSk7CiAgfQoKICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtc2F2ZS1leGNlbCcpLCBmdW5jdGlvbigpewogICAgaWYgKHR5cGVvZiBYTFNYID09PSAndW5kZWZpbmVkJyl7IHNob3dUb2FzdCgn7JeR7IWAIOudvOydtOu4jOufrOumrOulvCDrtojrn6zsmKTsp4Ag66q77ZaI7Ja07JqUJyk7IHJldHVybjsgfQogICAgaWYgKHN0YXRlLm1lbWJlcnMubGVuZ3RoID09PSAwKXsgc2hvd1RvYXN0KCfst6jtlanrkJwg7JeF66y06rCAIOyXhuyWtOyalCcpOyByZXR1cm47IH0KICAgIHZhciBhcmNoID0gbG9hZEFyY2hpdmUoKTsKICAgIHZhciBjdXJLZXkgPSBnZXRJc29XZWVrS2V5KHRvRGF0ZShzdGF0ZS5tZWV0aW5nRGF0ZSkpOwogICAgdmFyIGtleXMgPSBPYmplY3Qua2V5cyhhcmNoKTsKICAgIGlmIChrZXlzLmluZGV4T2YoY3VyS2V5KSA9PT0gLTEpIGtleXMucHVzaChjdXJLZXkpOwogICAga2V5cy5zb3J0KCk7CiAgICB2YXIgd2IgPSBYTFNYLnV0aWxzLmJvb2tfbmV3KCk7CiAgICBrZXlzLmZvckVhY2goZnVuY3Rpb24oayl7CiAgICAgIHZhciBwYXlsb2FkID0gKGsgPT09IGN1cktleSkgPyBidWlsZFRlYW1QYXlsb2FkKCkgOiBhcmNoW2tdOwogICAgICBpZiAoIXBheWxvYWQgfHwgIXBheWxvYWQubWVtYmVycyB8fCBwYXlsb2FkLm1lbWJlcnMubGVuZ3RoID09PSAwKSByZXR1cm47CiAgICAgIHZhciByb3dzID0gYnVpbGRTaGVldFJvd3MocGF5bG9hZCk7CiAgICAgIHZhciB3cyA9IFhMU1gudXRpbHMuYW9hX3RvX3NoZWV0KHJvd3MpOwogICAgICB2YXIgc2hlZXROYW1lID0gc2hlZXRMYWJlbEZvcihwYXlsb2FkLCBrKTsKICAgICAgWExTWC51dGlscy5ib29rX2FwcGVuZF9zaGVldCh3Yiwgd3MsIHNoZWV0TmFtZSk7CiAgICB9KTsKICAgIGlmICh3Yi5TaGVldE5hbWVzLmxlbmd0aCA9PT0gMCl7IHNob3dUb2FzdCgn7KCA7J6l7ZWgIOuNsOydtO2EsOqwgCDsl4bslrTsmpQnKTsgcmV0dXJuOyB9CiAgICB2YXIgZm5hbWUgPSAoc3RhdGUuY29tcGFueU5hbWUgfHwgJ+yjvOqwhO2ajOydmCcpICsgJ1/so7zqsITrs7Tqs6Bf66qo7J2MLnhsc3gnOwogICAgWExTWC53cml0ZUZpbGUod2IsIGZuYW1lKTsKICAgIHNob3dUb2FzdCgn7JeR7IWAIO2MjOydvOuhnCDsoIDsnqXtlojslrTsmpQgKOyjvOywqOuzhCDsi5ztirgpJyk7CiAgfSk7CgogIGZ1bmN0aW9uIG1vbnRoS2V5T2YoZGF0ZVN0cil7CiAgICB2YXIgZCA9IHRvRGF0ZShkYXRlU3RyKTsKICAgIHJldHVybiBkLmdldEZ1bGxZZWFyKCkgKyAnLScgKyAoJzAnKyhkLmdldE1vbnRoKCkrMSkpLnNsaWNlKC0yKTsKICB9CgogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1leGNlbC1iYWNrdXAnKSwgZnVuY3Rpb24oKXsKICAgIGlmICh0eXBlb2YgWExTWCA9PT0gJ3VuZGVmaW5lZCcpeyBzaG93VG9hc3QoJ+yXkeyFgCDrnbzsnbTruIzrn6zrpqzrpbwg67aI65+s7Jik7KeAIOuqu+2WiOyWtOyalCcpOyByZXR1cm47IH0KICAgIHZhciBhcmNoID0gbG9hZEFyY2hpdmUoKTsKICAgIHZhciBjdXJLZXkgPSBnZXRJc29XZWVrS2V5KHRvRGF0ZShzdGF0ZS5tZWV0aW5nRGF0ZSkpOwogICAgdmFyIGFsbFdlZWtzID0ge307CiAgICBmb3IgKHZhciBrIGluIGFyY2gpeyBpZiAoYXJjaC5oYXNPd25Qcm9wZXJ0eShrKSkgYWxsV2Vla3Nba10gPSBhcmNoW2tdOyB9CiAgICBhbGxXZWVrc1tjdXJLZXldID0gYnVpbGRUZWFtUGF5bG9hZCgpOwoKICAgIHZhciBieU1vbnRoID0ge307CiAgICB2YXIgd2Vla0tleXMgPSBPYmplY3Qua2V5cyhhbGxXZWVrcykuc29ydCgpOwogICAgd2Vla0tleXMuZm9yRWFjaChmdW5jdGlvbih3ayl7CiAgICAgIHZhciBwYXlsb2FkID0gYWxsV2Vla3Nbd2tdOwogICAgICBpZiAoIXBheWxvYWQgfHwgIXBheWxvYWQubWVldGluZ0RhdGUpIHJldHVybjsKICAgICAgdmFyIG1rID0gbW9udGhLZXlPZihwYXlsb2FkLm1lZXRpbmdEYXRlKTsKICAgICAgaWYgKCFieU1vbnRoW21rXSkgYnlNb250aFtta10gPSBbXTsKICAgICAgYnlNb250aFtta10ucHVzaCh7IHdlZWtLZXk6IHdrLCBwYXlsb2FkOiBwYXlsb2FkIH0pOwogICAgfSk7CgogICAgdmFyIHdiID0gWExTWC51dGlscy5ib29rX25ldygpOwogICAgdmFyIG1vbnRoS2V5cyA9IE9iamVjdC5rZXlzKGJ5TW9udGgpLnNvcnQoKTsKICAgIG1vbnRoS2V5cy5mb3JFYWNoKGZ1bmN0aW9uKG1rKXsKICAgICAgdmFyIHJvd3MgPSBbXTsKICAgICAgYnlNb250aFtta10uZm9yRWFjaChmdW5jdGlvbihlbnRyeSl7CiAgICAgICAgdmFyIHAgPSBlbnRyeS5wYXlsb2FkOwogICAgICAgIHJvd3MucHVzaChbJ+yjvOywqCcsIGVudHJ5LndlZWtLZXksICftmozsnZjrgqDsp5wnLCBwLm1lZXRpbmdEYXRlfHwnJywgJ+2ajOyCrOuqhScsIHAuY29tcGFueU5hbWV8fCcnXSk7CiAgICAgICAgcm93cy5wdXNoKFsn7J247JuQJywgcC5hdHRlbmRlZUNvdW50fHwnJywgJ+yblOuqqe2RnCcsIHAubW9udGhHb2FsfHwnJywgJ+uFhOuqqe2RnCcsIHAueWVhckdvYWx8fCcnXSk7CiAgICAgICAgcm93cy5wdXNoKFsn6rO17Ya16rO87KCcJywgcC5jb21tb25Ob3RlfHwnJ10pOwogICAgICAgIHJvd3MucHVzaChbJ+ydtOumhCcsJ+uLtOuLuScsJ+yngOuCnOyjvCDsl4XrrLQnLCfsnbTrsojso7wg7JeF66y0Jywn67mE6rOgJ10pOwogICAgICAgIChwLm1lbWJlcnN8fFtdKS5mb3JFYWNoKGZ1bmN0aW9uKG0pewogICAgICAgICAgcm93cy5wdXNoKFttLm5hbWV8fCcnLCBtLnJvbGV8fCcnLCBtLmxhc3RXZWVrfHwnJywgbS50aGlzV2Vla3x8JycsIG0ubm90ZXx8JyddKTsKICAgICAgICB9KTsKICAgICAgICByb3dzLnB1c2goW10pOwogICAgICB9KTsKICAgICAgdmFyIHdzID0gWExTWC51dGlscy5hb2FfdG9fc2hlZXQocm93cyk7CiAgICAgIHZhciBzaGVldE5hbWUgPSBtay5zbGljZSgwLDMxKTsKICAgICAgWExTWC51dGlscy5ib29rX2FwcGVuZF9zaGVldCh3Yiwgd3MsIHNoZWV0TmFtZSk7CiAgICB9KTsKCiAgICB2YXIgZGF0YVNoZWV0ID0gWExTWC51dGlscy5hb2FfdG9fc2hlZXQoW1tKU09OLnN0cmluZ2lmeShhbGxXZWVrcyldXSk7CiAgICBYTFNYLnV0aWxzLmJvb2tfYXBwZW5kX3NoZWV0KHdiLCBkYXRhU2hlZXQsICdfZGF0YScpOwoKICAgIGlmICh3Yi5TaGVldE5hbWVzLmxlbmd0aCA9PT0gMCl7IHNob3dUb2FzdCgn7KCA7J6l7ZWgIOuNsOydtO2EsOqwgCDsl4bslrTsmpQnKTsgcmV0dXJuOyB9CiAgICB2YXIgZm5hbWUgPSAoc3RhdGUuY29tcGFueU5hbWUgfHwgJ+yjvOqwhO2ajOydmCcpICsgJ1/soITssrTrsLHsl4UueGxzeCc7CiAgICBYTFNYLndyaXRlRmlsZSh3YiwgZm5hbWUpOwogICAgc2hvd1RvYXN0KCfsoITssrQg67Cx7JeFIO2MjOydvOydhCDsoIDsnqXtlojslrTsmpQnKTsKICB9KTsKCiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWV4Y2VsLXJlc3RvcmUnKSwgZnVuY3Rpb24oKXsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZXhjZWwtcmVzdG9yZS1pbnB1dCcpLmNsaWNrKCk7CiAgfSk7CiAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1leGNlbC1yZXN0b3JlLWlucHV0JykuYWRkRXZlbnRMaXN0ZW5lcignY2hhbmdlJywgZnVuY3Rpb24oZSl7CiAgICB2YXIgZmlsZSA9IGUudGFyZ2V0LmZpbGVzICYmIGUudGFyZ2V0LmZpbGVzWzBdOwogICAgaWYgKCFmaWxlKSByZXR1cm47CiAgICBpZiAodHlwZW9mIFhMU1ggPT09ICd1bmRlZmluZWQnKXsgc2hvd1RvYXN0KCfsl5HshYAg65287J2067iM65+s66as66W8IOu2iOufrOyYpOyngCDrqrvtlojslrTsmpQnKTsgcmV0dXJuOyB9CiAgICB2YXIgcmVhZGVyID0gbmV3IEZpbGVSZWFkZXIoKTsKICAgIHJlYWRlci5vbmxvYWQgPSBmdW5jdGlvbihldil7CiAgICAgIHRyeSB7CiAgICAgICAgdmFyIGRhdGEgPSBuZXcgVWludDhBcnJheShldi50YXJnZXQucmVzdWx0KTsKICAgICAgICB2YXIgd2IgPSBYTFNYLnJlYWQoZGF0YSwgeyB0eXBlOidhcnJheScgfSk7CiAgICAgICAgdmFyIGRhdGFTaGVldCA9IHdiLlNoZWV0c1snX2RhdGEnXTsKICAgICAgICBpZiAoIWRhdGFTaGVldCl7IHNob3dUb2FzdCgn67Cx7JeFIOuNsOydtO2EsOulvCDssL7snYQg7IiYIOyXhuyWtOyalCcpOyByZXR1cm47IH0KICAgICAgICB2YXIgY2VsbCA9IGRhdGFTaGVldFsnQTEnXTsKICAgICAgICBpZiAoIWNlbGwgfHwgIWNlbGwudil7IHNob3dUb2FzdCgn67Cx7JeFIOuNsOydtO2EsOulvCDssL7snYQg7IiYIOyXhuyWtOyalCcpOyByZXR1cm47IH0KICAgICAgICB2YXIgYWxsV2Vla3MgPSBKU09OLnBhcnNlKGNlbGwudik7CiAgICAgICAgdmFyIGFyY2ggPSBsb2FkQXJjaGl2ZSgpOwogICAgICAgIHZhciBsYXRlc3RLZXkgPSAnJywgbGF0ZXN0RGF0ZSA9ICcnOwogICAgICAgIGZvciAodmFyIHdrIGluIGFsbFdlZWtzKXsKICAgICAgICAgIGlmICghYWxsV2Vla3MuaGFzT3duUHJvcGVydHkod2spKSBjb250aW51ZTsKICAgICAgICAgIGFyY2hbd2tdID0gYWxsV2Vla3Nbd2tdOwogICAgICAgICAgaWYgKGFsbFdlZWtzW3drXS5tZWV0aW5nRGF0ZSAmJiBhbGxXZWVrc1t3a10ubWVldGluZ0RhdGUgPiBsYXRlc3REYXRlKXsKICAgICAgICAgICAgbGF0ZXN0RGF0ZSA9IGFsbFdlZWtzW3drXS5tZWV0aW5nRGF0ZTsKICAgICAgICAgICAgbGF0ZXN0S2V5ID0gd2s7CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICAgIHNhdmVBcmNoaXZlKGFyY2gpOwogICAgICAgIGlmIChsYXRlc3RLZXkpewogICAgICAgICAgdmFyIHNuYXAgPSBhcmNoW2xhdGVzdEtleV07CiAgICAgICAgICBwdXNoVW5kbygpOwogICAgICAgICAgc3RhdGUuY29tcGFueU5hbWUgPSBzbmFwLmNvbXBhbnlOYW1lIHx8ICcnOwogICAgICAgICAgc3RhdGUubWVldGluZ0RhdGUgPSBzbmFwLm1lZXRpbmdEYXRlIHx8IHN0YXRlLm1lZXRpbmdEYXRlOwogICAgICAgICAgc3RhdGUuYXR0ZW5kZWVDb3VudCA9IHNuYXAuYXR0ZW5kZWVDb3VudCB8fCAnJzsKICAgICAgICAgIHN0YXRlLm1vbnRoR29hbCA9IHNuYXAubW9udGhHb2FsIHx8ICcnOwogICAgICAgICAgc3RhdGUueWVhckdvYWwgPSBzbmFwLnllYXJHb2FsIHx8ICcnOwogICAgICAgICAgc3RhdGUuY29tbW9uTm90ZSA9IHNuYXAuY29tbW9uTm90ZSB8fCAnJzsKICAgICAgICAgIHN0YXRlLm1lbWJlcnMgPSBzbmFwLm1lbWJlcnMgfHwgW107CiAgICAgICAgICBzdGF0ZS5leGVjTGlzdCA9IHNuYXAuZXhlY0xpc3QgfHwgW107CiAgICAgICAgICBhZnRlclN0YXRlQ2hhbmdlKCk7CiAgICAgICAgICBzYXZlTm93KCk7CiAgICAgICAgfQogICAgICAgIHNob3dUb2FzdCgn67Cx7JeF7J2EIOu2iOufrOyZlOyWtOyalCAoJyArIE9iamVjdC5rZXlzKGFsbFdlZWtzKS5sZW5ndGggKyAn6rCcIOyjvOywqCknKTsKICAgICAgfSBjYXRjaChlcnIpewogICAgICAgIHNob3dUb2FzdCgn7YyM7J287J2EIOydveuKlCDspJEg66y47KCc6rCAIOyDneqyvOyWtOyalCcpOwogICAgICB9CiAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtZXhjZWwtcmVzdG9yZS1pbnB1dCcpLnZhbHVlID0gJyc7CiAgICB9OwogICAgcmVhZGVyLnJlYWRBc0FycmF5QnVmZmVyKGZpbGUpOwogIH0sIGZhbHNlKTsKCiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXVuZG8nKSwgZnVuY3Rpb24oKXsKICAgIGlmICh1bmRvU3RhY2subGVuZ3RoID09PSAwKXsgc2hvd1RvYXN0KCfrkJjrj4zrprQg64K07Jqp7J20IOyXhuyWtOyalCcpOyByZXR1cm47IH0KICAgIHJlZG9TdGFjay5wdXNoKHNuYXBzaG90KCkpOwogICAgc3RhdGUgPSBKU09OLnBhcnNlKHVuZG9TdGFjay5wb3AoKSk7CiAgICBhZnRlclN0YXRlQ2hhbmdlKCk7CiAgICBzYXZlTm93KCk7CiAgICBzaG93VG9hc3QoJ+uQmOuPjOuguOyKteuLiOuLpCcpOwogIH0pOwogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1yZWRvJyksIGZ1bmN0aW9uKCl7CiAgICBpZiAocmVkb1N0YWNrLmxlbmd0aCA9PT0gMCl7IHNob3dUb2FzdCgn65CY7IK066a0IOuCtOyaqeydtCDsl4bslrTsmpQnKTsgcmV0dXJuOyB9CiAgICB1bmRvU3RhY2sucHVzaChzbmFwc2hvdCgpKTsKICAgIHN0YXRlID0gSlNPTi5wYXJzZShyZWRvU3RhY2sucG9wKCkpOwogICAgYWZ0ZXJTdGF0ZUNoYW5nZSgpOwogICAgc2F2ZU5vdygpOwogICAgc2hvd1RvYXN0KCfrkJjsgrTroLjsirXri4jri6QnKTsKICB9KTsKCiAgZnVuY3Rpb24gYWZ0ZXJTdGF0ZUNoYW5nZSgpewogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1jb21wYW55LW5hbWUnKS52YWx1ZSA9IHN0YXRlLmNvbXBhbnlOYW1lIHx8ICcnOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1tZWV0aW5nLWRhdGUnKS52YWx1ZSA9IHN0YXRlLm1lZXRpbmdEYXRlOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1hdHRlbmRlZS1jb3VudCcpLnZhbHVlID0gc3RhdGUuYXR0ZW5kZWVDb3VudCB8fCAnJzsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtbW9udGgtZ29hbCcpLnZhbHVlID0gc3RhdGUubW9udGhHb2FsIHx8ICcnOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS15ZWFyLWdvYWwnKS52YWx1ZSA9IHN0YXRlLnllYXJHb2FsIHx8ICcnOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1jb21tb24tbm90ZScpLnZhbHVlID0gc3RhdGUuY29tbW9uTm90ZSB8fCAnJzsKICAgIHZhciBnZCA9IHRvRGF0ZShzdGF0ZS5tZWV0aW5nRGF0ZSk7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW1vbnRoLWdvYWwtbGFiZWwnKS50ZXh0Q29udGVudCA9IChnZC5nZXRNb250aCgpKzEpICsgJ+yblOuqqe2RnCc7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXllYXItZ29hbC1sYWJlbCcpLnRleHRDb250ZW50ID0gZ2QuZ2V0RnVsbFllYXIoKSArICfrhYTrqqntkZwnOwogICAgaWYgKCFzdGF0ZS52aWV3Rm9ybWF0KSBzdGF0ZS52aWV3Rm9ybWF0ID0gJ2NhcmQnOwogICAgaWYgKCFzdGF0ZS5jb2xvclRoZW1lKSBzdGF0ZS5jb2xvclRoZW1lID0gJ2dyZWVuJzsKICAgIGlmICghc3RhdGUuZnNCYWNrZ3JvdW5kKSBzdGF0ZS5mc0JhY2tncm91bmQgPSAnI2ZmZmZmZic7CiAgICB1cGRhdGVGb3JtYXRCdXR0b25zKCk7CiAgICB1cGRhdGVEZXNpZ25CdXR0b25zKCk7CiAgICB1cGRhdGVUaXRsZURpc3BsYXlzKCk7CiAgICByZW5kZXJNZW1iZXJMaXN0KCk7CiAgICByZW5kZXJFeGVjTGlzdCgpOwogIH0KCiAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1jb21wYW55LW5hbWUnKS5hZGRFdmVudExpc3RlbmVyKCdpbnB1dCcsIGZ1bmN0aW9uKCl7CiAgICBzdGF0ZS5jb21wYW55TmFtZSA9IHRoaXMudmFsdWU7CiAgICB1cGRhdGVUaXRsZURpc3BsYXlzKCk7CiAgICBzYXZlTm93KCk7CiAgfSwgZmFsc2UpOwogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtbWVldGluZy1kYXRlJykuYWRkRXZlbnRMaXN0ZW5lcignY2hhbmdlJywgZnVuY3Rpb24oKXsKICAgIHN0YXRlLm1lZXRpbmdEYXRlID0gdGhpcy52YWx1ZTsKICAgIHVwZGF0ZVRpdGxlRGlzcGxheXMoKTsKICAgIHJlbmRlck1lbWJlckxpc3QoKTsKICAgIHZhciBnZCA9IHRvRGF0ZShzdGF0ZS5tZWV0aW5nRGF0ZSk7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW1vbnRoLWdvYWwtbGFiZWwnKS50ZXh0Q29udGVudCA9IChnZC5nZXRNb250aCgpKzEpICsgJ+yblOuqqe2RnCc7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXllYXItZ29hbC1sYWJlbCcpLnRleHRDb250ZW50ID0gZ2QuZ2V0RnVsbFllYXIoKSArICfrhYTrqqntkZwnOwogICAgc2F2ZU5vdygpOwogIH0sIGZhbHNlKTsKICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWF0dGVuZGVlLWNvdW50JykuYWRkRXZlbnRMaXN0ZW5lcignY2hhbmdlJywgZnVuY3Rpb24oKXsKICAgIHZhciB0YXJnZXQgPSBwYXJzZUludCh0aGlzLnZhbHVlLCAxMCk7CiAgICBzdGF0ZS5hdHRlbmRlZUNvdW50ID0gdGhpcy52YWx1ZTsKICAgIGlmICghaXNOYU4odGFyZ2V0KSAmJiB0YXJnZXQgPiBzdGF0ZS5tZW1iZXJzLmxlbmd0aCl7CiAgICAgIHB1c2hVbmRvKCk7CiAgICAgIHZhciBhZGRlZCA9IDA7CiAgICAgIHdoaWxlIChzdGF0ZS5tZW1iZXJzLmxlbmd0aCA8IHRhcmdldCl7CiAgICAgICAgc3RhdGUubWVtYmVycy5wdXNoKHsgaWQ6IGdlbklkKCksIG5hbWU6JycsIHJvbGU6JycsIGxhc3RXZWVrOicnLCB0aGlzV2VlazonJywgbm90ZTonJywgc3RhdHVzOidwcm9ncmVzcycsIGF3YXk6JycgfSk7CiAgICAgICAgYWRkZWQrKzsKICAgICAgfQogICAgICByZW5kZXJNZW1iZXJMaXN0KCk7CiAgICAgIHNob3dUb2FzdChhZGRlZCArICfrqoXrtoQg67mIIO2WieydhCDstpTqsIDtlojslrTsmpQnKTsKICAgIH0KICAgIHNhdmVOb3coKTsKICB9LCBmYWxzZSk7CiAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1tb250aC1nb2FsJykuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCBmdW5jdGlvbigpewogICAgc3RhdGUubW9udGhHb2FsID0gdGhpcy52YWx1ZTsKICAgIHNhdmVOb3coKTsKICB9LCBmYWxzZSk7CiAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS15ZWFyLWdvYWwnKS5hZGRFdmVudExpc3RlbmVyKCdpbnB1dCcsIGZ1bmN0aW9uKCl7CiAgICBzdGF0ZS55ZWFyR29hbCA9IHRoaXMudmFsdWU7CiAgICBzYXZlTm93KCk7CiAgfSwgZmFsc2UpOwogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtY29tbW9uLW5vdGUnKS5hZGRFdmVudExpc3RlbmVyKCdpbnB1dCcsIGZ1bmN0aW9uKCl7CiAgICBzdGF0ZS5jb21tb25Ob3RlID0gdGhpcy52YWx1ZTsKICAgIHNhdmVOb3coKTsKICB9LCBmYWxzZSk7CgogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1yZXNldC1hbGwnKSwgZnVuY3Rpb24oKXsKICAgIHZhciBhcmNoID0gbG9hZEFyY2hpdmUoKTsKICAgIHZhciBwYXN0Q291bnQgPSBPYmplY3Qua2V5cyhhcmNoKS5sZW5ndGg7CiAgICB2YXIgbXNnMSA9ICfsoJXrp5Ag7LSI6riw7ZmU7ZWg6rmM7JqUPyDri6TsnYwg64K07Jqp7J20IOuqqOuRkCDsp4Dsm4zsoLjsmpQ6XG5cbicgKwogICAgICAnwrcg7YyA7JuQIOyghOyytCwg7J6E7JuQ7J287KCVLCDqs7XthrXqs7zsoJxcbicgKwogICAgICAnwrcg7KeA6riI6rmM7KeAIOyggOyepeuQnCDsp4Drgpwg7KO87LCoIOq4sOuhnSAnICsgKHBhc3RDb3VudCA+IDAgPyBwYXN0Q291bnQgKyAn6rCcJyA6ICcnKSArICcg4oCUICLil4Ag7KeA64KcIuycvOuhnCDrs7TrjZgg6rO86rGwIOuNsOydtO2EsOuPhCDtj6ztlajsnbTsl5DsmpQuIOydtOuyiOyjvCDrgrTsmqnsnYAg7J6Q64+Z7Jy866GcIOyngOuCnOyjvOuhnCDrgqjsp4Ag7JWK7Jy864uILCDstIjquLDtmZTtlZjrqbQg6re4IOq4sOuhneuPhCDtlajqu5gg7IKs65287KC47JqUXG4nICsKICAgICAgJ8K3IOuCtCDsl4XrrLQg7J6F66Cl7J2YIO2VoCDsnbwg66qp66GdXG5cbicgKwogICAgICAn7J20IOyekeyXheydgCDrkJjrj4zrprQg7IiYIOyXhuyWtOyalC4g6rOE7IaN7ZWg6rmM7JqUPyc7CiAgICBpZiAoIXdpbmRvdy5jb25maXJtKG1zZzEpKSByZXR1cm47CiAgICB2YXIga2VlcElucHV0ID0gd2luZG93LmNvbmZpcm0oJ1vsnoXroKVdIOyEueyFmOydmCDtmozsgqzrqoUgLyDtmozsnZjrgqDsp5wgLyDsnbjsm5AgLyDrqqntkZzripQg6re464yA66GcIOuRmOq5jOyalD9cblxu7ZmV7J24ID0g7Jyg7KeAIC8g7Leo7IaMID0g7J206rKD64+EIO2VqOq7mCDstIjquLDtmZQnKTsKICAgIGlmICghd2luZG93LmNvbmZpcm0oJ+uniOyngOuniSDtmZXsnbjsnbTsl5DsmpQuIOygleunkCDstIjquLDtmZTtlaDquYzsmpQ/IOuzteq1rO2VoCDsiJgg7JeG7Ja07JqULicpKSByZXR1cm47CgogICAgdmFyIGtlZXBDb21wYW55TmFtZSA9IHN0YXRlLmNvbXBhbnlOYW1lLCBrZWVwTWVldGluZ0RhdGUgPSBzdGF0ZS5tZWV0aW5nRGF0ZSwKICAgICAga2VlcEF0dGVuZGVlQ291bnQgPSBzdGF0ZS5hdHRlbmRlZUNvdW50LCBrZWVwTW9udGhHb2FsID0gc3RhdGUubW9udGhHb2FsLCBrZWVwWWVhckdvYWwgPSBzdGF0ZS55ZWFyR29hbDsKCiAgICB0cnkgeyBsb2NhbFN0b3JhZ2UucmVtb3ZlSXRlbShTVE9SQUdFX0tFWSk7IH0gY2F0Y2goZSl7fQogICAgdHJ5IHsgbG9jYWxTdG9yYWdlLnJlbW92ZUl0ZW0oQVJDSElWRV9LRVkpOyB9IGNhdGNoKGUpe30KICAgIHRyeSB7IGxvY2FsU3RvcmFnZS5yZW1vdmVJdGVtKE1ZVEFTS1NfS0VZKTsgfSBjYXRjaChlKXt9CiAgICB0cnkgeyBsb2NhbFN0b3JhZ2UucmVtb3ZlSXRlbShMQVNUTElOS19LRVkpOyB9IGNhdGNoKGUpe30KCiAgICBzdGF0ZS5sYXN0UmFuZ2VPdmVycmlkZSA9ICcnOwogICAgc3RhdGUudGhpc1JhbmdlT3ZlcnJpZGUgPSAnJzsKICAgIHN0YXRlLmNvbW1vbk5vdGUgPSAnJzsKICAgIHN0YXRlLmV4ZWNMaXN0ID0gW107CiAgICBzdGF0ZS52aWV3Rm9ybWF0ID0gJ2NhcmQnOwogICAgaWYgKGtlZXBJbnB1dCl7CiAgICAgIHN0YXRlLmNvbXBhbnlOYW1lID0ga2VlcENvbXBhbnlOYW1lOwogICAgICBzdGF0ZS5tZWV0aW5nRGF0ZSA9IGtlZXBNZWV0aW5nRGF0ZTsKICAgICAgc3RhdGUuYXR0ZW5kZWVDb3VudCA9IGtlZXBBdHRlbmRlZUNvdW50OwogICAgICBzdGF0ZS5tb250aEdvYWwgPSBrZWVwTW9udGhHb2FsOwogICAgICBzdGF0ZS55ZWFyR29hbCA9IGtlZXBZZWFyR29hbDsKICAgIH0gZWxzZSB7CiAgICAgIHN0YXRlLmNvbXBhbnlOYW1lID0gJyc7CiAgICAgIHN0YXRlLmF0dGVuZGVlQ291bnQgPSAnJzsKICAgICAgc3RhdGUubW9udGhHb2FsID0gJyc7CiAgICAgIHN0YXRlLnllYXJHb2FsID0gJyc7CiAgICAgIHZhciB0b2RheSA9IG5ldyBEYXRlKCk7CiAgICAgIHN0YXRlLm1lZXRpbmdEYXRlID0gdG9kYXkuZ2V0RnVsbFllYXIoKSArICctJyArICgnMCcrKHRvZGF5LmdldE1vbnRoKCkrMSkpLnNsaWNlKC0yKSArICctJyArICgnMCcrdG9kYXkuZ2V0RGF0ZSgpKS5zbGljZSgtMik7CiAgICB9CiAgICBzdGF0ZS5tZW1iZXJzID0gWwogICAgICB7IGlkOiBnZW5JZCgpLCBuYW1lOicnLCByb2xlOicnLCBsYXN0V2VlazonJywgdGhpc1dlZWs6JycsIG5vdGU6JycsIHN0YXR1czoncHJvZ3Jlc3MnLCBhd2F5OicnIH0sCiAgICAgIHsgaWQ6IGdlbklkKCksIG5hbWU6JycsIHJvbGU6JycsIGxhc3RXZWVrOicnLCB0aGlzV2VlazonJywgbm90ZTonJywgc3RhdHVzOidwcm9ncmVzcycsIGF3YXk6JycgfQogICAgXTsKICAgIHVuZG9TdGFjayA9IFtdOwogICAgcmVkb1N0YWNrID0gW107CiAgICBteVRhc2tzID0geyBsYXN0V2VlazogW10sIHRoaXNXZWVrOiBbXSwgc2F2ZWRXZWVrOiAnJyB9OwoKICAgIGxvYWRNeVRhc2tzKCk7CiAgICBhZnRlclN0YXRlQ2hhbmdlKCk7CiAgICByZW5kZXJUYXNrTGlzdCgnbGFzdFdlZWsnKTsKICAgIHJlbmRlclRhc2tMaXN0KCd0aGlzV2VlaycpOwogICAgc2F2ZU5vdygpOwogICAgc2hvd1RvYXN0KCfstIjquLDtmZTrkJDslrTsmpQnKTsKICB9KTsKCiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXF1aWNrLXNoYXJlJyksIGZ1bmN0aW9uKCl7CiAgICBpZiAoc3RhdGUubWVtYmVycy5sZW5ndGggPT09IDApeyBzaG93VG9hc3QoJ+y3qO2VqeuQnCDsl4XrrLTqsIAg7JeG7Ja07JqUJyk7IHJldHVybjsgfQogICAgdmFyIGNvZGUgPSBjb21wcmVzcyhidWlsZFRlYW1QYXlsb2FkKCkpOwogICAgdmFyIHVybCA9IGxvY2F0aW9uLm9yaWdpbiArIGxvY2F0aW9uLnBhdGhuYW1lICsgJz90PScgKyBjb2RlOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1zaGFyZS1sb25nLWxpbmsnKS50ZXh0Q29udGVudCA9IHVybDsKICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtc2hhcmUtbG9uZy1saW5rJykuc2V0QXR0cmlidXRlKCdkYXRhLXVybCcsIHVybCk7CiAgICB2YXIgc2hvcnRCb3ggPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXNoYXJlLXNob3J0LWxpbmsnKTsKICAgIHNob3J0Qm94LnRleHRDb250ZW50ID0gJ+yDneyEsSDspJEuLi4nOwogICAgc2hvcnRCb3gucmVtb3ZlQXR0cmlidXRlKCdkYXRhLXVybCcpOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1zaGFyZS1iZycpLmNsYXNzTmFtZSA9ICd3cmEtbW9kYWwtYmcgd3JhLXNob3cnOwogICAgc2hvcnRlblVybCh1cmwsIGZ1bmN0aW9uKHNob3J0KXsKICAgICAgc2hvcnRCb3gudGV4dENvbnRlbnQgPSBzaG9ydDsKICAgICAgc2hvcnRCb3guc2V0QXR0cmlidXRlKCdkYXRhLXVybCcsIHNob3J0KTsKICAgIH0pOwogIH0pOwogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1zaGFyZS1jbG9zZScpLCBmdW5jdGlvbigpewogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1zaGFyZS1iZycpLmNsYXNzTmFtZSA9ICd3cmEtbW9kYWwtYmcnOwogIH0pOwogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtc2hhcmUtYmcnKS5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uKGUpewogICAgaWYgKGUudGFyZ2V0LmlkID09PSAnd3JhLXNoYXJlLWJnJykgdGhpcy5jbGFzc05hbWUgPSAnd3JhLW1vZGFsLWJnJzsKICB9LCBmYWxzZSk7CiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXNoYXJlLWxpbmtvbmx5JyksIGZ1bmN0aW9uKCl7CiAgICB2YXIgc2hvcnQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXNoYXJlLXNob3J0LWxpbmsnKS5nZXRBdHRyaWJ1dGUoJ2RhdGEtdXJsJyk7CiAgICB2YXIgbG9uZyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtc2hhcmUtbG9uZy1saW5rJykuZ2V0QXR0cmlidXRlKCdkYXRhLXVybCcpOwogICAgY29weVRleHQoc2hvcnQgfHwgbG9uZyk7CiAgICBzaG93VG9hc3QoJ+unge2BrOqwgCDrs7XsgqzrkJDslrTsmpQnKTsKICB9KTsKICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtc2hhcmUtY29tbWVudCcpLCBmdW5jdGlvbigpewogICAgdmFyIHNob3J0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1zaGFyZS1zaG9ydC1saW5rJykuZ2V0QXR0cmlidXRlKCdkYXRhLXVybCcpOwogICAgdmFyIGxvbmcgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLXNoYXJlLWxvbmctbGluaycpLmdldEF0dHJpYnV0ZSgnZGF0YS11cmwnKTsKICAgIHZhciB1cmwgPSBzaG9ydCB8fCBsb25nOwogICAgdmFyIGZ1bGxUaXRsZSA9IGdldFRpdGxlUHJlZml4KHN0YXRlLm1lZXRpbmdEYXRlKTsKICAgIGNvcHlUZXh0KGZ1bGxUaXRsZSArICcg66eB7YGsIDogJyArIHVybCk7CiAgICBzaG93VG9hc3QoJ+uMk+q4gOyaqSDthY3siqTtirjqsIAg67O17IKs65CQ7Ja07JqUJyk7CiAgfSk7CgogIHZhciBMQVNUTElOS19LRVkgPSBQUkVGSVggKyAnbGFzdHdlZWtfbGluayc7CiAgZnVuY3Rpb24gcmVuZGVyTGFzdExpbmsoKXsKICAgIHZhciBzYXZlZCA9ICcnOwogICAgdHJ5IHsgc2F2ZWQgPSBsb2NhbFN0b3JhZ2UuZ2V0SXRlbShMQVNUTElOS19LRVkpIHx8ICcnOyB9IGNhdGNoKGUpe30KICAgIHZhciBib3ggPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWxhc3RsaW5rLXNhdmVkLWJveCcpOwogICAgaWYgKHNhdmVkKXsKICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1sYXN0bGluay1zYXZlZC1saW5rJykudGV4dENvbnRlbnQgPSBzYXZlZDsKICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1sYXN0bGluay1zYXZlZC1saW5rJykuc2V0QXR0cmlidXRlKCdkYXRhLXVybCcsIHNhdmVkKTsKICAgICAgYm94LnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snOwogICAgfSBlbHNlIHsKICAgICAgYm94LnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7CiAgICB9CiAgfQogIGJpbmRUYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1xdWljay1zYXZlJyksIGZ1bmN0aW9uKCl7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWxhc3RsaW5rLWlucHV0JykudmFsdWUgPSAnJzsKICAgIHJlbmRlckxhc3RMaW5rKCk7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWxhc3RsaW5rLWJnJykuY2xhc3NOYW1lID0gJ3dyYS1tb2RhbC1iZyB3cmEtc2hvdyc7CiAgfSk7CiAgYmluZFRhcChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWxhc3RsaW5rLWNsb3NlJyksIGZ1bmN0aW9uKCl7CiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLWxhc3RsaW5rLWJnJykuY2xhc3NOYW1lID0gJ3dyYS1tb2RhbC1iZyc7CiAgfSk7CiAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1sYXN0bGluay1iZycpLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24oZSl7CiAgICBpZiAoZS50YXJnZXQuaWQgPT09ICd3cmEtbGFzdGxpbmstYmcnKSB0aGlzLmNsYXNzTmFtZSA9ICd3cmEtbW9kYWwtYmcnOwogIH0sIGZhbHNlKTsKICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtbGFzdGxpbmstc2F2ZScpLCBmdW5jdGlvbigpewogICAgdmFyIHZhbCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtbGFzdGxpbmstaW5wdXQnKS52YWx1ZS50cmltKCk7CiAgICBpZiAoIXZhbCl7IHNob3dUb2FzdCgn66eB7YGs66W8IOyeheugpe2VtOyjvOyEuOyalCcpOyByZXR1cm47IH0KICAgIHRyeSB7IGxvY2FsU3RvcmFnZS5zZXRJdGVtKExBU1RMSU5LX0tFWSwgdmFsKTsgfSBjYXRjaChlKXt9CiAgICByZW5kZXJMYXN0TGluaygpOwogICAgc2hvd1RvYXN0KCfsoIDsnqXtlojslrTsmpQnKTsKICB9KTsKICBiaW5kVGFwKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtbGFzdGxpbmstc2F2ZWQtbGluaycpLCBmdW5jdGlvbigpewogICAgY29weVRleHQodGhpcy5nZXRBdHRyaWJ1dGUoJ2RhdGEtdXJsJykpOwogIH0pOwoKICBzZXRJbnRlcnZhbChzYXZlTm93LCA0MDAwKTsKCiAgZnVuY3Rpb24gbG9hZEZyb21VcmwoKXsKICAgIHZhciBxcyA9IGxvY2F0aW9uLnNlYXJjaDsKICAgIHZhciBtQWdnID0gcXMubWF0Y2goL1s/Jl10PShbXiZdKykvKTsKICAgIHZhciBtT25lID0gcXMubWF0Y2goL1s/Jl1kPShbXiZdKykvKTsKICAgIGlmIChtQWdnKXsKICAgICAgdmFyIHQgPSBkZWNvbXByZXNzKG1BZ2dbMV0pOwogICAgICBpZiAodCAmJiB0Lm1lbWJlcnMpewogICAgICAgIHN0YXRlLmNvbXBhbnlOYW1lID0gdC5jb21wYW55TmFtZSB8fCBzdGF0ZS5jb21wYW55TmFtZTsKICAgICAgICBzdGF0ZS5tZWV0aW5nRGF0ZSA9IHQubWVldGluZ0RhdGUgfHwgc3RhdGUubWVldGluZ0RhdGU7CiAgICAgICAgc3RhdGUuYXR0ZW5kZWVDb3VudCA9IHQuYXR0ZW5kZWVDb3VudCB8fCAnJzsKICAgICAgICBzdGF0ZS5tb250aEdvYWwgPSB0Lm1vbnRoR29hbCB8fCAnJzsKICAgICAgICBzdGF0ZS55ZWFyR29hbCA9IHQueWVhckdvYWwgfHwgJyc7CiAgICAgICAgc3RhdGUuY29tbW9uTm90ZSA9IHQuY29tbW9uTm90ZSB8fCAnJzsKICAgICAgICBzdGF0ZS5tZW1iZXJzID0gdC5tZW1iZXJzOwogICAgICAgIHN0YXRlLmV4ZWNMaXN0ID0gdC5leGVjTGlzdCB8fCBbXTsKICAgICAgICByZXR1cm4gdHJ1ZTsKICAgICAgfQogICAgfSBlbHNlIGlmIChtT25lKXsKICAgICAgdmFyIG0gPSBkZWNvbXByZXNzKG1PbmVbMV0pOwogICAgICBpZiAobSAmJiBtLmtpbmQgIT09ICdleGVjJyl7CiAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1uYW1lJykudmFsdWUgPSBtLm5hbWUgfHwgJyc7CiAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1yb2xlJykudmFsdWUgPSBtLnJvbGUgfHwgJyc7CiAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dyYS1teS1ub3RlJykudmFsdWUgPSBtLm5vdGUgfHwgJyc7CiAgICAgICAgaWYgKG0uYXdheSl7CiAgICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW15LWF3YXktY2hlY2snKS5jaGVja2VkID0gdHJ1ZTsKICAgICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3cmEtbXktYXdheS1ub3RlJykudmFsdWUgPSBtLmF3YXk7CiAgICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnd3JhLW15LWF3YXktbm90ZScpLnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snOwogICAgICAgIH0KICAgICAgICBzaG93VG9hc3QoJ+qzteycoOuQnCDrgrTsmqnsnYQg67aI65+s7JmU7Ja07JqUJyk7CiAgICAgIH0KICAgIH0KICAgIHJldHVybiBmYWxzZTsKICB9CgogIGZ1bmN0aW9uIGxvYWRGcm9tU3RvcmFnZSgpewogICAgdHJ5IHsKICAgICAgdmFyIHNhdmVkID0gbG9jYWxTdG9yYWdlLmdldEl0ZW0oU1RPUkFHRV9LRVkpOwogICAgICBpZiAoc2F2ZWQpewogICAgICAgIHZhciBwYXJzZWQgPSBKU09OLnBhcnNlKHNhdmVkKTsKICAgICAgICBpZiAocGFyc2VkICYmIHBhcnNlZC5tZW1iZXJzKSBzdGF0ZSA9IHBhcnNlZDsKICAgICAgfQogICAgfSBjYXRjaChlKXt9CiAgfQoKICB2YXIgbG9hZGVkRnJvbVVybCA9IGxvYWRGcm9tVXJsKCk7CiAgaWYgKCFsb2FkZWRGcm9tVXJsKSBsb2FkRnJvbVN0b3JhZ2UoKTsKICBpZiAoIXN0YXRlLmV4ZWNMaXN0KSBzdGF0ZS5leGVjTGlzdCA9IFtdOwogIGlmICghc3RhdGUudmlld0Zvcm1hdCkgc3RhdGUudmlld0Zvcm1hdCA9ICdjYXJkJzsKICBpZiAoc3RhdGUubWVtYmVycy5sZW5ndGggPT09IDApewogICAgc3RhdGUubWVtYmVycy5wdXNoKHsgaWQ6IGdlbklkKCksIG5hbWU6JycsIHJvbGU6JycsIGxhc3RXZWVrOicnLCB0aGlzV2VlazonJywgbm90ZTonJywgc3RhdHVzOidwcm9ncmVzcycsIGF3YXk6JycgfSk7CiAgICBzdGF0ZS5tZW1iZXJzLnB1c2goeyBpZDogZ2VuSWQoKSwgbmFtZTonJywgcm9sZTonJywgbGFzdFdlZWs6JycsIHRoaXNXZWVrOicnLCBub3RlOicnLCBzdGF0dXM6J3Byb2dyZXNzJywgYXdheTonJyB9KTsKICB9CgogIGlmICghc3RhdGUubWVldGluZ0RhdGUpewogICAgdmFyIHRvZGF5ID0gbmV3IERhdGUoKTsKICAgIHZhciB5ID0gdG9kYXkuZ2V0RnVsbFllYXIoKTsKICAgIHZhciBtbyA9ICgnMCcgKyAodG9kYXkuZ2V0TW9udGgoKSsxKSkuc2xpY2UoLTIpOwogICAgdmFyIGQgPSAoJzAnICsgdG9kYXkuZ2V0RGF0ZSgpKS5zbGljZSgtMik7CiAgICBzdGF0ZS5tZWV0aW5nRGF0ZSA9IHkgKyAnLScgKyBtbyArICctJyArIGQ7CiAgfQoKICAvLyAtLS0tLS0tLS0tIOyVhOy9lOuUlOyWuCjshLnshZgg7KCR6riwL+2OvOy5mOq4sCkgLS0tLS0tLS0tLQogIHZhciBhY2NIZWFkcyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJ1tkYXRhLWFjY10nKTsKICBmb3IgKHZhciBhaT0wOyBhaTxhY2NIZWFkcy5sZW5ndGg7IGFpKyspewogICAgKGZ1bmN0aW9uKGhlYWQpewogICAgICBiaW5kVGFwKGhlYWQsIGZ1bmN0aW9uKGUpewogICAgICAgIGlmIChlICYmIGUudGFyZ2V0ICYmIGUudGFyZ2V0LnRhZ05hbWUgPT09ICdCVVRUT04nICYmIGUudGFyZ2V0ICE9PSBoZWFkKSByZXR1cm47CiAgICAgICAgdmFyIGFjY0lkID0gaGVhZC5nZXRBdHRyaWJ1dGUoJ2RhdGEtYWNjJyk7CiAgICAgICAgdmFyIGJvZHkgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChhY2NJZCk7CiAgICAgICAgdmFyIGFycm93ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoYWNjSWQgKyAnLWFycm93Jyk7CiAgICAgICAgaWYgKCFib2R5KSByZXR1cm47CiAgICAgICAgdmFyIGlzT3BlbiA9IGJvZHkuc3R5bGUuZGlzcGxheSAhPT0gJ25vbmUnOwogICAgICAgIGJvZHkuc3R5bGUuZGlzcGxheSA9IGlzT3BlbiA/ICdub25lJyA6ICcnOwogICAgICAgIGlmIChhcnJvdykgYXJyb3cuY2xhc3NOYW1lID0gaXNPcGVuID8gJ3dyYS1hY2MtYXJyb3cgd3JhLWFjYy1jbG9zZWQnIDogJ3dyYS1hY2MtYXJyb3cnOwogICAgICAgIGlmIChpc09wZW4pIGhlYWQuY2xhc3NOYW1lICs9ICcgd3JhLWFjYy1jb2xsYXBzZWQnOwogICAgICAgIGVsc2UgaGVhZC5jbGFzc05hbWUgPSBoZWFkLmNsYXNzTmFtZS5yZXBsYWNlKC9ccyp3cmEtYWNjLWNvbGxhcHNlZC9nLCAnJyk7CiAgICAgIH0pOwogICAgfSkoYWNjSGVhZHNbYWldKTsKICB9CgogIHZhciBBQ0NfREVGQVVMVF9DTE9TRUQgPSBbJ3dyYS1hY2MtaW5wdXQnLCAnd3JhLWFjYy1jb21tb24nLCAnd3JhLWFjYy1leGVjJywgJ3dyYS1hY2Mtc2F2ZSddOwogIEFDQ19ERUZBVUxUX0NMT1NFRC5mb3JFYWNoKGZ1bmN0aW9uKGFjY0lkKXsKICAgIHZhciBib2R5ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoYWNjSWQpOwogICAgdmFyIGFycm93ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoYWNjSWQgKyAnLWFycm93Jyk7CiAgICB2YXIgaGVhZCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ1tkYXRhLWFjYz0iJyArIGFjY0lkICsgJyJdJyk7CiAgICBpZiAoYm9keSkgYm9keS5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnOwogICAgaWYgKGFycm93KSBhcnJvdy5jbGFzc05hbWUgPSAnd3JhLWFjYy1hcnJvdyB3cmEtYWNjLWNsb3NlZCc7CiAgICBpZiAoaGVhZCkgaGVhZC5jbGFzc05hbWUgKz0gJyB3cmEtYWNjLWNvbGxhcHNlZCc7CiAgfSk7CgogIGxvYWRNeVRhc2tzKCk7CiAgYWZ0ZXJTdGF0ZUNoYW5nZSgpOwogIHJlbmRlclRhc2tMaXN0KCdsYXN0V2VlaycpOwogIHJlbmRlclRhc2tMaXN0KCd0aGlzV2VlaycpOwogIHNhdmVOb3coKTsKCn0pKCk7</script> <script>(function(){var t=document.currentScript.previousElementSibling.textContent;var c=decodeURIComponent(escape(window.atob(t)));(new Function(c))();})();</script> 모두의계산기/주간회의취합_15 0-1.kr/17 계산기 업무 웹앱 주간회의 주간회의취합계산기 취합 회의 회의록 최매슨생 https://0-1.kr/17 https://0-1.kr/17#entry17comment Thu, 12 Nov 2020 14:27:48 +0900