/* Acatools - 공유 CSS */

/* 웹폰트: Pretendard(한/영 통합) + Inter(영문 보조) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --color-primary: #008C4E;
    --color-primary-dark: #007A43;
    --color-primary-light: #E4F1E9;
    --color-primary-lighter: #EFF6F0;
    --color-primary-accent: #5FAE87;
}

/* Sticky footer: 본문이 짧아도 푸터가 항상 뷰포트 하단에 위치 */
body {
    display: flex;
    flex-direction: column;
    font-family: 'Pretendard Variable', Pretendard, 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
body > footer {
    margin-top: auto;
}

/* 공유 네비게이션 바 */
.nav-link {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #5D5749;
    text-decoration: none;
    transition: all 0.15s;
}
.nav-link:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}
.nav-link.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
}

/* 크레딧 배지: 너비 고정으로 로딩 시 레이아웃 shift 방지 (5자리 숫자까지 커버) */
#credit-badge {
    min-width: 80px;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
}

/* auth-area를 오른쪽 끝에 고정하여 크레딧 로딩 시 nav-link 위치 영향 방지 */
#auth-area {
    margin-left: auto;
    flex-shrink: 0;
}


/* ------------------------------------------------------------------
   공유 네비게이션 바 — 반응형
   창이 좁아지면 버튼을 세로로 접는 대신 글자·여백을 함께 줄인다.
   크기를 전부 em으로 잡아서 .hs-nav의 font-size 하나만 바뀌면 전체가 같이 줄어든다.
   font-size: 창 너비 1280px 이상 14px → 600px 이하 11px, 그 사이는 너비에 비례.
   ------------------------------------------------------------------ */
.hs-nav {
    background: #FFFEFA;
    border-bottom: 1px solid #E6E0D0;
    position: sticky;
    top: 0;
    z-index: 50;
    font-size: clamp(11px, calc(11px + (100vw - 600px) * 0.004412), 14px);
}
.hs-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(8px, 2vw, 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    gap: 1em;
    white-space: nowrap;   /* 좁아져도 글자가 세로로 접히지 않게 */
}
.hs-nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
}
.hs-nav-brand-text {
    font-size: 1.29em;
    font-weight: 700;
    color: #232019;
}
.hs-nav-menu {
    display: flex;
    align-items: center;
    gap: 0.3em;
    min-width: 0;
}
.hs-nav-divider {
    width: 1px;
    height: 24px;
    background: #E6E0D0;
    margin: 0 0.55em;
    flex-shrink: 0;
}
.hs-nav .nav-link {
    padding: 0.43em 1em;
    font-size: 1em;
    white-space: nowrap;
}
.hs-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.43em 0.86em;
    border-radius: 0.43em;
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s;
}
.hs-nav-btn svg {
    width: 1.15em;
    height: 1.15em;
}
.hs-nav-btn-outline {
    background: #FFFEFA;
    border: 1.5px solid #D5CEBE;
    color: #454033;
}
.hs-nav-btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.hs-nav-btn-primary {
    background: var(--color-primary);
    color: #FFFEFA;
}
.hs-nav-btn-primary:hover {
    background: var(--color-primary-dark);
}
.hs-nav #auth-area {
    display: flex;
    align-items: center;
    gap: 0.6em;
}
.hs-nav #credit-badge {
    min-width: 5.5em;
    padding: 0.3em 0.8em;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 1em;
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.hs-nav #auth-btn {
    padding: 0.43em 1em;
    background: var(--color-primary);
    color: #FFFEFA;
    border: none;
    border-radius: 0.43em;
    font-size: 0.97em;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

/* 관리자 상단 바용 부품 */
.hs-nav-group {
    display: flex;
    align-items: center;
    gap: 0.85em;
    min-width: 0;
}
.hs-nav-tag {
    padding: 0.18em 0.65em;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 0.9em;
    font-size: 0.82em;
    font-weight: 600;
}
.hs-nav-textlink {
    font-size: 0.97em;
    color: #8C8574;
    text-decoration: none;
}
.hs-nav .btn {
    padding: 0.43em 1em;
    font-size: 0.93em;
}

/* 아주 좁은 화면(글자를 더 줄여도 안 들어가는 폭): 보조 요소부터 줄인다 */
@media (max-width: 640px) {
    .hs-nav-divider { display: none; }
    .hs-nav-btn-label { display: none; }   /* 이전/다음은 화살표만 */
    .hs-nav-btn { padding: 0.43em 0.6em; }
    /* 안 보이는데 자리만 차지하던 숨김 버튼(로그인 상태에 따라 보이는 다음 버튼 등)은 뺀다 */
    .hs-nav-btn[style*="visibility:hidden"] { display: none; }
}
@media (max-width: 520px) {
    .hs-nav .nav-link-extra { display: none; }   /* 메뉴가 5개인 페이지: 요금·문의하기부터 생략 */
}
@media (max-width: 480px) {
    .hs-nav .nav-link { padding: 0.43em 0.6em; }
    .hs-nav #credit-badge { min-width: 0; }
}
@media (max-width: 400px) {
    .hs-nav-inner { gap: 0.4em; }
    .hs-nav-menu { gap: 0.15em; }
    .hs-nav-brand-text { font-size: 1.15em; }
    .hs-nav .nav-link { padding: 0.43em 0.45em; }
    .hs-nav #credit-badge { padding: 0.3em 0.5em; }
    .hs-nav #auth-btn { padding: 0.43em 0.7em; }
}
@media (max-width: 380px) {
    .hs-nav-btn { display: none; }         /* 이전/다음 버튼도 생략, 메뉴 3개와 로그인은 유지 */
}
@media (max-width: 340px) {
    .hs-nav #credit-badge { display: none; }
}