.ic02-page {
    --ic02-accent: var(--th01-color-link, #f05a83);
    --ic02-accent-soft: rgba(240, 90, 131, 0.14);
    --ic02-surface: var(--th01-color-surface, #17131b);
    --ic02-surface-strong: var(--th01-color-surface-strong, #211a25);
    --ic02-text: var(--th01-color-text, #f8f3f6);
    --ic02-muted: var(--th01-color-muted, #b9adb5);
    --ic02-border: var(--th01-color-border, #342a37);
    color: var(--ic02-text);
}

.ic02-breadcrumb {
    display: flex;
    gap: .55rem;
    align-items: center;
    margin-bottom: 1.25rem;
    color: var(--ic02-muted);
    font-size: .78rem;
}

.ic02-breadcrumb a { color: var(--ic02-muted); }
.ic02-breadcrumb a:hover { color: var(--ic02-accent); }

.ic02-hero {
    max-width: 980px;
    margin: 0 auto clamp(2rem, 5vw, 3.5rem);
    text-align: center;
}

.ic02-hero__eyebrow {
    margin: 0 0 .6rem;
    color: var(--ic02-accent);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .09em;
}

.ic02-hero__title {
    margin: 0;
    font-size: clamp(1.35rem, 3.5vw, 2.25rem);
    line-height: 1.45;
}

.ic02-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1rem;
    justify-content: center;
    margin-top: 1rem;
    color: var(--ic02-muted);
    font-size: .8rem;
}

.ic02-work-intro {
    display: grid;
    grid-template-columns: clamp(190px, 24vw, 255px) minmax(0, 1fr);
    gap: clamp(1.25rem, 3.4vw, 2.5rem);
    align-items: start;
    max-width: 1040px;
    margin: 0 auto clamp(2.75rem, 6vw, 4.5rem);
    overflow: hidden;
    border: 1px solid var(--ic02-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at 0 0, rgba(240, 90, 131, .14), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
    box-shadow: 0 22px 56px rgba(0, 0, 0, .22);
    padding: clamp(1rem, 3vw, 1.65rem);
}

.ic02-work-intro__media {
    overflow: hidden;
    aspect-ratio: 2 / 3;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: var(--ic02-surface-strong);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}

.ic02-work-intro__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ic02-work-intro__content { min-width: 0; padding: .15rem 0; }

.ic02-work-intro__eyebrow {
    margin: 0 0 .55rem;
    color: var(--ic02-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.ic02-work-intro__title {
    margin: 0;
    font-size: clamp(1.25rem, 2.7vw, 1.9rem);
    line-height: 1.48;
}

.ic02-work-intro__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .55rem;
    margin-top: .8rem;
}

.ic02-work-intro__meta span {
    border: 1px solid var(--ic02-border);
    border-radius: 999px;
    background: rgba(0, 0, 0, .12);
    color: var(--ic02-muted);
    font-size: .68rem;
    line-height: 1.35;
    padding: .22rem .55rem;
}

.ic02-work-intro__row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: .8rem;
    align-items: start;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .065);
}

.ic02-work-intro__label {
    margin: .08rem 0 0;
    color: var(--ic02-muted);
    font-size: .7rem;
    font-weight: 750;
    line-height: 1.65;
}

.ic02-work-intro__actresses,
.ic02-work-intro__description {
    margin: 0;
    font-size: .84rem;
    line-height: 1.78;
}

.ic02-work-intro__actresses {
    display: -webkit-box;
    overflow: hidden;
    max-height: 3.56em;
    color: #f5c3d1;
    font-weight: 700;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ic02-work-intro__actresses a,
.ic02-map-card__actress a,
.ic02-related-item__actress a {
    color: inherit;
}

.ic02-work-intro__actresses a:hover,
.ic02-work-intro__actresses a:focus-visible,
.ic02-map-card__actress a:hover,
.ic02-map-card__actress a:focus-visible,
.ic02-related-item__actress a:hover,
.ic02-related-item__actress a:focus-visible {
    color: var(--ic02-accent);
    text-decoration: underline;
    text-underline-offset: .16em;
}

.ic02-work-intro__description { color: #d6ccd2; }

.ic02-work-intro__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .38rem;
}

.ic02-work-intro__tags span,
.ic02-work-intro__tags a {
	border: 1px solid rgba(240, 90, 131, .34);
	border-radius: 999px;
	background: var(--ic02-accent-soft);
	color: #f4bfd0;
    font-size: .66rem;
    line-height: 1.35;
	padding: .2rem .52rem;
}

.ic02-work-intro__tags a:hover,
.ic02-work-intro__tags a:focus-visible {
	border-color: var(--ic02-accent);
	background: rgba(240, 90, 131, .2);
	color: #fff;
}

.ic02-work-intro__fanza-link {
	display: inline-block;
	margin-top: .6rem;
	border-bottom: 1px solid currentColor;
	color: #f4bfd0;
	font-size: .82rem;
	font-weight: 750;
	text-underline-offset: .18em;
}

.ic02-work-intro__fanza-link:hover,
.ic02-work-intro__fanza-link:focus-visible { color: #fff; }

.ic02-feature-section {
    position: relative;
    overflow: hidden;
    max-width: 1040px;
    margin: 0 auto clamp(2rem, 5vw, 3.5rem);
    border: 1px solid rgba(240, 90, 131, .22);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(169, 108, 255, .13), transparent 34%),
        radial-gradient(circle at 0 100%, rgba(240, 90, 131, .10), transparent 32%),
        linear-gradient(150deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, .012)),
        var(--ic02-surface);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .20);
    padding: clamp(1.15rem, 3vw, 1.65rem);
}

.ic02-feature-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ic02-accent), #a96cff 55%, var(--ic02-accent));
}

.ic02-feature-section__header { margin-bottom: .95rem; }

.ic02-feature-section__eyebrow {
    margin: 0 0 .35rem;
    color: var(--ic02-accent);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .09em;
}

.ic02-feature-section__header h2 {
    margin: 0;
    color: var(--ic02-text);
    font-size: clamp(1.18rem, 2.7vw, 1.65rem);
    line-height: 1.35;
}

.ic02-feature-section__body {
    color: #ded4db;
    font-size: .88rem;
    line-height: 1.9;
}

.ic02-feature-section__body p { margin: .65rem 0 0; }
.ic02-feature-section__body p:first-child { margin-top: 0; }

.ic02-feature-section__review {
    position: relative;
    border: 1px solid rgba(240, 90, 131, .22);
    border-radius: 14px;
    background: linear-gradient(100deg, rgba(240, 90, 131, .12), rgba(169, 108, 255, .08));
    color: #fff0f5;
    font-weight: 780;
    padding: .7rem .85rem .7rem 1rem;
}

.ic02-feature-section__review::before {
    content: "";
    position: absolute;
    top: .65rem;
    bottom: .65rem;
    left: .45rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ic02-accent), #a96cff);
    box-shadow: 0 0 12px rgba(240, 90, 131, .28);
}

.ic02-feature-section__debut-review {
    color: #fff0f5;
    font-weight: 720;
}

.ic02-feature-section__debut-review--first {
    margin-top: 1rem !important;
    border-top: 1px solid rgba(240, 90, 131, .22);
    padding-top: .8rem;
}

.ic02-feature-section__debut-review--first + .ic02-feature-section__debut-review {
    margin-top: .42rem;
}

.ic02-section-header {
    max-width: 1040px;
    margin: 0 auto 1.25rem;
}

.ic02-section-header h2 {
    margin: 0;
    font-size: clamp(1.25rem, 3vw, 1.85rem);
}

.ic02-section-header p {
    margin: .45rem 0 0;
    color: var(--ic02-muted);
    font-size: .85rem;
}

.ic02-map-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.42rem, 1.25vw, 1rem);
    max-width: 1040px;
    margin-inline: auto;
}

