@chatset "UTF-8";
:root {
    --theme-blue-primary: #0055AD;
    --theme-blue-secondary: #0877D7;
    --theme-blue-tertiary: #00316A;

    --theme-green-primary: #C0F354;
    --theme-green-secondary: #9DDD15;
    --theme-green-teriary: #7EB40D;

    --theme-yellow-primary: #FFC700;
    --theme-yellow-secondary: #D2A400;
    --theme-yellow-tertiary: #FFE370;

    --theme-red-primary: #FE3939;
    --theme-red-secondary: #EC0000;
    --theme-red-tertiary: #FF7171;

    --theme-magenta-primary: #6C006C;
    --theme-magenta-secondary: #AA00AA;
    --theme-magenta-tertiary: #FF8EFF;

    --theme-light-primary: #ffffff;
    --theme-light-secondary: #f2f2f2;
    --theme-light-tertiary: #E6E6E6;

    --theme-dark-primary: #1a1a1a;
    --theme-dark-secondary: #333333;
    --theme-dark-tertiary: #767676;

    --theme-panel-background: var(--theme-light-secondary);
    --theme-panel-textarea: var(--theme-light-primary);
    --theme-panel-outline: var(--theme-light-tertiary);

    --theme-link-text: var(--theme-blue-primary);
    --theme-link-visited: var(--theme-magenta-primary);
    --theme-link-active: var(--theme-dark-primary);
    --theme-link-focus: var(--theme-yellow-primary);

    --theme-highlight-underline: var(--theme-yellow-tertiary);
    --theme-highlight-important: var(--theme-red-tertiary);
    --theme-highlight-emphasis: var(--theme-yellow-tertiary);
    --theme-highlight-context: var(--theme-blue-secondary);
    --theme-highlight-insertion: var(--theme-green-primary);

    --theme-code-background: var(--theme-dark-primary);
    --theme-code-foreground: var(--theme-light-primary);

    --theme-brand-amazon: #FF9900;
    --theme-brand-rakuten: #BF0000;
}

/* Color */
body {
    color: var(--theme-dark-primary);
}

#container #box2 .hatena-module .hatena-module-body .profile-activities {
    color: var(--theme-dark-secondary);
}

#container span.highlight {
    background-color: unset;
    padding: unset;
    margin: unset;
    color: unset;
    border: unset;
    border-radius: unset;
    box-sizing: unset;
}

#container span.highlight {
    background: linear-gradient(transparent 70%, var(--theme-highlight-underline) 70%);
}

/* Typography */
#container, #footer {
    & {
        font-family: "Noto Sans JP", sans-serif;
    }

    pre, code, samp, var, kbd {
        font-family: "Noto Sans Mono", monospace;
    }

    /* Std-28B-150 */
    h1 {
        font-weight: 700;
        font-size: 28px;
        line-height: 150%;
        letter-spacing: 0.01em;
    }

    /* Std-26B-150 */
    h2,
    .hatena-module-related-entries .hatena-module-title {
        font-weight: 700;
        font-size: 26px;
        line-height: 150%;
        letter-spacing: 0.02em;
    }

    /* Std-24B-150 */
    h3,
    .hatena-module-related-entries .related-entries-title {
        font-weight: 700;
        font-size: 24px;
        line-height: 150%;
        letter-spacing: 0.02em;
    }

    /* Std-22B-150 */
    h4 {
        font-weight: 700;
        font-size: 22px;
        line-height: 150%;
        letter-spacing: 0.02em;
    }

    /* Std-20B-150 */
    h5 {
        font-weight: 700;
        font-size: 20px;
        line-height: 160%;
        letter-spacing: 0.02em;
    }

    /* Std-18B-160 */
    h6 {
        font-weight: 700;
        font-size: 18px;
        line-height: 160%;
        letter-spacing: 0.02em;
    }

    /* Std-16B-170 */
    strong, b, q::before, q::after,
    #blog-title #title,
    .archive-heading,
    span.highlight,
    .entry-content .table-of-contents::before {
        font-weight: 700;
        font-size: 16px;
        line-height: 170%;
        letter-spacing: 0.02em
    }

    /* Std-16N-170 */
    p, li, dt, dd,
    #box2 .hatena-module .hatena-module-title,
    .search-form input,
    .search-result-form input {
        font-weight: 400;
        font-size: 16px;
        line-height: 170%;
        letter-spacing: 0.02em;
    }

    /* Std-14N-170 */
    #box2 .hatena-module .hatena-module-body p,
    #box2 .hatena-module .hatena-module-body li,
    #box2 .hatena-module .hatena-module-body summary,
    .entry-content p:has(a > img:only-child) > a + a,
    .entry-content p:has(iframe) > iframe + a,
    .entry-content .table-of-contents li {
        font-weight: 400;
        font-size: 14px;
        font-style: normal;
        line-height: 170%;
        letter-spacing: 0.02em;
    }

    /* Std-14N-150 */
    small,
    #blog-title #blog-description {
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        letter-spacing: 0.02em;
    }

    /* Mono-14N-150 */
    pre, code, samp, var, kbd {
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        letter-spacing: 0;
    }
}

