@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

@font-face {
	font-family: "style01";
	src: url(/assets/fonts/style01.woff?240904) format("woff")
}
@font-face {
	font-family: "style02";
	src: url(/assets/fonts/style02.woff) format("woff")
}
@font-face {
	font-family: "style03B";
	src: url(/assets/fonts/style03B.woff) format("woff")
}
@font-face {
	font-family: "style03L";
	src: url(/assets/fonts/style03L.woff) format("woff")
}
@font-face {
	font-family: "style04";
	src: url(/assets/fonts/style04.woff) format("woff")
}
@font-face {
	font-family: "style05";
	src: url(/assets/fonts/style05.woff) format("woff")
}
@font-face {
	font-family: "style06";
	src: url(/assets/fonts/style06.woff) format("woff")
}
@font-face {
	font-family: "style06";
	src: url(/assets/fonts/style06.woff) format("woff")
}
@font-face {
	font-family: "style07";
	src: url(/assets/fonts/style07.woff) format("woff")
}
@font-face {
	font-family: "style08";
	src: url(/assets/fonts/style08.woff) format("woff")
}
@font-face {
	font-family: "style09";
	src: url(/assets/fonts/style09.woff) format("woff")
}


* {
	box-sizing: border-box;margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent; /* 모바일 터치 시 파란 박스 제거 */
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea, select {
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.btn {
	line-height: 1.4;
}
.style01 {
	font-family: "style01", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.style02 {
	font-family: "style02", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.style03, .style03L {
	font-family: "style03L", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.covertitle1.style03 {
	font-family: "style03B", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.style03B {
	font-family: "style03B", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.style04 {
	font-family: "style04", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.style05 {
	font-family: "style05", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.style06 {
	font-family: "style06", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.style07 {
	font-family: "style07", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.style08 {
	font-family: "style08", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.style09 {
	font-family: "style09", "Noto Sans KR", "Malgun Gothic", sans-serif;
}


.add-page,
.print-page,
.font-style {
	border: 1px solid #ccc;
    background: transparent;
    margin: 0;
    padding: 6px;
    width: 100px;
	height: 40px;
    font-size: 18px;
    font-weight: 900;
	cursor: pointer;
    vertical-align: middle;
}
.add-page {
	height: 60px;
}
.add-page,
.print-page {
	font-size: 17px;
}
.add-page.active,
.print-page.active,
.font-style.active {
	border: 1px solid #ff0000;
    background: #ff3c3c;
	color: #fff;
}
.add-page,
.print-page {
    width: 200px;
	margin-bottom: 12px;
	margin-right: 4px;
	position: relative;
}
.add-page .price,
.print-page .price {
	color: #F44334;
    font-size: 0.8em;
	padding-left: 4px;
}
.add-page .pagenum {
    font-size: 0.8em;
	padding-left: 4px;
}
.add-page.active .price,
.print-page.active .price {
	color: #ffeb3b;
}
.add-page .small {
	font-size: 0.8em;
	font-weight: 400;
	margin-top: 4px;
}
.print-page.large {
	width: 260px;
}

button, input:not([type=radio]):not([type=checkbox]) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input {
    margin: 0em;
    padding: 1px 0px;
    border: 1px solid #ccc;;
	padding-inline: 2px;
	outline: 0;
}
#container {
	width: 1320px;
    margin: 0 auto;
/*    padding-top: 40px;*/
}
#container .page {
	padding: 0;
}
.hide {
	display: none !important;
}

.gray {
	color: #8d8d8d;
}
.step-cutsom {
	display :none;
}
.step {
	font-weight: 700;
    padding: 0 10px 10px 0;
    border-radius: 10px;
	margin-bottom: 10px;
}
.step dl {
	font-size: 0.9rem;
	font-weight: 400;
}
.step dl dt {
	font-weight: 500;
}
.step dl dd {
	margin-bottom: 20px;
}
.step.first {
	padding-top: 50px;
}
.step-content {
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #e6e6e6;
    font-size: 13px;
}

.step-content.flex {
	display: flex;
    flex-direction: column;
}
.step-content .spacing {
	
}
.page-list {
	display: flex;
    flex-wrap: wrap;
}
.page-list .cell {
	width: 420px;
	margin-right: 30px;
	margin-bottom: 32px;
}
.page-list .cell:nth-child(3n) {
	margin-right: 0;
}
.page-list .cell .page-desc {
	padding-top: 6px;
}
.page-list .cell .page-desc.cover {
	display: flex;
	align-items: center;
	gap: 7px;
}
.page-list .cell .page-desc input:not([type=checkbox]) {
	width: 100%;
	box-sizing: border-box;
	height: 34px;
	padding: 0 10px;
	border: 1.5px solid #dde2ea;
	border-radius: 8px;
	font-size: 13px;
	color: #333;
	background: #fff;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.page-list .cell .page-desc input:not([type=checkbox]):focus {
	border-color: #4a80d9;
	box-shadow: 0 0 0 3px rgba(74,128,217,0.12);
}
.page-list .cell .page-desc input:not([type=checkbox]):disabled,
.page-list .cell .page-desc input.disabled {
	background: #f5f7fa;
	color: #bbb;
	border-color: #e8eaed;
	cursor: not-allowed;
}
.page-list .cell .page-desc input.cover {
	flex: 1;
	min-width: 0;
}
.page-list .cell .page-desc label {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	color: #888;
	padding: 3px 10px;
	border: 1.5px solid #dde2ea;
	border-radius: 20px;
	background: #fafbfc;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	user-select: none;
	white-space: nowrap;
	flex-shrink: 0;
}
.page-list .cell .page-desc label:hover {
	border-color: #b0b8c8;
	color: #555;
}
.page-list .cell .page-desc label:has(input[type=checkbox]:checked) {
	color: #d32f2f;
	border-color: #ef9a9a;
	background: #fff5f5;
}
.page-list .cell .page-desc label input[type=checkbox] {
	display: none;
}
.page-list .cell .page-layout {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 3px;
    background: rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 5px 6px;
    margin: 8px auto 0;
    font-weight: 400;
}
.page-list .cell .page-layout .layout-txt {
    font-size: 11px;
    color: #888;
    font-style: normal;
    white-space: nowrap;
    margin-right: 2px;
}
.page-list .cell .page-layout img {
    width: 26px;
    height: 37px;
    border-radius: 3px;
    display: block;
    transition: opacity 0.15s;
    opacity: 0.5;
}
.page-list .cell .page-layout a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 5px;
    border-radius: 8px;
    transition: background 0.15s;
}
.page-list .cell .page-layout a.active {
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.13);
}
.page-list .cell .page-layout a.active img {
    opacity: 1;
}
.page-list .cell .page-layout a:hover:not(.active) {
    background: rgba(255,255,255,0.55);
}
.page-list .cell .page-layout a:hover img {
    opacity: 1;
}
.page-list .cell .page-layout a.btn-txt-layout span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 37px;
    padding: 0 5px;
    font-size: 11px;
    color: #aaa;
    white-space: nowrap;
    line-height: 1;
    transition: color 0.15s;
}
.page-list .cell .page-layout a.btn-txt-layout.active span,
.page-list .cell .page-layout a.btn-txt-layout:hover span {
    color: #333;
}

.page-list .cell .cover-layout {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    align-items: center;
    gap: 3px;
    background: rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 5px 6px;
    margin: 8px auto 0;
    font-weight: 400;
}
.page-list .cell .cover-layout .layout-txt {
    font-size: 11px;
    color: #888;
    font-style: normal;
    white-space: nowrap;
    margin-right: 2px;
}
.page-list .cell .cover-layout img {
    width: 26px;
    height: 37px;
    border-radius: 3px;
    display: block;
    transition: opacity 0.15s;
    opacity: 0.5;
}
.page-list .cell .cover-layout a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 5px;
    border-radius: 8px;
    background: rgba(0,0,0,0.05);
    transition: background 0.15s;
}
.page-list .cell .cover-layout a.active {
    background: rgba(244, 121, 31, 0.08);
    box-shadow: 0 0 0 2px var(--pb-orange);
}
.page-list .cell .cover-layout a.active img {
    opacity: 1;
}
.page-list .cell .cover-layout a:hover:not(.active) {
    background: rgba(255,255,255,0.55);
}
.page-list .cell .cover-layout a:hover img {
    opacity: 1;
}

.page-list .cell .page .page-layout1,
.page-list .cell .page .page-layout2,
.page-list .cell .page .page-layout3,
.page-list .cell .page .page-layout4,
.page-list .cell .page .page-layout10,
.page-list .cell .page .page-layout11,
.page-list .cell .page .page-layout12 {
    height: 100%;
	display: flex;
	flex-direction: column;
    align-items: center;
}


.page-list .cell .page .page-layout1 .item {
    width: 100%;
	height: 100%;
}
.page-list .cell .page .item {
	display: flex;
}
.page-list .cell .page .item:not(.active):has(.image-upload) {
	background: #f7f8fa;
	border: 1.5px dashed #d5dae3 !important;
	transition: background 0.15s, border-color 0.15s;
}
.page-list .cell .page .item:not(.active):has(.image-upload):hover {
	background: #eef0ff;
	border-color: #818cf8 !important;
}
.page-list .cell .page .item.active {
	background: transparent;
	border: 0 !important;
}


.page-list .cell .page .page-layout2 .item {
    width: 100%;
	height: 100%;
    position: relative;
}

.page-list .cell .page .page-layout10 .item,
.page-list .cell .page .page-layout11 .item,
.page-list .cell .page .page-layout12 .item,
.page-list .cell .page .page-layout4 .item,
.page-list .cell .page .page-layout3 .item {
    width: 100%;
	height: 100%;
    position: relative;
}
.page-list .cell .page .page-layout10 .b-layer,
.page-list .cell .page .page-layout11 .b-layer,
.page-list .cell .page .page-layout12 .b-layer,
.page-list .cell .page .page-layout4 .b-layer,
.page-list .cell .page .page-layout3 .b-layer {
	display: flex;
	width: 100%;
}
.page-list .cell .page .page-layout4 .b-layer .item:last-child,
.page-list .cell .page .page-layout3 .b-layer .item:last-child {
	margin: 0;
}
.page-list .cell .page .page-layout4 .b-layer {
}





/* 실제 인쇄 기준: 2066×3035px / CSS scale 0.2033 / preview(rate=0.3) scale 0.6777
   spring(left):48px  side(right):24px  top:19px  bottom:29px  pictureMargin:7px
   photo area: 346×569px  2-col item: 170px wide */
#container .page-list .cell .page {
	width: 420px;
    height: 617px; /* 420 × 3035/2066 */
    overflow: hidden;
	border: 1px solid #e8ecf0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	font-size: 9px;
	letter-spacing: -1px;
    box-sizing: border-box;
	position: relative;
	background: #fff;
}
#container .page-list .cell .page .page-layout1,
#container .page-list .cell .page .page-layout2,
#container .page-list .cell .page .page-layout3,
#container .page-list .cell .page .page-layout4,
#container .page-list .cell .page .page-layout10,
#container .page-list .cell .page .page-layout11,
#container .page-list .cell .page .page-layout12 {
	margin-top: 19px;
	margin-right: 36px;
	margin-bottom: 29px;
	margin-left: 36px; /* 좌우 동일 (스프링 여백 48+side 24 평균) */
}


#container .page-list .cell .page .page-layout1 .item {
	width: 346px;
	height: 569px; /* layout1 preview 514×839 × 0.6777 */
}
#container .page-list .cell .page .page-layout2 .item,
#container .page-list .cell .page .page-layout3 .item {
	width: 346px;
    height: 281px; /* layout2 preview 513×415 × 0.6777 / 281×2+7=569 */
}
#container .page-list .cell .page .page-layout3 .b-layer:first-child .item {
	margin-bottom: 7px;
}

#container .page-list .cell .page .page-layout2 .item:nth-child(1) {
	margin-bottom: 7px;
}
#container .page-list .cell .page .page-layout3 .b-layer:nth-child(2) .item:first-child {
	margin-right: 7px;
}

#container .page-list .cell .page .page-layout3 .b-layer,
#container .page-list .cell .page .page-layout4 .b-layer,
#container .page-list .cell .page .page-layout12 .b-layer {
    width: 346px;
}
#container .page-list .cell .page .page-layout10 .b-layer {
    width: 336px;
}
#container .page-list .cell .page .page-layout11 .b-layer {
    width: 331px;
}
#container .page-list .cell .page .page-layout12 .item,
#container .page-list .cell .page .page-layout4 .item,
#container .page-list .cell .page .page-layout3 .b-layer:nth-child(2) .item {
	width: 170px; /* preview 251px × 0.6777 */
    height: 281px; /* layout3-bottom 414×0.6777 / 281×2+7=569 */
	overflow: hidden;
}
#container .page-list .cell .page .page-layout10 .item {
	height: 185px; /* 3×185+2×7=569px fills photo area */
}
#container .page-list .cell .page .page-layout11 .item {
	height: 137px; /* 4×137+3×7=569px fills photo area */
}

