/* ==========================================================
   Le Pont Design System
   ----------------------------------------------------------
   File    : components.css
   Project : がんばる中高生応援ノート
   Purpose : 再利用可能なUIコンポーネントのスタイル定義
   Author  : Le Pont Design
   Version : 1.0.0
   Updated : 2026-08-08
========================================================== */


/* ==========================================================
   Message Base
========================================================== */

.c-message{

    margin:var(--space-l) 0;

    padding:var(--space-m);

    border-radius:var(--radius-m);

}

.c-message__title{

    margin:0 0 var(--space-xs);

    font-size:var(--font-size-s);

    font-weight:700;

}

.c-message__text{

    margin:0;

}


/* ==========================================================
   Point
========================================================== */

.c-point{

    background:var(--color-primary-soft);

}

.c-point .c-message__title{

    color:var(--color-primary);

}


/* ==========================================================
   Check
========================================================== */

.c-check{

    background:var(--color-bg-light);

    border:1px solid var(--color-primary-light);

}

.c-check .c-message__title{

    color:var(--color-primary);

}


/* ==========================================================
   Note
========================================================== */

.c-note{

    background:var(--color-bg);

    border:1px solid var(--color-border);

}

.c-note .c-message__title{

    color:var(--color-text-light);

}


/* ==========================================================
   Warning
========================================================== */

.c-warning{

    background:var(--color-bg-light);

    border:1px solid var(--color-primary-light);

}

.c-warning .c-message__title{

    color:var(--color-primary);

}


/* ==========================================================
   Memo
========================================================== */

.c-memo{

    background:var(--color-bg);

    border-left:3px solid var(--color-primary-light);

}

.c-memo .c-message__title{

    color:var(--color-text-light);

}


/* ==========================================================
   Button
========================================================== */

.c-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:var(--space-xs) var(--space-m);

    border-radius:var(--radius-s);

    background:var(--color-primary);

    color:var(--color-white);

    font-size:var(--font-size-base);

    font-weight:700;

    line-height:1.5;

    text-decoration:none;

    transition:opacity .2s ease;

}

.c-button:hover{

    opacity:.7;

}

.c-button:focus-visible{

    outline:2px solid var(--color-primary);

    outline-offset:3px;

}


/* ==========================================================
   Button Secondary
========================================================== */

.c-button--secondary{

    background:transparent;

    border:1px solid var(--color-primary-light);

    color:var(--color-primary);

}


/* ==========================================================
   Card
========================================================== */

.c-card{
    overflow:hidden;
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-m);
    box-shadow:var(--shadow-s);
    transition:box-shadow .2s ease;
}

.c-card:hover{
    box-shadow:var(--shadow-m);
}


/* ==========================================================
   Card Image
========================================================== */

.c-card__image{
    display:block;
    width:100%;
    height:auto;
}


/* ==========================================================
   Card Body
========================================================== */

.c-card__body{
    padding:var(--space-m);
}


/* ==========================================================
   Card Category
========================================================== */

.c-card__category{
    margin:0 0 var(--space-xs);
    color:var(--color-primary);
    font-size:var(--font-size-xs);
    font-weight:700;
}


/* ==========================================================
   Card Title
========================================================== */

.c-card .c-card__title{
    margin:0 0 var(--space-s);
    padding:0;
    border:0;
    font-size:var(--font-size-l);
    line-height:var(--line-height-heading);
    color:var(--color-text);
    font-weight:700;
}

.c-card .c-card__title::before,
.c-card .c-card__title::after{
    display:none;
}


/* ==========================================================
   Card Text
========================================================== */

.c-card__text{
    margin:0;
    color:var(--color-text-light);
    font-size:var(--font-size-s);
    line-height:var(--line-height-base);
}


/* ==========================================================
   Card Link
========================================================== */

.c-card__link{
    position:relative;
    display:block;
    color:inherit;
    text-decoration:none;
    border-radius:inherit;
}

.c-card__link::after{
    content:"";
    position:absolute;
    inset:0;
    border:2px solid var(--color-primary);
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
}

.c-card__link:focus-visible::after{
    opacity:1;
}


/* ==========================================================
   Badge
========================================================== */

.c-badge{
    display:inline-flex;
    align-items:center;
    padding:5px 12px;
    border:1px solid var(--color-primary-light);
    border-radius:var(--radius-s);
    background:var(--color-primary-soft);
    color:var(--color-primary);
    font-size:var(--font-size-xs);
    font-weight:700;
    line-height:1.5;
}


/* ==========================================================
   Accordion
========================================================== */

.c-accordion{

    overflow:hidden;

    border:1px solid var(--color-border);

    border-radius:var(--radius-m);

    background:var(--color-bg);

}


/* ==========================================================
   Accordion Summary
========================================================== */

.c-accordion__summary{

    padding:var(--space-s) var(--space-m);

    color:var(--color-text);

    font-size:var(--font-size-base);

    font-weight:700;

    line-height:var(--line-height-heading);

    cursor:pointer;

    background:var(--color-primary-soft);

}


/* ==========================================================
   Accordion Content
========================================================== */

.c-accordion__content{

    padding:0 var(--space-m) var(--space-m);

}

.c-accordion__content p{

    margin:0;

}


/* ==========================================================
   Accordion Open State
========================================================== */

.c-accordion[open] .c-accordion__summary{

    border-radius:var(--radius-m) var(--radius-m) 0 0;

}


/* ==========================================================
   Accordion Summary Hover
========================================================== */

.c-accordion__summary:hover{

    background:var(--color-primary-soft);

}


/* ==========================================================
   Accordion Focus
========================================================== */

.c-accordion:has(.c-accordion__summary:focus-visible){

    box-shadow:0 0 0 2px var(--color-primary);

}

.c-accordion .c-accordion__summary:focus-visible{

    outline:none;

}


/* ========================================
   Check List
   ======================================== */

.c-check-list {
  list-style: none;
  background-color: #fff;
  margin: 0;
  padding: var(--space-m);
}

.c-check-list__item {
  display: flex;
  align-items: flex-start;
}

.c-check-list__item + .c-check-list__item {
  margin-top: var(--space-m);
}

.c-check-list__icon {
  flex: 0 0 auto;
}

.c-check-list__body {
  flex: 1;
}

.c-check-list__text {
  margin: 0;
  font-weight: 600;

  /* 項目名のラインマーカー */
  text-decoration-line: underline;
  text-decoration-color: color-mix(
    in srgb,
    var(--color-primary) 25%,
    transparent
  );
  text-decoration-thickness: 0.45em;
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
}

.c-check-list__note {
  margin: 0.25em 0 0;
  font-size: 0.9em;
  opacity: 0.7;
}


/* ==========================================================
   Check List Title
========================================================== */

.c-check-list .c-check-list__title {
  margin: 0 0 var(--space-s);
  padding: 0;
  border: 0;
}

.c-check-list .c-check-list__title::before,
.c-check-list .c-check-list__title::after {
  display: none;
}


/* ==========================================================
   SWELL STEP — Title / Body Spacing
========================================================== */

.swell-block-step__title + .swell-block-step__body {
  margin-top: 0.5em;
}