@charset "utf-8";

/* ==============================
   sub-hero-zone
============================== */
.sub-hero-zone {
    display: flex;
    justify-content: center;
    padding: var(--size-4xl) var(--size-4xs) var(--size-3xl);
    background-color: var(--color-site-bg);
    border-bottom: 1px solid var(--color-site-line);
}
.sub-hero-shell {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    max-width: var(--size-site-min-width);
}
.sub-hero-copy {
    display: flex;
    flex-direction: column;
    gap: var(--size-7xs);
}
.sub-hero-label {
    font-family: var(--font-light);
    font-size: var(--font-3xs);
    color: var(--color-text-disabled);
    letter-spacing: 0.2em;
}
.sub-hero-heading {
    margin: 0;
    font-family: var(--font-bold-point);
    font-size: var(--font-5xl);
    line-height: var(--line-flat);
    color: var(--color-text);
}
.sub-hero-desc {
    max-width: 340px;
    text-align: right;
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-wide);
    color: var(--color-text);
    word-break: keep-all;
}

/* ==============================
   brand-story
============================== */
.brand-story {
    display: flex;
    flex-direction: column;
    gap: var(--size-s);
    margin: var(--size-3xl) 0;
}
.brand-story-lead {
    margin: 0;
    font-family: var(--font-bold-point);
    font-size: var(--font-2xl);
    line-height: var(--line-wide);
    color: var(--color-text);
    word-break: keep-all;
}
.brand-story-text {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-loose);
    color: var(--color-text);
    word-break: keep-all;
}

/* ==============================
   brand-values-grid
============================== */
.brand-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--size-2xs);
    margin-top: var(--size-l);
}
.brand-value-item {
    display: flex;
    flex-direction: column;
    gap: var(--size-4xs);
    padding: var(--size-s) 0;
    border-top: 1px solid var(--color-site-line);
}
.brand-value-num {
    font-family: var(--font-light);
    font-size: var(--font-4xs);
    line-height: var(--line-flat);
    color: var(--color-text-disabled);
    letter-spacing: 0.08em;
}
.brand-value-heading {
    margin: 0;
    font-family: var(--font-bold-point);
    font-size: var(--font-2xl);
    line-height: var(--line-flat);
    color: var(--color-text);
}
.brand-value-hanja {
    font-family: var(--font-regular-point);
    font-size: var(--font-s);
    color: var(--color-text-disabled);
    margin-left: var(--size-8xs);
}
.brand-value-text {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-loose);
    color: var(--color-text);
    word-break: keep-all;
}

/* ==============================
   brand-motto
============================== */
.brand-motto {
    display: flex;
    align-items: baseline;
    gap: var(--size-2xl);
    padding: var(--size-s) 0;
    border-top: 1px solid var(--color-site-line);
    border-bottom: 1px solid var(--color-site-line);
}
.brand-motto-label {
    flex-shrink: 0;
    font-family: var(--font-regular-point);
    font-size: var(--font-xs);
    color: var(--color-text-disabled);
}
.brand-motto-list {
    display: flex;
    gap: var(--size-2xl);
    list-style: none;
    padding: 0;
    margin: 0;
}
.brand-motto-list li {
    font-family: var(--font-regular-point);
    font-size: var(--font-m);
    color: var(--color-text);
    line-height: var(--line-flat);
}

/* ==============================
   brand-ci
============================== */
/* 로고 */
.brand-ci-logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--size-2xs);
}
.brand-ci-logo-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 16 / 7;
    border-radius: var(--radius-m);
    overflow: hidden;
}
.brand-ci-logo-item img {
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
}
.brand-ci-logo-light {
    background-color: #FFFFFF;
    border: 1px solid var(--color-site-line);
}
.brand-ci-logo-dark {
    background-color: #8C8C8C;
}
.brand-ci-logo-label {
    position: absolute;
    bottom: var(--size-6xs);
    left: var(--size-6xs);
    font-family: var(--font-light);
    font-size: var(--font-3xs);
    color: var(--color-text-disabled);
}
.brand-ci-logo-dark .brand-ci-logo-label {
    color: #FFFFFF;
}

/* 로고 의미 */
.brand-ci-meaning-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--size-2xs);
    margin: 0;
    padding: 0;
}
.brand-ci-meaning-item {
    display: flex;
    flex-direction: column;
    gap: var(--size-4xs);
    padding-top: var(--size-3xs);
    border-top: 1px solid var(--color-site-line);
}
.brand-ci-meaning-term {
    font-family: var(--font-bold-point);
    font-size: var(--font-xl);
    line-height: var(--line-flat);
    color: var(--color-text);
}
.brand-ci-meaning-term span {
    font-family: var(--font-regular-point);
    font-size: var(--font-s);
    color: var(--color-text-disabled);
    margin-left: var(--size-8xs);
}
.brand-ci-meaning-desc {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-wide);
    color: var(--color-text);
    word-break: keep-all;
}