#container .page-list .cell .page .page-layout12 .b-layer .item,
#container .page-list .cell .page .page-layout11 .b-layer .item,
#container .page-list .cell .page .page-layout10 .b-layer .item,
#container .page-list .cell .page .page-layout4 .b-layer .item {
	margin: 0 7px 7px 0;
}
#container .page-list .cell .page .page-layout12 .b-layer .item:nth-child(2),
#container .page-list .cell .page .page-layout11 .b-layer .item:nth-child(2),
#container .page-list .cell .page .page-layout10 .b-layer .item:nth-child(2),
#container .page-list .cell .page .page-layout4 .b-layer .item:nth-child(2) {
	margin-right: 0;
}
#container .page-list .cell .page .page-layout11 .b-layer:nth-child(4) .item,
#container .page-list .cell .page .page-layout10 .b-layer:nth-child(3) .item,
#container .page-list .cell .page .page-layout4 .b-layer:nth-child(2) .item {
	margin-bottom: 0;
}

#container .page-list .cell .page .page-layout12 .b-layer:nth-child(2) .item,
#container .page-list .cell .page .page-layout12 .b-layer:nth-child(3) .item {
	height: 137px; /* preview 202px × 0.6777 / 281+7+137+7+137=569 */
}
#container .page-list .cell .page .page-layout12 .b-layer:nth-child(3) .item {
	margin-bottom: 0;
}


#container .page-list .cell .page .text {
	width: 346px;
	height: 12px;
	padding-top: 10px;
	text-align: center;
	letter-spacing: 0.4px;
}
.item.text-slot-mode .preview,
.item.text-slot-mode .image-upload,
.item.text-slot-mode .alert-area {
	display: none !important;
}
/* 슬롯 텍스트 래퍼 */
.slot-text-wrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 32px;
	background: #fafafa;
}
.slot-text {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
	resize: none;
	padding: 4px 6px;
	box-sizing: border-box;
	font-size: 12px;
	line-height: 1.5;
	font-family: inherit;
	background: transparent;
	color: #333;
	outline: none;
	overflow-y: auto;
}
.slot-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 32px;
	display: flex;
	align-items: center;
	padding: 0 6px;
	z-index: 10;
	background: #f0f0f0;
	border-top: 1px solid #ddd;
	box-sizing: border-box;
}
/* 위치 피커 */
.slot-pos-picker {
	position: relative;
	flex: 1;
	display: flex;
	justify-content: center;
}
.slot-pos-toggle {
	height: 22px;
	padding: 0 8px;
	border: 1px solid #d0ccc6;
	background: #fff;
	border-radius: 11px;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 3px;
	color: #555;
	white-space: nowrap;
	transition: background 0.12s;
	line-height: 1;
}
.slot-pos-toggle:hover {
	background: #e8e4de;
	border-color: #b8b4ae;
}
.slot-pos-caret {
	font-size: 9px;
	color: #aaa;
}
.slot-pos-dropdown {
	position: absolute;
	bottom: calc(100% + 5px);
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border: 1px solid #e0dbd4;
	border-radius: 8px;
	padding: 6px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.14);
	display: none;
	z-index: 200;
}
.slot-pos-dropdown.open {
	display: block;
}
.slot-pos-grid {
	display: grid;
	grid-template-columns: repeat(3, 26px);
	gap: 3px;
}
.slot-pos-btn {
	width: 26px;
	height: 26px;
	border: 1px solid #d0ccc6;
	background: #fff;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	transition: background 0.12s, color 0.12s;
	line-height: 1;
}
.slot-pos-btn:hover {
	background: #e8e4de;
	color: #333;
	border-color: #b8b4ae;
}
.slot-pos-btn.active {
	background: #4a80d9;
	color: #fff;
	border-color: #3a70c9;
}
.page .item .image-to-text {
	position: absolute;
	top: 2px;
	left: 6px;
	z-index: 10;
	height: 24px;
	padding: 0 9px;
	border-radius: 12px;
	background: rgba(0,0,0,0.42);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	font-family: sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: -0.3px;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.2s;
}
.page .item.active > .image-to-text {
	opacity: 0;
	pointer-events: none;
}
.page .item.text-slot-mode > .image-to-text {
	display: none !important;
}
.slot-controls .slot-photo-btn {
	position: static;
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 0 8px;
	height: 22px;
	border: 1px solid #d0ccc6;
	background: #fff;
	border-radius: 11px;
	font-size: 11px;
	color: #555;
	cursor: pointer;
	width: auto;
	opacity: 1 !important;
	pointer-events: auto !important;
	white-space: nowrap;
	transition: background 0.12s, color 0.12s;
}
.slot-controls .slot-photo-btn:hover {
	background: #e8e4de;
	color: #333;
	border-color: #b8b4ae;
}
.slot-controls .slot-photo-btn svg {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
}
.emoji-img {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	vertical-align: -0.2em;
	object-fit: contain;
}
.covertitle1 {
	position: absolute;
    font-size: 24px;
    left: 0;
    width: 100%;
    text-align: center;
    letter-spacing: 0.4px;
}
.covertitle2 {
	position: absolute;
    font-size: 13px;
    left: 0;
    width: 100%;
    text-align: center;
    letter-spacing: 0.4px;
}

.layout[data-layout=box1] .covertitle1 {
    top: 476px;
    font-size: 25px;
}
.layout[data-layout=box1] .covertitle2 {
    top: 521px;
    font-size: 13px;
}
.layout[data-layout=box2] .covertitle1 {
    top: 115px;
}
.layout[data-layout=box2] .covertitle2 {
    top: 461px;
}
.layout[data-layout=circle] .covertitle1 {
    top: 81px;
}
.layout[data-layout=circle] .covertitle2 {
    top: 446px;
}
.layout[data-layout=circle2] .covertitle1 {
    top: 109px;
}
.layout[data-layout=circle2] .covertitle2 {
    top: 461px;
}
.layout[data-layout=arch] .covertitle1 {
    top: 466px;
}
.layout[data-layout=arch] .covertitle2 {
    top: 512px;
}


.layout[data-layout=art1] .covertitle1 {
    top: 95px;
}
.layout[data-layout=art1] .covertitle2 {
    top: 436px;
}
.layout[data-layout=art2] .covertitle1 {
    top: 88px;
}
.layout[data-layout=art2] .covertitle2 {
    top: 437px;
}
.layout[data-layout=art3] .covertitle1 {
    top: 117px;
    left: 40px;
    text-align: left;
}
.layout[data-layout=art3] .covertitle2 {
    top: 467px;
    left: 37px;
}


.layout[data-layout='cover8'] .covertitle1,
.layout[data-layout='cover9'] .covertitle1 {
    top: 135px;
    font-size: 21px;
}
.layout[data-layout='cover8'] .covertitle2,
.layout[data-layout='cover9'] .covertitle2 {
    top: 166px;
    font-size: 10px;
}
.layout[data-layout='cover10'] .covertitle1 {
    top: 400px;
    font-size: 20px;
}
.layout[data-layout='cover10'] .covertitle2 {
    top: 444px;
    font-size: 10px;
}
.layout[data-layout='cover11'] .covertitle1 {
    top: 178px;
    font-size: 20px;
}
.layout[data-layout='cover11'] .covertitle2 {
    top: 209px;
    font-size: 10px;
}
.layout[data-layout='cover12'] .covertitle1,
.layout[data-layout='cover13'] .covertitle1 {
    top: 415px;
    font-size: 20px;
}
.layout[data-layout='cover12'] .covertitle2,
.layout[data-layout='cover13'] .covertitle2 {
    top: 454px;
    font-size: 10px;
}
.layout[data-layout='cover14'] .covertitle1 {
    top: 84px;
    left: 43px;
    text-align: left;
}
.layout[data-layout='cover14'] .covertitle2 {
    top: 129px;
    left: 43px;
    text-align: left;
    font-size: 11px;
}
.layout[data-layout='cover15'] .covertitle1 {
    top: 174px;
    font-size: 22px;
}
.layout[data-layout='cover15'] .covertitle2 {
    top: 490px;
    font-size: 10px;
}
.layout[data-layout='cover16'] .covertitle1 {
    top: 432px;
	font-size: 17px;
}
.layout[data-layout='cover16'] .covertitle2 {
    top: 465px;
    font-size: 10px;
}
.layout[data-layout='cover17'] .covertitle1 {
    top: 125px;
    font-size: 16px;
}
.layout[data-layout='cover17'] .covertitle2 {
    top: 160px;
    font-size: 10px;
}
    
.layout[data-layout='cover18'] .covertitle1 {
    top: 398px;
    font-size: 13px;
}
.layout[data-layout='cover18'] .covertitle2 {
    top: 480px;
    font-size: 10px;
}
.layout[data-layout='cover19'] .covertitle1 {
   font-size: 0;
}
.layout[data-layout='cover19'] .covertitle2 {
    font-size: 0;
}
.page .num {
    background: #f0ad4e;
    width: 40px;
    height: 36px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}
.page .picture-attach {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha(opacity=0)";
	-khtml-opacity: 0;
	-moz-opacity: 0;
	cursor: pointer;
}

.page .image-upload.drag {
	border: 2px dashed #818cf8 !important;
	background: #eef0ff !important;
}
.page .image-upload {
	width: 100%;
	height: 100%;
	font-size: 13px;
	font-weight: 400;
	color: #b8becb;
    display: flex;
    justify-content: center;
    align-items: center;
	overflow: hidden;
	position: relative;
    flex-direction: column;
}
.page .image-upload svg {
	fill: #c8cdd8;
	width: 26px;
	height: 26px;
	transition: fill 0.15s;
}
.page .item:not(.active):hover .image-upload svg {
	fill: #818cf8;
}
.page .item:not(.active):hover .image-upload {
	color: #818cf8;
}
.page .image-upload .upload-info-msg {
	padding-top: 6px;
	font-size: 11px;
	letter-spacing: 0;
}
.page .page-layout4 .image-upload .upload-info-msg,
.page .page-layout10 .image-upload .upload-info-msg,
.page .page-layout11 .image-upload .upload-info-msg,
.page .page-layout12 .image-upload .upload-info-msg {
	display: none;
}
.page .preview {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.page .preview img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	background: #fff;
	display: block;
}
.page .page-layout1 .preview img {
	object-position: center;
}
.page .remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: auto;
    height: auto;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 24px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.page .remove a {
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background 0.15s;
    opacity: 0.9;
}
.page .remove a:hover {
    background: rgba(255,255,255,0.22);
    opacity: 1;
}
.page .remove a:active {
    background: rgba(255,255,255,0.38);
}
.page .remove a svg {
    width: 15px;
    height: 15px;
    display: block;
    flex-shrink: 0;
}
.page .remove .image-contain svg {
    width: 16px;
    height: 16px;
    transition: filter 0.5s;
    -webkit-filter: drop-shadow(0 0 2px rgba(0,0,0,0.4));
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.4));
}
.page .remove .image-contain .ic-maximize {
    display: none;
}
.page .remove .image-contain.cover .ic-maximize {
    display: block;
}
.page .remove .image-contain.cover .ic-minimize {
    display: none;
}
.page .remove .image-contain svg.flash {
    filter: drop-shadow(0 0 4px #fff900);
    -webkit-filter: drop-shadow(0 0 4px #fff900);
}

.image-box .rotate {
    position: absolute;
    top: 0;
    right: 50px;
    width: 30px;
    height: 50px;
}
.image-box .rotate a {
    fill: #999;
	display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.cover-text {
	width: 100%;
}

.dayname-list li {
    font-size: 13px;
    margin-bottom: 8px;
}
.dayname-list li:first-child {
	margin-bottom: 10px;
}
.dayname-list li .date {
	background: #4d4d4d;
    border-radius: 14px;
    padding: 2px 8px;
    color: #fff;
}
.dayname-list li .name {
	padding-left: 6px;
    padding-right: 10px;
}


.code-wrap,
.start-info {
	text-align: center;
	margin-bottom: 40px;
}
.code-wrap {
	margin-top: 40px;
}
.code-wrap em,
.start-info em {
	font-weight: 700;
}

.code-wrap .code {
	font-weight: 900;
    font-size: 50px;
    background: #eee;
    width: 400px;
    margin: 0 auto;
    border: 5px dashed #ff1616;
	margin-top: 40px;
	margin-bottom: 14px;
	cursor: pointer;
	position: relative;
}
.code-copy {
	margin-bottom: 40px;
}
.clipboard-message {
    position: absolute;
    text-align: center;
    background: #111;
    color: #fff;
    top: -40px;
    border-radius: 8px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 6px 14px;
    z-index: 110000;
    display: none;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    pointer-events: none;
}


.calendar-preview-txt {
	text-align: center;
	margin-bottom: 40px;
	font-weight: 700;
}
.calendar-preview-wrap {
	background: #d9d9d9;
	padding: 80px 15px;
}
.calendar-preview.center {
    justify-content: center;
}
.calendar-preview-wrap .edit-wrap {
	max-width: 1200px;
	margin: 0 auto;
}
.calendar-preview-wrap .edit-wrap.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.calendar-preview-wrap .edit-wrap  select {
    height: 21px;
}
.calendar-preview-wrap .edit-wrap .cover-text {
    box-sizing: border-box;
	flex: 1;
    height: 21px;
	max-width: 600px;
    margin-right: 6px;
}
.calendar-preview-wrap .edit-wrap .edit-yearmonth {
    margin-right: auto;
}

.calendar-preview {
	display: flex;
    flex-wrap: wrap;
	width: 1200px;
	margin: 0 auto;
	margin-bottom: 40px;
}
.calendar-preview .calendar {
    font-size: 0;
	box-shadow: 0 0 4px 4px #d1d1d1;
    box-sizing: border-box;
    margin: 6px;
    width: 288px;
	position: relative;
    margin-bottom: 50px;
}
.calendar-preview .calendar img {
	width: 100%;
}
.calendar-preview .calendar .coilspring {
	position: absolute;
    top: 196px;
	left:0;
}
.calendar-preview .calendar.cover .coilspring {
	top: -10px;
}
.calendar-preview .calendar .cal {
    padding-top: 3px;
}
.calendar-preview .calendar .button-wrap {
	position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding-top: 8px;
}
.dayname-info {
	text-align: center;
	margin-bottom: 40px;
}
.dayname-info em {
	font-weight: 700;
}
.dayname-info .dayname-list li:first-child {
	margin-bottom: 0;
}
.calendar-preview-wrap .dayname-list li:first-child {
	margin-bottom: 8px
}
.dayname-info .dayname-list {
    width: 214px;
    margin: 0 auto;
    text-align: left;
}
.back-wrap {
	text-align: center;
}
.back-wrap a {
	background: #333;
	border-radius: 14px;
	padding: 4px 14px;
	color: #fff;
}

.btn {
	font-size: 13px;
    border-radius: 20px;
}
.btn.btn-submit {
	color: #fff !important;
	background: #ff9800 !important;
}
.btn.btn-submit:hover {
    background: #bd7100  !important;
}

button.submit {
	background: #ff9800 !important;
    color: #fff !important;
    height: 45px;
    border-radius: 20px;
    font-size: 25px;
    margin-bottom: 40px;
    font-weight: 900;
    line-height: 1;
}
button.submit:hover {
	background: #bd7100 !important;
}

#container.full {
	width: 100%;
}
.flex-center {
    justify-content: center;
}
.photobook-preview-wrap {
    background: #d9d9d9;
    padding: 80px 15px;
}
.photobook-preview  {
	margin: 0 auto;
	width: 600px;
}
.photobook-preview .page-wrap {
	display: flex;
    flex-wrap: wrap;
}
#container .photobook-preview .page {
	font-size: 0;
    box-shadow: 0 0 4px 4px #d1d1d1;
    box-sizing: border-box;
    width: 288px;
	min-height: 407.22px;
    position: relative;
    margin: 0 0 50px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
	display: flex;
    justify-content: center;
    align-items: center;
	flex-direction: column;
}
#container .photobook-preview .page.blank {
	background: #fff;
	font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 36px;
    text-align: center;
    line-height: 1.5em;
}
#container .photobook-preview .page.loading {
	
}
.photobook-preview .page img.blank-photo,
.photobook-preview .page img.photo {
	width: 100%;
}
.photobook-preview .page img.blank-photo{
    height: 100%;
}
.photobook-preview .page .coilspring,
.photobook-preview .page .coilspring-left {
	position: absolute;
    right: -17px;
    height: 100%;
	z-index: 10;
}
.photobook-preview .page .coilspring-left {
	left: -12px;
}
.photobook-preview .page-wrap .load-msg {
	font-size: 13px;
	margin: 10% 10%;
	line-height: 1.8;
	text-align: center;
}