.ic02-map-card {
    --ic02-card-frame: var(--ic02-border);
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 3px solid var(--ic02-card-frame);
    border-radius: 16px;
    background: rgba(255, 255, 255, .012);
    flex-direction: column;
}

.ic02-map-card--position-1 { --ic02-card-frame: var(--ic02-accent); }
.ic02-map-card--position-2 { --ic02-card-frame: #f28c28; }
.ic02-map-card--position-3 { --ic02-card-frame: #e4c62e; }
.ic02-map-card--position-4 { --ic02-card-frame: #f2ad2e; }
.ic02-map-card--position-5 { --ic02-card-frame: #9b6de3; }
.ic02-map-card--position-6 { --ic02-card-frame: #45b96b; }
.ic02-map-card--position-7 { --ic02-card-frame: #e4c62e; }
.ic02-map-card--position-8 { --ic02-card-frame: #45b96b; }
.ic02-map-card--position-9 { --ic02-card-frame: #4f8ee8; }

.ic02-map-card__link {
    display: block;
    height: auto;
    flex: 1 1 auto;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .015);
    color: var(--ic02-text);
    transition: transform 160ms ease, background-color 160ms ease;
}

.ic02-map-card__link:hover,
.ic02-map-card__link:focus-visible {
    background: rgba(255, 255, 255, .035);
    color: var(--ic02-text);
    transform: translateY(-3px);
}

.ic02-map-card--selected .ic02-map-card__link {
    background: var(--ic02-accent-soft);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

.ic02-map-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 3;
    border-radius: 13px;
    background: var(--ic02-surface-strong);
}

.ic02-map-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease;
}


.ic02-map-card__label {
    position: absolute;
    right: .55rem;
    bottom: .55rem;
    left: .55rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(11, 9, 13, .86);
    color: #fff;
    font-size: clamp(.56rem, 1.4vw, .72rem);
    font-weight: 750;
    line-height: 1.25;
    padding: .28rem .5rem;
    text-align: center;
}

.ic02-map-card--selected .ic02-map-card__label { background: rgba(185, 47, 92, .92); }

.ic02-map-card__body {
    padding: .78rem .5rem .52rem;
}

.ic02-map-card__body h3 {
    display: -webkit-box;
    overflow: hidden;
    height: 2.9em;
    min-height: 2.9em;
    max-height: 2.9em;
    margin: 0;
    font-size: clamp(.72rem, 1.55vw, .94rem);
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ic02-map-card__actress {
    display: block;
    overflow: hidden;
    height: 1.55em;
    min-height: 1.55em;
    margin: .38rem .5rem 0;
    color: var(--ic02-muted);
    font-size: clamp(.6rem, 1.2vw, .75rem);
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic02-map-card__tags {
    display: flex;
    overflow: hidden;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: .28rem;
    height: 3.45rem;
    margin-top: .48rem;
}

.ic02-map-card__tags span {
    overflow: hidden;
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
    color: #e9dfe3;
    font-size: clamp(.54rem, 1.1vw, .68rem);
    line-height: 1.3;
    padding: .18rem .42rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic02-map-card__fanza-link {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    gap: .28em;
    min-height: 2.45rem;
    margin: .4rem .5rem 0;
    border: 0;
    border-top: 1px solid rgba(240, 90, 131, .4);
    border-radius: 0;
    background: transparent;
    color: #f05a83;
    font-size: clamp(.62rem, 1.15vw, .76rem);
    font-weight: 800;
    line-height: 1.35;
    padding: .5rem .25rem .42rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 160ms ease, color 160ms ease;
}

.ic02-map-card__fanza-link::after {
    content: "↗";
    opacity: .7;
    font-size: .9em;
}

.ic02-map-card__fanza-link:hover,
.ic02-map-card__fanza-link:focus-visible {
    background: color-mix(in srgb, var(--ic02-card-frame) 10%, transparent);
    color: #fff;
}

/* Card bottom stats: a shared pink strip directly under the FANZA row. */
.ic02-map-card > .ic02-card-stats {
    background: var(--ic02-accent);
    color: #fff;
}

.ic02-map-card > .ic02-card-stats .ic02-card-stat__label,
.ic02-map-card > .ic02-card-stats .ic02-card-stat__value {
    color: inherit;
}

.ic02-map-card > .ic02-card-stats .ic02-card-stat + .ic02-card-stat {
    border-left-color: rgba(255, 255, 255, .28);
}

.ic02-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin-top: .35rem;
    background: var(--ic02-accent);
    color: #fff;
}

.ic02-card-stat {
    min-width: 0;
    padding: .6rem .3rem .66rem;
    text-align: center;
}

.ic02-card-stat + .ic02-card-stat {
    border-left: 1px solid rgba(255, 255, 255, .2);
}

.ic02-card-stat__label {
    display: block;
    overflow: hidden;
    margin-bottom: .24rem;
    color: #fff;
    font-size: clamp(.56rem, 1vw, .68rem);
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 1px 1px 0 #000;
}

.ic02-card-stat__value {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: clamp(.94rem, 1.8vw, 1.18rem);
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 1px 1px 0 #000;
}

.ic02-card-stat__value--date {
    font-size: clamp(.74rem, 1.45vw, .98rem);
    letter-spacing: .01em;
}

.ic02-card-stat__unit {
    margin-left: .08em;
    font-size: .58em;
    font-weight: 800;
}



.ic02-map-card--empty {
    display: grid;
    min-height: 14rem;
    place-items: center;
}

.ic02-map-card__empty { color: var(--ic02-muted); font-size: .76rem; }

.ic02-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    max-width: 1040px;
    margin: 1.75rem auto 0;
}

.ic02-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid var(--ic02-border);
    border-radius: 999px;
    background: var(--ic02-surface);
    color: var(--ic02-text);
    font-size: .86rem;
    font-weight: 750;
    padding: .58rem 1.25rem;
}

.ic02-button:hover { border-color: var(--ic02-accent); color: #fff; }
.ic02-button--primary { border-color: var(--ic02-accent); background: var(--ic02-accent); color: #fff; }

.ic02-related-section { margin-top: clamp(3.5rem, 8vw, 6rem); }

.ic02-related-loading {
    min-height: min(42vw, 34rem);
}

.ic02-related-pending {
    display: grid;
    min-height: min(42vw, 26rem);
    place-content: center;
    gap: .85rem;
    max-width: 1040px;
    margin: 0 auto;
    border: 1px dashed var(--ic02-border);
    border-radius: 16px;
    color: var(--ic02-muted);
    padding: 2rem;
    text-align: center;
}

.ic02-related-pending p { margin: 0; }
.ic02-related-pending__message { max-width: 42rem; font-size: .82rem; }
.ic02-related-pending--error { color: #f4bfd0; }

.ic02-related-pending__spinner {
    width: 2rem;
    height: 2rem;
    margin-inline: auto;
    border: 3px solid rgba(240, 90, 131, .2);
    border-top-color: var(--ic02-accent);
    border-radius: 50%;
    animation: ic02-spin .8s linear infinite;
}

@keyframes ic02-spin { to { transform: rotate(360deg); } }

.ic02-related-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.75rem, 1.8vw, 1.25rem);
    max-width: 1120px;
    margin-inline: auto;
}

.ic02-related-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ic02-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .018);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}

.ic02-related-item__image-link {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 2 / 3;
    background: var(--ic02-surface-strong);
}

.ic02-related-item__image-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 240ms ease;
}


.ic02-related-item__title {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    overflow: hidden;
    max-height: 4.65em;
    margin: 0;
    background: rgba(0, 0, 0, .74);
    color: #fff;
    font-size: clamp(.78rem, 1.5vw, .98rem);
    font-weight: 750;
    line-height: 1.55;
    padding: .72rem .8rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
    transform: translateY(0);
    transition: transform 220ms ease;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.ic02-related-item__image-link:hover .ic02-related-item__title,
.ic02-related-item__image-link:focus-visible .ic02-related-item__title {
    transform: translateY(calc(100% + 1px));
}

.ic02-related-item__body {
    min-width: 0;
    flex: 1 1 auto;
    padding: .75rem .8rem .85rem;
}

.ic02-related-item__actress {
    overflow: hidden;
    margin: 0;
    color: var(--ic02-muted);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic02-tag-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }

.ic02-tag-list span,
.ic02-tag-list a {
	border: 1px solid rgba(240, 90, 131, .32);
	border-radius: 999px;
	background: var(--ic02-accent-soft);
    color: #f4bfd0;
    font-size: .66rem;
	padding: .16rem .48rem;
}

.ic02-tag-list a:hover,
.ic02-tag-list a:focus-visible {
	border-color: var(--ic02-accent);
	background: rgba(240, 90, 131, .2);
	color: #fff;
}

.ic02-related-item__reason {
    margin: .65rem 0 0;
    color: var(--ic02-muted);
    font-size: .72rem;
    line-height: 1.55;
}

.ic02-related-item__video-link {
	display: inline-block;
	margin-top: .8rem;
	border-bottom: 1px solid currentColor;
	color: #f4bfd0;
	font-size: .76rem;
	font-weight: 750;
	text-underline-offset: .18em;
}

.ic02-related-item__video-link:hover,
.ic02-related-item__video-link:focus-visible { color: #fff; }

@media (max-width: 900px) {
    .ic02-related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ic02-empty,
.ic02-error {
    max-width: 760px;
    margin-inline: auto;
    border: 1px dashed var(--ic02-border);
    border-radius: 14px;
    color: var(--ic02-muted);
    padding: clamp(1.5rem, 5vw, 3rem);
    text-align: center;
}

.ic02-error h1 { color: var(--ic02-text); }

@media (max-width: 560px) {
    .ic02-work-intro {
        grid-template-columns: 1fr;
        gap: 1rem;
        border-radius: 15px;
        padding: .8rem;
    }
    .ic02-work-intro__media { width: min(52vw, 190px); margin-inline: auto; border-radius: 11px; }
    .ic02-work-intro__content { padding: 0 .15rem .2rem; }
    .ic02-work-intro__eyebrow { text-align: center; }
    .ic02-work-intro__title { font-size: 1.08rem; text-align: center; }
    .ic02-work-intro__meta { justify-content: center; }
    .ic02-work-intro__row { grid-template-columns: 1fr; gap: .3rem; margin-top: .8rem; padding-top: .8rem; }
    .ic02-work-intro__actresses,
    .ic02-work-intro__description { font-size: .78rem; line-height: 1.72; }
    .ic02-map-grid {
        width: min(100%, 420px);
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .ic02-map-card__body { padding: .8rem .5rem .55rem; }
    .ic02-map-card__body h3 { height: 2.9em; min-height: 2.9em; max-height: 2.9em; font-size: .94rem; -webkit-line-clamp: 2; }
    .ic02-map-card__actress { display: block; height: 1.55em; min-height: 1.55em; margin-inline: .5rem; font-size: .75rem; }
    .ic02-map-card__tags { height: 3.55rem; }
    .ic02-map-card__tags span { font-size: .68rem; }
    .ic02-map-card__fanza-link { min-height: 2.55rem; margin: .4rem .5rem 0; padding: .52rem .25rem .44rem; font-size: .76rem; }
    .ic02-related-list { grid-template-columns: 1fr; gap: .9rem; }
    .ic02-related-item__title { font-size: .9rem; padding: .68rem .75rem; }
    .ic02-related-item__body { padding: .7rem .75rem .8rem; }
    .ic02-card-stat { padding: .62rem .35rem .66rem; }
    .ic02-card-stat__label { font-size: .62rem; }
    .ic02-card-stat__value { font-size: 1.06rem; }
    .ic02-card-stat__value--date { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ic02-map-card__link,
    .ic02-map-card__media img,
    .ic02-related-item__image-link img,
    .ic02-related-item__title { transition: none; }
    .ic02-related-pending__spinner { animation: none; }
}
.ic02-archive-hero {
	margin-bottom: 24px;
}

.ic02-archive-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 18px;
}

.ic02-archive-card {
	min-width: 0;
	overflow: hidden;
	border: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.ic02-archive-card__link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.ic02-archive-card img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background: #e5e7eb;
}

.ic02-archive-card__body {
	padding: 12px;
}

.ic02-archive-card__body h2 {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 0.94rem;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.ic02-archive-card__body p {
	margin: 8px 0 0;
	color: #64748b;
	font-size: 0.78rem;
}

@media (max-width: 1000px) {
	.ic02-archive-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.ic02-archive-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}

	.ic02-archive-card__body {
		padding: 9px;
	}

	.ic02-archive-card__body h2 {
		font-size: 0.78rem;
	}
}

/* Review / rating timeline ------------------------------------------------- */
.ic02-review-panel {
    --ic02-review-accent: #8f8790;
    --ic02-review-accent-2: #b2a8b1;
    --ic02-review-glow: rgba(143, 135, 144, .22);
    position: relative;
    overflow: hidden;
    max-width: 1040px;
    margin: clamp(3.75rem, 8vw, 6rem) auto 0;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    background:
        radial-gradient(circle at 85% 0%, var(--ic02-review-glow), transparent 34%),
        radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--ic02-review-accent) 13%, transparent), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 35%),
        var(--ic02-surface);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .30);
    padding: clamp(1rem, 3vw, 1.65rem);
}

.ic02-review-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--ic02-review-accent), var(--ic02-review-accent-2), var(--ic02-review-accent));
    box-shadow: 0 0 20px var(--ic02-review-glow);
}

.ic02-review-panel--blue {
    --ic02-review-accent: #2563eb;
    --ic02-review-accent-2: #60a5fa;
    --ic02-review-glow: rgba(37, 99, 235, .26);
}
.ic02-review-panel--cyan {
    --ic02-review-accent: #0891b2;
    --ic02-review-accent-2: #22d3ee;
    --ic02-review-glow: rgba(8, 145, 178, .27);
}
.ic02-review-panel--green {
    --ic02-review-accent: #059669;
    --ic02-review-accent-2: #34d399;
    --ic02-review-glow: rgba(5, 150, 105, .28);
}
.ic02-review-panel--lime {
    --ic02-review-accent: #65a30d;
    --ic02-review-accent-2: #a3e635;
    --ic02-review-glow: rgba(101, 163, 13, .29);
}
.ic02-review-panel--gold {
    --ic02-review-accent: #ca8a04;
    --ic02-review-accent-2: #facc15;
    --ic02-review-glow: rgba(202, 138, 4, .31);
}
.ic02-review-panel--orange {
    --ic02-review-accent: #ea580c;
    --ic02-review-accent-2: #fb923c;
    --ic02-review-glow: rgba(234, 88, 12, .33);
}
.ic02-review-panel--red {
    --ic02-review-accent: #dc2626;
    --ic02-review-accent-2: #f87171;
    --ic02-review-glow: rgba(220, 38, 38, .36);
}
.ic02-review-panel--rainbow {
    --ic02-review-accent: #ef4444;
    --ic02-review-accent-2: #a855f7;
    --ic02-review-glow: rgba(168, 85, 247, .38);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 20px 58px rgba(0, 0, 0, .34), 0 0 32px rgba(168, 85, 247, .09);
}
.ic02-review-panel--rainbow::before {
    height: 4px;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7);
}
.ic02-review-panel--rainbow .ic02-review-stat--reviews,
.ic02-review-panel--rainbow .ic02-review-stat--score {
    background:
        linear-gradient(135deg, rgba(239, 68, 68, .10), rgba(234, 179, 8, .07) 30%, rgba(34, 197, 94, .07) 50%, rgba(59, 130, 246, .07) 72%, rgba(168, 85, 247, .10));
}
.ic02-review-panel--rainbow .ic02-review-stat--reviews .ic02-review-stat__value,
.ic02-review-panel--rainbow .ic02-review-stat--score .ic02-review-stat__value {
    background: linear-gradient(90deg, #fff, #facc15 28%, #67e8f9 58%, #c084fc 82%, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ic02-review-panel--rainbow .ic02-review-step:not(:last-child)::after {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7);
    box-shadow: 0 0 16px rgba(168, 85, 247, .34);
}
.ic02-review-panel--rainbow .ic02-review-step--to-next::after {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, rgba(255, 255, 255, .12));
    box-shadow: none;
}
.ic02-review-panel--rainbow .ic02-review-step__dot {
    background: linear-gradient(135deg, #ef4444, #f59e0b 28%, #22c55e 52%, #3b82f6 74%, #a855f7);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 0 20px rgba(168, 85, 247, .34);
}

.ic02-review-panel__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.ic02-review-panel__title {
    margin: 0;
    font-size: clamp(1.25rem, 3vw, 1.85rem);
    line-height: 1.3;
}

.ic02-review-panel__sub {
    margin: .45rem 0 0;
    color: var(--ic02-muted);
    font-size: .78rem;
}

.ic02-review-panel__badge {
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--ic02-review-accent) 48%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ic02-review-accent) 14%, transparent);
    color: color-mix(in srgb, var(--ic02-review-accent-2) 75%, white);
    font-size: .68rem;
    font-weight: 800;
    padding: .4rem .7rem;
}