/* Layout */
#blog-title,
#top-box,
#content,
#footer {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

#content-inner {
    & {
        display: flex;
        flex-direction: row;
    }

    #wrapper {
        margin-left: auto;
        margin-right: 32px;
    }

    #wrapper article,
    #wrapper .archive-entries .archive-entry {
        min-width: 768px;
        width: 100%;
    }

    #box2 {
        min-width: 256px;
        margin-right: auto;
    }
}

@media (max-width: 1144px) {
    #content-inner {
        display: block;
    }

    #content-inner #wrapper,
    #content-inner #box2,
    #footer {
        max-width: 768px;
        margin-top: 32px;
        margin-left: auto;
        margin-right: auto;
    }

    #content-inner {
        #wrapper article,
        #wrapper .archive-entries .archive-entry {
            min-width: unset;
        }
    }
}

@media (max-width: 768px) {
    #content-inner #wrapper,
    #content-inner #box2,
    #footer {
        max-width: unset;
    }
}

/* Panel */
body {
    background-color: var(--theme-panel-background);
}

#content #main-inner,
#content #box2-inner,
#footer-inner {
    border: 6px solid var(--theme-panel-outline);
    border-radius: 24px;

    padding: 16px;

    background-color: var(--theme-panel-textarea);
}

#footer-inner {
    margin-top: 32px;
    border-radius: 24px 24px 0 0;
    border-width: 6px 6px 0 6px;
}

/* Link */
#container [class*="entry-tag"] [class*="entry-tag-link"] {
    & {
        color: unset;
        padding: unset;
        border: unset;
        border-radius: unset;
        line-height: unset;
        font-size: unset;
        background-color: unset;
        text-decoration: unset;
    }

    & [class*="entry-tag-label"] {
        margin: unset;
    }
}

#container a,
#footer a,
#container .archive-entry-tag .archive-entry-tag-link {
    &:link, &:visited {
        text-decoration: underline;
    }

    &:link {
        color: var(--theme-link-text);
    }

    &:visited {
        color: var(--theme-link-visited);
    }

    &:hover {
        color: var(--theme-link-text);
        text-decoration-thickness: 2px;
    }

    &:active {
        color: var(--theme-link-active);
    }

    &:focus {
        text-decoration: none;
        outline: 2px solid var(--theme-link-active);
        border-radius: 2px;

        background-color: var(--theme-link-focus);
    }
}

#container #blog-title a,
#container .entry .date a,
#container .entry .entry-title a,
#container .archive-entry .date a,
#container .archive-entry .entry-title a,
#container .hatena-module-related-entries ul li a,
.entry-content .hatena-asin-detail .hatena-asin-detail-title,
.entry-content .hatena-asin-detail .asin-detail-buy {
    --theme-link-text: var(--theme-dark-primary);
    --theme-link-visited: var(--theme-dark-primary);
}

.entry-content .hatena-asin-detail .asin-detail-buy {
    --theme-link-text: var(--theme-dark-primary);
    --theme-link-visited: var(--theme-dark-primary);
    background-color: var(--theme-brand-amazon);
}