.fixed-bottom {
	position: fixed;
    bottom: 20px;
    width: 450px;
    z-index: 1000;
    left: 50%;
    margin-left: -225px;
    display: flex;
    justify-content: space-evenly;
}
.fixed-bottom a,
.fixed-bottom button {
	cursor: pointer;
    background: #ffe000;
    border: 1px solid #ffe000;
    color: #333;
    display: inline-block;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-self: inherit;
    flex-direction: column;
    align-items: center;
    padding: 9px 0;
    border-radius: 20px;
    box-shadow: 0 0 1px 1px #ffec66;
    font-size: 13px;
	width: 100px;
}
.fixed-bottom a:hover,
.fixed-bottom button:hover {
	background: #ffe000;
    box-shadow: 0 0 5px 2px #ffec66;
}
.fixed-bottom .large {
	width: 150px;
}

.fixed-save-msg {
    position: fixed;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    z-index: 200001000;
    background: #111;
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
    white-space: nowrap;
    display: none;
    /*transition: 0.5s;*/
}

.emoji-preview-hint {
    position: fixed;
    left: 20px;
    right: 20px;
    top: 20px;
    z-index: 200001000;
    max-width: 320px;
    background: #111;
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    padding: 10px 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
    display: none;
}
.emoji-preview-hint strong {
    color: #ffec66;
}

.page-list .page-num {
	display: flex;
    justify-content: center;
    align-items: center;
}

.save-code-msg-layer {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 200000000;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    display: none;
}
.save-code-msg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.save-code-msg-content {
    width: 90%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    padding: 48px 40px 40px;
    gap: 6px;
    text-align: center;
}
.save-code-msg-content .code {
    margin: 16px 0 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.save-code-msg-content .code em {
    font-family: 'Source Code Pro', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
    font-weight: 800;
    font-size: 52px;
    letter-spacing: 0.12em;
    color: #111;
    font-style: normal;
}
.save-code-msg-content .code .btn {
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
}
.save-code-msg-content .code .btn:hover {
    background: #333;
}
.save-code-msg-content .close {
    position: absolute;
    top: 14px;
    right: 14px;
    line-height: 1;
}
.save-code-msg-content .msg {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}
.save-code-msg-content > div {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
}
.save-code-msg-content strong span {
    background: var(--pb-orange);
    border: none;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
}
.save-code-msg-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #999;
    padding: 4px;
    border-radius: 6px;
    transition: background .15s;
}
.save-code-msg-close:hover {
    background: #f0f0f0;
    color: #333;
}
.save-code-msg-close svg {
    width: 22px !important;
    height: 22px !important;
    display: block;
}


.save-code-msg-content .clipboard-message {
    top: -36px;
}

.delete-notification {
	position: fixed;
	left: 50%;
	top: 48px;
    transform: translateX(-50%);
    z-index: 110000;
	background: #ffeb3b;
	text-align: center;
	border-radius: 20px;
	padding: 10px 26px;
	transition: all 0.5s;
}
.delete-notification .msg  {
	transition: all 0.5s ease-out;
	opacity: 1;
	height: auto;
	display: block;
}
.delete-notification .msg.hidden {
	transition: all 0.s ease-out;
	visibility: hidden;
    opacity: 0;
    height: 0;
	overflow: hidden;
}
.delete-notification-remove {
	background: transparent;
    border: 0;
    color: #ababab;
	cursor: pointer;
	position: absolute;
    top: 11px;
    right: 3px;
    font-size: 15px;
}
.delete-notification em.deletion-date {
    color: #ff8a65;
    font-style: normal;
    font-weight: 700;
}

.alert-area {
    position: absolute;
    left: 0;
    bottom: 0;
	width: 100%;
    z-index: 10;
}
.alert-area .ratio-alert,
.alert-area .low-resolution-alert {
    display: flex;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(180,20,20,0.94);
    color: #fff;
    padding: 5px 7px;
    z-index: 10;
    line-height: 1.3;
    margin-top: 3px;
    align-items: center;
    letter-spacing: 0;
}
.alert-area .ratio-alert {
    background: rgba(160,70,0,0.94);
}
.low-resolution {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 13px;
    background: rgba(244,67,54,0.8);
    color: #fff;
    padding: 7px 8px;
	z-index: 10;
    line-height: 1.2;
	padding-left: 22px;
}
.low-resolution svg {
    position: absolute;
    left: 3px;
    top: 6px;
}

.btn-txt-layout {
	width: 26px;
    height: 37px;
	border: 1px solid #e0e3ea;
	border-radius: 3px;
	font-size: 10px;
    letter-spacing: -1px;
	opacity: 0.7;
	transition: opacity 0.15s, box-shadow 0.15s;
}
.btn-txt-layout:hover {
	opacity: 1;
}
.btn-txt-layout.active {
	opacity: 1;
	border-color: transparent;
	box-shadow: 0 0 0 2.5px #f97316;
}

.btn-txt-layout span {
    width: 100%;
    height: 100%;
	display: flex;
    justify-content: center;
    align-items: center;;
}

/* ===== 페이지 이동 bottom-sheet ===== */
.page-move {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999999;
    display: none;
    flex-direction: column;
    justify-content: flex-end;
}
.page-move button {
    border: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    background: none;
}

/* 헤더(타이틀 + 닫기) */
.page-move .page-move-close {
    align-self: stretch;
    width: auto;
    height: auto;
    border-radius: 20px 20px 0 0 !important;
    background: #fff !important;
    border: none !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 16px 12px;
}
.page-move .page-move-close::before {
    content: "이동할 위치를 선택하세요";
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    pointer-events: none;
    margin-left: 28px; /* X 버튼 너비만큼 보정 */
}
.page-move-close svg {
    fill: #888;
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

/* 콘텐츠 시트 */
.page-move .content {
    width: 100%;
    background: #f4f6fa;
    border-radius: 0;
    padding: 12px 0 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -6px 32px rgba(0,0,0,0.18);
}

.page-move .page-list {
    flex-wrap: nowrap;
    padding: 4px 20px 12px;
    align-items: center;
}
.page-list .cell-move {
    display: none;
}

/* 개별 페이지 셀 */
#container .page-move .page-list .cell {
    width: 100px;
    margin: 0 4px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    flex-shrink: 0;
}
#container .page-move .page-list .cell .page {
    width: 100px;
    height: 147px;
}

/* 이동 중인(선택된) 페이지 */
#container .page-move .page-list .cell.select {
    margin: 0 4px;
    border: 3px solid #4a80d9;
    box-shadow: 0 4px 18px rgba(74,128,217,0.38);
    border-radius: 8px;
    width: 105px;
}

/* 이동 버튼 셀 */
#container .page-move .page-list .cell-move {
    width: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#container .page-move .page-list .cell-move a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 0 !important;
    background: #4a80d9 !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(74,128,217,0.45);
    transition: background 0.15s, transform 0.1s;
    padding: 0 !important;
}
#container .page-move .page-list .cell-move a:hover {
    background: #3a6bc4 !important;
    transform: scale(1.1);
}
#container .page-move .page-list .cell-move a:active {
    transform: scale(0.95);
}
#container .page-move .page-list .cell .page {
}
#container .page-move .page-list .cell .page .page-layout1, 
#container .page-move .page-list .cell .page .page-layout2, 
#container .page-move .page-list .cell .page .page-layout3, 
#container .page-move .page-list .cell .page .page-layout4,
#container .page-move .page-list .cell .page .page-layout10,
#container .page-move .page-list .cell .page .page-layout11 {
	margin: 0;
}
#container .page-move .low-resolution {
	display: none !important;
}
#container .page-move .page-list .cell .page .page-layout1 .item {
	
}
#container .page-move .page-layout,
#container .page-move .page-desc,
#container .page-move .set-page-move,
#container .page-move .item .remove,
#container .page-move .item .image-upload {
	display: none;
}
#container .page-move .page .item:hover,
#container .page-move .page .item:not(.active):has(.image-upload):hover,
#container .page-move .page .item:not(.active):hover .image-upload,
#container .page-move .page .item:not(.active):hover .image-upload svg {
	background: unset;
	border-color: unset;
	color: unset;
	fill: unset;
	pointer-events: none;
} 
#container .page-move .layout {
    zoom: 0.28;
    padding: 16px;
}
#container .page-move .page-list .page-num {
    font-size: 11px;
    padding: 4px 0 3px;
    color: #555;
    font-weight: 500;
    text-align: center;
}
.set-page-move {
    font-size: 0.8em;
    vertical-align: middle;
    display: inline-block;
    padding: 3px 6px;
	margin-left: 5px;
}



h1.title {
    margin-bottom: 10px;
    font-size: 31px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.4;
    color: #313131;
    padding-top: 40px;
}
#container.order-page {
	width: 1200px;
    font-size: 13px;
	padding-top: 40px;
}
.order-page h2 {
    font-size: 25px;
    border-bottom: 1px solid #484848;
}
.delivery-tb, 
.payment-tb {
    width: 100%;
    margin-bottom: 40px;
}
.delivery-tb td,
.delivery-tb th,
.payment-tb td,
.payment-tb th {
    vertical-align: middle;
    padding: 8px 0 8px 12px;
    height: 30px;
    border-bottom: 1px solid #e6e6e6;
}
.payment-tb th,
.delivery-tb th {
    background: #f7f7f7;
}
.order-page select, .order-page input[type=text], .order-page input[type=tel], .order-page input[type=email] {
    border: 1px solid #ccc;
    padding: 6px;
    width: 200px;
    outline: 0;
}
.order-page select.sel-photobook-type {
	width: 228px;
}
.disabled {
    cursor: not-allowed;
}
input.disabled {
    background: #e4e4e4;
}
.order-page input.receiver-address {
    width: 350px;
}
.order-page input.delivery-memo {
    width: 500px;
    display: none;
}
.delivery-tb .row {
    padding-bottom: 6px;
}
#postcodeWrapper {
	position: relative;
	display: none;
}

