html,body {margin:0;background:#f4f8fc;color:#17365d;font-family:"Malgun Gothic","Noto Sans KR",sans-serif;}
* {box-sizing:border-box;}
#photobox {height:100vh;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#f4f8fc;}
#photobox .header {height:70px;padding:0 18px;display:flex;align-items:center;background:linear-gradient(135deg,#082c62,#087fd0);box-shadow:0 8px 22px rgba(7,53,102,.18);}
#photobox .header .brand {display:flex;align-items:center;flex:0 0 auto;margin-right:auto;}
#photobox .header .brand span {margin:0;color:#fff;font-size:18px;font-weight:700;letter-spacing:-.4px;}
#photobox .header>.xr {float:none!important;display:flex;align-items:center;padding-left:0!important;}
#photobox .header>.xr:not(.upload-steps) {margin-left:12px;}
#photobox .header .upload-steps {margin-left:10px;}
#photobox .header .cupload form {display:flex;align-items:center;gap:7px;margin:0;}
#photobox .header .file {width:205px;height:38px;padding:6px;border:1px solid rgba(255,255,255,.5);border-radius:9px;background:#fff;color:#334e68;}
#photobox .header .upload-guide {margin:0;padding:0;color:#dbefff;font-size:12px;white-space:nowrap;}
.jusq-btn {height:38px;padding:0 17px;border:0!important;border-radius:9px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:none!important;outline:0;}
.jusq-btn.primary {background:#0aa0ef;color:#fff;box-shadow:0 7px 16px rgba(0,27,63,.2)!important;}
.jusq-btn.primary:hover {background:#21aff5;}
.jusq-btn.ghost {background:rgba(255,255,255,.16);color:#fff;}
.jusq-btn.ghost:hover {background:rgba(255,255,255,.25);}
#photobox .wrap {flex:1;min-height:0;margin:14px;display:flex;flex-direction:column;background:transparent;}
#photobox .wrap .bar {height:48px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #dbe7f3;border-radius:12px 12px 0 0;}
#photobox .wrap .bar .xl,#photobox .wrap .bar .xr {float:none;display:flex;align-items:center;gap:7px;}
#photobox .wrap .bar .xl img {position:static;opacity:.55;}
#photobox .wrap .bar .dragstr {position:static;font-size:12px;color:#6d8299;}
#photobox .wrap .bar .info {position:static;font-size:12px;color:#526b84;}
#photobox .wrap .bar .info .b {color:#0787dc;font-weight:700;}
#photobox .wrap .body {flex:1;min-height:0;height:auto;margin:0;display:flex;border:1px solid #dbe7f3;border-top:0;border-radius:0 0 12px 12px;background:#fff;overflow:hidden;box-shadow:0 10px 28px rgba(24,70,120,.08);}
#photobox .wrap .body .viewer {float:none;flex:1;width:auto;height:100%;min-height:0;padding:18px;overflow:auto;background:#fff;position:relative;}
#photobox .wrap .body .viewer .none {width:300px;height:110px;margin:145px auto 0;border:1px dashed #bad3ea;border-radius:14px;background:#f5faff;position:relative;}
#photobox .wrap .body .viewer .none:before {content:"사진을 추가해 주세요";position:absolute;top:28px;left:0;width:100%;text-align:center;color:#244f78;font-size:16px;font-weight:700;}
#photobox .wrap .body .viewer .none .ment {position:static;padding-top:61px;text-align:center;color:#71869b;font-size:12px;}
#photobox .wrap .body .viewer .none .ment span {color:#0787dc;font-weight:700;}
#photobox .wrap .body .tool {float:none;flex:0 0 190px;width:190px;height:100%;min-height:0;padding:4px 18px 14px;border-left:1px solid #dbe7f3;background:#f8fbfe;overflow-y:auto;}
#photobox .wrap .body .tool .tt {margin:20px 0 8px;font-size:12px;font-weight:700;color:#315477;}
#photobox .wrap .body .tool .tt span {font-weight:400;color:#8a9caf;}
#photobox .wrap .body .tool .stype {padding:3px 0;}
#photobox .wrap .body .tool select,#photobox .wrap .body .tool .input {height:31px;border:1px solid #c9d9e9;border-radius:7px;background:#fff;}
#photobox .wrap .body .tool .stype select {width:105px;}
#photobox .wrap .body .tool .stype .input {width:80px;padding:0 7px;}
#photobox .wrap .body .tool .guide {padding:12px 0;color:#8294a7;font-size:11px;line-height:1.55;}
#photobox .wrap .body .tool .line {border:0;border-top:1px solid #dbe7f3;}
#photobox .wrap .body .tool .align {padding:0 0 14px;color:#6d8299;font-size:12px;line-height:29px;}
#photobox .wrap .body .tool .align input {vertical-align:middle;}
#photobox .wrap .body .tool .align img {vertical-align:middle;margin:0 5px;}
#photobox .wrap .body .tool .oview {padding:11px 0 0;color:#6d8299;font-size:11px;}
#photobox .wrap .caption {position:absolute;top:530px;left:15px;right:15px;z-index:10000;height:48px;padding:8px 12px;border:1px solid #cfe0ef;border-radius:9px;background:#fff;color:#526b84;visibility:hidden;box-shadow:0 10px 24px rgba(20,58,98,.16);}
#photobox .wrap .caption .input {height:30px;border:1px solid #c9d9e9;border-radius:6px;}
#photobox .wrap .caption .c1 {width:120px;}
#photobox .wrap .caption .c2 {width:330px;}
#photobox .wrap .footer {flex:0 0 64px;height:64px;margin-top:auto;padding:13px 0;text-align:center;}
#photobox .wrap .footer .jusq-btn.ghost {background:#e9f1f8;color:#3b5875;}
#photoorder {padding:0;margin:0;}
#photoorder input {display:none;}
#photoorder li {float:left;list-style:none;margin:0 10px 16px 0;padding:4px;border:1px solid #dbe7f3;border-radius:9px;background:#fff;}
#photoorder li:hover {padding:3px;border:2px solid #0787dc;}
#photoorder li .photo {width:105px;height:80px;border-radius:6px;cursor:move;}
#progress {display:none;position:absolute;z-index:50;width:490px;top:220px;left:50%;transform:translateX(-50%);padding:20px;border:1px solid #b8d3ec;border-radius:14px;background:#fff;box-shadow:0 20px 45px rgba(15,49,84,.25);opacity:.96;}
#progress td {height:24px;}
#progress .td1 {width:70px;color:#526b84;}
#progress .td2 {width:350px;}
#progress .td3 {width:45px;}
#progress .bggrap {display:block;width:340px;height:9px;border:0;border-radius:9px;background:#e5edf5;overflow:hidden;}
#progress .grap {display:block;width:0;height:100%;background:#0787dc;}
