/* 간단 영어 독해 카드 전용 보조 스타일 (#simpleReadRoot 로 스코프).
   simple_read.html과 readpaper.html(논문 독해 학습툴)이 같은 독해 카드를 쓰므로 공유한다. */

.simple-model-select {
    margin-left: 10px;
}

.simple-char-count {
    font-size: 12px;
    font-weight: 500;
    color: #888;
    white-space: nowrap;
}

/* 추출 TEXT 버튼 (한국어 카드) */
.simple-extract-btn {
    margin-left: 10px;
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: #6d8b74;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.simple-extract-btn:hover {
    background: #5c7763;
    transform: translateY(-1px);
}

/* 번역 버튼: 채도 낮은 붉은색 (눈에 잘 띄게) */
.btn-translate {
    background-color: #c1554e;
    color: #fff;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

.btn-translate:hover {
    background-color: #ab4a44;
}

.btn-translate.is-loading {
    opacity: 1;
    pointer-events: none;
    cursor: wait;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: #ab4a44;
}

/* 붙여넣기 버튼: 갈색 + 흰색 아이콘 (항상 활성, 좌우 버튼과 동일 크기) */
.btn-paste {
    background-color: #5D4037;
    color: #fff;
    font-size: 11px;
    line-height: 1.2;
    padding: 4px 10px;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-paste:hover {
    background-color: #4a312b;
}

/* CLEAR (지우개 아이콘) 버튼: 주황색 + 흰색 아이콘 */
.btn-clear-inline {
    height: 28px;
    padding: 0 11px;
    border-radius: 8px;
    background-color: #f0883e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-clear-inline:hover {
    background-color: #e07628;
}

.eraser-icon {
    width: 20px;
    height: 20px;
    display: block;
    /* 검정 svg를 흰색으로 */
    filter: brightness(0) invert(1);
}

/* 영어 카드 입력 영역 (붙여넣기 전) */
.content-box.is-editing {
    outline: none;
    cursor: text;
    white-space: pre-wrap;
    word-break: break-word;
}

.content-box.is-editing:empty::before {
    content: attr(data-placeholder);
    color: #bbb;
}

/* 패널 제목 높이 통일 → 데스크탑 좌우 카드 높이 동일 */
#simpleReadRoot .panel-title {
    min-height: 42px;
}

/* ===== 데스크탑 ===== */
@media (min-width: 769px) {
    #simpleReadRoot .panel-title {
        flex-wrap: nowrap;
        gap: 8px;
    }

    /* 제목이 공간을 차지해 나머지를 오른쪽으로 밀어줌:
       [영어 ......... 0/10,000  번역 숙어 구문분석 난이도] */
    #simpleReadRoot .panel-title-text {
        flex: 1 1 auto;
    }

    #simpleReadRoot .panel-action-buttons {
        margin-left: 8px;
    }
}

/* ===== 스마트폰 ===== */
@media (max-width: 768px) {
    /* 1줄: 영어 - 0/10,000 */
    #simpleReadRoot .panel-title-text {
        flex: 0 0 auto;
    }

    #simpleReadRoot .simple-model-select {
        flex: 0 0 auto;
        margin-left: 0;
    }

    #simpleReadRoot .simple-char-count {
        flex: 1 1 auto;
        text-align: right;
    }

    /* 2줄: 번역 숙어 구문분석 난이도 */
    #simpleReadRoot .panel-en .panel-action-buttons {
        flex: 1 1 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }

    /* 한국어: 제목 + CLEAR 같은 줄 */
    #simpleReadRoot .panel-ko .panel-action-buttons {
        flex: 0 0 auto;
        margin-left: auto;
    }
}