.quantity-group {
    border: 1px solid #ccc;
    display: inline-block;
}
.quantity-group input {
	border: none;
    width: 46px;
    height: 29px;
    text-align: center;
}
.quantity-group button {
    cursor: pointer;
    width: 34px;
    height: 29px;
    border: none;
    background-color: #ececec;
}
.order-page .code-list li .remove {
    cursor: pointer;
    width: 34px;
    height: 29px;
    border: none;
    background: none;
    color: #ff0000;
}
.order-page .code-list li {
	display: flex; 
    position: relative;
}
.order-page .code-list .calendar-thumb {
	width: 80px;
}
.payment-tb em.pay-amount {
    color: #d40000;
    font-size: 1.4em;
}
.payment-tb .pay-type-disp-wrap {
    border: 4px solid #ccc;
    padding: 16px 17px;
    margin: 10px 0 12px 0;
}
.payment-tb .pay-type-disp {
    display: none;
}
.payment-tb .pay-type-disp-wrap p {
    border-top: 1px solid #ccc;
    padding-top: 6px;
    margin-top: 6px;
    font-weight: 300;
}
.payment-tb .pay-type-disp-wrap p:first-child {
    margin-top: 0;
    padding-top: 0;
    border: 0;
}
.payment-tb .pay-type-disp-wrap label {
    margin-right: 14px;
    font-weight: 400;
}
input[type=radio], input[type=checkbox] {
    position: relative;
    top: 2px;
}
.payment-tb .receipt-input .label-receipt-type {
    padding-bottom: 4px;
}
.payment-tb .receipt-input .label-biz-receipt, .payment-tb .receipt-input .label-personal-receipt-select {
    float: left;
    padding-right: 10px;
}
.payment-tb .receipt-input .sel-receipt-code {
    height: 26px;
    padding: 0 8px;
    width: auto;
}
.payment-tb .receipt-input .input-PAY00401 select {
    width: 62px;
    border: 1px solid #ccc;
    height: 26px;
    padding: 0 8px;
}
.payment-tb .receipt-input .input-PAY00401 input {
    width: 32px;
    height: 20px;
    padding: 2px 5px;
    box-sizing: unset;
    border: 1px solid #ccc;
}
.payment-tb .receipt-input .input-PAY00402 input {
    width: 32px;
    padding: 2px 5px;
    box-sizing: unset;
    border: 1px solid #ccc;
}
.payment-tb .receipt-input .input-PAY00402 input.num4 {
    width: 56px
}
.payment-tb .receipt-input .biz-receipt input {
    width: 28px;
    height: 20px;
    padding: 2px 5px;
    box-sizing: unset;
    border: 1px solid #ccc;
}
.payment-tb .receipt-input .biz-receipt input.num2 {
    width: 21px;
}
.payment-tb .receipt-input .biz-receipt input.num3 {
    width: 40px;
}
.btn-pay {
	background: #ff9800 !important;
	color: #fff !important;
    width: 230px;
    height: 60px;
    line-height: 45px;
    font-size: 20px;
	padding: 0;
}
.btn-pay:hover {
    background: #bd7100 !important;
}
.view-mobile {
	display: none;
}
.m-block {
	display: inline;
}
.bg-info {
    background-color: #d9edf7;
    padding: 9px;
    margin: 10px 0;
    line-height: 1.4;
}
.deliveryFeePlusInfo {
    border-radius: 14px;
    font-size: 14px;
    padding: 14px;
    margin: 0 0 40px 0;
    display: none;
}

img.logo-image {
	max-width: 150px;
	max-height: 56px;
}

.imagecount {
	text-align: center;
    padding-bottom: 10px;
}

.fancybox-thumbs__list a {
	border-radius: 6px;
}
.fancybox-thumbs__list a:before {
	border: 5px solid rgba(34,213,233,.96) !important;
    transition: opacity .15s !important;
}
.fancybox-navigation button svg {
	outline: none !important;
}
.fancybox-navigation button svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--carousel-button-svg-stroke-width,1.5);
    stroke-linejoin: bevel;
    stroke-linecap: round;
    filter: var(--carousel-button-svg-filter,none);
    height: var(--carousel-button-svg-height,50%);
    pointer-events: none;
    width: var(--carousel-button-svg-width,50%);
}


