@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.3/dist/web/static/pretendard-jp-dynamic-subset.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.3/dist/web/static/pretendard-dynamic-subset.css");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

/********** RESET **********/

html, body, main, 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, hr, textarea, select, input[type=text], input[type=radio], input[type=checkbox], input[type=button], input[type=image], input[type=password], input[type=reset], input[type=submit], input[type=email], input[type=color], input[type=date], input[type=datetime],input[type=datetime-local], input[type=month], input[type=number], input[type=range], input[type=search], input[type=tel], input[type=time], input[type=url], inpuyt[type=week], button { margin: 0; padding: 0; border: 0; font: inherit; }
main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video { display: block; }
ol, ul, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: ""; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { overflow: auto; }
caption, figcaption { display: none; }
em, address { font-style: normal; }
label { cursor: pointer; }
legend { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; } /* for screen reader */
*:focus { outline: 0 none; }
a:link { text-decoration: none; }
a, button, input { font: inherit; background: none; border: 0 none; cursor: pointer; }
a { color: inherit; }

/********** COMMON **********/

:root {
	--Night: #000;
	--Jet: #111;
	--Raven: #333;
	--Ebony: #555;
	--Charcoal: #777;
	--Ash: #999;
	--Silver: #BBB;
	--Mist: #DDD;
	--Cloud: #EEE;
	--Ghost: #F9F9F9;
	--Snow: #FFF;
	
	--Primary: #502ACC;
	--Secondary: #F54369;
}

html { height: 100%; }
body { position: relative; width: 100%; height: 100%; font: 500 16px/1.0 "Pretendard", "Pretendard JP", sans-serif; letter-spacing: 0; font-feature-settings: "ss01", "ss08", "tnum"; color: var(--Raven); background: var(--Snow); box-sizing: border-box; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; }
body.modal { overflow: hidden; }

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: var(--Silver); font-weight: 400 !important; }

.container { width: 1280px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
.blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; }

label.check { position: relative; }
label.check input { position: absolute; width: 0; height: 0; }
label.check span { position: relative; display: flex; align-items: center; height: 20px; padding-left: 26px; font-size: 15px; color: var(--Ash); transition: all 0.3s; }
label.check input:checked + span { color: var(--Raven); }
label.check span::before { position: absolute; display: block; width: 20px; height: 20px; left: 0; top: 50%; margin-top: -10px; background: var(--Snow) url("../img/check-ash.svg") no-repeat center / 14px; border: 1px solid var(--Ash); border-radius: 9999px; box-sizing: border-box; content: ""; transition: all 0.3s; }
label.check input:checked + span::before { background-color: var(--Primary); background-image: url("../img/check-snow.svg"); border-color: var(--Primary); }


@media all and (max-width: 768px) {
	.container { width: 100%; padding: 0 20px; }
}

/********** LAYOUT **********/

