/* =========================
   Notebook Component v2
========================= */

.notebook-card {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #fffefb 0%,
            #fffaf4 45%,
            #fff8ef 100%
        );

    border: 1px solid #eadcc8;
    border-radius: 24px;

    box-shadow:
        0 8px 18px rgba(97,73,43,.05),
        0 18px 42px rgba(97,73,43,.10);
}

/* =========================
   링 노트 여백
========================= */

.notebook-card.with-rings{
    padding-left:38px;
}

/* =========================
   세로 여백선
========================= */

.notebook-card::before{

    content:"";

    position:absolute;

    top:0;
    bottom:0;

    left:54px;

    width:2px;

    background:#efd8b5;

    opacity:.7;
}

/* =========================
   링
========================= */

.notebook-rings{

    position:absolute;

    top:32px;
    left:-1px;

    display:flex;
    flex-direction:column;

    gap:18px;

    z-index:2;
}

.notebook-rings span{

    width:24px;
    height:15px;

    border-radius:0 16px 16px 0;

    border:2px solid #d8b98c;
    border-left:none;

    background:#fffefb;

    box-shadow:
        inset 0 1px 0 white,
        0 2px 4px rgba(0,0,0,.05);
}

/* =========================
   공책 줄
========================= */

.notebook-lines{

    background:

        repeating-linear-gradient(

            to bottom,

            transparent 0,

            transparent 39px,

            rgba(233,220,198,.75) 40px

        );
}

/* =========================
   내용 여백
========================= */

.notebook-content{

    padding-left:26px;
}

/* =========================
   종이 질감
========================= */

.notebook-soft-bg{

    background:
        radial-gradient(
            rgba(255,255,255,.35),
            rgba(255,255,255,0)
        ),
        linear-gradient(
            180deg,
            #fffefb,
            #fff9f1
        );
}