.upload-progressbar {
	width: 200px;
	height: 20px;
	position: absolute;
    appearance: none;
    left: 50%;
    margin-left: -100px;
	appearance:none;
    border-radius: 10px;
    overflow: hidden;
}
.upload-progressbar::-webkit-progress-bar {
    background:#f0f0f0;
    border-radius:10px;
    box-shadow: inset 3px 3px 10px #ccc;
}
.upload-progressbar::-webkit-progress-value {
    border-radius:10px;
    background: #2143c2;
    background: -webkit-linear-gradient(to right, #a3b3f0, #2143c2);
    background: linear-gradient(to right, #a3b3f0, #2143c2);
	transition: width .5s;
}

.multi-upload {
/*
	background-clip: padding-box;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: .375rem .75rem;
*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha(opacity=0)";
    -khtml-opacity: 0;
    -moz-opacity: 0;
    cursor: pointer !important;
	display: none;
}
.multi-upload-btn {
	display: inline-block;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: .375rem .75rem;
    overflow: hidden;
    position: relative;
    cursor: pointer;
	background: #f7f7f7;
}
.multi-upload-btn span:hover {
    cursor: pointer;
}
.multi-upload-btn:hover {
	background: #ededed;
    cursor: pointer;
}
.multi-upload-btn ::-webkit-file-upload-button { cursor:pointer; }

.layer-not-contain-info,
.layer-contain-info {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1000;
    background: rgba(18, 18, 22, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    transform: translate(-50%, 100vh);
    display: none;
    max-width: 90vw;
    width: 380px;
}
.layer-not-contain-info {
    width: 420px;
}
.layer-not-contain-info.visible,
.layer-contain-info.visible {
    transform: translate(-50%, -50%);
}
.lci-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}
.lci-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lci-icon svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
}
.lci-text {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.65;
    font-weight: 500;
    letter-spacing: -0.2px;
}
.lci-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}


.code-list .photobook-thumb {
	width: 100px;
}

#header .bar .bar-gnb {
    display: inline-block;
    height: 100%;
    float: right;
    margin: 0;
}
#header .bar .bar-gnb li {
    float: left;
    margin-right: 10px;
    line-height: 42px;
    font-weight: 350;
    font-size: 13px;
}

.b {
	font-weight: 600;
}

.category-edge {
    background: #ffe000;
    padding: 5px 10px;
    border-radius: 13px;
}

.multi-upload-popup {
	position: fixed;
	z-index: 111000;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
}
.multi-upload-popup .mup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.6);
	backdrop-filter: blur(4px);
}
.multi-upload-popup .mup-modal {
	position: relative;
	z-index: 1;
	width: 600px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border-radius: 20px;
	padding: 28px;
	box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.multi-upload-popup .mup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
.multi-upload-popup .mup-header span {
	font-size: 17px;
	font-weight: 700;
	color: #1a1a1a;
}
.multi-upload-popup .mup-close-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	border-radius: 8px;
	color: #888;
	display: flex;
	transition: background 0.15s, color 0.15s;
}
.multi-upload-popup .mup-close-btn:hover { background: #f2f2f2; color: #333; }
.multi-upload-popup .mup-close-btn svg { width: 20px; height: 20px; }
.multi-upload-popup .mup-desc {
	font-size: 13px;
	color: #888;
	margin: 0 0 20px;
}
.multi-upload-popup .mup-options {
	display: flex;
	gap: 14px;
}
.multi-upload-popup .mup-option {
	flex: 1;
	border: 1.5px solid #e8e8e8;
	border-radius: 16px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.multi-upload-popup .mup-option:hover {
	border-color: #bbb;
	box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.multi-upload-popup .mup-preview img {
	width: 100%;
	border-radius: 8px;
	display: block;
	border: 1px solid #f0f0f0;
}
.multi-upload-popup .mup-option-body { flex: 1; }
.multi-upload-popup .mup-option-body strong {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 8px;
}
.multi-upload-popup .mup-option-body ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.multi-upload-popup .mup-option-body li {
	font-size: 13px;
	padding-left: 16px;
	position: relative;
	color: #555;
}
.multi-upload-popup .mup-option-body li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
}
.multi-upload-popup .mup-option-body li.pro::before { background: #4caf78; }
.multi-upload-popup .mup-option-body li.con::before { background: #e0634a; }
.multi-upload-popup .mup-btn {
	width: 100%;
	padding: 11px 0;
	border-radius: 10px;
	border: 1.5px solid #d0d0d0;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	color: #333;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.multi-upload-popup .mup-btn:hover { background: #f5f5f5; border-color: #aaa; }
.multi-upload-popup .mup-btn.primary {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}
.multi-upload-popup .mup-btn.primary:hover { background: #333; }
.show-multiupload-option-popup {
	display: inline-block;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: .375rem .75rem;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #f7f7f7;
}
.show-multiupload-option-popup:hover {
	background: #ececec;
}
.preview img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}


/* option start */

.option-card {
    font-family: 'Pretendard', -apple-system, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.header {
    text-align: center;
    padding: 40px 0;
}

.header h1 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

/* 그리드 레이아웃: 모바일 1열, PC 3열 */
.option-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .option-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 옵션 카드 디자인 */
.option-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* 마우스 호버 및 클릭(터치) 시 피드백 */
.option-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.option-card:active {
    transform: scale(0.98); /* 클릭 시 쏙 들어가는 느낌 */
}

/* 이미지 영역 */
.image-box {
    width: 100%;
    aspect-ratio: 4 / 3; /* 이미지 비율 고정 */
    background-color: #eee;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 텍스트 정보 영역 */
.info-box {
    padding: 20px;
}

.info-box h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.info-box p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 12px;
}

.size-tag {
    display: inline-block;
    padding: 4px 10px;
    background: #f1f3f5;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #495057;
}


/* 사진 업로드 그리드 설정 */
.upload-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 모바일 기본 2열 */
    gap: 15px;
    padding: 10px;
}

@media (min-width: 768px) {
    .upload-grid {
        grid-template-columns: repeat(3, 1fr); /* PC는 3열 */
        gap: 25px;
    }
}

/* 개별 페이지 카드 */
.page-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e1e4e8;
    padding: 15px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.page-number {
    font-weight: bold;
    font-size: 0.9rem;
    color: #007bff;
}

/* 레이아웃 선택 셀렉트 박스 */
.layout-select {
    font-size: 0.75rem;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* 사진 업로드 영역 (프레임) */
.photo-upload-zone {
    width: 100%;
    aspect-ratio: 1 / 1; /* 정사각형 프레임 */
    background-color: #f8f9fa;
    border: 2px dashed #cbd3da;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.2s;
}

.photo-upload-zone:hover {
    background-color: #e9ecef;
}

.photo-upload-zone img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* 설명 텍스트 칸 */
.desc-input {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 6px;
    font-size: 0.85rem;
    resize: none;
    outline: none;
}

.desc-input:focus {
    border-color: #007bff;
}

/* 숨겨진 파일 input */
.file-input {
    display: none;
}

.resume-section {
    margin-bottom: 30px;
}

/* 작업 이어하기 섹션 수정 */
.resume-section {
    margin: 20px 0; /* 위아래 여백 추가 */
    padding: 0 15px; /* 화면 양 끝에서 살짝 띄움 */
}

.resume-box {
    background: #eef2f7;
    border-radius: 16px; /* 조금 더 둥글게 해서 앱 느낌 강조 */
    padding: 25px 20px; /* 내부 상하좌우 여백 넉넉히 */
    text-align: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); /* 은은한 깊이감 */
}

.resume-content span {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #495057;
}

/* 입력 그룹 레이아웃 개선 */
.input-group {
    display: flex;
    flex-direction: row; /* 기본 가로 배치 */
    gap: 8px;
    justify-content: center;
    width: 100%;
    max-width: 400px; /* 너무 넓어지지 않게 제한 */
    margin: 0 auto;
}

.input-group input {
    flex: 2; /* 입력창이 더 넓게 */
    padding: 14px 15px; /* 터치하기 편하게 높이 조절 */
    border: 1px solid #ced4da;
    border-radius: 10px;
    font-size: 1rem;
    outline: none;
    background-color: #ffffff;
}

.input-group button {
    flex: 1; /* 버튼 비율 */
    padding: 14px 18px;
    background: #343a40;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

/* 📱 모바일 대응 (화면 폭이 좁을 때) */
@media (max-width: 480px) {
    .resume-box {
        padding: 20px 15px; /* 모바일에서 내부 여백 살짝 조절 */
    }
    
    .input-group {
        flex-direction: column; /* 가로가 좁으면 세로로 쌓기 */
        gap: 10px;
    }
    
    .input-group input, 
    .input-group button {
        width: 100%; /* 세로 모드일 때 꽉 채우기 */
        max-width: none;
    }
}

.config-section {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.config-section h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    border-left: 4px solid #007bff;
    padding-left: 10px;
}

/* 양면/단면 토글 버튼 스타일 */
.toggle-group {
    display: flex;
    background: #f1f3f5;
    padding: 5px;
    border-radius: 10px;
}

.toggle-group input { display: none; }
.toggle-group label {
    flex: 1;
    text-align: center;
    padding: 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.2s;
    font-weight: bold;
}

.toggle-group input:checked + label {
    background: #fff;
    color: #007bff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 페이지 스텝퍼 */
.page-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.page-stepper button {
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
}

.page-display { font-size: 1.2rem; font-weight: bold; }

/* 폰트/레이아웃 그리드 */
.font-grid, .cover-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 768px) {
    .font-grid, .cover-layout-grid { grid-template-columns: repeat(4, 1fr); }
}

.font-item, .layout-item { cursor: pointer; }
.font-item input, .layout-item input { display: none; }

.font-preview, .layout-thumb {
    border: 2px solid #eee;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

.font-item input:checked + .font-preview,
.layout-item input:checked + .layout-thumb {
    border-color: #007bff;
    background: #e7f1ff;
}

/* 책등 미리보기 */
.spine-preview { margin-top: 20px; text-align: center; }
.spine-label { font-size: 0.8rem; color: #888; margin-bottom: 5px; }
.spine-box {
    width: 30px; /* 세로 모양 강조 */
    min-height: 200px;
    background: #333;
    color: #fff;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 5px;
}
#spine-text {
    writing-mode: vertical-rl; /* 텍스트 세로 쓰기 */
    font-size: 0.9rem;
    letter-spacing: 2px;
}

/* 고정 바 기본 스타일 */
.fixed-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.85); /* 반투명 백색 */
    backdrop-filter: blur(10px); /* 배경 블러 효과 (아이폰 스타일) */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom); /* 아이폰 하단 바 간격 대응 */
}

.action-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 10px;
    max-width: 1000px;
    margin: 0 auto;
    gap: 8px;
}

/* 개별 버튼 공통 스타일 */
.btn-action {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 12px 5px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

/* 버튼별 색상 포인트 */
.btn-reset { background: #f1f3f5; color: #495057; }
.btn-temp { background: #e7f1ff; color: #007bff; }
.btn-preview { background: #343a40; color: #fff; }
.btn-submit { background: #007bff; color: #fff; flex: 1.2; } /* 최종제출 강조 */

/* 터치 피드백 */
.btn-action:active {
    transform: scale(0.92);
    filter: brightness(0.9);
}

/* PC 대응: 하단 바가 너무 넓어지지 않게 조절 */
@media (min-width: 768px) {
    .action-container {
        padding: 15px 50px;
    }
    .btn-action {
        font-size: 1rem;
        padding: 15px;
    }
}

/* 표지 미리보기 존 */
.cover-preview-container {
    position: relative;
    width: 100%;
    max-width: 400px; /* 적절한 미리보기 크기 */
    margin: 0 auto;
}



/* 입력 필드 스타일 */
.input-container {
    margin: 25px 0;
}

.input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.input-field {
    flex: 1;
}

.input-field input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    background: #f8f9fa;
    transition: all 0.2s;
}

.input-field input:focus {
    background: #fff;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

/* 체크박스 컨테이너 */
.use-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    background: #f1f3f5; /* 기본 배경색 */
    border-radius: 8px;
    transition: all 0.2s ease;
    user-select: none; /* 텍스트 선택 방지 */
}

/* 실제 체크박스 숨기기 */
.use-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #007bff; /* 최신 브라우저 체크박스 색상 */
    cursor: pointer;
}

/* 텍스트 스타일 */
.use-check span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
}

/* 체크되었을 때(사용 안 함 상태) 스타일 변화 */
.use-check:has(input:checked) {
    background: #e9ecef; /* 배경을 좀 더 어둡게 */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.use-check:has(input:checked) span {
    color: #adb5bd; /* 글자를 흐리게 */
}

/* 입력창 비활성화 스타일 연동 */
.input-row:has(.use-check input:checked) .input-field input {
    background-color: #e9ecef;
    color: #adb5bd;
    border-color: #dee2e6;
    pointer-events: none; /* 클릭 방지 */
    box-shadow: none;
}

/* 마우스 오버 시 살짝 밝게 */
.use-check:hover {
    background: #dee2e6;
}

/* 레이아웃 선택기 (모바일 앱 스타일 스크롤) */
.layout-selector {
	width: 100%;
    overflow: hidden; /* 영역 밖으로 나가는 것 방지 */
    padding: 10px 0;
}

.section-label {
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 10px;
}


.layout-scroll-box {
    display: flex;
    gap: 12px;
    overflow-x: auto; /* 자동 스크롤 활성화 */
    padding: 10px 5px 15px 5px; /* 하단 스크롤바와 카드 사이 여백(15px) 확보 */
    
    /* IE, Edge용 */
    -ms-overflow-style: auto; 
    /* Firefox용 (스크롤바 얇게) */
    scrollbar-width: thin;
    scrollbar-color: #007bff #f1f3f5;
}

/* 개별 레이아웃 옵션 (잘림 방지) */
.layout-option {
    flex: 0 0 auto; /* ⭐ 매우 중요: 자식 요소가 줄어들지 않고 고정 너비를 유지하게 함 */
    cursor: pointer;
}

.layout-option input { display: none; }

.layout-card {
    width: 60px;
    height: 80px;
    /* 배경을 어두운 회색으로 변경하여 흰색 PNG가 잘 보이게 함 */
    background-color: #e9ecef; 
    /* 격자무늬(Grid) 패턴을 넣으면 '투명 영역'이라는 느낌을 더 줄 수 있습니다 */
    background-image: 
        linear-gradient(45deg, #dee2e6 25%, transparent 25%), 
        linear-gradient(-45deg, #dee2e6 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #dee2e6 75%), 
        linear-gradient(-45deg, transparent 75%, #dee2e6 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px 5px, 5px 0;
    
    border: 2px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

/* 💥 수정 포인트 3: 이미지 스타일 (가득 채우기) */
.layout-card img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 이미지 비율 유지하며 가득 채움 (또는 cover) */
}

/* 💥 수정 포인트 4: 선택 시 효과 (테두리만 강조) */
.layout-option input:checked + .layout-card {
    border-color: #007bff; /* 파란색 테두리 */
    background-color: rgba(0, 123, 255, 0.05); /* 은은한 파란 배경 추가 (선택사항) */
    transform: translateY(-4px); /* 살짝 위로 띄움 */
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2); /* 파란 그림자 추가 */
}

/* 크롬, 사파리, 웨일용 스크롤바 디자인 */
.layout-scroll-box::-webkit-scrollbar {
    height: 6px; /* 가로 스크롤바 높이 */
    display: block !important; /* 강제로 보이게 함 */
}

/* 스크롤바 트랙(바탕) */
.layout-scroll-box::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 10px;
}

/* 스크롤바 핸들(움직이는 부분) */
.layout-scroll-box::-webkit-scrollbar-thumb {
    background: #adb5bd; /* 기본 회색 */
    border-radius: 10px;
    transition: background 0.2s;
}

/* 마우스 올렸을 때 핸들 색상 강조 */
.layout-scroll-box::-webkit-scrollbar-thumb:hover {
    background: #007bff; /* 파란색으로 변경되어 스크롤 가능함을 암시 */
}

.layout-selector {
    position: relative;
}

/* 우측에 은은한 그림자를 주어 다음 내용이 있음을 암시 */
.layout-selector::after {
    content: '';
    position: absolute;
    right: 0;
    top: 40px; /* 라벨 아래부터 */
    width: 40px;
    height: 100px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
    pointer-events: none; /* 클릭 방해 금지 */
}


.main-cover {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1.2;
    background: #f8f9fa;
    border: 2px dashed #cbd3da;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    
    /* 중앙 정렬의 핵심 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.placeholder-content {
    text-align: center;
    pointer-events: none; /* 클릭 이벤트가 부모에게 전달되도록 */
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: #e9ecef;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px;
    transition: 0.3s;
}

.plus-icon {
    font-size: 30px;
    color: #6c757d;
    font-style: normal;
}

.main-cover:hover .icon-circle {
    background: #007bff;
}

.main-cover:hover .plus-icon {
    color: #fff;
}

/* Croppie 내부 스타일 조정 (표지 크기에 맞춤) */
.croppie-container {
    width: 100%;
    height: 100%;
}

/* 1. 업로드 존 기본 스타일 (점선 제거, 배경색 고정) */
.photo-upload-zone.main-cover {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1.2;
    background: #ffffff; /* 흰색 배경으로 깔끔하게 */
    border: 1px solid #e1e4e8; /* 점선 대신 얇은 실선 */
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 편집기가 튀어나가지 않게 */
    transition: box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 마우스 오버 효과 제거 (기존 :hover 배경색 변경 삭제) */
.photo-upload-zone.main-cover:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1); /* 배경색 대신 은은한 그림자만 */
}

/* 2. 사진 업로드 후 스타일 (테두리 제거) */
.photo-upload-zone.is-editing {
    border: none; /* 편집 중에는 테두리 제거 */
    background: #000; /* 사진 편집에 집중하도록 검정 배경 (선택사항) */
}

/* 3. 사진 교체 버튼 (Sub Button) */
.btn-sub {
    background-color: #ffffff;
    color: #495057;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-sub:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

.btn-sub:active {
    transform: scale(0.98);
}



/* 모달 배경 */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex; justify-content: center; align-items: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

/* 모달 박스 */
.edit-container {
    background: #fff;
    width: 95%;
    max-width: 500px;
    border-radius: 25px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

/* 페이지 번호 배지 */
.page-badge {
    display: inline-block;
    background: #e7f3ff;
    color: #007bff;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

/* 편집 영역 컨테이너 */
.is-editing {
    position: relative;
    background: #f0f0f0;
    border-radius: 15px;
    overflow: hidden;
    min-height: 400px;
}

/* 레이아웃 오버레이 (Croppie 위에 겹치기) */
#layout-overlay-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* 중요: 클릭 통과 */
    z-index: 10;
    display: flex; justify-content: center; align-items: center;
}

#layout-overlay-img {
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0.7; /* 편집 중엔 뒤가 잘 보이게 */
}

/* 하단 버튼 그룹 */
.modal-footer {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}


/* 편집 중일 때(사진이 있을 때) 스타일 */
.photo-upload-zone.main-cover.is-editing {
    border: none;           /* 점선/실선 제거 */
    background: #000;      /* 사진 편집에 집중하도록 배경 어둡게 */
    cursor: default;        /* 더 이상 클릭해서 업로드창이 뜨지 않게 조절 가능 */
}

/* Croppie 내부 이미지 스타일 최적화 */
.cr-boundary {
    border-radius: 12px;   /* 겉 테두리 둥글게 */
}

/* Croppie 줌 슬라이더 컨테이너 강제 마진 조절 */
.cr-slider-wrap {
    width: 85% !important;
    margin: 30px auto !important; /* 상하 여백을 넉넉히 주어 어르신들이 조작하기 편하게 함 */
    padding: 10px 0 !important;
    position: relative !important;
    display: block !important;
}

/* 슬라이더 바 자체의 두께와 색상 (PC에서 더 잘 보이게) */
.cr-slider {
    cursor: pointer;
    height: 8px !important;
    background: #e9ecef !important;
    border-radius: 10px !important;
}

/* 슬라이더 손잡이(Thumb) 크게 조절 */
.cr-slider::-webkit-slider-thumb {
    width: 28px !important;
    height: 28px !important;
    background: #007bff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

.page-container {
	width: 100%;
}

/* 편집 영역을 감싸는 박스 */
#cover-dropzone {
    position: relative;
    width: 100%;

    aspect-ratio: 2066 / 3035;
    min-height: 450px;
    background-color: #f8f9fa;
    border: 2px dashed #ddd;
    border-radius: 15px;
    overflow: hidden;
}

/* 기본 상태 (사진 없을 때) */
#cover-dropzone {
    position: relative;
    width: 100%;
    min-height: 450px;
    background-color: #f8f9fa;
    border: 2px dashed #adb5bd; /* 부드러운 회색 점선 */
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 💥 사진 업로드 후 (깔끔하게 변경) */
#cover-dropzone.photo-active {
   /* border: 2px solid #007bff;*/ /* 신뢰감을 주는 파란색 실선으로 변경 */
	border: 0;
    background-color: #ffffff;
    box-shadow: 0 0 20px rgba(0,0,0,0.05); /* 살짝 그림자를 주어 입체감 부여 */
}

/* 편집 모드일 때 (더 집중되도록) */
#cover-dropzone.is-editing {
    border-color: #28a745; /* 편집 중엔 초록색으로 변경하여 상태 암시 */
}

#layout-overlay-img {
	width: 100%;
    height: 100%;
    object-fit: contain; /* 레이아웃 원본 비율 유지 */
    /* 편집 중엔 사진이 잘 보이도록 투명도 조절 (필요 시) */
    opacity: 0.9;
}


#cover-editor {
    width: 100%;
    height: 100%;
    z-index: 5;
}


/* 기본 버튼 공통 스타일 */
.btn-main, .btn-sub {
    flex: 1; /* 부모가 flex일 때 균등 배분 */
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px; /* 어르신들이 누르기 편한 높이 */
    box-sizing: border-box;
}

/* 메인 버튼: 강조색 (파란색 또는 브랜드 컬러) */
.btn-main {
    background-color: #007bff;
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
}

.btn-main:hover {
    background-color: #0069d9;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3);
}

.btn-main:active {
    background-color: #0056b3;
    transform: translateY(0);
}

/* 서브 버튼: 차분한 색상 (회색 계열) */
.btn-sub {
    background-color: #f1f3f5;
    color: #495057;
    border: 1px solid #dee2e6;
}

.btn-sub:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
}

.btn-sub:active {
    background-color: #dee2e6;
}

/* 저장 버튼 전용 (초록색 강조) */
#btn-save-edit {
    background-color: #28a745 !important;
    box-shadow: 0 4px 6px rgba(40, 167, 69, 0.2) !important;
}

#btn-save-edit:hover {
    background-color: #218838 !important;
}


/* 컨테이너 설정 */
#preview-cover-display {
    position: relative;
    min-height: 200px;
    transition: opacity 0.3s ease;
}

