/* 워드픽 앱 화면(/app/) 디자인 규칙(#277).
   색·글자·카드·버튼·분절 버튼·선택 카드·배지를 한 곳에 모은다.
   사이트 공통 헤더·푸터(header.css·main.css)는 건드리지 않는다.
   x-show 를 거는 요소의 display 는 자체 클래스로 준다(ERR-007). */

/* 디자인 값(색·모서리)은 사이트 공통 tokens.css 에 있다(#279). */

/* ── 페이지 틀 ─────────────────────────────────────────────── */

.wc-app {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 24px 0 8px;
    color: var(--wp-ink);
}
.wc-app-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}
.wc-app-title { margin: 0; font-size: 28px; font-weight: 700; }
.wc-app-lead { margin: 6px 0 0; font-size: 15px; color: var(--wp-muted); }
/* 남은 이용 횟수 띠(_credit_status strip)를 머리 오른쪽 알약 모양으로 */
.wc-app-head .credit-status--strip {
    width: auto;
    margin: 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
}
/* 횟수·설명을 누르면 결제 내역으로 간다(#285). 누를 수 있다는 것을 화살표와 hover 로 알린다. */
.credit-status-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}
.credit-status-link::after {
    content: "›";
    font-size: 18px;
    line-height: 1;
    color: var(--wp-muted);
}
.credit-status-link:hover { color: inherit; text-decoration: none; }
.wc-app-head .credit-status--strip:has(.credit-status-link:hover) {
    border-color: var(--wp-primary-line);
    background: var(--wp-primary-tint);
}
.wc-form { display: flex; flex-direction: column; gap: 20px; }

.wc-card {
    background: #fff;
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-radius-card);
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.wc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.wc-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}
.wc-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--wp-primary-wash);
    color: var(--wp-primary-strong);
    font-size: 14px;
    font-weight: 700;
}

/* ── 항목(이름은 위, 도움말은 아래) ─────────────────────────── */

.wc-field { display: flex; flex-direction: column; gap: 8px; }
.wc-field-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wc-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--wp-ink); }
.wc-help { margin: 0; font-size: 13px; color: var(--wp-muted); }
.wc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.wc-app .form-control {
    border-color: var(--wp-input-line);
    border-radius: var(--wp-radius-control);
    font-size: 15px;
}
.wc-app input.form-control { min-height: 44px; }
.wc-app .form-control:focus {
    border-color: var(--wp-primary);
    box-shadow: 0 0 0 3px rgba(34, 119, 184, 0.18);
}

/* 파일 올리기 칸 */
.wc-dropzone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px dashed var(--wp-primary-line);
    border-radius: var(--wp-radius-control);
    background: #f7fbfe;
}
.wc-dropzone.is-over { border-style: solid; border-color: var(--wp-primary); background: var(--wp-primary-tint); }
.wc-dropzone.is-locked { border-color: var(--wp-input-line); background: var(--wp-page); }
.wc-dropzone-text { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.wc-dropzone-text svg { flex-shrink: 0; color: var(--wp-primary); }
.wc-dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wc-dropzone-btn { cursor: pointer; margin: 0; }
.wc-dropzone-input:disabled + .wc-dropzone-btn { cursor: not-allowed; opacity: 0.55; }
.wc-dropzone-input:focus-visible + .wc-dropzone-btn { outline: 2px solid var(--wp-primary); outline-offset: 2px; }

/* AI 키워드 스위치 줄 */
.wc-switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-radius-control);
}
.wc-switch-row .form-check-input { margin: 0; float: none; }
.wc-switch-row .form-check-label { font-size: 15px; }

/* ── 버튼 ─────────────────────────────────────────────────── */

.wc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--wp-radius-control);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    background: #fff;
    color: var(--wp-primary-strong);
    border: 1px solid var(--wp-primary-line);
}
.wc-btn:hover { background: var(--wp-primary-tint); }
.wc-btn.is-primary { background: var(--wp-primary); border-color: var(--wp-primary); color: #fff; }
.wc-btn.is-primary:hover { background: var(--wp-primary-strong); }
.wc-btn.is-quiet { color: var(--wp-ink); border-color: var(--wp-input-line); }
.wc-btn.is-quiet:hover { background: var(--wp-page); }
.wc-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.wc-text-btn {
    padding: 4px 6px;
    border: 0;
    background: transparent;
    color: var(--wp-muted);
    font-size: 13px;
}
.wc-text-btn:hover { color: var(--wp-ink); }

.wc-generate { display: flex; justify-content: center; padding: 4px 0; }
.wc-generate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 320px;
    min-height: 56px;
    border: 0;
    border-radius: var(--wp-radius-card);
    background: var(--wp-primary);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(34, 119, 184, 0.28);
}
.wc-generate-btn:hover { background: var(--wp-primary-strong); }
.wc-generate-btn:disabled { opacity: 0.6; }

