@font-face {font-family: 'Paperlogy'; font-weight: 300; font-style: normal; font-display: swap; src: url('/font/Paperlogy-3Light.woff2') format('woff2');}
@font-face {font-family: 'Paperlogy'; font-weight: 400; font-style: normal; font-display: swap; src: url('/font/Paperlogy-4Regular.woff2') format('woff2');}
@font-face {font-family: 'Paperlogy'; font-weight: 500; font-style: normal; font-display: swap; src: url('/font/Paperlogy-5Medium.woff2') format('woff2');}
@font-face {font-family: 'Paperlogy'; font-weight: 600; font-style: normal; font-display: swap; src: url('/font/Paperlogy-6SemiBold.woff2') format('woff2');}
@font-face {font-family: 'Paperlogy'; font-weight: 700; font-style: normal; font-display: swap; src: url('/font/Paperlogy-7Bold.woff2') format('woff2');}
@font-face {font-family: 'Paperlogy'; font-weight: 800; font-style: normal; font-display: swap; src: url('/font/Paperlogy-8ExtraBold.woff2') format('woff2');}
@font-face {font-family: 'Paperlogy'; font-weight: 900; font-style: normal; font-display: swap; src: url('/font/Paperlogy-9Black.woff2') format('woff2');}
@font-face {font-family: 'Pretendard Variable';	font-weight: 45 920; font-stretch: 50% 200%; font-style: normal; font-display: swap; src: url('/font/PretendardVariable.woff2') format('woff2-variations');}

