/*
  ボタン
  data-style="1"~"10", data-hover, data-shadow, data-round で制御
*/

.btn {
    display: inline-block;
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-main);
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.1em;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--_round, 4px);
    transition: all 0.3s ease;
}

/* shadow */
.btn[data-shadow="true"] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.btn[data-shadow="true"]:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* 1: outline */
.btn[data-style="1"] {
    color: var(--color-text);
    background: transparent;
    border-color: var(--color-text);
}

/* 2: solid */
.btn[data-style="2"] {
    color: #fff;
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* 3: solid dark */
.btn[data-style="3"] {
    color: #fff;
    background: var(--color-text);
    border-color: var(--color-text);
}

/* 4: ghost */
.btn[data-style="4"] {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-color: var(--color-accent);
}

/* 5: underline */
.btn[data-style="5"] {
    color: var(--color-text);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-accent);
    border-radius: 0;
    padding-left: 8px;
    padding-right: 8px;
}

/* 6: gradient */
.btn[data-style="6"] {
    color: #fff;
    background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, #000));
    border-color: transparent;
}

/* 7: glow */
.btn[data-style="7"] {
    color: var(--color-accent);
    background: transparent;
    border-color: var(--color-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent) 40%, transparent),
                inset 0 0 8px color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.btn[data-style="7"]:hover {
    box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 60%, transparent),
                inset 0 0 16px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* 8: raised */
.btn[data-style="8"] {
    color: #fff;
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--color-accent) 70%, #000);
    transform: translateY(0);
}
.btn[data-style="8"]:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--color-accent) 70%, #000);
}
.btn[data-style="8"]:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* 9: double border */
.btn[data-style="9"] {
    color: var(--color-accent);
    background: transparent;
    border: 2px solid var(--color-accent);
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

/* 10: minimal (text + arrow) */
.btn[data-style="10"] {
    color: var(--color-accent);
    background: transparent;
    border: none;
    padding-left: 8px;
    padding-right: 8px;
}
.btn[data-style="10"]::after {
    content: " →";
    transition: transform 0.3s;
    display: inline-block;
}
.btn[data-style="10"]:hover::after {
    transform: translateX(6px);
}

/* hover: reverse */
.btn[data-hover="reverse"][data-style="1"]:hover {
    color: var(--color-bg);
    background: var(--color-text);
}
.btn[data-hover="reverse"][data-style="2"]:hover,
.btn[data-hover="reverse"][data-style="6"]:hover {
    color: var(--color-accent);
    background: transparent;
}
.btn[data-hover="reverse"][data-style="3"]:hover {
    color: var(--color-text);
    background: transparent;
}
.btn[data-hover="reverse"][data-style="4"]:hover {
    color: #fff;
    background: var(--color-accent);
}
.btn[data-hover="reverse"][data-style="5"]:hover {
    color: var(--color-accent);
}
.btn[data-hover="reverse"][data-style="7"]:hover {
    color: #fff;
    background: var(--color-accent);
}
.btn[data-hover="reverse"][data-style="9"]:hover {
    color: #fff;
    background: var(--color-accent);
}

/* hover: gray */
.btn[data-hover="gray"]:hover {
    color: #666;
    background: #f0f0f0;
    border-color: #ccc;
}
.btn[data-hover="gray"][data-style="5"]:hover {
    background: transparent;
    border-color: transparent;
    border-bottom-color: #ccc;
}
.btn[data-hover="gray"][data-style="9"]:hover {
    outline-color: #ccc;
}
.btn[data-hover="gray"][data-style="10"]:hover {
    background: transparent;
}

/* hover: transparent */
.btn[data-hover="transparent"]:hover {
    opacity: 0.5;
}

/* 個別ボタンカラー */
.btn-color-a[data-style="2"],
.btn-color-b[data-style="2"],
.btn-color-c[data-style="2"] {
    background: #cd853f;
    border-color: #cd853f;
}
.btn-color-a[data-hover="reverse"][data-style="2"]:hover,
.btn-color-b[data-hover="reverse"][data-style="2"]:hover,
.btn-color-c[data-hover="reverse"][data-style="2"]:hover {
    color: #cd853f;
    background: transparent;
}