header { position: fixed; top: 0; width: 100%; background: var(--Snow); border-bottom: 1px solid var(--Cloud); z-index: 2; }
header div.container { display: flex; justify-content: space-between; align-items: center; height: 80px; }
header h1 { flex: 0 0 142px; height: 40px; background: url("../img/h1-logo.svg") no-repeat center / contain; }
header h1 a { display: block; width: 100%; height: 100%; }
header fieldset.search { display: flex; align-items: center; gap: 4px; height: 48px; padding-right: 8px; background: var(--Ghost); border: 1px solid var(--Mist); border-radius: 9999px; }
header fieldset.search button.close { display: none; width: 52px;  height: 52px; background: url("../img/button-close-primary.svg") no-repeat center / auto; }
header fieldset.search div.nice-select { width: 144px; height: 100%; background: transparent; border: 0 none; line-height: 46px; }
header fieldset.search input[type=text] { width: 240px; height: 100%; padding: 0 16px; font-size: 16px; line-height: 46px; }
header fieldset.search button.search { width: 46px;  height: 46px; background: url("../img/button-search-raven.svg") no-repeat center / auto; }
header button.call-search { display: none; width: 52px; height: 52px; margin-left: -20px; background: url("../img/button-search-primary.svg") no-repeat center / auto; }
header nav { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
header nav a { flex: 0 0 auto; padding: 8px 16px; border: 1px solid var(--Primary); border-radius: 9999px; font-size: 13px; font-weight: 600; color: var(--Ebony); transition: all 0.3s; }
header nav a:hover { background: var(--Primary); color: var(--Snow); }

@media all and (max-width: 768px) {
	header div.container { height: unset; }
	header h1 { position: absolute; left: 50%; top: 50%; width: 100px; height: 28px; transform: translate(-50%, -50%); }
	header fieldset.search { position: fixed; left: 0; top: 0; gap: 0; width: 100%; height: 52px; padding: 0; background: var(--Snow); border-width: 0 0 1px; border-color: var(--Primary); border-radius: 0; transform: translateY(-61px); transition: all 0.3s; z-index: 3; }
	header fieldset.search.on { transform: translateY(0); }
	header fieldset.search button.close { display: flex; }
	header fieldset.search div.nice-select { padding-left: 0; line-height: 52px; }
	header fieldset.search div.nice-select ul.list { left: -18px; }
	header fieldset.search input[type=text] { width: calc(100% - 248px); line-height: 52px; }
	header fieldset.search button.search { width: 52px;  height: 52px; }
	header button.call-search { display: flex; }
	header nav a { width: 52px; height: 52px; margin-right: -20px; padding: 0; background: url("../img/button-login-raven.svg") no-repeat center / auto; border: 0 none; border-radius: 0; text-indent: -9999px; transition: all 0.3s; }
}

#gnb { position: fixed; left: 0; top: 81px; width: 100%; background: var(--Snow); border-bottom: 1px solid var(--Cloud); z-index: 1; }
#gnb .container { display: flex; align-items: center; gap: 16px; }
#gnb a { flex: 0 0 auto; height: 56px; padding: 0 8px; font-weight: 700; line-height: 56px; box-sizing: border-box; transition: all 0.3s; }
#gnb a.current { border-bottom: 3px solid var(--Raven); }
#gnb a:not(.current):hover { color: var(--Primary); }

@media all and (max-width: 768px) {
	#gnb { top: 53px; }
	#gnb .container { overflow-x: auto; }
	#gnb a { height: 48px; line-height: 48px; }
}

main { position: relative; width: 100%; padding: 170px 0 100px; z-index: 0; }
main.alone { height: 100%; display: flex; justify-content: center; align-items: center; padding: 0; }

@media all and (max-width: 768px) {
	main { padding: 122px 0 40px; }
	main:has(.intro),
	main:has(.introduction) { padding-top: 102px; }
}

footer { padding: 32px 0; border-top: 1px solid var(--Cloud); }
footer div.container {}
footer h1 { font: 900 18px/1.0 "Outfit", sans-serif; }
footer ul { margin-top: 16px; }
footer ul li { display: flex; gap: 16px; font-size: 14px; font-weight: 400; color: var(--Ash); }
footer ul li + li { margin-top: 8px; }
footer p.cr { margin-top: 16px; font: 300 12px/1.0 "Outfit", sans-serif; letter-spacing: 0.25em; text-transform: uppercase; color: var(--Ash); }

@media all and (max-width: 768px) {
	footer { padding: 20px 0; }
	footer ul li { flex-direction: column; gap: 8px; }
	footer p.cr { letter-spacing: 0.1em; }
}

/********** POPUP **********/

div.pop-wrap { position: fixed; display: flex; justify-content: center; align-items: center; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); visibility: hidden; transition: all 0.3s; z-index: 10; backdrop-filter: blur(8px); }
div.pop-wrap.viewer { flex-direction: column; gap: 2vh; }
div.pop-wrap.on { background: rgba(0, 0, 0, 0.4); visibility: visible; }
div.pop-wrap figure { width: 88vw; height: 88vh; }
div.pop-wrap figure img { width: 100%; height: 100%; object-fit: contain; }
div.pop-wrap button.pop-close { width: 32px; height: 32px; background: url("../img/button-close-snow.svg") no-repeat center / cover; border: 1px solid transparent; border-radius: 9999px; transition: all 0.3s; }
div.pop-wrap button.pop-close:hover { border-color: var(-Snow); }


/********** HOME **********/

