/* 공용 디자인 시스템. 페이지 CSS 앞에 로드한다.
 *
 * 팔레트·타이포는 lemonade.com 의 실제 토큰에서 가져왔다 — 따뜻한 회색 본문(순검정 아님),
 * 아주 밝은 회색 배경 단계, **강한 핑크 액센트 하나를 아껴 쓰기**, 긍정은 청록.
 * 다만 이 서비스는 마케팅 사이트가 아니라 **데이터·판단 도구**라, 거대한 히어로 타이포와
 * 큰 라운드는 가져오지 않았다. 가져온 것은 색·서체·여백이고, 정보 밀도는 유지한다.
 *
 * 변수 이름은 바꾸지 않는다 — 기존 화면이 전부 `hsl(var(--x))` 로 이 이름들을 참조한다.
 */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

/* ============================================
   1. CSS Variables
   ============================================ */
:root {
    /* 배경 단계 — #ffffff / #f7f7f7 / #f3f3f3 */
    --background: 0 0% 100%;
    --card: 0 0% 100%;
    --muted: 0 0% 97%;
    --secondary: 0 0% 95%;
    --accent: 330 98% 98%;              /* #FFF7FB — 핑크 최연한 배경 */

    /* 본문은 순검정이 아니라 따뜻한 회색 — 화면이 훨씬 부드러워진다.
     * ⚠ lemonade 의 텍스트 회색(#7b7b7b·#9b9b9b)은 흰 배경에서 4.27:1 / 2.76:1 로
     * WCAG AA 에 미달한다(마케팅 사이트는 큰 글씨라 통과하지만 이 화면은 12~14px 다).
     * 계산해서 기준을 넘는 최소 어둡기로 내렸다 — 색조는 그대로. */
    --foreground: 0 0% 29%;             /* #4a4a4a — 8.87:1 */
    --card-foreground: 0 0% 29%;
    --secondary-foreground: 0 0% 29%;
    --muted-foreground: 0 0% 46%;       /* 4.51:1 (원색 48% 는 4.27) */
    --subtle-foreground: 0 0% 56%;      /* 3차 텍스트, muted 배경에서 3:1 */
    --accent-foreground: 329 100% 43%;

    /* 액센트: 핑크. 주요 동작 버튼·링크·포커스에만 쓴다.
     * 채움(fill)과 글자(text)를 분리한다 — 원색 #ff0083 위의 흰 글자는 3.76:1 로 미달이라
     * 버튼 채움은 한 단계 진한 핑크를 쓰고, 원색은 테두리·포커스·연한 배경에 남긴다. */
    --primary: 329 100% 43%;            /* #dc0073 — 버튼 채움. 흰 글자 4.93:1 */
    --primary-hover: 329 100% 35%;      /* #b40060 */
    --primary-pressed: 329 100% 28%;
    --primary-vivid: 329 100% 50%;      /* #ff0083 원색 — 테두리·포커스 링·강조선 */
    /* 흰 배경 4.74:1, 연한 핑크 배경(--accent) 위에서도 4.5:1 을 넘도록 43% 로.
     * 링크가 흰 배경과 accent 배경 양쪽에 나타나므로 더 어두운 쪽 기준을 따른다. */
    --primary-text: 329 100% 43%;
    --primary-soft: 330 100% 91%;       /* #FFD1E8 */
    --primary-foreground: 0 0% 100%;

    /* 의미색 — 이 앱은 색으로 판단을 전달한다(추천/보류/차단).
     * `-strong` 은 같은 색의 연한 tint 배경 위에서 4.5:1 을 넘도록 계산한 값이다. */
    --positive: 172 67% 50%;            /* #2AD5BD — 채움·테두리 */
    --positive-strong: 172 67% 29%;     /* tint 배경 위 글자 4.5:1 */
    --warning: 39 100% 55%;             /* #FFB01C */
    --warning-strong: 32 85% 34%;
    --destructive: 350 93% 56%;         /* #F7274A */
    --destructive-strong: 350 85% 41%;
    --destructive-foreground: 0 0% 100%;
    --info: 216 78% 53%;                /* #2A76E4 — 채움·테두리 */
    --info-strong: 216 78% 47%;         /* tint 배경 위 글자 */

    --border: 0 0% 93%;                 /* #ececec */
    --border-strong: 0 0% 85%;          /* #dadada — hover */
    --input: 0 0% 85%;
    --ring: 329 100% 50%;               /* 포커스 링은 원색 — 배경 위 테두리라 대비 기준이 다르다 */

    --radius: 10px;                     /* lemonade 는 5·10px 위주 — 과한 라운드 안 씀 */
    --radius-sm: 5px;
}