/* 브랜드 컬러 */
.brand-ci-color-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--size-2xs);
}
.brand-ci-color-item {
    display: flex;
    flex-direction: column;
    gap: var(--size-5xs);
}
.brand-ci-color-info {
    display: flex;
    flex-direction: column;
    gap: var(--size-7xs);
}
.brand-ci-color-swatch {
    width: 100%;
    aspect-ratio: 16 / 4;
    border-radius: var(--radius-s);
    border: 1px solid var(--color-site-line);
}
.brand-ci-color-name {
    margin: 0;
    font-family: var(--font-regular);
    font-size: var(--font-s);
    color: var(--color-text);
    line-height: var(--line-flat);
}
.brand-ci-color-hex {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-3xs);
    color: var(--color-text-disabled);
    line-height: var(--line-flat);
    letter-spacing: 0.05em;
}

/* ==============================
   brand-color-panels (브랜드 의미)
============================== */
.brand-color-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-2xs);
    margin-bottom: var(--size-s);
}
.brand-color-panel {
    display: flex;
    flex-direction: column;
    gap: var(--size-s);
    padding: var(--size-l) var(--size-m);
    border: 1px solid var(--color-site-line);
    border-top: 3px solid transparent;
    border-radius: var(--radius-m);
    background-color: var(--color-site-bg);
}
.brand-color-panel--navy {
    border-top-color: #142C53;
}
.brand-color-panel--gold {
    border-top-color: #B49664;
}
.brand-color-panel-header {
    display: flex;
    align-items: baseline;
    gap: var(--size-2xs);
}
.brand-color-panel-ko {
    font-family: var(--font-bold-point);
    font-size: var(--font-xl);
    line-height: var(--line-flat);
}
.brand-color-panel--navy .brand-color-panel-ko {
    color: #142C53;
}
.brand-color-panel--gold .brand-color-panel-ko {
    color: #B49664;
}
.brand-color-panel-en {
    font-family: var(--font-light);
    font-size: var(--font-3xs);
    color: var(--color-text-disabled);
    letter-spacing: 0.06em;
}
.brand-color-panel-keywords {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.brand-color-panel-keywords li {
    font-family: var(--font-light);
    font-size: var(--font-2xs);
    color: var(--color-text-sub);
    letter-spacing: 0.03em;
}
.brand-color-panel-keywords li:not(:last-child)::after {
    content: "·";
    padding: 0 var(--size-7xs);
    color: var(--color-border);
}
.brand-color-panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--size-5xs);
    padding-top: var(--size-xs);
    border-top: 1px solid var(--color-site-line);
}
.brand-color-panel-subject {
    margin: 0;
    font-family: var(--font-regular-point);
    font-size: var(--font-s);
    line-height: var(--line-flat);
    color: var(--color-text-sub);
}
.brand-color-panel-desc {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-loose);
    color: var(--color-text);
    word-break: keep-all;
}
.brand-color-quote {
    margin: 0;
}
.brand-color-quote-text {
    margin: 0;
    font-family: var(--font-regular-point);
    font-size: var(--font-s);
    line-height: var(--line-loose);
    color: var(--color-text);
    word-break: keep-all;
}

/* ==============================
   brand-cert
============================== */
.brand-cert-group {
    margin-bottom: var(--size-l);
}
.brand-cert-group:last-child {
    margin-bottom: 0;
}
.brand-cert-group-title {
    margin: 0 0 var(--size-s);
    padding-bottom: var(--size-5xs);
    font-family: var(--font-regular-point);
    font-size: var(--font-m);
    line-height: var(--line-flat);
    color: var(--color-text);
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--color-site-line);
}
.brand-cert-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--size-2xs);
}
.brand-cert-item {
    display: flex;
    flex-direction: column;
    gap: var(--size-4xs);
}
.brand-cert-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-color: var(--color-site-bg);
    border: 1px solid var(--color-site-line);
    border-radius: var(--radius-s);
    overflow: hidden;
}
.brand-cert-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.brand-cert-name {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-xs);
    color: var(--color-text);
    line-height: var(--line-tight);
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
}
.brand-cert-img a {
    display: block;
    width: 100%;
    height: 100%;
}
.brand-cert-img a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.brand-cert-img a:hover img {
    transform: scale(1.03);
}

/* ==============================
   magnific-popup custom arrow
============================== */
.mfp-arrow:before,
.mfp-arrow:after,
.mfp-arrow .mfp-a,
.mfp-arrow .mfp-b {
    display: none !important;
}
.mfp-arrow-left:before,
.mfp-arrow-right:before {
    content: '' !important;
    display: none !important;
}
.mfp-arrow-left:after,
.mfp-arrow-right:after {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    font-family: xeicon !important;
    font-size: 28px !important;
    color: #fff !important;
    opacity: 1 !important;
    display: block !important;
}
.mfp-arrow-left:after {
    content: '\e93b' !important;
}
.mfp-arrow-right:after {
    content: '\e93e' !important;
}
.mfp-arrow {
    opacity: 0.7;
    transition: opacity 0.2s;
}
.mfp-arrow:hover {
    opacity: 1;
}