section.intro {}
section.intro div.inner { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; height: 480px; background: url("../img/home-intro-bg.png") no-repeat center / cover; border-radius: 32px; text-align: center; color: var(--Snow); }
section.intro h2 { font: 800 48px/1.0 "Outfit", sans-serif; }
section.intro h2 + span { font-size: 20px; font-weight: 700; }
section.intro span + p { margin-top: 24px; font: 400 18px/1.3 "Outfit", sans-serif; }
section.intro p + p { font-size: 14px; line-height: 1.3; }

@media all and (max-width: 768px) {
	section.intro div.container { padding: 0; }
	section.intro div.inner { height: 360px; padding: 20px; border-radius: 0; }
	section.intro h2 { font-size: 28px; }
	section.intro h2 + span { font-size: 16px; }
	section.intro span + p { font-size: 16px; }
}

section.news { margin-top: 48px; }
section.news h2 { text-align: center; font-size: 32px; font-weight: 800; }
section.news ul { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; margin-top: 32px; }
section.news li { flex: 1 0 20%; box-sizing: border-box; }
section.news dl { margin-top: 8px; }
section.news dt { height: 48px; font-size: 18px; font-weight: 700; line-height: 1.3; overflow: hidden; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
section.news dd { margin-top: 16px; font-size: 14px; color: var(--Ash); }
section.news a.more { display: flex; justify-content: center; align-items: center; width: 120px; height: 48px; margin: 32px auto 0; border: 1px solid var(--Raven); border-radius: 9999px; box-sizing: border-box; transition: all 0.3s; }
section.news a.more:hover { background: var(--Raven); color: var(--Snow); }

@media all and (max-width: 768px) {
	section.news { margin-top: 32px; padding: 0; }
	section.news h2 { font-size: 20px; }
	section.news ul { flex-direction: column; justify-content: flex-start; gap: 0; margin-top: 24px; border-top: 1px solid var(--Mist); }
	section.news li { width: 100%; padding: 20px; border-bottom: 1px solid var(--Mist); }
	section.news p { font-size: 14px; }
	section.news dt { font-size: 16px; }
	section.news a.more { margin-top: 24px; }
}

/********** CONTENT **********/

h2.common { font-size: 28px; font-weight: 800; }

div.content-wrap { display: flex; justify-content: space-between; margin-top: 24px; }

@media all and (max-width: 768px) {
	h2.common { display: none; font-size: 20px; font-weight: 700; } /* 모바일 영역 확보를 위해 h2 안 보이게 */
	div.content-wrap { margin-top: 0; /* margin-topp: 20lpx;*/ } /* h2 없을 경우 margin-top: 0 */
}

#facet { position: relative; width: 240px; height: calc(100vh - 242px); padding: 16px; background: var(--Snow); border: 1px solid var(--Mist); border-radius: 16px; box-sizing: border-box; transition: all 0.3s; z-index: 1; }
#facet > ul { height: 100%; overflow-y: auto; }
#facet > ul ul > li { padding-left: 8px; }
#facet p { display: flex; gap: 4px; padding: 4px 0; }
#facet p > i { width: 18px; height: 18px; background: url("../img/icon-folder-not-raven.svg") no-repeat center / cover; }
#facet p > i.toggle { background-image: url("../img/icon-folder-close-raven.svg"); cursor: pointer; transition: all 0.3s; }
#facet li.on > p > i.toggle { background-image: url("../img/icon-folder-open-raven.svg"); }
#facet a { width: calc(100% - 22px); }
#facet a i { font-size: 14px; line-height: 18px; word-break: break-all; transition: all 0.3s; }
#facet a.current i { font-weight: 600; color: var(--Secondary); }
#facet li:not(:has(ul)) a i:hover { color: var(--Secondary); }
#facet p:has(a.current) > i { background-image: url("../img/icon-folder-not-secondary.svg"); }

#facet button.fold { display: none; position: absolute; left: 50%; top: -24px; width: 48px; height: 24px; border-radius: 24px 24px 0 0; background: var(--Primary) url("../img/button-dbl-arrow-snow.svg") no-repeat center / 20px; transform: translateX(-50%); transition: all 0.3s; z-index: 2; }
#facet button.fold.on { border-radius: 0 0 24px 24px; transform: translateX(-50%) rotateX(180deg); }

@media all and (max-width: 768px) {
	#facet { position: fixed; left: 0; top: 100vh; bottom: 0; width: 100%; height: 70vh; background: var(--Ghost); border-radius: 0; border-width: 1px 0 0; border-color: var(--Primary); }
	#facet.on { top: 30vh; }
	#facet button.fold { display: block; }
	
}

section.content { position: relative; width: 936px; z-index: 0; }

@media all and (max-width: 768px) {
	section.content { width: 100%; }
}

div.introduction { padding: 16px; background: #F6F4FC; border-radius: 16px; font-size: 14px; line-height: 1.3; color: #7669A1; }
div.introduction p + * { margin-top: 16px; }
div.introduction > ul > li > i { position: relative; padding-left: 12px; }
div.introduction > ul > li > i:before { position: absolute; top: 6px; left: 0; width: 4px; height: 4px; background: #7669A1; content: ""; }
div.introduction > ul > li + li { margin-top: 4px; }
div.introduction > ul > li > ul { padding: 4px 12px; }
div.introduction > ul > li > ul > li { font-weight: 400; }
div.introduction > ul > li > ul > li + li { margin-top: 2px; }

@media all and (max-width: 768px) {
	div.introduction { margin: 0 -20px; border-radius: 0; }
}

div.table-wrapper { margin-top: 24px; }
table.common { width: 100%; border-top: 2px solid var(--Raven); border-spacing: 0; border-collapse: collapse; }
table.common th,
table.common td { min-height: 24px; padding: 8px 12px; border-bottom: 1px solid var(--Mist); line-height: 1.3; }
table.common th:not(:last-child),
table.common td:not(:last-child) { border-right: 1px solid var(--Mist); }

table.books-01 tbody th { text-align: left; }
table.books-01 td:last-child { text-align: right; }

table.books-02 col.series { width: 90px; }
table.books-02 col.book { width: 100px; } 

table.books-03 col.group { width: 140px; }

@media all and (max-width: 768px) {
	table.books-index { border: 0 none; }
	table.books-02 col.series,
	table.books-02 col.book,
	table.books-03 col.group { width: unset; } 
	table.books-index thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0 none; overflow: hidden; clip: rect(0 0 0 0); }
	table.books-index tbody { display: flex; flex-direction: column; }
	table.books-index tbody:not(:has(tr.series)) { gap: 12px; }
	table.books-index tr + tr.series { margin-top: 12px; }
	table.books-index th { display: flex; align-items: center; border: 1px solid var(--Mist); border-top: 2px solid var(--Raven); font-size: 15px; color: var(--Primary); }
	table.books-index th br { display: none; }
	table.books-index td { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-width: 0 1px 1px; border-style: solid; border-color: var(--Mist); text-align: right; font-size: 15px; }
	table.books-index td::before { flex: 0 0 auto; font-size: 14px; color: var(--Ash); content: attr(data-label); }
	table.books-index td.skip { text-align: left; }
	table.books-index td.skip::before { display: none; }
}

ul.item-list { margin-top: 24px; border-top: 2px solid var(--Raven); }
ul.item-list > li { padding: 16px; border-bottom: 1px solid var(--Mist); }
ul.item-list a.title { font-size: 18px; font-weight: 700; transition: all 0.3s; }
ul.item-list a.title:hover { color: var(--Secondary); }
ul.item-list ul.path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
ul.item-list ul.path li { flex: 0 1 auto; font-size: 15px; line-height: 20px; color: var(--Ash); word-break: break-all; }
ul.item-list ul.path li:not(:first-child) { padding-left: 14px; background: url("../img/icon-arrow-ash.svg") no-repeat left 4px / 12px; }
ul.item-list p.text { margin-top: 8px; color: var(--Charcoal); overflow: hidden; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

@media all and (max-width: 768px) {
	ul.item-list { margin: 20px -20px 0; }
	ul.item-list > li { padding: 20px; }
	ul.item-list a.title { font-size: 16px; }
	ul.item-list ul.path { gap: 2px; }
	ul.item-list ul.path li { font-size: 14px; line-height: 16px; }
	ul.item-list ul.path li:not(:first-child) { padding-left: 12px; background: url("../img/icon-arrow-ash.svg") no-repeat left 3px / 10px; }
	ul.item-list p.text { margin-top: 12px; font-size: 15px; }
}

div.breadcrumb { display: flex; justify-content: space-between; padding: 0 4px 16px; border-bottom: 1px solid var(--Cloud); }
div.breadcrumb ul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: calc(100% - 80px); }
div.breadcrumb ul li { flex: 0 1 auto; line-height: 20px; word-break: break-all; }
div.breadcrumb ul li:not(:first-child) { padding-left: 14px; background: url("../img/icon-arrow-ash.svg") no-repeat left 4px / 12px; }
div.breadcrumb ul li:last-child { font-weight: 700; color: var(--Secondary); }
div.breadcrumb button { display: flex; justify-content: center; align-items: center; width: 72px; height: 28px; background: var(--Cloud); border-radius: 9999px; font-size: 13px; font-weight: 600; color: var(--Ash); transition: all 0.3s; }
div.breadcrumb button:hover { background: var(--Snow); border: 1px solid var(--Raven); color: var(--Raven); }

@media all and (max-width: 768px) {
	div.breadcrumb { padding-bottom: 12px; }
	div.breadcrumb ul { gap: 2px; width: calc(100% - 44px); }
	div.breadcrumb ul li { font-size: 14px; line-height: 16px; }
	div.breadcrumb ul li:not(:first-child) { padding-left: 12px; background: url("../img/icon-arrow-ash.svg") no-repeat left 3px / 10px; }
	div.breadcrumb button { width: 32px; height: 32px; background: var(--Cloud) url("../img/button-copy-ash.svg") no-repeat center / 16px; text-indent: -9999px; }
}

div.control { display: flex; justify-content: space-between; margin-top: 16px; }
div.control div { display: flex; align-items: center; gap: 8px; }
div.control button { display: flex; justify-content: center; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--Primary); border-radius: 18px; color: var(--Primary); box-sizing: border-box; transition: all 0.3s; }
div.control button.text:hover { background: var(--Primary); color: var(--Snow); }
div.control button.square { width: 36px; background-repeat: no-repeat; background-position: center; background-size: 24px; }
div.control button.zoom-in { background-color: var(--Primary); background-image: url("../img/button-zoom-in-snow.svg"); }
div.control button.zoom-out { background-color: var(--Primary); background-image: url("../img/button-zoom-out-snow.svg"); }
div.control button.zoom-in:hover,
div.control button.zoom-out:hover { border-radius: 12px; }
div.control button.prev { background-image: url("../img/button-prev-primary.svg"); }
div.control button.next { background-image: url("../img/button-next-primary.svg"); }
div.control button.prev:hover,
div.control button.next:hover { width: 48px; }
div.control p { color: var(--Ash); }
div.control p strong { font-weight: 700; color: var(--Raven); }

@media all and (max-width: 768px) {
	div.control { margin-top: 12px; }
	div.control button { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 14px; }
	div.control button.square { width: 32px; background-size: 20px; }
	div.control button.prev:hover,
	div.control button.next:hover { width: 42px; }
}

h3.common { margin-top: 24px; font-size: 24px; font-weight: 700; }
h3.common span.cn { font-size: 18px; font-weight: 500; color: var(--Charcoal); }

h3.summary { font-size: 20px; font-weight: 400; line-height: 1.2; }
h3.summary span.keyword { font-weight: 700; color: var(--Primary); }
h3.summary span.number { font-weight: 700; color: var(--Secondary); }

@media all and (max-width: 768px) {
	h3.common { margin-top: 20px; font-size: 18px; }
	h3.common span.cn { font-size: 16px; }
	h3.summary { font-size: 16px; }
}

div.image-container { width: 100%; height: calc(100vh - 364px); margin-top: 24px; padding: 8px; background: var(--Ghost); border: 1px solid var(--Mist); border-radius: 16px; box-sizing: border-box; overflow: hidden; }
div.image-container figure { width: 100%; height: 100%; border-radius: 12px; overflow: hidden; }

@media all and (max-width: 768px) {
	div.image-container { height: calc(100vh - 252px); margin-top: 20px; border-radius: 0; }
}

div.text-container { width: 100%; margin-top: 24px; padding: 20px; border: 1px solid var(--Mist); border-radius: 16px; box-sizing: border-box; }
div.text-container h4 { font-size: 18px; font-weight: 700; line-height: 1.5; }
div.text-container p { line-height: 1.5; }
div.text-container * + h4,
div.text-container * + p { margin-top: 16px; }
div.text-container sup.origin { font-size: 12px; font-weight: 600; color: #0C6DFF; }
div.text-container sup.note { font-size: 12px; font-weight: 600; color: #F43245; }
div.text-container sup.beopje { font-size: 12px; font-weight: 600; color: #009FA5; }
div.text-container sub.foot { font-size: 12px; font-weight: 600; color: #CA1DB3; }
div.text-container span.person { color: #AE8B00; }
div.text-container span.book { color: #FF8800; }
div.text-container span.yakjae { color: #00A632; }
div.text-container mark.cheobang { background-color: #C9FFEE; }
div.text-container mark.byungjung { background-color: #FFF0BD; }
div.text-container span.keyword { color: #F00707; }

@media all and (max-width: 768px) {
	div.text-container { margin-top: 20px; padding: 12px; border-radius: 0; font-size: 15px; }
	div.text-container h4 { font-size: 16px; }
	div.text-container * + h4,
	div.text-container * + p { margin-top: 8px; }
}

/********** PAGINATION **********/

div.pagination { display: flex; justify-content: flex-start; align-items: center; gap: 6px; margin-top: 24px; }
div.pagination a,
div.pagination span { position: relative; min-width: 36px; height: 36px; padding: 0 8px; background-color: var(--Ghost); border: 1px solid var(--Ghost); border-radius: 12px; text-align: center; line-height: 34px; color: var(--Raven); box-sizing: border-box; transition: all 0.3s; }
div.pagination a.move { background-position: center; background-repeat: no-repeat; background-size: 24px; }
div.pagination a.first { background-image: url("../img/button-first-raven.svg"); }
div.pagination a.prev { background-image: url("../img/button-prev-raven.svg"); }
div.pagination a.next { background-image: url("../img/button-next-raven.svg"); }
div.pagination a.last { background-image: url("../img/button-last-raven.svg"); }
div.pagination a.first.disable { background-image: url("../img/button-first-mist.svg"); }
div.pagination a.prev.disable { background-image: url("../img/button-prev-mist.svg"); }
div.pagination a.next.disable { background-image: url("../img/button-next-mist.svg"); }
div.pagination a.last.disable { background-image: url("../img/button-last-mist.svg"); }
div.pagination span.current { background: var(--Secondary); border-color: var(--Secondary); color: var(--Snow); }
div.pagination a:not(.disable):hover { background-color: var(--Snow); border-color: var(--Secondary); color: var(--Secondary); }
div.pagination a.first:not(.disable):hover { background-image: url("../img/button-first-secondary.svg"); }
div.pagination a.prev:not(.disable):hover { background-image: url("../img/button-prev-secondary.svg"); }
div.pagination a.next:not(.disable):hover { background-image: url("../img/button-next-secondary.svg"); }
div.pagination a.last:not(.disable):hover { background-image: url("../img/button-last-secondary.svg"); }

@media all and (max-width: 768px) {
	div.pagination { margin-top: 20px; overflow-x: scroll; }
	div.pagination a,
	div.pagination span { min-width: 32px; height: 32px; padding: 0 6px; border-radius: 10px; font-size: 14px; line-height: 30px; }
	div.pagination a.move { background-size: 20px; }
}

/********** LOGIN **********/

section.login { width: 320px; max-width: 100%; }
section.login h1 { width: 142px; height: 40px; background: url("../img/h1-logo.svg") no-repeat center / contain; }
section.login p.guide { margin-top: 16px; font-weight: 400; }

fieldset.login { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; }
fieldset.login input.letter { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--Mist); border-radius: 12px; box-sizing: border-box; }
fieldset.login label.check { margin-top: 6px; }
fieldset.login button { width: 100%; height: 52px; margin-top: 8px; background: var(--Primary); border-radius: 12px; color: var(--Snow); box-sizing: border-box; }

div.member { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 32px; }
div.member a { font-size: 14px; color: var(--Ash); }

@media all and (max-width: 340px) {
	section.login { padding: 0 20px; }
}