/* 기본 타이포. llmopt 화면들은 style.css 를 로드하지 않으므로 여기서 body 를 잡아야
 * 전 화면이 같은 서체를 쓴다. Lato 는 한글 글리프가 없어 한글은 뒤 폰트로 폴백된다 —
 * 라틴(모델 ID·코드·숫자)은 Lato, 한글은 시스템 고딕이 맡는 조합이다. */
body {
    font-family: 'Lato', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR',
        'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: hsl(var(--foreground));
    background: hsl(var(--muted));
    -webkit-font-smoothing: antialiased;
}

a {
    color: hsl(var(--primary-text));
}

a:hover {
    color: hsl(var(--primary-hover));
}

/* ============================================
   2. Back Button
   ============================================ */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 8px 12px;
    background: hsl(var(--muted));
    border-radius: var(--radius);
    transition: background 0.2s, color 0.2s;
    margin-bottom: 32px;
    white-space: nowrap;
    flex-shrink: 0;
}

.back-btn:hover {
    background: hsl(var(--secondary));
    color: hsl(var(--foreground));
}

.back-btn svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   3. Page Header
   ============================================ */
.page-header {
    text-align: left;
    margin-bottom: 32px;
}

.page-header h1 {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    /* 핑크는 액센트다 — 제목까지 핑크로 칠하면 아껴 쓰는 의미가 없다 */
    color: hsl(var(--foreground));
}

.page-header p {
    margin: 8px 0 0 0;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* ============================================
   4. Buttons
   ============================================ */
.btn {
    height: 40px;
    padding: 0 16px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn svg {
    width: 16px;
    height: 16px;
}

.btn .spinner {
    animation: spin 1s linear infinite;
}

/* Primary button */
.btn-primary {
    color: hsl(var(--primary-foreground));
    background: hsl(var(--primary));
    border: none;
    /* opacity 로 hover 를 만들면 뒤 배경이 비쳐 색이 탁해진다 — 실제 hover/pressed 색을 쓴다 */
    transition: background 0.15s ease;
}

.btn-primary:hover:not(:disabled) {
    background: hsl(var(--primary-hover));
}

.btn-primary:active:not(:disabled) {
    background: hsl(var(--primary-pressed));
}

.btn-primary.processing {
    background: hsl(var(--muted-foreground));
}

/* Outline button */
.btn-outline {
    color: hsl(var(--foreground));
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border-strong));
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-outline:hover:not(:disabled) {
    border-color: hsl(var(--primary-vivid));
    color: hsl(var(--primary-text));
    background: hsl(var(--accent));
}

/* Destructive button */
.btn-destructive {
    color: hsl(var(--destructive-foreground));
    background: hsl(var(--destructive));
    border: none;
    transition: opacity 0.2s;
}

.btn-destructive:hover:not(:disabled) {
    opacity: 0.9;
}

.btn-destructive:focus-visible {
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--destructive));
}

.btn-destructive.processing {
    background: hsl(var(--muted-foreground));
}

/* Full-width button modifier */
.btn-full {
    width: 100%;
    height: 44px;
}

.btn-full svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   5. Form Controls
   ============================================ */

/* Input Section (card container for inputs) */
.input-section {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    margin-bottom: 16px;
}

/* Form Section (card container for forms) */
.form-section {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    margin-bottom: 16px;
}

/* Input Group */
.input-group {
    margin-bottom: 16px;
}

.input-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 8px;
}

.input-group input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-size: 0.875rem;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    outline: none;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.input-group input[type="text"]:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.input-group input[type="text"]::placeholder {
    color: hsl(var(--muted-foreground));
}

.input-hint {
    margin: 8px 0 0 0;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* Form Group */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 8px;
}

.form-group input[type="text"] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-size: 0.875rem;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    outline: none;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.form-group input[type="text"]:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.form-group input[type="text"]::placeholder {
    color: hsl(var(--muted-foreground));
}

