/* =========================================================
   町子屋保護者ポータル スタイル
   ブランドカラーは :root の --brand を変更すれば全体に反映
   ========================================================= */
:root {
    --brand: #1b8dc5;        /* 町子屋ブルー (ロゴに合わせて微調整可) */
    --brand-dark: #12719f;
}

/* ===== 画面共通スタイル ===== */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #f0f5ff;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    box-sizing: border-box
}

body {
    display: flex;
    flex-direction: column
}

*,
*:before,
*:after {
    box-sizing: inherit
}

/* --- サイトヘッダー --- */
.site-header {
    flex: 0 0 auto;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
    z-index: 10
}

.site-header-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px
}

.brand-badge {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

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

.brand-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2
}

/* --- メイン領域 (ヘッダー下でスクロール) --- */
#app {
    flex: 1 1 auto;
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

/* --- 検索ボックス --- */
.search-container {
    max-width: 400px;
    margin: 60px auto;
    background: #fff;
    padding: 30px 35px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .12);
    text-align: center
}

.search-container h2 {
    font-size: 1.5em;
    color: #333;
    margin: 0 0 25px
}

.search-container input {
    width: 100%;
    padding: 12px 15px;
    margin: 0 0 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    transition: all .2s
}

.search-container input::placeholder {
    color: #aaa
}

.search-container input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .15rem rgba(27, 141, 197, .25);
    outline: 0
}

.search-container button {
    width: 100%;
    padding: 12px 15px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background .2s
}

.search-container button:hover {
    background: var(--brand-dark)
}

.search-container button:active {
    background: #0d5a80
}

.search-container button:disabled {
    background: #9cc7de;
    cursor: default
}

#search-status {
    margin-top: 20px;
    text-align: center;
    color: #dc3545;
    font-weight: bold;
    min-height: 1.5em
}

#search-status.loading {
    color: var(--brand-dark)
}

#search-status.loading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid #b6d8ea;
    border-top-color: var(--brand);
    border-radius: 50%;
    vertical-align: -2px;
    animation: mc-spin .8s linear infinite
}

@keyframes mc-spin {
    to {
        transform: rotate(360deg)
    }
}

/* --- 結果画面ツールバー --- */
.result-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 10px
}

.back-btn {
    background: #fff;
    color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 5px;
    padding: 6px 14px;
    font-size: .9em;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s
}

.back-btn:hover {
    background: var(--brand);
    color: #fff
}

/* --- タイトル --- */
.page-title {
    border: 3px solid #333;
    background: #fff;
    border-radius: 8px;
    padding: .6em 1em;
    margin: 0 0 25px;
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
    color: #333;
    letter-spacing: .05em
}

/* --- タブ&コンテンツ --- */
.container {
    padding: 20px
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 20px
}

.tab {
    flex: 1 1 auto;
    margin: .3em;
    padding: .8em 1.2em;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 1em;
    text-align: center;
    font-weight: bold;
    transition: opacity .3s, box-shadow .3s, transform .2s;
    background: #666
}

.tab:hover:not(.active) {
    opacity: .8
}

.tab.active {
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);
    transform: scale(1.03) translateY(-1px);
    opacity: 1;
    z-index: 1
}

.tab-content {
    display: none;
    padding: 1.5em;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    margin: 0 0 20px
}

.tab-content.active {
    display: block
}

/* --- 色分け --- */
.tab.kokugo {
    background: #e74c3c
}

.tab.shakai {
    background: #9b59b6
}

.tab.sansu {
    background: #3498db
}

.tab.rika {
    background: #f1c40f;
    color: #fff
}

.tab.eigo {
    background: #2ecc71;
    color: #fff
}

.tab.commu {
    background: #40e0d0
}

.tab.furikae {
    background: #FF7F50
}

.tab-content.kokugo {
    background: #fdecea
}

.tab-content.shakai {
    background: #f5eef8
}

.tab-content.sansu {
    background: #ebf5fb
}

.tab-content.rika {
    background: #fff9e6
}

.tab-content.eigo {
    background: #e8f8f5
}

.tab-content.commu {
    background: #e0ffff
}

.tab-content.furikae {
    background: #FFF5EE
}

/* --- レイアウト共通 --- */
.furikae-table {
    border-collapse: collapse;
    margin: 0 auto
}

.furikae-table,
.furikae-table td {
    border: 2px solid #ccc
}

.furikae-table td {
    padding: 10px;
    text-align: center;
    font-size: 1.2em
}

.furikae-buttons {
    text-align: center;
    margin-top: 20px
}

.furikae-buttons a {
    display: inline-block;
    margin: 0 10px;
    padding: 10px 20px;
    background: #3498db;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background .3s
}

.furikae-buttons a:hover {
    background: #2980b9
}

.commu-detail-table,
.commu-summary-table {
    border-collapse: collapse;
    margin: 10px auto;
    width: auto
}

.commu-detail-table th,
.commu-detail-table td,
.commu-summary-table th,
.commu-summary-table td {
    border: 2px solid #ccc;
    padding: 8px;
    text-align: center;
    font-size: .9em
}

.record-box {
    background: #fff;
    border: 1px solid #bdc3c7;
    border-radius: 5px;
    padding: .8em;
    margin: 0 0 1em;
    box-shadow: 0 0 5px rgba(0, 0, 0, .05)
}

.date-box {
    background: #34495e;
    color: #fff;
    padding: .5em;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 .5em
}

.item {
    margin: 0 0 .5em
}

.item-title {
    font-weight: bold;
    color: #2c3e50;
    text-decoration: underline;
    margin: 0 0 .2em
}

.item-title::before {
    content: "◉ "
}

.item-content {
    padding-left: .5em;
    font-size: .85em
}

/* --- グラフコンテナ --- */
.subject-chart-container,
.commu-chart-container {
    width: 100%;
    overflow: hidden;
    margin: 1em 0;
    height: 400px
}

.subject-chart-container svg,
.commu-chart-container svg {
    display: block;
    width: 100% !important;
    height: 100% !important
}

/* --- ドロップダウン --- */
.subject-dropdown-container {
    text-align: center;
    margin: 0 0 20px
}

.subject-dropdown {
    display: inline-block;
    margin: 0 auto;
    padding: .8em 1.2em;
    border: none;
    border-radius: 5px;
    background: #3498db;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer
}

.section-title {
    font-weight: bold;
    margin: 1.2em 0 .8em;
    color: #2c3e50
}

.section-content {
    font-size: .8em;
    padding-left: 1.5em
}

@media(max-width:768px) {
    .search-container {
        margin: 20px 15px;
        padding: 20px
    }

    .search-container h2 {
        font-size: 1.4em;
        margin: 0 0 20px
    }

    .search-container input,
    .search-container button {
        padding: 10px 12px;
        font-size: .95rem
    }

    .tab {
        font-size: .8em;
        padding: .7em .5em;
        margin: .2em .1em
    }

    .subject-chart-container,
    .commu-chart-container {
        height: 300px
    }
}

@media(max-width:480px) {
    .brand-title {
        font-size: .95rem
    }

    .brand-badge {
        width: 34px;
        height: 34px
    }

    .brand-badge img {
        width: 27px;
        height: 27px
    }

    .tab {
        font-size: .7em;
        padding: .6em .3em
    }

    .subject-chart-container,
    .commu-chart-container {
        height: 250px
    }
}

.hidden {
    display: none !important
}