@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-variable: 'Pretendard Variable', -apple-system, Arial, sans-serif;
    --bs-font-sans-serif: var(--cw-font-sans-serif);
    --bs-font-variable: var(--cw-font-variable);
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-bg: #FFFFFF;
    --bs-body-line-height: 1.15;
    --bs-body-font-size: 14px;
    --bs-btn-font-size: 13px;
    --bs-btn-font-weight: 500;
    --bs-border-color: #E5E7EB;
    --my-bg-light: #fafafa;
    --my-bg: #F2F4F7;
    --my-bg-conat: #F0ECE4;
    --my-border-color: #DDDDDD;
    --tab-safe-top: env(safe-area-inset-top, 0px);
    --tab-safe-bottom: env(safe-area-inset-bottom, 0px);
    --tab-bottom-guard: max(var(--tab-safe-bottom), 14px);
}
* {margin: 0; padding: 0;}
html, body {margin: 0; padding: 0; height: 100%; min-height: 100svh;}
body {overflow: hidden;}
ul,li,ol,dl,p,dd,dt,section,p {list-style: none; margin: 0; padding: 0;}
img {display: block; width: 100%;}
a,a:hover,a:active,a:focus a,a:hover,a:active,a:focus {text-decoration:none; color:var(--bs-body-color);}

.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;}
.fs-7 {font-size: 11px !important; font-weight: 400; color: #444;}

#container {width: 100%; min-height: 100vh; min-height: 100svh; height: 100dvh; height: 100svh; display: flex; flex-direction: column; background: var(--bs-body-bg); box-sizing: border-box; padding-bottom: var(--tab-bottom-guard);}
nav {flex: 0 0 auto; border-bottom: 1px solid var(--bs-border-color); background: #ffffff; padding-top: var(--tab-safe-top);}
footer {flex: 0 0 auto;}
main {flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background-color: var(--my-bg-conat); padding-bottom: var(--tab-bottom-guard);}

nav a {font-size: 14px; font-weight: 500; color: #b0b0b0ff;}
nav a.active {color: #000000; font-weight: 600;}

.bg-ivory {background-color: var(--my-bg-conat);}

.btn {--bs-btn-font-size: 13px; --bs-btn-font-weight: 500;}
.btn_full {background: var(--my-bg-light); border-color: var(--bs-border-color); width: 100%; padding-top: 12px; padding-bottom: 12px; line-height: 1;}
.btn_full:hover {background: var(--my-bg); border-color: #e0e0e0}
.btn_no_full {background: var(--my-bg-light); border-color: var(--bs-border-color); width: auto; padding-top: 12px; padding-bottom: 12px; line-height: 1;}
.btn_no_full:hover {background: var(--my-bg); border-color: #e0e0e0}

.form-select-11 {font-size: 12px; font-weight: 400;}

.toast_container {position: fixed; inset: 0; left: 0; top: 0; right: 0; bottom: 0; z-index: 3000; display: flex; flex-direction: column; background: #ffffff; box-shadow: -12px 0 28px rgba(0,0,0,0.05); visibility: hidden; pointer-events: none; transform: translateX(100%); transition: transform .3s ease-out, visibility 0s linear .3s;}
.toast_container.is-open {visibility: visible; pointer-events: auto; transform: translateX(0); transition: transform .3s ease-out;}
.toast_container.is-closing {visibility: visible; pointer-events: none; transform: translateX(100%); transition: transform .3s ease-out;}
.toast_header, .toast_footer {flex: 0 0 auto;}
.toast_header {padding-top: calc(var(--tab-safe-top) + 8px) !important;}
.toast_footer {padding-bottom: calc(var(--tab-bottom-guard) + 8px) !important;}
.toast_main {flex: 1 1 auto; overflow-y: auto;}
.toast_container font {font-family: var(--bs-font-variable); font-size: 110%;}

.member_title {font-size: 15px; font-weight: 500; 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_sub {font-size: 13px; font-weight: 500; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.45);}
.member_sub font {font-family: var(--bs-font-variable); font-size: 100%;}
.member_text {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;}

.home-chip-wrap {display: flex; flex-wrap: wrap; gap: 8px;}
.home-chip {background: #ffffff; color: #444444; border-radius: 4px; padding: 4px 6px; font-size: 12px; line-height: 1.2;}

.tab-confirm-layer {position: fixed; inset: 0; z-index: 3500; display: none;}
.tab-confirm-layer.is-open {display: block;}
.tab-confirm-backdrop {position: absolute; inset: 0; background: rgba(0,0,0,.25);}
.tab-confirm-dialog {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100vw - 16px); background: #fff; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,0.18); overflow: hidden;}
.tab-confirm-msg {margin: 0; padding: 24px; font-size: 13px; font-weight: 500; line-height: 1.35; text-align: center; white-space: pre-line;}
.tab-confirm-actions {display: flex; border-top: 1px solid #e5e7eb;}
.tab-confirm-btn {flex: 1 1 0; border: 0; background: #fff; height: 54px; font-size: 13px; font-weight: 500; line-height: 1;}
.tab-confirm-btn + .tab-confirm-btn {border-left: 1px solid #e5e7eb;}
.tab-confirm-btn.is-danger {color: #d92f2f;}

.tab_app_notice {position: fixed; left: 50%; top: 50%; z-index: 3100; width: calc(100vw - 16px); padding: 24px; border-radius: 6px; background: #ffffff; font-size: 13px; font-weight: 500; line-height: 1.35; text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,0.18); opacity: 0; transform: translate(-50%, calc(-50% + 8px)); pointer-events: none; transition: opacity .22s ease, transform .22s ease;}
.tab_app_notice.is-show {opacity: 1; transform: translate(-50%, -50%);}
.tab_app_notice.is-error {background: rgba(153, 27, 27, 0.94);}

.safe-bottom-pad {padding-bottom: calc(var(--tab-bottom-guard) + 12px) !important;}
.safe-bottom-fixed {position: fixed; left: 0; right: 0; bottom: 0; padding-bottom: calc(var(--tab-bottom-guard) + 12px);}