.entry-content .hatena-rakuten-detail .hatena-asin-detail-info ul li:has(a[href^="https://hb.afl.rakuten.co.jp/"]) a {
    display: block;
    margin-top: 16px;
    margin-left: -2em;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    --theme-link-text: var(--theme-light-primary);
    --theme-link-visited: var(--theme-light-primary);
    background-color: var(--theme-brand-rakuten);
}

/* Container */
#container .entry-title,
#container .entry-content blockquote,
#container .hatena-module-related-entries ul li,
.page-index #container .no-entry .entry-content h1:first-child,
.page-about #container .entry-content h1:first-child {
    & {
        position: relative;
        padding-left: .5em;
    }

    &::before {
        position: absolute;
        display: block;
        content: '';
        width: 6px;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: var(--theme-panel-outline);
        border-radius: 6px;
    }
}

#container .search-result-form {
    border-radius: unset;
    background-clip: unset;
    max-width: unset;
    box-sizing: unset;
    position: unset;
    background-color: unset;
}

#container .search-result-form .search-result-button {
    height: unset;
    background: unset;
    text-indent: unset;
    position: unset;
    outline: unset;
    top: unset;
    right: unset;
    opacity: unset;
}


#container .search-form,
#container .search-result-form {
    & {
        display: flex;
        margin: 16px 0;
        border: unset;
    }

    input {
        display: block;
        padding: 8px;
        border-radius: 6px;
        box-sizing: content-box;
    }

    input[type="text"] {
        & {
            width: 100%;
            margin-right: 4px;
            padding: 8px;
            border: 2px solid var(--theme-panel-outline);
        }

        &:hover, &:active, &:focus {
            border: 2px solid var(--theme-yellow-primary);
            outline: 2px solid var(--theme-dark-primary);
        }
    }

    input[type="submit"] {
        & {
            width: 32px;
            margin-left: 4px;
            padding: 8px;

            border: 2px solid var(--theme-blue-primary);
            background-color: var(--theme-blue-primary);
            color: var(--theme-light-primary);
        }

        &:hover {
            text-decoration: underline;
            border-color: var(--theme-blue-secondary);
            background-color: var(--theme-blue-secondary);
        }

        &:active {
            border-color: var(--theme-blue-tertiary);
            background-color: var(--theme-blue-tertiary);
        }
    }
}

/* Header */
#container #blog-title {
    text-align: center;
    margin-top: 96px;
    margin-bottom: 96px;
}

#container #top-box {
    & {
        margin-top: -64px;
        margin-bottom: 40px;
    }

    .breadcrumb {
        padding-left: 6px;
    }

    .breadcrumb-child::before {
        display: inline;
        content: "✨ "
    }

    .breadcrumb .breadcrumb-gt {
        display: none;
    }
}

#container .archive-heading {
    margin-top: 0;
}

/* Footer */
#footer {
    #footer-inner {
        address, p {
            display: inline;
        }

        address::after {
            display: inline;
            content: '|';
            margin-left: 0.25em;
        }

        .guest-footer {
            & {
                margin-top: 0;
            }

            .guest-footer-btn-container {
                margin-top: 1em;
            }
        }
    }
}

/* Entry */
#container .archive-entry {
    margin-bottom: 96px;
}

#container .date {
    .date-year::after,
    .date-month::after,
    .date-day::after {
        display: inline;
    }

    .date-year::after {
        content: '年';
    }

    .date-month::after {
        content: '月';
    }

    .date-day::after {
        content: '日';
    }

    .hyphen {
        display: none;
    }
}

#container .entry-title {
    margin-bottom: 0;
}

#container .entry-title:has(a[href^="https://the.kalaclista.com/posts/"]) {
    --theme-panel-outline: var(--theme-blue-secondary);
}

#container .entry-title:has(a[href^="https://the.kalaclista.com/echos/"]) {
    --theme-panel-outline: var(--theme-green-secondary);
}