.ic02-review-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1.85rem;
}

.ic02-review-stat {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    background: rgba(255, 255, 255, .025);
    padding: 1.05rem 1.1rem;
}

.ic02-review-stat--reviews,
.ic02-review-stat--score {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ic02-review-accent) 13%, transparent), rgba(255, 255, 255, .02));
}

.ic02-review-stat__label {
    display: block;
    margin-bottom: .38rem;
    color: var(--ic02-muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.ic02-review-stat__value {
    display: block;
    overflow-wrap: anywhere;
    color: var(--ic02-text);
    font-size: clamp(1.25rem, 3vw, 1.95rem);
    font-weight: 850;
    line-height: 1.1;
}

.ic02-review-stat--reviews .ic02-review-stat__value,
.ic02-review-stat--score .ic02-review-stat__value {
    background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--ic02-review-accent-2) 64%, white));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ic02-review-stat__unit {
    margin-left: .22rem;
    color: var(--ic02-muted);
    font-size: .48em;
    font-weight: 750;
    -webkit-text-fill-color: var(--ic02-muted);
}



.ic02-review-timeline-wrap {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 18px;
    background: rgba(0, 0, 0, .14);
    padding: 1.2rem 1.1rem 1rem;
}

.ic02-review-timeline__heading {
    margin: 0 0 1.35rem;
    font-size: .78rem;
    font-weight: 850;
}

