@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700;800&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css");

@font-face {
    font-family: "NeoDunggeunmo";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.3/NeoDunggeunmo.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.raw-widget,
.raw-widget * {
    box-sizing: border-box;
    letter-spacing: 0;
}

.raw-widget {
    --raw-ink: #23232b;
    --raw-paper: #ebe8df;
    --raw-panel: #fffdf7;
    --raw-line: rgba(35, 35, 43, 0.16);
    --raw-muted: #77746d;
    --raw-violet: #5b4b9a;
    --raw-yellow: #e8b84b;
    --raw-blue: #4b80c0;
    --raw-green: #4ea67c;
    --raw-red: #d94f56;
    --raw-accent-active: var(--raw-user-accent, var(--raw-yellow));
    width: min(100%, var(--raw-widget-width, 500px));
    max-width: 100%;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--raw-line);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(35, 35, 43, 0.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(35, 35, 43, 0.035) 1px, transparent 1px),
        var(--raw-panel);
    background-size: 18px 18px;
    color: var(--raw-ink);
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
    box-shadow: 0 12px 30px rgba(21, 23, 28, 0.07);
    overflow: hidden;
}

.raw-widget a {
    color: inherit;
    text-decoration: none;
}

.raw-widget__head {
    margin-bottom: 12px;
}

.raw-widget__head p {
    margin: 0 0 8px;
    color: var(--raw-accent-active);
    font-family: "NeoDunggeunmo", "IBM Plex Sans KR", sans-serif;
    font-size: 12px;
}

.raw-widget__head h2 {
    margin: 0;
    color: var(--raw-ink);
    font-family: "IBM Plex Sans KR", Pretendard, sans-serif;
    font-size: clamp(20px, 2.5vw, 26px);
    line-height: 1.2;
}

.raw-widget__list {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: raw-rank;
}

.raw-widget__list li {
    min-width: 0;
    counter-increment: raw-rank;
}

.raw-widget__list a {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--raw-line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.72);
}

.raw-widget__list a.raw-widget__item--thumb {
    grid-template-columns: auto 72px minmax(0, 1fr) auto;
}

.raw-widget__tag {
    max-width: 100%;
    min-width: 36px;
    display: inline-grid;
    place-items: center;
    padding: 3px 7px;
    border-radius: 5px;
    color: #15151d;
    background: var(--raw-accent-active);
    font-family: "NeoDunggeunmo", "IBM Plex Sans KR", sans-serif;
    font-size: 11px;
}

.raw-widget__tag::before {
    content: counter(raw-rank, decimal-leading-zero);
}

.raw-widget--today .raw-widget__tag::before,
.raw-widget--market .raw-widget__tag::before {
    content: none;
}

.raw-widget__thumb {
    max-width: 100%;
    width: 72px;
    height: 54px;
    display: block;
    overflow: hidden;
    border: 1px solid var(--raw-line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
}

.raw-widget__thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.raw-widget__body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.raw-widget__body strong,
.raw-widget__list a > strong {
    min-width: 0;
    overflow: hidden;
    color: var(--raw-ink);
    font-family: "IBM Plex Sans KR", Pretendard, sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.raw-widget__summary {
    overflow: hidden;
    color: var(--raw-muted);
    font-size: 12px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.raw-widget__meta,
.raw-widget__list a > em {
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--raw-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.raw-widget__meta time,
.raw-widget__list a > em time {
    color: color-mix(in srgb, var(--raw-muted) 80%, var(--raw-ink) 20%);
}

.raw-widget__empty {
    margin: 0;
    padding: 18px 12px;
    border: 1px dashed var(--raw-line);
    border-radius: 7px;
    color: var(--raw-muted);
    text-align: center;
}

.raw-widget--today {
    color: #f7f4ec;
    background:
        linear-gradient(90deg, rgba(232, 184, 75, 0.15) 1px, transparent 1px),
        linear-gradient(0deg, rgba(232, 184, 75, 0.12) 1px, transparent 1px),
        linear-gradient(135deg, rgba(47, 125, 109, 0.72) 0 34%, #15151d 34% 100%);
    background-size: 22px 22px, 22px 22px, auto;
}

.raw-widget--today .raw-widget__head h2,
.raw-widget--today .raw-widget__body strong,
.raw-widget--today .raw-widget__list a > strong {
    color: #fff;
}

.raw-widget--today .raw-widget__list a {
    border-color: rgba(247, 244, 236, 0.18);
    background: rgba(255, 255, 255, 0.08);
}

.raw-widget--today .raw-widget__summary,
.raw-widget--today .raw-widget__meta,
.raw-widget--today .raw-widget__list a > em {
    color: rgba(247, 244, 236, 0.7);
}

.raw-widget--hot {
    border-left: 8px solid #6fc6dc;
}

.raw-widget--hot .raw-widget__tag {
    color: #3389a0;
    background: rgba(111, 198, 220, 0.18);
}

.raw-widget--market {
    border-color: rgba(217, 79, 86, 0.35);
    background:
        linear-gradient(90deg, rgba(217, 79, 86, 0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(217, 79, 86, 0.035) 1px, transparent 1px),
        #fffaf8;
    background-size: 18px 18px;
}

.raw-widget--market .raw-widget__tag {
    color: #fff;
    background: var(--raw-red);
}

.raw-widget--market .raw-widget__list a {
    border-color: rgba(217, 79, 86, 0.28);
    background: rgba(255, 255, 255, 0.68);
}

.raw-widget--price {
    border-left: 8px solid var(--raw-blue);
}

.raw-widget--price .raw-widget__tag {
    color: #fff;
    background: var(--raw-blue);
}

.raw-widget--guide {
    border-left: 8px solid var(--raw-green);
}

.raw-widget--guide .raw-widget__tag {
    color: #fff;
    background: var(--raw-green);
}

@media (max-width: 640px) {
    .raw-widget {
        width: 100%;
        padding: 12px;
    }

    .raw-widget__list a {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        padding: 9px;
    }

    .raw-widget__list a.raw-widget__item--thumb {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .raw-widget__item--thumb .raw-widget__tag {
        display: none;
    }

    .raw-widget__thumb {
        width: 58px;
        height: 46px;
    }

    .raw-widget__meta,
    .raw-widget__list a > em {
        grid-column: 2;
        white-space: normal;
    }

    .raw-widget__body strong,
    .raw-widget__list a > strong {
        font-size: 13px;
    }
}