#preview-cover-display img {
    width: 100%;
    height: 100%;
    /* contain: 이미지 전체가 잘리지 않고 영역 안에 들어오게 함 */
    /* cover: 영역을 꽉 채우되 비율 유지 (지금 상태) */
    object-fit: contain; 
    
    /* 배경이 비어 보일 수 있으므로 중앙 정렬 */
    object-position: center;
    background-color: #f8f8f8; /* 빈 공간을 채울 배경색 (선택) */
}


/* 로딩 중일 때 나타날 스피너 */
#preview-cover-display.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid rgba(0,0,0,0.1);
    border-top-color: #3498db; /* 포인트 컬러 */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 10;
}

/* 배경 어둡게 처리 */
#preview-cover-display.loading::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#preview-cover-display .text-overlay {
    position: absolute;
    top: 0; /* 표지 디자인에 따라 위치 조절 (예: 상단 20% 지점) */
    left: 0;
    width: 100%;
    text-align: center;
    pointer-events: none; /* 텍스트가 마우스 클릭을 방해하지 않도록 설정 */
    word-break: break-all;
	height: 100%;
}
#preview-cover-display .text-overlay * {
	position: absolute;
	text-align: center;
	width: 100%;
}
#display-main-title {
    font-size: 25px;
}
#display-sub-title {
    font-size: 13px;
}
#cover-dropzone[data-layout=box1] #display-main-title {
	top: 433px;
}
#cover-dropzone[data-layout=box1] #display-sub-title {
	top: 483px;
}
#cover-dropzone[data-layout=box2] #display-main-title {
    top: 82px;
}
#cover-dropzone[data-layout=box2] #display-sub-title {
	top: 448px;
}
#cover-dropzone[data-layout=arch] #display-main-title {
    top: 423px;
}
#cover-dropzone[data-layout=arch] #display-sub-title {
    top: 467px;
}
#cover-dropzone[data-layout=art3] #display-main-title {
    top: 84px;
    left: 18px;
    text-align: left;
}
#cover-dropzone[data-layout=art3] #display-sub-title {
    top: 459px;
    left: 41px;
}
#cover-dropzone[data-layout=cover8] #display-main-title,
#cover-dropzone[data-layout=cover9] #display-main-title {
    top: 109px;
    font-size: 21px;
}
#cover-dropzone[data-layout=cover8] #display-sub-title,
#cover-dropzone[data-layout=cover9] #display-sub-title {
    top: 142px;
    font-size: 10px;
}
#cover-dropzone[data-layout=cover11] #display-main-title {
    top: 148px;
    font-size: 20px;
}
#cover-dropzone[data-layout=cover11] #display-sub-title {
    top: 179px;
    font-size: 10px;
}
#cover-dropzone[data-layout=cover12] #display-main-title,
#cover-dropzone[data-layout=cover13] #display-main-title {
    top: 380px;
    font-size: 20px;
}
#cover-dropzone[data-layout=cover12] #display-sub-title,
#cover-dropzone[data-layout=cover13] #display-sub-title {
    top: 415px;
    font-size: 10px;
}
#cover-dropzone[data-layout=cover14] #display-main-title {
    top: 54px;
    left: 40px;
    text-align: left;
}
#cover-dropzone[data-layout=cover14] #display-sub-title {
    top: 99px;
    left: 40px;
    text-align: left;
    font-size: 11px;
}

#cover-dropzone[data-layout=cover15] #display-main-title {
    top: 144px;
    font-size: 22px;
}
#cover-dropzone[data-layout=cover15] #display-sub-title {
    top: 474px;
    font-size: 10px;
}
#cover-dropzone[data-layout=cover16] #display-main-title {
    top: 412px;
    font-size: 17px;
}
#cover-dropzone[data-layout=cover16] #display-sub-title {
    top: 445px;
    font-size: 10px;
}
#cover-dropzone[data-layout=cover17] #display-main-title {
    top: 105px;
    font-size: 16px;
}
#cover-dropzone[data-layout=cover17] #display-sub-title {
    top: 140px;
    font-size: 10px;
}
#cover-dropzone[data-layout=cover18] #display-main-title {
    top: 392px;
    font-size: 13px;
}
#cover-dropzone[data-layout=cover18] #display-sub-title {
    top: 452px;
    font-size: 10px;
}

#cover-dropzone[data-layout=cover19] #display-main-title {
    display:none;
}
#cover-dropzone[data-layout=cover19] #display-sub-title {
    display:none;
}
/* new end */
@media screen and (max-width: 768px) {
    
    .resume-code-input {
        width: 100%;
        padding: 13px !important;
    }
	.view-desktop-tb {
		display: none;
	}
	.view-mobile {
		display: block;
	}
	.m-tb-col {
		width: 100px;
	}
	.m-block {
		display: block;
	}
	
	.page .image-upload .upload-info-msg {
		display: none;
	}
	#container {
		width: 100% !important;
	    font-size: 13px;
        padding: 0 !important;
	    box-sizing: border-box;
	}
	#container .page {
		padding: 0;
	}
	#container.user-page {
		padding: 14px 0 0;
	}
	.logo-upload,
	.cover-upload,
	.page-list {
	    margin: 0 auto;
	    width: 328px;
	}
	.page-list .page {
	    width: 100%;
	    aspect-ratio: 1/ 1.514;
		height: auto;
	}
	.page-list .page .num {
	    font-size: 12px;
	    width: 28px;
	    height: 20px;
		font-weight: 400;
	}
	.page-list .page .remove {
		font-size: 12px;
	}
	.step-content {
	    text-align: center;
	}
	.print-page {
		align-self: center;
	}

	#container .page-list .cell .page {
	    width: 328px;
	    height: 504px;
	}
	
	#container .page-list .cell .page .page-layout10 .item,
	#container .page-list .cell .page .page-layout11 .item,
	#container .page-list .cell .page .page-layout4 .item,
	#container .page-list .cell .page .page-layout3 .b-layer:last-child .item {
		width: 136px;
	    height: 212px;
		overflow: hidden;
	}
	#container .photobook-preview .page.blank {
		padding: 0 12px;
	}

    .layout[data-layout=art3] .covertitle1 {
        top: 75px;
        left: 30px;
    }
	.layout[data-layout=art3] .covertitle2 {
		top: 368px;
		left: 30px;
	}

	.page .remove {
		top: 4px;
		right: 4px;
		padding: 4px 8px;
		gap: 2px;
	}
	.page .remove a {
		width: 28px;
		height: 28px;
	}
	.page .remove a svg {
	    width: 14px;
	    height: 14px;
	}
	.page .remove .image-contain svg {
	    width: 14px;
	    height: 14px;
	}
	#container .page-list .cell .page .page-layout1 .item {
		width: 282px;
	    height: 460px;
	    min-height: 0;
	}
	.logo-upload, .cover-upload, .page-list {
	    width: 328px;
	}
	#container .page-list .cell .page .page-layout2 .item,
	#container .page-list .cell .page .page-layout3 .item {
	    width: 282px;
	    height: 225px;
	}
	#container .page-list .cell .page .page-layout1,
	#container .page-list .cell .page .page-layout2,
	#container .page-list .cell .page .page-layout3,
	#container .page-list .cell .page .page-layout4,
	#container .page-list .cell .page .page-layout10,
	#container .page-list .cell .page .page-layout11,
	#container .page-list .cell .page .page-layout12 {
		padding: 14.4px;
		margin: 0;
	}
	#container .page-list .cell .page .page-layout3 .b-layer,
	#container .page-list .cell .page .page-layout12 .b-layer {
	    width: 282px;
	    height: 233px;
	}
	#container .page-list .cell .page .page-layout4 .b-layer {
	    width: 268px;
	    height: 223px;
	}
	#container .page-list .cell .page .page-layout10 .b-layer {
	    width: 282px;
	    height: 148px;
	}
	#container .page-list .cell .page .page-layout4,
	#container .page-list .cell .page .page-layout10,
	#container .page-list .cell .page .page-layout11,
	#container .page-list .cell .page .page-layout12 {
	    gap: 7px;
	}
	#container .page-list .cell .page .page-layout12 .b-layer {
	    height: 223px;
	}
	#container .page-list .cell .page .page-layout12 .b-layer:nth-child(2),
	#container .page-list .cell .page .page-layout12 .b-layer:nth-child(3),
	#container .page-list .cell .page .page-layout11 .b-layer {
	    width: 282px;
	    height: 110px;
	}
	#container .page-list .cell .page .page-layout4 .b-layer .item,
	#container .page-list .cell .page .page-layout10 .b-layer .item,
	#container .page-list .cell .page .page-layout11 .b-layer .item,
	#container .page-list .cell .page .page-layout12 .b-layer .item {
	    margin-bottom: 0 !important;
	}
	#container .page-list .cell .page .page-layout4 .item,
	#container .page-list .cell .page .page-layout3 .b-layer:nth-child(2) .item,
	#container .page-list .cell .page .page-layout12 .item {
		width: 145px;
		height: 223px;
	}
	#container .page-list .cell .page .page-layout3 .b-layer:nth-child(2) {
	    height: 204px;
	}
	#container .page-list .cell .page .page-layout3 .b-layer:first-child .item {
	    width: 282px;
	}

	#container .page-list .cell .page .page-layout10 .item {
	    width: 145px;
	    height: 149px;
	}
	#container .page-list .cell .page .page-layout12 .b-layer:nth-child(2) .item,
	#container .page-list .cell .page .page-layout12 .b-layer:nth-child(3) .item,
	#container .page-list .cell .page .page-layout11 .item {
	    width: 145px;
	    height: 110px;
	}

	/* 2열 레이아웃(item 135px)에서 .remove 버튼 축소 */
	#container .page-list .cell .page .page-layout3 .b-layer:nth-child(2) .item .remove,
	#container .page-list .cell .page .page-layout4 .b-layer .item .remove,
	#container .page-list .cell .page .page-layout10 .b-layer .item .remove,
	#container .page-list .cell .page .page-layout11 .b-layer .item .remove,
	#container .page-list .cell .page .page-layout12 .b-layer .item .remove {
	    padding: 2px 4px;
	    gap: 0px;
	    top: 3px;
	    right: 3px;
	}
	#container .page-list .cell .page .page-layout3 .b-layer:nth-child(2) .item .remove a,
	#container .page-list .cell .page .page-layout4 .b-layer .item .remove a,
	#container .page-list .cell .page .page-layout10 .b-layer .item .remove a,
	#container .page-list .cell .page .page-layout11 .b-layer .item .remove a,
	#container .page-list .cell .page .page-layout12 .b-layer .item .remove a {
	    width: 22px;
	    height: 22px;
	}
	#container .page-list .cell .page .page-layout3 .b-layer:nth-child(2) .item .remove a svg,
	#container .page-list .cell .page .page-layout4 .b-layer .item .remove a svg,
	#container .page-list .cell .page .page-layout10 .b-layer .item .remove a svg,
	#container .page-list .cell .page .page-layout11 .b-layer .item .remove a svg,
	#container .page-list .cell .page .page-layout12 .b-layer .item .remove a svg,
	#container .page-list .cell .page .page-layout3 .b-layer:nth-child(2) .item .remove .image-contain svg,
	#container .page-list .cell .page .page-layout4 .b-layer .item .remove .image-contain svg,
	#container .page-list .cell .page .page-layout10 .b-layer .item .remove .image-contain svg,
	#container .page-list .cell .page .page-layout11 .b-layer .item .remove .image-contain svg,
	#container .page-list .cell .page .page-layout12 .b-layer .item .remove .image-contain svg {
	    width: 11px;
	    height: 11px;
	}

	.layout[data-layout=box1] .covertitle1 {
		top: 371px;
		font-size: 20px;
	}
	.layout[data-layout=box1] .covertitle2 {
		top: 406px;
		font-size: 11px;
	}

	.layout[data-layout=box2] .covertitle1 {
		top: 96px;
		font-size: 18px;
	}
	.layout[data-layout=box2] .covertitle2 {
		top: 372px;
		font-size: 12px;
	}
	.layout[data-layout=circle] .covertitle1 {
		top: 86px;
		font-size: 18px;
	}
	.layout[data-layout=circle] .covertitle2 {
	    top: 363px;
		font-size: 11px;
	}
	.layout[data-layout=circle2] .covertitle1 {
		top: 86px;
		font-size: 18px;
	}
	.layout[data-layout=circle2] .covertitle2 {
	    top: 363px;
		font-size: 11px;
	}
	.layout[data-layout=arch] .covertitle1 {
		top: 362px;
		font-size: 18px;
	}
	.layout[data-layout=arch] .covertitle2 {
		top: 395px;
		font-size: 11px;
	}
	.layout[data-layout='cover8'] .covertitle1,
	.layout[data-layout='cover9'] .covertitle1 {
		top: 114px;
		font-size: 15px;
	}
	.layout[data-layout='cover8'] .covertitle2,
	.layout[data-layout='cover9'] .covertitle2 {
		top: 141px;
		font-size: 7px;
	}

	.layout[data-layout='cover10'] .covertitle1 {
		top: 332px;
		font-size: 15px;
	}
	.layout[data-layout='cover10'] .covertitle2 {
		top: 367px;
		font-size: 7px;
	}
	.layout[data-layout='cover11'] .covertitle1 {
		top: 151px;
		font-size: 15px;
	}
	.layout[data-layout='cover11'] .covertitle2 {
		top: 178px;
		font-size: 7px;
	}

	.layout[data-layout='cover12'] .covertitle1,
	.layout[data-layout='cover13'] .covertitle1 {
		top: 324px;
		font-size: 15px;
	}
	.layout[data-layout='cover12'] .covertitle2,
	.layout[data-layout='cover13'] .covertitle2 {
		top: 352px;
		font-size: 7px;
	}
	.layout[data-layout='cover14'] .covertitle1 {
	    top: 77px;
		left: 42px;
		text-align: left;
	}
	.layout[data-layout='cover14'] .covertitle2 {
	    top: 123px;
		left: 42px;
	    text-align: left;
		font-size: 11px;
	}
	.layout[data-layout='cover15'] .covertitle1 {
		top: 151px;
		font-size: 17px;
	}
	.layout[data-layout='cover15'] .covertitle2 {
		top: 399px;
		font-size: 7px;
	}
	.layout[data-layout='cover16'] .covertitle1 {
		top: 354px;
		font-size: 14px;
	}
	.layout[data-layout='cover16'] .covertitle2 {
		top: 385px;
		font-size: 7px;
	}
	.layout[data-layout='cover17'] .covertitle1 {
		top: 120px;
		font-size: 12px;
	}
	.layout[data-layout='cover17'] .covertitle2 {
		top: 142px;
		font-size: 8px;
	}
	.layout[data-layout='cover18'] .covertitle1 {
		top: 326px;
		font-size: 12px;
	}
	.layout[data-layout='cover18'] .covertitle2 {
		top: 379px;
		font-size: 8px;
	}

	#container .page-list .cell .page .text {
		position: absolute;
		bottom: 20px;
	}

	.save-code-msg-content {
		width: 96%;
		font-size: 12px;
	}
	.fixed-bottom {
	    width: 100%;
	    left: 0;
	    margin-left: 0;
	}
	.fixed-bottom a, .fixed-bottom button {
		font-size: 11px;
	    width: 80px;
	}

	.code-wrap .code {
		width: 90%;
	}
	.photobook-preview {
		width: 100%;
	}

	#container .photobook-preview .page {
		width: 50%;
	}
	.photobook-preview .page .coilspring, .photobook-preview .page .coilspring-left {
	    right: -6%;
	}
	.photobook-preview .page .coilspring-left {
		left: -4%;
	}

	.delete-notification {
	    font-size: 11px;
	    width: 96%;
	    letter-spacing: -1px;
		padding: 10px 10px;
        top: 6px;
	}
	.delete-notification-remove {
		top: 9px;
        right: 10px;
	}