.ic02-review-timeline {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-height: 7rem;
}

.ic02-review-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.ic02-review-step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 1.56rem;
    left: 50%;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ic02-review-accent), var(--ic02-review-accent-2));
    box-shadow: 0 0 14px var(--ic02-review-glow);
}

.ic02-review-step--to-next::after {
    background: linear-gradient(90deg, var(--ic02-review-accent), var(--ic02-review-accent-2) 45%, rgba(255, 255, 255, .12));
    box-shadow: none;
}

.ic02-review-step__count {
    position: relative;
    z-index: 2;
    display: block;
    overflow: hidden;
    margin-bottom: .45rem;
    color: var(--ic02-text);
    font-size: .76rem;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic02-review-step__dot {
    position: relative;
    z-index: 2;
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    border: 3px solid var(--ic02-surface);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ic02-review-accent), var(--ic02-review-accent-2));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ic02-review-accent) 38%, transparent), 0 0 18px var(--ic02-review-glow);
}

.ic02-review-step--major .ic02-review-step__dot {
    width: 24px;
    height: 24px;
    margin-top: -3px;
}

.ic02-review-step--huge .ic02-review-step__dot {
    width: 30px;
    height: 30px;
    margin-top: -6px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ic02-review-accent) 34%, transparent), 0 0 28px var(--ic02-review-glow);
}