/* ==============================
   brand-location
============================== */
.brand-loc-map {
    width: 100%;
    aspect-ratio: 16 / 6;
    background-color: var(--color-site-bg);
    border: 1px solid var(--color-site-line);
    border-radius: var(--radius-m);
    overflow: hidden;
    margin-bottom: var(--size-l);
}
.brand-loc-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}
.brand-loc-info {
    display: flex;
    flex-direction: column;
}
.brand-loc-row {
    display: grid;
    grid-template-columns: var(--size-3xl) 1fr;
    padding: var(--size-3xs) 0;
    border-bottom: 1px solid var(--color-site-line);
    align-items: baseline;
    gap: var(--size-2xs);
}
.brand-loc-row:first-child {
    border-top: 1px solid var(--color-site-line);
}
.brand-loc-label {
    font-family: var(--font-light);
    font-size: var(--font-2xs);
    color: var(--color-text-disabled);
}
.brand-loc-value {
    font-family: var(--font-regular);
    font-size: var(--font-s);
    line-height: var(--line-normal);
    color: var(--color-text);
    word-break: keep-all;
}

/* ==============================
   main-hero-zone
============================== */
.main-hero-zone {
	display: flex;
	justify-content: center;
}
.main-hero-shell {
	width: 100%;
	max-width: var(--size-site-max-width);
}
.main-hero-zone .main-hero-image-area {
	position: relative;
	width: 100%;
	aspect-ratio: 1500 / 825;
	border-radius: var(--radius-m);
	overflow: hidden;
}
.main-hero-zone .main-hero-image-area > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.main-hero-zone .main-hero-copy-area {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	position: absolute;
	top: var(--size-4xl);
	left: var(--size-l);
	gap: var(--size-6xs);
	z-index: 1;
}
.main-hero-zone .main-hero-copy-area > * {
	opacity: 0;
}
.main-hero-zone .main-hero-copy-title {
	height: var(--size-5xl);
}
.main-hero-zone .main-hero-copy-title img {
	mix-blend-mode: color-burn;
}
.main-hero-zone .main-hero-copy-heading {
	margin-top: var(--size-3xs);
	margin-left: var(--size-4xs);
	font-family: var(--font-bold-point);
	font-size: var(--font-2xl);
	line-height: var(--line-normal);
	word-break: keep-all;
}
.main-hero-zone .main-hero-copy-text {
	margin-top: var(--size-6xs);
	margin-left: var(--size-4xs);
	font-family: var(--font-light);
	font-size: var(--font-m);
	line-height: var(--line-wide);
	word-break: keep-all;
}
.main-hero-zone .main-hero-copy-button {
	margin-top: var(--size-2xl);
	margin-left: var(--size-4xs);
}

/* ==============================
   main-about-zone
============================== */
.main-about-zone {
	display: flex;
	justify-content: center;
	margin-top: var(--size-6xl);
}
.main-about-shell {
	display: flex;
	gap: var(--size-4xl);
	width: 100%;
	max-width: var(--size-site-max-width);
}
.main-about-zone .main-about-copy-area {
	display: flex;
	flex-flow: column;
	justify-content: center;
	flex-grow: 1;
	padding-top: var(--size-6xs);
}
.main-about-zone .main-about-heading {
	margin: 0;
	font-family: var(--font-bold-point);
	font-size: var(--font-2xl);
	line-height: var(--line-wide);
	color: var(--color-text);
	word-break: keep-all;
}
.main-about-zone .main-about-text {
	margin: var(--size-s) 0 0;
	font-family: var(--font-light);
	font-size: var(--font-s);
	line-height: var(--line-loose);
	color: var(--color-text);
	word-break: keep-all;
}
.main-about-zone .main-about-gallery-area {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--size-7xs);
}
.main-about-zone .main-about-gallery-slot {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	border-radius: var(--radius-s);
	min-height: var(--size-main-about-image-height);
	overflow: hidden;
}

