/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* ナビゲーション用スタイル                                                   */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.nav {
    display: flex;
    gap: var(--space-2);
}

.nav-link {
    font-size: 21px;
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* ヘッダー用スタイル                                                         */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.header,
.footer {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(6px);
}

.footer {
    border-top: 1px solid var(--border);
    border-bottom: none;
}

.header-inner,
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.header-inner {
    min-height: 56px;
}

.header-right{
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* hamburger button (PCでは隠す) */
.header-menu-btn{
    display: none;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;

    align-items: center;
    justify-content: center;
}
.header-menu-btn:hover{
    border-color: var(--accent);
}
.header-menu-icon{
    font-size: 18px;
    line-height: 1;
}

/* overlay + drawer (PCでは完全に無効化) */
.header-drawer-overlay{
    display: none;
}
.header-drawer{
    display: none;
}

/* SP */
@media (max-width: 640px){
    /* PC nav は隠して hamburger を出す */
    .nav{
        display: none;
    }
    .header-menu-btn{
        display: inline-flex;
    }

    /* overlay */
    .header-drawer-overlay{
        position: fixed;
        inset: 0;
        z-index: 300;
        background: rgba(0,0,0,0.35);

        /* closed */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease;
    }
    .header-drawer-overlay.is-open{
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    /* drawer */
    .header-drawer{
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: min(320px, 86vw);
        background: var(--panel, #fff);
        border-left: 1px solid var(--border);

        padding: 14px 14px 18px;

        transform: translateX(100%);
        transition: transform 0.18s ease;
        display: block;
    }
    .header-drawer.is-open{
        transform: translateX(0);
    }

    .header-drawer-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }
    .header-drawer-title{
        font-size: 14px;
        font-weight: 700;
        color: var(--text);
    }
    .header-drawer-close{
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--text);
        cursor: pointer;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
    }
    .header-drawer-close:hover{
        border-color: var(--accent);
    }

    .header-drawer-nav{
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 6px;
    }
    .header-drawer-link{
        display: block;
        padding: 10px 10px;
        border-radius: 12px;
        border: 1px solid transparent;
        text-decoration: none;
        color: var(--text);
    }
    .header-drawer-link:hover{
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 8%, transparent);
    }
}

.footer-right {
    display: flex;
    gap: var(--space-2);
}

.brand-logo {
    height: 50px;
    width: auto;
    display: block;
}

/* Language switch */
.lang-switch {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
}
.lang-switch:hover {
    border-color: var(--accent);
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* スクロールバースタイル                                                     */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
::-webkit-scrollbar {
    width: 12px;           /* 縦スクロールバー幅 */
    height: 12px;          /* 横スクロールバー高さ */
}

::-webkit-scrollbar-track {
    background: var(--border);   /* トラックの色 */
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: #9aa8ff;   /* 親和性のあるアクセントカラー */
    border-radius: 8px;
    border: 3px solid #f0f2f7; /* 見た目をスッキリさせるための余白 */
}

::-webkit-scrollbar-thumb:hover {
    background: #7f8fff;
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* button/tagスタイル                                                         */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    text-decoration: none;
}

.button:hover {
    border-color: var(--accent);
}

.button.primary {
    border-color: var(--accent);
}

.tag {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--muted);
    background: var(--bg);
}

.tag-valid {
    border: 1px solid var(--border-valid);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--muted);
    background: var(--valid);
}

