* {
    box-sizing:border-box
}

:root {
    color-scheme:light;
    --bg:#f6fbff;
    --text:#303d48;
    --muted:#7b8e9f;
    --blue:#8eb5d2;
    --border:#d6e6f5;
    --pale:#eaf3fb
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    font-size:14px;
    line-height:1.7
}

a {
    color:inherit;
    text-decoration:none
}

button {
    font:inherit
}

a,button {
    -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible {
    outline:3px solid #5798c8;
    outline-offset:4px
}

.site-header {
    height:80px;
    background:#fff;
    border-bottom:1px solid var(--border);
    padding:0 4.45%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.brand {
    font-size:21px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:12px;
    white-space:nowrap
}

.brand-icon {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:9px;
    background:#dceaf5;
    color:#88b1d1;
    font-size:24px
}

.brand-icon img {
    display:block;
    width:28px;
    height:28px;
    object-fit:contain
}

.account {
    display:flex;
    align-items:center;
    gap:10px
}

.avatar {
    display:grid;
    place-items:center;
    border-radius:50%;
    width:36px;
    height:36px;
    background:#e6dac8;
    color:#76614d
}

.account-name {
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.account form {
    border-left:1px solid var(--border);
    margin-left:14px;
    padding-left:24px
}

.logout {
    background:none;
    border:0;
    color:var(--muted);
    cursor:pointer;
    font-size:12px;
    padding:6px 0
}

.logout span {
    font-size:20px;
    vertical-align:middle
}

.top-content {
    max-width:1440px;
    padding:40px 4.45% 80px;
    margin:auto
}

.categories {
    display:flex;
    flex-wrap:wrap;
    gap:12px
}

.category {
    display:flex;
    align-items:center;
    gap:9px;
    background:white;
    border:1px solid var(--border);
    border-radius:24px;
    padding:6px 19px;
    line-height:24px;
    transition:background .15s
}

.category span {
    color:var(--muted);
    font-size:18px
}

.category.is-active {
    background:var(--pale);
    font-weight:600
}

.category.is-active span {
    color:var(--blue)
}

.category:hover {
    background:var(--pale)
}

.list-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 0 18px
}

.list-heading h1 {
    font-size:16px;
    margin:0;
    font-weight:600
}

.list-heading>span {
    font-size:12px;
    color:var(--muted)
}

.article-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px
}

.article-card {
    border:1px solid var(--border);
    border-radius:17px;
    background:#fff;
    min-height:132px;
    padding:28px 16px;
    display:flex;
    gap:16px;
    box-shadow:0 8px 26px #8eb5d209;
    transition:box-shadow .15s,transform .15s
}

.article-card:hover {
    box-shadow:0 8px 25px #8eb5d22a;
    transform:translateY(-2px)
}

.card-image-space {
    width:98px;
    flex-shrink:0
}

.card-content {
    min-width:0;
    flex:1
}

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

.badge {
    display:inline-block;
    background:var(--pale);
    color:#82adce;
    border-radius:6px;
    padding:2px 8px;
    font-size:11px;
    line-height:18px
}

.card-meta time,.detail-meta time {
    font-size:12px;
    color:#a0b8cd
}

.article-card h2 {
    font-size:16px;
    line-height:1.5;
    margin:5px 0 2px;
    font-weight:600
}

.article-card p {
    font-size:12px;
    line-height:1.7;
    margin:0;
    color:var(--muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.detail-content {
    max-width:800px;
    margin:36px auto 100px
}

.back-link {
    display:inline-flex;
    gap:12px;
    color:var(--muted);
    font-weight:600;
    margin-bottom:22px
}

.back-link span {
    font-size:24px;
    line-height:1.2
}

.detail-card {
    background:white;
    border:1px solid var(--border);
    border-radius:24px;
    overflow:hidden
}

.detail-hero {
    height:320px;
    background:#dfebf4
}

.detail-hero svg {
    width:100%;
    height:100%;
    display:block
}

.detail-body {
    padding:40px
}

.detail-meta {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap
}

.detail-body h1 {
    font-size:28px;
    line-height:1.5;
    margin:12px 0 32px;
    letter-spacing:.03em
}

.detail-body hr {
    border:0;
    border-top:1px solid var(--border);
    margin:0 0 28px
}

.memo-heading {
    font-size:14px;
    margin:0 0 12px;
    font-weight:600;
    display:flex;
    gap:10px;
    align-items:center
}

.memo-heading span {
    font-size:20px;
    color:var(--muted)
}

.memo {
    border-radius:14px;
    padding:20px;
    background:var(--bg);
    line-height:1.8;
    white-space:pre-wrap;
    overflow-wrap:anywhere
}

.login-page {
    min-height:100svh;
    display:grid;
    place-items:center;
    padding:32px 20px
}

.login-card {
    width:440px;
    max-width:100%;
    padding:46px 47px;
    border:1px solid var(--border);
    border-radius:24px;
    background:white;
    text-align:center;
    box-shadow:0 14px 26px #447aa33b
}

.mascot {
    width:110px;
    height:150px;
    object-fit:contain;
    display:block;
    margin:0 auto 8px
}

.login-card h1 {
    font-size:34px;
    font-weight:600;
    line-height:1.4;
    margin:0 0 4px;
    letter-spacing:-.025em
}

.tagline {
    color:var(--muted);
    letter-spacing:.1em;
    margin:0;
    font-size:14px
}

.login-divider {
    border-top:1px solid var(--border);
    margin:30px 0 28px
}

.login-instruction {
    font-size:12px;
    color:var(--muted);
    margin:0 0 18px
}

.google-button {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    border:1px solid var(--border);
    background:var(--pale);
    border-radius:12px;
    padding:13px 8px;
    font-size:14px;
    font-weight:500
}

.google-button:hover {
    background:#dcecf8
}

.google-mark {
    color:#84afd0;
    font-size:19px;
    font-weight:700
}

.privacy-note {
    font-size:11px;
    line-height:1.7;
    color:#a0b8cd;
    margin:30px 0 0
}

.login-error {
    font-size:12px;
    color:#a34444;
    background:#fff2f2;
    border-radius:8px;
    padding:10px;
    text-align:left
}

.empty-state {
    color:var(--muted)
}

@media(max-width:900px) {
    .card-image-space {
        width:36px
    }
    .detail-content {
        margin:30px 24px 70px
    }
    .detail-hero {
        height:auto;
        aspect-ratio:2.5
    }
}

@media(max-width:640px) {
    .site-header {
        height:70px;
        padding:0 20px
    }
    .brand {
        font-size:18px;
        gap:8px
    }
    .account {
        gap:6px
    }
    .avatar {
        width:28px;
        height:28px;
        font-size:12px
    }
    .account-name {
        display:none
    }
    .account form {
        margin-left:6px;
        padding-left:12px
    }
    .logout {
        font-size:11px
    }
    .top-content {
        padding:28px 20px 60px
    }
    .categories {
        gap:8px;
        margin-bottom:18px
    }
    .category {
        padding:5px 13px;
        font-size:12px;
        gap:6px
    }
    .list-heading {
        align-items:flex-start
    }
    .list-heading h1 {
        font-size:14px
    }
    .list-heading>span {
        font-size:10px;
        white-space:nowrap
    }
    .article-grid {
        grid-template-columns:1fr;
        gap:12px
    }
    .article-card {
        padding:22px 18px;
        min-height:125px
    }
    .card-image-space {
        display:none
    }
    .article-card p {
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical
    }
    .detail-content {
        margin:24px 16px 60px
    }
    .detail-card {
        border-radius:18px
    }
    .detail-body {
        padding:24px 20px
    }
    .detail-meta {
        gap:8px
    }
    .detail-body h1 {
        font-size:23px;
        margin-bottom:24px
    }
    .memo {
        padding:16px;
        font-size:13px
    }
    .login-card {
        padding:36px 24px
    }
    .login-card h1 {
        font-size:30px
    }
    .google-button {
        font-size:13px
    }
}


.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    vertical-align: middle;
    color: var(--muted);
}
.category.is-active .icon {
    color: var(--blue);
}
.google-mark {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

[hidden] { display:none !important }
.article-form-page { background:#344957 }
.article-form-page .back-link,.article-form-page .sample-notice { color:#d6e6f5 }
.list-actions { display:flex; justify-content:flex-end; margin:24px 0 18px }
.button { display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border:1px solid var(--border); border-radius:12px; background:white; color:var(--text); cursor:pointer; font:inherit }
.button:hover { background:var(--pale) }
.button-primary { background:var(--pale); border-color:#b6d1e5; font-weight:600 }
.button-danger { color:#a34444; border-color:#eed0d0; background:#fff8f8 }
.button-danger:hover { background:#ffecec }
.detail-actions { display:flex; justify-content:flex-end; gap:12px; margin:0 0 18px }
.sample-notice { color:var(--muted); font-size:12px; margin:0 0 20px }
.success-notice { padding:12px 16px; background:var(--pale); border:1px solid var(--border); border-radius:12px }
.form-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px }
.form-field { margin-bottom:24px }
.form-field label { display:block; font-weight:600; margin-bottom:8px }
.form-field input:not([type=file]):not([type=checkbox]),.form-field select,.form-field textarea { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--bg); color:var(--text); font:inherit }
.form-field textarea { resize:vertical; min-height:120px }
.form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible { outline:2px solid #5798c8; outline-offset:2px }
.form-field input[type=file] { max-width:100%; font:inherit }
.form-field input::file-selector-button { padding:9px 14px; border:1px solid var(--border); border-radius:10px; background:var(--pale); color:var(--text); font:inherit; cursor:pointer; margin-right:12px }
.field-help { color:var(--muted); font-size:12px; margin:0 0 12px }
.field-required { font-size:11px; color:var(--muted); margin-left:8px; font-weight:400 }
.form-actions { display:flex; flex-wrap:wrap; gap:12px; border-top:1px solid var(--border); padding-top:24px }
.form-actions>.button-danger { margin-left:auto }
.photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:14px }
.photo-item { position:relative; min-width:0 }
.photo-item img { width:100%; aspect-ratio:1.25; object-fit:cover; border-radius:12px; display:block; border:1px solid var(--border) }
.photo-remove { position:absolute; bottom:8px; right:8px; background:white; border:1px solid #eed0d0; border-radius:8px; padding:4px 10px; color:#a34444; cursor:pointer }
.photo-item.is-removed img { opacity:.35 }
.form-field .photo-remove { margin:0; font-size:12px; font-weight:400 }
.detail-photos { display:grid; gap:12px; padding:16px 16px 0 }
.detail-photos img { display:block; width:100%; max-height:480px; object-fit:contain; border-radius:12px; background:var(--bg) }
.experience-heading { margin-top:28px }
.delete-dialog { width:440px; max-width:calc(100% - 32px); border:1px solid var(--border); border-radius:20px; padding:28px; color:var(--text) }
.delete-dialog::backdrop { background:#303d4866 }
.delete-dialog h2 { font-size:18px; margin-top:0 }
@media(max-width:640px) {
    .form-columns { grid-template-columns:1fr; gap:0 }
    .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
    .button { padding:10px 16px }
    .list-actions { margin-top:12px }
}