:root {
    --cw-font-sans-serif: 'Paperlogy', 'Pretendard Variable', system-ui, -apple-system, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --cw-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --cw-font-variable: 'Pretendard Variable', -apple-system, Arial, sans-serif ;

    --bs-primary: #1f98ff; /* 기본 색상 */
    --bs-secondary: #6c757d; /* 보조 색상 */
    --bs-success: #198754; /* 성공을 나타내는 색상 */
    --bs-info: #0dcaf0; /* 정보 색상 */
    --bs-warning: #ffc107; /* 경고 색상 */
    --bs-danger: #dc3545; /* 위험 색상 */
    --bs-light: #f8f9fa; /* 밝은 배경색 */
    --bs-dark: #212529; /* 어두운 배경색 */
    --bs-pink-bg: #ffe4ec; /* 포인트 배경색 */
    --my-bg-light: #fafafa;
    --my-bg: #F2F4F7;

    --bs-font-sans-serif: var(--cw-font-sans-serif);
    --bs-font-monospace: var(--cw-font-monospace);
    --bs-font-variable: var(--cw-font-variable);


    --bs-body-font-family: var(--bs-font-sans-serif); /* 기본 폰트 패밀리 */
    --bs-body-font-size: 14px; /* 기본 폰트 크기 */
    --bs-body-font-weight: 400; /* 기본 폰트 두께 */
    --bs-body-line-height: 1.15; /* 기본 라인 높이 */
    --bs-body-color: #121212; /* 기본 텍스트 색상 */
    --bs-body-color-rgb: 33, 37, 41; /* 기본 텍스트 색상의 RGB 값 */
    --bs-body-bg: #ffffff; /* 기본 배경색 */
    --bs-body-bg-rgb: 255, 255, 255; /* 기본 배경색의 RGB 값 */  
    --bs-border-color: #E5E7EB;
    --bs-gutter-x: 0;
}
* {margin:0;padding:0;}
ul,li,ol,dl,p,dd,dt,section,p {list-style:none;margin:0;padding:0;}
button {-webkit-border-radius:0;border-radius:0;background-color:transparent;cursor:pointer;}
a,a:hover,a:active,a:focus a,a:hover,a:active,a:focus {text-decoration:none; color:var(--bs-body-color);}
em,address {font-style:normal;}
table {border-collapse:collapse;border-spacing:0;margin-bottom:0 !important;}
iframe,fieldset,img,button {border:0 none;}
textarea {resize:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
img, video {display:block;width:100%;}
hr {display:none;}
pre {white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;max-width:100%;font-family:var(--bs-body-font-family);font-size:14px !important;line-height:1.6 !important;margin: 0 !important;}
.container-fluid {--bs-gutter-x: var(--bs-gutter-x);}

html, body {height: 100%; margin: 0; background: #ffffff; overscroll-behavior-y: none;}
body {min-height: 100vh; display: flex; flex-direction: column;}
nav {flex: 0 0 auto;}
aside {flex: 0 0 auto;}
main {flex: 1 1 auto; overflow-y: auto;}
footer {flex: 0 0 auto;}

nav {display: flex; justify-content: start; align-items: flex-end; column-gap: 15px; padding: 5px 20px 10px; background: #ffffff; z-index: 99;}
nav a {font-size: 16px; font-weight: 500; color: #b0b0b0ff;}
nav a.active {color: #000000; font-weight: 600;}
nav a.profile {margin-left: auto;}

footer {display: flex; justify-content: space-between; align-items: flex-end; padding: 10px 20px 5px; z-index: 80; background-color: #ffffff;}
footer a dl {display: flex; flex-direction: column; justify-content: center; align-items: center;}
footer a dt {font-size: 22px; color: #232323;}
footer a dd {font-size: 11px; font-weight: 400; padding-top: 2px;}




b {font-family: var(--bs-font-variable); font-size: 16px; font-weight: 500; color: var(--bs-primary) !important; letter-spacing: -1px;}

.form-control-sm, .form-select-sm {font-size: 14px;}

header {position: relative; background: #ffffff; z-index: 99;}
header nav.head_menu {display: flex; justify-content: start; align-items: flex-end; column-gap: 20px; width: calc(100% - 20px); padding-left: 20px; padding-right: 20px; padding-top: 5px;}
header nav.head_menu .page_menu {font-size: 16px; font-weight: 500; color: #b0b0b0ff;}
header nav.head_menu .page_menu.active {color: #000000; font-weight: 600;}

header nav.head_back {height: 50px; display: flex; justify-content: flex-start; align-items: center; column-gap: 10px; padding-left: 20px; padding-right: 20px;}
header nav.head_back .page_back .bi {font-size: 18px; cursor: pointer;}
header nav.head_back .page_title {font-size: 14px; font-weight: 500; color: var(--bs-body-color);}

.btn {font-size: 13px; font-weight: 500; padding-top: 0.5rem; padding-bottom: 0.5rem; white-space: nowrap;}
.btnsm {padding-top: 0.2rem !important; padding-bottom: 0.2rem !important;}

.btn_white {background: #ffffff; border-color: #ffffff;}
.btn_white:hover {background: var(--bs-light);}

.btn_light {background: var(--my-bg-light); border-color: var(--bs-border-color);}
.btn_light:hover {background: #F3F4F6;}

.btn_light_sm {background: var(--my-bg-light); border-color: var(--bs-border-color); padding: 4px 8px;}
.btn_light_sm:hover {background: #F3F4F6;}

.btn_nomal {background: transparent; border-color: var(--bs-border-color); color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.35); box-shadow: 0 1px 3px rgba(0,0,0,0.25);}
.btn_nomal:hover {background: var(--bs-light);}

.btn_basic {background: #ffffff; border-color: var(--bs-border-color);}
.btn_basic:hover {background: var(--bs-light);}

.fs-1 {font-size: 18px !important; font-weight: 600;}
.fs-2 {font-size: 16px !important; font-weight: 600;}
.fs-3 {font-size: 15px !important; font-weight: 600;}
.fs-4 {font-size: 14px !important; font-weight: 500;}
.fs-5 {font-size: 13px !important; font-weight: 500;}
.fs-6 {font-size: 12px !important; font-weight: 400;}

.modal-header {border-bottom: 0 none;}
.modal-body {padding-top: 0;}

.stop-scroll {overflow:hidden;height:100%;}
.my_profile_btn {position: fixed; top: 5px; right: 10px; z-index: 100; font-size: 18px; font-weight: 800;}
.my-bg-light {background-color:var(--my-bg-light) !important;}

.member_title {font-size: 15px; font-weight: 600; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.45);}
.member_title font {font-family: var(--bs-font-variable); font-size: 100%;}
.member_jop {font-size: 13px; font-weight: 500; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.45);}
.member_map {font-size: 13px; font-weight: 500; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.45);}
.member_map font {font-family: var(--bs-font-variable); font-size: 110%;}
.member_verify {font-size: 13px; font-weight: 500; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.45);}
.member_verify font {font-family: var(--bs-font-variable); font-size: 110%;}
.member_time {font-size: 13px; font-weight: 500; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.45);}
.member_time font {font-family: var(--bs-font-variable); font-size: 110%;}
.member_text {font-size: 14px; font-weight: 500; line-height: 1.5; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.45);}
.member_sub {font-size: 13px; font-weight: 500; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.45);}
.member_flex {display: flex; flex-wrap: wrap; gap: 5px 10px;}
.member_flex span {font-size: 14px; font-weight: 500; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.45);}
.member_flex span font {font-size: 12px; font-weight: 400; display: inline-block; padding-right: 5px; color: #d8d8d8; text-shadow: 0 1px 3px rgba(0,0,0,0.45);}
.member_flex span i {font-family: var(--bs-font-variable); font-size: 110%; font-style: normal;}

.list_title {font-size: 15px; font-weight: 600;}
.list_title font {font-family: var(--bs-font-variable); font-size: 100%;}
.list_jop {font-size: 13px; font-weight: 500;}
.list_map {font-size: 13px; font-weight: 500;}
.list_map font {font-family: var(--bs-font-variable); font-size: 110%;}
.list_verify {font-size: 13px; font-weight: 500;}
.list_verify font {font-family: var(--bs-font-variable); font-size: 110%;}
.list_time {font-size: 13px; font-weight: 500;}
.list_time font {font-family: var(--bs-font-variable); font-size: 110%;}
.list_text {font-size: 14px; font-weight: 500; line-height: 1.5;}
.list_text font {font-family: var(--bs-font-variable); font-size: 110%;}
.list_text_sub {font-size: 13px; font-weight: 500; color: var(--bs-primary);}
.list_text_box {font-size: 13px; font-weight: 500; line-height: 1.5; border-radius: 12px; background: var(--my-bg-light);}
.list_flex {display: flex; flex-wrap: wrap; gap: 8px 10px;}
.list_flex span {font-size: 14px; font-weight: 500;}
.list_flex span font {font-size: 12px; font-weight: 400; color: #888888; display: inline-block; padding-right: 5px;}
.list_flex span i {font-family: var(--bs-font-variable); font-size: 110%; font-style: normal;}
.list_area {border-radius: 12px; background: var(--my-bg-light);}
.list_area .list_btn {width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 500; height: 60px;}
.list_area .list_btn span {font-size: 14px; font-weight: 500;}
.list_area .list_btn i {font-size: 16px;}
.list_area .list_btn .bi-chevron-right {transition: transform 0.3s ease;}
.list_area .list_btn[aria-expanded="true"] .bi-chevron-right {transform: rotate(90deg);}
.list_area .btn_area [data-bs-toggle="collapse"][aria-expanded="false"] .bi-chevron-right {transition: transform 0.3s ease;}
.list_area .btn_area [data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-right {transform: rotate(90deg);}

.list_menu {position: absolute; right: 15px; bottom: 30%; width: auto; height: auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 20px; z-index: 10;}
.list_menu .bnt {text-align: center;}
.list_menu .bnt .bi {display: block; color: #ffffff; font-size: 22px; text-shadow: 0 1px 2px rgba(0,0,0,0.8);}
.list_menu .bnt .text {font-size: 12px; font-weight: 400; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.8); margin-top: 5px;}
.like_mask {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); opacity: 0; pointer-events: none; z-index: 20;}
.like_mask .bi {color: #ffffff; font-size: 74px; text-shadow: 0 4px 14px rgba(0,0,0,0.55); transform: scale(0.8);}
.like_mask.show {opacity: 1;}
.like_mask.show .bi {animation: heartBeat 0.65s cubic-bezier(.22,.7,.2,1) 3;}
@keyframes heartBeat {
    0% {transform: scale(0.8); filter: drop-shadow(0 0 0 rgba(255, 59, 94, 0));}
    18% {transform: scale(1.35) rotate(-4deg); filter: drop-shadow(0 0 12px rgba(255, 59, 94, 0.65));}
    38% {transform: scale(0.95) rotate(0deg); filter: drop-shadow(0 0 8px rgba(255, 59, 94, 0.4));}
    62% {transform: scale(1.25) rotate(3deg); filter: drop-shadow(0 0 14px rgba(255, 59, 94, 0.6));}
    82% {transform: scale(0.9) rotate(0deg); filter: drop-shadow(0 0 8px rgba(255, 59, 94, 0.3));}
    100% {transform: scale(1.05) rotate(0deg); filter: drop-shadow(0 0 0 rgba(255, 59, 94, 0));}
}

.dislike_mask {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none; z-index: 20;}
.dislike_mask .bi {color: #ffffff; font-size: 72px; text-shadow: none; transform: scale(1); filter: drop-shadow(0 0 0 rgba(64, 120, 255, 0));}
.dislike_mask.show {opacity: 1;}
.dislike_mask.show .bi {animation: heartbreakFade 1.35s cubic-bezier(.18,.8,.2,1) 1;}
@keyframes heartbreakFade {
    0% {transform: scale(1) rotate(0deg); opacity: 1; filter: drop-shadow(0 0 12px rgba(64, 120, 255, 0.5));}
    35% {transform: scale(1) rotate(0deg); opacity: 0.95; filter: drop-shadow(0 0 10px rgba(64, 120, 255, 0.45));}
    60% {transform: scale(0.7) rotate(-4deg); opacity: 0.6; filter: drop-shadow(0 0 6px rgba(64, 120, 255, 0.28));}
    80% {transform: scale(0.38) rotate(2deg); opacity: 0.22; filter: drop-shadow(0 0 3px rgba(64, 120, 255, 0.18));}
    100% {transform: scale(0.04) rotate(0deg); opacity: 0; filter: drop-shadow(0 0 0 rgba(64, 120, 255, 0));}
}

.swal2-container {z-index: 20000 !important;}
.swal2-shown {padding-right: 0 !important;}
.custom-popup {border-radius: 10px !important; z-index: 10000; padding-top: 10px !important; box-sizing: border-box !important;}
.custom-title {font-size: 14px !important; font-weight: 500; line-height: 1.5; color: var(--bs-body-color) !important;}
.custom-text {font-size: 14px !important; font-weight: 500; line-height: 1.5; color: var(--bs-body-color) !important;}
.custom-confirm-button {font-size: 12px !important; font-weight: 500; background-color: var(--my-bg); border: 1px solid var(--bs-border-color); color: var(--bs-body-color) !important;}
.custom-cancel-button {font-size: 12px !important; font-weight: 500; background-color: var(--bs-white); border: 1px solid var(--bs-border-color); color: var(--bs-body-color) !important;}
.custom-html-container {font-size: 14px !important; font-weight: 500; line-height: 1.5; color: var(--bs-body-color) !important;}

.headline {font-size: 15px; font-weight: 600; color: #000000;}
.bodyline {font-size: 14px; font-weight: 500; color: var(--bs-body-color);}   
.subheadline {font-size: 13px; font-weight: 500; color: var(--bs-body-color);}
.captionline {font-size: 12px; font-weight: 400; color: var(--bs-dark);}

.report {position: absolute; top: 20px; right: 10px; z-index: 3; font-size: 18px; font-weight: 800; color: #ffffff;}