/*
	.deletion-date {
	    width: 83px;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		vertical-align: middle;
	}*/

	.step {
	    padding: 0 10px 10px 14px;
	}

	.page-list .cell .layout-txt {
		position: relative;
	}
	
	.layer-not-contain-info,
	.layer-contain-info {
		width: calc(100vw - 32px);
		padding: 14px 16px;
	}

	.layer-not-contain-info {
		width: calc(100vw - 32px);
	}
	.lci-text {
		font-size: 12.5px;
	}
	.lci-sub {
		font-size: 11px;
	}
	.lci-icon {
		width: 36px;
		height: 36px;
	}
	#container .photobook-preview .page {
		min-height: 253px;
	}

	.low-resolution {
	    font-size: 9px;
		padding: 4px 8px 4px 22px;
	}
	.low-resolution svg {
		top: 1px;
	}
    #header .bar .bar-gnb {
        position: absolute;
        top: -5px;
        right: -2px;
        font-size: 12px;
    }
	.page-list .cell .page-desc label {
		font-size: 10px;
		padding: 2px 8px;
	}
	.page-list .cell .page-desc input:not([type=checkbox]) {
		height: 30px;
		font-size: 12px;
		border-radius: 6px;
		padding: 0 8px;
	}

	.multi-upload-popup .mup-modal {
		padding: 20px 16px;
	}
	.multi-upload-popup .mup-options {
		flex-direction: column;
	}


	.add-page[data-page_add='0'],
	.add-page[data-page_add='1'] {
		height: 40px;
	}
}

@media screen and (max-width: 360px) {
    #container .photobook-preview .page {
        min-height: 205px;
    }
}


/* ========================================================
   MODERN REDESIGN — 2025
   브랜드 컬러: #f4791f (오렌지)
   배경/카드/버튼 전반 개선, 기존 클래스명 유지
   ======================================================== */

/* --- 토큰 정의 --- */
:root {
    --pb-orange: #f4791f;
    --pb-orange-light: #fff8f4;
    --pb-orange-dark: #d9600a;
    --pb-ink: #1a1a1a;
    --pb-muted: #888;
    --pb-border: #e8e8e8;
    --pb-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
    --pb-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.10);
    --pb-radius: 14px;
}

/* --- 베이스 폰트 크기 --- */
#container {
    font-size: 15px;
    padding-top: 40px;
    padding-bottom: 120px;
}
#container.full {
    padding-top: 0;
    padding-bottom: 0;
}

/* --- 스텝 헤더 --- */
.step {
    font-size: 16px;
    font-weight: 800;
    color: var(--pb-ink);
    padding: 0 0 14px 0;
    margin-top: 8px;
    margin-bottom: 14px;
    border-radius: 0;
    display: block;
}
.step::before {
    content: none;
}

/* --- 스텝 콘텐츠 — 흰 카드 --- */
.step-content {
    background: #fff;
    border-radius: var(--pb-radius);
    padding: 24px 22px;
    margin-bottom: 52px;
    border-bottom: none;
    box-shadow: var(--pb-shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 15px;
}

/* --- 선택 버튼 (양면/단면, 폰트, 페이지 추가) --- */
.add-page,
.print-page,
.font-style {
    border: 2px solid var(--pb-border);
    background: #fff;
    border-radius: 12px;
    color: #444;
    font-weight: 700;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.add-page:hover,
.print-page:hover,
.font-style:hover {
    border-color: #ccc;
    background: #fafafa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.add-page.active,
.print-page.active,
.font-style.active {
    border: 2px solid var(--pb-orange);
    background: var(--pb-orange-light);
    color: var(--pb-orange);
    box-shadow: 0 2px 12px rgba(244, 121, 31, 0.18);
}
.add-page.active .price,
.print-page.active .price {
    color: var(--pb-orange);
}
.add-page .price,
.print-page .price {
    color: #e05c20;
}


/* --- 하단 고정 액션 바 --- */
.fixed-bottom {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    bottom: 16px;
    padding: 8px 10px;
}
.fixed-bottom a,
.fixed-bottom button {
    background: #2c2c2c;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: none;
}
.fixed-bottom a:hover,
.fixed-bottom button:hover {
    background: #111;
    box-shadow: none;
}
.fixed-bottom #photobookSubmit {
    background: var(--pb-orange);
    color: #fff;
}
.fixed-bottom #photobookSubmit:hover {
    background: var(--pb-orange-dark);
    box-shadow: none;
}

/* --- 코드 표시 박스 (제출 후) --- */
.code-wrap .code {
    background: var(--pb-orange-light);
    border: 3px solid var(--pb-orange);
    border-radius: var(--pb-radius);
    color: var(--pb-orange);
    font-size: 44px;
}

/* --- 저장 코드 모달 (모바일) --- */
.save-code-msg-content {
    width: 92%;
    padding: 40px 28px 32px;
}
.save-code-msg-content .code em {
    font-family: 'Source Code Pro', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
    font-size: 44px;
    letter-spacing: 0.12em;
    color: #111;
}

/* --- 삭제·알림 토스트 --- */
.delete-notification {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    color: var(--pb-ink);
    top: 20px;
    padding: 13px 48px 13px 22px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.6;
}
.delete-notification-remove {
    color: #c0c0c0;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
    .delete-notification {
        font-size: 14px;
        letter-spacing: 0;
        width: auto;
        left: 16px;
        right: 16px;
        transform: none;
        top: 12px;
        padding: 13px 44px 13px 18px;
        border-radius: 12px;
    }
    .delete-notification-remove {
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* --- 페이지 번호 컬러 (파랑→오렌지) --- */
.page-number {
    color: var(--pb-orange);
}

/* --- 페이지 이동 닫기 버튼 — 평소엔 숨김, 이동창 열릴 때만 표시 --- */
.page-move-close {
    display: none;
}
.page-move .page-move-close {
    display: flex !important;
}

/* --- 이어 만들기 코드 입력 박스 --- */
.resume-code-box {
    background: linear-gradient(135deg, #fff8f4 0%, #fffefe 70%);
    border: 1.5px solid #ffd5b8;
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.resume-code-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--pb-orange);
    display: flex;
    align-items: center;
    gap: 7px;
}
.resume-code-desc {
    font-size: 14px;
    color: #999;
    margin: 0;
}
.resume-code-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
}
.resume-code-input {
    flex: 1;
    height: 46px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pb-ink);
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.resume-code-input:focus {
    border-color: var(--pb-orange);
    box-shadow: 0 0 0 3px rgba(244, 121, 31, 0.10);
}
.resume-code-input::placeholder {
    color: #ccc;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.resume-code-btn {
    height: 46px;
    padding: 0 22px;
    background: var(--pb-orange);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1;
}
.resume-code-btn:hover {
    background: var(--pb-orange-dark);
}

/* --- 히어로 섹션 (.step.first) --- */
.step.first {
    background: linear-gradient(135deg, #1e1e1e 0%, #2c2c2c 100%);
    color: #fff;
    border-radius: 18px;
    padding: 32px 28px 28px;
    margin-bottom: 24px;
    text-align: left;
}
.hero-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--pb-orange);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.step.first h1 {
    font-size: 28px;
    font-weight: 900;
    line-height: 1.25;
    color: #fff;
    margin-bottom: 10px;
}
.hero-sub {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    margin: 0;
}

/* category-edge — 노란색 → 오렌지 */
.category-edge {
    background: var(--pb-orange);
    color: #fff;
    padding: 3px 10px;
    border-radius: 8px;
}

/* --- 스텝 번호 뱃지 --- */
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--pb-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* --- 페이지 셀 목록 래퍼 — 패딩 없애서 3열 유지 --- */
.step-content.page-list-wrap {
    padding: 12px 0 0;
    background: transparent;
    box-shadow: none;
    border: none;
}

/* --- 업로드 방법 카드 --- */
.upload-methods {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.upload-method {
    flex: 1;
    min-width: 200px;
    background: #fafafa;
    border: 1.5px solid #efefef;
    border-radius: 12px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.upload-method-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.upload-method-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--pb-orange);
    background: var(--pb-orange-light);
    border: 1px solid #ffd5b8;
    border-radius: 20px;
    padding: 2px 8px;
    line-height: 1.6;
}
.upload-method-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pb-ink);
}
.upload-method-desc {
    font-size: 14px;
    color: #888;
    line-height: 1.75;
    margin: 0;
}
.upload-method-desc small {
    font-size: 13px;
    color: #bbb;
}
.show-multiupload-option-popup {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 20px;
    background: var(--pb-orange);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    width: fit-content;
    transition: background 0.15s;
    border: none;
}
.show-multiupload-option-popup:hover {
    background: var(--pb-orange-dark);
}