.tag-invalid {
    border: 1px solid var(--border-invalid);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--muted);
    background: var(--invalid);
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* トップページ用スタイル                                                     */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.top {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.hero {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: var(--radius);
    padding: calc(var(--space-4) + 4px);
}

.hero-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hero-title {
    margin: 0;
    font-size: 36px;
    line-height: 1.15;
}

.hero-lead {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.section-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.section-title {
    margin: 0;
    font-size: 22px;
}

.section-desc {
    margin: 0;
    color: var(--muted);
}

/* Grid / Cards */
.grid {
    display: grid;
    gap: var(--space-3);
}

.cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: var(--radius);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 140px;
}

.card-link {
    cursor: pointer;
}

.card-link:hover {
    border-color: var(--accent);
}

.card-icon {
    font-size: 22px;
}

.card-title {
    margin: 0;
    font-size: 18px;
}

.card-text {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

/* Responsive: Top */
@media (max-width: 1024px) {
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .cards {
        grid-template-columns: 1fr;
    }
    .guide {
        grid-template-columns: 1fr;
    }
    .hero-title {
        font-size: 30px;
    }
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* プロフィール用スタイル                                                     */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.profile {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.profile-block {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: var(--radius);
    padding: var(--space-4);
}

.profile-icon {
    height: 32px;
    width: auto;
    margin-left: var(--space-2);
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* SNSアイコン用スタイル                                                      */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.social-icons {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    transition: all 0.2s ease;
}

.social-icon svg {
    width: 18px;
    height: 18px;
    fill: var(--muted);
}

.social-icon:hover {
    border-color: var(--accent);
}

.social-icon:hover svg {
    fill: var(--accent);
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* フッター用スタイル     　　　　                                            */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.footer-stack {
    flex-direction: column;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-4) 0;
}

.footer-copy {
    font-size: 14px;
    color: var(--muted);
}

.footer-divider {
    width: 100%;
    height: 1px;
    background: var(--border);
}

.footer-social {
    display: flex;
    justify-content: center;
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* メインコンテンツ用スタイル                                                 */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.contact-lead {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.contact-note {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.top-divider {
    width: 100%;
    height: 1px;
    background: var(--border);
}

.announce-more {
    align-self: stretch;
    text-align: center;
    border: solid 1px var(--border);
    border-radius: 21px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-span-2 {
    grid-column: span 2;
}

.form-label {
    font-size: 14px;
    color: var(--muted);
}

.form-input,
.form-select,
.form-textarea {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 15px;
    outline: none;
}

.form-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.7;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--accent);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* honeypot */
.hp {
    display: none;
}

/* Success panel */
.contact-success {
    border-color: var(--accent);
}

.contact-success-title {
    margin: 0 0 6px;
    font-size: 18px;
}

.contact-success-text {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

/* Responsive: Contact */
@media (max-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    .form-span-2 {
        grid-column: auto;
    }
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* ドキュメント用スタイル                                                     */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.container.container-docs {
    max-width: 1280px;
    width: 100%;
}

.docs {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.docs-muted {
    color: var(--muted);
    font-size: 13px;
}

.docs-top {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.docs-top-header {
    padding: var(--space-2) 0;
}

.docs-top-title {
    margin: 0;
    font-size: 28px;
}

.docs-top-desc {
    margin: 8px 0 0;
    color: var(--muted);
}

.docs-top-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.docs-section-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--space-3);
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: var(--radius);
    color: var(--text);
}

.docs-section-card:hover {
    border-color: var(--accent);
    background: var(--bg);
}

.docs-section-name {
    font-size: 18px;
    font-weight: 700;
}

.docs-section-hint {
    font-size: 13px;
    color: var(--muted);
}

.docs-sidebar {
    position: sticky;
    top: 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: var(--radius);
    padding: var(--space-3);
}

.docs-sidebar-title {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: var(--space-2);
}

.docs-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.docs-nav-link {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: var(--text);
}

.docs-nav-link:hover {
    border-color: var(--accent);
    background: var(--bg);
}

.docs-nav-link.is-active {
    border-color: var(--accent);
    background: var(--bg);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--accent);
}

.docs-content {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: var(--radius);
    padding: 24px;
}

/* Article header area for nav toggle button, etc. */
.docs-article-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

/* Toggle button (left nav open/close) */
.docs-nav-toggle {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.docs-nav-toggle:hover {
    border-color: var(--accent);
}

.docs-nav-toggle-wide{
    width: auto;
    height: 36px;
    padding: 0 12px;
    gap: 8px;
    border-radius: 999px;
}

.docs-nav-toggle-icon{
    width: 16px;
    display: inline-flex;
    justify-content: center;
}

.docs-nav-toggle-text{
    font-size: 13px;
    color: var(--muted);
}

.docs-nav-toggle-wide:hover .docs-nav-toggle-text{
    color: var(--text);
}

/* Readable content width (Zenn/Qiita-like) */
.docs-title,
.docs-body {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.docs-title {
    margin: 0 0 var(--space-3);
    font-size: 26px;
}

.docs-body {
    line-height: 1.8;
    color: var(--text);
}

.docs-body p {
    margin: 0 0 12px;
}

.docs-body h2 {
    margin: 24px 0 10px;
    font-size: 20px;
}

.docs-body h3 {
    margin: 20px 0 8px;
    font-size: 17px;
    color: rgb(70, 70, 120);
}

.docs-body code {
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
}

.docs-body pre {
    padding: 12px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    overflow: auto;
}

.docs-body pre code {
    border: none;
    background: transparent;
    padding: 0;
}

/* 2-col layout (kept for compatibility) */
.docs-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

/* 3-col layout (default desktop docs) */
.docs-3col {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 190px;
    gap: var(--space-2);
    align-items: start;
}

/* Left nav collapsed state (DocsPage toggles these classes) */
.docs-3col.is-nav-collapsed {
    grid-template-columns: minmax(0, 1fr) 190px;
}

.docs-sidebar.collapsed {
    display: none;
}

/* TOC */
.docs-toc {
    position: sticky;
    top: 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: var(--radius);
    padding: var(--space-3);
}

.docs-toc-title {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 10px;
}

.docs-toc-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.docs-toc-link {
    font-size: 13px;
    color: var(--text);
    padding: 4px 6px;
    border-radius: 8px;
}

.docs-toc-link:hover {
    background: var(--bg);
    border: 1px solid var(--border);
}

.docs-toc-link.is-h3 {
    padding-left: 16px;
    color: var(--muted);
}

/* 本文上部の折りたたみTOC（デフォルトは非表示＝PCは右TOC） */
.docs-toc-inline {
    display: none;
    max-width: 820px;      /* 本文と同じ可読幅に合わせる */
    margin: 0 auto 12px;
}

/* details/summary の見た目 */
.docs-toc-details {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 12px;
    overflow: hidden;
}

.docs-toc-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: var(--text);
    user-select: none;
}

.docs-toc-summary::-webkit-details-marker {
    display: none;
}

.docs-toc-summary-icon {
    width: 16px;
    display: inline-flex;
    justify-content: center;
    color: var(--muted);
}

/* 開いたらアイコンの向きだけ雰囲気で変える（簡易） */
.docs-toc-details[open] .docs-toc-summary-icon {
    transform: rotate(180deg);
}

.docs-toc-inline-panel {
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    background: var(--panel);
}

/* SP/タブレットでは：本文上部TOCを表示、右TOCは隠す */
@media (max-width: 1024px) {
    .docs-toc-inline {
        display: block;
    }
    .docs-toc {
        display: none;
    }
}

@media (max-width: 1024px) {
    /* 2-col: shrink left a bit */
    .docs-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    /* 3-col: drop toc */
    .docs-3col {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: var(--space-3);
    }
    .docs-toc {
        display: none;
    }

    /* If nav collapsed in this range, become 1-col */
    .docs-3col.is-nav-collapsed {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    /* single column */
    .docs-layout {
        grid-template-columns: 1fr;
    }
    .docs-3col {
        grid-template-columns: 1fr;
    }

    /* sidebar should not be sticky on small screens */
    .docs-sidebar {
        position: static;
    }

    /* content padding tighter */
    .docs-content {
        padding: 16px;
    }
}

/* ------------------------------------------ */
/* 小ツール共通スタイル                       */
/* ------------------------------------------ */
.tool-radio {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center; /* ★これが重要 */
}

.tool-radio-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    line-height: 1;      /* ★行の膨張を防ぐ */

    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    cursor: pointer;
    transition: all 0.2s ease;
}
.tool-radio-item:hover {
    border-color: var(--accent);
}
.tool-radio-item.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg));
    box-shadow: inset 0 0 0 1px var(--accent);
}

.tool-options {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

.tool-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
}

.tool-out {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
    .tool-out { grid-template-columns: 1fr; }
}

.tool-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.tool-value {
    font-size: 18px;
    line-height: 1.6;
    word-break: break-all;
}

.tool-card.is-active {
    border-color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

.form-input.is-invalid {
    border-color: #d06a7a;
}

.tool-error {
    margin-top: 8px;
    color: #d06a7a;
    font-size: 13px;
}

.tool-copied {
    color: var(--muted);
    font-size: 13px;
}

.tool-nested {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.tool-nested-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 18px;
    border-left: 2px solid var(--border);
}

.tool-nested-body.is-hidden {
    display: none;
}
.tool-custom-base {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tool-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    text-decoration: none;
}
.tool-copy-button:hover {
    border-color: var(--accent);
}

.tool-copy-button.primary {
    border-color: var(--accent);
}

.tool-copy-button-more {
    justify-content: center;
    gap: 8px;
    padding: 5px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    text-decoration: none;
    margin-left: auto;
}
.tool-copy-button-more:hover {
    border-color: var(--accent);
}

.tool-copy-button-more.primary {
    border-color: var(--accent);
}


.tool-copy-format {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tool-copy-format .form-label {
    margin: 0;
    white-space: nowrap;
}

.tool-copy-format .form-select {
    padding: 5px 6px;
    font-size: 13px;
}

.tool-input-group {
    display: flex;
    gap: 5px;
}

.tool-clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    text-decoration: none;
}
.tool-clear-button:hover {
    border-color: var(--accent);
}

.tool-clear-button.primary {
    border-color: var(--accent);
}
.tool-clear-button.is-disabled {
    color: var(--muted);
    background: var(--disabled);
    border: 1px solid var(--muted);
}

.tool-form-input {
    flex: 1;
}

.tool-input-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:6px;
}

.tool-input-head-category{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:6px;
    flex-direction: column;
}

.button-ghost{
    background: transparent;
    border: 1px solid var(--border);
}

.tool-history{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tool-history-label{
    font-size: 13px;
    color: var(--muted);
}

.tool-history-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.chip{
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip:hover{
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--bg));
}

.tool-error{
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 6%, var(--bg));
    padding: 10px 12px;
}

.tool-error-title{
    font-size: 13px;
    font-weight: 600;
}

.tool-error-msg{
    margin-top: 4px;
    font-size: 13px;
    color: var(--text);
}

.tool-error-preview{
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--bg);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
}

.tool-error-mono,
.tool-error-preview-sign{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
}

.tool-error-ch{
    padding: 1px 0;
}

.tool-error-ch.is-bad{
    border-radius: 6px;
    padding: 1px 4px;
    border: 1px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--bg));
    font-weight: 700;
}

.tool-error-ellipsis{
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.tool-error-hint{
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}

.tool-card.is-copied{
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
    animation: tool-pop 220ms ease-out;
}

@keyframes tool-pop{
    from { transform: scale(0.995); }
    to   { transform: scale(1.0); }
}

.tool-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
}

.tool-copied-badge{
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--bg));
    white-space: nowrap;
}

.tool-copied-div {
    display: flex;
    justify-content: flex-end;
}

.tool-detail-and-copy {
    display: flex;
    align-items: center;
}
.tool-desc {
    flex: 1;
}
.tool-share {
    justify-content: flex-end;
}

/* CSS tools top: details */
.tool-details {
    display: flex;
    justify-content: center;
}

.tool-details > summary {
    list-style: none;
    cursor: pointer;
}

.tool-details > summary::-webkit-details-marker {
    display: none;
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* ChatGPT方式 copy icon                                                      */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.tool-chatgpt-copy-icon{
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;

    display:flex;
    align-items:center;
    justify-content:center;
}
.tool-chatgpt-copy-icon:hover{
    border-color: var(--accent);
}
.tool-chatgpt-copy-icon-glyph{
    font-size: 16px;
    line-height: 1;
}
.tool-chatgpt-copy-icon-tip{
    position:absolute;
    top: -28px;
    right: 0;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.tool-chatgpt-copy-icon:hover .tool-chatgpt-copy-icon-tip{
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* JSON整形・検証ツール用スタイル                                             */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.tool-error-preview-json {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--bg);

    display: block;        /* ← flex にしない */
    overflow: auto;        /* ← 横も縦も必要ならスクロール */
    white-space: pre;      /* ← 改行保持 */
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tool-error-line-json,
.tool-error-caret-json {
    display: block;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* JSONツール専用：エラーカード */
.tool-error-card-json {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    /*background: var(--bg);*/
}

/* 上段（タイトル + ボタン群） */
.tool-error-head-json {
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    gap: 13px;
    margin-bottom: 6px;
}

/* メタ情報（Line / Column） */
.tool-error-meta-json {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 4px;
}

/* エラーメッセージ本文 */
.tool-error-msg-json {
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #b00020;
}

/* ボタン（既存buttonを壊さない） */
.tool-error-head-json button {
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 8px;
}

.tool-error-button-json {
    display: flex;
    gap: 3px;
}

.tool-copy-feedback-json {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--muted);
    background: var(--bg);
}

.container.container-json {
    max-width: 1600px;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    align-self: stretch;
}
.json {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
    min-height: 0;
    height: auto !important;
}

.json .section-head {
    flex: 0 0 auto;
}

.json-card-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;

    flex: 1;
    min-height: 0;
    height: auto !important;
}

.json-card {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: var(--radius);
    padding: var(--space-3);
    display: flex;
    gap: 10px;

    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;

    height: auto !important;
}

.json-form-textarea-parent {
    display: flex;
    min-height: 0;
    align-items: stretch;
    flex: 1;
}

.json-form-textarea {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 15px;
    outline: none;

    overflow-x: auto;
    overflow-y: auto;
    white-space: pre;
    word-break: normal;

    box-sizing: border-box;
    flex: 1;
    height: 100%;
}
.json-error-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@media (max-width: 900px) {
    .container.container-json {
        /* SPでは従来の横幅運用に戻したいなら、ここで解除してもOK */
        max-width: 100%;
        width: 100%;
    }

    .json-card-layout {
        grid-template-columns: 1fr; /* 1カラム */
    }
}

.json-head-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.json-lead{
    flex: 1;
    margin: 0;
}

.json-badges{
    display: flex;
    gap: 8px;
    align-items: center;
}

.json-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 6px;

    flex: 0 0 auto;
}

.json-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.json-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}
.json-button:hover{
    border-color: var(--accent);
}
.json-button2{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    font-size: 11px;
}
.json-button2:hover{
    border-color: var(--accent);
}
.json-button-ghost{
    background: transparent;
}

.json-copy-feedback{
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--muted);
    background: var(--bg);
}

