/* Summarizer page styles — uses base.css design tokens */

.page-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* hidden 속성으로 여닫는 요소에 display 를 얹으면 UA 의 [hidden]{display:none} 을 덮어써
   항상 보이게 된다. 이 페이지는 #result·#error-box 를 hidden 으로 토글하므로 명시적으로 지킨다. */
[hidden] {
    display: none !important;
}

#input-text {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.6;
}

.input-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

/* base.css 의 .info-hint 는 아래 여백을 갖는다 — 한 줄 메타 행에서는 제거한다. */
.input-meta .info-hint {
    margin: 0;
}

.char-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: hsl(var(--muted-foreground));
}

.char-count.over-limit {
    color: hsl(var(--destructive));
    font-weight: 600;
}

/* 요약 결과 — 번호가 붙은 3줄 */
#result-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: summary-line;
}

#result-list li {
    counter-increment: summary-line;
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--background));
    font-size: 0.9375rem;
    line-height: 1.6;
    color: hsl(var(--foreground));
}

#result-list li::before {
    content: counter(summary-line);
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-size: 0.75rem;
    font-weight: 600;
}

/* 자유 텍스트라 줄바꿈을 허용한다 — 대신 min-width:0 으로 가로 넘침을 막는다
   (flex 자식의 기본 min-width:auto 는 축소를 거부해 컨테이너를 넘치게 한다). */
#result-list li .summary-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.error-box {
    padding: 14px 16px;
    border: 1px solid hsl(var(--destructive));
    border-radius: var(--radius);
    background: hsl(var(--destructive) / 0.08);
    color: hsl(var(--destructive));
    font-size: 0.875rem;
    line-height: 1.5;
}