:root{--paper:#ebe5d9;--paper-light:#f8f5ef;--paper-dark:#ded6c7;--ink:#292220;--muted:#8d8279;--rose:#9c7777;--line:#ded7cc;--display:'Cormorant Garamond',Georgia,serif;--body:'DM Sans','Noto Sans KR',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:-1;opacity:.2;pointer-events:none;background-image:radial-gradient(#826958 0.45px,transparent .45px);background-size:8px 8px}
button,input,select{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,.upload-zone:focus-visible{outline:2px solid #a87869;outline-offset:3px}
.site-shell{max-width:1510px;margin:0 auto;padding:0 56px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:30px 0 27px;border-bottom:1px solid #ccc1b4}
.brand,.header-link{text-decoration:none;color:inherit}
.brand{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;letter-spacing:.16em;white-space:nowrap}
.brand em,.footer-mark em{font-family:var(--display);font-size:18px;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.brand-mark{height:25px;width:20px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
.brand-mark i{display:block;background:#332827}
.header-note{font-size:10px;letter-spacing:.21em;color:#8f8176;font-weight:700;display:flex;align-items:center;gap:13px;white-space:nowrap}
.header-star{font-size:16px;color:#947569}.header-separator{height:1px;width:25px;background:#c9bdb1}
.header-link{font-size:10px;font-weight:700;letter-spacing:.16em;border-bottom:1px solid #6b5d51;padding:6px 0}
.header-link span{font-size:17px;margin-left:9px;font-weight:400}
.hero{position:relative;padding:55px 0 70px;overflow:hidden;border-bottom:1px solid #cfc4b8}
.hero-kicker{display:flex;align-items:center;gap:13px;color:#9a786f;font-size:10px;font-weight:700;letter-spacing:.22em}
.fine-line{height:1px;width:34px;background:#9d8173}.hero-number{margin-left:auto;color:#9a8a7e}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(78px,9vw,144px);line-height:.96;letter-spacing:-.053em;margin:30px 0 26px;position:relative;z-index:1}
.hero h1 span{font-style:italic;font-weight:400;color:#9b7776}
.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:20px;position:relative;z-index:1}
.hero-bottom p{font-size:13px;line-height:1.9;letter-spacing:-.015em;margin:0}
.hero-bottom .hero-english{font-family:var(--display);font-style:italic;font-size:18px;color:#927e70;line-height:1.15;text-align:right}
.hero-flower{position:absolute;right:5%;top:17%;font-family:Georgia,serif;font-size:235px;font-weight:400;color:#c6b6aa;opacity:.22;transform:rotate(16deg);pointer-events:none}
.workspace{padding:62px 0 96px}
.workspace-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:27px}
.section-kicker,.preview-eyebrow,.export-caption{font-size:10px;letter-spacing:.19em;font-weight:700;color:#98776f}
.workspace-heading h2{font-family:var(--display);font-size:58px;line-height:1;margin:8px 0 0;font-weight:500;letter-spacing:-.045em}
.heading-dot{color:#b18f85}.workspace-heading p{font-size:12px;color:#82766c;margin:0 0 6px}.workspace-heading p span{font-size:19px;color:#a27f77;margin-left:8px}
.editor-layout{display:grid;grid-template-columns:minmax(340px,430px) minmax(0,1fr);gap:22px;align-items:start}
.control-panel{background:var(--paper-light);border:1px solid #d9d0c4;box-shadow:0 8px 30px rgba(66,43,30,.055)}
.panel-topline{display:flex;justify-content:space-between;align-items:center;padding:22px 26px 21px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.19em;font-weight:700;color:#998c7e}
.tool-section{padding:30px 26px 29px;border-bottom:1px solid var(--line)}
.tool-title{display:flex;align-items:start;gap:15px;margin-bottom:20px}
.tool-index{font-family:var(--display);font-size:22px;font-style:italic;color:#a28a7f;line-height:1}
.tool-title h3{font-family:var(--display);font-size:30px;line-height:.9;letter-spacing:-.025em;font-weight:600;margin:0 0 8px}
.tool-title p{color:#93867d;font-size:11px;margin:0}
.photo-slots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.slot{display:flex;gap:8px;align-items:center;position:relative;min-width:0;text-align:left;border:1px solid #e1d9ce;background:#f0eae0;padding:8px;min-height:81px;color:#4f4039;transition:background .2s,border-color .2s}
.slot:hover{background:#e9dfd3}.slot.selected{border-color:#9b7168;background:#eae0d6;box-shadow:inset 0 0 0 1px #9b7168}
.slot-thumb{width:46px;height:61px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#dcd3c7;color:#b4a395}
.slot-thumb img{width:100%;height:100%;object-fit:cover}
.slot-thumb svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.1}
.slot-details{min-width:0}.slot-details strong{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;margin-bottom:6px}.slot-details small{display:block;max-width:91px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#988a7c;font-size:10px}.slot.selected .slot-details small{color:#79665c}
.upload-zone{border:1px dashed #beafa1;padding:12px 13px;display:flex;gap:11px;align-items:center;background:#fbf9f4;transition:background .2s,border-color .2s;cursor:pointer}
.upload-zone:hover,.upload-zone.drag-over{background:#efe5dc;border-color:#9d7a70}
.upload-plus{border:1px solid #b7aa9d;width:29px;height:29px;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:300;color:#7d685d}
.upload-zone strong{font-size:11px;font-weight:600;display:block;margin-bottom:3px}.upload-zone small{display:block;color:#ab9a8d;font-size:9px}.upload-arrow{margin-left:auto;font-size:17px;color:#9d8173}
.photo-toolbar{display:flex;justify-content:space-between;align-items:center;margin:13px 0 0;color:#9a8d83;font-size:10px}
.photo-toolbar strong{color:#79645b;margin-left:5px;letter-spacing:.1em}
.toolbar-actions{display:flex;gap:4px}.toolbar-actions button{width:29px;height:27px;border:1px solid #dfd7cd;background:transparent;color:#78665e;font-size:15px;display:flex;align-items:center;justify-content:center}.toolbar-actions button:hover:not(:disabled){background:#e9e0d7}.toolbar-actions button:disabled{opacity:.3;cursor:not-allowed}
.tool-hint{font-size:10px;line-height:1.7;color:#a39587;margin:12px 0 0}
.preset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.preset-option{min-width:0;padding:5px 5px 10px;text-align:center;border:1px solid #e2d8ce;background:#f8f4ec;color:#3c302b;transition:border-color .2s,background .2s}
.preset-option:hover{border-color:#b99a87}.preset-option.active{border-color:#9d776d;background:#f0e6dc;box-shadow:inset 0 0 0 1px #9d776d}
.preset-chip{display:block;width:100%;height:56px;margin-bottom:9px;background:#b19989;position:relative;overflow:hidden}
.preset-chip::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.24),transparent 45%,rgba(0,0,0,.25))}
.preset-chip.romantic{background:linear-gradient(130deg,#ccaca9 4%,#866769 65%,#44323c)}
.preset-chip.sepia{background:linear-gradient(130deg,#e0c8aa 4%,#ae9072 65%,#675343)}
.preset-chip.mono{background:linear-gradient(130deg,#d4d0ca 4%,#8e8986 65%,#3e3b3b)}
.preset-chip.original{background:linear-gradient(130deg,#e3c6ab 4%,#a79686 65%,#68635a)}
.preset-option strong,.preset-option small{display:block;font-size:10px;font-weight:700;line-height:1.35}.preset-option small{font-weight:400;color:#9f8c7d;font-size:9px}
.range-block{margin-top:21px}.range-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:11px;color:#5d4b43}.range-label output{color:#998477;font-family:var(--display);font-size:16px}
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:3px;background:#d9cfc4;border-radius:0;cursor:pointer;display:block;margin:0}
input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#9c7a72;border:2px solid #f9f4ee;box-shadow:0 0 0 1px #9c7a72}
input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#9c7a72;border:2px solid #f9f4ee;box-shadow:0 0 0 1px #9c7a72}
.two-ranges{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:4px}.two-ranges .range-block{min-width:0}
.swatch-row{display:flex;align-items:center;gap:10px}.frame-swatch,.custom-color{width:40px;height:40px;padding:4px;border:1px solid #ded2c6;background:transparent;display:flex;align-items:center;justify-content:center}.frame-swatch span{display:block;width:100%;height:100%}.frame-swatch.selected{border-color:#896c62;box-shadow:0 0 0 1px #896c62}.custom-color{position:relative;overflow:hidden;cursor:pointer;color:#968274;font-size:22px}.custom-color input{position:absolute;width:65px;height:65px;inset:-10px;opacity:0;cursor:pointer}
.text-fields{display:flex;flex-direction:column;gap:11px}.name-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.text-fields label,.select-label{display:block;color:#9f8f82;font-size:9px;letter-spacing:.17em;font-weight:700}
.text-fields input{margin-top:7px;width:100%;height:38px;background:#fdfbf7;border:1px solid #ddd2c6;padding:0 10px;color:#4d3a34;outline:none;font-family:var(--display);font-size:18px;letter-spacing:.02em}
.text-fields input:focus{border-color:#aa857a}
.select-label{margin-top:17px;margin-bottom:7px}.font-select{width:100%;background:#fdfbf7;border:1px solid #ddd2c6;border-radius:0;padding:9px 10px;color:#59483f;font-family:var(--display);font-size:17px}
.type-color-row{display:flex;justify-content:space-between;align-items:center;margin-top:19px;font-size:9px;letter-spacing:.16em;color:#9f8f82;font-weight:700}
.type-color-row label{display:flex;align-items:center;gap:10px;font-family:var(--body);font-weight:500;font-size:10px;letter-spacing:.05em;color:#7a6a5f}
.type-color-row input{height:24px;width:30px;background:transparent;border:none;padding:0;cursor:pointer}
.panel-bottom{display:flex;align-items:center;gap:16px;padding:23px 27px;background:#f0e9df}.panel-bottom-mark{font-size:39px;color:#bb9d8f}.panel-bottom p{margin:0;color:#9a877b;font-family:var(--display);font-size:21px;font-style:italic;line-height:1.05}
.preview-panel{border:1px solid #c7bbad;background:#d9d1c4;position:sticky;top:15px;box-shadow:0 11px 34px rgba(65,43,30,.09)}
.preview-head{padding:21px 27px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:#e0d7c9;border-bottom:1px solid #c4b7a7}
.preview-head h3{font-size:31px;font-family:var(--display);line-height:1;margin:6px 0 0;font-weight:600}
.preview-eyebrow{font-size:9px}.preview-live{font-size:9px;font-weight:700;letter-spacing:.14em;color:#8a7b6c;white-space:nowrap}.preview-live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#997a6d;margin-right:5px}
.preview-stage{background:#cfc5b6;height:590px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a99a88 #cfc5b6;position:relative}
.preview-stage::before{content:'';position:sticky;left:0;top:0;z-index:0;display:block;height:0;width:100%;box-shadow:inset 0 20px 25px rgba(80,55,45,.08)}
.canvas-surround{margin:28px auto 31px;width:min(51%,310px);box-shadow:7px 11px 28px rgba(47,31,28,.3);background:#110d0d;position:relative}
#stripCanvas{display:block;width:100%;height:auto;touch-action:none;cursor:grab}
#stripCanvas:active{cursor:grabbing}
.crop-zones,.mobile-preview-nav,.mobile-preview-hint{display:none}
.mobile-preview-nav{align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;background:#e7ded3;border-bottom:1px solid #c6b9a8;color:#88766a;font-size:9px;font-weight:700;letter-spacing:.14em}
.mobile-preview-buttons{display:flex;gap:5px}
.mobile-preview-buttons button{min-width:35px;min-height:32px;padding:6px;background:#f3ece3;border:1px solid #ccbcae;color:#6f5c51;font-size:11px;font-weight:700;letter-spacing:.08em}
.mobile-preview-buttons button.selected{background:#71574d;border-color:#71574d;color:#fff7ee}
.preview-footnote{display:flex;justify-content:space-between;gap:14px;padding:14px 24px;font-size:9px;color:#8e7e70;border-top:1px solid #c6b9a8;border-bottom:1px solid #c6b9a8;letter-spacing:.02em}
.preview-footnote span:last-child{letter-spacing:.13em;font-size:9px;white-space:nowrap}
.export-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:25px 26px 23px;background:#e4dace}
.export-panel>div{display:flex;flex-direction:column;gap:3px}.export-panel strong{font-family:var(--display);font-size:26px;line-height:1.15}.export-panel small{font-size:10px;color:#9b8b7e;margin-top:2px}
.export-button{border:none;background:#272021;color:#f5ede2;padding:16px 16px 16px 22px;min-width:224px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:10px;font-weight:700;letter-spacing:.13em;transition:background .2s,transform .2s}
.export-button:hover{background:#6e4e49;transform:translateY(-2px)}.export-button:disabled{opacity:.6;cursor:wait}
.button-arrow{font-size:22px;font-weight:400}
.privacy-note{padding:12px 20px 15px;text-align:center;font-size:10px;color:#908277;background:#e4dace}.privacy-note span{color:#9f7773;font-size:16px;vertical-align:middle;margin-right:4px}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #c9bcb0;padding:28px 0 36px;font-size:9px;letter-spacing:.13em;color:#948376}
.footer-mark{font-size:13px;font-weight:700;letter-spacing:.15em;color:#4c3f37}.footer-mark em{font-size:14px}
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,30px);background:#312725;color:#fff7ee;font-size:12px;line-height:1.6;padding:13px 20px;z-index:99;box-shadow:0 12px 28px rgba(0,0,0,.15);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:calc(100vw - 30px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:1180px){.site-shell{padding:0 30px}.editor-layout{grid-template-columns:minmax(330px,410px) minmax(0,1fr);gap:15px}.canvas-surround{width:min(62%,300px)}.preview-stage{height:560px}.export-panel{flex-wrap:wrap}.export-button{width:100%}}
@media(max-width:850px){.site-shell{padding:0 24px}.header-note{display:none}.hero{padding:43px 0 50px}.hero h1{font-size:clamp(64px,10vw,94px)}.workspace{padding:45px 0 70px}.editor-layout{display:flex;flex-direction:column}.preview-panel{order:-1;width:100%;position:static}.control-panel{width:100%}.canvas-surround{width:min(51%,320px)}.preview-stage{height:570px}.export-panel{flex-wrap:nowrap}.export-button{width:auto}}
@media(max-width:560px){.site-shell{padding:0 15px}.site-header{padding:20px 0}.brand{font-size:12px;gap:8px;letter-spacing:.1em}.brand em{font-size:15px}.brand-mark{height:20px;width:17px}.header-link{font-size:9px}.header-link span{margin-left:2px}.hero{padding:32px 0 35px}.hero-kicker{font-size:8px;letter-spacing:.13em}.fine-line{width:15px}.hero h1{font-size:clamp(58px,13.1vw,78px);margin:22px 0 23px}.hero h1 span{display:block}.hero-flower{font-size:160px;top:32%;right:-25px}.hero-bottom p{font-size:11px}.hero-bottom .hero-english{display:none}.workspace{padding:35px 0 55px}.workspace-heading{margin-bottom:20px}.workspace-heading h2{font-size:44px}.workspace-heading p{display:none}.panel-topline{padding:18px 18px}.tool-section{padding:25px 18px}.tool-title h3{font-size:28px}.preview-head{padding:17px}.preview-head h3{font-size:27px}.preview-live{font-size:8px}.preview-stage{height:515px}.canvas-surround{width:min(67%,270px);margin:19px auto 24px}.preview-footnote{padding:11px 13px;font-size:9px}.preview-footnote span:last-child{display:none}.export-panel{padding:18px;flex-wrap:wrap}.export-panel strong{font-size:24px}.export-button{width:100%;margin-top:3px}.privacy-note{font-size:9px}.site-footer{flex-wrap:wrap;justify-content:center;text-align:center;gap:12px}.site-footer .footer-mark{width:100%}}
@media(max-width:850px){
  .mobile-preview-nav{display:flex}
  .mobile-preview-hint{display:inline}
  .desktop-preview-hint{display:none}
  .preview-stage{overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .preview-stage::-webkit-scrollbar{display:none}
  #stripCanvas{touch-action:pan-y;cursor:default}
  .crop-zones{display:block;position:absolute;inset:0;pointer-events:none}
  .crop-zone{position:absolute;pointer-events:auto;touch-action:none;cursor:grab}
  .crop-zone:active{cursor:grabbing}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}