/* v0.6 options */
.json-format-options{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-right: 6px;
}

.json-option{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
}

.json-option-label{
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

.json-select{
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
    color: var(--text);
    outline: none;
}
.json-select:focus{
    border-color: var(--accent);
}

.json-option-checkbox{
    gap: 10px;
}

.json-checkbox{
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

/* Error card */
.json-error-card{
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent) 6%, var(--bg));
}

.json-error-head{
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 6px;
}

.json-error-title{
    font-size: 13px;
    font-weight: 600;
}

.json-error-buttons{
    display: flex;
    gap: 6px;
}

.json-error-msg{
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #b00020;
}

/* Preview: 改行を保つ & flexを使わない */
.json-error-preview{
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--bg);

    display: block;
    overflow: auto;
    white-space: pre;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
}

.json-error-line,
.json-error-caret{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.json-error-lineno{
    color: var(--muted);
}

.json-error-text-line{
    white-space: pre;
}

.json-error-caret-text{
    white-space: pre;
}

/* ハイライト（エラー行） */
.json-error-line.is-error-line{
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: 10px;
    padding: 2px 6px;
}

.json-link-copy {
    font-size: 12px;
    color: var(--accent);
}

.json-cm-host{
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;

    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 12px;

    height: 400px;
}

/* CodeMirror内部（スコープを json-cm-host に閉じる） */
.json-cm-host .cm-editor{
    font-size: 15px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.json-cm-host .cm-scroller{
    flex: 1;
    min-height: 0;
    overflow: auto !important;
}

.json-cm-host .cm-gutters{
    background: color-mix(in srgb, var(--panel) 92%, var(--bg));
    border-right: 1px solid var(--border);
}

.json-cm-host .cm-lineNumbers{
    color: var(--muted);
}

.json-cm-host .json-cm-error-range{
    text-decoration: underline wavy #d06a7a;
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
}

.json-cm-host .json-cm-gutter-error{
    width: 14px;
}

.json-cm-host .json-cm-gutter-error-dot{
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    transform: translateY(-1px);
    color: #d06a7a;
}

/* v0.9 search */
.json-search{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
}

.json-search-input{
    flex: 1;
    max-width: 45vw;
    border: none;
    background: transparent;
    outline: none;
    color: var(--text);
    font-size: 13px;
    padding: 4px 6px;
}

.json-search-clear{
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.json-search-clear:hover{
    border-color: var(--accent);
}
.json-search-clear:disabled{
    opacity: 0.55;
    cursor: default;
}


.json-search-btn{
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.json-search-btn:hover{
    border-color: var(--accent);
}
.json-search-btn:disabled{
    opacity: 0.55;
    cursor: default;
}

.json-search-count{
    font-size: 12px;
    color: var(--muted);
    padding: 0 4px;
    white-space: nowrap;
}

/* 全一致（薄い背景） */
.json-cm-search-hit {
    background: rgba(255, 230, 120, 0.25);
    border-radius: 3px;
}

/* 現在一致（少し強め） */
.json-cm-search-hit-current {
    background: rgba(255, 200, 80, 0.45);
    border-radius: 3px;
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* Base64変換ツール用スタイル                                                 */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.base64{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.base64-controls{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.base64-controls-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.base64-mode{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.base64-chip{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}
.base64-chip:hover{
    border-color: var(--accent);
}
.base64-chip.is-active{
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg));
    box-shadow: inset 0 0 0 1px var(--accent);
}

.base64-actions{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.base64-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
}
.base64-button:hover{
    border-color: var(--accent);
}
.base64-button.primary{
    border-color: var(--accent);
}
.base64-button:disabled{
    opacity: 0.55;
    cursor: default;
}

.base64-options{
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.base64-check{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
}

.base64-io{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.base64-io-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.base64-io-title{
    font-size: 14px;
    color: var(--muted);
}

.base64-textarea{
    width: 100%;
    min-height: 180px;
    resize: vertical;

    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 15px;
    outline: none;

    line-height: 1.7;
}

.base64-textarea:focus{
    border-color: var(--accent);
}

.base64-message{
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 6%, var(--bg));
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text);
}

.base64-message-file{
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 6%, var(--bg));
    padding: 7px 10px;
    font-size: 13px;
    color: var(--text);
}

/* PC only label hint (UI only) */
.base64-check-pc{
    opacity: 0.95;
}

.base64-tool-info {
    font-size: 13px;

    border: 1px solid var(--border-valid);
    border-radius: 12px;
    background: color-mix(in srgb, var(--valid) 6%, var(--bg));
    padding: 10px 12px;
}

.base64-tool-error {
    color: #d06a7a;
    font-size: 13px;

    border: 1px solid var(--border-invalid);
    border-radius: 12px;
    background: color-mix(in srgb, var(--invalid) 6%, var(--bg));
    padding: 10px 12px;
}

@media (max-width: 640px){
    .base64-check-pc{
        opacity: 0.75;
    }
}

/* Phase 6: PC 2カラム（base64専用） */
.base64-io.base64-io-grid{
    display: grid;
    gap: 12px; /* base64-ioのgapと合わせる */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

/* SPでは常に1カラムに戻す */
@media (max-width: 1023px){
    .base64-io.base64-io-grid{
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* PNG→ICO変換ツール用スタイル                                                */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.png2ico{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.png2ico-head{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.png2ico-title{
    margin: 0;
    font-size: 26px;
}

.png2ico-desc{
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.png2ico-section{
    margin-top: var(--space-2);
}

.png2ico-h2{
    margin: 0;
    font-size: 18px;
}

.png2ico-h3{
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}

.png2ico-note-title{
    font-size: 13px;
    font-weight: 700;
}

.png2ico-note-body{
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
}

.png2ico-file{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.png2ico-file-hint{
    font-size: 12px;
    color: var(--muted);
}

.png2ico-placeholder{
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--muted);
    font-size: 13px;
}

.png2ico-canvas-dummy{
    min-height: 140px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
}

.png2ico-sizes-dummy{
    font-size: 12px;
    color: var(--muted);
}

.png2ico-opt-block{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
}

.png2ico-opt-title{
    font-size: 13px;
    font-weight: 700;
}

.png2ico-opt-hint{
    font-size: 12px;
    color: var(--muted);
}

.png2ico-generate{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.png2ico-generate-hint{
    font-size: 12px;
    color: var(--muted);
}

.png2ico-message-dummy{
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--muted);
    font-size: 13px;
}

.png2ico-file-input{
    display: none; /* label.button で押す */
}

.png2ico-fileinfo{
    margin-top: 10px;
}

.png2ico-fileinfo-row{
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}

.png2ico-fileinfo-key{
    font-size: 12px;
    color: var(--muted);
    min-width: 64px;
}

.png2ico-fileinfo-val{
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.png2ico-canvas-wrap{
    position: relative;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--bg);
    padding: 10px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.png2ico-canvas{
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.png2ico-canvas-overlay{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
    padding: 10px 12px;
    text-align: center;
}

.png2ico-meta{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.png2ico-meta-row{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
}

.png2ico-meta-val{
    color: var(--text);
}

.png2ico-tool-info {
    font-size: 13px;

    border: 1px solid var(--border-valid);
    border-radius: 12px;
    background: color-mix(in srgb, var(--valid) 6%, var(--bg));
    padding: 10px 12px;
}

.png2ico-tool-error {
    color: #d06a7a;
    font-size: 13px;

    border: 1px solid var(--border-invalid);
    border-radius: 12px;
    background: color-mix(in srgb, var(--invalid) 6%, var(--bg));
    padding: 10px 12px;
}

.png2ico-tool-warn {
    font-size: 13px;

    border: 1px solid var(--border-warn);
    border-radius: 12px;
    background: color-mix(in srgb, var(--warn) 6%, var(--bg));
    padding: 10px 12px;
}

.png2ico-custom-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    margin-top: 8px;
}

@media (max-width: 640px){
    .png2ico-custom-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.png2ico-custom-item{
    font-size: 13px;
    color: var(--muted);
}

.tool-radio-item.is-disabled{
    opacity: 0.55;
    cursor: default;
}

.png2ico-bg-row{
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.png2ico-bg-label{
    font-size: 12px;
    color: var(--muted);
    min-width: 56px;
}

.png2ico-swatch{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--panel);
    cursor: pointer;
}

.png2ico-swatch:hover{
    border-color: var(--accent);
}

.png2ico-swatch-box{
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
}

.png2ico-swatch-text{
    font-size: 12px;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.png2ico-color-input{
    /* 直接押させない（色見本から開く） */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* 和暦変換ツール用スタイル                                                   */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
.jpera{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.jpera-head{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jpera-title{
    margin: 0;
    font-size: 26px;
}

.jpera-desc{
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.jpera-note{
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

/* 1段目：PCは「左：変換」「右：ジャンプ」 */
.jpera-row1{
    display: block;
}

.jpera-row2{
    display: block;
}

.jpera-card{
    min-height: 0;
}

.jpera-h2{
    margin: 0;
    font-size: 18px;
}

.jpera-form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-top: 8px;
}

.jpera-field{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jpera-label{
    font-size: 13px;
    color: var(--muted);
}

.jpera-input,
.jpera-select{
    width: 100%;
}

.jpera-result{
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jpera-result-label{
    font-size: 13px;
    color: var(--muted);
}

.jpera-result-box{
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--bg);
    padding: 10px 12px;
    color: var(--muted);
    font-size: 13px;
}

.jpera-actions{
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
}

.jpera-jump .card-text{
    margin: 0;
}

/* 一覧（Phase 1 は枠だけ） */
.jpera-list{
    margin-top: var(--space-2);
}

.jpera-list-dummy{
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--muted);
    font-size: 13px;
}

/* SP：縦積みにする */
@media (max-width: 640px){
    .jpera-row1{
        grid-template-columns: 1fr;
    }
    .jpera-form{
        grid-template-columns: 1fr;
    }
}

.jpera-list-details{
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    overflow: hidden;
}

.jpera-list-summary{
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: var(--text);
    user-select: none;
}

.jpera-list-summary::-webkit-details-marker{
    display: none;
}

.jpera-list-summary-icon{
    width: 16px;
    display: inline-flex;
    justify-content: center;
    color: var(--muted);
}

/* open時にアイコンだけ雰囲気で回す */
.jpera-list-details[open] .jpera-list-summary-icon{
    transform: rotate(180deg);
}

.jpera-list-summary-text{
    font-size: 13px;
}

.jpera-list-summary-hint{
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
}

.jpera-list-panel{
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    background: var(--panel);
}

.jpera-list-rows{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 1行 */
.jpera-list-row{
    display: grid;
    grid-template-columns: 70px 18px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;

    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.jpera-list-row.is-transition{
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}

.jpera-list-year{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
    color: var(--text);
}

.jpera-list-sep{
    color: var(--muted);
}

.jpera-list-era{
    font-size: 13px;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jpera-list-tag{
    font-size: 12px;
}

/* SP: 省スペースに */
@media (max-width: 640px){
    .jpera-list-row{
        grid-template-columns: 62px 14px minmax(0, 1fr);
    }
    .jpera-list-tag{
        display: none;
    }
}

.jpera-info {
    font-size: 11px;

    height: 32px;

    text-align: center;

    border: 1px solid var(--border-valid);
    border-radius: 18px;
    background: color-mix(in srgb, var(--valid) 6%, var(--bg));
    padding: 8px 8px;
}

/* ---------------------------------------------------------------------------*/
/*                                                                            */
/*                                                                            */
/* CSS / box-shadow ツール                                                    */
/*                                                                            */
/*                                                                            */
/* ---------------------------------------------------------------------------*/
/* --- Box Shadow (CSS Tools) Phase1 --- */
.css-shadow{
    display:flex;
    flex-direction:column;
    gap: var(--space-3);
}
.css-shadow-title{
    margin:0;
    font-size: 26px;
}
.css-shadow-desc{
    margin:0;
    color: var(--muted);
    line-height: 1.6;
}
.css-shadow-actions{
    margin-top: var(--space-2);
    display:flex;
    justify-content:flex-end;
    gap: 8px;
}

.css-shadow-preview-title{
    align-self: flex-start;

    margin: 0;
    font-size: 18px;
}

.css-shadow-preview-area{
    height: 280px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
@media (max-width: 640px){
    .css-shadow-preview-area{ height: 260px; }
}

.css-shadow-preview-setting{
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 7px;

    align-items: flex-end;

    display: flex;
    gap: 7px;
}

.css-shadow-preview-setting-control{
    margin-top: 21px;
    align-self: flex-end;

    display: flex;
    gap: 7px;
}

.css-shadow-target{
    background: #fff;
}

.css-shadow-form{
    display:flex;
    flex-direction:column;
    gap: 10px;
}

.css-shadow-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}
@media (max-width: 640px){
    .css-shadow-grid{ grid-template-columns: 1fr; }
}
.css-shadow-grid-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.css-shadow-field{
    display:flex;
    flex-direction:column;
    gap: 6px;
}

.css-shadow-color-row{
    display:flex;
    align-items:center;
    gap: 5px;
}
.css-shadow-color{
    width: 44px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    padding: 0;
}

.css-shadow-color-swatch-box {
    border-radius: 999px;
    border: 1px solid var(--border);
}

.css-shadow-color-swatch{
    display: inline-flex;
    align-items: center;

    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
    background: var(--panel);
    cursor: pointer;
}

.css-shadow-color-swatch:hover{
    border-color: var(--accent);
}

.css-shadow-color-swatch-box{
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
}

.css-shadow-color-input{
    /* 直接押させない（色見本から開く） */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.css-shadow-hex{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.css-shadow-color-form-input {
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 15px;

    min-width: 0;
    flex: 1;
}

.css-shadow-subtitle{
    align-self: flex-start;

    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

/* Output: 1行 + 横スクロール + 折り返し無し */
.css-shadow-output{
    width:100%;
    height: 50px;

    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 14px;
    outline:none;

    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    resize: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.css-shadow-output.is-multiline{
    height: 120px;
    white-space: pre;
    overflow-x: auto;
    overflow-y: auto;
    resize: vertical;
}

.css-shadow-output-options {
    align-self: flex-end;
    gap: 7px;
    display: flex;
}

.css-shadow-output-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
}

.css-shadow-output-radio {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center; /* ★これが重要 */
}

.css-shadow-output-radio-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    line-height: 1;      /* ★行の膨張を防ぐ */

    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    cursor: pointer;
    transition: all 0.2s ease;
}
.css-shadow-output-radio-item:hover {
    border-color: var(--accent);
}
.css-shadow-output-radio-item.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg));
    box-shadow: inset 0 0 0 1px var(--accent);
}