.ic02-review-step--next .ic02-review-step__dot {
    width: 28px;
    height: 28px;
    margin-top: -5px;
    border: 3px solid var(--ic02-review-accent-2);
    background: var(--ic02-surface-strong);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ic02-review-accent) 12%, transparent), 0 0 20px var(--ic02-review-glow);
}

.ic02-review-step--next .ic02-review-step__count {
    color: color-mix(in srgb, var(--ic02-review-accent-2) 78%, white);
}

.ic02-review-step__date {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: .6rem;
    color: var(--ic02-muted);
    font-size: .64rem;
    line-height: 1.35;
}

.ic02-review-step--next .ic02-review-step__date { font-weight: 800; }

.ic02-review-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .5rem;
    margin-top: .15rem;
    color: var(--ic02-muted);
    font-size: .68rem;
}

.ic02-review-current strong {
    color: var(--ic02-text);
    font-size: .74rem;
}

@media (max-width: 700px) {
    .ic02-review-panel {
        border-radius: 18px;
        padding: 1.15rem .95rem;
    }

    .ic02-review-panel__header { align-items: flex-start; }
    .ic02-review-panel__badge { display: none; }

    .ic02-review-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ic02-review-stat:first-child { grid-column: 1 / -1; }

    .ic02-review-timeline-wrap { padding: 1.05rem .9rem; }
    .ic02-review-timeline { display: block; min-height: 0; padding-left: .45rem; }

    .ic02-review-step {
        display: grid;
        grid-template-columns: 2.65rem minmax(0, 1fr);
        grid-template-areas: "dot count" "dot date";
        min-height: 4.8rem;
        text-align: left;
    }

    .ic02-review-step:not(:last-child)::after {
        top: 1.3rem;
        bottom: -1.1rem;
        left: 1.22rem;
        width: 4px;
        height: auto;
        background: linear-gradient(180deg, var(--ic02-review-accent), var(--ic02-review-accent-2));
    }

    .ic02-review-step--to-next::after {
        background: linear-gradient(180deg, var(--ic02-review-accent), var(--ic02-review-accent-2) 45%, rgba(255, 255, 255, .12));
    }

    .ic02-review-step__dot {
        grid-area: dot;
        align-self: start;
        margin: .45rem auto 0;
    }

    .ic02-review-step--major .ic02-review-step__dot,
    .ic02-review-step--huge .ic02-review-step__dot,
    .ic02-review-step--next .ic02-review-step__dot { margin-top: .3rem; }

    .ic02-review-step__count {
        grid-area: count;
        align-self: end;
        margin: 0 0 .18rem .55rem;
    }

    .ic02-review-step__date {
        grid-area: date;
        margin: 0 0 0 .55rem;
    }

    .ic02-review-current { justify-content: flex-start; padding-left: 3.2rem; }
}

