/* ==========================================================================
   B-Rings Site Audit  v2 - Card Layout
   Design: MUJI Style
   ========================================================================== */

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{font-size:16px;-webkit-text-size-adjust:100%}

body{
    font-family:"Noto Sans JP","Helvetica Neue",Arial,sans-serif;
    color:#333;
    background:#FAFAF8;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}

a{color:#8B7E66;text-decoration:none}
a:hover{text-decoration:underline}

/* --- Header --- */
.header{
    padding:36px 24px 28px;
    border-bottom:1px solid #E0DDD5;
}
.header__inner{max-width:960px;margin:0 auto}
.header__title{font-size:1.5rem;font-weight:700;letter-spacing:.03em}
.header__title i{color:#8B7E66;margin-right:6px}
.header__sub{font-size:.9rem;color:#999;margin-top:4px}

/* --- Main --- */
.main{max-width:960px;margin:0 auto;padding:28px 24px 64px}

.meta{font-size:.88rem;color:#aaa;margin-bottom:24px}

.empty-state{text-align:center;padding:60px 0;color:#bbb}
.empty-state i{font-size:2rem;display:block;margin-bottom:10px}

/* --- KPI --- */
.kpi{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:28px;
}
.kpi__item{
    text-align:center;
    padding:18px 12px;
    background:#fff;
    border:1px solid #E0DDD5;
    border-radius:4px;
}
.kpi__num{display:block;font-size:2rem;font-weight:700;line-height:1.2}
.kpi__label{display:block;font-size:.85rem;color:#999;margin-top:4px}

.kpi__item--a{border-left:3px solid #D4544E}
.kpi__item--a .kpi__num{color:#D4544E}
.kpi__item--b{border-left:3px solid #C9A94E}
.kpi__item--b .kpi__num{color:#C9A94E}
.kpi__item--c{border-left:3px solid #6B9E6B}
.kpi__item--c .kpi__num{color:#6B9E6B}

/* --- Toolbar / Filter --- */
.toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}
.filter{display:flex;gap:6px}

.filter__btn{
    padding:7px 16px;
    border:1px solid #E0DDD5;
    border-radius:4px;
    background:#fff;
    font-size:.9rem;
    font-family:inherit;
    color:#666;
    cursor:pointer;
    transition:all .15s ease;
    min-height:40px;
}
.filter__btn:hover{border-color:#8B7E66}
.filter__btn--active{background:#333;color:#fff;border-color:#333}
.filter__btn--a.filter__btn--active{background:#D4544E;border-color:#D4544E}
.filter__btn--b.filter__btn--active{background:#C9A94E;border-color:#C9A94E}
.filter__btn--c.filter__btn--active{background:#6B9E6B;border-color:#6B9E6B}

.sort-btn{
    padding:7px 16px;
    border:1px solid #E0DDD5;
    border-radius:4px;
    background:#fff;
    font-size:.88rem;
    font-family:inherit;
    color:#666;
    cursor:pointer;
    transition:all .15s ease;
    min-height:40px;
}
.sort-btn:hover{border-color:#8B7E66;color:#333}
.sort-btn--active{background:#8B7E66;color:#fff;border-color:#8B7E66}
.sort-btn i{margin-right:4px}

.filter__count{
    display:inline-block;
    background:rgba(255,255,255,.25);
    border-radius:10px;
    padding:0 7px;
    font-size:.8rem;
    margin-left:4px;
}

/* --- Card List --- */
.card-list{display:flex;flex-direction:column;gap:10px}

/* --- Card --- */
.card{
    display:flex;
    gap:16px;
    background:#fff;
    border:1px solid #E0DDD5;
    border-radius:4px;
    padding:18px 20px;
    transition:box-shadow .15s ease;
}
.card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}

/* ランクストライプ */
.card--a{border-left:4px solid #D4544E}
.card--b{border-left:4px solid #C9A94E}
.card--c{border-left:4px solid #6B9E6B}

/* ランクバッジ */
.card__rank{flex-shrink:0;display:flex;align-items:flex-start;padding-top:2px}

.rank{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;height:38px;
    border-radius:4px;
    font-weight:700;
    font-size:1rem;
    color:#fff;
}
.rank--a{background:#D4544E}
.rank--b{background:#C9A94E}
.rank--c{background:#6B9E6B}

/* ボディ */
.card__body{flex:1;min-width:0}

.card__head{margin-bottom:8px}
.card__name{font-size:1.05rem;font-weight:600;line-height:1.4}
.card__url{
    display:inline-block;
    font-size:.82rem;
    color:#aaa;
    word-break:break-all;
    margin-top:2px;
}
.card__url i{font-size:.7rem;margin-left:2px}

/* タグ */
.card__tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}

.tag{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 10px;
    border-radius:3px;
    font-size:.82rem;
    font-weight:500;
    line-height:1.5;
    white-space:nowrap;
}
.tag--green{background:#EDF7ED;color:#3D7A3D}
.tag--yellow{background:#FFF8E1;color:#9A7B2C}
.tag--red{background:#FDEEEE;color:#C0392B}
.tag--muted{background:#F0EDE6;color:#888}

/* 課題 */
.card__issues{
    border-top:1px solid #F0EDE6;
    padding-top:8px;
    margin-top:4px;
}
.card__issue{
    font-size:.88rem;
    color:#666;
    line-height:1.6;
    padding:2px 0;
}
.card__issue i{
    color:#C0B9A8;
    font-size:.75rem;
    margin-right:4px;
}

/* --- Excluded --- */
.excluded{margin-top:40px;border-top:1px solid #E0DDD5;padding-top:24px}

.excluded__toggle{
    font-size:.92rem;
    color:#999;
    cursor:pointer;
    list-style:none;
    padding:8px 0;
}
.excluded__toggle::-webkit-details-marker{display:none}
.excluded__toggle i{margin-right:4px}

.excluded__list{margin-top:12px}
.excluded__item{
    display:flex;
    gap:12px;
    padding:6px 0;
    border-bottom:1px solid #F5F4F0;
    font-size:.88rem;
}
.excluded__name{flex-shrink:0;width:200px;color:#888}
.excluded__url{color:#bbb;word-break:break-all;font-size:.88rem}

/* --- Tooltip (用語注釈) --- */
.tag[data-tip]{position:relative;cursor:help}
.tag[data-tip]::after{
    content:attr(data-tip);
    position:absolute;
    bottom:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%);
    background:#333;
    color:#fff;
    font-size:.8rem;
    font-weight:400;
    line-height:1.6;
    padding:10px 14px;
    border-radius:4px;
    white-space:normal;
    width:max-content;
    max-width:300px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:10;
}
.tag[data-tip]::before{
    content:'';
    position:absolute;
    bottom:calc(100% + 2px);
    left:50%;
    transform:translateX(-50%);
    border:4px solid transparent;
    border-top-color:#333;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:10;
}
.tag[data-tip]:hover::after,
.tag[data-tip]:hover::before,
.tag[data-tip]:focus::after,
.tag[data-tip]:focus::before{
    opacity:1;
}

/* --- Glossary (用語ガイド) --- */
.glossary{
    margin-top:40px;
    border-top:1px solid #E0DDD5;
    padding-top:24px;
}
.glossary__toggle{
    font-size:.95rem;
    color:#999;
    cursor:pointer;
    list-style:none;
    padding:8px 0;
}
.glossary__toggle::-webkit-details-marker{display:none}
.glossary__toggle i{margin-right:4px}

.glossary__body{margin-top:16px}

.glossary__item{
    display:flex;
    gap:16px;
    padding:14px 0;
    border-bottom:1px solid #F0EDE6;
    align-items:flex-start;
}
.glossary__term{
    flex-shrink:0;
    width:180px;
    font-size:.95rem;
    font-weight:600;
    color:#333;
}
.glossary__desc{
    flex:1;
    font-size:.9rem;
    color:#666;
    line-height:1.7;
}

/* --- Footer --- */
.footer{
    padding:24px;
    text-align:center;
    font-size:.72rem;
    color:#ccc;
    border-top:1px solid #E0DDD5;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media(max-width:768px){
    html{font-size:14px}
    .header{padding:20px 16px 16px}
    .header__title{font-size:1.1rem}
    .main{padding:20px 16px 48px}

    .kpi{grid-template-columns:repeat(2,1fr);gap:8px}
    .kpi__item{padding:14px 10px}
    .kpi__num{font-size:1.5rem}

    .filter__btn{padding:6px 12px;font-size:.78rem;min-height:36px}

    .card{flex-direction:column;gap:8px;padding:14px 16px}
    .card__rank{display:flex;align-items:center;gap:10px}
    .rank{width:28px;height:28px;font-size:.8rem}

    .excluded__item{flex-direction:column;gap:2px}
    .excluded__name{width:auto}

    .tag[data-tip]::after{left:0;transform:none;max-width:220px}
    .tag[data-tip]::before{left:16px;transform:none}

    .glossary__item{flex-direction:column;gap:4px}
    .glossary__term{width:auto}
}

@media(max-width:480px){
    .kpi{grid-template-columns:1fr 1fr}
    .card__tags{gap:4px}
    .tag{font-size:.65rem;padding:2px 6px}
}