/**
 * 파일 경로: /assets/css/public-layout-v2.css
 * 파일명: public-layout-v2.css
 * 설명: 공개 화면 공통 헤더/본문 폭, 로그인 상태별 상단 메뉴와 보기모드 스타일
 */

/*
 * JodalMate public layout v4
 * - 서비스 사용자 화면 보기 모드: 좁게 1180px / 넓게 1500px
 * - 넓게 보기에서는 공통 텍스트/컨트롤을 한 단계 확대
 * - 관리자 레이아웃에는 적용하지 않음
 */
:root {
    --jmw-public-content-max: 1180px;
    --jmw-public-page-title-size: 24px;
    --jmw-public-page-desc-size: 11px;
    --jmw-public-eyebrow-size: 10px;
}

html[data-layout="wide"] {
    --jmw-public-content-max: 1500px;
    --jmw-public-page-title-size: 26px;
    --jmw-public-page-desc-size: 12px;
    --jmw-public-eyebrow-size: 11px;
}

.site-container {
    width: min(var(--jmw-public-content-max), calc(100% - 40px)) !important;
    transition: width .18s ease, max-width .18s ease;
}

/* 회원가입/회원정보의 페이지별 제한보다 공통 보기 모드 폭을 우선한다. */
.signup-container,
.profile-container {
    max-width: var(--jmw-public-content-max) !important;
    transition: max-width .18s ease;
}

/* 넓게 보기 공통 스케일: 고정 px를 쓰지 않는 일반 텍스트/버튼은 1px 정도 확대된다. */
html[data-layout="wide"] body {
    font-size: 17px;
}

html[data-layout="wide"] .main-nav a {
    font-size: 16px;
}

html[data-layout="wide"] .footer-links {
    font-size: 15px;
}

html[data-layout="wide"] .theme-toggle,
html[data-layout="wide"] .header-actions .btn {
    min-height: 42px;
    padding-left: 16px;
    padding-right: 16px;
}

/* 폭 전환 버튼은 주야간 버튼과 동일한 공통 버튼 외형을 사용한다. */
.layout-toggle {
    white-space: nowrap;
}

.layout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    font-size: 15px;
    line-height: 1;
}

html[data-layout="wide"] .layout-icon {
    font-size: 16px;
}

/* 홈 랜딩 hero는 마케팅용 대형 타이틀을 유지한다. */
body:not(.page-home):not(.bid-detail-page) .site-main h1 {
    font-size: var(--jmw-public-page-title-size) !important;
    line-height: 1.28 !important;
    letter-spacing: -.02em !important;
}

/* 공통 페이지 설명 */
.products-hero > .site-container > p,
.product-detail-head p,
.profile-page-head p,
.auth-card-head p,
.signup-head p,
.reset-complete-card p,
.signup-complete-card p,
body:not(.page-home) .site-main h1 + p {
    font-size: var(--jmw-public-page-desc-size) !important;
    line-height: 1.5 !important;
}

/* 표준상품 */
.products-hero {
    padding-top: 34px !important;
    padding-bottom: 18px !important;
}

.public-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.products-title-row {
    margin-bottom: 4px;
}

.products-title-row h1 {
    margin: 0 !important;
}

.products-title-row .eyebrow {
    margin: 0 !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #eaf2ff !important;
    font-size: var(--jmw-public-eyebrow-size) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .035em !important;
    color: var(--primary) !important;
    white-space: nowrap;
}

.product-detail-head h1,
.profile-page-head h1,
.auth-card-head h1,
.signup-head h1,
.reset-complete-card h1,
.signup-complete-card h1 {
    margin-bottom: 4px !important;
}

@media (max-width: 900px) {
    /* 모바일/태블릿은 보기 모드와 무관하게 실제 화면 폭을 우선한다. */
    html[data-layout="wide"] body {
        font-size: 16px;
    }
}

@media (max-width: 720px) {
    .site-container {
        width: min(var(--jmw-public-content-max), calc(100% - 24px)) !important;
    }
}


/* =========================================================
 * 공개 페이지 제목 스타일 통일
 * - 표준상품과 동일하게: 한글 제목 + 우측 영문 badge + 하단 설명
 * ========================================================= */
body:not(.page-home) .site-main .eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0 !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #eaf2ff !important;
    color: var(--primary) !important;
    font-size: var(--jmw-public-eyebrow-size) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .035em !important;
    white-space: nowrap;
}

/* 회원정보/회원정보수정: 기존 eyebrow → h1 순서를 화면에서는 h1 → badge로 배치 */
.profile-page-head > div {
    display: grid !important;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    justify-content: start;
    column-gap: 10px;
    row-gap: 4px;
}
.profile-page-head > div > h1 {
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
}
.profile-page-head > div > .eyebrow {
    grid-column: 2;
    grid-row: 1;
}
.profile-page-head > div > p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 !important;
}

/* 회원가입/로그인/상태/완료 등 일반 공개 헤더도 같은 구조로 통일 */
.signup-head,
.auth-card-head,
.product-detail-head,
.reset-complete-card > header,
.signup-complete-card > header {
    display: grid !important;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    justify-content: start;
    column-gap: 10px;
    row-gap: 4px;
}
.signup-head > h1,
.auth-card-head > h1,
.product-detail-head > h1,
.reset-complete-card > header > h1,
.signup-complete-card > header > h1 {
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
}
.signup-head > .eyebrow,
.auth-card-head > .eyebrow,
.product-detail-head > .eyebrow,
.reset-complete-card > header > .eyebrow,
.signup-complete-card > header > .eyebrow {
    grid-column: 2;
    grid-row: 1;
}
.signup-head > p,
.auth-card-head > p,
.product-detail-head > p,
.reset-complete-card > header > p,
.signup-complete-card > header > p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 !important;
}

