/* ==========================================================================
   d-rooming Wallpaper Simulator — Product Link Card (.drs-lc)
   Design: image left / info right / full-width bottom button.
   All styles scoped under .drs-lc-group. Palette overridable via
   custom properties on .drs-lc-group.
   ========================================================================== */

.drs-lc-group {
    --drs-lc-white:    #ffffff;
    --drs-lc-line:     #ebe7df;
    --drs-lc-line-d:   #d8d2c4;
    --drs-lc-ink:      #2a2622;
    --drs-lc-ink-soft: #6b635a;
    --drs-lc-ink-mute: #9a9184;
    --drs-lc-accent:   #a8603c;
    --drs-lc-accent-d: #8c4d2e;

    display: block;
    margin: 24px 0;
}
.drs-lc-group, .drs-lc-group * { box-sizing: border-box; }

.drs-lc {
    display: flex;
    flex-direction: column;
    max-width: 560px;
    margin: 0 0 16px;
    background: var(--drs-lc-white);
    border: 1px solid var(--drs-lc-line);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: var(--drs-lc-ink);
    font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
    line-height: 1.6;
    box-shadow: 0 6px 22px -18px rgba(0, 0, 0, 0.25);
    transition: border-color .15s, box-shadow .15s;
    -webkit-font-smoothing: antialiased;
}
.drs-lc:last-child { margin-bottom: 0; }
.drs-lc:hover {
    border-color: var(--drs-lc-line-d);
    box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    color: var(--drs-lc-ink);
}

/* Top: image + info */
.drs-lc-top {
    display: flex;
    align-items: stretch;
}
.drs-lc-media {
    flex: 0 0 128px;
    min-height: 112px;
    position: relative;
    background: #f5f4f0;
    border-right: 1px solid var(--drs-lc-line);
}
.drs-lc-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}
.drs-lc-body {
    flex: 1;
    min-width: 0;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}
.drs-lc-cat {
    font-size: 10.5px;
    color: var(--drs-lc-ink-mute);
    letter-spacing: .12em;
}
.drs-lc-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.5;
}
.drs-lc-meta {
    display: flex;
    gap: 14px;
    align-items: baseline;
    flex-wrap: wrap;
}
.drs-lc-price {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--drs-lc-ink);
}
.drs-lc-price small {
    font-size: 11px;
    font-weight: 400;
    color: var(--drs-lc-ink-soft);
}
.drs-lc-sku {
    font-size: 10.5px;
    color: var(--drs-lc-ink-mute);
    letter-spacing: .06em;
}

/* Bottom: full-width button */
.drs-lc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    background: var(--drs-lc-accent);
    color: #fff;
    font-size: 13px;
    letter-spacing: .08em;
    transition: background .15s;
}
.drs-lc-arr {
    font-size: 12px;
    transition: transform .15s;
}
.drs-lc:hover .drs-lc-btn { background: var(--drs-lc-accent-d); }
.drs-lc:hover .drs-lc-arr { transform: translateX(3px); }

/* URL未設定カード（リンクなし） */
.drs-lc--nolink { cursor: default; }

/* Notice (admin only) */
.drs-lc-group .drs-notice {
    padding: 12px 16px;
    background: #fef9c3;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    color: #92400e;
    font-size: 13px;
    margin: 8px 0 0;
}

@media (max-width: 480px) {
    .drs-lc-media { flex-basis: 100px; min-height: 96px; }
    .drs-lc-body { padding: 12px 14px; }
    .drs-lc-name { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .drs-lc, .drs-lc-btn, .drs-lc-arr { transition: none; }
}