@charset "utf-8"; 
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css); @import url("https://use.typekit.net/qpe4rtk.css"); /* Reset */

 @import url('https://fonts.googleapis.com/css2?family=Poor+Story&display=swap'); /* 초대장 스킨 폰트 */

/* 레거시 변수 정의 제거됨 - tokens.css의 --pp-* 변수 사용 */

html {
  font-size: 62.5%;
}

html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,
dl,dt,dd,table,thead,tbody,tfoot,caption,th,td,form,fieldset,hr,input,button,textarea,object,figure,figcaption,main { margin:0; padding:0; outline:none; -webkit-tap-highlight-color:transparent; } 
html, body { width:100%; } 
/*html { -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } */
body { width:100%; min-width:320px; -webkit-text-size-adjust:none; word-wrap:break-word; word-break:break-all; font-family: "Noto Sans KR", acumin-pro, sans-serif; } 
body,input,select,textarea,button { border:none; font-size:var(--pp-font-size-xs); color:var(--pp-text); background: none; } 
ul,ol { list-style:none; } 
table { width:100%; border-spacing:0; border-collapse:collapse; } 
img,fieldset { border:0; } 
address,cite,code,em { font-style:normal; font-weight:normal; } 
input,select,textarea,button { vertical-align:middle; } 
.hide,caption { line-height:0; font-size:1px; overflow:hidden; } 
hr { display:none; } 
main,header,section,nav,footer,aside,article,figure { display:block; } 
a { color:#000; text-decoration:none; } 
::selection { color: var(--pp-text); background-color: var(--pp-brand-light); }
::-moz-selection { color: var(--pp-text); background-color: var(--pp-brand-light); }
::-webkit-selection { color: var(--pp-text); background-color: var(--pp-brand-light); } 
::-webkit-scrollbar { display:none; }

/* nav - 기존 스타일 (pp-bottom-nav 웹 컴포넌트로 대체됨) */
/*
nav {  position: fixed;  left: 0px; right: 0px; bottom: 0px; width:100%; background-color: var(--pp-bg); border-top: 1px solid; border-color: var(--pp-border); font-size: 1.1rem; z-index: 1000; }
nav ul {  display: flex;  align-items: center;  justify-content: center; width:100%; margin: 0; }
nav ul li {    display: flex;  align-items: center;  justify-content: center;  flex-wrap: wrap; width:25%; padding: 4px 0 8px 0; text-decoration: none;}
nav ul li a,
nav ul li a:visited,
nav ul li a:active,
nav ul li a:focus,
nav ul li a:hover {
  text-decoration: none !important;
}
nav ul li a {  display: flex;  align-items: center;  justify-content: center;  flex-wrap: wrap; color: var(--pp-text);  text-decoration: none;}
nav ul li a img { height: 32px; width: 32px;}
nav ul li a span {  width: 100%;  text-align: center; text-decoration: none;}
*/
/* /nav */

/* Form */
input, textarea, select { -webkit-text-size-adjust: 100%; touch-action: manipulation;} /* 아이폰에서 확대 방지 요청 */
textarea { border:1px solid var(--pp-border); }
select { height:48px; font-size:var(--pp-font-size-sm); color:var(--pp-text-secondary); border:1px solid var(--pp-border); background:var(--pp-bg); border-radius: 5px; } 
input[type=tel],
input[type=time],
input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=file],
input[type=url],
input[type=number],
textarea { font-family: "Noto Sans KR", sans-serif; font-weight: 400; width:100%; height:48px; font-size:var(--pp-font-size-sm); color:var(--pp-text); border:1px solid var(--pp-border); border-radius: 4px; background:var(--pp-bg); padding-left: 16px; padding-right: 16px; vertical-align:middle; -webkit-appearance: none; box-sizing: border-box; }
input::-webkit-input-placeholder { color: var(--pp-text-tertiary); font-size:var(--pp-font-size-sm); line-height:100%; }
input[type=date] { font-family: "Noto Sans KR", sans-serif; font-weight: 400; width:100%; height:46px; font-size:var(--pp-font-size-sm); color:var(--pp-text-secondary); border:1px solid var(--pp-border); background:var(--pp-bg); text-indent:16px; vertical-align:middle; }
textarea { padding:5px 0; }
select {
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 400;
    width: 100%;
    height: 48px;
    font-size: var(--pp-font-size-sm);
    color: var(--pp-text);
    border: 1px solid var(--pp-border);
    border-radius: 4px;
    background-color: var(--pp-bg);
    background-image: url('/img/icons/selector_16.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-left: 16px;
    padding-right: 40px;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    cursor: pointer;
}
select:focus,
textarea:focus,
input:focus {
    border: 1px solid var(--pp-primary);
    outline: none;
    -webkit-appearance: none;
} 
input, textarea, button, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
  }
input.small-input { font-size: 14px; transform: scale(0.875);  transform-origin: left center; } 