#container .entry-title:has(a[href^="https://the.kalaclista.com/notes/"]) {
    --theme-panel-outline: var(--theme-yellow-secondary);
}

#container .categories {
    & {
        text-align: right;
        margin-bottom: 32px;
    }

    a::before {
        display: inline;
        content: '🌵';
    }
}

#container .archive-entry .entry-description {
    min-height: 120px;
}

#container .archive-entry .entry-thumb {
    float: right;
    margin-left: 16px;
}

#container .entry-header {
    & {
        position: relative;
    }

    .entry-header-menu {
        position: absolute;
        top: 0;
        right: 0;
    }
}

#container .entry-footer-section {
    .user-name-paren,
    .user-name-hatena-id {
        display: none;
    }
}

#container .social-buttons {
    & {
        display: inline-flex;
    }

    .stat-container {
        order: -1;
        margin-left: -4px;
    }

    .bookmark-widget-counter {
        order: 1;
    }
}

#container .pager {
    & {
        display: flex;
    }

    .pager-prev,
    .pager-next {
        display: block;
        width: 50%;
    }

    .pager-next {
        margin-left: auto;
        text-align: right;
    }
}

.page-archive #container .pager {
    margin: -46px 6px 0 6px;
    padding: 0 16px;
}

/* Entry Footer */
#container .entry-footer-modules {
    margin-top: 32px;
    margin-bottom: 32px;
}

#container .entry-footer-modules {
    .hatena-module-related-entries {
        ul {
            & {
                padding-left: 0
            }

            li {
                & {
                    min-height: 100px;
                    margin: 16px 0;
                    padding-left: 1em;
                }

                .urllist-image {
                    float: right;
                }

                .related-entries-title {
                    display: block;
                    margin: 8px 0 16px 0;
                }

                &:has(a[href^="https://the.kalaclista.com/posts/"]) {
                    --theme-panel-outline: var(--theme-blue-primary);
                }

                &:has(a[href^="https://the.kalaclista.com/echos/"]) {
                    --theme-panel-outline: var(--theme-green-primary);
                }

                &:has(a[href^="https://the.kalaclista.com/notes/"]) {
                    --theme-panel-outline: var(--theme-yellow-primary);
                }
            }
        }
    }
}

/* Sidebar */
#container {
    #box2 .hatena-module {
        .hatena-module-title {
            & {
                text-align: center;
            }

            &::after {
                display: block;
                content: '';
                margin: .5em 0;
                height: 6px;
                background-color: var(--theme-panel-outline);
                border-radius: 6px;
            }
        }

        .hatena-module-body ul {
            padding-left: 1em;
        }

        &.hatena-module-profile .hatena-module-body {
            & {
                text-align: center;
            }

            .hatena-follow-button-box {
                max-width: 110px;
                margin: 16px auto;
            }

            .profile-about {
                margin-top: 16px;
                margin-bottom: 16px;
            }
        }
    }
}

/* Content */
.page-static_page #container .entry-header,
.page-static_page #container .entry-header h1:first-child,
.page-index #container .no-entry .entry-content h1:first-child,
.page-about #container .entry-content h1:first-child {
    margin-top: 0;
}