/* Ranking numeric 3x3 panel --------------------------------------------- */
.ic02-ranking-panel {
    --ic02-rank-card: #171a22;
    --ic02-rank-tile: #20242e;
    --ic02-rank-tile-empty: #1b1f28;
    --ic02-rank-text: #f5f2f3;
    --ic02-rank-muted: #a5a0a5;
    --ic02-rank-line: #323746;
    --ic02-rank-accent: #ff5b86;
    --ic02-rank-accent-soft: #351b27;
    --ic02-rank-accent-line: #7c334b;
    --ic02-rank-tab: #11141b;
    --ic02-rank-tab-active: #2a1c24;
    position: relative;
    overflow: hidden;
    max-width: 1040px;
    margin: clamp(2rem, 5vw, 3.5rem) auto 0;
    padding: clamp(1rem, 3vw, 1.65rem);
    border: 1px solid var(--ic02-rank-line);
    border-radius: 20px;
    background: var(--ic02-rank-card);
    color: var(--ic02-rank-text);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}

/* いちご */
.ic02-ranking-panel--theme-strawberry {
    --ic02-rank-card: #ffffff;
    --ic02-rank-tile: #fbfbfc;
    --ic02-rank-tile-empty: #f4f4f6;
    --ic02-rank-text: #222222;
    --ic02-rank-muted: #7e7e87;
    --ic02-rank-line: #e7e7ec;
    --ic02-rank-accent: #e65274;
    --ic02-rank-accent-soft: #fff2f6;
    --ic02-rank-accent-line: #f2bfd0;
    --ic02-rank-tab: #f1f1f4;
    --ic02-rank-tab-active: #ffffff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}

/* 夜のいちご */
.ic02-ranking-panel--theme-night-strawberry {
    --ic02-rank-card: #171a22;
    --ic02-rank-tile: #20242e;
    --ic02-rank-tile-empty: #1b1f28;
    --ic02-rank-text: #f5f2f3;
    --ic02-rank-muted: #a5a0a5;
    --ic02-rank-line: #323746;
    --ic02-rank-accent: #ff5b86;
    --ic02-rank-accent-soft: #351b27;
    --ic02-rank-accent-line: #7c334b;
    --ic02-rank-tab: #11141b;
    --ic02-rank-tab-active: #2a1c24;
}

/* モノ */
.ic02-ranking-panel--theme-mono {
    --ic02-rank-card: #f7f7f8;
    --ic02-rank-tile: #ffffff;
    --ic02-rank-tile-empty: #eeeeef;
    --ic02-rank-text: #25272b;
    --ic02-rank-muted: #74777e;
    --ic02-rank-line: #d8dade;
    --ic02-rank-accent: #4f535b;
    --ic02-rank-accent-soft: #eceef1;
    --ic02-rank-accent-line: #bfc3ca;
    --ic02-rank-tab: #e9ebee;
    --ic02-rank-tab-active: #ffffff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}

/* ゴールド */
.ic02-ranking-panel--theme-gold {
    --ic02-rank-card: #211c14;
    --ic02-rank-tile: #2b2418;
    --ic02-rank-tile-empty: #252018;
    --ic02-rank-text: #fff9e8;
    --ic02-rank-muted: #b9a987;
    --ic02-rank-line: #4b4028;
    --ic02-rank-accent: #e0b84f;
    --ic02-rank-accent-soft: #3a2f17;
    --ic02-rank-accent-line: #80672d;
    --ic02-rank-tab: #17130e;
    --ic02-rank-tab-active: #332916;
}

/* ミント */
.ic02-ranking-panel--theme-mint {
    --ic02-rank-card: #13211f;
    --ic02-rank-tile: #1b2d2a;
    --ic02-rank-tile-empty: #182724;
    --ic02-rank-text: #effbf8;
    --ic02-rank-muted: #91b4ad;
    --ic02-rank-line: #2d4a45;
    --ic02-rank-accent: #55d0b8;
    --ic02-rank-accent-soft: #173832;
    --ic02-rank-accent-line: #347c6e;
    --ic02-rank-tab: #0d1816;
    --ic02-rank-tab-active: #193a34;
}

.ic02-ranking-panel__header {
    margin-bottom: 1rem;
}

.ic02-ranking-panel__eyebrow {
    margin: 0 0 .25rem;
    color: var(--ic02-rank-accent);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.ic02-ranking-panel__title {
    margin: 0;
    color: var(--ic02-rank-text);
    font-size: clamp(1.2rem, 3vw, 1.75rem);
    line-height: 1.25;
}

.ic02-ranking-tabs__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ic02-ranking-tabs__nav {
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(4.6rem, 1fr));
    gap: .35rem;
    margin-bottom: 1rem;
    padding: .3rem;
    border: 1px solid var(--ic02-rank-line);
    border-radius: 999px;
    background: var(--ic02-rank-tab);
}

.ic02-ranking-tabs__label {
    display: flex;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    padding: .45rem .85rem;
    border-radius: 999px;
    color: var(--ic02-rank-muted);
    font-size: .8rem;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

#ic02-ranking-tab-daily:checked ~ .ic02-ranking-tabs__nav label[for="ic02-ranking-tab-daily"],
#ic02-ranking-tab-weekly:checked ~ .ic02-ranking-tabs__nav label[for="ic02-ranking-tab-weekly"],
#ic02-ranking-tab-monthly:checked ~ .ic02-ranking-tabs__nav label[for="ic02-ranking-tab-monthly"] {
    background: var(--ic02-rank-tab-active);
    color: var(--ic02-rank-accent);
    box-shadow: inset 0 0 0 1px var(--ic02-rank-accent-line), 0 3px 10px rgba(0, 0, 0, .10);
}

.ic02-ranking-view {
    display: none;
}

#ic02-ranking-tab-daily:checked ~ .ic02-ranking-tabs__panels .ic02-ranking-view--daily,
#ic02-ranking-tab-weekly:checked ~ .ic02-ranking-tabs__panels .ic02-ranking-view--weekly,
#ic02-ranking-tab-monthly:checked ~ .ic02-ranking-tabs__panels .ic02-ranking-view--monthly {
    display: block;
}

.ic02-ranking-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.ic02-ranking-tile {
    display: grid;
    min-width: 0;
    min-height: 7.25rem;
    place-items: center;
    padding: .85rem;
    border: 1px solid var(--ic02-rank-line);
    border-radius: 16px;
    background: var(--ic02-rank-tile);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .13);
    text-align: center;
    cursor: help;
}