/* ==============================
   main-products-zone
============================== */
.main-products-zone {
	display: flex;
	justify-content: center;
	margin-top: var(--size-6xl);
}
.main-products-shell {
	display: flex;
	flex-flow: column;
	gap: var(--size-5xl);
	width: 100%;
	max-width: var(--size-site-max-width);
}
.main-products-zone .main-products-item {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
}
.main-products-zone .main-products-image-area {
	display: flex;
	justify-content: flex-start;
	height: var(--size-main-products-image-height);
}
.main-products-zone .main-products-item.image-right .main-products-image-area {
	justify-content: flex-end;
}
.main-products-zone .main-products-image-area img {
	border-radius: var(--radius-s);
}
.main-products-zone .main-products-copy-area {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.main-products-zone .main-products-category {
	display: block;
	margin-bottom: var(--size-7xs);
	font-family: var(--font-regular-point);
	font-size: var(--font-xs);
	line-height: var(--line-flat);
	letter-spacing: 0.08em;
	color: var(--color-text-sub);
}
.main-products-zone .main-products-heading {
	margin: 0;
	font-family: var(--font-bold-point);
	font-size: var(--font-xl);
	line-height: var(--line-tight);
	word-break: keep-all;
}
.main-products-zone .main-products-text {
	margin-top: var(--size-2xs);
	font-family: var(--font-light);
	font-size: var(--font-s);
	line-height: var(--line-loose);
	word-break: keep-all;
}
.main-products-zone .main-products-button {
	margin-top: var(--size-m);
}

/* ==============================
   main-progress-zone
============================== */
.main-progress-zone {
	display: flex;
	justify-content: center;
	margin-top: var(--size-6xl);
}
.main-progress-shell {
	display: flex;
	flex-flow: column;
	width: 100%;
	max-width: var(--size-site-max-width);
}
.main-progress-zone .main-progress-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--size-3xs) minmax(0, 1fr);
	align-items: center;
	column-gap: var(--size-2xl);
}
.main-progress-zone .main-progress-item:not(:first-child) {
	margin-top: -7%;
}
.main-progress-zone .main-progress-card {
	display: flex;
	flex-flow: column;
	align-items: center;
	width: fit-content;
	max-width: 100%;
}
.main-progress-zone .main-progress-empty-area {
	width: 100%;
}
.main-progress-zone .main-progress-image-area {
	width: 100%;
	height: var(--size-main-progress-image-height);
	overflow: hidden;
	border-radius: var(--radius-s);
}
.main-progress-zone .main-progress-image-area img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.main-progress-zone .main-progress-item:nth-child(3) .main-progress-image-area img {
	object-position: 70% center;
}
.main-progress-zone .main-progress-item.image-left .main-progress-card {
	justify-self: start;
}
.main-progress-zone .main-progress-item.image-right .main-progress-card {
	justify-self: end;
}
.main-progress-zone .main-progress-step-area {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.main-progress-zone .main-progress-step-area .step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-top: calc(-1 * var(--size-4xl));
	padding: var(--size-3xs) 0;
	font-family: var(--font-regular-point);
	font-size: var(--font-l);
	line-height: var(--line-wide);
	text-align: center;
}
.main-progress-zone .main-progress-step-area .step::before,
.main-progress-zone .main-progress-step-area .step::after {
	content: "";
	position: absolute;
	left: 50%;
	width: var(--size-3xs);
	height: var(--border-s);
	background-color: var(--color-text-disabled);
	transform: translateX(-50%);
}
.main-progress-zone .main-progress-step-area .step::before {
	top: 0;
}
.main-progress-zone .main-progress-step-area .step::after {
	bottom: 0;
}
.main-progress-zone .main-progress-copy-area {
	display: flex;
	flex-flow: column;
	align-items: center;
	margin-top: var(--size-xs);
	text-align: center;
}
.main-progress-zone .main-progress-heading {
	font-family: var(--font-bold-point);
	font-size: var(--font-xl);
	line-height: var(--line-tight);
	word-break: keep-all;
}
.main-progress-zone .main-progress-text {
	margin-top: var(--size-2xs);
	font-family: var(--font-light);
	font-size: var(--font-s);
	line-height: var(--line-loose);
	word-break: keep-all;
}

/* ==============================
   process-steps
============================== */
.process-steps {
    display: flex;
    flex-direction: column;
    gap: var(--size-4xl);
}
.hemp-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--size-l);
    row-gap: var(--size-m);
    margin-top: var(--size-s);
}

/* ==============================
   funeral-grid (장례용품 4열 그리드)
============================== */
.funeral-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--size-m) var(--size-2xs);
    margin-top: var(--size-s);
}
.funeral-item {
    display: flex;
    flex-direction: column;
    gap: var(--size-5xs);
}
.funeral-item-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-s);
    overflow: hidden;
    background-color: #FFFFFF;
    border: 1px solid var(--color-site-line);
}
/* 유골함 섹션(누끼 png)은 기존 사이트 배경 유지 */
#funeral-urn .funeral-item-img {
    background-color: var(--color-site-bg);
    border: none;
}
.funeral-item-img img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.6s ease;
}
.funeral-item:hover .funeral-item-img img {
    transform: scale(1.04);
}
.funeral-item-name {
    margin: 0;
    text-align: center;
    font-family: var(--font-regular);
    font-size: var(--font-s);
    line-height: var(--line-tight);
    color: var(--color-text);
    word-break: keep-all;
}

