/* 方言変換ツール 専用スタイル。CSSの単位はすべてrem。 */
.pt-dc-tool {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pt-dc-direction-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.pt-dc-direction { display: flex; gap: 0.4rem; }

.pt-dc-direction__btn {
    padding: 0.4rem 0.9rem;
    border: 0.0625rem solid var(--pt-green-border);
    border-radius: 999rem;
    background: #fff;
    color: #444;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.pt-dc-direction__btn.is-active {
    background: var(--pt-green-dark);
    border-color: var(--pt-green-dark);
    color: #fff;
}

.pt-dc-select-label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #444;
}

.pt-dc-select {
    padding: 0.45rem 0.6rem;
    border: 0.0625rem solid #ccd3da;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    background: #fff;
}

.pt-dc-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #444;
}

.pt-dc-textarea {
    width: 100%;
    min-height: 7rem;
    box-sizing: border-box;
    padding: 0.6rem;
    border: 0.0625rem solid #ccd3da;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
}

.pt-dc-count {
    margin: -0.3rem 0 0;
    font-size: 0.75rem;
    color: #888;
    text-align: right;
}

.pt-dc-btn {
    align-self: flex-start;
    padding: 0.6rem 1.4rem;
    border: none;
    border-radius: 999rem;
    background: var(--pt-green-dark);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
}

.pt-dc-btn:hover { filter: brightness(1.08); }

.pt-dc-result {
    margin-top: 0.3rem;
    padding: 0.8rem 1rem;
    border-radius: 0.6rem;
    background: var(--pt-green-bg);
    border: 0.0625rem solid var(--pt-green-border);
}

.pt-dc-field__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #444;
    margin-bottom: 0.3rem;
}

.pt-dc-output {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #222;
    white-space: pre-wrap;
    word-break: break-word;
}

.pt-dc-copy {
    margin-top: 0.6rem;
    padding: 0.35rem 0.9rem;
    border: 0.0625rem solid var(--pt-green-dark);
    border-radius: 999rem;
    background: #fff;
    color: var(--pt-green-dark);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.pt-dc-copy-msg {
    display: inline-block;
    margin: 0 0 0 0.6rem;
}

.pt-dc-reverse-note {
    font-size: 0.8rem;
    color: #a15c00;
    background: #fff3d6;
    border-radius: 0.5rem;
    padding: 0.5rem 0.7rem;
}