input[type=tel][readonly],
input[type=password][readonly],
input[type=email][readonly],
input[type=search][readonly],
input[type=tel][disabled],
input[type=text][disabled],
input[type=password][disabled],
input[type=search][disabled],
input[type=email][disabled] { background:var(--pp-bg-secondary); border-color:var(--pp-border); color:var(--pp-text-disabled); -webkit-appearance:none; font-size:12px; }
textarea[readonly],
textarea[disabled] { font-size:var(--pp-font-size-md); font-weight:normal; line-height:140%; background:var(--pp-bg-secondary); border:1px solid var(--pp-border); } 
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 

/* Firefox */
input[type='number'] { -moz-appearance: textfield; } 
.clear { clear:both; } 
.clear:after { content:""; display:block; clear:both; } 


img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; } 
#wrap { 
  height: 100vh; 
  height: 100svh;
  position: relative; 
}



/* header */
header { background-color: var(--pp-bg); }
.header { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; z-index: 10; box-sizing: border-box; z-index: 1000; height: 56px; padding: 0 8px; transition: transform 0.3s ease; }
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; }
/* 아래로 스크롤할 때 헤더 숨김 */
.header--hide { transform: translateY(-100%); }
/* 위로 스크롤할 때 다시 나타남 */
.header--show { transform: translateY(0); }
.modal-header { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; z-index: 10; box-sizing: border-box; z-index: 1000; height: 56px; padding: 0 8px; background-color: var(--pp-bg);font-size: var(--pp-font-size-md); color: var(--pp-text); font-weight: 700;}
.header-left, .header-right { display: flex; align-items: center;}
.header-content-left { display: flex; align-items: center; }
.header-content-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.header-content-right { display: flex; align-items: center; }
.header-content-title { font-size: var(--pp-font-size-md); font-weight: 700; color: var(--pp-text); }
.header-title { font-size: var(--pp-font-size-xl); font-weight: 700; color: var(--pp-text); padding-left: 4px;}
img.header-logo { height: 34px; margin-left: 4px; }


.back_btn { cursor: pointer; } 

/*icon btn */
.icon-16 { width: 16px; height: 16px;}
.icon-32 { width: 32px; height: 32px;}
.icon-mint path { stroke: var(--pp-primary);}
.icon-white path { stroke: var(--pp-text-inverted);}
.icon-gray path { stroke: var(--pp-text-tertiary);}
.icon-gray-500 path { stroke: var(--pp-text);}
.header-menu-btn { display: flex; align-items: center; } 
/* ==========================================================================
   프로필 이미지 통합 스타일
   ========================================================================== */

/* 기본 프로필 이미지 스타일 */
.profile-image {
    display: block;
    object-fit: cover;
    background-color: var(--pp-panel);
    user-select: none;
    -webkit-user-drag: none;
}

/* 크기별 스타일 */
.profile-image--small {
    width: 24px;
    height: 24px;
}

.profile-image--medium {
    width: 48px;
    height: 48px;
}

.profile-image--large {
    width: 80px;
    height: 80px;
}

.profile-image--xlarge {
    width: 120px;
    height: 120px;
}

/* 형태별 스타일 */
.profile-image--avatar {
    border-radius: 50%;
}

.profile-image--square {
    border-radius: 8px;
}

.profile-image--rounded {
    border-radius: 12px;
}

/* 상태별 스타일 */
.profile-image--loading {
    opacity: 0.6;
    background: linear-gradient(90deg, var(--pp-panel) 25%, var(--pp-bg-secondary) 50%, var(--pp-panel) 75%);
    background-size: 200% 100%;
    animation: profile-image-loading 1.5s infinite;
}

.profile-image--error {
    opacity: 0.7;
    filter: grayscale(100%);
}

.profile-image--hover:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 특수 용도별 스타일 */
.profile-image--author {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--pp-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-image--member {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid var(--pp-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.profile-image--guestbook {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--pp-panel);
}

.profile-image--activity {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--pp-primary);
}

/* 래퍼 스타일 */
.profile-image-wrapper {
    position: relative;
    display: inline-block;
}

.profile-image-wrapper--editable {
    cursor: pointer;
}

.profile-image-wrapper--editable:hover .profile-image {
    opacity: 0.8;
}

.profile-image-wrapper--editable::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.profile-image-wrapper--editable:hover::after {
    opacity: 1;
}

/* 편집 버튼 스타일 */
.profile-image-edit-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    background: var(--pp-primary);
    border: 2px solid var(--pp-bg);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.profile-image-edit-btn:hover {
    background: var(--pp-primary);
    transform: scale(1.1);
}

.profile-image-edit-btn .icon {
    width: 12px;
    height: 12px;
    filter: brightness(0) invert(1);
}

/* 상태 배지 스타일 */
.profile-image-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: var(--pp-danger);
    color: var(--pp-text-inverted);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pp-bg);
    padding: 0 4px;
}

.profile-image-badge--online {
    background: var(--pp-success);
}

.profile-image-badge--host {
    background: var(--pp-primary);
}