.ic02-ranking-tile span {
    display: block;
    width: 100%;
    overflow-wrap: anywhere;
    color: var(--ic02-rank-text);
    font-size: clamp(1.4rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.ic02-ranking-tile.is-accent {
    border-color: var(--ic02-rank-accent-line);
    background: var(--ic02-rank-accent-soft);
    box-shadow: 0 9px 24px rgba(0, 0, 0, .18);
}

.ic02-ranking-tile.is-accent span {
    color: var(--ic02-rank-accent);
    font-size: clamp(1.8rem, 5vw, 3.2rem);
}

.ic02-ranking-tile.is-empty {
    background: var(--ic02-rank-tile-empty);
    opacity: .48;
}

.ic02-ranking-summary {
    margin: 1rem .1rem 0;
    padding-top: .9rem;
    border-top: 1px solid var(--ic02-rank-line);
    color: var(--ic02-rank-muted);
    font-size: .82rem;
    line-height: 1.85;
}

@media (max-width: 700px) {
    .ic02-ranking-panel {
        padding: .9rem;
        border-radius: 15px;
    }

    .ic02-ranking-tabs__nav {
        width: 100%;
        display: grid;
    }

    .ic02-ranking-grid {
        gap: .5rem;
    }

    .ic02-ranking-tile {
        min-height: 5.2rem;
        padding: .5rem;
        border-radius: 12px;
    }

    .ic02-ranking-tile span {
        font-size: clamp(1.05rem, 5vw, 1.75rem);
    }

    .ic02-ranking-tile.is-accent span {
        font-size: clamp(1.35rem, 6vw, 2.15rem);
    }

    .ic02-ranking-summary {
        margin-top: .8rem;
        padding-top: .75rem;
        font-size: .76rem;
        line-height: 1.75;
    }
}