/* ==============================
   urn-premium (삼중진공 유골함)
============================== */
.urn-premium {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-3xl);
    align-items: center;
}
.urn-premium-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.urn-premium-figure {
    position: relative;
    display: inline-block;
    max-height: 480px;
    --callout-offset: 52px; /* 번호가 이미지 밖으로 나가는 거리 */
}
.urn-premium-figure img {
    display: block;
    max-width: 100%;
    max-height: 480px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* 리더라인 콜아웃: 번호 → 선 → 점 (이미지 좌측 바깥) */
.urn-callout {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
}
.urn-callout-dot {
    position: absolute;
    top: 0;
    left: var(--dot-x, 50%);
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%);
    background-color: var(--color-site-brand);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(20, 44, 83, 0.15);
}
.urn-callout-line {
    position: absolute;
    top: 0;
    left: var(--dot-x, 50%);
    right: calc(-1 * var(--callout-offset));
    height: 1px;
    background-color: var(--color-site-brand);
}
.urn-callout-num {
    position: absolute;
    top: 0;
    right: calc(-1 * var(--callout-offset));
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    transform: translate(50%, -50%);
    background-color: var(--color-site-brand);
    color: #FFFFFF;
    font-family: var(--font-bold-point);
    font-size: var(--font-4xs);
    border-radius: 50%;
}
/* 왼쪽 방향 콜아웃 (이미지 안쪽 좌측 끝) */
.urn-callout--left-in .urn-callout-line {
    left: -26px;
    right: calc(100% - var(--dot-x, 50%));
}
.urn-callout--left-in .urn-callout-num {
    left: 0;
    right: auto;
    transform: translate(-200%, -50%);
}
.urn-parts {
    display: flex;
    flex-direction: column;
    gap: var(--size-6xs);
    margin: var(--size-6xs) 0 0;
    padding: 0;
    list-style: none;
}
.urn-parts li {
    display: flex;
    align-items: center;
    gap: var(--size-5xs);
}
.urn-parts-num {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-color: var(--color-site-brand);
    color: #FFFFFF;
    font-family: var(--font-bold-point);
    font-size: var(--font-4xs);
    border-radius: 50%;
}
.urn-parts-name {
    font-family: var(--font-regular);
    font-size: var(--font-s);
    color: var(--color-text);
    letter-spacing: 0.02em;
}
.urn-premium-body {
    display: flex;
    flex-direction: column;
    gap: var(--size-4xs);
}
.urn-premium-lead {
    margin: 0;
    font-family: var(--font-bold-point);
    font-size: var(--font-xl);
    line-height: var(--line-tight);
    color: var(--color-text);
}
.urn-premium-text {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-loose);
    color: var(--color-text);
    word-break: keep-all;
}
.urn-premium-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-7xs) var(--size-6xs);
    margin: var(--size-5xs) 0 0;
    padding: 0;
    list-style: none;
}
.urn-premium-features li {
    padding: 6px 14px;
    border: 1px solid var(--color-site-line);
    border-radius: 999px;
    font-family: var(--font-regular);
    font-size: var(--font-xs);
    color: var(--color-text-sub);
    letter-spacing: 0.04em;
}
.hemp-process-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--size-7xs);
}
.hemp-process-num {
    font-family: var(--font-light);
    font-size: var(--font-4xs);
    line-height: var(--line-flat);
    color: var(--color-text-disabled);
    letter-spacing: 0.08em;
}
.hemp-process-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-s);
    overflow: hidden;
    background-color: var(--color-site-bg);
}
.hemp-process-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.hemp-process-item:hover .hemp-process-img img {
    transform: scale(1.04);
}
/* Chevron 화살표: 한 행(3개) 안에서 이어지는 셀 사이 */
.hemp-process-item:not(:nth-child(3n)):not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(50% + var(--size-7xs));
    right: calc(-1 * var(--size-l) / 2);
    width: 14px;
    height: 14px;
    border-top: 1.5px solid var(--color-text-sub);
    border-right: 1.5px solid var(--color-text-sub);
    transform: translate(50%, -50%) rotate(45deg);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}
.hemp-process-item:hover::after {
    opacity: 1;
    transform: translate(60%, -50%) rotate(45deg);
}
.process-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-2xl);
    align-items: center;
}
.process-step--reverse {
    direction: rtl;
}
.process-step--reverse > * {
    direction: ltr;
}
.process-step-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-m);
    overflow: hidden;
    background-color: var(--color-site-bg);
}
.process-step-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.process-step-body {
    display: flex;
    flex-direction: column;
    gap: var(--size-4xs);
}
.process-step-num {
    font-family: var(--font-light);
    font-size: var(--font-4xs);
    line-height: var(--line-flat);
    letter-spacing: 0.08em;
    color: var(--color-text-disabled);
}
.process-step-title {
    margin: 0 0 var(--size-5xs);
    font-family: var(--font-bold-point);
    font-size: var(--font-xl);
    line-height: var(--line-tight);
    color: var(--color-text);
}
.process-step-desc {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-loose);
    color: var(--color-text-sub);
    word-break: keep-all;
}