#container .entry-content {
    h1, h2, h3, h4, h5, h6 {
        margin: 16px 0;
    }

    p {
        margin: 16px 0;
    }

    hr {
        margin: 16px 0;
        border: none;
        height: 3px;
        border-radius: 3px;
        background-color: var(--theme-panel-outline);
    }

    ul, ol {
        padding-left: 2em;
    }

    li > ul,
    li > ol {
        padding-left: 1em;
    }

    dt {
        font-weight: bold;
    }

    dd {
        margin: 8px 0 8px 32px;
    }

    blockquote {
        & {
            margin: 16px 0;
            padding-left: 1em !important;
        }

        &::before {
            --theme-panel-outline: var(--theme-magenta-tertiary);
        }
    }

    pre {
        background-color: var(--theme-code-background);
        color: var(--theme-code-foreground);
        padding: 16px;
        border-radius: 3px;
    }

    strong {
        background-image: linear-gradient(transparent 80%, var(--theme-highlight-important) 80%);
    }

    em {
        background-image: linear-gradient(transparent 80%, var(--theme-highlight-emphasis) 80%);
        font-style: normal;
    }

    i:not([class]) {
        background-image: linear-gradient(transparent 80%, var(--theme-highlight-context) 80%);
        font-style: normal;
    }

    s, strike, del {
        text-decoration: line-through;
    }

    s, strike {
        text-decoration-thickness: 3px;
    }

    ins {
        text-decoration: none;
        background-image: linear-gradient(transparent 80%, var(--theme-highlight-insertion) 80%);
    }

    del {
        color: var(--theme-dark-tertiary);
    }

    abbr, dfn {
        text-decoration: underline dotted 2px;
        font-style: normal;
    }

    abbr {
        text-decoration-color: var(--theme-blue-secondary);
    }

    dfn {
        text-decoration-color: var(--theme-yellow-secondary);
    }

    q {
        &::before, &::after {
            display: inline;
            color: var(--theme-dark-tertiary);
        }

        &::before {
            content: "「";
        }

        &::after {
            content: "」";
        }
    }

    :not(pre) > code,
    :not(pre) > var,
    :not(pre) > samp {
        border: 1px solid var(--theme-light-tertiary);
        border-radius: 3px;
        background-color: var(--theme-light-secondary);
        padding: 1px 4px;
        margin: 0 2px;
    }

    :not(pre) > var {
        border-radius: 14px;
        font-style: normal;
    }

    :not(pre) > samp {
        border-radius: 8px 0 8px 0;
        font-style: normal;
    }

    :not(pre) > kbd {
        background-color: var(--theme-light-secondary);
        border: solid var(--theme-light-tertiary);
        border-width: 1px 3px 6px 3px;
        border-radius: 3px;
        padding: 1px 2px;
        margin: 0 2px;
    }

    p > img:only-child,
    p > a > img:only-child {
        margin: 16px 0;
        border-radius: 3px;
    }

    p:has(a > img:only-child, iframe) {
        a img {
            margin-bottom: 0;
        }

        a:has(img:only-child) + a,
        iframe + a {
            display: block;
            text-align: center;
        }
    }

    p > iframe.embed-card {
        display: block !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }

    .hatena-asin-detail {
        & {
            margin: 16px 0;
            padding: 16px;
            line-height: unset;
            box-shadow: unset;
            border-radius: 3px;
            border: 1px solid var(--theme-panel-outline);
            box-sizing: border-box;
        }
    }

    #avatar {
        text-align: center;
    }

    #avatar img {
        width: 256px;
        height: 256px;
    }

    .table-of-contents {
        & {
            border: 1px solid var(--theme-panel-outline);
            padding: 16px 0 16px 32px;
        }

        &::before {
            display: block;
            content: "目次";
            margin-left: -16px;
            margin-bottom: 16px;
        }
    }

    .hljs {
        & {
            overflow-x: scroll;
        }

        .hljs-attr,
        .hljs-attribute,
        .hljs-params,
        .hljs-title,
        .hljs-variable {
            font-weight: 700;
        }

        .hljs-built_in,
        .hljs-selector-class {
            color: #57B8FF;
        }

        .hljs-addition,
        .hljs-attribute,
        .hljs-keyword,
        .hljs-meta,
        .hljs-regexp,
        .hljs-title {
            color: #C0F354;
        }

        .hljs-string {
            color: #FFD43D;
        }

        .hljs-subst {
            color: var(--theme-code-foreground);
        }

        .hljs-comment {
            color: var(--theme-dark-tertiary);
        }
    }
}

body[class*="static-page-posts"],
body[class*="static-page-echos"],
body[class*="static-page-notes"] {
    #container .entry-content {
        ul {
            & {
                margin-bottom: 32px;
            }

            li {
                font-size: 14px;
            }

            li a {
                display: block;
                font-size: 18px;
                margin-top: 2px;
                margin-bottom: 16px;
            }
        }

        nav p {
            &:first-child {
                font-weight: bold;
            }

            & a {
                display: inline-block;
            }
        }
    }
}