/* ── 분절 버튼(탭·하나만 고르기 공통) ─────────────────────── */

.wc-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--wp-line-soft);
    border-radius: 10px;
}
.wc-seg.is-full { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.wc-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: var(--wp-radius-control);
    background: transparent;
    color: var(--wp-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.wc-seg-btn:hover { color: var(--wp-ink); }
.wc-seg-btn.is-active,
.wc-seg-btn:has(input:checked) {
    background: #fff;
    color: var(--wp-ink);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.wc-seg-btn:has(input:disabled) { cursor: not-allowed; color: #64748b; }
.wc-seg-btn:has(input:focus-visible) { outline: 2px solid var(--wp-primary); outline-offset: 1px; }
.wc-seg-btn input { position: absolute; opacity: 0; pointer-events: none; }

/* ── 선택 카드(테마·배경색·글꼴·모양) ─────────────────────── */

.wc-app .color-card,
.wc-app .font-card,
.wc-app .shape-card {
    gap: 8px;
    padding: 12px 8px;
    border: 1px solid var(--wp-line);
    border-radius: 10px;
    background: #fff;
}
.wc-app .color-card:hover,
.wc-app .font-card:hover,
.wc-app .shape-card:hover { border-color: var(--wp-primary-line); background: #fff; }
.wc-app .color-card:has(input[type="radio"]:checked),
.wc-app .font-card:has(input[type="radio"]:checked),
.wc-app .shape-card:has(input[type="radio"]:checked) {
    border: 2px solid var(--wp-primary);
    padding: 11px 7px;
    background: var(--wp-primary-tint);
}
.wc-app .color-card:has(input[type="radio"]:focus-visible),
.wc-app .font-card:has(input[type="radio"]:focus-visible),
.wc-app .shape-card:has(input[type="radio"]:focus-visible) { outline: 2px solid var(--wp-primary); outline-offset: 2px; }
.wc-app .color-name,
.wc-app .font-name,
.wc-app .shape-name { margin: 0; font-size: 12px; color: var(--wp-ink-2); }
.wc-app .color-card:has(input:checked) .color-name,
.wc-app .font-card:has(input:checked) .font-name,
.wc-app .shape-card:has(input:checked) .shape-name { color: var(--wp-primary-strong); font-weight: 700; }
.wc-app .shape-card-locked,
.wc-app .font-card-locked { border-style: dashed; background: var(--wp-page); }
.wc-app .font-preview-img { border: 0; }
.wc-app .shape-placeholder { border-color: var(--wp-input-line); color: #94a3b8; }
.wc-app .color-swatch { width: 100%; max-width: 80px; border-radius: 6px; }

/* ── 작은 표시 ────────────────────────────────────────────── */

.wc-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    background: var(--wp-primary-wash);
    color: var(--wp-primary-strong);
}
.wc-chip.is-muted { background: var(--wp-line-soft); color: var(--wp-ink-2); }
.wc-chip.is-beta { background: #fef3c7; color: #92400e; }
.wc-count { font-weight: 700; }

/* ── 단어 표 ──────────────────────────────────────────────── */

.wc-word-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.wc-word-cards .wc-card { padding: 20px 24px; gap: 8px; }
.wc-word-cards .wc-card-title { font-size: 17px; }
/* 단어 수만큼만 높이를 차지하고, 길면 이 안에서 스크롤한다 */
.wc-word-list { height: auto; max-height: 400px; overflow-y: auto; }  /* main.css 의 고정 300px 를 푼다 */
.wc-word-list .keyword-table { margin: 0; font-size: 14px; }
.wc-word-list .keyword-table thead th {
    background: transparent;
    color: var(--wp-muted);
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--wp-line);
}
.wc-word-list .keyword-table td { border-color: var(--wp-line-soft); }
.wc-word-list .keyword-table th:nth-child(3),
.wc-word-list .keyword-table td:nth-child(3) { text-align: right; }
.wc-row-btn {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--wp-input-line);
    border-radius: 6px;
    background: #fff;
    color: var(--wp-ink-2);
    font-size: 12px;
}
.wc-row-btn:hover { background: var(--wp-page); color: var(--wp-ink); }

/* 앱 화면에서만 페이지 바탕을 옅은 회색으로 — 헤더는 자체 흰 바탕, 푸터는 자체 어두운 바탕이라 영향이 없다. */
html:has(.wc-app) { background: var(--wp-page); }

/* 결과 묶음: 결과 카드 + 단어 표 카드. x-show 를 거므로 display 를 여기서 준다(ERR-007). */
.wc-results { display: flex; flex-direction: column; gap: 20px; }
.wc-seg-start { align-self: flex-start; }
.wc-shape-search { width: 320px; min-height: 40px; }

/* ── 오류 표시(#296): 오류는 원인이 있는 자리에 ─────────────────
   x-show 를 거는 요소라 display 를 자체 클래스로 준다(ERR-007).
   빨강 #b42318 은 흰 바탕 대비 6.5:1. */
:root { --wp-danger: #b42318; --wp-danger-line: #f3b4ae; --wp-danger-wash: #fef3f2; }
.wc-field-error,
.wc-inline-error,
.wc-row-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--wp-danger);
}
.wc-field-error svg,
.wc-inline-error svg,
.wc-row-error svg,
.wc-generate-error svg { flex-shrink: 0; margin-top: 2px; }
/* 결과 패널 줄 아래 — 아이콘 칸(40px)+간격만큼 들여 줄 제목과 맞춘다 */
.wc-row-error { padding: 0 0 10px 54px; }
.wc-inline-error--box,
.wc-generate-error {
    padding: 10px 12px;
    border: 1px solid var(--wp-danger-line);
    border-radius: var(--wp-radius-control);
    background: var(--wp-danger-wash);
}
.wc-generate-error {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    align-self: center;
    width: min(560px, 100%);
    font-size: 14px;
    line-height: 1.55;
    color: var(--wp-danger);
}
.wc-generate-error:focus { outline: none; }
.wc-error-link { margin-left: 6px; font-weight: 600; color: var(--wp-danger); }
.wc-app .form-control.is-invalid { border: 2px solid #d92d20; background-image: none; }
.wc-dl-btn.is-retry { border-color: var(--wp-danger-line); color: var(--wp-danger); }

/* ── 표 파일 열 고르기 (#272·#333) ─────────────────────────────
   여러 개를 고르므로 체크박스를 그대로 보인다. 고른 칸은 선택 카드처럼
   테두리 2px·연한 바탕·굵은 글씨로 — 색만으로 구분하지 않는다. */
.wc-table-picker {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding: 16px 20px;
    border: 1px solid var(--wp-line);
    border-radius: 12px;
    background: #fff;
}
.wc-table-picker h3.wc-label:focus { outline: none; }
.wc-table-cols { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.wc-col-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--wp-line);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--wp-ink-2);
}
.wc-col-option input { accent-color: var(--wp-primary); width: 16px; height: 16px; margin: 0; }
.wc-col-option.is-selected {
    border: 2px solid var(--wp-primary);
    padding: 7px 11px;
    background: var(--wp-primary-tint);
    color: var(--wp-ink);
    font-weight: 700;
}
.wc-col-option:has(input:focus-visible) { outline: 2px solid var(--wp-primary); outline-offset: 2px; }
.wc-col-meta { font-size: 13px; font-weight: 400; color: var(--wp-muted); }
.wc-table-preview { overflow-x: auto; border: 1px solid var(--wp-line); border-radius: 8px; }
.wc-table-preview:focus-visible { outline: 2px solid var(--wp-primary); outline-offset: 2px; }
.wc-table-preview table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wc-table-preview th,
.wc-table-preview td {
    max-width: 240px;
    padding: 8px 10px;
    overflow: hidden;
    border-bottom: 1px solid var(--wp-line-soft);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wc-table-preview th { background: var(--wp-page); font-weight: 600; color: var(--wp-ink); }
.wc-table-preview .is-selected { background: var(--wp-primary-tint); }
.wc-table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.wc-table-count { margin-right: auto; font-size: 14px; color: var(--wp-ink-2); }
.wc-table-count.is-over { color: var(--wp-danger); font-weight: 600; }