/* ============================================================
   TENOMOJI — TEXTALT-V / GLYPHALT-16 Design System Port
   ============================================================ */


body {
    font-family: var(--font-mono);
    font-size: 12px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 0 40px 0;
}

/* ---- Header（他ツールと共通の見た目） ---- */
.site-header {
    background: var(--bg);
}

/* ── 設定項目のキャプション文字 ── */
.hint, .copy-status {
    font-family: var(--font-body);
}

/* ---- App Layout: 縦積み・スリムな中央寄せカラム ---- */
.app-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 480px;
    margin: 0 auto;
    padding: 20px 16px 0;
}

/* ---- Action Bar（CLEAR / COPY を大きく、入力欄の上にまとめる） ---- */
.action-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.btn-action {
    border: none;
    border-radius: var(--radius);
    padding: 16px 10px;
    font-family: var(--font-mono);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 3px;
    cursor: pointer;
    color: #fff;
    transition: background 0.1s, transform 0.05s;
}
.btn-action:active { transform: translateY(1px); }
.btn-clear {
    background: var(--danger);
    border: 1px solid var(--danger2);
}
.btn-clear:hover { background: var(--danger2); }
.btn-copy {
    background: var(--success);
    border: 1px solid var(--success2);
}
.btn-copy:hover { background: var(--success2); }

.copy-status {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1px;
    color: var(--success);
    min-height: 16px;
    text-align: center;
}

/* ---- Panel ---- */
.panel {
    background: transparent;
    border: none;
    border-radius: 0;
}
/* 見出しの字面は theme.css の .panel-head をそのまま使う。
   ここでは、このツールだけの都合（枠なしの見出しにして、右端に
   文字数バッジを寄せる）だけを差分で足す */
.panel-head {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 0 0 4px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel-body {
    padding: 0;
}

.val-badge {
    display: inline-block;
    background: var(--bg);
    border: none;
    color: var(--text);
    font-size: 12px;
    line-height: 16px;
    min-width: 24px;
    text-align: right;
    font-family: var(--font-mono);
}

/* ---- Text Areas（単語～短文向け。画面いっぱいにせず縦長スリムに） ---- */
.moji-textarea {
    width: 100%;
    height: 110px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 20px;
    resize: vertical;
    outline: none;
}
.moji-textarea:focus { border-color: var(--accent); }
.moji-textarea[readonly] {
    background: var(--output-bg);
    color: var(--output-fg);
    border-color: var(--accent2);
}

/* ---- Responsive ---- */
@media (max-width: 520px) {
    .app-layout { max-width: 100%; padding: 16px 12px 0; }
    .btn-action { padding: 12px 8px; }
}