/* --- code-wrap 제출 완료 섹션 --- */
.code-wrap-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--pb-ink);
    margin-bottom: 8px;
    text-align: center;
    display: block;
}
.code-wrap-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}
.code-wrap-btn {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
    text-decoration: none;
    box-sizing: border-box;
    /* 기본값 (primary와 동일 – 기존 코드 호환) */
    background: var(--pb-orange) !important;
    color: #fff !important;
    border: 2px solid transparent !important;
}
.code-wrap-btn:hover {
    background: var(--pb-orange-dark) !important;
    color: #fff !important;
}
/* 주문 버튼 – 오렌지 채움 (기본과 동일, 명시적 선언) */
.cws-btn-primary {
    background: var(--pb-orange) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.cws-btn-primary:hover {
    background: var(--pb-orange-dark) !important;
}
/* 복사 버튼 – 초록 */
.cws-btn-copy {
    background: #16a34a !important;
    color: #fff !important;
    border-color: transparent !important;
}
.cws-btn-copy:hover {
    background: #15803d !important;
}
/* 처음부터 제작 – 아웃라인 */
.cws-btn-outline {
    background: #fff !important;
    color: var(--pb-ink, #1a1a1a) !important;
    border-color: #d1d5db !important;
}
.cws-btn-outline:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
}
/* 새로고침 – 회색 */
.cws-btn-muted {
    background: #6b7280 !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 11px 24px !important;
}
.cws-btn-muted:hover {
    background: #4b5563 !important;
}

/* --- code-wrap 제출 완료 모던 카드 --- */
.code-wrap-submit {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    padding: 36px 28px 32px;
    max-width: 400px;
    margin: 32px auto 40px;
}
.cws-icon {
    width: 56px;
    height: 56px;
    background: #f0fdf4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #22c55e;
}
.cws-icon svg {
    width: 28px;
    height: 28px;
}
.code-wrap-submit .code-wrap-label {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 6px;
}
.cws-sub {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 20px;
    text-align: center;
}
.cws-code-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--pb-orange-light, #fff8f4);
    border: 2px solid var(--pb-orange, #f4791f);
    border-radius: 14px;
    padding: 16px 20px;
    cursor: pointer;
    position: relative;
    margin-bottom: 4px;
    transition: background 0.15s;
}
.cws-code-box:hover {
    background: #ffe0c4;
}
.cws-code-value {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: var(--pb-ink, #1a1a1a);
    font-family: 'Source Code Pro', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
}
.cws-copy-icon {
    color: var(--pb-orange, #f4791f);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.cws-copy-icon svg {
    width: 20px;
    height: 20px;
}
.code-wrap-submit .code-wrap-btn {
    width: 100%;
    display: block;
    text-align: center;
    padding: 14px 24px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
}
.code-wrap-submit .code-wrap-links {
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}
@media screen and (max-width: 480px) {
    .code-wrap-submit {
        padding: 28px 20px 24px;
    }
    .cws-code-value {
        font-size: 28px;
    }
}

/* --- 모바일 여백 보완 --- */
@media screen and (max-width: 768px) {
    /* 컨테이너에 좌우 여백 부여, 폰트 크기 유지 */
    #container {
        padding: 24px 16px 0 !important;
        font-size: 15px !important;
    }
    #container.full {
        padding: 0 !important;
    }

    /* 페이지 셀 목록은 여백 없이 전체 폭 사용 */
    .step-content.page-list-wrap {
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0;
    }

    /* 히어로 섹션 */
    .step.first {
        border-radius: 14px;
        padding: 26px 22px 22px;
    }
    .step.first h1 {
        font-size: 22px;
    }

    /* 스텝 카드 */
    .step-content {
        border-radius: 12px;
        padding: 18px 16px;
    }

    /* 업로드 방법 카드 — 세로 배치 */
    .upload-methods {
        flex-direction: column;
        gap: 10px;
    }

    /* 이어 만들기 박스 */
    .resume-code-row {
        flex-direction: column;
    }
    .resume-code-btn {
        width: 100%;
    }

    /* 하단 바 */
    .fixed-bottom {
        width: calc(100% - 32px);
        left: 16px;
        margin-left: 0;
        bottom: 12px;
        border-radius: 14px;
    }
}

/* ======================================================== */

/* --- 텍스트 드래그 선택 색상 --- */
::selection {
    background: rgba(244, 121, 31, 0.25);
    color: inherit;
}
::-moz-selection {
    background: rgba(244, 121, 31, 0.25);
    color: inherit;
}

/* ===== 미리보기 페이지 모던 디자인 ===== */

/* 히어로 헤더 */
.preview-hero {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: #fff;
    text-align: center;
    padding: 52px 20px 44px;
}
.preview-eyebrow {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--pb-orange);
    font-weight: 700;
    margin-bottom: 14px;
}
.preview-hero h2 {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}
.preview-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

/* 섹션 라벨 */
.preview-section-label {
    max-width: 640px;
    margin: 0 auto 20px;
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    letter-spacing: 0.14em;
    text-align: center;
}

/* 미리보기 배경 */
.photobook-preview-wrap {
    background: #f0f2f5;
    padding: 40px 20px 140px;
}

/* 페이지 카드 */
#container .photobook-preview .page {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.13);
    border-radius: 2px;
}

/* 빈 페이지 */
#container .photobook-preview .page.blank {
    background: #fff;
    color: #bbb;
    font-size: 12px !important;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    line-height: 1.7;
}

/* 로딩 메시지 */
.photobook-preview .page-wrap .load-msg {
    font-size: 12px;
    color: #aaa;
    line-height: 1.7;
}

@media screen and (max-width: 640px) {
    .preview-hero {
        padding: 36px 20px 30px;
    }
    .preview-hero h2 {
        font-size: 22px;
    }
    .photobook-preview-wrap {
        padding: 28px 12px 120px;
    }
}

/* ===== Photo slot loading skeleton ===== */
.page .item .preview {
    position: relative;
}

/* preview.php page shimmer */
.photobook-preview .page {
    position: relative;
}
.photobook-preview .page:not(.blank):not(.img-loaded)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        90deg,
        #e0e0e0 0%,
        #f0f0f0 40%,
        #e0e0e0 80%
    );
    background-size: 400% 100%;
    animation: photo-slot-shimmer 1.4s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}
.photobook-preview .page:not(.blank) img.photo {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.photobook-preview .page.img-loaded img.photo {
    opacity: 1;
}
.page .item .preview:not(.hide):not(.img-loaded)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        90deg,
        #e0e0e0 0%,
        #f0f0f0 40%,
        #e0e0e0 80%
    );
    background-size: 400% 100%;
    animation: photo-slot-shimmer 1.4s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}
.page .item .preview:not(.hide) img {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.page .item .preview.img-loaded img {
    opacity: 1;
}
@keyframes photo-slot-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Drag-to-reposition (cover mode only) — cursor is default, no hover icon */

/* 이미지 로딩 중 .remove 숨김 */
.item:has(.preview:not(.img-loaded):not(.hide)) .remove {
    visibility: hidden;
    pointer-events: none;
}

/* Reposition button visibility */
.image-reposition { display: none; }
.item.cover-mode .image-reposition { display: inline-flex; }

/* PC(마우스): .remove 는 .item 호버 시에만 표시 */
@media (hover: hover) {
    .page .item .remove {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }
    .page .item:hover .remove,
    .page .item.remove-hover .remove {
        opacity: 1;
        pointer-events: auto;
    }
    /* 로딩 중엔 호버해도 숨김 유지 */
    .page .item:has(.preview:not(.img-loaded):not(.hide)):hover .remove,
    .page .item:has(.preview:not(.img-loaded):not(.hide)).remove-hover .remove {
        opacity: 0;
        pointer-events: none;
    }
    /* 업로드 완료 안내 중 일시적으로 표시 */
    #container.remove-hint .page .item .remove {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Reposition popup overlay */
#repositionPopup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}
.rp-modal {
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
    width: 380px;
    max-width: 96vw;
    max-height: 94vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}
.rp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    font-size: 15px;
}
.rp-close-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #888;
    padding: 2px 6px;
    line-height: 1;
}
.rp-close-btn:hover { color: #333; }

/* Preview area — 높이는 JS에서 슬롯 비율에 맞게 동적 설정 */
.rp-preview-container {
    width: 100%;
    min-height: 140px;
    background: #111;
    overflow: hidden;
    position: relative;
    cursor: grab;
    user-select: none;
    /* 외곽선으로 crop 경계 강조 */
    outline: 3px solid #3a7bd5;
    outline-offset: -3px;
}
.rp-preview-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}
.rp-preview-container.dragging { cursor: grabbing; }
.rp-preview-img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    max-width: none;
    transform-origin: top left;
    pointer-events: none;
    will-change: transform;
}

/* Controls */
.rp-controls {
    padding: 14px 16px 8px;
}
.rp-zoom-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rp-zoom-label {
    font-size: 13px;
    color: #555;
    min-width: 22px;
}
.zoom-slider {
    flex: 1;
    accent-color: #3a7bd5;
    height: 4px;
    cursor: pointer;
}
.zoom-value {
    font-size: 13px;
    color: #333;
    min-width: 36px;
    text-align: right;
}
.rp-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: #999;
    text-align: center;
}

/* Bottom buttons */
.rp-buttons {
    display: flex;
    gap: 8px;
    padding: 12px 16px 16px;
    justify-content: flex-end;
}
.rp-buttons button {
    padding: 8px 22px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #f5f5f5;
    color: #333;
    transition: background 0.15s;
}
.rp-buttons button:hover { background: #e8e8e8; }
.rp-buttons .rp-apply {
    background: #3a7bd5;
    border-color: #3a7bd5;
    color: #fff;
}

/* ===== 편지 레이아웃 (layout 20) ===== */
#container .page-list .cell .page .page-layout20 {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: stretch;
	justify-content: center;
	background: #faf8f4;
	border: 2px dashed #dfd6c8;
	box-sizing: border-box;
}

.letter-page-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #bbb;
	position: relative;
}

.letter-page-area svg {
	display: block;
	margin: 0 auto 10px;
}

.letter-page-hint {
	font-size: 11px;
	color: #b0a898;
	margin: 0;
}

/* 편지 페이지 미리보기 텍스트 */
.letter-preview-text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #555;
	text-align: center;
	word-break: break-word;
	overflow: hidden;
	padding: 10px;
	box-sizing: border-box;
	line-height: 1.6;
}

/* 편지 모드 page-desc */
.page-list .cell .page-desc.letter-mode input[name='pagedesc[]'] {
	display: none !important;
}

.page-list .cell .page-desc.letter-mode textarea.letter-edit {
	flex: 1;
	display: block;
	box-sizing: border-box;
	min-height: 129px;
	padding: 8px 12px;
	border: 1.5px solid #d5dae3;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	color: #333;
	background: #fff;
	resize: vertical;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	line-height: 1.65;
}

.page-list .cell .page-desc.letter-mode textarea.letter-edit:focus {
	border-color: #4a80d9;
	box-shadow: 0 0 0 3px rgba(74,128,217,0.12);
}

.btn-letter-layout span {
	font-size: 9px;
	font-weight: 600;
	color: #6b6b6b;
	letter-spacing: -0.3px;
}

/* 편지 에디터 레이아웃 (위치그리드 + textarea 나란히) */
.letter-editor {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 4px;
}

.letter-pos-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	background: #f8f7f5;
	border: 1px solid #e4e0da;
	border-radius: 8px;
	padding: 8px 6px 6px;
}

.letter-pos-label {
	font-size: 10px;
	font-weight: 600;
	color: #aaa;
	letter-spacing: -0.2px;
	white-space: nowrap;
}

.letter-pos-grid {
	display: grid;
	grid-template-columns: repeat(3, 28px);
	gap: 3px;
}

.letter-pos-btn {
	width: 28px;
	height: 28px;
	border: 1px solid #d0ccc6;
	background: #fff;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	transition: background 0.12s, color 0.12s;
	line-height: 1;
}

.letter-pos-btn.active,
.letter-pos-btn:hover {
	background: #4a80d9;
	color: #fff;
	border-color: #3a70c9;
}

.letter-align-btns {
	display: flex;
	gap: 3px;
}

.letter-align-btn {
	padding: 3px 8px;
	border: 1px solid #d0ccc6;
	background: #f5f3f0;
	border-radius: 4px;
	font-size: 11px;
	cursor: pointer;
	color: #666;
	transition: background 0.12s, color 0.12s;
	white-space: nowrap;
}

.letter-align-btn.active,
.letter-align-btn:hover {
	background: #4a80d9;
	color: #fff;
	border-color: #3a70c9;
}

@media (max-width: 768px) {
	.page-list .cell .page-desc.letter-mode textarea.letter-edit {
		min-height: 121px;
		font-size: 12px;
	}
	.letter-pos-btn { width: 26px; height: 26px; font-size: 12px; }
	.letter-pos-grid { grid-template-columns: repeat(3, 26px); gap: 2px; }
	.letter-align-btn { padding: 4px 10px; font-size: 12px; }
}
.rp-buttons .rp-apply:hover { background: #2f67b8; }

/* ===== preview.php 제출완료 코드박스 (postcard 동일 구조) ===== */
#container .code-wrap {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,.08);
    margin: 20px auto 100px;
    max-width: 480px;
    overflow: hidden;
}
#container .code-wrap-success {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 40px 28px 36px;
    text-align: center;
}
#container .code-wrap-icon {
    width: 56px;
    height: 56px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 4px 20px rgba(34,197,94,.45);
}
#container .code-wrap-icon svg {
    width: 26px;
    height: 26px;
}
#container .code-wrap-title {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}
#container .code-wrap-desc {
    font-size: 14px;
    color: rgba(255,255,255,.55);
    margin: 0;
    line-height: 1.6;
}
#container .code-wrap-body {
    padding: 32px 28px;
}
#container .code-wrap-row {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
}
#container .code-wrap-row--single {
    justify-content: center;
}
#container .code-wrap-row--single .code-wrap-item {
    max-width: 380px;
    flex: none;
    width: 100%;
}
#container .code-wrap-item {
    flex: 1;
    background: #f9fafb;
    border: 1px solid #f1f3f5;
    border-radius: 14px;
    padding: 24px 20px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
#container .code-wrap-item-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9ca3af;
}
#container .code-wrap .code {
    font-family: 'Source Code Pro', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
    font-weight: 900;
    font-size: 38px;
    letter-spacing: 0.1em;
    color: #111827;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 24px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.3;
    width: auto;
    margin: 0;
}
#container .code-wrap .code:hover {
    border-color: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}
#container .code-wrap-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
#container .btn-order {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f97316;
    color: #fff;
    border-radius: 12px;
    padding: 15px 28px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
    box-shadow: 0 4px 16px rgba(249,115,22,.35);
}
#container .btn-order:hover {
    background: #ea6c09;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(249,115,22,.4);
}
#container .btn-restart {
    display: inline-flex;
    align-items: center;
    background: #f3f4f6;
    color: #374151;
    border-radius: 12px;
    padding: 15px 24px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
#container .btn-restart:hover {
    background: #e5e7eb;
}
.btn-refresh {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.15s;
}
.btn-refresh:hover {
    color: #6b7280;
}
@media screen and (max-width: 640px) {
    #container .code-wrap {
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
    }
    #container .code-wrap-body {
        padding: 24px 16px;
    }
    #container .code-wrap-cta {
        flex-direction: column;
    }
    #container .btn-order,
    #container .btn-restart {
        width: 100%;
        justify-content: center;
        font-size: 15px;
    }
    #container .code-wrap .code {
        font-size: 30px;
    }
}