:root{--ink:#102a43;--muted:#61748a;--line:#dbe8f4;--blue:#2580df;--blue-deep:#1264bd;--sky:#eef8ff;--cream:#fff9ef;--green:#03c75a;--shadow:0 16px 40px rgba(46,103,153,.12)}
*{box-sizing:border-box} [hidden]{display:none!important} html{scroll-behavior:smooth} body{margin:0;color:var(--ink);background:#fff;font-family:"Noto Sans KR",system-ui,sans-serif;word-break:keep-all} a{color:inherit} button,input,select{font:inherit} button,select{cursor:pointer} button:disabled{cursor:not-allowed;opacity:.48}.skip-link{position:fixed;left:16px;top:-80px;z-index:30;padding:12px 18px;background:#fff;border-radius:10px}.skip-link:focus{top:12px}
.site-header{position:sticky;top:14px;z-index:20;width:min(1180px,calc(100% - 32px));margin:14px auto 0;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.94);border:1px solid rgba(210,226,240,.9);border-radius:18px;box-shadow:0 10px 28px rgba(38,82,122,.12);backdrop-filter:blur(14px)}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;text-decoration:none}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:#173753;background:#ffd864;font-size:19px}.blog-button{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:12px;color:#fff;background:var(--green);font-weight:800;text-decoration:none;box-shadow:0 8px 22px rgba(3,199,90,.22)}.blog-button span,.blog-promo a span{display:grid;place-items:center;width:22px;height:22px;color:var(--green);background:#fff;border-radius:6px}
.hero{min-height:550px;margin-top:-80px;padding:145px max(32px,calc((100vw - 1180px)/2)) 64px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:30px;overflow:hidden;background:linear-gradient(135deg,#f7fbff 0%,#edf8ff 56%,#fffaf1 100%)}.hero-copy{position:relative;z-index:2}.eyebrow,.step{margin:0 0 12px;color:var(--blue-deep);font-weight:800}.hero h1{margin:0;font-family:"Gowun Dodum",sans-serif;font-size:clamp(46px,5vw,76px);line-height:1.17;letter-spacing:-.06em}.hero h1 em{color:var(--blue);font-style:normal}.hero-description{max-width:510px;margin:22px 0;color:var(--muted);font-size:17px;line-height:1.85}.privacy-note{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;padding:13px 16px;border:1px solid #cfe5f7;border-radius:16px;background:rgba(255,255,255,.88);color:#4d6579;font-size:14px;line-height:1.65}.privacy-note>span:first-child{font-size:24px}.privacy-note strong{color:#1768b8}.limit-note{margin:12px 0 0;color:#75869a;font-size:13px}.hero-art{position:relative;margin:0}.hero-art::before{content:"";position:absolute;inset:7% 2% -4% 8%;border-radius:50%;background:rgba(109,188,246,.16);filter:blur(20px)}.hero-art img{position:relative;display:block;width:100%;height:auto;border-radius:34px;box-shadow:var(--shadow)}
.tool-section{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:70px 0 76px}.section-heading{text-align:center}.section-heading h2,.notice-section h2,.source-section h2{margin:0;font-size:clamp(26px,3vw,38px);letter-spacing:-.04em}.section-heading>p:last-child{margin:14px 0 0;color:var(--muted)}.drop-zone{margin:32px auto 0;padding:42px 20px;display:grid;justify-items:center;gap:10px;text-align:center;border:2px dashed #b9d3e8;border-radius:26px;background:linear-gradient(135deg,#f9fcff,#eef8ff);transition:.2s}.drop-zone.dragging{border-color:var(--blue);background:#e4f3ff;transform:scale(1.005)}.drop-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:#fff;font-size:30px;box-shadow:0 7px 20px rgba(35,81,123,.1)}.drop-zone strong{font-size:20px}.drop-zone p{margin:0;color:var(--muted)}.drop-zone small,.card-note{color:#76889a;font-size:12px;line-height:1.7}.primary-button,.soft-button,.text-button{min-height:46px;padding:0 16px;border:0;border-radius:12px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.primary-button{color:#fff;background:var(--blue);box-shadow:0 9px 20px rgba(37,128,223,.18)}.primary-button:hover{background:var(--blue-deep)}.soft-button{color:var(--blue-deep);background:#e8f4ff}.text-button{color:#708196;background:transparent}.workspace{margin-top:44px}.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.workspace-head .step{margin-bottom:4px}.workspace-head h3{margin:0;font-size:24px}.workspace-actions{display:flex;align-items:center;gap:4px}.photo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.photo-item{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 7px 18px rgba(35,81,123,.06)}.photo-thumb{position:relative;display:grid;place-items:center;aspect-ratio:1;background:#f1f7fb;overflow:hidden}.photo-thumb img{width:100%;height:100%;object-fit:cover}.photo-check{position:absolute;top:8px;left:8px;display:grid;place-items:center;width:30px;height:30px;border:2px solid #fff;border-radius:9px;background:rgba(255,255,255,.94);box-shadow:0 2px 8px #0002}.photo-check input{width:17px;height:17px;margin:0;accent-color:var(--blue)}.photo-number{position:absolute;right:8px;top:8px;padding:3px 8px;color:#fff;background:#102a43b8;border-radius:999px;font-size:11px;font-weight:700}.photo-meta{padding:9px 10px 10px}.photo-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700}.photo-size{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:5px;color:var(--muted);font-size:11px}.move-actions{display:flex;gap:4px}.move-actions button,.remove-photo{width:25px;height:24px;padding:0;border:1px solid var(--line);border-radius:7px;color:var(--blue-deep);background:#fff;font-weight:800}.remove-photo{color:#d75555}.privacy-reminder{margin:16px 0 0;padding:12px 14px;border-radius:12px;color:#416b8c;background:#f0f8ff;font-size:13px}
.actions-grid{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.action-card{padding:24px;display:flex;flex-direction:column;align-items:flex-start;min-width:0;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 10px 28px rgba(35,81,123,.07)}.action-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:15px;font-size:22px;font-weight:800}.action-icon.blue{background:#eaf5ff;color:#2076cc}.action-icon.coral{background:#fff0ed;color:#df7564}.action-icon.green{background:#e9fff2;color:#21a15a}.action-icon.yellow{background:#fff8db;color:#ad8122}.action-card .step{margin-bottom:4px;font-size:13px}.action-card h3{margin:0;font-size:20px}.action-card>p:not(.step){margin:10px 0 16px;color:var(--muted);font-size:14px;line-height:1.7}.field-row{width:100%;display:grid;grid-template-columns:1.5fr .85fr .85fr;gap:10px;margin:2px 0 14px}.field-row label,.quality-control{display:grid;gap:7px;color:#536b80;font-size:12px;font-weight:700}.field-row input,.field-row select{width:100%;height:42px;padding:0 10px;border:1px solid #cfdeea;border-radius:10px;color:var(--ink);background:#fafdff}.mini-preview{width:100%;max-height:120px;overflow:auto;margin-bottom:14px;padding:11px 12px;border:1px solid #e4edf5;border-radius:11px;background:#f8fbfe;color:#627a8f;font-size:12px;line-height:1.8}.mini-preview .preview-row{display:flex;gap:8px;overflow-wrap:anywhere}.mini-preview .preview-old{color:#8191a1}.mini-preview .preview-new{color:#1768b8;font-weight:700}.full-button{width:100%;margin-top:auto}.gif-options,.compress-options{grid-template-columns:1fr 1fr}.selection-count{width:100%;margin:0 0 12px!important;padding:10px 12px;border-radius:10px;background:#f8fbfe}.selection-count strong{color:var(--blue-deep)}.selection-count span{display:block;margin-top:4px;font-size:12px}.gif-controls{width:100%;display:flex;gap:10px}.gif-controls>*{flex:1}.disabled-link{opacity:.5;pointer-events:none}.progress-area{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:9px;margin-top:12px;color:var(--muted);font-size:12px}.progress-area progress{width:100%;height:10px;accent-color:var(--blue)}.gif-preview{width:100%;margin-top:14px;padding:12px;display:grid;justify-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;background:#f8fbfe}.gif-preview img{display:block;max-width:100%;max-height:260px;border-radius:10px}.quality-control{width:100%;grid-template-columns:1fr auto;margin:0 0 16px}.quality-control input{grid-column:1/-1;width:100%;accent-color:var(--blue)}.date-example{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:4px 0 12px}.date-example span{padding:12px 5px;border-radius:10px;text-align:center;color:#526a80;background:#f4f8fb;font-size:11px;font-weight:700}.blog-promo{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;margin-top:30px;padding:18px 20px;color:#16452d;border:1px solid #a6e6c3;border-radius:18px;background:linear-gradient(135deg,#edfff5,#ddfaea);box-shadow:0 10px 28px rgba(3,199,90,.09)}.promo-icon{display:grid;place-items:center;width:48px;height:48px;background:#fff;border-radius:14px;font-size:1.65rem}.blog-promo strong{display:block;font-size:1.03rem}.blog-promo p{margin:3px 0 0;color:#3e6c54;font-size:.9rem}.blog-promo a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;color:#fff;background:var(--green);border-radius:12px;text-decoration:none;font-weight:800;white-space:nowrap}.status-message{min-height:24px;margin:14px 2px 0;color:var(--blue-deep);font-size:14px;font-weight:700}.status-message.error{color:#c34444}
.notice-section,.source-section{width:min(1180px,calc(100% - 32px));margin:0 auto 42px;padding:34px;border-radius:26px}.notice-section{display:grid;grid-template-columns:52px 1fr;gap:20px;background:#fff5f1;border:1px solid #f7d8cb}.notice-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;color:#fff;background:#ee735e;font-size:23px;font-weight:900}.notice-section p:last-child,.source-copy p{margin:16px 0 0;color:#596d80;line-height:1.85}.source-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:34px;background:var(--cream);border:1px solid #f0e3ca}.source-copy p{margin-top:0}.source-link{display:inline-block;margin-top:8px;color:var(--blue-deep);font-weight:800}footer{padding:38px 20px 48px;text-align:center;color:#728497;background:#f6f9fb}.footer-brand{justify-content:center;color:var(--ink)}footer p{margin:12px 0 0;font-size:13px}
@media(max-width:940px){.hero{grid-template-columns:1fr;padding-top:145px;text-align:center}.hero-description{margin-left:auto;margin-right:auto}.privacy-note{margin:0 auto;text-align:left}.hero-art{max-width:720px;margin:0 auto}.photo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.blog-promo{grid-template-columns:auto 1fr}.blog-promo a{grid-column:1/-1;justify-content:center}.source-section{grid-template-columns:1fr}}
@media(max-width:620px){.site-header{top:8px;width:calc(100% - 20px);margin-top:8px}.brand{font-size:13px}.brand-mark{width:32px;height:32px}.blog-button{padding:9px 11px;font-size:13px}.hero{min-height:0;margin-top:-70px;padding:128px 18px 40px;gap:22px}.hero h1{font-size:43px}.hero-description{font-size:15px}.hero-art img{border-radius:24px}.privacy-note{font-size:12px}.tool-section{padding:50px 0 56px}.section-heading h2,.notice-section h2,.source-section h2{font-size:27px}.section-heading>p:last-child{font-size:13px;line-height:1.65}.drop-zone{padding:32px 17px}.drop-zone p{font-size:13px;line-height:1.7}.workspace-head{align-items:flex-start}.workspace-head h3{font-size:20px}.workspace-actions{flex-direction:column;align-items:flex-end}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.actions-grid{grid-template-columns:1fr;gap:13px}.action-card{padding:20px}.field-row{grid-template-columns:1fr 1fr}.field-row label:first-child{grid-column:1/-1}.blog-promo{grid-template-columns:1fr;text-align:center}.promo-icon{margin:0 auto}.blog-promo a{grid-column:auto;justify-content:center}.notice-section,.source-section{padding:25px 21px;grid-template-columns:1fr}.notice-icon{width:42px;height:42px}.date-example{grid-template-columns:1fr 1fr}.date-example span:last-child{grid-column:1/-1}}

/* 사진 원본 비율은 살리고 미리보기 창 크기는 일정하게 유지합니다. */
.photo-thumb{height:180px;aspect-ratio:auto;background:#eef5fa}
.photo-grid .photo-item .photo-thumb > img{width:100%;height:100%;object-fit:contain}
.gif-preview{position:relative;height:250px;min-height:250px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gif-preview > img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.gif-preview-note{position:absolute;right:10px;bottom:8px;left:10px;margin:0;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.9);text-align:center}
.gif-placeholder{display:grid;place-items:center;width:100%;height:100%;color:#71869a;text-align:center;font-size:16px;font-weight:800;line-height:1.8}
.gif-placeholder small{font-size:12px;font-weight:500}
@media(max-width:620px){.photo-thumb{height:170px}.gif-preview{height:220px;min-height:220px}}

/* GIF 생성 중 프레임 진행률을 한눈에 볼 수 있도록 표시합니다. */
.progress-area{grid-template-columns:1fr;gap:8px;padding:12px 14px;border:1px solid #dce9f5;border-radius:12px;background:#f7fbff}
.progress-area progress{width:100%;height:12px;appearance:none;border:0;border-radius:999px;overflow:hidden;background:#e5edf6}
.progress-area progress::-webkit-progress-bar{border-radius:999px;background:#e5edf6}
.progress-area progress::-webkit-progress-value{border-radius:999px;background:linear-gradient(90deg,#2b84df,#19c977)}
.progress-area progress::-moz-progress-bar{border-radius:999px;background:linear-gradient(90deg,#2b84df,#19c977)}
.progress-area span{text-align:center;font-size:12px;font-weight:700;color:#60778c}
.photo-thumb > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gif-options input[type="color"]{width:100%;height:42px;padding:4px 6px;border:1px solid #cfdeea;border-radius:10px;background:#fafdff}
.gif-frame-preview{position:relative;width:min(100%,226px);aspect-ratio:1;flex:0 1 auto;overflow:hidden;border-radius:10px}
.gif-frame-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}