@charset "utf-8";

.board-notice	{ width: 264px; padding: 10px; margin: 0 auto; text-align: center; box-sizing: border-box; }


.avocado-list	{
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

.avocado-list li	{
	display: block;
	position: relative; 
	padding: 5px 0; 
	margin-bottom:1px;
} 
.avocado-list li.bo_notice	{  }
.avocado-list li.no-data	{ 
	text-align: center;
	line-height: 200px;
}
.avocado-list li .td_chk { position:absolute; padding-left:5px;line-height: 35px;z-index:10;}
.avocado-list li a	{
	display: block;
	position: relative;
	padding: 0px 200px 0px 120px;
	line-height: 35px;
}
.avocado-list li strong	{
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.avocado-list li strong .highlight {font-weight:normal;}
.avocado-list li strong .cnt_cmt:before	{ content: "( "; }
.avocado-list li strong .cnt_cmt:after	{ content: " )"; }

.avocado-list li .ico-cate	{
	display: block;
	position: absolute;
	top: 0; 
	left: 20px;
	width: 100px;
	text-align: center;
}
.avocado-list li .name	{
	display: block;
	position: absolute;
	top: 0;
	right: 100px;
	width: 100px;
	text-align: center;
	opacity: .6;
	font-size: 11px;
}
.avocado-list li .date	{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	text-align: center;
	opacity: .6;
	font-size: 11px;
}
.avocado-list li .hit	{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	text-align: center;
	opacity: .6;
	font-size: 11px;
}



.bo_fx {position:relative;padding:20px 0;}
.bo_fx .chk_all{ position:absolute;left:5px;top:20px;}
.txt-right{text-align:right;}



.board-category	{
	display: block;
	position: relative;
	margin-bottom: 10px; 
	
}
.board-category select	{

}

@media all and (max-width: 640px) {
#bo_v_con * {max-width:100%;}

	.board-category	{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px;
	}
	.board-category select	{
		width: 100%;
	}

	.bo_fx	{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 20px 10px !important;
	}
	.bo_fx a	{
		display: block;
		width: 100%;
	}
}



.board-write	{  padding: 0 10px; }

.board-write h3	{
	font-size: 26px;
	text-align: center;
	padding: 30px 0 20px;
} 
.board-write .write-notice	{
	padding: 10px;
	font-size: 11px;
}
.board-write > dl {position:relative;}
.board-write > dl > dt { width:70px;position:absolute;line-height:32px;text-align:center; }
.board-write > dl > dd { width:100%;margin-left:0;padding-left:80px;box-sizing:border-box;line-height:32px;}
.board-write input.frm_input.full	{ width: 100%; display:block;margin:1px 0;}




.board-viewer.theme-box	{
	display: block;
	position: relative;
	padding: 20px;
}

.board-viewer .subject	{
	text-align: center;
}
.board-viewer .subject em	{
	display: block;
	position: relative;
	font-size: 14px;
	line-height: 1.2em;
	padding-bottom: 10px;
}
.board-viewer .subject strong	{
	display: block;
	position: relative;
	font-size: 22px;
	line-height: 1.2em;
}

.board-viewer .info	{
	margin-top: 20px;
	padding: 8px 10px;
	text-align: center;
}
.board-viewer .info span	{ display: inline-block; opacity: .8; }
.board-viewer .info span + span:before	{
	content: "";
	display: inline-block;
	width: 1px;
	height: 8px;
	vertical-align: middle;
	margin: 0 10px;
}

.board-viewer .contents	{
	display: block;
	position: relative;
	margin: 20px 0;
	padding: 40px 15px;
	border-left-width: 0;
	border-right-width: 0;
}






#bo_v_bot	{ padding: 20px 0; overflow: hidden; }
.bo_v_nb	{ float: left; }
.bo_v_com	{ float: right; }


.board-comment-list			{ position: relative; }
.board-comment-list .co-line	{
	display: block;
	position: relative;
	clear: both;
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
	border: none;
}
.board-comment-list .item	{
	position: relative;
	padding: 10px 10px 10px 100px;
}
.board-comment-list .co-name	{
	position: absolute;
	top: 0px;
	left: 0;
	bottom: 0;
	width: 90px;
	padding: 10px 10px;
	box-sizing: border-box;
}
.board-comment-list .co-info {
	display: block;
	text-align: right;
	padding-top: 15px;
	font-size: 11px;
	opacity: .7;
}
.board-comment-list .co-info span	{ display: inline-block; opacity: .8; }
.board-comment-list .co-info span + span:before	{
	content: "";
	display: inline-block;
	width: 1px;
	height: 8px;
	vertical-align: middle;
	margin: 0 10px;
}

.board-comment-list .item.reply	{ border-left: 5px solid rgba(255, 255, 255, .1); }
.board-comment-list .item.reply .co-name	{
	background: none;
}


.board-comment-list + .board-comment-write	{
	margin-top: 20px;
}

.board-comment-form	{ 
	position: relative;
	padding-right: 80px;
}
.board-comment-form .btn_confirm	{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 29px;
	width: 80px;
}
.board-comment-form .btn_confirm .ui-btn	{
	width: 100%;
	height: 100%;
}
.board-comment-form p	{
	margin: 0;
	padding: 5px 10px;
}
.board-comment-form textarea	{ display: block; height: 100px; resize: none; border: none; }


@media all and (max-width: 640px) {

	.avocado-list li a	{
		line-height: 1.2em;
		padding: 10px 25px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.avocado-list li .ico-cate,
	.avocado-list li .name,
	.avocado-list li .date,
	.avocado-list li .hit	{
		position: relative;
		width: auto;
		left: auto;
		right: auto;
		bottom: auto;
		line-height: 1.2em;
	}

	.avocado-list li .info	{
		display: block;
		text-align: right;
		line-height: 1.0em;
		padding-top: 10px;
	}

	.avocado-list li .ico-cate	{ display: inline; }
	.avocado-list li .ico-cate:before	{ content: "[ "; }
	.avocado-list li .ico-cate:after	{ content: " ]"; }

	.avocado-list li strong	{ display: inline; line-height: 1.2em; }

	.avocado-list li .name,
	.avocado-list li .date,
	.avocado-list li .hit	{ display: inline; padding: 0 5px; }

	.board-comment-list .item	{ padding: 0; }
	.board-comment-list .co-name	{ position: relative; width: auto; padding: 5px 10px; }
	.board-comment-list .co-content	{ padding: 10px; word-break:break-all;}

}

.tarot-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tarot-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.tarot-toolbar .ui-btn {
    cursor: pointer;
}
.tarot-toolbar .tarot-toolbar-inline {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.tarot-toolbar .tarot-toolbar-inline label {
    font-size: 12px;
    opacity: .8;
}
.tarot-editor-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
}
.tarot-viewport {
    position: relative;
    min-height: 680px;
    height: 680px;
    overflow: hidden;
    border: 1px solid var(--form-border-color);
    background-color: rgba(23, 23, 23, 0.918);
    cursor: grab;
}
.tarot-viewport.is-panning {
    cursor: grabbing;
}
.tarot-stage {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
}
.tarot-world {
    position: relative;
    width: 2400px;
    height: 2400px;
    transform-origin: 0 0;
}
.tarot-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 20px 20px;
}
.tarot-grid.is-hidden {
    display: none;
}
.tarot-canvas-empty {
    position: absolute;
    left: 40px;
    top: 40px;
    font-size: 12px;
    opacity: .55;
    pointer-events: none;
}

.tarot-item {
    position: absolute;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.08);
    cursor: move;
    user-select: none;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.tarot-item.is-selected {
    outline: 2px solid rgba(255,255,255,.28);
    box-shadow: 0 0 0 2px rgba(255,255,255,.05);
}
.tarot-item.is-vertical {
    width: 120px;
    height: 170px;
}
.tarot-item.is-horizontal {
    width: 170px;
    height: 120px;
}
.tarot-item-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.tarot-item-label {
    font-size: 11px;
    margin-bottom: 6px;
    opacity: .7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tarot-item-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
    word-break: keep-all;
    overflow-wrap: break-word;
    flex: 1;
}
.tarot-item-dir {
    font-size: 11px;
    opacity: .8;
}
.tarot-item-rot {
    margin-top: 4px;
    font-size: 10px;
    opacity: .55;
}

.tarot-panel {
    border: 1px solid rgba(255,255,255,.12);
    padding: 12px;
    background: rgba(255,255,255,.04);
}
.tarot-panel label {
    display: block;
    margin: 10px 0 6px;
    font-size: 12px;
    font-weight: 700;
}
.tarot-panel-empty {
    margin: 0;
    font-size: 12px;
    opacity: .65;
}
.tarot-panel-actions {
    margin-top: 12px;
}
.tarot-panel-actions .ui-btn {
    cursor: pointer;
}
.tarot-status {
    margin-left: auto;
    font-size: 12px;
    opacity: .75;
}

.tarot-hidden-content {
    display: none;
}

@media (max-width: 980px) {
    .tarot-editor-body {
        grid-template-columns: 1fr;
    }
}

.image-split-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.image-split-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.image-split-col label {
    display: block;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
}

.image-upload-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.image-upload-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.image-upload-existing {
    font-size: 12px;
    opacity: .8;
}

@media (max-width: 900px) {
    .image-split-box {
        grid-template-columns: 1fr;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&display=swap');

.board-skin-basic,
.board-skin-basic * {
    font-family: 'Noto Sans KR', sans-serif;
}

.avocado-gallery-list {
    display: grid;
    grid-template-columns: repeat(var(--gallery-cols), minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
}

.avocado-card-item {
    position: relative;
    list-style: none;
    min-width: 0;
}

.avocado-card {
    display: block;
    position: relative;
    height: var(--gallery-height);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);
    text-decoration: none;
    color: inherit;
    background: #d9d9d9;
}

.avocado-card .img {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform .35s ease;
}

.avocado-card:hover .img {
    transform: scale(1.04);
}

.avocado-card .overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
	justify-content: flex-end;
    gap: 8px;
	    min-height: 50%;
}

.avocado-card.has-image .overlay {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.10) 24%,
        rgba(0, 0, 0, 0.42) 56%,
        rgba(0, 0, 0, 0.75) 100%
    );
}

.avocado-card .title-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.avocado-card .title {
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: #111;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.avocado-card.has-image .title {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0,0,0,.22);
}

/* 체크박스 */
.avocado-card-check {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 6;
}

.avocado-card-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
}