.form-group small {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* Filter Section */
.filter-section {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 16px 20px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    margin-bottom: 16px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    letter-spacing: normal;
    text-transform: none;
}

.filter-group select {
    height: 40px;
    padding: 0 32px 0 12px;
    font-size: 0.875rem;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    outline: none;
    background: hsl(var(--background)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    cursor: pointer;
    min-width: 100px;
    font-family: inherit;
    color: hsl(var(--foreground));
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-group select:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* ============================================
   6. Progress
   ============================================ */
.progress-section {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 16px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: hsl(var(--secondary));
    border-radius: 9999px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: hsl(var(--primary));
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.progress-text {
    margin-top: 8px;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    text-align: center;
}

/* ============================================
   7. Result Summary
   ============================================ */
.result-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.summary-item {
    flex: 1;
    min-width: 100px;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 12px 16px;
    text-align: center;
}

.summary-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    margin-bottom: 4px;
}

.summary-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

/* ============================================
   8. Result List
   ============================================ */
.result-list-container {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

.result-list-container h3 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.result-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.result-item {
    padding: 12px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--background));
}

.result-company {
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 8px;
}

/* ============================================
   9. Legend
   ============================================ */
.legend {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: hsl(var(--muted));
    border-radius: var(--radius);
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: hsl(var(--foreground));
}

.legend-item .symbol {
    font-size: 1rem;
    font-weight: 600;
    width: 20px;
    text-align: center;
}

.legend-item .symbol.circle {
    color: hsl(var(--positive-strong));
    font-size: 1.15rem;
}

.legend-item .symbol.triangle {
    color: hsl(45 93% 37%);
}

.legend-item .symbol.x {
    color: hsl(0 84% 50%);
}

.legend-item .symbol.dash {
    color: hsl(var(--muted-foreground));
}

.legend-item .symbol.sharepoint {
    color: hsl(200 80% 50%);
}

.legend-item .symbol.na {
    color: hsl(var(--muted-foreground));
}

/* ============================================
   10. Status Badge
   ============================================ */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
}

.status-badge.pending {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

.status-badge.processing {
    background: hsl(48 96% 89%);
    color: hsl(25 95% 53%);
}

.status-badge.success {
    background: hsl(var(--positive) / 0.18);
    color: hsl(var(--positive-strong));
}

.status-badge.failed {
    background: hsl(0 84% 92%);
    color: hsl(0 84% 60%);
}

.status-badge.skipped {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

/* ============================================
   11. Company List Table (base, no grid-template-columns)
   ============================================ */
.company-list-container {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
}

.company-list-header {
    display: grid;
    padding: 12px 16px;
    background: hsl(var(--muted));
    border-bottom: 1px solid hsl(var(--border));
    font-weight: 500;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.company-list-item {
    display: grid;
    padding: 12px 16px;
    border-bottom: 1px solid hsl(var(--border));
    transition: background 0.15s ease;
    align-items: center;
    font-size: 0.875rem;
}

.company-list-item:last-child {
    border-bottom: none;
}

.company-list-item:hover {
    background: hsl(var(--muted) / 0.5);
}

.col-num {
    color: hsl(var(--muted-foreground));
    font-weight: 500;
    font-size: 0.75rem;
}

.col-name {
    font-weight: 500;
    color: hsl(var(--foreground));
}

/* ============================================
   12. Empty State
   ============================================ */
.empty-state {
    text-align: center;
    padding: 64px 24px;
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: hsl(var(--muted));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon svg {
    width: 24px;
    height: 24px;
    color: hsl(var(--muted-foreground));
}

.empty-state h3 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.empty-state p {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

/* ============================================
   13. Modal
   ============================================ */
.modal {
    display: none;
    position: fixed;
    z-index: 50;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(var(--foreground) / 0.8);
    backdrop-filter: blur(4px);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    animation: dialogIn 0.2s ease-out;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid hsl(var(--border));
}

.modal-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: hsl(var(--muted-foreground));
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background 0.2s, color 0.2s;
}

.close-btn:hover {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(85vh - 65px);
}

/* ============================================
   14. Info Section
   ============================================ */
.info-section {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 20px;
}

.info-section h3 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.info-section h4 {
    margin: 20px 0 8px 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.info-hint {
    margin: 0 0 16px 0;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    opacity: 0.8;
}

.doc-type-list {
    margin: 0;
    padding: 0 0 0 20px;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.doc-type-list li {
    margin: 6px 0;
}

.doc-type-list strong {
    color: hsl(var(--foreground));
}

.date-info {
    margin: 0 0 8px 0;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

.validation-rules {
    margin: 0;
    padding: 0 0 0 20px;
    font-size: 0.8rem;
    color: hsl(var(--muted-foreground));
}

.validation-rules li {
    margin: 4px 0;
}

.validation-rules strong {
    color: hsl(var(--foreground));
}

/* ============================================
   15. File Link
   ============================================ */
.file-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: hsl(var(--foreground));
    text-decoration: none;
    font-size: 0.875rem;
    padding: 4px 8px;
    background: hsl(var(--secondary));
    border-radius: var(--radius);
    transition: background 0.15s;
}

.file-link:hover {
    background: hsl(var(--accent));
}

.file-link svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   16. Animations
   ============================================ */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes dialogIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ============================================
   17. Responsive Base
   ============================================ */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 1.5rem;
    }

    .filter-section {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .result-summary {
        flex-direction: column;
    }

    .summary-item {
        min-width: auto;
    }

    .legend {
        flex-direction: column;
        gap: 8px;
    }

    .modal-content {
        width: 95%;
        max-height: 90vh;
    }
}