/* 공개 화면(홈·다운로드·초대·약관·결제·404·권한 없음)과 회로 안내가 함께 쓰는 동작 요소.
   화면마다 같은 알약 버튼을 스코프 CSS 로 다시 정의하던 것을 한 벌로 모은다. 표면은 테두리 없이 재질과 그림자로 서고,
   색은 전부 Mist 토큰에서 온다. 호버는 한 단 뜨고 눌림은 다시 가라앉는다 — 테두리 색으로 답하지 않는다.
   전역 a:hover 규칙이 글자색을 바꾸지 않도록 상태마다 글자색을 다시 적는다.
   강제 색상의 포커스 윤곽선은 테마 CSS 의 :focus-visible 바닥값이 깔므로 여기서 따로 그리지 않는다. */
.public-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 44px;
    max-width: 100%;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--clc-mist-radius-pill);
    background: var(--clc-material-paper-raised);
    color: var(--clv-text-primary);
    box-shadow: var(--clc-material-elevation-0);
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow var(--clc-mist-duration-state) var(--clc-mist-ease), transform var(--clc-mist-duration-state) var(--clc-mist-ease);
}

.public-button:hover {
    color: var(--clv-text-primary);
    box-shadow: var(--clc-material-elevation-1);
    text-decoration: none;
    transform: translateY(-1px);
}

.public-button:active {
    box-shadow: var(--clc-material-elevation-0);
    transform: scale(.985);
}

.public-button svg {
    flex: none;
    width: 18px;
    height: 18px;
}

/* 화면의 주 동작. 액센트 판 위에서는 짝 잉크 하나만 쓴다. */
.public-button--primary,
.public-button--primary:hover {
    background: var(--clc-primary);
    color: var(--clc-on-primary);
}

/* 이미 뜬 종이 위에 서는 보조 동작. 같은 뜬 종이 채움은 카드와 명도가 같아 사라지므로 조용한 채움으로 선다. */
.public-button--soft {
    background: var(--clc-mist-action-quiet-fill);
}

/* 되돌아가기처럼 무게가 가장 낮은 동작. 표면 없이 글자만 두고, 호버는 파인 필드로 답한다. */
.public-button--quiet,
.public-button--quiet:hover {
    background: transparent;
    box-shadow: none;
    color: var(--clv-text-secondary);
    transform: none;
}

.public-button--quiet:hover {
    background: var(--clc-material-field);
    color: var(--clv-text-primary);
}

/* 히어로와 받기 카드의 큰 동작. */
.public-button--large {
    min-height: 52px;
    padding: 12px 24px;
    font-size: 1rem;
}

.public-button--block {
    width: 100%;
}

/* 누를 수 없는 상태는 투명도가 아니라 잉크와 채움을 한 단 낮춰 말한다. */
.public-button:disabled,
.public-button[aria-disabled="true"] {
    background: var(--clc-material-field);
    color: var(--clv-text-tertiary);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* 버튼 옆에 서는 글자 링크. */
.public-link {
    padding-block: 6px;
    border-radius: var(--clc-mist-radius-chip);
    color: var(--clv-text-secondary);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
}

.public-link:hover {
    color: var(--clv-text-primary);
    text-decoration: none;
}

/* 로그인해야 열리는 목적지라는 것을 링크 옆에서 미리 알린다. */
.public-link__note {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--clc-mist-radius-pill);
    background: var(--clc-material-field);
    color: var(--clv-text-secondary);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* 포커스 표시는 Mist 조립 토큰 하나만 읽는다. */
.public-button:focus-visible,
.public-link:focus-visible {
    outline: none;
    box-shadow: var(--clc-mist-focus-shadow);
}

/* 공개 화면의 "준비 중"·"권한 없음" 같은 한 장짜리 안내. 캔버스 위 종이 한 장에 다음 행동을 버튼으로 둔다. */
.public-notice {
    box-sizing: border-box;
    width: min(100%, 640px);
    margin-inline: auto;
    padding: 136px var(--policy-page-inline-padding, 28px) 24px;
    color: var(--clv-text-primary);
}

.public-notice__card {
    display: grid;
    justify-items: start;
    gap: 14px;
    padding: 32px 28px;
    border-radius: var(--clc-mist-radius-surface);
    background: var(--clc-material-paper);
    box-shadow: var(--clc-material-elevation-0);
}

.public-notice__mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--clc-mist-radius-field);
    background: var(--clc-mist-wash-primary);
    color: var(--clc-mist-ink-primary);
}

.public-notice__mark .clci {
    font-size: 26px;
}

.public-notice h1 {
    margin: 0;
    font-size: 1.375rem;
    letter-spacing: -.02em;
    word-break: keep-all;
}

.public-notice p {
    margin: 0;
    color: var(--clv-text-secondary);
    line-height: 1.7;
    word-break: keep-all;
}

.public-notice p a {
    color: var(--clv-text-primary);
    text-underline-offset: 3px;
}

.public-notice__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

@media (max-width: 560px) {
    .public-notice {
        padding-top: 104px;
    }

    .public-notice__card {
        padding: 24px 20px;
    }
}

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