/* ==============================
   suui-products (수의 제품)
============================== */
.suui-products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-2xl);
    align-items: start;
    margin-top: var(--size-m);
}
.suui-product {
    display: flex;
    flex-direction: column;
    gap: var(--size-s);
}
.suui-product-viewer {
    display: flex;
    flex-direction: column;
    gap: var(--size-s);
}
.suui-product-main-img {
    position: relative;
    width: 100%;
}
.suui-product-main-img::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background-image: var(--landscape-bg, url('../../images/default/suui_image2.jpg'));
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0.6;
    -webkit-mask-image:
        linear-gradient(to top, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to top, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
    mask-composite: intersect;
    pointer-events: none;
    z-index: 0;
}
.suui-product-main-img > img {
    position: relative;
    z-index: 1;
}
.suui-product-main-img > .suui-product-colors-overlay {
    z-index: 2;
}
.suui-product-main-img img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}
.suui-product-main-img img.is-switching {
    opacity: 0;
}
.suui-product-colors-overlay {
    position: absolute;
    bottom: var(--size-4xs);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: var(--size-7xs);
}
.suui-product-colors-overlay .suui-product-row-label {
    font-size: var(--font-4xs);
}
.suui-product-colors-overlay .suui-product-colors li {
    width: var(--size-4xs);
    height: var(--size-4xs);
}
.suui-product-thumbs {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
}
.suui-product-thumbs li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.4s ease;
}
.suui-product-thumbs li:hover {
    opacity: 0.8;
}
.suui-product-thumbs li.is-active {
    opacity: 1;
}
.suui-product-thumbs li::after {
    content: '✓ 선택됨';
    display: block;
    margin-top: var(--size-7xs);
    padding: 2px 8px;
    background: var(--color-site-bg-soft);
    border-radius: var(--radius-s);
    font-family: var(--font-light);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: var(--color-text);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.suui-product-thumbs li.is-active::after {
    opacity: 1;
}
.suui-product-thumbs li img {
    display: block;
    width: 80%;
    height: auto;
}
.suui-product-foot {
    display: flex;
    flex-direction: column;
    gap: var(--size-3xs);
}
.suui-product-head {
    display: flex;
    flex-direction: column;
    gap: var(--size-7xs);
    padding-bottom: var(--size-3xs);
    border-bottom: 1px solid var(--color-site-line);
}
.suui-product-name {
    margin: 0;
    font-family: var(--font-bold-point);
    font-size: var(--font-2xl);
    line-height: var(--line-tight);
    letter-spacing: 0.02em;
    color: var(--color-text);
}
.suui-product-category {
    display: inline-block;
    margin-bottom: var(--size-5xs);
    font-family: var(--font-medium);
    font-size: var(--font-xs);
    line-height: var(--line-flat);
    letter-spacing: 0.08em;
    color: var(--color-text-sub);
}
.suui-product-tagline {
    margin: 0;
    font-family: var(--font-regular-point);
    font-size: var(--font-s);
    line-height: var(--line-loose);
    color: var(--color-text-sub);
    word-break: keep-all;
}
.suui-product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-3xs);
    margin: 0;
    padding: var(--size-5xs) 0;
    border-top: 1px solid var(--color-site-line);
    border-bottom: 1px solid var(--color-site-line);
}
.suui-product-spec {
    display: grid;
    grid-template-columns: 2.8em 1fr;
    align-items: baseline;
    gap: var(--size-4xs);
}
.suui-product-spec dt {
    text-align: left;
    font-family: var(--font-light);
    font-size: var(--font-3xs);
    color: var(--color-text-disabled);
    letter-spacing: 0.04em;
}
.suui-product-spec dd {
    margin: 0;
    text-align: left;
    font-family: var(--font-regular);
    font-size: var(--font-s);
    color: var(--color-text);
}
.suui-product-row {
    display: flex;
    flex-direction: column;
    gap: var(--size-6xs);
}
.suui-product-row-label {
    font-family: var(--font-light);
    font-size: var(--font-3xs);
    color: var(--color-text-disabled);
    letter-spacing: 0.04em;
}
.suui-product-colors {
    display: flex;
    gap: var(--size-7xs);
    list-style: none;
    padding: 0;
    margin: 0;
}
.suui-product-colors li {
    width: var(--size-3xs);
    height: var(--size-3xs);
    border-radius: 50%;
    border: 1px solid var(--color-site-line);
}
.suui-product-components {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-loose);
    color: var(--color-text);
    word-break: keep-all;
}
.suui-product-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--size-3xs);
    margin-top: var(--size-3xs);
    padding: var(--size-3xs) var(--size-2xs);
    background-color: var(--color-site-bg);
    border-radius: var(--radius-s);
}
.suui-product-price-label {
    font-family: var(--font-light);
    font-size: var(--font-2xs);
    color: var(--color-text-sub);
    letter-spacing: 0.08em;
}
.suui-product-price-value {
    font-family: var(--font-bold-point);
    font-size: var(--font-l);
    line-height: var(--line-flat);
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.suui-product-price-value .unit {
    font-family: var(--font-light);
    font-size: var(--font-s);
    color: var(--color-text-sub);
    margin-left: 3px;
}
.suui-product-fiti {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-7xs);
    margin-top: var(--size-4xs);
    padding-top: var(--size-3xs);
    border-top: 1px solid var(--color-site-line);
    font-family: var(--font-light);
    font-size: var(--font-xs);
    color: var(--color-text-sub);
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: color 0.25s;
}
.suui-product-fiti:hover {
    color: var(--color-text);
}
.suui-product-fiti-arrow {
    transition: transform 0.25s;
}
.suui-product-fiti:hover .suui-product-fiti-arrow {
    transform: translateX(4px);
}

/* ==============================
   space-gallery (성심 공간)
============================== */
.space-desc {
    margin: 0 0 var(--size-s);
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-loose);
    color: var(--color-text-sub);
    word-break: keep-all;
}
.space-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-2xs);
}
.space-photos--3 {
    grid-template-columns: 2fr 1fr;
}
.space-photos--3 .space-photo:first-child {
    grid-row: span 2;
    aspect-ratio: auto;
}
.space-photo {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-m);
    background-color: var(--color-site-bg);
}
.space-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==============================
   main-cs-zone
============================== */
.main-cs-zone {
	display: flex;
	justify-content: center;
	margin-top: var(--size-6xl);
}
.main-cs-shell {
	display: flex;
	flex-flow: column;
	width: 100%;
}
.main-cs-zone .main-cs-info-area {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	padding: 0 var(--size-l);
}
.main-cs-zone .main-cs-info-item {
	display: flex;
	flex-flow: column;
	align-items: center;
	text-align: center;
}
.main-cs-zone .main-cs-info-item .label {
	font-family: var(--font-light);
	font-size: var(--font-s);
	line-height: var(--line-tight);
	word-break: keep-all;
}
.main-cs-zone .main-cs-info-item .value {
	margin-top: var(--size-4xs);
	font-family: var(--font-bold-point);
	font-size: var(--font-m);
	line-height: var(--line-tight);
	word-break: keep-all;
}
.main-cs-zone .main-cs-image-area {
	margin-top: var(--size-l);
	width: 100%;
	height: 320px;
	overflow: hidden;
	border-radius: var(--radius-m);
}
.main-cs-zone .main-cs-image-area img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}