@media (max-width: 520px) {
    .public-title-row,
    .profile-page-head > div,
    .signup-head,
    .auth-card-head,
    .product-detail-head,
    .reset-complete-card > header,
    .signup-complete-card > header {
        column-gap: 7px;
    }
}


/* =========================================================
 * 공개 내부 페이지 상단 여백 통일
 * 표준상품 products-hero 기준 34px
 * ========================================================= */
.signup-section,
.auth-section,
.account-status-section,
.signup-complete-section,
.password-reset-section,
.profile-page,
.product-detail {
    padding-top: 34px !important;
}

/* =========================================================
 * 공개 헤더 우측 액션: 아이콘 전용 버튼
 * - 관리자 / 회원정보 / 로그아웃 / 보기모드 / 테마
 * - 텍스트는 title/aria-label로만 제공
 * ========================================================= */
.header-actions .header-icon-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0 !important;
    gap: 0;
    flex: 0 0 40px;
}

.header-action-svg {
    width: 19px;
    height: 19px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header-actions .btn-primary.header-icon-button .header-action-svg {
    stroke-width: 2;
}

.layout-icon-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.layout-icon-compact {
    display: none;
}

html[data-layout="wide"] .layout-icon-expand {
    display: none;
}

html[data-layout="wide"] .layout-icon-compact {
    display: inline-flex;
}

html[data-layout="wide"] .header-actions .header-icon-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0 !important;
    flex-basis: 42px;
}

html[data-layout="wide"] .header-actions .header-icon-button .header-action-svg {
    width: 20px;
    height: 20px;
}

/* =========================================================
 * 2026-08-20 로그인 후 입찰 업무 상단 메뉴
 * 전체 공고 → 입찰가능 → 관심 → 낙찰 → 즐겨찾기 → 표준상품 → 서비스 소개
 * ========================================================= */
.main-nav.is-auth-nav {
    gap: 24px;
}

.main-nav.is-auth-nav a {
    white-space: nowrap;
    font-size: 15px;
}

.main-nav a.is-active {
    color: var(--primary);
    font-weight: 850;
}

html[data-layout="wide"] .main-nav.is-auth-nav {
    gap: 28px;
}

html[data-layout="wide"] .main-nav.is-auth-nav a {
    font-size: 17px;
}

@media (max-width: 1180px) {
    .main-nav.is-auth-nav {
        gap: 20px;
    }

    .main-nav.is-auth-nav a {
        font-size: 14px;
    }
}


/* =========================================================
 * 2026-08-22 공개 상단 메뉴 간격 확대
 * - 기존 메뉴 간격에서 각각 +20px
 * - 비로그인 기본 28px -> 48px
 * - 로그인 기본 14px -> 34px
 * - 로그인 넓게보기 18px -> 38px
 * - 1180px 이하 로그인 10px -> 30px
 * ========================================================= */
.main-nav:not(.is-auth-nav) {
    gap: 38px;
}

/* =========================================================
 * 2026-08-23 로그인 사용자 상단 메뉴 압축
 * - 상시 노출: 회원명 / 로그아웃
 * - 회원정보 / 1:1 문의 / 관리자 / 보기모드 / 테마는 회원명 드롭다운
 * ========================================================= */
.header-user-menu {
    position: relative;
    flex: 0 0 auto;
}

.header-user-menu-trigger {
    min-height: 40px;
    padding: 0 10px 0 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.header-user-menu-trigger:hover,
.header-user-menu-trigger:focus-visible,
.header-user-menu.is-open .header-user-menu-trigger {
    background: var(--surface-2);
    outline: none;
}

.header-user-menu-chevron {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .16s ease;
}

.header-user-menu.is-open .header-user-menu-chevron {
    transform: rotate(180deg);
}

.header-user-dropdown {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 1200;
    width: 168px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}

html[data-theme="dark"] .header-user-dropdown {
    box-shadow: 0 16px 36px rgba(0, 0, 0, .34);
}

.header-user-menu:hover .header-user-dropdown,
.header-user-menu:focus-within .header-user-dropdown,
.header-user-menu.is-open .header-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.header-user-dropdown-item {
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    display: flex;
    align-items: center;
    text-align: left;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.header-user-dropdown-item:hover,
.header-user-dropdown-item:focus-visible,
.header-user-dropdown-item.is-active {
    background: var(--surface-2);
    color: var(--primary);
    outline: none;
}

.header-user-dropdown-action {
    appearance: none;
}

.header-user-dropdown-divider {
    height: 1px;
    margin: 5px 4px;
    background: var(--line);
}

.header-logout-button {
    min-height: 40px;
    padding: 0 13px;
    font-size: 12px;
    white-space: nowrap;
}

html[data-layout="wide"] .header-user-menu-trigger {
    min-height: 42px;
    font-size: 15px;
}

html[data-layout="wide"] .header-logout-button {
    min-height: 42px;
    padding: 0 15px;
    font-size: 14px;
}

html[data-layout="wide"] .header-user-dropdown {
    width: 184px;
}

html[data-layout="wide"] .header-user-dropdown-item {
    min-height: 40px;
    font-size: 14px;
}

@media (max-width: 760px) {
    .header-user-menu,
    .header-logout-button {
        display: none;
    }
}