/* 상태 배지 */
.avocado-card-badges {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.avocado-badge {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.avocado-badge svg {
    width: 15px;
    height: 15px;
    display: block;
}

.avocado-badge svg path {
    stroke: #000000;
}

.avocado-badge.notice {
    background: #bb0000;
}

.avocado-badge.secret {
    background: #83a9cc;
}

.avocado-badge.member {
    background: #73db8d;
}

.avocado-badge.protect {
    background: #d3bb52;
}

.avocado-gallery-empty {
    grid-column: 1 / -1;
    padding: 80px 20px;
    text-align: center;
    opacity: .7;
}

@media (max-width: 1200px) {
    .avocado-gallery-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .avocado-gallery-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .avocado-gallery-list {
        grid-template-columns: 1fr;
    }

    .avocado-card {
        height: 420px;
    }

    .avocado-card .title {
        font-size: 17px;
    }
}

#bo_cate{ text-align:center; }
#bo_cate li{ display:inline-block; vertical-align:middle; margin:0 0 2em .2em; }

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&family=Noto+Serif+KR:wght@400;500;700&display=swap');


.board-viewer-tarot,
.board-viewer-tarot * {
	box-sizing: border-box;
}

.board-viewer-tarot {
	font-family: 'Noto Sans KR', sans-serif;
	color: #f7f2e8;
	background: #fff;
	border-radius: 24px;
	padding: 38px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 30px rgba(0,0,0,.28);
}

.board-viewer-tarot.has-bg .tarot-page-bg {
	position: absolute;
	inset: -30px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	transform: scale(1.08);
	opacity: .95;
	z-index: 0;
}

.board-viewer-tarot .tarot-page-dim {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.board-viewer-tarot:before,
.board-viewer-tarot:after {
	content: "";
	position: absolute;
	border: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
	border-radius: 999px;
	pointer-events: none;
	z-index: 1;
}

.board-viewer-tarot:before {
	width: 900px;
	height: 900px;
	right: -320px;
	top: -340px;
}

.board-viewer-tarot:after {
	width: 720px;
	height: 720px;
	left: -280px;
	bottom: -260px;
}

.tarot-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.tarot-header {
	padding-bottom: 18px;
	border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 24%, transparent);
}

.tarot-header-title {
	font-family: 'Noto Serif KR', serif;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.15;
	color: color-mix(in srgb, var(--accent-color) 82%, white);
	margin: 0 0 14px;
	word-break: keep-all;
}

.tarot-header-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tarot-header-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	background: rgba(255,255,255,.05);
	border: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
	color: color-mix(in srgb, var(--accent-color) 86%, white);
}

.tarot-stage-wrap {
	position: relative;
	border-radius: 26px;
	overflow: hidden;
	min-height: 700px;
	background: rgba(23,23,23,.56);
	box-shadow: 0 0 20px rgba(0,0,0,.32);
	border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
	backdrop-filter: blur(6px);
}

.tarot-stage-wrap:before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: .3;
	pointer-events: none;
}