/* ==============================
   sub-suui
============================== */
.sub-suui-hero {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--size-2xl);
    align-items: center;
}
.sub-suui-hero-copy {
    display: flex;
    flex-direction: column;
    gap: var(--size-3xs);
}
.sub-suui-hero-label {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-4xs);
    line-height: var(--line-flat);
    letter-spacing: 0.18em;
    color: var(--color-text-disabled);
}
.sub-suui-hero-heading {
    margin: 0;
    font-family: var(--font-bold-point);
    font-size: var(--font-2xl);
    line-height: var(--line-wide);
    color: var(--color-text);
    word-break: keep-all;
}
.sub-suui-hero-text {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-loose);
    color: var(--color-text);
    word-break: keep-all;
}
.sub-suui-hero-visual {
    position: relative;
    min-height: 620px;
    border: 1px solid rgba(180, 150, 100, 0.2);
    border-radius: var(--radius-m);
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 38%),
        linear-gradient(180deg, rgba(247, 241, 230, 0.72) 0%, rgba(233, 224, 208, 0.58) 100%);
    overflow: hidden;
}
.sub-suui-hero-visual::before,
.sub-suui-hero-visual::after {
    content: "";
    position: absolute;
    background-color: rgba(180, 150, 100, 0.1);
}
.sub-suui-hero-visual::before {
    top: 12%;
    left: 7%;
    width: 86%;
    height: 30%;
    border-radius: var(--radius-m);
}
.sub-suui-hero-visual::after {
    left: 36%;
    bottom: 8%;
    width: 28%;
    height: 48%;
    border-radius: var(--radius-m);
}
.sub-suui-hero-visual-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-4xs);
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.sub-suui-hero-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--size-8xs) var(--size-6xs);
    border: 1px solid rgba(180, 150, 100, 0.28);
    border-radius: 999px;
    font-family: var(--font-light);
    font-size: var(--font-4xs);
    line-height: var(--line-flat);
    letter-spacing: 0.08em;
    color: var(--color-text-disabled);
    background-color: rgba(255, 250, 242, 0.65);
}
.sub-suui-hero-visual-title {
    margin: 0;
    font-family: var(--font-bold-point);
    font-size: var(--font-l);
    line-height: var(--line-tight);
    color: var(--color-text);
}
.sub-suui-hero-visual-desc {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-3xs);
    line-height: var(--line-wide);
    color: var(--color-text-disabled);
}

.sub-suui-value-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--size-2xl);
    align-items: start;
}
.sub-suui-value-quote {
    display: flex;
    flex-direction: column;
    gap: var(--size-3xs);
    padding-top: var(--size-3xs);
}
.sub-suui-value-kicker {
    margin: 0;
    font-family: var(--font-regular-point);
    font-size: var(--font-xs);
    line-height: var(--line-flat);
    color: var(--color-text-disabled);
}
.sub-suui-value-title {
    margin: 0;
    font-family: var(--font-bold-point);
    font-size: var(--font-2xl);
    line-height: var(--line-wide);
    color: var(--color-text);
    word-break: keep-all;
}
.sub-suui-value-text {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-loose);
    color: var(--color-text);
    word-break: keep-all;
}
.sub-suui-value-points {
    display: flex;
    flex-direction: column;
    gap: var(--size-2xs);
}
.sub-suui-point-card {
    display: flex;
    flex-direction: column;
    gap: var(--size-4xs);
    padding: var(--size-s) var(--size-m);
    border: 1px solid var(--color-site-line);
    border-radius: var(--radius-m);
    background-color: rgba(255, 251, 244, 0.45);
}
.sub-suui-point-title {
    margin: 0;
    font-family: var(--font-bold-point);
    font-size: var(--font-m);
    line-height: var(--line-tight);
    color: var(--color-text);
}
.sub-suui-point-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-5xs);
    margin: 0;
    padding-left: var(--size-3xs);
}
.sub-suui-point-list li {
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-loose);
    color: var(--color-text);
    word-break: keep-all;
}