.profile-image-badge--prop {
    background: var(--pp-primary);
}

/* 그룹 표시 스타일 */
.profile-image-group {
    display: flex;
    align-items: center;
}

.profile-image-group .profile-image {
    margin-left: -8px;
    border: 2px solid var(--pp-bg);
    z-index: 1;
}

.profile-image-group .profile-image:first-child {
    margin-left: 0;
    z-index: 3;
}

.profile-image-group .profile-image:nth-child(2) {
    z-index: 2;
}

.profile-image-group--stack .profile-image {
    margin-left: -12px;
}

/* 로딩 애니메이션 */
@keyframes profile-image-loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .profile-image--large {
        width: 64px;
        height: 64px;
    }
    
    .profile-image--xlarge {
        width: 96px;
        height: 96px;
    }
    
    .profile-image--member {
        width: 44px;
        height: 44px;
    }
}


/* contents */
.contents { padding-top: 64px; } /* 웹 컴포넌트 헤더 높이에 맞춤 */ 

/* input */
.input-wrap { margin-bottom: 24px; }
.input-title { display: block; margin-bottom:4px; font-size: var(--pp-font-size-xs); font-weight: 500; color: var(--pp-text-secondary); }
.input-wrap .input-title-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom:4px; font-size: var(--pp-font-size-xs); font-weight: 500; color: var(--pp-text-secondary); }
.form-wrap .error-input { border-color: var(--pp-danger); } 
 
.contents .cert-input { border-radius: 4px; } 
/* input */

/* Toast */
#toast {
    display: none;
    width: 300px;
    padding: 15px 6px 15px 16px;
    background-color: rgba(43, 43, 43, 0.842);
    color: var(--pp-text-inverted);
    border-radius: 999px;
    align-items: center;
    justify-content: start;
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 150%);
    transition: transform 0.5s ease;
    height: auto;
}
#toast.on {
    display: flex;
    transform: translate(-50%, 0%);
}

img.toast-icon { margin-right: 12px; }
span.toast-message { font-size: 12px; font-weight: 500; }
#toast.red { background: var(--pp-danger); }
#toast.blue { background: var(--pp-info); }
/* Toast */

/* popup */
.popup-bg.active { 
  background: #00000099; 
  position: absolute; 
  top: 0; 
  height: 100vh; 
  height: 100svh;
  width: 100%; 
  z-index: 9999; 
}
.popup-vertical-wrap { border-radius: 12px; position: absolute; display: none; width: 100%; max-width: 320px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999999999; background: var(--pp-bg); height: auto; }
.popup-vertical-wrap.active { display: block; }
.popup-vertical-inner { display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 24px; }
.popup-message { font-size: var(--pp-font-size-sm); font-weight: 500; color: var(--pp-text-secondary); text-align: center; line-height: 1.6; }
.popup-small-message { font-size: 12px; font-weight: 400; margin-top: 12px; }
.popup-control-inner div { flex: 1; text-align: center; display: flex; justify-content: center; height: 48px; align-items: center; }
.popup-control-inner { display: flex; align-items: center; justify-content: center; }
.popup-control-wrap { border-top: 1px solid var(--pp-border); }
.popup-control-cancel { color: var(--pp-primary); font-size: 14px; font-weight: 400; cursor: pointer; }
.popup-control-new, .popup-control-more { color: var(--pp-primary); font-size:14px; font-weight: 400; cursor:pointer; }
.popup-control-none { color: var(--pp-text-secondary); font-size: var(--pp-font-size-sm); font-weight: 400; cursor: pointer; }
.popup-control-go-edit  { color: var(--pp-primary); font-size: var(--pp-font-size-sm); font-weight: 600; cursor: pointer; }
.popup-control-load, .popup-control-attend, .popup-control-home { color: var(--pp-primary); font-size:14px; font-weight: 700; cursor:pointer; }

.popup-control-prog, .popup-control-delete { color: var(--pp-danger); font-size: 14px; font-weight: 700; cursor: pointer; }
.popup-invite-again, .popup-invite-register, .popup-invite-attend { padding-top: 24px; }

/* popup */

img.party-detail-member-img {  height: 52px;  width: auto; }

/* Overflow Menu */
.overflow-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: none;
    min-width: 80px;
    width: max-content;
}

.overflow-menu.active {
    display: block;
}

.overflow-menu-content {
    padding: 0;
}

.overflow-menu-item {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--pp-font-size-sm);
    font-weight: 400;
    color: var(--pp-text);
    border-bottom: 1px solid var(--pp-border);
    cursor: pointer;
}

.overflow-menu-item:last-child {
    border-bottom: none;
}


.overflow-menu-cancel {
    padding: 16px 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #5A6A85;
    border-top: 8px solid #EAEEF4;
    cursor: pointer;
}

/* Mobile Responsive - 웹 컴포넌트 헤더 높이 조정 */
@media (max-width: 768px) {
  .contents {
    padding-top: 56px; /* 모바일에서는 헤더 높이 56px */
  }
}