/* ========== LAYOUT（ページ固有） ========== */
.l-bookmark{
  --gap: 16px;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 12px 48px;
  color: var(--color-text);
  background: transparent;
}

/* リスト */
.p-bookmark-list{
  display:grid; 
  gap: 14px; 
  margin: 10px auto; 
  padding:0; 
  list-style:none;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .p-bookmark-list{ grid-template-columns: 1fr; }
}
@media (min-width: 900px){
  .p-bookmark-list{ grid-template-columns: 1fr; }
}

/* ========== COMPONENTS ========== */
.c-field{display:inline-flex; align-items:center}
.c-field--search{min-width: clamp(240px, 40vw, 420px)}
.c-input{
  border:1px solid var(--color-line); background:#fff; color:#333;
  border-radius: 9999px; padding: 10px 14px; font-size: 14px;
  outline: none;
}
.c-input:focus{box-shadow:0 0 0 2px rgba(13,59,145,.12); border-color: var(--color-accent)}
.c-input--search{padding-left: 14px}

.c-chipset{display:flex; gap:6px; flex-wrap:wrap}
.c-chip{
  border:1px solid var(--color-accent);
  color: var(--color-accent);
  background: var(--color-chip);
  padding: 6px 10px;
  border-radius: 9999px;
  font-size: 13px;
  cursor: pointer;
}
.c-chip.is-active{color:#fff; background: var(--color-accent)}

.c-button{
  border:1px solid var(--color-line); background:#fff; color:#333;
  border-radius: 9999px; padding: 8px 12px; font-size: 13px; cursor:pointer;
  transition: background .15s, border-color .15s;
}
.c-button:hover{background:#fafafa; border-color:#d0d0d0}
.c-button--ghost{background:#fff}

/* カード（記事） */

/* 記事アイテム */
.p-bookmark-card{
    padding: 10px; 
    border-bottom: 1px solid #ccc;
}
.p-article__link{
    display:contents; text-decoration:none; color:inherit
}
.p-article__thumb{
    width: 128px; height: 80px; overflow:hidden; background:#f4f4f4;
}
.p-article__thumb img{
    width:100%; height:100%; object-fit:cover; display:block
}
.p-article__thumb--empty{
    background:linear-gradient(180deg,#f8f8f8,#eee)
}

.p-article__body{display:flex; gap: 6px; min-width:0}
.p-article__site{font-size:12px;margin:0}
.c-tag--site{background:#fff0f0; color:#a33; border:1px solid #f2caca}

.p-article__breadcrumb{display:flex; gap:8px; flex-wrap:wrap; font-size:12px; color:#555; list-style:none; margin:0; padding:0}
.p-article__breadcrumb li{position:relative; padding-left: 0}
.p-article__breadcrumb li+li::before{content:"›"; margin:0 4px; color:#aaa}

.p-article__title{
  font-size: clamp(14px, 1.9vw, 16px); font-weight:700; line-height:1.45;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.p-article__date{font-size:12px; color:#777}

.p-article__ctrl{display:flex; align-items:center; gap:8px}

.p-mybookmark .p-section__meta {
    text-align: right;
}

/* レスポンシブ調整 */
@media (max-width: 900px){
    .p-bookmark-card{grid-template-columns: 96px 1fr; grid-auto-flow: row; align-items: start}
    .p-article__ctrl{grid-column: 1 / -1; justify-content: flex-end; padding-right: 2px}
    .p-article__thumb{width:96px;height:64px}
    .p-section__count {
        display: block;
        text-align: center;
    }
}

.u-visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; padding:0;
}

ul.bookmark-item-list > li:first-child {
    border-top: 1px solid #ccc;
}

.bookmark-item {
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.bookmark-date {
    width: 140px;
    color: #666;
    font-size: 13px;
    flex-shrink: 0;
}

.bookmark-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    height: 28px;
    background: #eee;
    font-size: 12px;
    padding: 0 8px;
    border-radius: 14px;
    white-space: nowrap;
    text-decoration: underline;
}

/* 横並び用flexをグローバルに */
.bookmark-flex-row {
    display: flex;
    width: 100%;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}
.bookmark-label-col {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.bookmark-title-col {
    /*flex: 1 1 0;*/
    min-width: 0;
    max-width: 370px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: visible;
}
.bookmark-title {
    color: #0066cc;
    text-decoration: none;
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.bookmark-title {
    color: #0066cc;
    text-decoration: underline;
}

.bookmark-title:hover {
    text-decoration: underline;
}

.bookmark-new {
    border: 1px solid #c00;
    color: #c00;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
}

.author-date-row {
    display: flex;
    gap: 16px;
    align-items: center;
}
/* author-date-row: 388px以下で2段に */
@media (max-width: 388px) {
    .author-date-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .author-date-row .author,
    .author-date-row .date {
        display: block;
        width: 100%;
        text-align: left;
    }
}

ul.p-bookmark-list li.p-bookmark-card div.body div.image img {
    max-width: 150px;
    max-height: 113px;
    flex-shrink: 0;
}

ul.p-bookmark-list li.p-bookmark-card div.body div.image p {
    margin: 0;
}

.p-bookmark-card .body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.p-bookmark-card .image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.p-bookmark-card .text {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.p-bookmark-card .text a {
    color: #0D3B91;
    text-decoration: underline;
}

.p-bookmark-card .sitename .label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    margin-bottom: 4px;
    border-radius: 2px;
    width: fit-content;
    height: 20px;
}

.p-bookmark-card .breadcrumb {
    display: none; /* パンくずは非表示にするならここで */
}

.p-bookmark-card .category {
    display: none; /* カテゴリラベル非表示ならここで */
}

.p-bookmark-card .title {
    margin: 4px 0;
}

.p-bookmark-card .title a {
    font-weight: bold;
    font-size: 15px;
    color: #0D3B91;
    /*text-decoration: none;*/
}

.p-bookmark-card .title a:hover {
    text-decoration: underline;
}

.p-bookmark-card .date {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
    text-align: left;
}

.p-bookmark-card .author {
    font-size: 13px;
    color: #0D3B91;
    margin-top: 6px;
    text-align: left;
}

section.p-mybookmark .c-card.c-card--empty {
    margin: 2em 0;
    text-align: center;
    padding: 2em;
    border: 1px solid #CCC;
    background: #fafbfc;
}