/* left gallery */
.full-width-page {
    width: 100%;
    padding: 16px;
}

#item {
    display: flex;
    flex-direction: row;
}

.gallery {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 600px));
    grid-auto-rows: minmax(400px, auto);
    gap: 16px;
    align-content: start;
}

.gallery .col img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1.4;
}

@media (max-width: 768px) {
    #item {
        flex-direction: column;
    }
}

@media (max-width: 992px) {
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        grid-auto-rows: minmax(320px, auto);
    }
}

/* right pannel */
.panel {
    margin: 40px 104px 24px 64px;
    width: 360px;
    line-height: 25px;
}

@media (max-width: 768px) {
    .panel {
        margin: 0;
        width: auto;
    }
}

.item-code {
    color: var(--clr-accent-blue);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
}

.name-and-price {
    margin-top: 8px;
    margin-bottom: 32px;
}

.name-and-price > :nth-child(1) {
    font-size: var(--fs-secondary-heading);
    font-weight: var(--fw-bold);
}

.name-and-price > :nth-child(2) {
    font-size: var(--fs-large);
    font-weight: var(--fw-bold);
}

.mini-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, 96px);
    gap: 6px;
}

.mini-gallery .col {
    cursor: pointer;
}

.mini-gallery .col img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.mini-gallery .col img.active {
    border: 2px solid var(--clr-accent-orange);
}

.mini-gallery .colorname {
    font-size: var(--fs-small);
    font-weight: var(--fw-light);
}

.panel .summary {
    margin: 40px 0;
    white-space: pre-line;
    font-weight: var(--fw-semi-bold);
}

.actions {
    margin-top: 16px;
}

.actions button {
    width: 100%;
    padding: 16px 24px;
    font-size: var(--fs-large);
}

.actions button + button {
    margin-top: 8px;
    background-color: white;
    color: black;
    border: 1px solid black;
}

/* accordion utility */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s ease-out;
}

.accordion.active > .accordion-content {
    grid-template-rows: 1fr;
}

/* item info */
.accordion-anchor:first-child {
    border-top: 1px solid var(--clr-gray-200);
}

.accordion.active .accordion-anchor > h3::after {
    rotate: 135deg;
    transition: all ease 0.5s;
}

.accordion:not(.active) .accordion-anchor > h3::after {
    rotate: 0deg;
    transition: all ease 0.5s;
}

.accordion-anchor > h3 {
    display: flex;
    align-items: center;
    padding: 16px 8px;
    justify-content: space-between;
}

.accordion-anchor > h3::after {
    content: '+';
    font-size: var(--fs-primary-heading);
}
  
.accordion-content > div {
    overflow: hidden;
}

.accordion-content li {
    white-space: pre-line;
}
/* end: accordion */

/* size options */
.size-section {
    margin-top: 24px;
}

.size-section > h4 { margin-bottom: 8px; }

.size-wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.size-wrapper > div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3em;
    border: 1px solid var(--clr-gray-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.size-wrapper > div:not(.disabled):hover {
    border: 1px solid var(--clr-gray-500);
}
.size-wrapper > div:not(.disabled).active {
    border: 2px solid var(--clr-accent-orange);
}
/* end: size options */

/* review section */
.review-section {
    padding: 16px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.review-section::after {
    content: '+';
    font-size: var(--fs-primary-heading);
}

/* 서버렌더되는 최근 리뷰 (모달 목록과 같은 톤) */
.review-preview {
    padding: 0 8px;
}

.review-preview__item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-5) 0;
    border-top: 1px solid var(--clr-border);
}

.review-preview__who {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
}

.review-preview__who .reviewer {
    font-weight: var(--fw-bold);
    color: var(--clr-text-primary);
}

.review-preview__who .datespan {
    flex-shrink: 0;
    color: var(--clr-text-tertiary);
    font-size: var(--fs-small);
}

.review-preview__content {
    margin: var(--sp-1) 0;
    color: var(--clr-text-primary);
    line-height: 1.6;
    white-space: pre-line;
}

.review-preview__more {
    width: 100%;
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: none;
    border: 1px solid var(--clr-border);
    cursor: pointer;
}
/* end: review section */

/* review modal */
.ds-modal.review-modal {
    width: 640px;
    max-width: 90%;
    height: 90%;
    max-height: 760px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.review-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-5);
    border-bottom: 1px solid var(--clr-border);
}

.review-modal__title {
    margin: 0;
    font-size: var(--fs-secondary-heading);
    font-weight: var(--fw-bold);
    color: var(--clr-text-primary);
    letter-spacing: 0.02em;
}

.review-modal__close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: none;
    font-size: 1.6em;
    line-height: 1;
    color: var(--clr-text-secondary);
    cursor: pointer;
    transition: color 0.15s ease;
}

.review-modal__close:hover {
    background: none;
    color: var(--clr-text-primary);
}

.review-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-2) var(--sp-5) var(--sp-4);
}
/* end: review modal */