.tarot-stage-toolbar {
	position: absolute;
	left: 16px;
	right: 16px;
	top: 16px;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	align-items: center;
}

.tarot-stage-toolbar-left,
.tarot-stage-toolbar-right {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.tarot-stage-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
	background: rgba(255,255,255,.08);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, opacity .18s ease, transform .18s ease;
}

.tarot-stage-btn:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--accent-color) 42%, transparent);
}

.tarot-stage-btn.is-active {
	background: color-mix(in srgb, var(--accent-color) 22%, transparent);
	border-color: color-mix(in srgb, var(--accent-color) 48%, transparent);
}

.tarot-stage-viewport {
	position: relative;
	height: 700px;
	overflow: hidden;
	cursor: grab;
}

.tarot-stage-viewport.is-panning {
	cursor: grabbing;
}

.tarot-spread-stage {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.tarot-stage-world {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
}

.tarot-spread-card {
	position: absolute;
	width: 102px;
	height: 146px;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
	background:
		radial-gradient(circle at top, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 38%),
		linear-gradient(180deg, rgba(23, 23, 23, 0.55) 0%, rgba(23,23,23,.96) 100%);
	box-shadow: 0 0 14px rgba(0,0,0,.25);
	padding: 10px;
	cursor: pointer;
	transition: box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
}

.tarot-spread-card.is-horizontal {
	width: 146px;
	height: 102px;
}

.tarot-spread-card:hover {
	border-color: color-mix(in srgb, var(--accent-color) 72%, white);
}

.tarot-spread-card.is-active {
	border-color: color-mix(in srgb, var(--accent-color) 92%, white);
	box-shadow: 0 0 18px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.tarot-spread-card.is-dim {
	opacity: .35;
}

.tarot-spread-card-inner {
	width: 100%;
	height: 100%;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,.05);
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tarot-spread-pos {
	font-size: 11px;
	font-weight: 700;
	color: color-mix(in srgb, var(--accent-color) 84%, white);
	line-height: 1.3;
	word-break: keep-all;
}

.tarot-spread-name {
	font-family: 'Noto Serif KR', serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff2cd;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.tarot-detail-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.tarot-detail-title {
	font-family: 'Noto Serif KR', serif;
	font-size: 24px;
	font-weight: 700;
	color: color-mix(in srgb, var(--accent-color) 86%, white);
	margin: 0;
}

.tarot-single-detail-wrap {
	position: relative;
	min-height: 260px;
}

.tarot-card-box {
	display: none;
	background: rgba(255,255,255,.03);
	border: 1px solid color-mix(in srgb, var(--accent-color) 24%, transparent);
	border-radius: 22px;
	padding: 22px;
	min-width: 0;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity .28s ease,
		transform .28s ease,
		border-color .22s ease,
		box-shadow .22s ease;
}

.tarot-card-box.is-active,
.tarot-card-box.is-all {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

.tarot-card-box.is-active {
	border-color: color-mix(in srgb, var(--accent-color) 86%, white);
	box-shadow: 0 0 18px color-mix(in srgb, var(--accent-color) 14%, transparent);
}

.tarot-card-box.is-all + .tarot-card-box.is-all {
	margin-top: 16px;
}

.tarot-card-box.is-hiding {
	opacity: 0 !important;
	transform: translateY(8px) !important;
}

.tarot-card-box.is-showing {
	animation: tarotFadeIn .28s ease forwards;
}

@keyframes tarotFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tarot-card-position {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	color: color-mix(in srgb, var(--accent-color) 86%, white);
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 12px;
}

.tarot-card-name {
	font-family: 'Noto Serif KR', serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--primary-color);
	margin-bottom: 12px;
	word-break: keep-all;
}

.tarot-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.tarot-mini-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent-color) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
	font-size: 12px;
	font-weight: 700;
	color: color-mix(in srgb, var(--accent-color) 88%, white);
}

.tarot-card-memo {
	font-size: 14px;
	line-height: 1.9;
	color: var(--content-font-color);
	white-space: pre-line;
	word-break: keep-all;
}

.tarot-files {
	background: rgba(255,255,255,.03);
	border: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
	border-radius: 18px;
	padding: 18px;
}

.tarot-files ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tarot-files li + li {
	margin-top: 10px;
}

.tarot-files a {
	color: color-mix(in srgb, var(--accent-color) 72%, white);
	text-decoration: none;
}

.tarot-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 6px;
}

.tarot-buttons .ui-btn {
	border-radius: 999px;
}

.ui-btn{display:inline-block!important;}

@media (max-width: 780px) {
	.board-viewer-tarot {
		padding: 24px 18px;
	}

	.tarot-header-title {
		font-size: 32px;
	}

	.tarot-stage-wrap,
	.tarot-stage-viewport {
		min-height: 520px;
		height: 520px;
	}

	.tarot-spread-card {
		width: 88px;
		height: 126px;
	}

	.tarot-spread-card.is-horizontal {
		width: 126px;
		height: 88px;
	}

	.tarot-card-name {
		font-size: 28px;
	}
}