/* 일반회원 계정 드롭다운
   기존 /assets/css/public.css는 수정하지 않습니다.
*/

.public-nav-account{
    display:none;
}

.public-member-account{
    position:relative;
}

.public-member-trigger{
    min-height:42px;
    padding:5px 7px 5px 12px;
    border:1px solid #e1e2e9;
    border-radius:13px;
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    color:var(--hp-ink);
    cursor:pointer;
    box-shadow:0 4px 14px rgba(33,35,50,.05);
}

.public-member-trigger:hover,
.public-member-trigger[aria-expanded="true"]{
    border-color:#f1c8b0;
    background:#fffaf6;
    box-shadow:0 8px 22px rgba(198,71,34,.10);
}

.public-member-name{
    max-width:100px;
    overflow:hidden;
    color:#353746;
    font-size:11px;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.public-member-avatar,
.public-member-menu-avatar,
.public-nav-member-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    background:linear-gradient(135deg,#f47d48,#c64722);
    color:#fff;
    font-size:12px;
    font-weight:900;
    box-shadow:0 5px 14px rgba(242,107,56,.22);
}

.public-member-caret{
    width:14px;
    color:#747788;
    font-size:15px;
    line-height:1;
    transition:transform .18s ease;
}

.public-member-trigger[aria-expanded="true"] .public-member-caret{
    transform:rotate(180deg);
}

.public-member-menu{
    position:absolute;
    z-index:120;
    top:calc(100% + 10px);
    right:0;
    width:238px;
    padding:8px 0;
    border:1px solid #e2e3e9;
    border-radius:15px;
    background:#fff;
    box-shadow:0 18px 50px rgba(29,31,44,.18);
    overflow:hidden;
}

.public-member-menu[hidden]{
    display:none;
}

.public-member-menu:before{
    content:"";
    position:absolute;
    top:-7px;
    right:20px;
    width:12px;
    height:12px;
    border-top:1px solid #e2e3e9;
    border-left:1px solid #e2e3e9;
    background:#fff;
    transform:rotate(45deg);
}

.public-member-menu-head{
    position:relative;
    padding:10px 15px 14px;
    display:flex;
    align-items:center;
    gap:10px;
}

.public-member-menu-head>div{
    min-width:0;
}

.public-member-menu-head strong,
.public-member-menu-head small{
    display:block;
}

.public-member-menu-head strong{
    overflow:hidden;
    font-size:12px;
    font-weight:900;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.public-member-menu-head small{
    margin-top:3px;
    color:var(--hp-sub);
    font-size:9px;
}

.public-member-menu-group{
    padding:7px 0;
    border-top:1px solid #ececf1;
}

.public-member-menu-group a{
    min-height:38px;
    padding:0 15px;
    display:flex;
    align-items:center;
    color:#353746;
    text-decoration:none;
    font-size:11px;
    font-weight:700;
}

.public-member-menu-group a:hover{
    background:#f3f7ff;
    color:var(--hp-purple);
}

.public-member-menu-group.is-last{
    padding-bottom:1px;
}

.public-member-menu-group a.is-logout{
    color:#c84a55;
}

.public-member-menu-group a.is-logout:hover{
    background:#fff4f5;
    color:#b63c47;
}

/* 모바일 햄버거 메뉴의 계정 영역 */
@media(max-width:980px){
    .public-nav-account{
        margin-top:8px;
        padding-top:10px;
        border-top:1px solid var(--hp-line);
        display:block;
    }

    .public-nav-account-title{
        padding:7px 5px 8px;
        color:#9295a4;
        font-size:9px;
        font-weight:900;
        letter-spacing:.08em;
    }

    .public-nav-account>a{
        display:block;
        padding:11px 5px;
    }

    .public-nav-member-head{
        padding:8px 5px 13px;
        display:flex;
        align-items:center;
        gap:10px;
    }

    .public-nav-member-head>div{
        min-width:0;
    }

    .public-nav-member-head strong,
    .public-nav-member-head small{
        display:block;
    }

    .public-nav-member-head strong{
        overflow:hidden;
        font-size:12px;
        font-weight:900;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .public-nav-member-head small{
        margin-top:3px;
        color:var(--hp-sub);
        font-size:9px;
    }

    .public-nav-member-avatar{
        width:36px;
        height:36px;
    }

    .public-nav-account-group{
        padding:6px 0;
        border-top:1px solid #efeff3;
    }

    .public-nav-account-group a{
        display:block;
        padding:11px 5px;
        border:0;
        color:#4d5060;
        font-size:12px;
        font-weight:700;
    }

    .public-nav-account-group a:hover,
    .public-nav-account-group a.is-active{
        color:var(--hp-purple);
        background:#fffaf6;
    }

    .public-nav-account-group a.is-company{
        color:var(--hp-purple);
        font-weight:850;
    }

    .public-nav-account-group a.is-logout{
        color:#c84a55;
    }
}

@media(max-width:640px){
    .public-nav-member-head{
        padding-left:3px;
        padding-right:3px;
    }

    .public-nav-account-group a{
        padding-left:3px;
        padding-right:3px;
    }
}

@media(prefers-reduced-motion:reduce){
    .public-member-caret{
        transition:none;
    }
}


/* 모바일 햄버거 메뉴 간격 축소
   기존 public.css의 .public-nav gap:30px 상속을 명시적으로 제거합니다.
*/
@media(max-width:980px){
    .public-nav.is-open{
        gap:0;
        padding:8px 20px 12px;
        max-height:calc(100dvh - 76px);
        overflow-y:auto;
        overscroll-behavior:contain;
    }

    .public-nav>a{
        min-height:42px;
        padding:0 5px;
        display:flex;
        align-items:center;
        line-height:1.35;
    }

    .public-nav-account{
        margin-top:4px;
        padding-top:6px;
    }

    .public-nav-account-title{
        padding:7px 5px 5px;
    }

    .public-nav-account>a{
        min-height:40px;
        padding:0 5px;
        display:flex;
        align-items:center;
    }

    .public-nav-member-head{
        padding:7px 5px 9px;
    }

    .public-nav-account-group{
        padding:3px 0;
    }

    .public-nav-account-group a{
        min-height:40px;
        padding:0 5px;
        display:flex;
        align-items:center;
        line-height:1.35;
    }
}

@media(max-width:640px){
    .public-nav.is-open{
        padding-left:15px;
        padding-right:15px;
    }

    .public-nav>a{
        min-height:40px;
        padding-left:3px;
        padding-right:3px;
        font-size:12px;
    }

    .public-nav-account>a,
    .public-nav-account-group a{
        min-height:38px;
        padding-left:3px;
        padding-right:3px;
        font-size:11px;
    }
}


/* =========================================================
   모바일 사이트 메뉴 / 일반회원 메뉴 분리
   - 사이트 메뉴: ☰
   - 회원 메뉴: 회원 아바타 버튼
   ========================================================= */

.public-mobile-member{
    display:none;
}

@media(max-width:980px){
    /* 로그인 회원은 사이트 메뉴 안에 개인메뉴를 넣지 않습니다. */
    .public-nav .public-nav-member-head,
    .public-nav .public-nav-account-group{
        display:none;
    }

    /* 사이트 메뉴는 공통 메뉴만 짧게 표시 */
    .public-nav.is-open{
        gap:0;
        padding:8px 20px 12px;
        max-height:none;
        overflow:visible;
    }

    .public-nav>a{
        min-height:42px;
        padding:0 5px;
        display:flex;
        align-items:center;
        line-height:1.35;
    }

    /* 비로그인일 때만 로그인 메뉴가 사이트 패널 아래 표시 */
    .public-nav-account{
        margin-top:5px;
        padding-top:7px;
        border-top:1px solid var(--hp-line);
    }

    /* 로그인 회원 전용 두 번째 버튼 */
    .public-mobile-member{
        position:relative;
        margin-left:auto;
        display:block;
        flex:0 0 auto;
    }

    .public-mobile-member-trigger{
        width:43px;
        height:43px;
        padding:0;
        border:1px solid #d8e5f7;
        border-radius:13px;
        display:grid;
        place-items:center;
        background:#fff;
        cursor:pointer;
        box-shadow:0 5px 14px rgba(20,55,100,.08);
    }

    .public-mobile-member-trigger:hover,
    .public-mobile-member-trigger[aria-expanded="true"]{
        border-color:#e8b89d;
        background:#f3f7ff;
    }

    .public-mobile-member-avatar,
    .public-mobile-member-head-avatar{
        width:30px;
        height:30px;
        border-radius:50%;
        display:grid;
        place-items:center;
        background:linear-gradient(135deg,#f47d48,#c64722);
        color:#fff;
        font-size:11px;
        font-weight:900;
        box-shadow:0 4px 12px rgba(242,107,56,.22);
    }

    /* 기존 햄버거 버튼과 회원 버튼을 나란히 배치 */
    .public-mobile-member + .public-menu{
        margin-left:5px;
    }

    .public-menu{
        flex:0 0 auto;
    }

    /* 회원 전용 패널: 스크롤 대신 2열 압축 */
    .public-mobile-member-menu{
        position:absolute;
        z-index:260;
        top:calc(100% + 10px);
        right:0;
        width:min(360px,calc(100vw - 30px));
        padding:9px;
        border:1px solid #e2e3e9;
        border-radius:16px;
        background:#fff;
        box-shadow:0 18px 48px rgba(29,31,44,.20);
    }

    .public-mobile-member-menu[hidden]{
        display:none;
    }

    .public-mobile-member-menu:before{
        content:"";
        position:absolute;
        top:-7px;
        right:14px;
        width:12px;
        height:12px;
        border-top:1px solid #e2e3e9;
        border-left:1px solid #e2e3e9;
        background:#fff;
        transform:rotate(45deg);
    }

    .public-mobile-member-head{
        padding:8px 8px 11px;
        display:flex;
        align-items:center;
        gap:10px;
    }

    .public-mobile-member-head-avatar{
        width:34px;
        height:34px;
        flex:0 0 auto;
    }

    .public-mobile-member-head>div{
        min-width:0;
    }

    .public-mobile-member-head strong,
    .public-mobile-member-head small{
        display:block;
    }

    .public-mobile-member-head strong{
        overflow:hidden;
        color:#292b38;
        font-size:12px;
        font-weight:900;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .public-mobile-member-head small{
        margin-top:3px;
        color:#9699a7;
        font-size:9px;
    }

    .public-mobile-member-grid{
        padding-top:8px;
        border-top:1px solid #ececf1;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px;
    }

    .public-mobile-member-grid a{
        min-height:40px;
        padding:0 10px;
        border:1px solid #ececf2;
        border-radius:10px;
        display:flex;
        align-items:center;
        background:#fff;
        color:#444755;
        text-decoration:none;
        font-size:10px;
        font-weight:750;
        line-height:1.3;
    }

    .public-mobile-member-grid a:hover{
        border-color:#f1cdb8;
        background:#f3f7ff;
        color:#e96432;
    }

    .public-mobile-member-grid a.is-logout{
        border-color:#f0d5d8;
        background:#fff8f8;
        color:#c14855;
    }
}

@media(max-width:640px){
    .public-nav.is-open{
        padding-left:15px;
        padding-right:15px;
    }

    .public-nav>a{
        min-height:40px;
        font-size:12px;
    }

    .public-mobile-member-trigger{
        width:41px;
        height:41px;
        border-radius:12px;
    }

    .public-mobile-member-menu{
        width:min(350px,calc(100vw - 24px));
        right:-48px;
        padding:8px;
    }

    .public-mobile-member-menu:before{
        right:61px;
    }

    .public-mobile-member-grid{
        gap:5px;
    }

    .public-mobile-member-grid a{
        min-height:38px;
        padding:0 9px;
        font-size:10px;
    }
}


/* PC 일반회원 드롭다운 caret 정렬 교정
   Unicode '⌄' 글리프를 사용하지 않고 CSS border로 chevron을 그립니다.
   폰트별 baseline/ink-box 차이 때문에 화살표가 작고 아래로 보이는 문제를 제거합니다.
*/
.public-member-trigger{
    min-height:46px;
    padding:5px 11px 5px 12px;
    gap:9px;
}

.public-member-caret{
    width:24px;
    height:24px;
    margin-left:2px;
    border:0;
    border-radius:0;
    display:grid;
    place-items:center;
    flex:0 0 24px;
    background:transparent;
    color:#5f6270;
    font-size:0;
    line-height:0;
    box-shadow:none;
    transform:none;
}

.public-member-caret::before{
    content:"";
    width:9px;
    height:9px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transform-origin:center;
    transition:transform .18s ease,color .18s ease;
}

.public-member-trigger:hover .public-member-caret{
    color:#d3542c;
}

.public-member-trigger[aria-expanded="true"]{
    border-color:#f1c8b0;
    background:#fffaf6;
    box-shadow:0 8px 22px rgba(198,71,34,.10);
}

.public-member-trigger[aria-expanded="true"] .public-member-caret{
    color:#c64722;
}

.public-member-trigger[aria-expanded="true"] .public-member-caret::before{
    transform:translateY(2px) rotate(225deg);
}

.public-member-trigger:focus-visible{
    outline:3px solid rgba(242,107,56,.16);
    outline-offset:2px;
}