/**
 * Unmarkdown Mobile Quick Clean.
 *
 * unmarkdown-quick-clean.js 가 위젯을 맡아 컨테이너에 .umd-qc-ready 를 붙였을 때만
 * 기존 2단 도구를 숨기고 패널을 보인다 (v0.8).
 * 그 판단(위젯의 data-umd-quick-clean="true" + 페이지를 연 순간 뷰포트 ≤ 640px)은
 * 한 번만 내리므로, 여기서는 미디어 쿼리를 쓰지 않는다. 회전해서 폭이 넓어져도
 * 초기화되지 않은 기존 도구가 드러나지 않는다.
 * 그 밖의 모든 경우(데스크톱, 태블릿, 옵트인하지 않은 페이지, JS 실패)에는 아무것도 바꾸지 않는다.
 *
 * 버튼·textarea 는 GeneratePress 기본 스타일(button:hover/focus 포함)을
 * 이겨야 하므로 상태별 색을 모두 명시한다.
 */

.umd-tool-container .umd-qc {
    display: none
}

.umd-tool-container.umd-qc-ready {
    margin: 12px auto 24px;
    padding: 8px 16px
}

.umd-tool-container.umd-qc-ready .umd-grid {
    display: none
}

.umd-tool-container.umd-qc-ready .umd-qc {
    display: block
}

.umd-tool-container .umd-qc {
    /* 입력창·결과창 공통 높이. 첫 화면에서 주 버튼이 보이도록 뷰포트 높이에 맞춘다 */
    --umd-qc-pane-h: clamp(150px, 32vh, 360px);
    scroll-margin-top: 12px;
    min-width: 0
}

.umd-tool-container .umd-qc [hidden] {
    display: none !important
}

.umd-tool-container .umd-qc-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0
}

/* ── 입력 ─────────────────────────────────────── */

.umd-tool-container .umd-qc-in {
    display: block;
    width: 100%;
    height: var(--umd-qc-pane-h);
    margin: 0;
    padding: 16px;
    border: 1px solid #d4d8de;
    border-radius: 14px;
    background: #fff;
    color: #222;
    /* 16px 미만이면 iOS 가 포커스 시 화면을 확대한다 */
    font-size: 16px;
    line-height: 1.7;
    font-family: inherit;
    resize: none;
    outline: 0;
    -webkit-appearance: none;
    appearance: none
}

.umd-tool-container .umd-qc-in:focus {
    background: #fff;
    color: #222;
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, .08)
}

.umd-tool-container .umd-qc-in::placeholder {
    color: #999
}

.umd-tool-container .umd-qc-trust {
    margin: 10px 0 0;
    font-size: .75rem;
    line-height: 1.5;
    color: #777;
    text-align: center
}

.umd-tool-container .umd-qc-hint {
    margin: 10px 2px 0;
    font-size: .82rem;
    line-height: 1.5;
    color: #b3261e
}

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

.umd-tool-container .umd-qc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin: 12px 0 0;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    letter-spacing: -.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color .15s, border-color .15s, color .15s, transform .1s
}

.umd-tool-container .umd-qc-btn:active {
    transform: scale(.98)
}

.umd-tool-container .umd-qc-btn:focus-visible,
.umd-tool-container .umd-qc-link:focus-visible,
.umd-tool-container .umd-qc-out:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 2px
}

.umd-tool-container .umd-qc-primary,
.umd-tool-container .umd-qc-primary:hover,
.umd-tool-container .umd-qc-primary:focus {
    background: #111;
    color: #fff;
    border-color: #111
}

.umd-tool-container .umd-qc-primary:disabled,
.umd-tool-container .umd-qc-primary:disabled:hover {
    background: #d9dce1;
    color: #fff;
    border-color: #d9dce1;
    cursor: default;
    transform: none
}

.umd-tool-container .umd-qc-secondary,
.umd-tool-container .umd-qc-secondary:hover,
.umd-tool-container .umd-qc-secondary:focus {
    background: #fff;
    color: #2e7d32;
    border-color: #2e7d32
}

.umd-tool-container .umd-qc-btn.is-done,
.umd-tool-container .umd-qc-btn.is-done:hover,
.umd-tool-container .umd-qc-btn.is-done:focus {
    background: #2e7d32;
    color: #fff;
    border-color: #2e7d32
}

/* ── 결과 ─────────────────────────────────────── */

.umd-tool-container .umd-qc-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 0 2px 8px;
    font-size: .8rem;
    color: #777
}

.umd-tool-container .umd-qc-done {
    font-weight: 700;
    color: #2e7d32
}

.umd-tool-container .umd-qc-done::before {
    content: "✓ "
}

.umd-tool-container .umd-qc-out {
    min-height: 120px;
    max-height: var(--umd-qc-pane-h);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px;
    border: 1px solid #d4d8de;
    border-radius: 14px;
    background: #fff;
    color: #222;
    font-size: 16px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-user-select: text;
    user-select: text
}

.umd-tool-container .umd-qc-table {
    margin: 10px 2px 0;
    font-size: .8rem;
    line-height: 1.5
}

.umd-tool-container .umd-qc-table-info {
    margin: 0;
    font-weight: 600;
    color: #2e7d32
}

.umd-tool-container .umd-qc-table-info::before {
    content: "▦ "
}

.umd-tool-container .umd-qc-table-note {
    margin: 2px 0 0;
    color: #666
}

.umd-tool-container .umd-qc-actions.has-excel {
    display: flex;
    gap: 8px
}

.umd-tool-container .umd-qc-actions.has-excel .umd-qc-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px
}

.umd-tool-container .umd-qc-links {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 6px
}

.umd-tool-container .umd-qc-link,
.umd-tool-container .umd-qc-link:hover,
.umd-tool-container .umd-qc-link:focus {
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #555;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

@media (prefers-reduced-motion: reduce) {
    .umd-tool-container .umd-qc-btn {
        transition: none
    }

    .umd-tool-container .umd-qc-btn:active {
        transform: none
    }
}