.sub-suui-products {
    display: flex;
    flex-direction: column;
    gap: var(--size-4xl);
}
.sub-suui-product-card {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--size-2xl);
    align-items: start;
    padding-bottom: var(--size-2xl);
    border-bottom: 1px solid var(--color-site-line);
}
.sub-suui-product-visual {
    position: sticky;
    top: calc(var(--size-site-header-height) + var(--size-2xs));
}
.sub-suui-product-visual-stage {
    position: relative;
    min-height: 900px;
    border: 1px solid rgba(180, 150, 100, 0.18);
    border-radius: var(--radius-m);
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0) 24%),
        linear-gradient(180deg, rgba(197, 227, 220, 0.72) 0%, rgba(191, 225, 216, 0.64) 100%);
}
.sub-suui-product-visual-stage.is-ivory {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0) 24%),
        linear-gradient(180deg, rgba(241, 231, 171, 0.76) 0%, rgba(234, 221, 155, 0.68) 100%);
}
.sub-suui-product-visual-stage::before,
.sub-suui-product-visual-stage::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.26);
}
.sub-suui-product-visual-stage::before {
    top: 8%;
    width: 90%;
    height: 28%;
    border-radius: var(--radius-m);
}
.sub-suui-product-visual-stage::after {
    bottom: 0;
    width: 32%;
    height: 63%;
    border-top-left-radius: var(--radius-m);
    border-top-right-radius: var(--radius-m);
}
.sub-suui-product-mark {
    position: absolute;
    left: var(--size-l);
    bottom: var(--size-3xl);
    font-family: var(--font-regular-point);
    font-size: 78px;
    line-height: 1;
    color: rgba(180, 150, 100, 0.78);
}
.sub-suui-product-visual-title {
    position: absolute;
    left: var(--size-l);
    bottom: var(--size-xl);
    margin: 0;
    font-family: var(--font-bold-point);
    font-size: var(--font-l);
    line-height: var(--line-tight);
    color: rgba(76, 54, 38, 0.92);
}
.sub-suui-product-visual-desc {
    position: absolute;
    left: var(--size-l);
    bottom: var(--size-s);
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-3xs);
    line-height: var(--line-wide);
    color: rgba(76, 54, 38, 0.72);
}
.sub-suui-product-copy {
    display: flex;
    flex-direction: column;
    gap: var(--size-l);
    padding-top: var(--size-m);
}
.sub-suui-product-head {
    display: flex;
    flex-direction: column;
    gap: var(--size-5xs);
}
.sub-suui-product-hanja {
    font-family: var(--font-regular-point);
    font-size: 56px;
    line-height: 1;
    color: #b49664;
}
.sub-suui-product-title {
    margin: 0;
    font-family: var(--font-bold-point);
    font-size: 36px;
    line-height: var(--line-tight);
    color: #922428;
    word-break: keep-all;
}
.sub-suui-product-lead {
    margin: 0;
    font-family: var(--font-regular-point);
    font-size: var(--font-m);
    line-height: var(--line-normal);
    color: var(--color-text);
    word-break: keep-all;
}
.sub-suui-product-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-2xs);
}
.sub-suui-product-info {
    display: flex;
    flex-direction: column;
    gap: var(--size-4xs);
}
.sub-suui-product-info-title {
    margin: 0;
    font-family: var(--font-bold);
    font-size: var(--font-m);
    line-height: var(--line-tight);
    color: var(--color-text);
}
.sub-suui-product-meta {
    display: flex;
    flex-direction: column;
    gap: var(--size-7xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
.sub-suui-product-meta li {
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-wide);
    color: var(--color-text);
}
.sub-suui-color-chips {
    display: flex;
    align-items: center;
    gap: var(--size-6xs);
}
.sub-suui-color-chip {
    display: inline-flex;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(180, 150, 100, 0.22);
    border-radius: 50%;
}
.sub-suui-color-chip.is-mint {
    background-color: #b7dbc8;
}
.sub-suui-color-chip.is-pink {
    background-color: #e2bed0;
}
.sub-suui-color-chip.is-gold {
    background-color: #e7ddb1;
}
.sub-suui-color-chip.is-white {
    background-color: #f1f0ea;
}
.sub-suui-color-chip.is-yellow {
    background-color: #eedc79;
}
.sub-suui-product-composition {
    display: flex;
    flex-direction: column;
    gap: var(--size-4xs);
    padding-top: var(--size-2xs);
    border-top: 1px solid var(--color-site-line);
}
.sub-suui-product-composition-text {
    margin: 0;
    font-family: var(--font-light);
    font-size: var(--font-s);
    line-height: var(--line-loose);
    color: var(--color-text);
    word-break: keep-all;
}
.sub-suui-price-box {
    display: inline-flex;
    flex-direction: column;
    align-self: flex-end;
    border: 1px solid var(--color-text);
    background-color: rgba(255, 252, 245, 0.88);
}
.sub-suui-price-row {
    display: grid;
    grid-template-columns: auto auto;
}
.sub-suui-price-row:not(:first-child) {
    border-top: 1px solid var(--color-text);
}
.sub-suui-price-row .label,
.sub-suui-price-row .value {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--size-4xs);
    font-size: var(--font-s);
    line-height: var(--line-flat);
}
.sub-suui-price-row .label {
    border-right: 1px solid var(--color-text);
    font-family: var(--font-bold);
    color: var(--color-text);
}
.sub-suui-price-row .value {
    font-family: var(--font-bold-point);
    color: var(--color-text);
}
.sub-suui-price-row.is-accent .value {
    color: #922428;
}

.sub-suui-exhibit-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--size-2xl);
    align-items: start;
}
.sub-suui-exhibit-copy {
    display: flex;
    flex-direction: column;
    gap: var(--size-s);
}
.sub-suui-exhibit-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-2xs);
}
.sub-suui-exhibit-photo {
    min-height: 320px;
    border: 1px solid var(--color-site-line);
    border-radius: var(--radius-m);
    overflow: hidden;
    background-color: rgba(255, 251, 244, 0.45);
}