>
![]()
.
* z-index:-1 로 "배경 위·콘텐츠 아래"에 깔려 본문 가독성은 그대로 유지.
* mix-blend-mode 로 섹션 배경색과 합성하고, 강도는 opacity 로 조절.
*
* ── 호스트 요건 (필수) ──────────────────────────────
* 부모
에 아래 둘이 반드시 있어야 정상 동작:
* position: relative; // absolute inset:0 의 기준 컨테이너
* isolation: isolate; // mix-blend 합성을 이 섹션 내부로 한정 (뒤 섹션과 안 섞이게)
*
* ── 섹션별 조정 ─────────────────────────────────────
* 호스트에서 CSS 변수만 덮어쓰면 됨 (별도 SCSS 변형 만들지 말 것):
* --section-bg-opacity : 합성 강도 (기본 0.6)
* --section-bg-blend : 합성 모드 (기본 overlay)
*/
.section-background {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
mix-blend-mode: var(--section-bg-blend, overlay);
opacity: var(--section-bg-opacity, 0.6);
}
.section-background img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ===================================================
Card components
Variants: base / --person / --publication / --event
=================================================== */
/* ── Base card (News, Activities) ── */
.ui-card {
display: flex;
flex-direction: column;
border-radius: var(--radius-md);
background: var(--clr-background-card);
border: 1px solid var(--clr-gray-200);
overflow: hidden;
text-decoration: none;
color: inherit;
}
.ui-card:hover .ui-card__img {
transform: scale(1.04);
}
.ui-card:hover .ui-card__title {
color: var(--clr-primary-400);
}
.ui-card__img {
position: relative;
overflow: hidden;
aspect-ratio: 16/9;
background: var(--clr-gray-100);
flex-shrink: 0;
transition: transform 0.4s ease;
}
.ui-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ui-card__body {
display: flex;
flex-direction: column;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
flex: 1;
}
.ui-card__meta {
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
}
.ui-card__category {
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--clr-primary-400);
}
.ui-card__date {
font-size: var(--body-xs-fs);
color: var(--clr-gray-400);
}
.ui-card__title {
font-size: var(--heading-sm-fs);
font-weight: 600;
line-height: 1.4;
color: var(--clr-gray-900);
transition: color 0.25s ease;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 3;
}
.ui-card__excerpt {
font-size: var(--body-sm-fs);
line-height: 1.65;
color: var(--clr-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 3;
}
.ui-card__author {
font-size: var(--body-xs-fs);
color: var(--clr-gray-400);
margin-top: auto;
}
.ui-card {
/* flat variant (상세 페이지 Latest news — 박스 없이 이미지 flush + 아래 텍스트) */
}
.ui-card--flat {
border: none;
border-radius: 0;
background: transparent;
overflow: visible;
}
.ui-card--flat .ui-card__img {
border-radius: 0;
}
.ui-card--flat .ui-card__body {
padding-inline: 0;
padding-bottom: 0;
padding-top: var(--spacing-md);
}
.ui-card {
/* horizontal list-row variant (Events list, Activities list) */
}
.ui-card--row {
flex-direction: row;
align-items: flex-start;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
border-radius: var(--radius-sm);
padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
border: 1px solid var(--clr-gray-200);
background: #fff;
}
.ui-card--row:hover .ui-card__img {
transform: scale(1.04);
}
.ui-card--row:hover .ui-card__title {
color: var(--clr-primary-400);
}
.ui-card--row .ui-card__img {
aspect-ratio: auto;
width: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem);
height: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem);
flex-shrink: 0;
border-radius: var(--radius-sm);
}
.ui-card--row .ui-card__body {
padding: 0;
gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem);
}
/* ── Person card (People page — 2-col grid, 좌측 3:4 풀하이트 이미지) ── */
.ui-card--person {
display: flex;
flex-direction: row;
align-items: stretch;
border-radius: var(--radius-md);
background: #fff;
border: 1px solid var(--clr-gray-200);
overflow: hidden;
height: 100%;
cursor: pointer;
transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.12s ease;
}
.ui-card--person:hover {
box-shadow: 0 6px 24px rgba(0, 74, 130, 0.12);
border-color: var(--clr-primary-200, #b3d4ed);
}
.ui-card--person:active {
transform: scale(0.985);
box-shadow: 0 2px 8px rgba(0, 74, 130, 0.08);
}
.ui-card--person .ui-card__thumb {
flex: 0 0 clamp(16rem, 2.5889967638vw + 15.0291262136rem, 20rem);
align-self: stretch;
overflow: hidden;
background: var(--clr-gray-100);
}
.ui-card--person .ui-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ui-card--person {
/* 사진 없는 인물 — 이름 기반 색조 그라데이션 + 이니셜 텍스트 */
}
.ui-card--person .ui-card__thumb--placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, hsl(calc(207deg + var(--ph-hue, 0deg)), 55%, 90%), hsl(calc(207deg + var(--ph-hue, 0deg)), 55%, 82%));
}
.ui-card--person .ui-card__thumb-initial {
font-size: clamp(3.2rem, 0.7766990291vw + 2.9087378641rem, 4.4rem);
font-weight: 700;
line-height: 1;
color: hsl(calc(207deg + var(--ph-hue, 0deg)), 45%, 32%);
letter-spacing: -0.02em;
user-select: none;
}
.ui-card--person .ui-card__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0;
padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
}
.ui-card--person .ui-card__name {
font-size: var(--heading-xs-fs);
font-weight: 700;
color: var(--clr-gray-900);
line-height: 1.3;
}
.ui-card--person .ui-card__name button {
all: unset;
cursor: pointer;
display: block;
}
.ui-card--person .ui-card__role {
font-size: var(--body-sm-fs);
font-weight: 700;
color: var(--clr-primary-500, var(--clr-primary-400));
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 0.5rem;
}
.ui-card--person .ui-card__affiliation {
font-size: var(--body-xs-fs);
color: var(--clr-text-secondary);
line-height: 1.5;
margin-top: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
}
.ui-card--person .ui-card__tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
list-style: none;
padding: 0;
margin-top: 1rem;
}
.ui-card--person .ui-card__tag {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
border: 1px solid var(--clr-gray-300);
background: var(--clr-gray-100);
color: var(--clr-gray-700);
font-size: var(--body-xs-fs);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.ui-card--person .ui-card__tag:hover {
border-color: var(--clr-primary-400);
color: var(--clr-primary-700, var(--clr-primary-900));
}
.ui-card--person .ui-card__tag--leader {
border-color: var(--clr-primary-400);
background: var(--clr-primary-50, #e6f2fa);
color: var(--clr-primary-700, var(--clr-primary-900));
}
.ui-card--person .ui-card__tag-leader-mark {
color: var(--clr-primary-400);
font-size: 0.9em;
line-height: 1;
}
.ui-card--person .ui-card__email {
font-size: var(--body-xs-fs);
color: var(--clr-primary-400);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1rem;
}
.ui-card--person .ui-card__email:hover {
text-decoration: underline;
}
.ui-card--person .ui-card__links {
display: flex;
gap: 0.8rem;
margin-top: 1rem;
}
.ui-card--person .ui-card__links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.8rem;
height: 2.8rem;
border-radius: 50%;
border: 1px solid var(--clr-gray-300);
color: var(--clr-gray-500);
font-size: var(--body-sm-fs);
transition: border-color 0.2s, color 0.2s;
}
.ui-card--person .ui-card__links a:hover {
border-color: var(--clr-primary-400);
color: var(--clr-primary-400);
}
@media (max-width: 544px) {
.ui-card--person {
flex-direction: column;
}
.ui-card--person .ui-card__thumb {
flex: 0 0 auto;
width: 100%;
height: auto;
aspect-ratio: 4/3;
max-height: 28rem;
}
}
/* ── Publication card (Publications page — list) ── */
.ui-card--publication {
padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem) clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-md);
background: #fff;
display: flex;
flex-direction: column;
gap: clamp(0.8rem, 0.3883495146vw + 0.654368932rem, 1.4rem);
transition: border-color var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart);
}
.ui-card--publication:hover {
border-color: var(--clr-primary-400);
box-shadow: 0 4px 16px rgba(15, 76, 129, 0.06);
}
.ui-card--publication .ui-card__pub-meta {
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
}
.ui-card--publication .ui-card__pub-journal {
font-size: var(--body-xs-fs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--clr-primary-400);
}
.ui-card--publication .ui-card__pub-date {
font-size: var(--body-xs-fs);
color: var(--clr-gray-400);
}
.ui-card--publication .ui-card__pub-title {
font-size: var(--heading-xs-fs);
font-weight: 600;
line-height: 1.45;
color: var(--clr-gray-900);
text-decoration: none;
}
.ui-card--publication .ui-card__pub-title:hover {
color: var(--clr-primary-400);
}
.ui-card--publication .ui-card__pub-authors {
font-size: var(--body-xs-fs);
color: var(--clr-text-secondary);
line-height: 1.5;
}
.ui-card--publication .ui-card__pub-venue {
font-size: var(--body-xs-fs);
color: var(--clr-gray-400);
font-style: italic;
}
.ui-card--publication .ui-card__pub-tags {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.ui-card--publication .ui-card__pub-doi {
font-size: var(--body-xs-fs);
color: var(--clr-primary-400);
text-decoration: none;
}
.ui-card--publication .ui-card__pub-doi:hover {
text-decoration: underline;
}
/* ── Event card (Events page — date-block + info) ── */
.ui-card--event {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
border-radius: var(--radius-md);
background: #fff;
border: 1px solid var(--clr-gray-200);
transition: box-shadow 0.25s ease;
}
.ui-card--event:hover {
box-shadow: 0 4px 16px rgba(0, 74, 130, 0.1);
}
.ui-card--event .ui-card__date-block {
flex-shrink: 0;
width: clamp(5.6rem, 1.0355987055vw + 5.2116504854rem, 7.2rem);
border-radius: var(--radius-sm);
background: var(--clr-primary-900);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.8rem 0.6rem;
text-align: center;
}
.ui-card--event .ui-card__date-block .month {
font-size: var(--body-xs-fs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.75;
}
.ui-card--event .ui-card__date-block .day {
font-size: var(--heading-md-fs);
font-weight: 700;
line-height: 1;
}
.ui-card--event .ui-card__date-block .year {
font-size: var(--body-xs-fs);
opacity: 0.6;
}
.ui-card--event .ui-card__date-block .type {
font-size: var(--body-xs-fs);
font-weight: 700;
text-transform: uppercase;
margin-top: 0.4rem;
opacity: 0.75;
}
.ui-card--event .ui-card__event-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem);
}
.ui-card--event .ui-card__event-type-badge {
/* badge handled by .ui-badge */
}
.ui-card--event .ui-card__event-title {
font-size: var(--heading-sm-fs);
font-weight: 600;
line-height: 1.35;
color: var(--clr-gray-900);
}
.ui-card--event .ui-card__event-detail {
font-size: var(--body-xs-fs);
color: var(--clr-text-secondary);
display: flex;
align-items: center;
gap: 0.6rem;
}
.ui-card--event .ui-card__event-detail i {
font-size: 1.4rem;
color: var(--clr-primary-400);
flex-shrink: 0;
}
.ui-card--event .ui-card__event-actions {
display: flex;
gap: 0.8rem;
margin-top: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
flex-wrap: wrap;
}
.ui-card--event {
/* 선택적 썸네일 — date-block 다음, 본문 앞. 요소가 있을 때만 렌더된다. */
}
.ui-card--event .ui-card__thumb {
flex-shrink: 0;
width: clamp(12rem, 3.8834951456vw + 10.5436893204rem, 18rem);
aspect-ratio: 4/3;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--clr-gray-100);
}
.ui-card--event .ui-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 544px) {
.ui-card--event {
flex-direction: column;
}
.ui-card--event .ui-card__thumb {
width: 100%;
aspect-ratio: 16/9;
}
}
/* ── Event card — compact (제목 + 시간 중심, 패딩 축소) ── */
.ui-card--event.ui-card--compact {
padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
gap: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem);
}
.ui-card--event.ui-card--compact .ui-card__date-block {
width: clamp(4.8rem, 0.7766990291vw + 4.5087378641rem, 6rem);
padding: 0.6rem 0.5rem;
}
/* ── Year-group separator (Publications grouped by year) ── */
.ui-year-group {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.ui-year-group + .ui-year-group {
margin-top: var(--spacing-3xl);
}
.ui-year-group__heading {
font-size: var(--heading-md-fs);
font-weight: 700;
color: var(--clr-gray-900);
margin-bottom: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
padding-bottom: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
border-bottom: 2px solid var(--clr-primary-900);
}
/* ===================================================
event-card-wide — 가로형 이벤트 카드
좌측 큰 이미지(날짜 오버레이) + 우측 일시·제목·설명·CTA
규칙: layout/position/color(토큰)만. 타이포 위계·spacing 은 마크업 .no-* 유틸. (#17)
=================================================== */
.event-card-wide {
display: flex;
flex-direction: row;
align-items: stretch;
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
padding-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
border-bottom: 1px solid var(--clr-gray-200);
/* ── 좌측 미디어 (이미지 + 날짜 오버레이 + 종료 라벨) ── */
}
.event-card-wide__media {
position: relative;
flex-shrink: 0;
width: clamp(42rem, 14.2394822006vw + 36.6601941748rem, 64rem);
overflow: hidden;
border-radius: var(--radius-sm);
}
.event-card-wide__img {
display: block;
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
background: var(--clr-gray-100);
transition: transform 0.3s ease, filter 0.3s ease;
}
.event-card-wide__date {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.8rem 1.2rem;
background: var(--clr-primary-900);
color: #fff;
border-bottom-right-radius: var(--radius-sm);
text-align: center;
}
.event-card-wide__date-top {
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.8;
}
.event-card-wide__date-bottom {
line-height: 1;
}
.event-card-wide__status {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.6rem 1.2rem;
background: var(--clr-primary-900);
color: #fff;
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
}
.event-card-wide {
/* ── 우측 본문 ── */
}
.event-card-wide__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.event-card-wide__datetime {
color: var(--clr-primary-400);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.event-card-wide__title {
color: var(--clr-gray-900);
transition: color 0.25s ease;
}
.event-card-wide__excerpt {
color: var(--clr-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
}
.event-card-wide:hover .event-card-wide__img {
transform: scale(1.04);
}
.event-card-wide:hover .event-card-wide__title {
color: var(--clr-primary-400);
}
.event-card-wide {
/* ── 종료된 행사: 어둡게 처리 ── */
}
.event-card-wide--concluded .event-card-wide__img {
filter: grayscale(0.8);
opacity: 0.6;
}
.event-card-wide--concluded .event-card-wide__title,
.event-card-wide--concluded .event-card-wide__datetime,
.event-card-wide--concluded .event-card-wide__excerpt {
color: var(--clr-text-secondary);
}
.event-card-wide--concluded:hover .event-card-wide__img {
transform: none;
}
.event-card-wide--concluded:hover .event-card-wide__title {
color: var(--clr-text-secondary);
}
.event-card-wide {
/* ── 반응형: sm 이하 세로 전환 ── */
}
@media (max-width: 544px) {
.event-card-wide {
flex-direction: column;
gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
}
.event-card-wide .event-card-wide__media {
width: 100%;
}
}
/* ===================================================
Keyword chip — clickable keyword/tag pill.
Publications list cards + detail meta(keywords row).
Links to ?tag_id={id} (keyword filter).
=================================================== */
.ui-card__pub-tags,
.ui-keyword-chip-list {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
list-style: none;
padding: 0;
margin: 0;
}
.ui-keyword-chip {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.3rem 0.9rem;
border-radius: 999px;
border: 1px solid var(--clr-gray-300);
background: var(--clr-gray-100);
color: var(--clr-gray-700);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.ui-keyword-chip:hover, .ui-keyword-chip:focus-visible {
border-color: var(--clr-primary-400);
background: var(--clr-primary-50, #e6f2fa);
color: var(--clr-primary-700, var(--clr-primary-900));
}
/* ===================================================
Publication detail meta — labeled definition rows.
Used by components/publication-detail-meta.php (Publications detail).
Typography hierarchy comes from no-* utilities in markup;
here only layout + token-based spacing/color (#17 component exception).
=================================================== */
.ui-pub-meta {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.ui-pub-meta__row {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
gap: clamp(0.8rem, 1.0355987055vw + 0.4116504854rem, 2.4rem);
align-items: start;
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--clr-gray-200);
}
.ui-pub-meta__row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
@media (max-width: 544px) {
.ui-pub-meta__row {
grid-template-columns: 1fr;
gap: 0.4rem;
}
}
.ui-pub-meta {
/* Abstract spans wider line-height — block row. */
}
.ui-pub-meta__row--block .ui-pub-meta__value {
line-height: 1.7;
}
.ui-pub-meta__label {
margin: 0;
font-weight: 700;
color: var(--clr-gray-500);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ui-pub-meta__value {
margin: 0;
color: var(--clr-gray-900);
word-break: break-word;
}
.ui-pub-meta__value a {
color: var(--clr-primary-400);
text-decoration: none;
}
.ui-pub-meta__value a:hover, .ui-pub-meta__value a:focus-visible {
text-decoration: underline;
}
.ui-pub-meta__abstract p {
margin: 0 0 0.8rem;
}
.ui-pub-meta__abstract p:last-child {
margin-bottom: 0;
}
/**
* ui-cta — 표준 CTA
*
* variant:
* --primary : 흰색 pill 버튼 (배경 무관하게 항상 white, navy 텍스트)
* --filled : 채워진 navy pill (강조 CTA / submit)
* --accent : 골드 채움 + 우측 박스형 화살표 (헤더 Contact 등 1차 CTA)
* --boxed-navy: --accent 와 형태(박스+화살표) 100% 동일, 화이트 채움 + 네이비 (2차 CTA)
* --ghost : 텍스트+화살표 심플 링크 (좌측 작대기 없음)
* --secondary : primary 와 동일 (마크업 호환용)
*
* 형태(geometry)와 색(skin) 분리: 박스형 화살표 형태는 `--accent, --boxed-navy` 공통 블록 1곳에
* 정의 → 형태를 바꾸면 모든 boxed CTA 동시 반영. 색은 각 variant 가 입힌다. (#17-C / SOLID)
*
* 모션:
* - 공통: hover 시 화살표 6px 우측 slide, color transition
* - 토큰: var(--dur-base) var(--ease-out-quart)
* 가이드: docs/03-constants/components.md §3.3
*/
.ui-cta {
/* 베이스 reset & 공통 */
display: inline-flex;
align-items: center;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
font-family: var(--font-sans-family);
font-size: var(--body-md-fs);
font-weight: 600;
line-height: 1;
letter-spacing: var(--tracking-heading);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart), border-color var(--dur-base) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart);
}
.ui-cta__label {
display: inline-block;
line-height: 1;
}
.ui-cta {
/* 화살표 — hover 시 우측 6px slide. 라벨 baseline 과 수평 정렬 보장. */
}
.ui-cta__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 1;
font-size: 1em;
transition: transform var(--dur-base) var(--ease-out-quart);
/* 인라인 svg 또는 fontawesome 둘 다 지원 */
}
.ui-cta__icon svg, .ui-cta__icon i {
display: block;
width: 1em;
height: 1em;
line-height: 1;
font-size: inherit;
vertical-align: middle;
}
.ui-cta:hover .ui-cta__icon, .ui-cta:focus-visible .ui-cta__icon {
transform: translateX(6px);
}
.ui-cta {
/* 브랜드 이미지 아이콘(예: 네이버지도 svg) — 화살표가 아니므로 hover 슬라이드 없음, 고정 크기 2rem(=20px) */
}
.ui-cta__icon--img img {
display: block;
width: 2rem;
height: 2rem;
}
.ui-cta:hover .ui-cta__icon--img, .ui-cta:focus-visible .ui-cta__icon--img {
transform: none;
}
.ui-cta {
/* --icon-left : 브랜드 마크를 라벨 좌측에 (네이버지도 등). DOM 순서로 좌측 배치됨.
우측 화살표 전용 hover 슬라이드(translateX)는 좌측 아이콘에 어울리지 않으므로 비활성. */
}
.ui-cta--icon-left:hover .ui-cta__icon, .ui-cta--icon-left:focus-visible .ui-cta__icon {
transform: none;
}
.ui-cta {
/* press 시 살짝 눌림 (모든 variant 공통) */
}
.ui-cta:active {
transform: scale(0.98);
}
.ui-cta {
/* 접근성: 키보드 포커스 링 */
}
.ui-cta:focus-visible {
outline: 2px solid var(--clr-accent-500);
outline-offset: 3px;
}
.ui-cta {
/* ───────────────────────────────
* --primary : 흰색 pill (배경 무관하게 항상 white)
* ─────────────────────────────── */
}
.ui-cta--primary {
padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem) clamp(2.2rem, 0.5177993528vw + 2.0058252427rem, 3rem);
background: var(--clr-base-white);
color: var(--clr-primary-900);
border: 1px solid var(--clr-ui-border);
border-radius: 999px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
/* mouse-click focus 는 hover 스타일 적용 안 함 */
}
.ui-cta--primary:focus:not(:focus-visible) {
background: var(--clr-base-white);
border-color: var(--clr-ui-border);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.ui-cta--primary:hover, .ui-cta--primary:focus-visible {
background: var(--clr-primary-50);
border-color: var(--clr-primary-50);
box-shadow: 0 6px 18px rgba(15, 76, 129, 0.12);
}
.ui-cta {
/* ───────────────────────────────
* --filled : 채워진 navy pill (검색 submit, 강조 CTA)
* 배경: primary-900 / 텍스트: 흰색
* ─────────────────────────────── */
}
.ui-cta--filled {
padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem) clamp(2.2rem, 0.5177993528vw + 2.0058252427rem, 3rem);
background: var(--clr-primary-900);
color: var(--clr-base-white);
border: 1px solid var(--clr-primary-900);
border-radius: 999px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.ui-cta--filled:hover, .ui-cta--filled:focus-visible {
background: var(--clr-primary-700);
border-color: var(--clr-primary-700);
box-shadow: 0 6px 18px rgba(15, 76, 129, 0.24);
}
.ui-cta {
/* ───────────────────────────────
* Boxed CTA — 공통 형태(geometry). 라벨 + 좌측 구분선으로 분리된 우측 화살표 칸.
* 색은 각 색 variant(--accent 골드 / --boxed-navy 화이트+네이비)가 입힌다.
* ⚠ 형태를 바꾸려면 이 블록 한 곳만 수정 → 모든 boxed CTA 동시 반영. (#17-C / SOLID)
* ─────────────────────────────── */
}
.ui-cta--accent, .ui-cta--boxed-navy {
/* 세로 패딩은 라벨에 둔다 → 화살표 칸(.__icon)이 stretch 로 버튼 "전체 높이"를
채워 완전한 박스 영역구분이 된다(레퍼런스 시안). 버튼엔 좌측 패딩만. */
padding: 0 0 0 clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
border-radius: var(--radius-xs);
gap: 0;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.ui-cta--accent .ui-cta__label, .ui-cta--boxed-navy .ui-cta__label {
padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem) clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) 0;
}
.ui-cta--accent .ui-cta__icon, .ui-cta--boxed-navy .ui-cta__icon {
align-self: stretch;
display: inline-flex;
align-items: center;
padding: 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
border-left: 1px solid rgba(255, 255, 255, 0.35);
/* 우측 모서리만 버튼 곡률에 맞춤 → 박스 fill 이 둥근 모서리 밖으로 안 삐져나옴 */
border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.ui-cta--accent, .ui-cta--boxed-navy {
/* 화살표가 우측 구분 칸(끝선 flush)이라 base 의 hover 6px slide 는 칸을
버튼 밖으로 밀어냄 → boxed CTA 에서만 비활성. */
}
.ui-cta--accent:hover .ui-cta__icon, .ui-cta--accent:focus-visible .ui-cta__icon, .ui-cta--boxed-navy:hover .ui-cta__icon, .ui-cta--boxed-navy:focus-visible .ui-cta__icon {
transform: none;
}
.ui-cta {
/* --accent : 골드 채움 skin (배경 accent-500 / 텍스트 흰색) — 1차 CTA */
}
.ui-cta--accent {
background: var(--clr-accent-500);
color: var(--clr-base-white);
border: 1px solid var(--clr-accent-500);
/* 화살표 칸을 밝은 골드로 채워 영역구분(레퍼런스 시안의 박스) */
}
.ui-cta--accent .ui-cta__icon {
background: rgba(255, 255, 255, 0.15);
}
.ui-cta--accent:hover, .ui-cta--accent:focus-visible {
background: var(--clr-accent-700);
border-color: var(--clr-accent-700);
}
.ui-cta {
/* --boxed-navy : 화이트 채움 + 네이비 skin (형태는 --accent 와 동일, 색만 다름) — 2차 CTA.
구분선은 네이비, hover 시 네이비 채움으로 반전(텍스트·구분선 흰색). */
}
.ui-cta--boxed-navy {
background: var(--clr-base-white);
color: var(--clr-primary-900);
border: 1px solid var(--clr-primary-900);
/* 화살표 칸을 연한 네이비로 채워 영역구분(흰 배경 위 박스). 구분선도 네이비. */
}
.ui-cta--boxed-navy .ui-cta__icon {
border-left-color: rgba(36, 36, 79, 0.22); /* primary-900(#24244f) 구분선 */
background: rgba(36, 36, 79, 0.06);
}
.ui-cta--boxed-navy:hover, .ui-cta--boxed-navy:focus-visible {
background: var(--clr-primary-900);
color: var(--clr-base-white);
border-color: var(--clr-primary-900);
/* hover = 네이비 채움 반전 → 화살표 칸은 밝은 칸으로 (accent 와 동일 톤) */
}
.ui-cta--boxed-navy:hover .ui-cta__icon, .ui-cta--boxed-navy:focus-visible .ui-cta__icon {
border-left-color: rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.15);
}
.ui-cta {
/* ───────────────────────────────
* --secondary : primary 와 동일 (마크업 호환 유지)
* ─────────────────────────────── */
}
.ui-cta--secondary {
padding: clamp(1.3rem, 0.2588996764vw + 1.2029126214rem, 1.7rem) clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
background: var(--clr-base-white);
color: var(--clr-primary-900);
border: 1px solid var(--clr-ui-border);
border-radius: 999px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
/* mouse-click focus 는 hover 스타일 적용 안 함 */
}
.ui-cta--secondary:focus:not(:focus-visible) {
background: var(--clr-base-white);
border-color: var(--clr-ui-border);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.ui-cta--secondary:hover, .ui-cta--secondary:focus-visible {
background: var(--clr-primary-50);
border-color: var(--clr-primary-50);
box-shadow: 0 6px 18px rgba(15, 76, 129, 0.12);
}
.ui-cta {
/* ───────────────────────────────
* --ghost : 텍스트+화살표 (심플 링크 스타일)
* hover 변화 = (1) 라벨 navy→accent teal (2) 화살표 6px slide
* ─────────────────────────────── */
}
.ui-cta--ghost {
padding: 0;
background: transparent;
color: var(--clr-primary-900);
border: 0;
font-size: var(--body-sm-fs);
border-radius: 0;
}
.ui-cta--ghost:hover, .ui-cta--ghost:focus-visible {
color: var(--clr-accent-500);
}
.ui-cta {
/* ───────────────────────────────
* --outline : 외곽선 라운드-렉트 버튼 (배경 투명 + 1px 보더 + 우측 화살표)
* hover = 채움 반전(보더색 배경 / 텍스트 흰색). on-dark 와 조합 가능.
* ─────────────────────────────── */
}
.ui-cta--outline {
padding: clamp(1rem, 0.1941747573vw + 0.927184466rem, 1.3rem) clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
background: transparent;
color: var(--clr-primary-900);
border: 1px solid var(--clr-ui-border);
border-radius: var(--radius-sm);
}
.ui-cta--outline:hover, .ui-cta--outline:focus-visible {
background: var(--clr-primary-900);
border-color: var(--clr-primary-900);
color: var(--clr-base-white);
}
.ui-cta {
/* ───────────────────────────────
* --on-dark : 다크 배경 위 (Primary/Secondary/Ghost 모두 호환)
* 사용:
* ─────────────────────────────── */
}
.ui-cta--on-dark.ui-cta--primary {
/* 흰 pill 유지, border만 반투명 흰색으로 */
border-color: rgba(255, 255, 255, 0.4);
}
.ui-cta--on-dark.ui-cta--primary:hover, .ui-cta--on-dark.ui-cta--primary:focus-visible {
background: var(--clr-primary-50);
border-color: var(--clr-primary-50);
}
.ui-cta--on-dark.ui-cta--secondary {
/* primary 와 동일하게 처리 */
border-color: rgba(255, 255, 255, 0.4);
}
.ui-cta--on-dark.ui-cta--secondary:hover, .ui-cta--on-dark.ui-cta--secondary:focus-visible {
background: var(--clr-primary-50);
border-color: var(--clr-primary-50);
}
.ui-cta--on-dark.ui-cta--ghost {
color: var(--clr-base-white);
}
.ui-cta--on-dark.ui-cta--ghost:hover, .ui-cta--on-dark.ui-cta--ghost:focus-visible {
color: var(--clr-accent-500);
}
.ui-cta--on-dark.ui-cta--outline {
color: var(--clr-base-white);
border-color: rgba(255, 255, 255, 0.5);
}
.ui-cta--on-dark.ui-cta--outline:hover, .ui-cta--on-dark.ui-cta--outline:focus-visible {
background: var(--clr-base-white);
border-color: var(--clr-base-white);
color: var(--clr-primary-900);
}
.ui-cta {
/* ───────────────────────────────
* Sizes
* ─────────────────────────────── */
}
.ui-cta--sm {
font-size: var(--body-sm-fs);
}
.ui-cta--sm.ui-cta--primary, .ui-cta--sm.ui-cta--secondary, .ui-cta--sm.ui-cta--filled, .ui-cta--sm.ui-cta--outline {
padding: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
}
.ui-cta--sm {
/* boxed CTA(accent·boxed-navy) — 세로패딩은 라벨로(화살표 칸 full-height 유지) + 축소 (헤더 Contact 등) */
}
.ui-cta--sm.ui-cta--accent, .ui-cta--sm.ui-cta--boxed-navy {
padding: 0 0 0 clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
}
.ui-cta--sm.ui-cta--accent .ui-cta__label, .ui-cta--sm.ui-cta--boxed-navy .ui-cta__label {
padding: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem) clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1rem) 0;
}
.ui-cta--sm.ui-cta--accent .ui-cta__icon, .ui-cta--sm.ui-cta--boxed-navy .ui-cta__icon {
padding: 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
}
.ui-cta--lg {
font-size: var(--body-lg-fs);
}
.ui-cta--lg.ui-cta--primary, .ui-cta--lg.ui-cta--secondary, .ui-cta--lg.ui-cta--filled {
padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem) clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4rem);
}
/* prefers-reduced-motion 가드 — _motion.scss 가 duration을 0 으로 만들지만
* transform hover까지 끄려면 직접 차단 */
@media (prefers-reduced-motion: reduce) {
.ui-cta:hover .ui-cta__icon,
.ui-cta:focus-visible .ui-cta__icon {
transform: none;
}
}
/* ===================================================
Filter / Search bar components
- .ui-filter-bar : top bar (keyword search + sort)
- .ui-filter-sidebar : Publications left-side filter panel
=================================================== */
/* ── Top filter bar (News, Activities) ── */
.ui-filter-bar {
display: flex;
align-items: center;
gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
flex-wrap: wrap;
margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
.ui-filter-bar__search {
position: relative;
flex: 1;
min-width: 22rem;
}
.ui-filter-bar__search .icon {
position: absolute;
left: 1.6rem;
top: 50%;
transform: translateY(-50%);
color: var(--clr-gray-400);
font-size: 1.6rem;
pointer-events: none;
}
.ui-filter-bar__search input {
width: 100%;
height: clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.2rem);
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-round);
padding: 0 1.6rem 0 4.4rem;
font-size: var(--body-md-fs);
color: var(--clr-gray-900);
background: #fff;
outline: none;
transition: border-color 0.2s ease;
}
.ui-filter-bar__search input::placeholder {
color: var(--clr-gray-400);
}
.ui-filter-bar__search input:focus {
border-color: var(--clr-primary-400);
box-shadow: 0 0 0 3px rgba(46, 167, 224, 0.12);
}
.ui-filter-bar__sort {
display: flex;
align-items: center;
gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
}
.ui-filter-bar__sort-label {
font-size: var(--body-sm-fs);
color: var(--clr-gray-500);
white-space: nowrap;
}
.ui-filter-bar__select {
height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
padding: 0 3.2rem 0 1.2rem;
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-sm);
font-size: var(--body-sm-fs);
color: var(--clr-gray-900);
background: #fff;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1.6rem;
cursor: pointer;
outline: none;
transition: border-color 0.2s;
}
.ui-filter-bar__select:focus {
border-color: var(--clr-primary-400);
}
.ui-filter-bar__count {
font-size: var(--body-sm-fs);
color: var(--clr-gray-500);
white-space: nowrap;
margin-left: auto;
}
@media (max-width: 544px) {
.ui-filter-bar {
flex-direction: column;
align-items: stretch;
}
.ui-filter-bar__search {
min-width: 0;
}
.ui-filter-bar__sort {
justify-content: space-between;
}
.ui-filter-bar__count {
margin-left: 0;
}
}
/* ── Mobile filter trigger (lg↓ 에서만 노출) ── */
.ui-filter-trigger {
display: none;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-lg);
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-round);
background: #fff;
color: var(--clr-primary-900);
font-size: var(--body-sm-fs);
font-weight: 600;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.ui-filter-trigger:hover {
border-color: var(--clr-primary-400);
}
@media (max-width: 1024px) {
.ui-filter-trigger {
display: inline-flex;
}
}
/* ── Sidebar filter (News, Publications) ── */
.ui-filter-sidebar {
align-self: flex-start;
position: sticky;
top: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
width: clamp(20rem, 4.142394822vw + 18.4466019417rem, 26.4rem);
min-width: clamp(20rem, 4.142394822vw + 18.4466019417rem, 26.4rem);
contain: layout style;
}
.ui-filter-sidebar__backdrop, .ui-filter-sidebar__sheet-head {
display: none;
}
.ui-filter-sidebar__panel {
display: flex;
flex-direction: column;
}
.ui-filter-sidebar__form {
display: flex;
flex-direction: column;
gap: var(--spacing-2xl);
}
.ui-filter-sidebar__group {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.ui-filter-sidebar__group-label {
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--clr-gray-400);
margin-bottom: var(--spacing-sm);
}
.ui-filter-sidebar__option {
display: flex;
align-items: center;
gap: var(--spacing-md);
cursor: pointer;
font-size: var(--body-sm-fs);
line-height: 1.4;
color: var(--clr-gray-700);
padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-md);
border-left: 2px solid transparent;
transition: color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart);
}
.ui-filter-sidebar__option input[type=checkbox],
.ui-filter-sidebar__option input[type=radio] {
appearance: none;
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
margin: 0;
border: 1.5px solid var(--clr-gray-300);
border-radius: 50%;
background: #fff;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart);
}
.ui-filter-sidebar__option input[type=checkbox]:checked,
.ui-filter-sidebar__option input[type=radio]:checked {
border-color: var(--clr-primary-900);
box-shadow: inset 0 0 0 4px var(--clr-primary-900);
}
.ui-filter-sidebar__option input[type=checkbox]:focus-visible,
.ui-filter-sidebar__option input[type=radio]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(46, 167, 224, 0.18);
border-color: var(--clr-primary-400);
}
.ui-filter-sidebar__option input[type=checkbox]:focus-visible:checked,
.ui-filter-sidebar__option input[type=radio]:focus-visible:checked {
box-shadow: inset 0 0 0 4px var(--clr-primary-900), 0 0 0 3px rgba(46, 167, 224, 0.18);
}
.ui-filter-sidebar__option input[type=checkbox] {
border-radius: var(--radius-xs);
}
.ui-filter-sidebar__option:hover {
color: var(--clr-primary-900);
}
.ui-filter-sidebar__option.is-active {
color: var(--clr-primary-900);
font-weight: 600;
border-left-color: var(--clr-accent-500);
}
.ui-filter-sidebar__clear {
margin-top: var(--spacing-sm);
font-size: var(--body-xs-fs);
color: var(--clr-gray-400);
cursor: pointer;
border: 0;
background: transparent;
padding: 0;
align-self: flex-start;
text-decoration: underline;
text-underline-offset: 0.3rem;
transition: color var(--dur-fast) var(--ease-out-quart);
}
.ui-filter-sidebar__clear:hover {
color: var(--clr-primary-900);
}
@media (max-width: 1024px) {
.ui-filter-sidebar {
position: static;
width: auto;
min-width: 0;
}
.ui-filter-sidebar[data-filter-sidebar]:not(.is-open) {
display: none;
}
.ui-filter-sidebar[data-filter-sidebar].is-open {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
}
.ui-filter-sidebar .ui-filter-sidebar__backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
}
.ui-filter-sidebar .ui-filter-sidebar__panel {
position: fixed;
left: 0;
right: 0;
bottom: 0;
max-height: 85vh;
overflow-y: auto;
background: #fff;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);
box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
animation: ui-filter-sheet-up var(--dur-base) var(--ease-out-quart);
}
.ui-filter-sidebar .ui-filter-sidebar__sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--spacing-md);
margin-bottom: var(--spacing-md);
border-bottom: 1px solid var(--clr-gray-200);
}
.ui-filter-sidebar .ui-filter-sidebar__sheet-title {
font-size: var(--body-md-fs);
font-weight: 700;
color: var(--clr-primary-900);
}
.ui-filter-sidebar .ui-filter-sidebar__sheet-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.2rem;
height: 3.2rem;
border: 0;
background: transparent;
color: var(--clr-gray-500);
font-size: 1.6rem;
cursor: pointer;
}
.ui-filter-sidebar .ui-filter-sidebar__sheet-close:hover {
color: var(--clr-primary-900);
}
}
@keyframes ui-filter-sheet-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* ── Layout wrapper for sidebar + content ── */
.ui-filter-layout {
display: flex;
align-items: flex-start;
gap: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem);
}
.ui-filter-layout__content {
flex: 1;
min-width: 0;
}
@media (max-width: 1024px) {
.ui-filter-layout {
flex-direction: column;
}
.ui-filter-layout .ui-filter-sidebar {
width: 100%;
min-width: 0;
}
}
/* ===================================================
Search input — 돋보기 아이콘 + 커스텀 클리어(×) 버튼
- 브라우저 기본 search 클리어 UI 제거(appearance + ::-webkit-search-cancel-button)
- × 버튼은 값 있을 때만 노출(TS: SearchInput.ts 가 [hidden] 토글)
=================================================== */
.ui-search-input {
position: relative;
width: 100%;
}
.ui-search-input__sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.ui-search-input__field {
width: 100%;
height: clamp(4rem, 0.3883495146vw + 3.854368932rem, 4.6rem);
padding: 0 3.4rem 0 3.6rem;
border: 0;
border-bottom: 1px solid var(--clr-gray-300);
border-radius: 0;
font-size: var(--body-sm-fs);
color: var(--clr-gray-900);
background: transparent;
outline: none;
appearance: none;
-webkit-appearance: none;
transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.ui-search-input__field::placeholder {
color: var(--clr-gray-400);
}
.ui-search-input__field:focus {
border-bottom-color: var(--clr-primary-900);
}
.ui-search-input__field::-webkit-search-cancel-button, .ui-search-input__field::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
.ui-search-input__icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: var(--clr-gray-400);
font-size: 1.4rem;
pointer-events: none;
transition: color var(--dur-fast) var(--ease-out-quart);
}
.ui-search-input__field:focus ~ .ui-search-input__icon {
color: var(--clr-primary-900);
}
.ui-search-input__clear {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--clr-gray-400);
font-size: 1.3rem;
cursor: pointer;
transition: color var(--dur-fast) var(--ease-out-quart);
}
.ui-search-input__clear[hidden] {
display: none;
}
.ui-search-input__clear:hover {
color: var(--clr-primary-900);
}
.ui-search-input__clear:focus-visible {
outline: 2px solid var(--clr-primary-400);
outline-offset: 2px;
border-radius: 50%;
}
.ui-search-input {
/* ── --bare 변형 ──
필(pill) 바 같은 외부 컨테이너 안에 끼워 넣을 때: 컴포넌트 자체 underline·
focus 라인을 제거하고(외부 컨테이너가 테두리·포커스 ring 담당) 좌측 돋보기·
우측 커스텀 ×·네이티브 × 제거는 기본형 그대로 상속. */
}
.ui-search-input--bare .ui-search-input__field {
border-bottom: 0;
}
.ui-search-input--bare .ui-search-input__field:focus {
border-bottom-color: transparent;
}
/* ===================================================
Search result row — reusable hit component
View: resources/views/home/components/search-result-item.php
Used on: pages/search/index.php
Rule #17 — typography from no-* utilities only. This file = layout.
=================================================== */
.ui-search-hit {
list-style: none;
display: block;
border-bottom: 1px solid var(--clr-gray-200);
}
.ui-search-hit:last-child {
border-bottom: 0;
}
.ui-search-hit__link {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem) clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
color: inherit;
text-decoration: none;
transition: background var(--dur-base) var(--ease-out-quart), padding-left var(--dur-base) var(--ease-out-quart);
}
.ui-search-hit__link:hover {
background: var(--clr-gray-50);
padding-left: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
@media (hover: none) and (pointer: coarse) {
.ui-search-hit__link:hover {
padding-left: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
}
.ui-search-hit__body {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.ui-search-hit__head {
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
}
@media (max-width: 544px) {
.ui-search-hit__head {
gap: 0.6rem;
}
}
.ui-search-hit__meta {
color: var(--clr-gray-500);
}
.ui-search-hit__title {
color: var(--clr-gray-900);
margin: 0;
transition: color var(--dur-base) var(--ease-out-quart);
}
.ui-search-hit__link:hover .ui-search-hit__title {
color: var(--clr-primary-900);
}
.ui-search-hit__snippet {
color: var(--clr-gray-600);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ui-search-hit__thumb {
flex-shrink: 0;
width: 7.2rem;
height: 7.2rem;
object-fit: cover;
border-radius: var(--radius-sm);
border: 1px solid var(--clr-gray-100);
align-self: center;
}
@media (max-width: 544px) {
.ui-search-hit__thumb {
width: 5.6rem;
height: 5.6rem;
}
}
/* ===================================================
Steps component
Usage Procedures — numbered vertical steps
=================================================== */
.ui-steps {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
/* vertical connector line */
}
.ui-steps::before {
content: "";
position: absolute;
left: clamp(1.9rem, 0.2588996764vw + 1.8029126214rem, 2.3rem);
top: clamp(3.6rem, 0.5177993528vw + 3.4058252427rem, 4.4rem);
bottom: clamp(3.6rem, 0.5177993528vw + 3.4058252427rem, 4.4rem);
width: 2px;
background: var(--clr-gray-200);
z-index: 0;
}
@media (max-width: 544px) {
.ui-steps::before {
left: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
}
}
.ui-steps__item {
display: flex;
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
padding: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem) 0;
position: relative;
z-index: 1;
}
.ui-steps__item:last-child {
padding-bottom: 0;
}
.ui-steps__number {
flex-shrink: 0;
width: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
border-radius: 50%;
background: var(--clr-primary-900);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--body-md-fs);
font-weight: 700;
line-height: 1;
position: relative;
z-index: 2;
}
@media (max-width: 544px) {
.ui-steps__number {
width: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem);
height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem);
}
}
.ui-steps__content {
flex: 1;
padding-top: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
padding-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
}
.ui-steps__label {
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--clr-primary-400);
margin-bottom: 0.4rem;
display: block;
}
.ui-steps__title {
font-size: var(--heading-sm-fs);
font-weight: 700;
color: var(--clr-gray-900);
line-height: 1.3;
margin-bottom: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
}
.ui-steps__desc {
font-size: var(--body-sm-fs);
line-height: 1.7;
color: var(--clr-text-secondary);
}
.ui-steps__note {
margin-top: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
border-left: 3px solid var(--clr-primary-400);
background: var(--clr-primary-50);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-size: var(--body-xs-fs);
color: var(--clr-primary-900);
line-height: 1.6;
}
/* ── How-to-register (numbered circles inline) ── */
.ui-steps--inline {
flex-direction: row;
align-items: flex-start;
}
.ui-steps--inline::before {
top: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
left: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
right: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
bottom: auto;
width: auto;
height: 2px;
}
@media (max-width: 768px) {
.ui-steps--inline::before {
display: none;
}
}
.ui-steps--inline .ui-steps__item {
flex: 1;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0;
gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
}
@media (max-width: 768px) {
.ui-steps--inline .ui-steps__item {
flex-direction: row;
text-align: left;
padding: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem) 0;
}
}
.ui-steps--inline .ui-steps__content {
padding: 0;
}
@media (max-width: 768px) {
.ui-steps--inline {
flex-direction: column;
}
}
/* ===================================================
Table component
Usage Procedures — User Fee Schedule & Guidelines
=================================================== */
.ui-table-wrap {
width: 100%;
overflow-x: auto;
border-radius: var(--radius-md);
border: 1px solid var(--clr-gray-200);
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--clr-gray-300) transparent;
}
.ui-table-wrap::-webkit-scrollbar {
height: 0.6rem;
}
.ui-table-wrap::-webkit-scrollbar-track {
background: transparent;
}
.ui-table-wrap::-webkit-scrollbar-thumb {
background: var(--clr-gray-300);
border-radius: 999px;
}
.ui-table {
width: 100%;
border-collapse: collapse;
font-size: var(--body-sm-fs);
}
.ui-table thead {
background: var(--clr-primary-900);
color: #fff;
}
.ui-table thead th {
padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
text-align: left;
font-weight: 700;
font-size: var(--body-xs-fs);
letter-spacing: 0.04em;
white-space: nowrap;
}
.ui-table thead th:first-child {
border-radius: var(--radius-sm) 0 0 0;
}
.ui-table thead th:last-child {
border-radius: 0 var(--radius-sm) 0 0;
}
.ui-table tbody tr {
border-bottom: 1px solid var(--clr-gray-200);
transition: background 0.15s ease;
}
.ui-table tbody tr:last-child {
border-bottom: 0;
}
.ui-table tbody tr:hover {
background: var(--clr-primary-50);
}
.ui-table tbody td {
padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
color: var(--clr-gray-700);
vertical-align: middle;
line-height: 1.55;
}
.ui-table {
/* user type column */
}
.ui-table__user-type {
font-weight: 600;
color: var(--clr-gray-900);
white-space: nowrap;
}
.ui-table__user-sub {
font-size: var(--body-xs-fs);
color: var(--clr-gray-400);
font-weight: 400;
display: block;
margin-top: 0.2rem;
}
.ui-table {
/* rate cells */
}
.ui-table__rate {
font-weight: 600;
color: var(--clr-primary-900);
}
.ui-table__rate--discounted {
color: var(--clr-status-success);
}
.ui-table__rate--standard {
color: var(--clr-gray-700);
}
.ui-table__rate--premium {
color: var(--clr-primary-900);
}
.ui-table {
/* priority badge column */
}
.ui-table__priority {
white-space: nowrap;
}
.ui-table {
/* footnote */
}
.ui-table__note {
font-size: var(--body-xs-fs);
color: var(--clr-gray-400);
font-style: italic;
margin-top: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem);
}
/* ── Info cards grid (Guidelines for External Users) ── */
.ui-info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 2.8rem);
}
@media (max-width: 768px) {
.ui-info-grid {
grid-template-columns: 1fr;
}
}
.ui-info-card {
padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem) clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
border-radius: var(--radius-md);
background: var(--clr-background-page);
border-left: 4px solid var(--clr-primary-400);
}
.ui-info-card__label {
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--clr-primary-400);
margin-bottom: 0.6rem;
display: block;
}
.ui-info-card__title {
font-size: var(--heading-xs-fs);
font-weight: 700;
color: var(--clr-gray-900);
margin-bottom: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem);
line-height: 1.3;
}
.ui-info-card__body {
font-size: var(--body-sm-fs);
line-height: 1.7;
color: var(--clr-text-secondary);
}
/* ===================================================
Calendar component
Month grid + event chips + legend
=================================================== */
/* ── Controls row (List / Calendar toggle + Today + Nav + Export) ── */
.ui-cal-controls {
display: flex;
align-items: center;
gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
flex-wrap: wrap;
margin-bottom: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
.ui-cal-controls__view {
display: flex;
align-items: center;
gap: 0.4rem;
}
.ui-cal-controls__nav {
display: flex;
align-items: center;
gap: 0.6rem;
margin-left: auto;
}
@media (max-width: 544px) {
.ui-cal-controls__nav {
margin-left: 0;
}
}
.ui-cal-controls__month {
font-size: var(--heading-md-fs);
font-weight: 700;
color: var(--clr-primary-900);
min-width: clamp(16rem, 3.8834951456vw + 14.5436893204rem, 22rem);
text-align: center;
}
.ui-cal-controls__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem);
height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem);
border-radius: 50%;
border: 1px solid var(--clr-gray-300);
background: #fff;
color: var(--clr-gray-600);
font-size: var(--body-md-fs);
cursor: pointer;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.ui-cal-controls__btn:hover {
border-color: var(--clr-primary-900);
color: var(--clr-primary-900);
}
.ui-cal-controls__today {
padding: 0 1.4rem;
height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem);
border-radius: var(--radius-sm);
border: 1px solid var(--clr-gray-300);
background: #fff;
font-size: var(--body-sm-fs);
font-weight: 600;
color: var(--clr-gray-700);
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
}
.ui-cal-controls__today:hover {
border-color: var(--clr-primary-900);
color: var(--clr-primary-900);
}
.ui-cal-controls__export {
margin-left: auto;
padding: 0 1.4rem;
height: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem);
border-radius: var(--radius-sm);
border: 1px solid var(--clr-gray-300);
background: #fff;
font-size: var(--body-xs-fs);
color: var(--clr-gray-600);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
transition: border-color 0.2s, color 0.2s;
}
.ui-cal-controls__export:hover {
border-color: var(--clr-primary-400);
color: var(--clr-primary-400);
}
@media (max-width: 544px) {
.ui-cal-controls__export {
margin-left: 0;
}
}
/* ── Legend ── */
.ui-cal-legend {
display: flex;
align-items: center;
gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
flex-wrap: wrap;
margin-bottom: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
}
.ui-cal-legend__item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: var(--body-xs-fs);
color: var(--clr-gray-600);
}
.ui-cal-legend__dot {
width: 1rem;
height: 1rem;
border-radius: 50%;
flex-shrink: 0;
}
.ui-cal-legend__dot--seminar {
background: var(--clr-chip-seminar);
}
.ui-cal-legend__dot--workshop {
background: var(--clr-chip-workshop);
}
.ui-cal-legend__dot--symposium {
background: var(--clr-chip-symposium);
}
.ui-cal-legend__dot--education {
background: var(--clr-chip-education);
}
.ui-cal-legend__dot--special {
background: var(--clr-chip-special);
}
/* ── Calendar grid ── */
.ui-calendar {
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-md);
overflow: hidden;
/* day-of-week header */
}
.ui-calendar__header {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--clr-primary-900);
color: #fff;
}
.ui-calendar__dow {
padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
text-align: center;
font-size: var(--body-xs-fs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
@media (max-width: 544px) {
.ui-calendar__dow {
font-size: var(--body-xs-fs);
padding: 0.8rem 0.2rem;
}
}
.ui-calendar {
/* weeks */
}
.ui-calendar__body {
display: flex;
flex-direction: column;
background: var(--clr-gray-200);
gap: 1px;
}
.ui-calendar__week {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
}
.ui-calendar__day {
background: #fff;
min-height: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem);
padding: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem);
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.ui-calendar__day--outside {
background: var(--clr-gray-50);
}
.ui-calendar__day--today .ui-calendar__day-num {
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
background: var(--clr-primary-400);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.ui-calendar__day {
min-height: clamp(6rem, 1.2944983819vw + 5.5145631068rem, 8rem);
padding: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6rem);
}
}
@media (max-width: 544px) {
.ui-calendar__day {
min-height: 5rem;
}
}
.ui-calendar__day-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
}
.ui-calendar__day-num {
font-size: var(--body-xs-fs);
font-weight: 600;
color: var(--clr-gray-700);
line-height: 1;
flex-shrink: 0;
}
@media (max-width: 768px) {
.ui-calendar__day-num {
font-size: var(--body-xs-fs);
}
}
.ui-calendar__add {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
border: 1px dashed var(--clr-gray-300);
color: var(--clr-gray-400);
background: transparent;
font-size: var(--body-xs-fs);
text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ui-calendar__add:hover, .ui-calendar__add:focus-visible {
border-color: var(--clr-primary-400);
color: var(--clr-primary-400);
background: #fff;
outline: none;
}
.ui-calendar__chips {
display: flex;
flex-direction: column;
gap: 0.3rem;
overflow: hidden;
}
.ui-calendar {
/* ── Event chip ── */
}
.ui-calendar__chip {
display: block;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-xs);
font-size: var(--body-xs-fs);
font-weight: 600;
line-height: 1.4;
color: #fff;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
transition: opacity 0.15s ease;
}
.ui-calendar__chip:hover {
opacity: 0.85;
}
.ui-calendar__chip--seminar {
background: var(--clr-chip-seminar);
}
.ui-calendar__chip--workshop {
background: var(--clr-chip-workshop);
}
.ui-calendar__chip--symposium {
background: var(--clr-chip-symposium);
}
.ui-calendar__chip--education {
background: var(--clr-chip-education);
}
.ui-calendar__chip--special {
background: var(--clr-chip-special);
}
@media (max-width: 768px) {
.ui-calendar__chip {
display: none;
}
.ui-calendar__chip:first-child {
display: block;
}
}
.ui-calendar {
/* ── Footnote ── */
}
.ui-calendar__footnote {
padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
font-size: var(--body-xs-fs);
color: var(--clr-gray-400);
border-top: 1px solid var(--clr-gray-200);
background: var(--clr-gray-50);
}
.ui-calendar__footnote a {
color: var(--clr-primary-400);
text-decoration: none;
}
.ui-calendar__footnote a:hover {
text-decoration: underline;
}
/* ===================================================
Placeholder
Gray box used as image / map / video stand-in
in temporary scaffolding before real assets land.
=================================================== */
.ui-placeholder {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: var(--clr-gray-200);
border-radius: var(--radius-sm);
color: var(--clr-gray-400);
font-size: var(--body-xs-fs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
overflow: hidden;
}
.ui-placeholder::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(135deg, transparent calc(50% - 1px), var(--clr-gray-300) calc(50% - 1px), var(--clr-gray-300) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(45deg, transparent calc(50% - 1px), var(--clr-gray-300) calc(50% - 1px), var(--clr-gray-300) calc(50% + 1px), transparent calc(50% + 1px));
opacity: 0.4;
pointer-events: none;
}
.ui-placeholder__label {
position: relative;
z-index: 1;
max-width: 80%;
text-align: center;
overflow-wrap: break-word;
word-break: break-word;
line-height: 1.4;
}
.ui-placeholder--16x9 {
aspect-ratio: 16/9;
width: 100%;
}
.ui-placeholder--4x3 {
aspect-ratio: 4/3;
width: 100%;
}
.ui-placeholder--1x1 {
aspect-ratio: 1/1;
width: 100%;
}
.ui-placeholder--portrait {
aspect-ratio: 3/4;
width: 100%;
}
.ui-placeholder--map {
aspect-ratio: 16/7;
width: 100%;
}
/* ===================================================
Breadcrumb
페이지 헤더 안의 경로 네비게이션.
타이포 위계(size/weight/line-height)와 spacing 은
HTML 유틸 클래스(`no-body-sm`, `no-mg-lg--b`)가 담당하고,
이 컴포넌트는 정렬·간격·색·자간·대문자 같은
시각 디테일만 정의한다.
=================================================== */
.ui-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem;
color: var(--clr-gray-500);
text-transform: uppercase;
letter-spacing: var(--tracking-caps, 0.06em);
}
.ui-breadcrumb a {
color: var(--clr-primary-500);
text-decoration: none;
text-decoration-color: transparent;
transition: color var(--dur-base, 0.2s), text-decoration-color var(--dur-base, 0.2s);
}
.ui-breadcrumb a:hover, .ui-breadcrumb a:focus-visible {
text-decoration: underline;
text-decoration-color: var(--clr-primary-500);
text-underline-offset: 3px;
}
.ui-breadcrumb span {
color: var(--clr-gray-400);
}
.ui-breadcrumb__sep {
display: inline-block;
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
background-color: var(--clr-primary-500);
opacity: 0.6;
vertical-align: middle;
margin-bottom: 0.1rem;
}
.ui-share-btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: 0.8rem 1.6rem;
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-round);
background: var(--clr-base-white);
color: var(--clr-text-primary);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.ui-share-btn i {
font-size: 1.4rem;
}
.ui-share-btn:hover {
border-color: var(--clr-primary-400);
color: var(--clr-primary-400);
}
.ui-share-modal {
display: flex;
flex-direction: column;
}
.ui-share-modal__nets-label {
margin-bottom: var(--spacing-md);
color: var(--clr-text-secondary);
text-align: center;
}
.ui-share-modal__nets {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-lg);
}
.ui-share-modal__net {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xs);
color: var(--clr-text-secondary);
}
.ui-share-modal__net:hover .ui-share-modal__net-icon {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.ui-share-modal__net-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.6rem);
height: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.6rem);
border-radius: var(--radius-round);
background: var(--clr-gray-100);
color: var(--clr-text-primary);
font-size: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ui-share-modal__net-label {
color: var(--clr-text-secondary);
}
.ui-share-modal__net--x .ui-share-modal__net-icon {
background: #000;
color: #fff;
}
.ui-share-modal__net--fb .ui-share-modal__net-icon {
background: #1877f2;
color: #fff;
}
.ui-share-modal__net--in .ui-share-modal__net-icon {
background: #0a66c2;
color: #fff;
}
.ui-share-modal__net--mail .ui-share-modal__net-icon {
background: var(--clr-primary-700);
color: var(--clr-base-white);
}
.ui-share-modal__divider {
height: 1px;
margin: var(--spacing-lg) 0;
background: var(--clr-gray-200);
}
.ui-share-modal__label {
display: block;
margin-bottom: var(--spacing-xs);
color: var(--clr-text-secondary);
}
.ui-share-modal__copy-row {
display: flex;
gap: var(--spacing-sm);
}
@media (max-width: 768px) {
.ui-share-modal__copy-row {
flex-direction: column;
}
}
.ui-share-modal__input {
flex: 1 1 auto;
min-width: 0;
padding: 0.9rem 1.6rem;
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-round);
background: var(--clr-gray-50);
color: var(--clr-text-secondary);
}
.ui-share-modal__copy-btn {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
padding: 0.9rem 2rem;
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-round);
background: var(--clr-base-white);
color: var(--clr-text-primary);
white-space: nowrap;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.ui-share-modal__copy-btn:hover {
border-color: var(--clr-primary-500);
color: var(--clr-primary-500);
background: var(--clr-gray-50);
}
/**
* ui-toast — 공개 KEY 클리닉 피드백 표면.
*
* Toast.ts 는 admin/public 모두 같은 DOM을 만들므로, 공개 범위만 명시해 admin의
* 상태 토큰을 보존한다. 타입 위계는 TS가 부여하는 no-body-sm 유틸이 담당한다.
*/
body:not(.admin) .ui-toast-container {
position: fixed;
left: 0;
right: 0;
bottom: var(--public-space-lg);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--public-space-2xs);
pointer-events: none;
z-index: 30000;
}
body:not(.admin) .ui-toast {
display: inline-flex;
align-items: center;
justify-content: center;
width: min(100vw - var(--public-shell-gutter) * 2, var(--public-cart-toast-max));
min-height: var(--public-cart-toast-min-height);
gap: var(--public-space-md);
padding: var(--public-cart-toast-padding-block) var(--public-cart-toast-padding-inline);
border: 0;
border-radius: 0;
background: var(--public-navy-deep);
color: var(--public-white);
box-shadow: none;
pointer-events: auto;
animation: ui-toast-in var(--public-duration) var(--public-ease);
}
body:not(.admin) .ui-toast__icon {
display: none;
}
body:not(.admin) .ui-toast__msg {
display: block;
overflow: visible;
color: inherit;
white-space: nowrap;
}
body:not(.admin) .ui-toast__action {
appearance: none;
border: 0;
background: transparent;
color: var(--public-cart-toast-action);
cursor: pointer;
font: inherit;
font-weight: 700;
margin: 0;
padding: 0;
white-space: nowrap;
}
body:not(.admin) .ui-toast__action:hover, body:not(.admin) .ui-toast__action:focus-visible {
text-decoration: underline;
}
body:not(.admin) .ui-toast.is-leaving {
opacity: 0;
transform: translateY(8px);
transition: opacity var(--tran-15), transform var(--tran-15);
}
@media (max-width: 767px) {
body:not(.admin) .ui-toast {
min-height: auto;
gap: var(--public-space-md);
padding: var(--public-space-md);
}
}
@keyframes ui-toast-in {
from {
opacity: 0;
transform: translateY(var(--public-space-xs));
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===================================================
Empty State (미니멀 톤)
목록 0건 등 빈 상태를 중앙 정렬 + 라인 아이콘으로 표시.
타이포 위계는 no-body-* 유틸로만 부여 (절대규칙 #17-A).
spacing 은 토큰만 사용 (절대규칙 #17-B).
=================================================== */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--spacing-sm);
padding-block: var(--section-md);
padding-inline: var(--spacing-lg);
color: var(--clr-text-sub);
list-style: none;
}
.empty-state__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--spacing-3xl);
height: var(--spacing-3xl);
margin-bottom: var(--spacing-xs);
color: var(--clr-text-aux);
opacity: 0.85;
}
.empty-state__icon svg {
width: 100%;
height: 100%;
display: block;
}
.empty-state__message {
color: var(--clr-text-base);
margin: 0;
}
.empty-state__eyebrow {
margin: 0;
}
.empty-state__description {
color: var(--clr-text-aux);
margin: 0;
max-width: 42ch;
}
.empty-state--compact {
padding-block: var(--section-xs);
gap: var(--spacing-xs);
}
.empty-state--compact .empty-state__icon {
width: var(--spacing-2xl);
height: var(--spacing-2xl);
margin-bottom: 0;
}
.empty-state--editorial {
display: grid;
grid-template-areas: "icon eyebrow" "icon message" "icon description";
grid-template-columns: clamp(7.2rem, 2.071197411vw + 6.4233009709rem, 10.4rem) minmax(0, 1fr);
min-height: clamp(22rem, 3.8834951456vw + 20.5436893204rem, 28rem);
padding: var(--public-space-2xl);
column-gap: var(--public-space-xl);
row-gap: var(--public-space-2xs);
align-content: center;
align-items: start;
justify-items: start;
color: var(--public-ink);
text-align: left;
background: var(--public-white);
border-block: 1px solid var(--public-ink);
}
.empty-state--editorial .empty-state__icon {
grid-area: icon;
width: 100%;
height: auto;
aspect-ratio: 1;
margin: 0;
align-self: center;
color: var(--public-ink);
background: var(--public-white);
border: 1px solid var(--public-ink);
}
.empty-state--editorial .empty-state__eyebrow {
grid-area: eyebrow;
color: var(--public-ink);
}
.empty-state--editorial .empty-state__message {
grid-area: message;
color: var(--public-ink);
}
.empty-state--editorial .empty-state__description {
grid-area: description;
max-width: 52ch;
color: var(--public-ink);
}
@media (max-width: 767px) {
.empty-state--editorial {
grid-template-areas: "icon" "eyebrow" "message" "description";
grid-template-columns: minmax(0, 1fr);
justify-items: center;
padding: var(--public-space-xl) var(--public-space-sm);
text-align: center;
}
.empty-state--editorial .empty-state__icon {
width: var(--public-space-page);
}
}
.public-member-reservation-card {
display: grid;
min-height: 32rem;
grid-template-rows: auto 1fr auto;
border: 1px solid var(--public-line);
background: var(--public-white);
color: var(--public-ink);
transition: border-color var(--public-duration) var(--public-ease);
}
.public-member-reservation-card:hover {
border-color: var(--public-line-strong);
}
.public-member-reservation-card__head, .public-member-reservation-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-sm);
padding: var(--public-space-md);
}
.public-member-reservation-card__head {
border-bottom: 1px solid var(--public-line);
}
.public-member-reservation-card__number, .public-member-reservation-card__time, .public-member-reservation-card__items, .public-member-reservation-card__summary, .public-member-reservation-card__foot span {
color: var(--public-muted);
}
.public-member-reservation-card__status {
display: inline-flex;
align-items: center;
min-height: var(--public-space-lg);
padding-inline: var(--public-space-xs);
border: 1px solid var(--public-line);
background: var(--public-surface);
}
.public-member-reservation-card--confirmed .public-member-reservation-card__status {
border-color: var(--public-line-strong);
background: var(--public-ink);
color: var(--public-white);
}
.public-member-reservation-card--cancelled, .public-member-reservation-card--no_show {
color: var(--public-muted);
}
.public-member-reservation-card__body {
padding: var(--public-space-xl) var(--public-space-md);
}
.public-member-reservation-card__date {
margin: 0;
}
.public-member-reservation-card__time {
margin-top: var(--public-space-2xs);
}
.public-member-reservation-card__title {
margin-top: var(--public-space-2xl);
}
.public-member-reservation-card__items {
display: grid;
gap: var(--public-space-2xs);
margin: var(--public-space-sm) 0 0;
padding: 0;
list-style: none;
}
.public-member-reservation-card__items li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.public-member-reservation-card__summary {
margin-top: var(--public-space-sm);
}
.public-member-reservation-card__foot {
border-top: 1px solid var(--public-line);
}
.public-member-reservation-card__foot strong {
color: var(--public-ink);
}
@media (max-width: 767px) {
.public-member-reservation-card {
min-height: 28rem;
}
}
.public-member-auth__section-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--public-space-sm);
}
.public-member-auth__view-switch {
display: inline-flex;
padding: var(--public-space-2xs);
border: 1px solid var(--public-line);
background: var(--public-white);
}
.public-member-auth__view-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--public-space-xs);
min-height: var(--public-control-sm);
padding-inline: var(--public-space-sm);
border: 0;
background: transparent;
color: var(--public-muted);
cursor: pointer;
}
.public-member-auth__view-button:hover, .public-member-auth__view-button:focus-visible {
background: var(--public-surface);
color: var(--public-ink);
}
.public-member-auth__view-button.is-active {
background: var(--public-ink);
color: var(--public-white);
}
.public-member-auth__view-button:focus-visible {
outline: 2px solid var(--public-ink);
outline-offset: 2px;
}
.public-member-auth__reservation-view[hidden] {
display: none;
}
.public-member-reservation-card {
position: relative;
min-height: 29rem;
}
.public-member-reservation-card__open {
position: absolute;
z-index: 1;
inset: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.public-member-reservation-card__open:focus-visible {
outline: 2px solid var(--public-ink);
outline-offset: 3px;
}
.public-member-reservation-card__body {
display: flex;
flex-direction: column;
}
.public-member-reservation-card__title {
margin: 0;
}
.public-member-reservation-card__type, .public-member-reservation-card__label, .public-member-reservation-card__price small {
color: var(--public-muted);
}
.public-member-reservation-card__schedule {
display: grid;
gap: var(--public-space-2xs);
margin-top: auto;
padding-top: var(--public-space-xl);
}
.public-member-reservation-card__datetime {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--public-space-sm);
}
.public-member-reservation-card__datetime strong {
font: inherit;
white-space: nowrap;
}
.public-member-reservation-card__price {
display: grid;
justify-items: end;
gap: var(--public-space-2xs);
text-align: right;
}
.public-member-reservation-card__price strong {
color: var(--public-ink);
}
.public-member-reservation-detail {
display: grid;
gap: var(--public-space-xl);
}
.public-member-reservation-detail__schedule {
display: grid;
gap: var(--public-space-xs);
padding-bottom: var(--public-space-lg);
border-bottom: 1px solid var(--public-line);
}
.public-member-reservation-detail__schedule > span, .public-member-reservation-detail__meta dt, .public-member-reservation-detail__items > p {
color: var(--public-muted);
}
.public-member-reservation-detail__meta {
display: grid;
margin: 0;
}
.public-member-reservation-detail__meta > div {
display: grid;
grid-template-columns: minmax(10rem, 0.45fr) minmax(0, 1fr);
gap: var(--public-space-md);
padding-block: var(--public-space-sm);
border-bottom: 1px solid var(--public-line);
}
.public-member-reservation-detail__meta dd {
margin: 0;
overflow-wrap: anywhere;
}
.public-member-reservation-detail__items {
display: grid;
gap: var(--public-space-sm);
}
.public-member-reservation-detail__items ul {
display: grid;
gap: var(--public-space-xs);
margin: 0;
padding: 0;
list-style: none;
}
.public-member-reservation-detail__items li {
padding-bottom: var(--public-space-xs);
border-bottom: 1px solid var(--public-line);
}
.public-member-reservation-detail__notice {
padding-block: var(--public-space-md);
border-block: 1px solid var(--public-line);
color: var(--public-muted);
}
.public-member-reservation-calendar {
border-top: 1px solid var(--public-line-strong);
}
.public-member-reservation-calendar__canvas {
min-height: 54rem;
padding-top: var(--public-space-lg);
}
.public-member-reservation-calendar .fc {
color: var(--public-ink);
}
.public-member-reservation-calendar .fc .fc-toolbar {
gap: var(--public-space-md);
margin-bottom: var(--public-space-lg);
}
.public-member-reservation-calendar .fc .fc-toolbar-title {
font-size: var(--heading-2xs-fs);
font-weight: var(--heading-2xs-fw);
line-height: var(--heading-2xs-lh);
}
.public-member-reservation-calendar .fc .fc-button-primary {
min-height: var(--public-control-sm);
padding-inline: var(--public-space-sm);
border: 1px solid var(--public-line);
border-radius: var(--public-radius-sm);
background: var(--public-white);
color: var(--public-ink);
box-shadow: none;
}
.public-member-reservation-calendar .fc .fc-button-primary:hover,
.public-member-reservation-calendar .fc .fc-button-primary:focus-visible,
.public-member-reservation-calendar .fc .fc-button-primary:not(:disabled).fc-button-active {
border-color: var(--public-line-strong);
background: var(--public-surface);
color: var(--public-ink);
box-shadow: none;
}
.public-member-reservation-calendar .fc-theme-standard th,
.public-member-reservation-calendar .fc-theme-standard td,
.public-member-reservation-calendar .fc-theme-standard .fc-scrollgrid {
border-color: var(--public-line);
}
.public-member-reservation-calendar .fc .fc-col-header-cell-cushion,
.public-member-reservation-calendar .fc .fc-daygrid-day-number {
color: var(--public-ink);
text-decoration: none;
}
.public-member-reservation-calendar .fc .fc-daygrid-day-number {
padding: var(--public-space-xs);
}
.public-member-reservation-calendar .fc .fc-day-today {
background: var(--public-surface);
}
.public-member-reservation-calendar .fc .fc-daygrid-event {
margin: var(--public-space-2xs);
border: 1px solid var(--public-line);
border-left: 3px solid var(--public-ink);
border-radius: var(--public-radius-sm);
background: var(--public-white);
color: var(--public-ink);
cursor: pointer;
}
.public-member-reservation-calendar .fc .fc-daygrid-event:focus-visible {
outline: 2px solid var(--public-ink);
outline-offset: 2px;
}
.public-member-reservation-calendar .fc .public-member-reservation-event--confirmed {
border-left-color: var(--public-ink);
}
.public-member-reservation-calendar .fc .public-member-reservation-event--cancelled,
.public-member-reservation-calendar .fc .public-member-reservation-event--no_show {
opacity: 0.58;
}
.public-member-reservation-calendar__event {
display: grid;
gap: var(--public-space-2xs);
min-width: 0;
padding: var(--public-space-2xs) var(--public-space-xs);
}
.public-member-reservation-calendar__event-time {
color: var(--public-muted);
}
.public-member-reservation-calendar__event-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.public-member-reservation-calendar .fc .fc-more-link {
color: var(--public-ink);
}
.public-member-reservation-calendar .fc-theme-standard .fc-list,
.public-member-reservation-calendar .fc-theme-standard .fc-list-day-cushion,
.public-member-reservation-calendar .fc-theme-standard .fc-list-table td {
border-color: var(--public-line);
}
.public-member-reservation-calendar .fc .fc-list-day-cushion {
background: var(--public-surface);
}
.public-member-reservation-calendar .fc .fc-list-event:hover td {
background: var(--public-surface);
}
body:not(.admin) .app-modal-backdrop--member-reservation {
background: rgba(0, 0, 0, 0.52);
backdrop-filter: none;
}
body:not(.admin) .app-modal-backdrop--member-reservation .app-modal-box--member-reservation {
border: 1px solid var(--public-line);
border-radius: 0;
background: var(--public-white);
box-shadow: 0 2.4rem 5rem rgba(0, 0, 0, 0.18);
}
body:not(.admin) .app-modal-backdrop--member-reservation .app-modal-box--member-reservation :focus-visible {
outline-color: var(--public-ink);
}
body:not(.admin) .app-modal-backdrop--member-reservation .app-modal-box--member-reservation .app-modal-header,
body:not(.admin) .app-modal-backdrop--member-reservation .app-modal-box--member-reservation .app-modal-body,
body:not(.admin) .app-modal-backdrop--member-reservation .app-modal-box--member-reservation .app-modal-footer {
background: var(--public-white);
}
body:not(.admin) .app-modal-backdrop--member-reservation .app-modal-box--member-reservation .app-modal-close:hover,
body:not(.admin) .app-modal-backdrop--member-reservation .app-modal-box--member-reservation .app-modal-close:focus-visible {
background: var(--public-surface);
color: var(--public-ink);
}
body:not(.admin) .app-modal-backdrop--member-reservation .app-modal-box--member-reservation .app-modal-btn--primary,
body:not(.admin) .app-modal-backdrop--member-reservation .app-modal-box--member-reservation .app-modal-btn--primary:hover,
body:not(.admin) .app-modal-backdrop--member-reservation .app-modal-box--member-reservation .app-modal-btn--primary:focus-visible {
border-color: var(--public-ink);
background: var(--public-ink);
color: var(--public-white);
}
@media (max-width: 767px) {
.public-member-auth__section-actions {
align-items: stretch;
flex-direction: column-reverse;
}
.public-member-auth__view-switch, .public-member-auth__section-actions > .public-button {
width: 100%;
}
.public-member-auth__view-button {
flex: 1 1 50%;
}
.public-member-reservation-card {
min-height: 26rem;
}
.public-member-reservation-detail__meta > div {
grid-template-columns: 1fr;
gap: var(--public-space-2xs);
}
.public-member-reservation-calendar__canvas {
min-height: 46rem;
}
.public-member-reservation-calendar .fc .fc-toolbar {
align-items: flex-start;
flex-wrap: wrap;
}
}
/* ===================================================
newsletter-form — Footer 뉴스레터 구독 form (지시서 §3.6)
- 이메일 input + Subscribe 버튼. 위계/폰트는 마크업 .no-* 유틸 담당(rule #17).
- newsletter-footer-band 섹션의 form 패턴을 단독 컴포넌트로 추출(rule #19).
- spacing/색은 토큰만(rule #10·#17 §B).
=================================================== */
.newsletter-form {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
max-width: 42rem;
}
.newsletter-form__label {
color: var(--clr-text-secondary);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.newsletter-form__row {
display: flex;
gap: var(--spacing-sm);
align-items: stretch;
}
.newsletter-form__input {
flex: 1;
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--clr-gray-300);
background: var(--clr-base-white);
color: var(--clr-text-primary);
}
.newsletter-form__input::placeholder {
color: var(--clr-text-secondary);
}
.newsletter-form__input:focus {
outline: 0;
border-color: var(--clr-primary-700);
}
.newsletter-form__btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-lg);
border: 0;
background: var(--clr-primary-700);
color: var(--clr-base-white);
cursor: pointer;
flex-shrink: 0;
transition: background var(--dur-fast) var(--ease-out-quart);
}
.newsletter-form__btn:hover {
background: var(--clr-primary-hover);
}
.newsletter-form__btn:focus-visible {
outline: 2px solid var(--clr-primary-accent);
outline-offset: 2px;
}
.newsletter-form__btn-icon {
display: inline-flex;
transition: transform var(--dur-base) var(--ease-out-quart);
}
.newsletter-form__btn:hover .newsletter-form__btn-icon {
transform: translateX(3px);
}
.newsletter-form {
/* 다크 배경 위 사용 시(현재 Footer 는 라이트라 미사용, 향후 확장 대비) */
}
.newsletter-form--on-dark .newsletter-form__label {
color: rgba(255, 255, 255, 0.7);
}
.newsletter-form--on-dark .newsletter-form__input {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.newsletter-form--on-dark .newsletter-form__input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
/* Reservation page components */
/**
* rsv-eq-item — 장비 목록 1행 컴포넌트.
* 타이포 위계는 HTML .no-* 유틸로만(규칙 #17-A). 여기선 레이아웃·색·상태만.
*/
.rsv-eq-item {
display: flex;
gap: var(--spacing-sm);
padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
border-bottom: 1px solid var(--clr-gray-200);
background: transparent;
text-decoration: none;
cursor: pointer;
transition: background-color var(--tran-15);
}
.rsv-eq-item:hover {
background: var(--clr-gray-50);
}
.rsv-eq-item.is-active {
background: var(--clr-primary-50);
border-left: 3px solid var(--clr-primary-700);
}
.rsv-eq-item__thumb {
flex-shrink: 0;
width: 6.4rem;
height: 6.4rem;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--clr-gray-100);
}
.rsv-eq-item__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rsv-eq-item__thumb-placeholder {
display: block;
width: 100%;
height: 100%;
background: var(--clr-gray-200);
}
.rsv-eq-item__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.rsv-eq-item__name {
display: block;
color: var(--clr-text-base);
}
.is-active .rsv-eq-item__name {
color: var(--clr-primary-900);
}
.rsv-eq-item__sub {
display: block;
color: var(--clr-primary-700);
}
.rsv-eq-item__contact, .rsv-eq-item__phone {
display: block;
color: var(--clr-text-sub);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/**
* rsv-notices — 예약 페이지 우측 Notices 박스.
* 타이포 위계는 HTML .no-* 유틸로만(규칙 #17-A). 여기선 레이아웃·색·상태만.
*/
.rsv-notices {
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-md);
background: #fff;
overflow: hidden;
}
.rsv-notices__tabs {
display: flex;
border-bottom: 1px solid var(--clr-gray-200);
}
.rsv-notices__tab {
flex: 1;
padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem) clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: var(--clr-text-sub);
cursor: pointer;
text-align: center;
transition: color var(--tran-15), border-color var(--tran-15);
}
.rsv-notices__tab:hover {
color: var(--clr-text-base);
}
.rsv-notices__tab.is-active {
color: var(--clr-primary-900);
border-bottom-color: var(--clr-primary-700);
}
.rsv-notices__list {
list-style: none;
padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem) clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
margin: 0;
display: flex;
flex-direction: column;
gap: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem);
}
.rsv-notices__item {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.rsv-notices__tag {
display: block;
color: var(--clr-primary-700);
}
.rsv-notices__body {
display: none;
}
.rsv-notices__pager {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--spacing-xs);
padding: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem) clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
border-top: 1px solid var(--clr-gray-200);
}
.rsv-notices__pager-count {
color: var(--clr-text-sub);
margin-right: auto;
}
.rsv-notices__pager-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.8rem;
height: 2.8rem;
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-xs);
background: #fff;
color: var(--clr-text-base);
cursor: pointer;
transition: background-color var(--tran-15), border-color var(--tran-15);
}
.rsv-notices__pager-btn:hover {
background: var(--clr-gray-50);
border-color: var(--clr-gray-400);
}
/**
* rsv-cal — 예약 월간 스케줄 달력 컴포넌트.
* board-calendar와 완전 독립(BEM: rsv-cal).
* 타이포 위계는 HTML .no-* 유틸로만(규칙 #17-A). 여기선 레이아웃·색·상태만.
*/
.rsv-cal__head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
@media (max-width: 768px) {
.rsv-cal__head {
flex-direction: column;
align-items: flex-start;
}
}
.rsv-cal__view-toggle {
display: inline-flex;
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-sm);
overflow: hidden;
}
.rsv-cal__view-btn {
padding: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem) clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
background: #fff;
border: 0;
color: var(--clr-text-sub);
cursor: pointer;
transition: background-color var(--tran-15), color var(--tran-15);
}
.rsv-cal__view-btn + .rsv-cal__view-btn {
border-left: 1px solid var(--clr-gray-300);
}
.rsv-cal__view-btn.is-active {
background: var(--clr-primary-900);
color: #fff;
}
.rsv-cal__view-btn:not(.is-active):hover {
background: var(--clr-gray-50);
color: var(--clr-text-base);
}
.rsv-cal__nav {
display: inline-flex;
align-items: center;
gap: var(--spacing-md);
margin-left: auto;
}
@media (max-width: 768px) {
.rsv-cal__nav {
margin-left: 0;
}
}
.rsv-cal__nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.2rem;
height: 3.2rem;
border: 1px solid var(--clr-gray-300);
border-radius: var(--radius-xs);
background: #fff;
color: var(--clr-text-base);
text-decoration: none;
transition: background-color var(--tran-15);
}
.rsv-cal__nav-btn:hover {
background: var(--clr-gray-50);
}
.rsv-cal__month {
color: var(--clr-text-base);
min-width: 9rem;
text-align: center;
}
.rsv-cal__legend {
display: inline-flex;
align-items: center;
gap: var(--spacing-md);
flex-wrap: wrap;
}
.rsv-cal__legend-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--clr-text-sub);
}
.rsv-cal__chip {
display: inline-block;
width: 1rem;
height: 1rem;
border-radius: var(--radius-xs);
flex-shrink: 0;
}
.rsv-cal__chip--pending {
background: var(--clr-gray-300);
}
.rsv-cal__chip--approved {
background: var(--clr-primary-700);
}
.rsv-cal__chip--completed {
background: #15803d;
}
.rsv-cal__grid {
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-md);
overflow: hidden;
}
.rsv-cal__weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--clr-primary-900);
}
.rsv-cal__weekday {
padding: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.2rem) clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
color: rgba(255, 255, 255, 0.85);
text-align: center;
}
.rsv-cal__week {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-bottom: 1px solid var(--clr-gray-200);
}
.rsv-cal__week:last-child {
border-bottom: 0;
}
.rsv-cal__cell {
min-height: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 12rem);
border-right: 1px solid var(--clr-gray-200);
padding: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem) clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6rem);
display: flex;
flex-direction: column;
gap: 0.2rem;
background: #fff;
}
.rsv-cal__cell:last-child {
border-right: 0;
}
.rsv-cal__cell--empty {
background: var(--clr-gray-50);
}
.rsv-cal__cell--today {
background: var(--clr-primary-50);
}
.rsv-cal__day-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
color: var(--clr-text-sub);
align-self: flex-start;
}
.rsv-cal__day-num--today {
background: var(--clr-primary-700);
color: #fff;
border-radius: 50%;
}
.rsv-cal__slot {
display: block;
width: 100%;
padding: 0.2rem 0.4rem;
border: 0;
border-radius: var(--radius-xs);
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: opacity var(--tran-15);
}
.rsv-cal__slot:hover {
opacity: 0.8;
}
.rsv-cal__slot--pending {
background: var(--clr-gray-200);
color: var(--clr-text-sub);
}
.rsv-cal__slot--approved {
background: var(--clr-primary-700);
color: #fff;
}
.rsv-cal__slot--completed {
background: #15803d;
color: #fff;
}
.rsv-cal__footnote {
margin-top: var(--spacing-sm);
color: var(--clr-text-sub);
}
/* Third-party wrappers */
:root {
--iti-hover-color: rgba(0, 0, 0, 0.05);
--iti-border-color: #ccc;
--iti-dropdown-bg: white;
--iti-icon-color: #555;
--iti-spacer-horizontal: 8px;
--iti-flag-height: 12px;
--iti-flag-width: 16px;
--iti-globe-height: 16px;
--iti-search-clear-icon-height: 13px;
--iti-border-width: 1px;
--iti-arrow-height: 4px;
--iti-arrow-width: calc((var(--iti-arrow-height) / 2) * 3);
--iti-triangle-border: calc(var(--iti-arrow-width) / 2);
--iti-arrow-padding: 6px;
--iti-flag-sprite-width: 3904px;
--iti-flag-sprite-height: 12px;
--iti-mobile-popup-margin: 30px;
}
.iti {
position: relative;
display: inline-block;
}
.iti * {
box-sizing: border-box;
}
.iti__a11y-text {
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
position: absolute;
}
.iti input.iti__tel-input,
.iti input.iti__tel-input[type=text],
.iti input.iti__tel-input[type=tel] {
position: relative;
z-index: 0;
margin: 0 !important;
}
.iti__country-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
padding: var(--iti-border-width);
}
.iti__selected-country {
z-index: 1;
position: relative;
display: flex;
align-items: center;
height: 100%;
background: none;
border: 0;
margin: 0;
padding: 0;
font-family: inherit;
font-size: inherit;
color: inherit;
border-radius: 0;
font-weight: inherit;
line-height: inherit;
text-decoration: none;
}
.iti__selected-country-primary {
display: flex;
align-items: center;
height: 100%;
padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
}
.iti__arrow {
margin-left: var(--iti-arrow-padding);
width: 0;
height: 0;
border-left: var(--iti-triangle-border) solid transparent;
border-right: var(--iti-triangle-border) solid transparent;
border-top: var(--iti-arrow-height) solid var(--iti-icon-color);
}
.iti__arrow--up {
border-top: none;
border-bottom: var(--iti-arrow-height) solid var(--iti-icon-color);
}
.iti__dropdown-content {
border-radius: 3px;
background-color: var(--iti-dropdown-bg);
}
.iti--inline-dropdown .iti__dropdown-content {
border: var(--iti-border-width) solid var(--iti-border-color);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
.iti--inline-dropdown:not(.iti--container) .iti__dropdown-content {
position: absolute;
z-index: 2;
left: 0;
}
.iti__search-input {
width: 100%;
border-width: 0;
border-radius: 3px;
padding-left: 30px;
padding-right: 28px;
}
[dir=rtl] .iti__search-input {
padding-left: inherit;
padding-right: 30px;
background-position: right 8px center;
}
.iti__search-input::-webkit-search-cancel-button {
appearance: none;
}
.iti__search-input, .iti__country {
padding-top: 8px;
padding-bottom: 8px;
}
.iti__search-input-wrapper {
position: relative;
display: flex;
align-items: center;
border-bottom: 1px solid var(--iti-border-color);
}
.iti__search-icon {
position: absolute;
left: 8px;
display: flex;
pointer-events: none;
}
[dir=rtl] .iti__search-icon {
left: auto;
right: 8px;
}
.iti__search-icon-svg {
width: var(--iti-globe-height);
height: var(--iti-globe-height);
display: block;
stroke: var(--iti-icon-color);
fill: none;
stroke-width: 3;
}
.iti__search-clear {
position: absolute;
right: 4px;
background: transparent;
border: 0;
border-radius: 3px;
cursor: pointer;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease;
}
.iti__search-clear .iti__search-clear-x {
stroke-width: 2;
}
.iti__search-clear .iti__search-clear-bg {
fill: var(--iti-icon-color);
}
.iti__search-clear-svg {
width: var(--iti-search-clear-icon-height);
height: var(--iti-search-clear-icon-height);
display: block;
}
[dir=rtl] .iti__search-clear {
right: auto;
left: 4px;
}
.iti__search-clear:hover, .iti__search-clear:focus-visible {
background: var(--iti-hover-color);
outline: none;
}
.iti__no-results {
text-align: center;
padding: 30px 0;
}
.iti__country-list {
list-style: none;
padding: 0;
margin: 0;
cursor: pointer;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.iti--inline-dropdown .iti__country-list {
max-height: 185px;
}
.iti--flexible-dropdown-width .iti__country-list {
white-space: nowrap;
}
@media (max-width: 500px) {
.iti--flexible-dropdown-width .iti__country-list {
white-space: normal;
}
}
.iti__country {
display: flex;
align-items: center;
padding-left: var(--iti-spacer-horizontal);
padding-right: var(--iti-spacer-horizontal);
outline: none;
}
.iti__country-name {
flex-grow: 1;
}
.iti__country-check {
margin: 0 1px 0 var(--iti-spacer-horizontal);
display: flex;
align-items: center;
color: var(--iti-icon-color);
}
.iti__country-check-svg {
width: var(--iti-search-clear-icon-height);
height: var(--iti-search-clear-icon-height);
display: block;
}
.iti__country.iti__highlight {
background-color: var(--iti-hover-color);
}
.iti__country-list .iti__flag {
margin-right: var(--iti-spacer-horizontal);
}
[dir=rtl] .iti__country-list .iti__flag {
margin-right: 0;
margin-left: var(--iti-spacer-horizontal);
}
.iti__country-list .iti__flag {
flex-shrink: 0;
}
.iti--allow-dropdown .iti__country-container:has(+ input[disabled]) button.iti__selected-country,
.iti--allow-dropdown .iti__country-container:has(+ input[readonly]) button.iti__selected-country {
cursor: not-allowed;
}
.iti--allow-dropdown .iti__country-container:has(+ input[disabled]) button.iti__selected-country .iti__arrow,
.iti--allow-dropdown .iti__country-container:has(+ input[readonly]) button.iti__selected-country .iti__arrow {
visibility: hidden;
}
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
background-color: var(--iti-hover-color);
}
.iti .iti__selected-dial-code {
margin-left: 4px;
}
.iti--container {
position: fixed;
top: -1000px;
left: -1000px;
z-index: 1060;
}
.iti--container:hover {
cursor: pointer;
}
.iti__hide {
display: none;
}
.iti__v-hide {
visibility: hidden;
}
.iti--fullscreen-popup.iti--container {
background-color: rgba(0, 0, 0, 0.5);
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
padding: var(--iti-mobile-popup-margin);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.iti--fullscreen-popup .iti__dropdown-content {
display: flex;
flex-direction: column;
max-height: 100%;
position: relative;
}
.iti--fullscreen-popup .iti__country,
.iti--fullscreen-popup .iti__search-input {
padding-top: 10px;
padding-bottom: 10px;
}
.iti--fullscreen-popup .iti__country {
padding-left: 10px;
padding-right: 10px;
line-height: 1.5em;
}
.iti__flag {
--iti-flag-offset: 100px;
height: var(--iti-flag-height);
width: var(--iti-flag-width);
border-radius: 1px;
box-shadow: 0px 0px 1px 0px #888;
background-image: image-set(var(--iti-path-flags-1x) 1x, var(--iti-path-flags-2x) 2x);
background-repeat: no-repeat;
background-position: var(--iti-flag-offset) 0;
background-size: var(--iti-flag-sprite-width) var(--iti-flag-sprite-height);
}
.iti__loading {
position: relative;
background: none;
box-shadow: none;
}
.iti__loading::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: var(--iti-flag-height);
height: var(--iti-flag-height);
box-sizing: border-box;
border: 2px solid var(--iti-icon-color);
border-right-color: transparent;
border-radius: 50%;
animation: iti-spinner 1s linear infinite;
}
@keyframes iti-spinner {
to {
transform: rotate(360deg);
}
}
.iti__ac {
--iti-flag-offset: 0px;
}
.iti__ad {
--iti-flag-offset: -16px;
}
.iti__ae {
--iti-flag-offset: -32px;
}
.iti__af {
--iti-flag-offset: -48px;
}
.iti__ag {
--iti-flag-offset: -64px;
}
.iti__ai {
--iti-flag-offset: -80px;
}
.iti__al {
--iti-flag-offset: -96px;
}
.iti__am {
--iti-flag-offset: -112px;
}
.iti__ao {
--iti-flag-offset: -128px;
}
.iti__ar {
--iti-flag-offset: -144px;
}
.iti__as {
--iti-flag-offset: -160px;
}
.iti__at {
--iti-flag-offset: -176px;
}
.iti__au {
--iti-flag-offset: -192px;
}
.iti__aw {
--iti-flag-offset: -208px;
}
.iti__ax {
--iti-flag-offset: -224px;
}
.iti__az {
--iti-flag-offset: -240px;
}
.iti__ba {
--iti-flag-offset: -256px;
}
.iti__bb {
--iti-flag-offset: -272px;
}
.iti__bd {
--iti-flag-offset: -288px;
}
.iti__be {
--iti-flag-offset: -304px;
}
.iti__bf {
--iti-flag-offset: -320px;
}
.iti__bg {
--iti-flag-offset: -336px;
}
.iti__bh {
--iti-flag-offset: -352px;
}
.iti__bi {
--iti-flag-offset: -368px;
}
.iti__bj {
--iti-flag-offset: -384px;
}
.iti__bl {
--iti-flag-offset: -400px;
}
.iti__bm {
--iti-flag-offset: -416px;
}
.iti__bn {
--iti-flag-offset: -432px;
}
.iti__bo {
--iti-flag-offset: -448px;
}
.iti__bq {
--iti-flag-offset: -464px;
}
.iti__br {
--iti-flag-offset: -480px;
}
.iti__bs {
--iti-flag-offset: -496px;
}
.iti__bt {
--iti-flag-offset: -512px;
}
.iti__bw {
--iti-flag-offset: -528px;
}
.iti__by {
--iti-flag-offset: -544px;
}
.iti__bz {
--iti-flag-offset: -560px;
}
.iti__ca {
--iti-flag-offset: -576px;
}
.iti__cc {
--iti-flag-offset: -592px;
}
.iti__cd {
--iti-flag-offset: -608px;
}
.iti__cf {
--iti-flag-offset: -624px;
}
.iti__cg {
--iti-flag-offset: -640px;
}
.iti__ch {
--iti-flag-offset: -656px;
}
.iti__ci {
--iti-flag-offset: -672px;
}
.iti__ck {
--iti-flag-offset: -688px;
}
.iti__cl {
--iti-flag-offset: -704px;
}
.iti__cm {
--iti-flag-offset: -720px;
}
.iti__cn {
--iti-flag-offset: -736px;
}
.iti__co {
--iti-flag-offset: -752px;
}
.iti__cr {
--iti-flag-offset: -768px;
}
.iti__cu {
--iti-flag-offset: -784px;
}
.iti__cv {
--iti-flag-offset: -800px;
}
.iti__cw {
--iti-flag-offset: -816px;
}
.iti__cx {
--iti-flag-offset: -832px;
}
.iti__cy {
--iti-flag-offset: -848px;
}
.iti__cz {
--iti-flag-offset: -864px;
}
.iti__de {
--iti-flag-offset: -880px;
}
.iti__dj {
--iti-flag-offset: -896px;
}
.iti__dk {
--iti-flag-offset: -912px;
}
.iti__dm {
--iti-flag-offset: -928px;
}
.iti__do {
--iti-flag-offset: -944px;
}
.iti__dz {
--iti-flag-offset: -960px;
}
.iti__ec {
--iti-flag-offset: -976px;
}
.iti__ee {
--iti-flag-offset: -992px;
}
.iti__eg {
--iti-flag-offset: -1008px;
}
.iti__eh {
--iti-flag-offset: -1024px;
}
.iti__er {
--iti-flag-offset: -1040px;
}
.iti__es {
--iti-flag-offset: -1056px;
}
.iti__et {
--iti-flag-offset: -1072px;
}
.iti__fi {
--iti-flag-offset: -1088px;
}
.iti__fj {
--iti-flag-offset: -1104px;
}
.iti__fk {
--iti-flag-offset: -1120px;
}
.iti__fm {
--iti-flag-offset: -1136px;
}
.iti__fo {
--iti-flag-offset: -1152px;
}
.iti__fr {
--iti-flag-offset: -1168px;
}
.iti__ga {
--iti-flag-offset: -1184px;
}
.iti__gb {
--iti-flag-offset: -1200px;
}
.iti__gd {
--iti-flag-offset: -1216px;
}
.iti__ge {
--iti-flag-offset: -1232px;
}
.iti__gf {
--iti-flag-offset: -1248px;
}
.iti__gg {
--iti-flag-offset: -1264px;
}
.iti__gh {
--iti-flag-offset: -1280px;
}
.iti__gi {
--iti-flag-offset: -1296px;
}
.iti__gl {
--iti-flag-offset: -1312px;
}
.iti__gm {
--iti-flag-offset: -1328px;
}
.iti__gn {
--iti-flag-offset: -1344px;
}
.iti__gp {
--iti-flag-offset: -1360px;
}
.iti__gq {
--iti-flag-offset: -1376px;
}
.iti__gr {
--iti-flag-offset: -1392px;
}
.iti__gt {
--iti-flag-offset: -1408px;
}
.iti__gu {
--iti-flag-offset: -1424px;
}
.iti__gw {
--iti-flag-offset: -1440px;
}
.iti__gy {
--iti-flag-offset: -1456px;
}
.iti__hk {
--iti-flag-offset: -1472px;
}
.iti__hn {
--iti-flag-offset: -1488px;
}
.iti__hr {
--iti-flag-offset: -1504px;
}
.iti__ht {
--iti-flag-offset: -1520px;
}
.iti__hu {
--iti-flag-offset: -1536px;
}
.iti__id {
--iti-flag-offset: -1552px;
}
.iti__ie {
--iti-flag-offset: -1568px;
}
.iti__il {
--iti-flag-offset: -1584px;
}
.iti__im {
--iti-flag-offset: -1600px;
}
.iti__in {
--iti-flag-offset: -1616px;
}
.iti__io {
--iti-flag-offset: -1632px;
}
.iti__iq {
--iti-flag-offset: -1648px;
}
.iti__ir {
--iti-flag-offset: -1664px;
}
.iti__is {
--iti-flag-offset: -1680px;
}
.iti__it {
--iti-flag-offset: -1696px;
}
.iti__je {
--iti-flag-offset: -1712px;
}
.iti__jm {
--iti-flag-offset: -1728px;
}
.iti__jo {
--iti-flag-offset: -1744px;
}
.iti__jp {
--iti-flag-offset: -1760px;
}
.iti__ke {
--iti-flag-offset: -1776px;
}
.iti__kg {
--iti-flag-offset: -1792px;
}
.iti__kh {
--iti-flag-offset: -1808px;
}
.iti__ki {
--iti-flag-offset: -1824px;
}
.iti__km {
--iti-flag-offset: -1840px;
}
.iti__kn {
--iti-flag-offset: -1856px;
}
.iti__kp {
--iti-flag-offset: -1872px;
}
.iti__kr {
--iti-flag-offset: -1888px;
}
.iti__kw {
--iti-flag-offset: -1904px;
}
.iti__ky {
--iti-flag-offset: -1920px;
}
.iti__kz {
--iti-flag-offset: -1936px;
}
.iti__la {
--iti-flag-offset: -1952px;
}
.iti__lb {
--iti-flag-offset: -1968px;
}
.iti__lc {
--iti-flag-offset: -1984px;
}
.iti__li {
--iti-flag-offset: -2000px;
}
.iti__lk {
--iti-flag-offset: -2016px;
}
.iti__lr {
--iti-flag-offset: -2032px;
}
.iti__ls {
--iti-flag-offset: -2048px;
}
.iti__lt {
--iti-flag-offset: -2064px;
}
.iti__lu {
--iti-flag-offset: -2080px;
}
.iti__lv {
--iti-flag-offset: -2096px;
}
.iti__ly {
--iti-flag-offset: -2112px;
}
.iti__ma {
--iti-flag-offset: -2128px;
}
.iti__mc {
--iti-flag-offset: -2144px;
}
.iti__md {
--iti-flag-offset: -2160px;
}
.iti__me {
--iti-flag-offset: -2176px;
}
.iti__mf {
--iti-flag-offset: -2192px;
}
.iti__mg {
--iti-flag-offset: -2208px;
}
.iti__mh {
--iti-flag-offset: -2224px;
}
.iti__mk {
--iti-flag-offset: -2240px;
}
.iti__ml {
--iti-flag-offset: -2256px;
}
.iti__mm {
--iti-flag-offset: -2272px;
}
.iti__mn {
--iti-flag-offset: -2288px;
}
.iti__mo {
--iti-flag-offset: -2304px;
}
.iti__mp {
--iti-flag-offset: -2320px;
}
.iti__mq {
--iti-flag-offset: -2336px;
}
.iti__mr {
--iti-flag-offset: -2352px;
}
.iti__ms {
--iti-flag-offset: -2368px;
}
.iti__mt {
--iti-flag-offset: -2384px;
}
.iti__mu {
--iti-flag-offset: -2400px;
}
.iti__mv {
--iti-flag-offset: -2416px;
}
.iti__mw {
--iti-flag-offset: -2432px;
}
.iti__mx {
--iti-flag-offset: -2448px;
}
.iti__my {
--iti-flag-offset: -2464px;
}
.iti__mz {
--iti-flag-offset: -2480px;
}
.iti__na {
--iti-flag-offset: -2496px;
}
.iti__nc {
--iti-flag-offset: -2512px;
}
.iti__ne {
--iti-flag-offset: -2528px;
}
.iti__nf {
--iti-flag-offset: -2544px;
}
.iti__ng {
--iti-flag-offset: -2560px;
}
.iti__ni {
--iti-flag-offset: -2576px;
}
.iti__nl {
--iti-flag-offset: -2592px;
}
.iti__no {
--iti-flag-offset: -2608px;
}
.iti__np {
--iti-flag-offset: -2624px;
}
.iti__nr {
--iti-flag-offset: -2640px;
}
.iti__nu {
--iti-flag-offset: -2656px;
}
.iti__nz {
--iti-flag-offset: -2672px;
}
.iti__om {
--iti-flag-offset: -2688px;
}
.iti__pa {
--iti-flag-offset: -2704px;
}
.iti__pe {
--iti-flag-offset: -2720px;
}
.iti__pf {
--iti-flag-offset: -2736px;
}
.iti__pg {
--iti-flag-offset: -2752px;
}
.iti__ph {
--iti-flag-offset: -2768px;
}
.iti__pk {
--iti-flag-offset: -2784px;
}
.iti__pl {
--iti-flag-offset: -2800px;
}
.iti__pm {
--iti-flag-offset: -2816px;
}
.iti__pr {
--iti-flag-offset: -2832px;
}
.iti__ps {
--iti-flag-offset: -2848px;
}
.iti__pt {
--iti-flag-offset: -2864px;
}
.iti__pw {
--iti-flag-offset: -2880px;
}
.iti__py {
--iti-flag-offset: -2896px;
}
.iti__qa {
--iti-flag-offset: -2912px;
}
.iti__re {
--iti-flag-offset: -2928px;
}
.iti__ro {
--iti-flag-offset: -2944px;
}
.iti__rs {
--iti-flag-offset: -2960px;
}
.iti__ru {
--iti-flag-offset: -2976px;
}
.iti__rw {
--iti-flag-offset: -2992px;
}
.iti__sa {
--iti-flag-offset: -3008px;
}
.iti__sb {
--iti-flag-offset: -3024px;
}
.iti__sc {
--iti-flag-offset: -3040px;
}
.iti__sd {
--iti-flag-offset: -3056px;
}
.iti__se {
--iti-flag-offset: -3072px;
}
.iti__sg {
--iti-flag-offset: -3088px;
}
.iti__sh {
--iti-flag-offset: -3104px;
}
.iti__si {
--iti-flag-offset: -3120px;
}
.iti__sj {
--iti-flag-offset: -3136px;
}
.iti__sk {
--iti-flag-offset: -3152px;
}
.iti__sl {
--iti-flag-offset: -3168px;
}
.iti__sm {
--iti-flag-offset: -3184px;
}
.iti__sn {
--iti-flag-offset: -3200px;
}
.iti__so {
--iti-flag-offset: -3216px;
}
.iti__sr {
--iti-flag-offset: -3232px;
}
.iti__ss {
--iti-flag-offset: -3248px;
}
.iti__st {
--iti-flag-offset: -3264px;
}
.iti__sv {
--iti-flag-offset: -3280px;
}
.iti__sx {
--iti-flag-offset: -3296px;
}
.iti__sy {
--iti-flag-offset: -3312px;
}
.iti__sz {
--iti-flag-offset: -3328px;
}
.iti__tc {
--iti-flag-offset: -3344px;
}
.iti__td {
--iti-flag-offset: -3360px;
}
.iti__tg {
--iti-flag-offset: -3376px;
}
.iti__th {
--iti-flag-offset: -3392px;
}
.iti__tj {
--iti-flag-offset: -3408px;
}
.iti__tk {
--iti-flag-offset: -3424px;
}
.iti__tl {
--iti-flag-offset: -3440px;
}
.iti__tm {
--iti-flag-offset: -3456px;
}
.iti__tn {
--iti-flag-offset: -3472px;
}
.iti__to {
--iti-flag-offset: -3488px;
}
.iti__tr {
--iti-flag-offset: -3504px;
}
.iti__tt {
--iti-flag-offset: -3520px;
}
.iti__tv {
--iti-flag-offset: -3536px;
}
.iti__tw {
--iti-flag-offset: -3552px;
}
.iti__tz {
--iti-flag-offset: -3568px;
}
.iti__ua {
--iti-flag-offset: -3584px;
}
.iti__ug {
--iti-flag-offset: -3600px;
}
.iti__us {
--iti-flag-offset: -3616px;
}
.iti__uy {
--iti-flag-offset: -3632px;
}
.iti__uz {
--iti-flag-offset: -3648px;
}
.iti__va {
--iti-flag-offset: -3664px;
}
.iti__vc {
--iti-flag-offset: -3680px;
}
.iti__ve {
--iti-flag-offset: -3696px;
}
.iti__vg {
--iti-flag-offset: -3712px;
}
.iti__vi {
--iti-flag-offset: -3728px;
}
.iti__vn {
--iti-flag-offset: -3744px;
}
.iti__vu {
--iti-flag-offset: -3760px;
}
.iti__wf {
--iti-flag-offset: -3776px;
}
.iti__ws {
--iti-flag-offset: -3792px;
}
.iti__xk {
--iti-flag-offset: -3808px;
}
.iti__ye {
--iti-flag-offset: -3824px;
}
.iti__yt {
--iti-flag-offset: -3840px;
}
.iti__za {
--iti-flag-offset: -3856px;
}
.iti__zm {
--iti-flag-offset: -3872px;
}
.iti__zw {
--iti-flag-offset: -3888px;
}
.iti__globe {
background: none;
box-shadow: none;
height: var(--iti-globe-height);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.iti__globe .iti__globe-svg {
width: 100%;
height: 100%;
fill: var(--iti-icon-color);
}
@supports (-webkit-appearance: none) and (not (background: -webkit-canvas(foo))) {
.iti__tel-input:focus {
outline-offset: 1px;
}
}
:root {
--iti-path-flags-1x: url('/assets/images/intl-tel-input/flags.webp');
--iti-path-flags-2x: url('/assets/images/intl-tel-input/flags@2x.webp');
}
.sec-join-intl-phone {
position: relative;
overflow: visible;
}
.sec-join-intl-phone .iti {
width: 100%;
display: block;
overflow: visible;
}
.sec-join-intl-phone .iti__selected-country {
padding: 0 var(--spacing-sm) 0 0;
background: transparent;
border: 0;
color: var(--clr-text-primary);
gap: var(--spacing-xs);
transition: color 0.15s ease;
}
.sec-join-intl-phone .iti__selected-country:hover:not(:disabled) {
color: var(--clr-primary-700);
}
.sec-join-intl-phone .iti__selected-country:focus {
outline: 0;
}
.sec-join-intl-phone__input {
padding: var(--spacing-sm) 0;
border: 0;
border-bottom: 1px solid var(--clr-gray-300);
background: transparent;
color: var(--clr-text-primary);
width: 100%;
}
.sec-join-intl-phone__input:focus {
outline: 0;
border-bottom-color: var(--clr-primary-700);
}
.sec-join-intl-phone .iti--allow-dropdown input,
.sec-join-intl-phone .iti--separate-dial-code input {
border: 0;
border-bottom: 1px solid var(--clr-gray-300);
background: transparent;
padding-top: var(--spacing-sm);
padding-bottom: var(--spacing-sm);
}
.sec-join-intl-phone .iti--allow-dropdown input:focus,
.sec-join-intl-phone .iti--separate-dial-code input:focus {
border-bottom-color: var(--clr-primary-700);
outline: 0;
}
.sec-join-intl-phone .iti__dropdown-content {
border: 1px solid var(--clr-gray-200);
border-radius: var(--radius-sm);
background: var(--clr-base-white);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
color: var(--clr-text-base);
z-index: 9999;
min-width: 28rem;
max-width: min(40rem, 90vw);
max-height: 30rem;
overflow: hidden;
}
.sec-join-intl-phone .iti__dropdown-content:not(.iti__hide) {
display: flex;
flex-direction: column;
}
.sec-join-intl-phone .iti__country-list {
overflow-y: auto;
flex: 1 1 auto;
}
.sec-join-intl-phone .iti__country {
color: var(--clr-text-base);
}
.sec-join-intl-phone .iti__country.iti__highlight, .sec-join-intl-phone .iti__country:hover {
background: var(--clr-bg-section);
}
.sec-join-intl-phone .iti__dial-code {
color: var(--clr-text-sub);
}
.sec-join-intl-phone .iti__search-input {
border-bottom: 1px solid var(--clr-gray-200);
color: var(--clr-text-base);
background: var(--clr-base-white);
font-family: inherit;
}
.sec-join-intl-phone .iti__search-input::placeholder {
color: var(--clr-text-aux);
}
}
@layer layouts {
:root {
/* === semantic === */
--clr-primary-hover: var(--clr-primary-700);
--clr-primary-accent: var(--clr-accent-500);
--clr-common-background: var(--clr-base-white);
--clr-common-on-background: var(--clr-base-black);
--clr-text-primary: var(--clr-text-base);
--clr-text-secondary: var(--clr-text-sub);
--clr-text-tertiary: var(--clr-text-aux);
--clr-background-paper: var(--clr-bg-page);
--clr-background-primary: var(--clr-bg-section);
--clr-background-secondary: var(--clr-bg-line);
--clr-background-philo: var(--clr-bg-section);
}
:root {
--clr-primary-950: #352820;
--clr-primary-900: #352820;
--clr-primary-700: #826c5b;
--clr-primary-500: #c4ae9b;
--clr-primary-400: #d8cbb8;
--clr-primary-50: #d8cbb8;
--clr-primary-main: var(--clr-primary-500);
--clr-secondary-900: #826c5b;
--clr-accent-300: #d8cbb8;
--clr-accent-500: #826c5b;
--clr-accent-700: #352820;
--clr-text-base: #352820;
--clr-text-sub: #352820;
--clr-text-aux: #826c5b;
--clr-gray-50: #f6f1ea;
--clr-gray-100: #f6f1ea;
--clr-gray-200: #efe5da;
--clr-gray-300: #d8cbb8;
--clr-gray-400: #c4ae9b;
--clr-gray-500: #826c5b;
--clr-gray-600: #826c5b;
--clr-gray-700: #352820;
--clr-gray-800: #352820;
--clr-gray-900: #352820;
/* === base === */
--clr-base-white: #ffffff;
--clr-base-black: #000000;
/* === 60% — Background / Base === */
--clr-bg-page: #efe5da;
--clr-bg-section: #f6f1ea;
--clr-bg-line: #d8cbb8;
/* gradient shorthand */
--clr-primary-gradient: 90deg, #352820, #826c5b;
/* === UI (Border / Hover) === */
--clr-ui-border: #d8cbb8;
--clr-ui-hover-bg: #efe5da;
/* === Semantic status === */
--clr-status-success: #16a34a;
--clr-status-warning: #d97706;
--clr-status-error: #dc2626;
--clr-status-info: var(--clr-primary-500);
/* === Event category chips === */
--clr-chip-seminar: #352820;
--clr-chip-workshop: #826c5b;
--clr-chip-symposium: #c4ae9b;
--clr-chip-education: #16a34a;
--clr-chip-special: #dc2626;
}
:root {
/* === Brand palette === */
--public-brand-ink: var(--clr-primary-950);
--public-brand-dark: var(--clr-primary-900);
--public-brand-accent: var(--clr-accent-500);
--public-brand-accent-soft: var(--clr-accent-300);
--public-brand-surface: var(--clr-bg-page);
--public-brand-surface-strong: var(--clr-primary-50);
--public-brand-line: var(--clr-primary-400);
/* === Public semantic aliases === */
--public-navy: var(--public-brand-dark);
--public-navy-deep: var(--public-brand-ink);
--public-blue: var(--public-brand-accent);
--public-blue-soft: var(--public-brand-surface-strong);
--public-ink: var(--public-brand-ink);
--public-muted: var(--clr-text-sub);
--public-muted-soft: var(--clr-text-aux);
--color-text-muted: color-mix(in srgb, var(--public-muted-soft) 80%, var(--public-ink));
--public-line: var(--clr-ui-border);
--public-line-strong: var(--public-brand-line);
--public-surface: var(--public-brand-surface);
--public-surface-subtle: var(--clr-bg-section);
--public-white: var(--clr-bg-section);
--color-background-dropdown-light: color-mix(in srgb, var(--public-white) 94%, var(--public-brand-ink));
--color-background-dropdown-dark: color-mix(in srgb, var(--public-brand-dark) 95%, var(--public-white));
--public-header-black: var(--clr-base-black);
--public-header-white: var(--clr-base-white);
--public-overlay: rgba(0, 0, 0, .29);
--public-focus: var(--public-brand-accent);
--public-page-transition-backdrop: color-mix(in srgb, var(--public-brand-ink) 16%, #000);
--public-cart-toast-action: var(--public-blue);
--public-search-placeholder-color: var(--public-muted);
/* === Feedback states === */
--public-feedback-success: #2f6c55;
--public-feedback-success-soft: #edf6ef;
--public-feedback-warning: #9a6d2c;
--public-feedback-warning-soft: #faf2e3;
--public-feedback-error: #a83f58;
--public-feedback-error-soft: #fff0f4;
--public-auth-success: var(--public-feedback-success);
--public-auth-error: var(--public-feedback-error);
/* === Transit and award colors === */
--public-transit-subway-1: #d93f5c;
--public-transit-subway-2: #00aa80;
--public-transit-bus-trunk: #1478c9;
--public-transit-bus-feeder: #d59d00;
--public-transit-bus-express: #d43d47;
--public-transit-line-1: #e72f70;
--public-transit-line-2: var(--public-transit-subway-2);
--public-award-black: #1e1e1e;
--public-award-plum: var(--public-brand-dark);
--public-award-blue: #0047ff;
--public-award-wine: var(--public-feedback-error);
--public-award-green: var(--public-feedback-success);
/* === External brand colors === */
--public-kakao: #fee500;
--public-kakao-hover: #f4dc00;
--public-social-instagram: radial-gradient(circle at 30% 105%, #ffd600 0 24%, #ff7a00 25% 38%, #ff0169 52%, #d300c5 72%, #7638fa 92%);
--public-social-kakao: var(--public-kakao);
--public-social-naver: #03c75a;
--public-social-youtube: #ff0033;
--public-social-ink: #111111;
}
/* Local editorial display: Cormorant Garamond + Noto Serif KR.
* Functional copy, prices and controls: Manrope + Pretendard. */
/**
* Typography tokens — Home
* Display: Cormorant Garamond + Noto Serif KR; body/UI: Manrope + Pretendard.
* 정본: 본 파일. 가이드: docs/02-variables/brand-guide.md
*
* 규칙(AGENTS.md 절대규칙 #11):
* - SCSS 컴포넌트에서 font-size 직접 지정 금지. var(--*-fs) 만 사용.
* - 페이지·뷰 마크업에서 .no-display-* / .no-heading-* / .no-body-* 유틸리티 클래스 사용.
*/
:root {
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
/* === Font family — 정본 토큰 === */
--font-manrope-family: "Manrope", "Pretendard Variable", "Pretendard",
-apple-system, BlinkMacSystemFont, "Segoe UI",
"Noto Sans KR", system-ui, sans-serif;
--font-sans-family: var(--font-manrope-family);
--font-display-family: "Cormorant Garamond", "Noto Serif KR", "Pretendard", serif;
--font-heading-family: var(--font-display-family);
--font-english-family: var(--font-manrope-family);
--font-mono-family: var(--font-manrope-family);
--font-oswald-family: var(--font-manrope-family); /* deprecated compatibility alias */
/* Letter-spacing */
--tracking-display: -0.015em;
--tracking-heading: -0.01em;
--tracking-body: 0em;
--tracking-caps: 0.06em; /* small-caps·overline */
/* === Legacy family alias — 기존 페이지·컴포넌트 호환 === */
--family-primary: var(--font-sans-family);
--family-display: var(--font-display-family);
--family-mono: var(--font-mono-family);
--family-pretendard: var(--font-sans-family);
--family-hggothic: var(--font-sans-family); /* 이전 프로젝트 잔재. sans 로 흡수 */
/* === Display (히어로/대제목) — editorial serif === */
--display-xs-fs: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
--display-sm-fs: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
--display-md-fs: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
--display-lg-fs: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
--display-xl-fs: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
--display-xs-lh: 1.12;
--display-sm-lh: 1.08;
--display-md-lh: 1.04;
--display-lg-lh: 1.00;
--display-xl-lh: 0.98;
--display-xs-fw: var(--font-weight-regular);
--display-sm-fw: var(--font-weight-regular);
--display-md-fw: var(--font-weight-regular);
--display-lg-fw: var(--font-weight-regular);
--display-xl-fw: var(--font-weight-regular);
/* === Heading (섹션 타이틀) — editorial serif / compact sans === */
--heading-2xs-fs: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
--heading-xs-fs: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
--heading-sm-fs: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
--heading-md-fs: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
--heading-bl-fs: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
--heading-lg-fs: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
--heading-xl-fs: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
--heading-2xs-lh: 1.42;
--heading-xs-lh: 1.36;
--heading-sm-lh: 1.32;
--heading-md-lh: 1.28;
--heading-bl-lh: 1.24;
--heading-lg-lh: 1.20;
--heading-xl-lh: 1.12;
--heading-2xs-fw: 500;
--heading-xs-fw: var(--font-weight-medium);
--heading-sm-fw: var(--font-weight-medium);
--heading-md-fw: var(--font-weight-medium);
--heading-bl-fw: var(--font-weight-medium);
--heading-lg-fw: var(--font-weight-medium);
--heading-xl-fw: var(--font-weight-medium);
/* === Body — Manrope (한글: Pretendard) === */
--body-xs-fs: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
--body-sm-fs: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
--body-md-fs: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem); /* 기본 본문·설명글 default */
--body-lg-fs: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem); /* 강조·라벨 */
--body-xl-fs: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
--body-card-desc-fs: 1.4rem;
--body-xs-lh: 1.55;
--body-sm-lh: 1.6;
--body-md-lh: 1.65;
--body-lg-lh: 1.6;
--body-xl-lh: 1.55;
--body-card-desc-lh: 1.55;
--body-xs-fw: var(--font-weight-regular);
--body-sm-fw: var(--font-weight-regular);
--body-md-fw: var(--font-weight-regular);
--body-lg-fw: var(--font-weight-regular);
--body-xl-fw: var(--font-weight-regular);
--body-card-desc-fw: var(--font-weight-regular);
/* === Semantic public hierarchy aliases === */
--subhero-title-fs: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
--subhero-title-lh: 1.08;
--subhero-title-fw: var(--font-weight-regular);
--section-title-fs: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
--section-title-lh: 1.14;
--section-title-fw: var(--font-weight-regular);
--middle-title-lg-fs: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
--middle-title-lg-lh: 1.1;
--middle-title-lg-fw: var(--font-weight-regular);
--middle-title-md-fs: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
--middle-title-md-lh: 1.18;
--middle-title-md-fw: var(--font-weight-medium);
--list-title-fs: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
--list-title-lh: 1.32;
--list-title-fw: var(--font-weight-medium);
--subtitle-fs: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
--subtitle-lh: 1.6;
--subtitle-fw: var(--font-weight-regular);
/* === Overline / eyebrow (섹션 소문구 라벨) — Manrope Medium, 캡스 === */
--overline-fs: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
--overline-lh: 1.4;
--overline-fw: var(--font-weight-medium);
/* === Mono (캡션·다이어그램 라벨·overline) === */
--mono-xs-fs: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
--mono-sm-fs: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
/* === Decorative (Marquee Whisper / I3 — Manrope, 매우 큼) === */
--deco-marquee-fs: clamp(9.6rem, 5.9546925566vw + 7.3669902913rem, 18.8rem);
/* Decorative wordmark (WHO WE ARE §signature — Manrope, 뷰포트 폭 채우는 초대형).
* scale(1) 에서 긴 디스플레이 문구가 컨테이너 폭에 맞고, JS 가 scale 확대→축소. */
--deco-wordmark-fs: clamp(6.4rem, 10.0970873786vw + 2.613592233rem, 22rem);
--deco-wordmark-fw: var(--font-weight-medium);
--deco-wordmark-lh: 0.8;
}
@media (max-width: 767px) {
:root {
--body-sm-fs: 1.6rem;
--body-md-fs: 1.6rem;
}
}
/**
* Motion tokens — Home
* 정본: 본 파일. JS는 resources/ts/home/global/MotionTokens.ts 동일 값.
* 사용: SCSS `transition: transform var(--dur-base) var(--ease-out-quart);`
* JS `gsap.to(el, { duration: 0.88, ease: 'expo.out' })` ← MotionTokens.ts 참조
*
* 가이드 문서: docs/00-overview/goals.md "차분함 80% : 임팩트 20%"
* workspace/guides/02-스타일-가이드.md §8
*/
:root {
/* === Duration === */
--dur-instant: 100ms; /* hover state 토글, focus ring */
--dur-fast: 200ms; /* 버튼 press, chip toggle */
--dur-base: 320ms; /* 카드 hover, 색 전환 */
--dur-slow: 560ms; /* 모달·드로어 진입 */
--dur-slower: 880ms; /* Hero Display reveal (I1) */
--dur-epic: 1200ms; /* Image mask reveal, scroll-pinned 단계 */
/* === Easing ===
* 1) out-quart : 기본 진입 (Unseen Studio·기본값)
* 2) out-expo : 강한 감속 (Hero Display·시그니처 모먼트)
* 3) in-out : 양방향 (드로어·tab 전환)
* 4) spring : 미세 바운스 (버튼 한정 — 페이지 본문 금지)
* 5) linear : 마키·무한 스크롤
*/
--ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-linear: linear;
/* === Stagger === */
--stagger-base: 60ms; /* I1 Type Mask Reveal 단어 간격 */
--stagger-fast: 30ms; /* I2 Char Stagger 글자 간격 */
--stagger-slow: 120ms; /* 리스트 카드 진입 */
/* === Translate offsets (reveal 초기값) === */
--reveal-offset-sm: 16px; /* body·메타 */
--reveal-offset-md: 40px; /* heading */
--reveal-offset-lg: 80px; /* hero display */
}
/* prefers-reduced-motion 가드 — 즉시 최종 상태로 */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-instant: 0ms;
--dur-fast: 0ms;
--dur-base: 0ms;
--dur-slow: 0ms;
--dur-slower: 0ms;
--dur-epic: 0ms;
--stagger-base: 0ms;
--stagger-fast: 0ms;
--stagger-slow: 0ms;
--reveal-offset-sm: 0px;
--reveal-offset-md: 0px;
--reveal-offset-lg: 0px;
}
}
:root {
--gutter: 2rem;
--header-height: 9.8rem;
--header-z-index: 9999;
--drawer-z-index: 999;
--tran-15: 0.15s ease;
--tran-3: 0.3s ease;
--family-base: var(--family-hggothic);
}
@media (max-width: 768px) {
:root {
--header-height: 4.8rem;
}
}
:root {
--public-location-top-gap: clamp(8rem, 3.1067961165vw + 6.8349514563rem, 12.8rem);
--public-cart-toast-max: 44rem;
--public-cart-toast-min-height: 8.8rem;
--public-cart-toast-padding-block: 2rem;
--public-cart-toast-padding-inline: 3.2rem;
--public-event-card-inset: 2.4rem;
--public-focus-width: .2rem;
--public-focus-offset: .3rem;
--public-header-height: 14rem;
--public-header-content-height: 10rem;
--public-shell-max: 160rem;
--public-shell-gutter: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
--public-header-gutter: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
--public-header-max: 132rem;
--public-detail-max: 94rem;
--public-control-sm: 4.4rem;
--public-control-md: 5.2rem;
--public-control-lg: 5.6rem;
--public-filter-tab-mobile-height: 3.6rem;
--public-button-font-size: clamp(1.4rem, .9vw, 1.5rem);
--public-button-frame-radius: 0;
--public-action-radius: 3rem;
--public-action-end-width: 2.2rem;
--public-action-duration: 350ms;
--public-link-line-width: 2.2rem;
--public-link-line-hover-width: 3.8rem;
--public-link-line-gap: 1.8rem;
--public-treatment-body-font-size: 1.6rem;
--public-header-action-width: clamp(3.2rem, 0.2588996764vw + 3.1029126214rem, 3.6rem);
--public-header-icon-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
--public-header-action-size: var(--public-control-sm);
--public-header-appointment-width: 22rem;
--public-header-notify-size: 1.2rem;
--public-header-notify-font-size: .8rem;
--public-icon-sm: 1.8rem;
--public-icon-md: 2.2rem;
--public-icon-lg: 2.4rem;
--public-treatment-pictogram-frame-sm: 9.6rem;
--public-treatment-pictogram-frame-md: 13.2rem;
--public-treatment-pictogram-frame-lg: 16rem;
--public-header-action-shadow: 0 .6rem 1.6rem rgba(77, 56, 45, .12);
--public-card-row: 7.6rem;
--public-space-2xs: .8rem;
--public-space-xs: 1.2rem;
--public-space-sm: 1.6rem;
--public-space-md: 2rem;
--public-space-lg: 2.5rem;
--public-space-xl: 3rem;
--public-space-2xl: 4rem;
--public-space-3xl: 5rem;
--public-space-section: 5.5rem;
--public-space-page: 6.5rem;
--public-radius-sm: 0;
--public-radius-md: 0;
--public-radius-pill: 999px;
--public-check-size: 2.4rem;
--public-cart-max: 81.2rem;
--public-cart-panel-padding: 3rem;
--public-cart-row-min-height: 18.9rem;
--public-cart-page-bottom: 11.8rem;
--public-footer-mobile-safe-space: 3.2rem;
--public-home-title-family: var(--font-display-family);
--public-home-title-fs: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
--public-home-title-fw: var(--font-weight-regular);
--public-home-title-lh: 1.12;
--public-home-lead-fs: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
--public-study-media-ratio: 316 / 231;
--public-nav-fs: 1.8rem;
--public-drawer-root-fs: 4.8rem;
--public-search-max-width: 64rem;
--public-search-height: 4.8rem;
--public-search-submit-width: clamp(8rem, 0.5177993528vw + 7.8058252427rem, 8.8rem);
--public-search-gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
--public-search-input-padding-inline: var(--public-space-xs);
--public-search-icon-slot: clamp(4.4rem, 0.2588996764vw + 4.3029126214rem, 4.8rem);
--public-search-icon-size: var(--public-icon-md);
--public-auth-panel-max: 44rem;
--public-auth-mark-size: 6.4rem;
--public-social-icon-size: 2rem;
--public-duration: .35s;
--public-ease: cubic-bezier(.22, .8, .25, 1);
--public-z-header: 90;
--public-z-async-directory: 110;
--public-z-drawer: 120;
--public-z-cursor: 21000;
}
@media (max-width: 1023px) {
:root {
--public-header-max: 100%;
--public-header-height: 12.8rem;
--public-header-content-height: 8.8rem;
--public-control-sm: 4.4rem;
--public-header-appointment-width: 18rem;
}
}
@media (max-width: 767px) {
:root {
--public-header-height: 8.4rem;
--public-header-content-height: 5.6rem;
--public-header-action-size: 4rem;
}
}
html:has(.public-header--without-award) {
--public-header-height: var(--public-header-content-height);
}
.public-header.site-header {
--public-header-fill-duration: .56s;
}
.public-about-showcase {
--public-about-showcase-wave: 0;
}
.public-history__track {
--history-line-top: 56rem;
--history-line-bottom: 16rem;
--history-line-gap-1-start: 0px;
--history-line-gap-1-end: 0px;
--history-line-gap-2-start: 0px;
--history-line-gap-2-end: 0px;
--history-line-gap-3-start: 0px;
--history-line-gap-3-end: 0px;
}
.public-history__outro-title {
--history-outro-fill: 100%;
}
.public-home ~ .no-floating-cta {
--fcta-size: 4.8rem;
--fcta-gap-edge: max(2rem, calc((100vw - 164rem) / 2));
--fcta-btn-gap: .6rem;
--fcta-radius: var(--public-radius-pill);
--fcta-shadow: none;
--fcta-shadow-hover: none;
}
.public-practice-page ~ .no-floating-cta {
--fcta-size: 5.2rem;
--fcta-gap-edge: 3rem;
--fcta-gap-bottom: 3rem;
--fcta-btn-gap: .8rem;
--fcta-radius: 0;
--fcta-shadow: none;
--fcta-shadow-hover: none;
}
.public-event-page ~ .no-floating-cta {
--fcta-size: 5.2rem;
--fcta-gap-edge: 3rem;
--fcta-gap-bottom: 3rem;
--fcta-btn-gap: .8rem;
--fcta-radius: 0;
--fcta-shadow: none;
--fcta-shadow-hover: none;
}
.public-recruit__steps {
--recruit-step-marker: 6rem;
--recruit-step-gap: 7.2rem;
}
@media (max-width: 1279px) and (min-width: 768px) {
.public-recruit__steps {
--recruit-step-marker: 6.2rem;
--recruit-step-gap: 7.6rem;
}
}
@media (max-width: 767px) {
.public-recruit__steps {
--recruit-step-gap: 5rem;
}
}
:root {
/* === Section spacing (섹션 상·하단 패딩) === */
--section-xs: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
--section-sm: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
--section-md: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 9.6rem);
--section-lg: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem);
--section-xl: clamp(8rem, 10.355987055vw + 4.1165048544rem, 24rem);
/* === Border Radius (유동 반경) === */
--radius-xs: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
--radius-sm: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
--radius-md: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
--radius-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
--radius-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
--radius-round: 9999px;
/* === Spacing (마진·패딩 기본 단위, fluid 적용) === */
--spacing-xxs: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
--spacing-xs: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
--spacing-sm: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem);
--spacing-md: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
--spacing-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
--spacing-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
--spacing-2xl: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
--spacing-3xl: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
--spacing-4xl: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
--spacing-5xl: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem);
--spacing-6xl: clamp(8rem, 10.355987055vw + 4.1165048544rem, 24rem);
}
/* 다크 네이비 2단 푸터 (2026-06-29 시안).
* 배경 = .no-bg--brand 유틸(var(--clr-primary-900)). 타이포 위계 = HTML no-* 유틸.
* 본 파일은 레이아웃(flex·gap)과 다크 배경용 색상만 담당(절대 규칙 #17). */
.site-footer {
color: var(--clr-base-white);
}
.site-footer__inner {
padding-top: clamp(4.8rem, 2.5889967638vw + 3.8291262136rem, 8.8rem);
padding-bottom: clamp(4.8rem, 2.5889967638vw + 3.8291262136rem, 8.8rem);
}
.site-footer__main {
display: flex;
justify-content: space-between;
gap: clamp(4rem, 5.1779935275vw + 2.0582524272rem, 12rem);
}
@media (max-width: 1024px) {
.site-footer__main {
flex-direction: column;
gap: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem);
}
}
.site-footer__brand {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(4.8rem, 2.5889967638vw + 3.8291262136rem, 8.8rem);
min-width: 0;
}
@media (max-width: 1024px) {
.site-footer__brand {
justify-content: flex-start;
gap: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
}
}
.site-footer__brand-head {
display: flex;
flex-direction: column;
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
.site-footer__tagline {
margin: 0;
}
.site-footer__company {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.site-footer__info-line {
color: rgba(255, 255, 255, 0.56);
}
.site-footer__info-line span {
display: inline;
}
.site-footer__sep {
color: rgba(255, 255, 255, 0.26);
margin: 0 0.4rem;
}
.site-footer__brand-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.4rem;
flex-wrap: wrap;
}
@media (max-width: 544px) {
.site-footer__brand-foot {
gap: 1.6rem;
}
}
.site-footer__logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
}
.site-footer__logo img {
height: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
width: auto;
object-fit: contain;
}
.site-footer__socials {
display: flex;
align-items: center;
gap: 1.6rem;
list-style: none;
padding: 0;
margin: 0;
}
.site-footer__socials a {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.62);
font-size: 2rem;
transition: color 0.18s ease;
}
.site-footer__socials a:hover {
color: var(--clr-accent-300);
}
.site-footer__socials svg {
width: 2.2rem;
height: 2.2rem;
fill: currentColor;
}
.site-footer__socials[hidden] {
display: none;
}
.site-footer__aside {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: clamp(4.8rem, 2.5889967638vw + 3.8291262136rem, 8.8rem);
flex-shrink: 0;
}
@media (max-width: 1024px) {
.site-footer__aside {
justify-content: flex-start;
gap: 2.8rem;
}
}
.site-footer__nav-list {
display: flex;
flex-direction: column;
gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
list-style: none;
padding: 0;
margin: 0;
}
.site-footer__nav-link {
color: var(--clr-base-white);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
transition: color 0.18s ease;
}
.site-footer__nav-link:hover, .site-footer__nav-link.is-active {
color: var(--clr-accent-300);
}
.site-footer span.site-footer__nav-link {
cursor: default;
}
.site-footer__meta {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.site-footer__copy {
margin: 0;
color: rgba(255, 255, 255, 0.45);
}
.site-footer__legal {
display: flex;
align-items: center;
gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
list-style: none;
padding: 0;
margin: 0;
}
.site-footer__legal a {
color: rgba(255, 255, 255, 0.56);
text-decoration: none;
white-space: nowrap;
transition: color 0.18s ease;
}
.site-footer__legal a:hover {
color: var(--clr-base-white);
}
@media (max-width: 544px) {
.site-footer__legal {
flex-wrap: wrap;
gap: 0.8rem 2rem;
}
}
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--header-z-index);
width: 100%;
pointer-events: none;
}
.site-header__bar {
position: relative;
z-index: 1;
width: 100%;
height: 10rem;
pointer-events: auto;
display: flex;
align-items: stretch;
background: var(--clr-base-white);
border-bottom: 1px solid var(--clr-ui-border);
}
@media (max-width: 1024px) {
.site-header__bar {
height: 8rem;
}
}
@media (max-width: 768px) {
.site-header__bar {
height: 6rem;
}
}
.site-header__bar-inner {
flex: 1 1 0;
min-width: 0;
max-width: 1640px;
margin: 0 auto;
padding: 0 clamp(2.4rem, 2.3300970874vw + 1.5262135922rem, 6rem);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: clamp(1.6rem, 2.071197411vw + 0.8233009709rem, 4.8rem);
}
@media (max-width: 1640px) {
.site-header__bar-inner {
padding: 0 var(--spacing-lg);
}
}
@media (max-width: 1024px) {
.site-header__bar-inner {
gap: var(--spacing-md);
padding: 0 var(--spacing-md);
}
}
@media (max-width: 768px) {
.site-header__bar-inner {
grid-template-columns: 1fr auto;
padding: 0 var(--spacing-md);
}
}
@media (max-width: 544px) {
.site-header__bar-inner {
padding: 0 var(--spacing-sm);
}
}
.site-header__logo {
display: inline-flex;
align-items: center;
justify-self: start;
height: 100%;
}
.site-header__logo img {
display: block;
width: auto;
height: auto;
max-height: 6rem; /* (= 60px) 10rem 바 안 여백 확보 */
max-width: 18rem;
object-fit: contain;
}
@media (max-width: 1024px) {
.site-header__logo img {
max-height: 5rem;
}
}
@media (max-width: 768px) {
.site-header__logo img {
max-height: 4rem;
}
}
@media (max-width: 544px) {
.site-header__logo img {
max-height: 3.6rem;
}
}
.site-header nav {
min-width: 0;
}
.site-header nav .cms-menu__link {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.site-header nav .cms-menu__list--depth-0 {
display: flex;
align-items: stretch;
justify-content: center;
}
.site-header nav .cms-menu__list--depth-0 > .cms-menu__item {
display: flex;
align-items: center;
}
.site-header nav .cms-menu__list--depth-0 > .cms-menu__item.is-dropdown-open .site-header__dropdown, .site-header nav .cms-menu__list--depth-0 > .cms-menu__item:focus-within .site-header__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-header nav .cms-menu__list--depth-0 > .cms-menu__item.is-dropdown-open > .cms-menu__link, .site-header nav .cms-menu__list--depth-0 > .cms-menu__item:focus-within > .cms-menu__link {
color: var(--clr-text-sub);
}
.site-header nav .cms-menu__list--depth-0 > .cms-menu__item > .cms-menu__link {
position: relative;
min-height: 10rem;
padding: 0 clamp(1.4rem, 0.7766990291vw + 1.1087378641rem, 2.6rem);
font-size: var(--body-md-fs);
font-weight: 700;
color: var(--clr-text-base);
transition: color 0.2s;
}
.site-header nav .cms-menu__list--depth-0 > .cms-menu__item > .cms-menu__link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.2rem;
background: var(--clr-accent-500);
opacity: 0;
transition: opacity 0.2s;
}
.site-header nav .cms-menu__list--depth-0 > .cms-menu__item > .cms-menu__link.is-active {
color: var(--clr-accent-700);
}
.site-header nav .cms-menu__list--depth-0 > .cms-menu__item > .cms-menu__link.is-active::after {
background: var(--clr-accent-500);
opacity: 1;
}
@media (max-width: 1024px) {
.site-header nav .cms-menu__list--depth-0 > .cms-menu__item > .cms-menu__link {
min-height: 8rem;
padding: 0 var(--spacing-sm);
font-size: var(--body-xs-fs);
}
}
.site-header nav .cms-menu__list--depth-0 > .cms-menu__item:hover > .cms-menu__link {
color: var(--clr-accent-700);
}
.site-header nav .cms-menu__list--depth-0 > .cms-menu__item:hover > .cms-menu__link::after {
opacity: 1;
}
.site-header nav .cms-menu__item {
position: relative;
}
.site-header nav .cms-menu__list--depth-1 {
position: absolute;
top: 100%;
left: 50%;
min-width: 22rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 1rem;
background: var(--clr-base-white);
border: 1px solid var(--clr-ui-border);
border-radius: 1.2rem;
box-shadow: 0 1.8rem 4.4rem rgba(17, 18, 26, 0.16);
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-0.6rem);
transition: opacity 0.22s var(--ease-out-quart), visibility 0.22s ease, transform 0.22s var(--ease-out-quart);
z-index: 200;
}
.site-header nav .cms-menu__list--depth-1 .cms-menu__link {
display: block;
min-height: 0;
padding: 1rem 1.4rem;
border-radius: 0.8rem;
font-weight: 600;
color: var(--clr-text-sub);
white-space: nowrap;
transition: background-color 0.16s ease, color 0.16s ease;
}
.site-header nav .cms-menu__list--depth-1 .cms-menu__link:hover {
background: var(--clr-ui-hover-bg);
color: var(--clr-accent-700);
}
.site-header nav .cms-menu__item--has-children:hover > .cms-menu__list--depth-1, .site-header nav .cms-menu__item--has-children:focus-within > .cms-menu__list--depth-1 {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media (max-width: 768px) {
.site-header nav {
display: none;
}
}
.site-header__dropdown {
position: fixed;
top: 10rem;
left: 0;
right: 0;
z-index: 200;
width: 100%;
background: #fff;
border-top: 2px solid var(--clr-primary-900);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(-0.6rem);
transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}
.site-header__dropdown--mega {
top: 10rem;
}
@media (max-width: 1024px) {
.site-header__dropdown {
top: 8rem;
}
}
@media (max-width: 768px) {
.site-header__dropdown {
top: 6rem;
}
}
.site-header__dropdown-inner {
max-width: 1640px;
margin: 0 auto;
padding: 3.2rem clamp(2.4rem, 2.3300970874vw + 1.5262135922rem, 6rem) 3.6rem;
}
.site-header__dropdown-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.2rem 2.4rem;
align-items: start;
}
.site-header__dropdown-grid--col-2 {
grid-template-columns: repeat(2, 1fr);
}
.site-header__dropdown-grid--col-3 {
grid-template-columns: repeat(3, 1fr);
}
.site-header__dropdown-item {
display: flex;
flex-direction: column;
}
.site-header__dropdown-item-head {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 1.6rem;
border-radius: 0.6rem;
background: var(--clr-bg-section);
border: 1px solid transparent;
text-decoration: none;
white-space: normal;
transition: background-color 0.18s ease, border-color 0.18s ease;
}
.site-header__dropdown-item-head:hover {
background: var(--clr-primary-50);
border-color: var(--clr-primary-500);
}
.site-header__dropdown-item-head:hover .site-header__dropdown-item-title {
color: var(--clr-primary-700);
}
.site-header__dropdown-item-title {
display: block;
font-weight: 700;
font-size: var(--body-sm-fs);
line-height: 1.4;
color: var(--clr-text-base);
transition: color 0.18s;
}
.site-header__dropdown-item-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--body-xs-fs);
color: var(--clr-text-sub);
line-height: 1.55;
margin: 0;
}
.site-header__dropdown--research .site-header__dropdown-inner {
padding-top: 3.2rem;
padding-bottom: 3.6rem;
}
.site-header__dropdown-research-layout {
display: grid;
grid-template-columns: 1fr 36rem;
gap: 0 3rem;
align-items: start;
}
@media (max-width: 1320px) {
.site-header__dropdown-research-layout {
grid-template-columns: 1fr;
gap: 2.4rem 0;
}
}
.site-header__dropdown-section-label {
display: block;
color: var(--clr-text-aux);
text-transform: uppercase;
text-align: left;
letter-spacing: 0.08em;
margin-bottom: 1.2rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--clr-ui-border);
}
.site-header__dropdown-research-main {
min-width: 0;
}
.site-header__dropdown-research-side {
min-width: 0;
padding-left: 2.4rem;
border-left: 1px solid var(--clr-ui-border);
}
.site-header__dropdown-research-side a {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
padding: 0.9rem 0;
color: var(--clr-text-base);
border-bottom: 1px solid var(--clr-bg-line);
white-space: normal;
text-align: left;
text-decoration: none;
transition: color 0.18s;
word-break: break-word;
overflow-wrap: break-word;
}
.site-header__dropdown-research-side a:last-child {
border-bottom: none;
}
.site-header__dropdown-research-side a:hover {
color: var(--clr-primary-700);
}
.site-header__dropdown-research-side a:hover .site-header__dropdown-item-title {
color: var(--clr-primary-700);
}
.site-header__dropdown-research-side a span {
display: block;
color: var(--clr-text-sub);
text-align: left;
white-space: normal;
word-break: break-word;
overflow-wrap: break-word;
}
@media (max-width: 1320px) {
.site-header__dropdown-research-side {
padding-left: 0;
border-left: none;
border-top: 1px solid var(--clr-ui-border);
padding-top: 2.4rem;
}
}
.site-header__actions {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
justify-self: end;
gap: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
}
@media (max-width: 768px) {
.site-header__actions {
gap: 0;
}
}
.site-header__cta {
flex-shrink: 0;
}
@media (max-width: 768px) {
.site-header__cta {
display: none;
}
}
.site-header__menu-toggle {
width: 4.8rem;
height: 4.8rem;
color: var(--clr-text-base);
display: none;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease, color 0.2s ease;
}
.site-header__menu-toggle i {
font-size: 2.2rem;
}
.site-header__menu-toggle:hover {
background-color: rgba(17, 18, 26, 0.06);
}
@media (max-width: 768px) {
.site-header__menu-toggle {
display: flex;
width: 5.6rem;
height: 5.6rem;
}
.site-header__menu-toggle i {
font-size: 1.6rem;
}
}
@media (max-width: 544px) {
.site-header__menu-toggle {
width: 4.8rem;
height: 4.8rem;
}
}
.page-hero {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--clr-primary-900) 0%, var(--clr-primary-700) 100%);
min-height: clamp(20rem, 6.4724919094vw + 17.572815534rem, 30rem);
display: flex;
align-items: flex-end;
}
.page-hero__bg {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
.page-hero .no-container-xl {
position: relative;
z-index: 1;
width: 100%;
padding-top: calc(var(--header-height) + clamp(4rem, 1.2944983819vw + 3.5145631068rem, 6rem));
padding-bottom: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 5.6rem);
}
.page-hero__breadcrumb {
margin-bottom: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem);
}
.page-hero__breadcrumb ol {
display: flex;
align-items: center;
gap: 0.6rem;
list-style: none;
margin: 0;
padding: 0;
}
.page-hero__breadcrumb li {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: var(--body-xs-fs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.page-hero__breadcrumb li::after {
content: "/";
color: rgba(255, 255, 255, 0.3);
font-weight: 400;
}
.page-hero__breadcrumb li:last-child::after {
content: none;
}
.page-hero__breadcrumb li[aria-current=page] {
color: rgba(255, 255, 255, 0.9);
}
.page-hero__breadcrumb a {
color: inherit;
transition: color 0.2s ease;
}
.page-hero__breadcrumb a:hover {
color: rgba(255, 255, 255, 0.85);
}
.page-hero__title {
color: var(--clr-base-white, #fff);
font-weight: 700;
line-height: 1.15;
}
.page-hero__desc {
margin-top: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 1.8rem);
max-width: 64ch;
color: rgba(255, 255, 255, 0.78);
line-height: 1.65;
}
@media (max-width: 544px) {
.page-hero {
min-height: clamp(16rem, 2.5889967638vw + 15.0291262136rem, 20rem);
}
.page-hero__desc {
display: none;
}
}
.no-sub-visual {
position: relative;
overflow: hidden;
background: url("../images/sub-visual-bg.jpg") center/cover no-repeat;
height: clamp(32rem, 7.7669902913vw + 29.0873786408rem, 44rem);
}
.no-sub-visual .no-container-xl {
position: relative;
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 100%;
padding-bottom: 3.2rem;
}
@media (max-width: 544px) {
.no-sub-visual .no-container-xl {
flex-direction: column-reverse;
align-items: flex-start;
justify-content: flex-start;
gap: 2rem;
}
}
.no-sub-visual .meta {
display: inline-flex;
align-items: center;
gap: clamp(1rem, 0.5177993528vw + 0.8058252427rem, 1.8rem);
margin-bottom: clamp(2rem, 0.6472491909vw + 1.7572815534rem, 3rem);
}
@media (max-width: 544px) {
.no-sub-visual .meta {
flex-wrap: wrap;
gap: 0.8rem 1.2rem;
margin-bottom: 1.6rem;
}
}
.no-sub-visual .meta .line {
width: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
height: 1px;
background: rgba(255, 255, 255, 0.5);
}
.no-sub-visual h2 {
font-size: var(--display-xl-fs);
}
@media (max-width: 544px) {
.no-sub-visual h2 {
font-size: var(--display-xs-fs);
}
}
.no-sub-visual h2 .word,
.no-sub-visual h2 .space {
display: inline-block;
}
.no-sub-visual h2 .word {
overflow: hidden;
vertical-align: top;
}
.no-sub-visual h2 .char {
display: inline-block;
will-change: transform, opacity;
}
.js .no-sub-visual h2 {
visibility: hidden;
}
.js .no-sub-visual h2[data-split-done="1"] {
visibility: visible;
}
.js .no-sub-visual h2 .char {
opacity: 0;
transform: translateY(105%);
}
.no-sub-visual--contact h2 .space {
width: clamp(1.5rem, 0.9708737864vw + 1.1359223301rem, 3rem);
}
.no-sub-visual .metric {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
text-align: right;
}
@media (max-width: 768px) {
.no-sub-visual .metric {
margin-left: auto;
flex-direction: column-reverse;
}
}
.no-sub-visual .metric .count {
color: var(--clr-secondary-500);
}
.no-sub-visual .metric .copy {
text-align: right;
font-size: var(--body-xs-fs);
}
.no-sub-visual .metric .copy br {
display: block !important;
}
.no-sub-visual__marquee {
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
}
.no-sub-visual__marquee-track {
display: flex;
align-items: center;
width: max-content;
height: 100%;
animation: sub-visual-marquee 200s linear infinite;
}
.no-sub-visual__marquee--reverse .no-sub-visual__marquee-track {
animation-direction: reverse;
}
.no-sub-visual__marquee-group {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.no-sub-visual__marquee-group img {
display: block;
width: auto;
flex: 0 0 auto;
height: clamp(5.5rem, 0.6472491909vw + 5.2572815534rem, 6.5rem);
}
@keyframes sub-visual-marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.no-sub-nav {
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
position: relative;
}
.no-sub-nav.swiper {
overflow: hidden;
}
.no-sub-nav__list {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(3rem, 0.6472491909vw + 2.7572815534rem, 4rem);
min-height: 4rem;
}
.no-sub-nav__list.swiper-wrapper {
gap: 0;
justify-content: flex-start;
}
.no-sub-nav__item.swiper-slide {
width: auto;
padding: 0 clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2rem);
}
.no-sub-nav__item.swiper-slide:first-child {
padding-left: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
.no-sub-nav__item.swiper-slide:last-child {
padding-right: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
}
.no-sub-nav__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 2.8rem;
height: 100%;
border: none;
cursor: pointer;
padding: 0;
transition: opacity 0.2s ease;
}
.no-sub-nav__arrow::after {
content: "";
display: block;
width: 0.7rem;
height: 0.7rem;
border-right: 2px solid var(--clr-gray-700);
border-bottom: 2px solid var(--clr-gray-700);
}
.no-sub-nav__arrow--prev {
left: 0;
background: linear-gradient(to right, var(--clr-base-white) 60%, transparent);
}
.no-sub-nav__arrow--prev::after {
transform: rotate(135deg) translate(2px, -2px);
}
.no-sub-nav__arrow--next {
right: 0;
background: linear-gradient(to left, var(--clr-base-white) 60%, transparent);
}
.no-sub-nav__arrow--next::after {
transform: rotate(-45deg) translate(-2px, 2px);
}
.no-sub-nav__arrow.swiper-button-disabled {
opacity: 0;
pointer-events: none;
}
.no-sub-nav__item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.no-sub-nav__item.is-active .no-sub-nav__link {
color: var(--clr-primary-500);
}
.no-sub-nav__item.is-active::after {
transform: scaleX(1);
}
.no-sub-nav__item::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.1rem;
height: 0.2rem;
background: var(--clr-primary-500);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.2s ease;
}
.no-sub-nav__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 4rem;
color: var(--clr-text-primary);
font-size: var(--body-sm-fs);
font-weight: 700;
transition: color 0.2s ease;
}
.no-sub-nav__link:hover {
color: var(--clr-primary-500);
}
.no-board__total {
font-weight: 600;
}
.no-board__total em {
color: var(--clr-primary-main);
}
.no-board__filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.6rem;
}
@media (max-width: 544px) {
.no-board__filter {
align-items: flex-start;
flex-direction: column;
}
}
.no-board__search {
display: flex;
align-items: center;
gap: 1.2rem;
flex: 1;
justify-content: flex-end;
}
@media (max-width: 544px) {
.no-board__search {
flex-direction: column;
width: 100%;
}
.no-board__search .no-form-control--search {
width: 100%;
}
.no-board__search .no-form-control--search label {
width: 100%;
}
.no-board__search .no-form-control__input--search {
max-width: 100%;
}
.no-board__search .no-form-select {
max-width: 100%;
}
}
.no-board-detail__headline {
margin-bottom: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
}
.no-board-detail__head {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.8rem;
align-items: center;
border-top: 2px solid var(--clr-base-black);
padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
border-bottom: 1px solid var(--clr-gray-100);
}
@media (max-width: 768px) {
.no-board-detail__head {
flex-direction: column;
align-items: flex-start;
padding: 2.4rem 0;
}
}
.no-board-detail__admin {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2.4rem;
color: var(--clr-primary-main);
font-weight: 600;
}
.no-board-detail__admin i {
font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
}
.no-board-detail__date {
font-size: var(--body-xs-fs);
color: var(--clr-gray-500);
}
.no-board-detail__body {
padding: clamp(1.8rem, 1.1650485437vw + 1.3631067961rem, 3.6rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.no-board-detail__body.--comment {
background: var(--clr-primary-50);
border: 1px solid var(--clr-primary-main);
margin-bottom: 2rem;
}
@media (max-width: 768px) {
.no-board-detail__body {
padding: 2.4rem 0;
}
}
.no-board-detail__action {
display: flex;
align-items: center;
gap: 1.6rem;
margin-top: 3.6rem;
}
@media (max-width: 768px) {
.no-board-detail__action {
margin-top: 2.4rem;
}
}
.no-locked__container {
max-width: 560px;
margin-inline: auto;
text-align: center;
}
.no-locked__logo {
margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.no-locked__logo img {
display: block;
margin: 0 auto;
width: 18rem;
}
.no-locked__title {
margin-bottom: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
}
.no-locked__desc {
color: var(--clr-gray-600);
line-height: 1.6;
margin-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
font-size: var(--body-sm-fs);
}
.no-locked__desc strong {
display: block;
color: var(--clr-base-black);
margin-bottom: 0.4rem;
}
.no-locked__form {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.no-locked__field {
width: 100%;
}
.no-locked__submit {
width: 100%;
height: 48px;
border-radius: var(--radius-lg, 12px);
font-weight: 700;
}
.no-locked__back {
display: inline-block;
margin-top: 0.6rem;
text-decoration: underline;
color: var(--clr-primary-main);
font-weight: 600;
}
.no-locked__back:hover {
text-decoration: none;
}
/* 접근성 전용 텍스트 유틸 (이미 쓰고 있으면 생략 가능) */
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.board-qa {
list-style: none;
padding: 0;
margin: 0;
border-top: 2px solid var(--clr-base-black);
}
.board-qa__item {
border-bottom: 1px solid var(--clr-gray-200);
}
.board-qa__details[open] .board-qa__toggle::after {
content: "−";
}
.board-qa__summary {
display: flex;
align-items: center;
gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.4rem);
padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem) 0;
cursor: pointer;
list-style: none;
user-select: none;
}
.board-qa__summary::-webkit-details-marker {
display: none;
}
@media (max-width: 544px) {
.board-qa__summary {
flex-wrap: wrap;
gap: 0.8rem;
}
}
.board-qa__q-mark, .board-qa__a-mark {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(2.4rem, 0.3883495146vw + 2.254368932rem, 3rem);
height: clamp(2.4rem, 0.3883495146vw + 2.254368932rem, 3rem);
border-radius: 50%;
font-size: var(--body-xs-fs);
font-weight: 700;
line-height: 1;
}
.board-qa__q-mark {
background: var(--clr-primary-main);
color: #fff;
}
.board-qa__a-mark {
background: var(--clr-primary-50);
color: var(--clr-primary-main);
border: 1.5px solid var(--clr-primary-main);
}
.board-qa__title {
flex: 1;
font-size: var(--body-md-fs);
font-weight: 600;
color: var(--clr-text-primary);
line-height: 1.5;
}
.board-qa__badge {
flex-shrink: 0;
font-size: var(--body-xs-fs);
font-weight: 600;
color: var(--clr-primary-main);
background: var(--clr-primary-50);
border: 1px solid var(--clr-primary-main);
border-radius: 9999px;
padding: 0.2rem clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1rem);
line-height: 1.4;
white-space: nowrap;
}
.board-qa__meta {
display: flex;
align-items: center;
gap: 0.6rem;
flex-shrink: 0;
}
.board-qa__date {
font-size: var(--body-xs-fs);
color: var(--clr-gray-500);
white-space: nowrap;
}
.board-qa__toggle {
flex-shrink: 0;
font-size: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
color: var(--clr-gray-400);
line-height: 1;
margin-left: auto;
}
.board-qa__toggle::after {
content: "+";
}
.board-qa__body {
padding: 0 0 clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem) clamp(3.4rem, 0.6472491909vw + 3.1572815534rem, 4.4rem);
}
@media (max-width: 544px) {
.board-qa__body {
padding-left: 0;
}
}
.board-qa__content {
color: var(--clr-text-secondary);
line-height: 1.75;
margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
}
.board-qa__content:last-child {
margin-bottom: 0;
}
.board-qa__answer {
display: flex;
gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.6rem);
align-items: flex-start;
background: var(--clr-primary-50);
border: 1px solid rgba(15, 76, 129, 0.15);
border-radius: 0.8rem;
padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
margin-top: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2rem);
}
.board-qa__answer-content {
flex: 1;
color: var(--clr-text-primary);
line-height: 1.75;
}
html, body {
overflow-x: clip;
}
.public-site {
color: var(--public-ink);
background: var(--public-white);
}
.public-header.site-header {
position: fixed;
inset: 0 0 auto;
z-index: 90;
height: 12rem;
color: var(--public-navy);
background: var(--public-white);
border-bottom: 1px solid color-mix(in srgb, var(--public-navy) 10%, transparent);
pointer-events: auto;
transition: color var(--dur-base) var(--ease-out-quart), background-color var(--dur-base) var(--ease-out-quart), border-color var(--dur-base) var(--ease-out-quart);
}
.public-header.site-header[data-header-mode=overlay]:not(.is-scrolled) {
color: var(--public-white);
background: transparent;
border-color: color-mix(in srgb, var(--public-white) 30%, transparent);
}
.public-header.site-header[data-header-mode=overlay]:not(.is-scrolled) .public-logo__image--black {
opacity: 0;
}
.public-header.site-header[data-header-mode=overlay]:not(.is-scrolled) .public-logo__image--white {
opacity: 1;
}
.public-header.site-header .public-header__inner {
height: 100%;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.public-header.site-header .public-header__menu {
justify-self: start;
width: 5rem;
height: 5rem;
padding: 1.4rem 1rem;
display: grid;
align-content: center;
gap: 0.7rem;
color: inherit;
border: 0;
background: transparent;
cursor: pointer;
}
.public-header.site-header .public-header__menu, .public-header.site-header .public-header__right, .public-header.site-header .public-logo {
pointer-events: auto;
}
.public-header.site-header .public-header__menu span {
display: block;
width: 2.8rem;
height: 1px;
background: currentColor;
}
.public-header.site-header .public-header__right {
justify-self: end;
display: flex;
align-items: center;
gap: 2.4rem;
}
.public-header.site-header .public-header__search {
color: inherit;
font-size: 1.8rem;
}
.public-header.site-header .public-header__locale {
color: inherit;
letter-spacing: 0.08em;
}
.public-drawer.site-drawer {
position: fixed;
inset: 0;
z-index: 120;
pointer-events: none;
visibility: hidden;
background: color-mix(in srgb, var(--public-navy-deep) 72%, transparent);
transition: visibility 0.35s, background 0.35s;
}
.public-drawer.site-drawer[data-state=open] {
pointer-events: auto;
visibility: visible;
}
.public-drawer.site-drawer .public-drawer__panel {
width: min(68rem, 100%);
height: 100%;
margin: 0;
padding: 3.2rem 6rem 4rem;
background: var(--public-white);
transform: translateX(-102%);
transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.25, 1);
overflow-y: auto;
}
.public-drawer.site-drawer[data-state=open] .public-drawer__panel {
transform: translateX(0);
}
.public-drawer.site-drawer .public-drawer__head {
display: flex;
justify-content: space-between;
align-items: center;
}
.public-drawer.site-drawer .public-drawer__locales {
display: flex;
gap: 1.6rem;
}
.public-drawer.site-drawer .public-drawer__locales form {
margin: 0;
}
.public-drawer.site-drawer .public-drawer__locales button {
padding: 0.5rem 0;
color: var(--public-muted);
background: none;
border: 0;
font-size: 1.3rem;
font-weight: 700;
cursor: pointer;
}
.public-drawer.site-drawer .public-drawer__locales button.is-active {
color: var(--public-blue);
border-bottom: 1px solid currentColor;
}
.public-drawer.site-drawer .public-drawer__close {
display: grid;
place-items: center;
width: 5.2rem;
height: 5.2rem;
color: var(--public-white);
background: var(--public-navy);
border: 0;
border-radius: 50%;
font-size: 2rem;
cursor: pointer;
}
.public-drawer.site-drawer .public-drawer__body {
padding-top: 4rem;
}
.public-drawer.site-drawer .public-drawer__nav {
margin-top: 6rem;
padding: 0;
list-style: none;
}
.public-drawer.site-drawer .site-drawer__nav-item {
border-bottom: 1px solid var(--public-line);
}
.public-drawer.site-drawer .public-drawer__root {
display: flex;
align-items: center;
justify-content: space-between;
}
.public-drawer.site-drawer .site-drawer__nav-label {
display: block;
flex: 1;
padding: 2.1rem 0;
color: var(--public-ink);
font-size: 2.9rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
}
.public-drawer.site-drawer .site-drawer__toggle {
width: 4.4rem;
height: 4.4rem;
color: var(--public-navy);
background: none;
border: 0;
cursor: pointer;
}
.public-drawer.site-drawer .site-drawer__sub-list {
max-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
transition: max-height 0.35s ease, padding 0.35s ease;
}
.public-drawer.site-drawer .site-drawer__nav-item.is-expanded .site-drawer__sub-list {
max-height: 60rem;
padding: 0.2rem 0 2rem;
}
.public-drawer.site-drawer .site-drawer__nav-item.is-expanded .site-drawer__toggle i {
transform: rotate(45deg);
}
.public-drawer.site-drawer .site-drawer__sub-link {
display: block;
padding: 0.8rem 0;
color: var(--public-muted);
font-size: 1.6rem;
text-decoration: none;
}
.public-drawer.site-drawer .site-drawer__sub-link:hover, .public-drawer.site-drawer .site-drawer__sub-link:focus-visible {
color: var(--public-blue);
}
.public-drawer.site-drawer .public-drawer__foot {
display: flex;
gap: 2rem;
padding-top: 4rem;
}
.public-drawer.site-drawer .public-drawer__foot a {
color: var(--public-muted);
text-decoration: none;
}
@media (max-width: 767px) {
.public-header.site-header {
height: 8.8rem;
}
.public-header.site-header .public-header__search {
display: none;
}
.public-drawer.site-drawer .public-drawer__panel {
padding: 2rem 2.4rem 3rem;
}
.public-drawer.site-drawer .site-drawer__nav-label {
font-size: 2.2rem;
}
}
}
@layer pages {
:root {
/* === semantic === */
--clr-primary-hover: var(--clr-primary-700);
--clr-primary-accent: var(--clr-accent-500);
--clr-common-background: var(--clr-base-white);
--clr-common-on-background: var(--clr-base-black);
--clr-text-primary: var(--clr-text-base);
--clr-text-secondary: var(--clr-text-sub);
--clr-text-tertiary: var(--clr-text-aux);
--clr-background-paper: var(--clr-bg-page);
--clr-background-primary: var(--clr-bg-section);
--clr-background-secondary: var(--clr-bg-line);
--clr-background-philo: var(--clr-bg-section);
}
:root {
--clr-primary-950: #352820;
--clr-primary-900: #352820;
--clr-primary-700: #826c5b;
--clr-primary-500: #c4ae9b;
--clr-primary-400: #d8cbb8;
--clr-primary-50: #d8cbb8;
--clr-primary-main: var(--clr-primary-500);
--clr-secondary-900: #826c5b;
--clr-accent-300: #d8cbb8;
--clr-accent-500: #826c5b;
--clr-accent-700: #352820;
--clr-text-base: #352820;
--clr-text-sub: #352820;
--clr-text-aux: #826c5b;
--clr-gray-50: #f6f1ea;
--clr-gray-100: #f6f1ea;
--clr-gray-200: #efe5da;
--clr-gray-300: #d8cbb8;
--clr-gray-400: #c4ae9b;
--clr-gray-500: #826c5b;
--clr-gray-600: #826c5b;
--clr-gray-700: #352820;
--clr-gray-800: #352820;
--clr-gray-900: #352820;
/* === base === */
--clr-base-white: #ffffff;
--clr-base-black: #000000;
/* === 60% — Background / Base === */
--clr-bg-page: #efe5da;
--clr-bg-section: #f6f1ea;
--clr-bg-line: #d8cbb8;
/* gradient shorthand */
--clr-primary-gradient: 90deg, #352820, #826c5b;
/* === UI (Border / Hover) === */
--clr-ui-border: #d8cbb8;
--clr-ui-hover-bg: #efe5da;
/* === Semantic status === */
--clr-status-success: #16a34a;
--clr-status-warning: #d97706;
--clr-status-error: #dc2626;
--clr-status-info: var(--clr-primary-500);
/* === Event category chips === */
--clr-chip-seminar: #352820;
--clr-chip-workshop: #826c5b;
--clr-chip-symposium: #c4ae9b;
--clr-chip-education: #16a34a;
--clr-chip-special: #dc2626;
}
:root {
/* === Brand palette === */
--public-brand-ink: var(--clr-primary-950);
--public-brand-dark: var(--clr-primary-900);
--public-brand-accent: var(--clr-accent-500);
--public-brand-accent-soft: var(--clr-accent-300);
--public-brand-surface: var(--clr-bg-page);
--public-brand-surface-strong: var(--clr-primary-50);
--public-brand-line: var(--clr-primary-400);
/* === Public semantic aliases === */
--public-navy: var(--public-brand-dark);
--public-navy-deep: var(--public-brand-ink);
--public-blue: var(--public-brand-accent);
--public-blue-soft: var(--public-brand-surface-strong);
--public-ink: var(--public-brand-ink);
--public-muted: var(--clr-text-sub);
--public-muted-soft: var(--clr-text-aux);
--color-text-muted: color-mix(in srgb, var(--public-muted-soft) 80%, var(--public-ink));
--public-line: var(--clr-ui-border);
--public-line-strong: var(--public-brand-line);
--public-surface: var(--public-brand-surface);
--public-surface-subtle: var(--clr-bg-section);
--public-white: var(--clr-bg-section);
--color-background-dropdown-light: color-mix(in srgb, var(--public-white) 94%, var(--public-brand-ink));
--color-background-dropdown-dark: color-mix(in srgb, var(--public-brand-dark) 95%, var(--public-white));
--public-header-black: var(--clr-base-black);
--public-header-white: var(--clr-base-white);
--public-overlay: rgba(0, 0, 0, .29);
--public-focus: var(--public-brand-accent);
--public-page-transition-backdrop: color-mix(in srgb, var(--public-brand-ink) 16%, #000);
--public-cart-toast-action: var(--public-blue);
--public-search-placeholder-color: var(--public-muted);
/* === Feedback states === */
--public-feedback-success: #2f6c55;
--public-feedback-success-soft: #edf6ef;
--public-feedback-warning: #9a6d2c;
--public-feedback-warning-soft: #faf2e3;
--public-feedback-error: #a83f58;
--public-feedback-error-soft: #fff0f4;
--public-auth-success: var(--public-feedback-success);
--public-auth-error: var(--public-feedback-error);
/* === Transit and award colors === */
--public-transit-subway-1: #d93f5c;
--public-transit-subway-2: #00aa80;
--public-transit-bus-trunk: #1478c9;
--public-transit-bus-feeder: #d59d00;
--public-transit-bus-express: #d43d47;
--public-transit-line-1: #e72f70;
--public-transit-line-2: var(--public-transit-subway-2);
--public-award-black: #1e1e1e;
--public-award-plum: var(--public-brand-dark);
--public-award-blue: #0047ff;
--public-award-wine: var(--public-feedback-error);
--public-award-green: var(--public-feedback-success);
/* === External brand colors === */
--public-kakao: #fee500;
--public-kakao-hover: #f4dc00;
--public-social-instagram: radial-gradient(circle at 30% 105%, #ffd600 0 24%, #ff7a00 25% 38%, #ff0169 52%, #d300c5 72%, #7638fa 92%);
--public-social-kakao: var(--public-kakao);
--public-social-naver: #03c75a;
--public-social-youtube: #ff0033;
--public-social-ink: #111111;
}
/* Local editorial display: Cormorant Garamond + Noto Serif KR.
* Functional copy, prices and controls: Manrope + Pretendard. */
/**
* Typography tokens — Home
* Display: Cormorant Garamond + Noto Serif KR; body/UI: Manrope + Pretendard.
* 정본: 본 파일. 가이드: docs/02-variables/brand-guide.md
*
* 규칙(AGENTS.md 절대규칙 #11):
* - SCSS 컴포넌트에서 font-size 직접 지정 금지. var(--*-fs) 만 사용.
* - 페이지·뷰 마크업에서 .no-display-* / .no-heading-* / .no-body-* 유틸리티 클래스 사용.
*/
:root {
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
/* === Font family — 정본 토큰 === */
--font-manrope-family: "Manrope", "Pretendard Variable", "Pretendard",
-apple-system, BlinkMacSystemFont, "Segoe UI",
"Noto Sans KR", system-ui, sans-serif;
--font-sans-family: var(--font-manrope-family);
--font-display-family: "Cormorant Garamond", "Noto Serif KR", "Pretendard", serif;
--font-heading-family: var(--font-display-family);
--font-english-family: var(--font-manrope-family);
--font-mono-family: var(--font-manrope-family);
--font-oswald-family: var(--font-manrope-family); /* deprecated compatibility alias */
/* Letter-spacing */
--tracking-display: -0.015em;
--tracking-heading: -0.01em;
--tracking-body: 0em;
--tracking-caps: 0.06em; /* small-caps·overline */
/* === Legacy family alias — 기존 페이지·컴포넌트 호환 === */
--family-primary: var(--font-sans-family);
--family-display: var(--font-display-family);
--family-mono: var(--font-mono-family);
--family-pretendard: var(--font-sans-family);
--family-hggothic: var(--font-sans-family); /* 이전 프로젝트 잔재. sans 로 흡수 */
/* === Display (히어로/대제목) — editorial serif === */
--display-xs-fs: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
--display-sm-fs: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
--display-md-fs: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
--display-lg-fs: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
--display-xl-fs: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
--display-xs-lh: 1.12;
--display-sm-lh: 1.08;
--display-md-lh: 1.04;
--display-lg-lh: 1.00;
--display-xl-lh: 0.98;
--display-xs-fw: var(--font-weight-regular);
--display-sm-fw: var(--font-weight-regular);
--display-md-fw: var(--font-weight-regular);
--display-lg-fw: var(--font-weight-regular);
--display-xl-fw: var(--font-weight-regular);
/* === Heading (섹션 타이틀) — editorial serif / compact sans === */
--heading-2xs-fs: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
--heading-xs-fs: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
--heading-sm-fs: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
--heading-md-fs: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
--heading-bl-fs: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
--heading-lg-fs: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
--heading-xl-fs: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
--heading-2xs-lh: 1.42;
--heading-xs-lh: 1.36;
--heading-sm-lh: 1.32;
--heading-md-lh: 1.28;
--heading-bl-lh: 1.24;
--heading-lg-lh: 1.20;
--heading-xl-lh: 1.12;
--heading-2xs-fw: 500;
--heading-xs-fw: var(--font-weight-medium);
--heading-sm-fw: var(--font-weight-medium);
--heading-md-fw: var(--font-weight-medium);
--heading-bl-fw: var(--font-weight-medium);
--heading-lg-fw: var(--font-weight-medium);
--heading-xl-fw: var(--font-weight-medium);
/* === Body — Manrope (한글: Pretendard) === */
--body-xs-fs: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
--body-sm-fs: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
--body-md-fs: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem); /* 기본 본문·설명글 default */
--body-lg-fs: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem); /* 강조·라벨 */
--body-xl-fs: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
--body-card-desc-fs: 1.4rem;
--body-xs-lh: 1.55;
--body-sm-lh: 1.6;
--body-md-lh: 1.65;
--body-lg-lh: 1.6;
--body-xl-lh: 1.55;
--body-card-desc-lh: 1.55;
--body-xs-fw: var(--font-weight-regular);
--body-sm-fw: var(--font-weight-regular);
--body-md-fw: var(--font-weight-regular);
--body-lg-fw: var(--font-weight-regular);
--body-xl-fw: var(--font-weight-regular);
--body-card-desc-fw: var(--font-weight-regular);
/* === Semantic public hierarchy aliases === */
--subhero-title-fs: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
--subhero-title-lh: 1.08;
--subhero-title-fw: var(--font-weight-regular);
--section-title-fs: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
--section-title-lh: 1.14;
--section-title-fw: var(--font-weight-regular);
--middle-title-lg-fs: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
--middle-title-lg-lh: 1.1;
--middle-title-lg-fw: var(--font-weight-regular);
--middle-title-md-fs: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.2rem);
--middle-title-md-lh: 1.18;
--middle-title-md-fw: var(--font-weight-medium);
--list-title-fs: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
--list-title-lh: 1.32;
--list-title-fw: var(--font-weight-medium);
--subtitle-fs: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
--subtitle-lh: 1.6;
--subtitle-fw: var(--font-weight-regular);
/* === Overline / eyebrow (섹션 소문구 라벨) — Manrope Medium, 캡스 === */
--overline-fs: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
--overline-lh: 1.4;
--overline-fw: var(--font-weight-medium);
/* === Mono (캡션·다이어그램 라벨·overline) === */
--mono-xs-fs: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
--mono-sm-fs: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
/* === Decorative (Marquee Whisper / I3 — Manrope, 매우 큼) === */
--deco-marquee-fs: clamp(9.6rem, 5.9546925566vw + 7.3669902913rem, 18.8rem);
/* Decorative wordmark (WHO WE ARE §signature — Manrope, 뷰포트 폭 채우는 초대형).
* scale(1) 에서 긴 디스플레이 문구가 컨테이너 폭에 맞고, JS 가 scale 확대→축소. */
--deco-wordmark-fs: clamp(6.4rem, 10.0970873786vw + 2.613592233rem, 22rem);
--deco-wordmark-fw: var(--font-weight-medium);
--deco-wordmark-lh: 0.8;
}
@media (max-width: 767px) {
:root {
--body-sm-fs: 1.6rem;
--body-md-fs: 1.6rem;
}
}
/**
* Motion tokens — Home
* 정본: 본 파일. JS는 resources/ts/home/global/MotionTokens.ts 동일 값.
* 사용: SCSS `transition: transform var(--dur-base) var(--ease-out-quart);`
* JS `gsap.to(el, { duration: 0.88, ease: 'expo.out' })` ← MotionTokens.ts 참조
*
* 가이드 문서: docs/00-overview/goals.md "차분함 80% : 임팩트 20%"
* workspace/guides/02-스타일-가이드.md §8
*/
:root {
/* === Duration === */
--dur-instant: 100ms; /* hover state 토글, focus ring */
--dur-fast: 200ms; /* 버튼 press, chip toggle */
--dur-base: 320ms; /* 카드 hover, 색 전환 */
--dur-slow: 560ms; /* 모달·드로어 진입 */
--dur-slower: 880ms; /* Hero Display reveal (I1) */
--dur-epic: 1200ms; /* Image mask reveal, scroll-pinned 단계 */
/* === Easing ===
* 1) out-quart : 기본 진입 (Unseen Studio·기본값)
* 2) out-expo : 강한 감속 (Hero Display·시그니처 모먼트)
* 3) in-out : 양방향 (드로어·tab 전환)
* 4) spring : 미세 바운스 (버튼 한정 — 페이지 본문 금지)
* 5) linear : 마키·무한 스크롤
*/
--ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-linear: linear;
/* === Stagger === */
--stagger-base: 60ms; /* I1 Type Mask Reveal 단어 간격 */
--stagger-fast: 30ms; /* I2 Char Stagger 글자 간격 */
--stagger-slow: 120ms; /* 리스트 카드 진입 */
/* === Translate offsets (reveal 초기값) === */
--reveal-offset-sm: 16px; /* body·메타 */
--reveal-offset-md: 40px; /* heading */
--reveal-offset-lg: 80px; /* hero display */
}
/* prefers-reduced-motion 가드 — 즉시 최종 상태로 */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-instant: 0ms;
--dur-fast: 0ms;
--dur-base: 0ms;
--dur-slow: 0ms;
--dur-slower: 0ms;
--dur-epic: 0ms;
--stagger-base: 0ms;
--stagger-fast: 0ms;
--stagger-slow: 0ms;
--reveal-offset-sm: 0px;
--reveal-offset-md: 0px;
--reveal-offset-lg: 0px;
}
}
:root {
--gutter: 2rem;
--header-height: 9.8rem;
--header-z-index: 9999;
--drawer-z-index: 999;
--tran-15: 0.15s ease;
--tran-3: 0.3s ease;
--family-base: var(--family-hggothic);
}
@media (max-width: 768px) {
:root {
--header-height: 4.8rem;
}
}
:root {
--public-location-top-gap: clamp(8rem, 3.1067961165vw + 6.8349514563rem, 12.8rem);
--public-cart-toast-max: 44rem;
--public-cart-toast-min-height: 8.8rem;
--public-cart-toast-padding-block: 2rem;
--public-cart-toast-padding-inline: 3.2rem;
--public-event-card-inset: 2.4rem;
--public-focus-width: .2rem;
--public-focus-offset: .3rem;
--public-header-height: 14rem;
--public-header-content-height: 10rem;
--public-shell-max: 160rem;
--public-shell-gutter: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
--public-header-gutter: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
--public-header-max: 132rem;
--public-detail-max: 94rem;
--public-control-sm: 4.4rem;
--public-control-md: 5.2rem;
--public-control-lg: 5.6rem;
--public-filter-tab-mobile-height: 3.6rem;
--public-button-font-size: clamp(1.4rem, .9vw, 1.5rem);
--public-button-frame-radius: 0;
--public-action-radius: 3rem;
--public-action-end-width: 2.2rem;
--public-action-duration: 350ms;
--public-link-line-width: 2.2rem;
--public-link-line-hover-width: 3.8rem;
--public-link-line-gap: 1.8rem;
--public-treatment-body-font-size: 1.6rem;
--public-header-action-width: clamp(3.2rem, 0.2588996764vw + 3.1029126214rem, 3.6rem);
--public-header-icon-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
--public-header-action-size: var(--public-control-sm);
--public-header-appointment-width: 22rem;
--public-header-notify-size: 1.2rem;
--public-header-notify-font-size: .8rem;
--public-icon-sm: 1.8rem;
--public-icon-md: 2.2rem;
--public-icon-lg: 2.4rem;
--public-treatment-pictogram-frame-sm: 9.6rem;
--public-treatment-pictogram-frame-md: 13.2rem;
--public-treatment-pictogram-frame-lg: 16rem;
--public-header-action-shadow: 0 .6rem 1.6rem rgba(77, 56, 45, .12);
--public-card-row: 7.6rem;
--public-space-2xs: .8rem;
--public-space-xs: 1.2rem;
--public-space-sm: 1.6rem;
--public-space-md: 2rem;
--public-space-lg: 2.5rem;
--public-space-xl: 3rem;
--public-space-2xl: 4rem;
--public-space-3xl: 5rem;
--public-space-section: 5.5rem;
--public-space-page: 6.5rem;
--public-radius-sm: 0;
--public-radius-md: 0;
--public-radius-pill: 999px;
--public-check-size: 2.4rem;
--public-cart-max: 81.2rem;
--public-cart-panel-padding: 3rem;
--public-cart-row-min-height: 18.9rem;
--public-cart-page-bottom: 11.8rem;
--public-footer-mobile-safe-space: 3.2rem;
--public-home-title-family: var(--font-display-family);
--public-home-title-fs: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
--public-home-title-fw: var(--font-weight-regular);
--public-home-title-lh: 1.12;
--public-home-lead-fs: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem);
--public-study-media-ratio: 316 / 231;
--public-nav-fs: 1.8rem;
--public-drawer-root-fs: 4.8rem;
--public-search-max-width: 64rem;
--public-search-height: 4.8rem;
--public-search-submit-width: clamp(8rem, 0.5177993528vw + 7.8058252427rem, 8.8rem);
--public-search-gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.6rem);
--public-search-input-padding-inline: var(--public-space-xs);
--public-search-icon-slot: clamp(4.4rem, 0.2588996764vw + 4.3029126214rem, 4.8rem);
--public-search-icon-size: var(--public-icon-md);
--public-auth-panel-max: 44rem;
--public-auth-mark-size: 6.4rem;
--public-social-icon-size: 2rem;
--public-duration: .35s;
--public-ease: cubic-bezier(.22, .8, .25, 1);
--public-z-header: 90;
--public-z-async-directory: 110;
--public-z-drawer: 120;
--public-z-cursor: 21000;
}
@media (max-width: 1023px) {
:root {
--public-header-max: 100%;
--public-header-height: 12.8rem;
--public-header-content-height: 8.8rem;
--public-control-sm: 4.4rem;
--public-header-appointment-width: 18rem;
}
}
@media (max-width: 767px) {
:root {
--public-header-height: 8.4rem;
--public-header-content-height: 5.6rem;
--public-header-action-size: 4rem;
}
}
html:has(.public-header--without-award) {
--public-header-height: var(--public-header-content-height);
}
.public-header.site-header {
--public-header-fill-duration: .56s;
}
.public-about-showcase {
--public-about-showcase-wave: 0;
}
.public-history__track {
--history-line-top: 56rem;
--history-line-bottom: 16rem;
--history-line-gap-1-start: 0px;
--history-line-gap-1-end: 0px;
--history-line-gap-2-start: 0px;
--history-line-gap-2-end: 0px;
--history-line-gap-3-start: 0px;
--history-line-gap-3-end: 0px;
}
.public-history__outro-title {
--history-outro-fill: 100%;
}
.public-home ~ .no-floating-cta {
--fcta-size: 4.8rem;
--fcta-gap-edge: max(2rem, calc((100vw - 164rem) / 2));
--fcta-btn-gap: .6rem;
--fcta-radius: var(--public-radius-pill);
--fcta-shadow: none;
--fcta-shadow-hover: none;
}
.public-practice-page ~ .no-floating-cta {
--fcta-size: 5.2rem;
--fcta-gap-edge: 3rem;
--fcta-gap-bottom: 3rem;
--fcta-btn-gap: .8rem;
--fcta-radius: 0;
--fcta-shadow: none;
--fcta-shadow-hover: none;
}
.public-event-page ~ .no-floating-cta {
--fcta-size: 5.2rem;
--fcta-gap-edge: 3rem;
--fcta-gap-bottom: 3rem;
--fcta-btn-gap: .8rem;
--fcta-radius: 0;
--fcta-shadow: none;
--fcta-shadow-hover: none;
}
.public-recruit__steps {
--recruit-step-marker: 6rem;
--recruit-step-gap: 7.2rem;
}
@media (max-width: 1279px) and (min-width: 768px) {
.public-recruit__steps {
--recruit-step-marker: 6.2rem;
--recruit-step-gap: 7.6rem;
}
}
@media (max-width: 767px) {
.public-recruit__steps {
--recruit-step-gap: 5rem;
}
}
:root {
/* === Section spacing (섹션 상·하단 패딩) === */
--section-xs: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
--section-sm: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
--section-md: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 9.6rem);
--section-lg: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem);
--section-xl: clamp(8rem, 10.355987055vw + 4.1165048544rem, 24rem);
/* === Border Radius (유동 반경) === */
--radius-xs: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
--radius-sm: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
--radius-md: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
--radius-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
--radius-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
--radius-round: 9999px;
/* === Spacing (마진·패딩 기본 단위, fluid 적용) === */
--spacing-xxs: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
--spacing-xs: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
--spacing-sm: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem);
--spacing-md: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
--spacing-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
--spacing-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
--spacing-2xl: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
--spacing-3xl: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
--spacing-4xl: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
--spacing-5xl: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem);
--spacing-6xl: clamp(8rem, 10.355987055vw + 4.1165048544rem, 24rem);
}
.public-site {
color: var(--public-ink);
background: var(--public-white);
}
.public-site :where(h1, h2) {
font-family: var(--font-display-family);
font-weight: var(--font-weight-regular);
}
.public-site :is(p, figcaption) br:has(+ br),
.public-site :is(p, figcaption) br + br {
display: initial;
}
.public-site :focus-visible {
outline: 2px solid var(--public-focus);
outline-offset: 0.4rem;
}
.public-form-field__checkbox-mark, .public-form-field__radio-mark {
display: inline-grid;
flex: 0 0 var(--public-check-size);
width: var(--public-check-size);
height: var(--public-check-size);
place-items: center;
border: 1px solid var(--public-line);
background: var(--public-white);
transition: border-color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease);
}
.public-form-field__radio-mark {
border-radius: 50%;
}
.public-form-field__checkbox-mark::after, .public-form-field__radio-mark::after {
content: "";
opacity: 0;
transform: scale(0.5);
transition: opacity var(--public-duration) var(--public-ease), transform var(--public-duration) var(--public-ease);
}
.public-form-field__checkbox-mark::after {
width: 0.8rem;
height: 1.2rem;
margin-top: -0.2rem;
border: solid var(--public-white);
border-width: 0 0.2rem 0.2rem 0;
transform: rotate(45deg) scale(0.5);
}
.public-form-field__radio-mark::after {
width: 1rem;
height: 1rem;
border-radius: 50%;
background: var(--public-white);
}
.public-form-field__message {
color: var(--public-muted);
}
input:checked + .public-form-field__checkbox-mark, input:checked + .public-form-field__radio-mark {
border-color: var(--public-blue);
background: var(--public-blue);
}
input:checked + .public-form-field__checkbox-mark::after {
opacity: 1;
transform: rotate(45deg) scale(1);
}
input:checked + .public-form-field__radio-mark::after {
opacity: 1;
transform: scale(1);
}
input:focus-visible + .public-form-field__checkbox-mark, input:focus-visible + .public-form-field__radio-mark {
outline: 2px solid var(--public-focus);
outline-offset: 0.3rem;
}
.has-error .public-form-field__message {
color: var(--public-feedback-error);
}
.has-error input,
.has-error select,
.has-error textarea {
border-color: var(--public-feedback-error);
}
.is-disabled {
cursor: not-allowed;
opacity: 0.5;
}
.public-intl-phone-field {
display: grid;
gap: var(--public-space-xs);
min-width: 0;
}
.public-intl-phone {
position: relative;
min-width: 0;
overflow: visible;
}
.public-intl-phone .iti {
display: block;
width: 100%;
overflow: visible;
}
.public-intl-phone .iti__selected-country {
padding-inline: var(--public-space-sm);
color: var(--public-ink);
border: 0;
background: transparent;
}
.public-intl-phone .iti__selected-country:hover:not(:disabled),
.public-intl-phone .iti__selected-country:focus-visible {
color: var(--public-ink);
background: var(--public-surface);
}
.public-intl-phone .iti__dropdown-content {
z-index: 20;
width: min(40rem, 100vw - var(--public-shell-gutter) * 2);
max-height: 32rem;
overflow: hidden;
color: var(--public-ink);
border: 1px solid var(--public-line);
border-radius: 0;
background: var(--public-white);
}
.public-intl-phone .iti__dropdown-content:not(.iti__hide) {
display: flex;
flex-direction: column;
}
.public-intl-phone .iti__country-list {
flex: 1 1 auto;
overflow-y: auto;
}
.public-intl-phone .iti__country.iti__highlight,
.public-intl-phone .iti__country:hover {
background: var(--public-surface);
}
.public-intl-phone .iti__dial-code {
color: var(--public-muted);
}
.public-intl-phone .iti__search-input {
color: var(--public-ink);
border: 0;
border-bottom: 1px solid var(--public-line);
border-radius: 0;
background: var(--public-white);
font-family: inherit;
}
.public-shell {
width: min(100% - var(--public-shell-gutter) * 2, var(--public-shell-max));
margin-inline: auto;
}
.public-kicker {
color: var(--public-blue);
text-transform: uppercase;
}
.public-button {
position: relative;
isolation: isolate;
border: 0;
background: transparent;
border-radius: var(--public-action-radius);
text-decoration: none;
}
.public-button::before, .public-button::after {
position: absolute;
inset-block: 0;
box-sizing: border-box;
width: var(--public-action-end-width);
border: 1px solid currentColor;
content: "";
pointer-events: none;
transition: width var(--public-action-duration) var(--public-ease);
}
.public-button::before {
inset-inline-start: 0;
border-inline-end: 0;
border-radius: var(--public-action-radius) 0 0 var(--public-action-radius);
}
.public-button::after {
inset-inline-end: 0;
border-inline-start: 0;
border-radius: 0 var(--public-action-radius) var(--public-action-radius) 0;
}
.public-button:hover::before, .public-button:hover::after, .public-button:focus-visible::before, .public-button:focus-visible::after, .public-button.is-frame-completing::before, .public-button.is-frame-completing::after, .public-button[aria-expanded=true]::before, .public-button[aria-expanded=true]::after {
width: calc(50% + 1px);
}
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
.public-button::before, .public-button::after {
width: calc(50% + 1px);
}
}
.public-button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.public-button::before, .public-button::after {
transition: none;
}
}
.public-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--public-button-min-height, 4.8rem);
min-width: 18rem;
padding: 1rem var(--public-button-padding-inline, 2rem);
color: inherit;
font-family: var(--font-sans-family);
font-size: var(--public-button-font-size);
font-weight: var(--font-weight-medium);
letter-spacing: 0.015em;
line-height: 1.5;
cursor: pointer;
}
.public-button:hover, .public-button:focus-visible {
color: inherit;
background: transparent;
}
.public-button[disabled], .public-button[aria-disabled=true] {
cursor: not-allowed;
opacity: 0.45;
pointer-events: none;
}
.public-button--sm {
min-height: var(--public-button-min-height, var(--public-control-sm));
}
.public-button--lg {
min-height: var(--public-control-md);
}
.public-button--text, .public-button--ghost {
position: relative;
display: inline-flex;
align-items: center;
min-height: var(--public-control-sm);
padding-inline-start: calc(var(--public-link-line-hover-width) + var(--public-link-line-gap));
border: 0;
border-radius: 0;
background: transparent;
text-decoration: none;
}
.public-button--text::before, .public-button--ghost::before {
position: absolute;
inset-inline-start: 0;
top: 50%;
width: var(--public-link-line-width);
height: 1px;
border: 0;
border-radius: 0;
background: currentColor;
content: "";
pointer-events: none;
transition: width var(--public-action-duration) var(--public-ease);
}
.public-button--text::after, .public-button--ghost::after {
content: none;
}
.public-button--text:hover::before, .public-button--text:focus-visible::before, .public-button--ghost:hover::before, .public-button--ghost:focus-visible::before {
width: var(--public-link-line-hover-width);
}
.public-button--text:focus-visible, .public-button--ghost:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.public-button--text::before, .public-button--ghost::before {
transition: none;
}
}
.public-button--text, .public-button--ghost {
justify-content: flex-start;
min-width: 0;
padding-block: 0.4rem;
padding-inline-end: 0;
}
.public-button--fit-content {
min-width: 0;
width: fit-content;
max-width: 100%;
}
.public-button--icon {
--public-action-end-width: var(--public-space-xs);
width: var(--public-control-md);
min-width: var(--public-control-md);
min-height: var(--public-control-md);
height: var(--public-control-md);
padding: 0;
}
.public-button--icon.public-button--sm {
width: var(--public-control-sm);
min-width: var(--public-control-sm);
min-height: var(--public-control-sm);
height: var(--public-control-sm);
}
.public-button--danger, .public-button--danger:hover, .public-button--danger:focus-visible {
color: var(--clr-status-error);
}
.public-button__content, .public-button__icon, .public-button__label {
display: inline-flex;
align-items: center;
justify-content: center;
}
.public-button__icon {
flex-shrink: 0;
font-size: var(--public-icon-sm);
line-height: 1;
}
.public-button__icon i {
--fa-width: 1em;
width: 1em;
text-align: center;
letter-spacing: 0;
}
.public-button__icon + .public-button__label, .public-button__label + .public-button__icon {
margin-left: var(--public-space-2xs);
}
.public-button__loader {
width: var(--public-space-sm);
height: var(--public-space-sm);
margin-left: var(--public-space-2xs);
border: 1px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: public-button-spin var(--dur-slow) linear infinite;
}
.public-site .public-button {
font-size: var(--public-button-font-size);
}
[data-public-load-more-controls][hidden] {
display: none !important;
}
.public-filter-tabs[hidden] {
display: none;
}
.public-filter-tabs--line {
display: flex;
align-items: end;
gap: var(--public-space-xl);
margin: 0;
padding: 0;
overflow-x: auto;
border-bottom: 1px solid var(--public-line);
scrollbar-width: none;
}
.public-filter-tabs--line::-webkit-scrollbar {
display: none;
}
.public-filter-tabs--line a {
position: relative;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
min-height: var(--public-control-md);
padding: var(--public-space-xs) 0;
color: var(--public-muted);
text-decoration: none;
transition: color var(--public-duration) var(--public-ease);
}
.public-filter-tabs--line a::after {
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 2px;
background: var(--clr-primary-500);
content: "";
opacity: 0;
transform: scaleX(0.35);
transition: opacity var(--public-duration) var(--public-ease), transform var(--public-duration) var(--public-ease);
}
.public-filter-tabs--line a:hover, .public-filter-tabs--line a:focus-visible, .public-filter-tabs--line a.is-active {
color: var(--public-navy-deep);
}
.public-filter-tabs--line a:hover::after, .public-filter-tabs--line a.is-active::after {
opacity: 1;
transform: scaleX(1);
}
.public-filter-tabs--line a:focus-visible {
outline: 2px solid var(--clr-primary-500);
outline-offset: -2px;
}
.public-filter-tabs--block {
display: grid;
gap: 0.4rem;
margin: 0;
padding: 0;
}
.public-filter-tabs--block a {
display: grid;
place-items: center;
min-height: var(--public-control-md);
padding: var(--spacing-sm) var(--spacing-md);
color: var(--public-ink);
background: var(--public-surface-subtle);
text-align: center;
text-decoration: none;
border-radius: 0.2rem 1.6rem 0.2rem 0.2rem;
transition: color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease), box-shadow var(--public-duration) var(--public-ease);
}
.public-filter-tabs--block a:hover, .public-filter-tabs--block a:focus-visible {
color: var(--public-navy);
background: var(--public-surface);
outline: none;
}
.public-filter-tabs--block a.is-active {
color: var(--public-white);
background: var(--public-blue);
}
.public-filter-tabs--wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--public-space-2xs);
margin: 0;
padding: 0;
overflow: visible;
}
.public-filter-tabs--wrap a {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
min-height: var(--public-filter-tab-mobile-height);
padding: calc(var(--public-space-2xs) * 0.5) var(--public-space-sm);
color: var(--public-muted);
background: color-mix(in srgb, var(--public-white) 72%, transparent);
border: 1px solid var(--public-line);
border-radius: 0.2rem 1.6rem 0.2rem 0.2rem;
text-decoration: none;
transition: color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease), border-color var(--public-duration) var(--public-ease);
}
.public-filter-tabs--wrap a:hover, .public-filter-tabs--wrap a:focus-visible {
color: var(--public-brand-dark);
border-color: var(--public-line-strong);
background: var(--public-surface-subtle);
}
.public-filter-tabs--wrap a.is-active {
color: var(--public-brand-ink);
background: color-mix(in srgb, var(--public-brand-accent-soft) 78%, var(--public-white));
border-color: color-mix(in srgb, var(--public-brand-accent) 34%, var(--public-line));
}
.public-filter-tabs--wrap a[aria-disabled=true], .public-filter-tabs--wrap a.is-disabled {
color: var(--public-muted-soft);
background: var(--public-surface-subtle);
border-color: var(--public-line);
cursor: not-allowed;
opacity: 0.72;
pointer-events: none;
}
@media (max-width: 767px) {
.public-filter-tabs--line {
gap: var(--public-space-lg);
}
.public-filter-tabs--line a {
min-height: var(--public-control-sm);
}
.public-filter-tabs--wrap:not(.public-filter-tabs--static) {
min-width: 0;
flex-wrap: nowrap;
justify-content: flex-start;
gap: calc(var(--public-space-2xs) * 0.5);
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
overscroll-behavior-inline: contain;
touch-action: pan-x;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.public-filter-tabs--wrap:not(.public-filter-tabs--static)::-webkit-scrollbar {
display: none;
}
.public-filter-tabs--wrap:not(.public-filter-tabs--static) a {
scroll-snap-align: start;
}
.public-filter-tabs--wrap.public-filter-tabs--static {
justify-content: flex-start;
flex-wrap: wrap;
overflow: visible;
touch-action: auto;
}
.public-filter-tabs--wrap a {
min-height: var(--public-filter-tab-mobile-height);
padding: calc(var(--public-space-2xs) * 0.25) var(--public-space-sm);
}
}
.public-sticky-section-nav {
position: sticky;
z-index: 4;
top: var(--public-header-height);
border-bottom: 1px solid var(--public-line-strong);
background: color-mix(in srgb, var(--public-brand-surface) 94%, transparent);
-webkit-backdrop-filter: blur(1.2rem);
backdrop-filter: blur(1.2rem);
}
.public-sticky-section-nav__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
padding-block: var(--public-space-xs);
}
.public-sticky-section-nav__items {
display: flex;
min-width: 0;
justify-content: flex-start;
gap: var(--public-space-sm);
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
overscroll-behavior-inline: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
touch-action: pan-x;
-webkit-overflow-scrolling: touch;
}
.public-sticky-section-nav__items::-webkit-scrollbar {
display: none;
}
.public-sticky-section-nav__item {
display: inline-flex;
flex: 0 0 auto;
min-height: var(--public-control-sm);
align-items: center;
justify-content: center;
padding: 0.8rem 0.4rem;
color: var(--color-text-muted);
border: 0;
background: transparent;
font-weight: var(--font-weight-regular);
scroll-snap-align: start;
text-decoration: none;
white-space: nowrap;
transition: color var(--public-duration) var(--public-ease), opacity var(--public-duration) var(--public-ease);
}
.public-sticky-section-nav__item:hover, .public-sticky-section-nav__item:focus-visible {
color: var(--public-brand-dark);
opacity: 1;
}
.public-sticky-section-nav__item.is-active {
color: var(--public-brand-ink);
font-weight: var(--font-weight-semibold);
}
.public-sticky-section-nav__control {
display: none;
width: var(--public-control-sm);
height: var(--public-control-sm);
align-items: center;
justify-content: center;
padding: 0;
color: var(--public-brand-ink);
border: 0;
background: transparent;
}
.public-sticky-section-nav__control:focus-visible {
outline: 1px solid currentcolor;
outline-offset: -0.4rem;
}
.public-sticky-section-nav__control:disabled {
color: var(--public-muted-soft);
}
@media (max-width: 767px) {
.public-sticky-section-nav__inner {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.public-sticky-section-nav.is-overflowing .public-sticky-section-nav__inner {
grid-template-columns: var(--public-control-sm) minmax(0, 1fr) var(--public-control-sm);
}
.public-sticky-section-nav.is-overflowing .public-sticky-section-nav__control {
display: inline-flex;
}
}
@keyframes public-button-spin {
to {
transform: rotate(1turn);
}
}
.public-text-link {
position: relative;
display: inline-flex;
align-items: center;
min-height: var(--public-control-sm);
padding-inline-start: calc(var(--public-link-line-hover-width) + var(--public-link-line-gap));
border: 0;
border-radius: 0;
background: transparent;
text-decoration: none;
}
.public-text-link::before {
position: absolute;
inset-inline-start: 0;
top: 50%;
width: var(--public-link-line-width);
height: 1px;
border: 0;
border-radius: 0;
background: currentColor;
content: "";
pointer-events: none;
transition: width var(--public-action-duration) var(--public-ease);
}
.public-text-link::after {
content: none;
}
.public-text-link:hover::before, .public-text-link:focus-visible::before {
width: var(--public-link-line-hover-width);
}
.public-text-link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.public-text-link::before {
transition: none;
}
}
.public-text-link {
gap: 1.2rem;
color: inherit;
}
.public-cursor {
--public-cursor-size: 3.6rem;
--public-cursor-label-size: 7.2rem;
--public-cursor-tone: var(--public-white);
--public-cursor-keyline: var(--public-ink);
position: fixed;
top: 0;
left: 0;
z-index: var(--public-z-cursor);
display: none;
width: 0;
height: 0;
pointer-events: none;
opacity: 0;
mix-blend-mode: normal;
transition: opacity var(--dur-fast) var(--ease-out-quart);
}
.public-cursor.is-enabled {
display: block;
}
.public-cursor.is-visible {
opacity: 1;
}
.public-cursor__dot, .public-cursor__ring {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
will-change: transform;
}
.public-cursor__dot::before {
content: "";
position: absolute;
top: -0.4rem;
left: -0.4rem;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background: var(--public-cursor-tone);
box-shadow: 0 0 0 1px var(--public-cursor-keyline);
transition: opacity var(--dur-instant) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart);
}
.public-cursor__ring-shape {
position: absolute;
top: calc(var(--public-cursor-size) / -2);
left: calc(var(--public-cursor-size) / -2);
width: var(--public-cursor-size);
height: var(--public-cursor-size);
border: 2px solid var(--public-cursor-tone);
border-radius: 50%;
box-shadow: 0 0 0 1px var(--public-cursor-keyline);
transition: top var(--dur-base) var(--ease-out-expo), left var(--dur-base) var(--ease-out-expo), width var(--dur-base) var(--ease-out-expo), height var(--dur-base) var(--ease-out-expo), border-color var(--dur-fast) var(--ease-out-quart), background-color var(--dur-fast) var(--ease-out-quart), transform var(--dur-instant) var(--ease-out-quart);
}
.public-cursor__label {
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: var(--public-cursor-label-size);
height: var(--public-cursor-label-size);
color: var(--public-cursor-tone);
text-align: center;
text-shadow: 0 1px 2px var(--public-cursor-keyline);
letter-spacing: 0.08em;
opacity: 0;
transform: translate(-50%, -50%) scale(0.84);
transition: opacity var(--dur-instant) var(--ease-out-quart), transform var(--dur-base) var(--ease-out-expo);
}
.public-cursor__underline {
position: fixed;
top: 0;
left: 0;
height: 1px;
background: currentColor;
opacity: 0;
transform: scaleX(0);
transform-origin: center;
transition: opacity var(--dur-instant) var(--ease-out-quart), transform var(--dur-base) var(--ease-out-expo);
}
.public-cursor[data-cursor-state=view], .public-cursor[data-cursor-state=listen], .public-cursor[data-cursor-state=reserve], .public-cursor[data-cursor-state=drag] {
--public-cursor-size: var(--public-cursor-label-size);
}
.public-cursor[data-cursor-state=view] .public-cursor__label, .public-cursor[data-cursor-state=listen] .public-cursor__label, .public-cursor[data-cursor-state=reserve] .public-cursor__label, .public-cursor[data-cursor-state=drag] .public-cursor__label {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.public-cursor[data-cursor-state=view] .public-cursor__dot::before, .public-cursor[data-cursor-state=listen] .public-cursor__dot::before, .public-cursor[data-cursor-state=reserve] .public-cursor__dot::before, .public-cursor[data-cursor-state=drag] .public-cursor__dot::before {
opacity: 0;
transform: scale(0.5);
}
.public-cursor[data-cursor-state=view] .public-cursor__ring-shape, .public-cursor[data-cursor-state=listen] .public-cursor__ring-shape, .public-cursor[data-cursor-state=reserve] .public-cursor__ring-shape, .public-cursor[data-cursor-state=drag] .public-cursor__ring-shape {
border-color: var(--public-brand-dark);
background: var(--public-brand-dark);
}
.public-cursor[data-cursor-state=link] {
--public-cursor-size: 4.8rem;
}
.public-cursor[data-cursor-state=link] .public-cursor__underline {
opacity: 1;
transform: scaleX(1);
}
.public-cursor.is-pressed .public-cursor__dot::before {
transform: scale(0.72);
}
.public-cursor.is-pressed .public-cursor__ring-shape {
transform: scale(0.9);
}
.public-cursor.is-native-target {
opacity: 0;
}
.public-cursor.is-optical-target {
opacity: 0;
}
.public-cursor-showcase {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--public-space-sm);
}
.public-cursor-showcase__item {
display: grid;
place-items: center;
gap: var(--public-space-sm);
min-height: 14rem;
padding: var(--public-space-md);
color: var(--public-white);
background: var(--public-navy-deep);
}
.public-cursor-showcase__cursor {
position: relative;
display: grid;
place-items: center;
width: 7.2rem;
height: 7.2rem;
}
.public-cursor-showcase__dot {
position: absolute;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 1px var(--public-ink);
}
.public-cursor-showcase__ring {
display: grid;
place-items: center;
width: 3.6rem;
height: 3.6rem;
border: 2px solid currentColor;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--public-ink);
text-shadow: 0 1px 2px var(--public-ink);
}
.public-cursor-showcase .public-cursor-showcase__cursor:not(.public-cursor-showcase__cursor--default) .public-cursor-showcase__ring {
width: 7.2rem;
height: 7.2rem;
}
.public-cursor-showcase .public-cursor-showcase__cursor:not(.public-cursor-showcase__cursor--default) .public-cursor-showcase__dot {
opacity: 0.65;
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
html.has-public-cursor,
html.has-public-cursor * {
cursor: none !important;
}
html.has-public-cursor input,
html.has-public-cursor textarea,
html.has-public-cursor select,
html.has-public-cursor [contenteditable=true],
html.has-public-cursor iframe,
html.has-public-cursor video[controls] {
cursor: auto !important;
}
html.has-public-cursor [data-cursor=hidden],
html.has-public-cursor [data-cursor=hidden] * {
cursor: auto !important;
}
html.has-public-cursor [data-cursor=hidden] a[href],
html.has-public-cursor [data-cursor=hidden] button,
html.has-public-cursor [data-cursor=hidden] [role=button],
html.has-public-cursor [data-cursor=hidden] [role=slider],
html.has-public-cursor [data-cursor=hidden] [role=tab] {
cursor: pointer !important;
}
html.has-public-cursor dialog[data-cursor=hidden]::backdrop {
cursor: default;
}
}
@media (max-width: 767px) {
.public-cursor {
display: none !important;
}
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
.public-cursor {
display: none !important;
}
}
@media (max-width: 767px) {
.public-cursor-showcase {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.public-map-link {
display: inline-flex;
align-items: center;
gap: var(--public-space-2xs);
width: fit-content;
min-height: 3.2rem;
padding-bottom: 0.5rem;
color: var(--public-ink);
text-decoration: none;
}
.public-map-link__label {
position: relative;
}
.public-map-link__label::before, .public-map-link__label::after {
position: absolute;
right: 0;
bottom: -0.5rem;
left: 0;
height: 1px;
background: currentColor;
content: "";
pointer-events: none;
}
.public-map-link__label::before {
transform: scaleX(1);
transform-origin: right center;
}
.public-map-link__label::after {
transform: scaleX(0);
transform-origin: left center;
}
.public-map-link__icon {
flex: 0 0 auto;
width: 2rem;
height: 2rem;
object-fit: contain;
}
.public-map-link:hover, .public-map-link:focus-visible {
color: var(--public-blue);
}
.public-map-link:hover .public-map-link__label::before, .public-map-link:focus-visible .public-map-link__label::before {
animation: public-map-link-underline-exit calc(var(--public-duration) + var(--public-duration)) var(--public-ease) both;
}
.public-map-link:hover .public-map-link__label::after, .public-map-link:focus-visible .public-map-link__label::after {
animation: public-map-link-underline-enter calc(var(--public-duration) + var(--public-duration)) var(--public-ease) both;
}
.public-map-link:focus-visible {
outline: 2px solid var(--public-focus);
outline-offset: 0.3rem;
}
@media (prefers-reduced-motion: reduce) {
.public-map-link:hover .public-map-link__label::before, .public-map-link:hover .public-map-link__label::after, .public-map-link:focus-visible .public-map-link__label::before, .public-map-link:focus-visible .public-map-link__label::after {
animation: none;
}
}
@keyframes public-map-link-underline-exit {
0% {
transform: scaleX(1);
}
46%, 100% {
transform: scaleX(0);
}
}
@keyframes public-map-link-underline-enter {
0%, 42% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
.public-logo {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--public-space-2xs);
color: inherit;
text-align: center;
text-decoration: none;
}
.public-logo__asset {
position: relative;
display: block;
width: 12rem;
height: 8rem;
}
.public-logo__image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.public-logo--adaptive .public-logo__image {
position: absolute;
inset: 0;
transition: opacity var(--public-duration) var(--public-ease);
}
.public-logo--adaptive .public-logo__image--black {
opacity: 1;
}
.public-logo--adaptive .public-logo__image--white {
opacity: 0;
}
.public-logo__short-name {
font-size: var(--heading-sm-fs);
font-weight: var(--list-title-fw);
letter-spacing: 0.08em;
}
.public-logo__wordmark {
font-size: var(--body-xs-fs);
font-weight: var(--list-title-fw);
letter-spacing: 0;
}
.public-logo--white, .public-logo--light {
color: var(--public-white);
}
@media (max-width: 1023px) {
.public-logo__asset {
width: 10.2rem;
height: 6.8rem;
}
}
@media (max-width: 767px) {
.public-logo__asset {
width: 9rem;
height: 5.6rem;
}
}
.public-brand-mark {
display: block;
width: auto;
height: 100%;
overflow: visible;
color: inherit;
}
.public-brand-mark__art path {
fill: currentColor;
stroke: none;
}
.public-brand-mark__reveal {
transform-box: fill-box;
transform-origin: center top;
}
.public-thumbnail-placeholder {
display: grid;
place-items: center;
width: 100%;
height: 100%;
overflow: hidden;
color: var(--public-white);
background: var(--clr-base-black);
}
.public-thumbnail-placeholder .public-logo {
position: static;
justify-content: center;
width: min(18rem, 68%);
color: var(--public-white);
}
.public-thumbnail-placeholder .public-logo__asset {
width: 100%;
}
.public-thumbnail-placeholder .public-logo__image {
object-position: center;
}
.public-thumbnail-placeholder .public-logo__lines {
display: none;
}
.public-treatment-pictogram {
display: block;
width: var(--public-treatment-pictogram-frame);
height: var(--public-treatment-pictogram-frame);
flex: 0 0 var(--public-treatment-pictogram-frame);
overflow: visible;
}
.public-treatment-pictogram--sm {
--public-treatment-pictogram-frame: var(--public-treatment-pictogram-frame-sm);
}
.public-treatment-pictogram--md {
--public-treatment-pictogram-frame: var(--public-treatment-pictogram-frame-md);
}
.public-treatment-pictogram--lg {
--public-treatment-pictogram-frame: var(--public-treatment-pictogram-frame-lg);
}
.public-treatment-pictogram img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.public-header.site-header {
--public-header-award-height: 4rem;
}
.public-header.site-header.public-header--without-award {
--public-header-award-height: 0rem;
}
html.is-public-page-hero-immersed .public-header.site-header.public-header--home:not(.is-scrolled) {
color: var(--public-header-theme-color);
background-color: transparent;
box-shadow: none;
}
html.is-public-page-hero-immersed .public-header.site-header.public-header--home:not(.is-scrolled) .public-logo__image--black, .public-header.site-header[data-header-variant=white]:not(.is-scrolled) .public-logo__image--black {
opacity: 0;
}
html.is-public-page-hero-immersed .public-header.site-header.public-header--home:not(.is-scrolled) .public-logo__image--white, .public-header.site-header[data-header-variant=white]:not(.is-scrolled) .public-logo__image--white {
opacity: 1;
}
.public-header.site-header {
--public-header-theme-color: var(--clr-primary-main);
--public-header-scroll-color: var(--clr-primary-main);
--public-header-scroll-surface: color-mix(in srgb, var(--public-white) 86%, transparent);
--public-header-dropdown-surface: var(--color-background-dropdown-light);
--public-header-dropdown-color: var(--public-brand-ink);
position: fixed;
inset: 0 0 auto;
z-index: var(--public-z-header);
height: auto;
color: var(--public-header-theme-color);
background-color: var(--public-header-white);
border-bottom: 0;
box-shadow: none !important;
pointer-events: auto;
transition: color var(--public-header-fill-duration) var(--public-ease), background-color var(--public-header-fill-duration) var(--public-ease), backdrop-filter var(--public-header-fill-duration) var(--public-ease);
}
.public-header.site-header.public-header--home {
--public-header-theme-color: var(--clr-base-white);
--public-header-scroll-color: var(--clr-base-white);
--public-header-scroll-surface: color-mix(in srgb, var(--public-brand-ink) 82%, transparent);
--public-header-dropdown-surface: var(--color-background-dropdown-dark);
--public-header-dropdown-color: var(--public-brand-surface);
}
.public-header.site-header[data-header-variant=white] {
--public-header-theme-color: var(--clr-base-white);
--public-header-scroll-color: var(--clr-base-white);
--public-header-scroll-surface: color-mix(in srgb, var(--public-brand-ink) 82%, transparent);
--public-header-dropdown-surface: var(--color-background-dropdown-dark);
--public-header-dropdown-color: var(--public-brand-surface);
color: var(--public-header-theme-color);
background-color: var(--public-header-scroll-surface);
-webkit-backdrop-filter: blur(1.2rem);
backdrop-filter: blur(1.2rem);
}
.public-header.site-header[data-header-variant=black][data-header-mode=solid] {
--public-header-theme-color: var(--public-brand-ink);
--public-header-scroll-color: var(--public-brand-ink);
--public-header-scroll-surface: #f6f1ea;
background-color: var(--public-header-scroll-surface);
}
.public-header.site-header[data-header-mode=overlay]:not(.is-scrolled) {
background-color: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.public-header.site-header.is-scrolled {
color: var(--public-header-scroll-color);
background-color: var(--public-header-scroll-surface);
-webkit-backdrop-filter: blur(1.2rem);
backdrop-filter: blur(1.2rem);
}
.public-header.site-header[data-header-variant=white].is-scrolled .public-logo__image--black {
opacity: 0;
}
.public-header.site-header[data-header-variant=white].is-scrolled .public-logo__image--white {
opacity: 1;
}
.public-header__award {
display: block;
height: var(--public-header-award-height);
min-height: var(--public-header-award-height);
color: var(--public-white);
background: var(--public-award-black);
overflow: hidden;
}
.public-header__award-swiper, .public-header__award-swiper > .swiper-wrapper, .public-header__award-slide {
width: 100%;
height: 100%;
}
.public-header__award-slide {
display: grid;
place-items: center;
color: var(--public-white);
background: var(--public-award-black);
}
.public-header__award-link {
display: grid;
width: 100%;
height: 100%;
place-items: center;
padding-inline: var(--public-header-gutter);
color: inherit;
text-align: center;
}
.public-header__award-link:focus-visible {
outline: 1px solid var(--public-white);
outline-offset: -2px;
}
.public-header__award-slide > .public-header__award-message {
padding-inline: var(--public-header-gutter);
text-align: center;
}
.public-header__award-message {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.public-header__award-slide--plum {
background: var(--public-award-plum);
}
.public-header__award-slide--blue {
background: var(--public-award-blue);
}
.public-header__award-slide--wine {
background: var(--public-award-wine);
}
.public-header__award-slide--green {
background: var(--public-award-green);
}
.public-header.site-header .public-header__inner {
height: var(--public-header-content-height);
display: grid;
grid-template-areas: "nav logo actions";
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: var(--public-space-2xl);
}
.public-header.site-header .public-header__menu, .public-header.site-header .public-header__menu-toggle {
display: none;
}
.public-header.site-header .public-logo {
grid-area: logo;
justify-self: center;
}
.public-header.site-header .public-header__actions {
grid-area: actions;
justify-self: end;
display: flex;
align-items: center;
gap: var(--public-space-2xs);
}
.public-header__action {
display: flex;
align-items: center;
}
.public-header__official-site-item {
display: flex;
align-items: center;
}
.public-header__official-site {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 9.6rem;
min-height: 3.2rem;
gap: var(--public-space-2xs);
padding-inline: var(--public-space-sm);
color: inherit;
border: 1px solid currentColor;
border-radius: var(--public-radius-pill);
background: transparent;
transition: color var(--public-duration) var(--public-ease), background-color var(--public-duration) var(--public-ease);
}
.public-header__official-site:hover, .public-header__official-site:focus-visible {
color: var(--clr-primary-500);
}
.public-header__official-site:focus-visible {
outline: 1px solid currentColor;
outline-offset: 2px;
}
.public-header__official-site-icon {
display: grid;
width: var(--body-xs-fs);
height: var(--body-xs-fs);
place-items: center;
font-size: var(--body-xs-fs);
line-height: 1;
}
.public-header__nav {
grid-area: nav;
justify-self: start;
height: 100%;
}
.public-header__nav > ul {
display: flex;
align-items: center;
height: 100%;
gap: clamp(var(--public-space-md), 2.6vw, var(--public-space-3xl));
margin: 0;
padding: 0;
list-style: none;
}
.public-header__nav li {
position: relative;
}
.public-header__nav a {
color: inherit;
white-space: nowrap;
}
.public-header__nav > ul > li > a {
position: relative;
display: flex;
align-items: center;
min-height: var(--public-header-content-height);
outline: 0;
font-family: var(--font-sans-family);
font-size: var(--body-xs-fs);
font-weight: var(--font-weight-medium);
letter-spacing: 0.025em;
}
.public-header__nav > ul > li > a > span {
color: inherit;
opacity: 0.76;
transition: opacity 180ms var(--public-ease);
}
.public-header__nav > ul > li > a > span:hover, .public-header__nav > ul > li > a > span:focus-visible, .public-header__nav > ul > li > a > span[aria-current=page], .public-header__nav > ul > li > a > span.is-current {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.public-header__nav > ul > li > a > span {
transition: none;
}
}
.public-header__nav > ul > li.is-active > a > span, .public-header__nav > ul > li.is-dropdown-open > a > span, .public-header__nav > ul > li:hover > a > span, .public-header__nav > ul > li:focus-within > a > span {
opacity: 1;
}
.public-header__nav > ul > li > a:focus-visible > span {
outline: 2px solid currentColor;
outline-offset: 5px;
}
.public-header__sub {
position: absolute;
top: 100%;
left: 50%;
width: max-content;
min-width: 24rem;
max-width: min(28rem, 100vw - var(--public-header-gutter) * 2);
padding: var(--public-space-2xs);
color: var(--public-header-dropdown-color);
background: var(--public-header-dropdown-surface);
border: 0;
border-radius: 0;
box-shadow: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, -0.4rem);
transition: opacity 220ms var(--public-ease), visibility 220ms var(--public-ease), transform 220ms var(--public-ease);
}
.public-header__nav > ul > li:hover > .public-header__sub, .public-header__nav > ul > li:focus-within > .public-header__sub, .public-header__nav > ul > li.is-dropdown-open > .public-header__sub {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
.public-header__sub a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 4.4rem;
padding: 0.8rem var(--public-space-xs) 1rem;
color: inherit;
background: transparent;
font-size: 1.4rem;
line-height: 1.4;
opacity: 0.66;
white-space: normal;
transition: opacity 220ms var(--public-ease);
}
.public-header__sub a::after {
position: absolute;
bottom: 0.7rem;
left: 50%;
transform: translateX(-50%);
width: 1.6rem;
height: 1px;
background: currentColor;
content: "";
opacity: 0;
}
.public-header__sub a:hover, .public-header__sub a:focus-visible, .public-header__sub a.is-current, .public-header__sub a[aria-current=page] {
opacity: 1;
}
.public-header__sub a:focus-visible {
outline: 2px solid currentColor;
outline-offset: -2px;
}
.public-header__sub a.is-current, .public-header__sub a[aria-current=page] {
font-weight: var(--font-weight-medium);
}
.public-header__sub a.is-current::after, .public-header__sub a[aria-current=page]::after {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.public-header__sub a {
transition: none;
}
}
.public-header__action-btn {
display: grid;
width: var(--public-header-action-width);
height: var(--public-control-sm);
place-items: center;
margin: 0;
padding: 0;
color: inherit;
border: 0;
border-radius: var(--public-radius-pill);
background: transparent;
cursor: pointer;
position: relative;
box-shadow: none;
transition: color var(--public-duration) var(--public-ease);
}
.public-header__appointment {
width: auto;
min-height: var(--public-control-sm);
padding-inline: 2rem;
color: inherit;
white-space: nowrap;
}
.public-header.site-header .public-header__action-btn:not(.public-language-switcher__toggle):hover, .public-header.site-header .public-header__action-btn:not(.public-language-switcher__toggle):focus-visible {
color: var(--clr-primary-500);
}
.public-header.site-header .public-header__action-btn:not(.public-language-switcher__toggle):hover .public-header__action-icon, .public-header.site-header .public-header__action-btn:not(.public-language-switcher__toggle):focus-visible .public-header__action-icon {
color: var(--clr-primary-500);
}
.public-header.site-header .public-language-switcher__toggle:hover, .public-header.site-header .public-language-switcher__toggle:focus-visible, .public-header.site-header .public-language-switcher[data-lang-switcher].is-open .public-language-switcher__toggle {
color: inherit;
}
.public-header__action-icon {
display: grid;
width: var(--public-header-icon-size);
height: var(--public-header-icon-size);
place-items: center;
font-size: var(--public-header-icon-size);
line-height: 1;
}
.public-header__action-btn--cart .public-header__notify {
top: 0.2rem;
right: -0.2rem;
}
.public-header__notify {
position: absolute;
top: 0.3rem;
right: 0.1rem;
display: grid;
min-width: var(--public-header-notify-size);
height: var(--public-header-notify-size);
place-items: center;
color: var(--public-white);
background: #d94f7e;
border-radius: var(--public-radius-pill);
font-size: var(--public-header-notify-font-size);
line-height: 1;
}
.public-header.site-header .public-header__search-icon {
grid-area: 1/1;
}
.public-header.site-header .public-header__action-btn:focus-visible {
background: transparent;
}
@media (max-width: 1720px) {
.public-header__nav > ul > li:first-child > .public-header__sub {
left: 0;
transform: translateY(-0.4rem);
}
.public-header__nav > ul > li:first-child:hover > .public-header__sub, .public-header__nav > ul > li:first-child:focus-within > .public-header__sub, .public-header__nav > ul > li:first-child.is-dropdown-open > .public-header__sub {
transform: translateY(0);
}
}
@media (max-width: 1023px) {
.public-header.site-header .public-header__inner {
grid-template-areas: "menu logo actions";
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: var(--public-space-lg);
}
.public-header.site-header .public-header__menu-toggle {
grid-area: menu;
justify-self: start;
display: grid;
width: var(--public-header-action-size);
height: var(--public-header-action-size);
place-content: center;
gap: var(--public-space-2xs);
color: inherit;
border: 0;
background: transparent;
}
.public-header.site-header .public-header__menu-toggle span {
display: block;
width: 2rem;
height: 1px;
background: currentColor;
}
.public-header.site-header .public-header__menu-toggle:focus-visible {
background: transparent;
outline: 0;
}
.public-header.site-header .public-header__nav {
display: none;
}
}
@media (max-width: 767px) {
.public-header.site-header {
--public-header-award-height: 2.8rem;
border-bottom: 1px solid transparent;
}
.public-header.site-header[data-header-variant=black] {
border-bottom-color: color-mix(in srgb, currentColor 25%, transparent);
}
.public-header__award {
height: var(--public-header-award-height);
min-height: var(--public-header-award-height);
}
.public-header.site-header .public-header__inner {
height: calc(var(--public-header-content-height) - 1px);
gap: var(--public-space-xs);
}
.public-header.site-header .public-logo__asset {
width: 6.8rem;
height: 4.4rem;
}
.public-header.site-header .public-header__actions {
gap: 0;
}
.public-header__appointment {
display: none;
}
}
.public-language-switcher {
position: relative;
margin: 0;
}
.public-language-switcher__toggle {
position: relative;
isolation: isolate;
border: 0;
background: transparent;
border-radius: var(--public-action-radius);
text-decoration: none;
}
.public-language-switcher__toggle::before, .public-language-switcher__toggle::after {
position: absolute;
inset-block: 0;
box-sizing: border-box;
width: var(--public-action-end-width);
border: 1px solid currentColor;
content: "";
pointer-events: none;
transition: width var(--public-action-duration) var(--public-ease);
}
.public-language-switcher__toggle::before {
inset-inline-start: 0;
border-inline-end: 0;
border-radius: var(--public-action-radius) 0 0 var(--public-action-radius);
}
.public-language-switcher__toggle::after {
inset-inline-end: 0;
border-inline-start: 0;
border-radius: 0 var(--public-action-radius) var(--public-action-radius) 0;
}
.public-language-switcher__toggle:hover::before, .public-language-switcher__toggle:hover::after, .public-language-switcher__toggle:focus-visible::before, .public-language-switcher__toggle:focus-visible::after, .public-language-switcher__toggle.is-frame-completing::before, .public-language-switcher__toggle.is-frame-completing::after, .public-language-switcher__toggle[aria-expanded=true]::before, .public-language-switcher__toggle[aria-expanded=true]::after {
width: calc(50% + 1px);
}
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
.public-language-switcher__toggle::before, .public-language-switcher__toggle::after {
width: calc(50% + 1px);
}
}
.public-language-switcher__toggle:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.public-language-switcher__toggle::before, .public-language-switcher__toggle::after {
transition: none;
}
}
.public-language-switcher__toggle {
width: auto;
min-width: 7.8rem;
height: var(--public-control-sm);
padding-inline: 1.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
color: inherit;
font-family: var(--font-sans-family);
font-weight: var(--font-weight-medium);
}
.public-language-switcher__current {
font-size: 1.2rem;
letter-spacing: 0.04em;
}
.public-language-switcher__dropdown {
position: absolute;
top: calc(100% + (var(--public-header-content-height) - var(--public-control-sm)) / 2);
left: 50%;
transform: translateX(-50%);
display: grid;
min-width: 12rem;
padding: var(--public-space-2xs);
color: var(--public-header-dropdown-color);
border: 0;
border-radius: 0;
background: var(--public-header-dropdown-surface);
box-shadow: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--public-duration) var(--public-ease), visibility var(--public-duration) var(--public-ease);
}
.public-language-switcher form {
margin: 0;
}
.public-language-switcher__item {
position: relative;
width: 100%;
min-height: 4.4rem;
margin: 0;
padding: 0.8rem var(--public-space-xs) 1rem;
border: 0;
border-radius: 0;
color: inherit;
background: transparent;
text-align: center;
font-family: inherit;
font-size: 1.4rem;
line-height: 1.4;
cursor: pointer;
opacity: 0.66;
transition: opacity var(--public-duration) var(--public-ease);
}
.public-language-switcher__item::after {
position: absolute;
bottom: 0.7rem;
left: 50%;
transform: translateX(-50%);
width: 1.6rem;
height: 1px;
background: currentColor;
content: "";
opacity: 0;
}
.public-language-switcher__item:hover, .public-language-switcher__item:focus-visible {
opacity: 1;
}
.public-language-switcher__item:focus-visible {
outline: 2px solid currentColor;
outline-offset: -2px;
}
.public-language-switcher__item.is-active {
opacity: 1;
font-weight: var(--font-weight-medium);
}
.public-language-switcher__item.is-active::after {
opacity: 1;
}
.public-language-switcher--drawer {
display: flex;
align-items: center;
gap: var(--public-space-xs);
color: var(--public-brand-surface-strong);
}
.public-language-switcher--drawer button {
color: color-mix(in srgb, var(--public-brand-surface-strong) 58%, transparent);
}
.public-language-switcher--drawer button:hover, .public-language-switcher--drawer button:focus-visible, .public-language-switcher--drawer button.is-active {
color: var(--public-brand-surface-strong);
outline: 0;
}
.public-language-switcher[data-lang-switcher].is-open .public-language-switcher__dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.public-language-switcher__item {
transition: none;
}
}
@media (max-width: 767px) {
.public-language-switcher {
margin-left: 0;
}
.public-language-switcher__toggle {
min-width: 6.4rem;
padding-inline: 0.8rem;
gap: 0.6rem;
}
.public-language-switcher__toggle::before, .public-language-switcher__toggle::after {
inset-block: 0.5rem;
}
.public-language-switcher__toggle .public-header__action-icon {
width: 1.4rem;
height: 1.4rem;
font-size: 1.4rem;
}
.public-language-switcher__dropdown {
left: auto;
right: 0;
transform: none;
min-width: 12rem;
}
}
.public-drawer.site-drawer {
--public-header-dropdown-color: var(--public-brand-ink);
--public-header-dropdown-surface: var(--color-background-dropdown-light);
position: fixed;
inset: 0;
z-index: var(--public-z-drawer);
width: 100%;
height: 100svh;
height: 100dvh;
color: var(--public-brand-surface-strong);
background: color-mix(in srgb, var(--public-brand-ink) 0%, transparent);
visibility: hidden;
overflow: hidden;
pointer-events: none;
transform: none;
transition: background-color var(--public-duration) var(--public-ease), visibility var(--public-duration);
}
.public-drawer.site-drawer[data-state=opening], .public-drawer.site-drawer[data-state=open], .public-drawer.site-drawer[data-state=closing] {
background: color-mix(in srgb, var(--public-brand-ink) 54%, transparent);
visibility: visible;
transform: none;
}
.public-drawer.site-drawer[data-state=opening], .public-drawer.site-drawer[data-state=open] {
pointer-events: auto;
}
.public-drawer.site-drawer .public-drawer__panel {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 0;
margin: 0;
padding: 0;
color: var(--public-brand-surface-strong);
background: var(--public-brand-ink);
overflow-y: auto;
overscroll-behavior: contain;
clip-path: inset(0 0 100% 0);
transform: none;
transition: none;
}
.public-drawer.site-drawer[data-state=opening] .public-drawer__panel, .public-drawer.site-drawer[data-state=open] .public-drawer__panel, .public-drawer.site-drawer[data-state=closing] .public-drawer__panel {
clip-path: inset(0 0 0% 0);
}
.public-drawer.site-drawer .public-drawer__head {
display: grid;
flex: 0 0 auto;
grid-template-areas: "close brand actions";
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
height: var(--public-header-content-height);
margin: 0;
padding-inline: var(--gutter);
border-bottom: 0;
user-select: none;
}
.public-drawer__brand {
display: flex;
grid-area: brand;
align-items: center;
justify-self: center;
}
.public-drawer__actions {
grid-area: actions;
justify-self: end;
color: var(--public-brand-surface-strong);
}
.public-drawer__actions .public-language-switcher__dropdown {
left: auto;
right: 0;
transform: none;
}
.public-drawer__nav-text {
position: relative;
display: block;
overflow: hidden;
}
.public-drawer__nav-copy {
display: block;
transition: transform var(--public-duration) var(--public-ease);
}
.public-drawer__nav-copy + .public-drawer__nav-copy {
position: absolute;
inset: 0;
transform: translateY(110%);
}
.public-drawer__nav-icon {
position: relative;
display: grid;
flex: 0 0 2.4rem;
width: 2.4rem;
height: 2.4rem;
place-items: center;
}
.public-drawer__nav-icon::before {
width: 0.9rem;
height: 0.9rem;
border: 1px solid currentColor;
border-radius: 50%;
background: transparent;
content: "";
transition: background-color var(--public-duration) var(--public-ease);
}
.public-drawer.site-drawer .public-drawer__close {
position: relative;
grid-area: close;
justify-self: start;
display: grid;
width: var(--public-header-action-size);
height: var(--public-header-action-size);
padding: 0;
color: var(--public-brand-surface-strong);
background: transparent;
border: 0;
border-radius: 0;
place-content: center;
user-select: none;
}
.public-drawer.site-drawer .public-drawer__close:hover, .public-drawer.site-drawer .public-drawer__close:focus-visible {
background: transparent;
}
.public-drawer.site-drawer .public-drawer__close:focus-visible {
outline: 0;
}
.public-drawer.site-drawer .public-drawer__close > svg {
display: block;
width: 2rem;
height: 2rem;
fill: none;
stroke: currentColor;
stroke-width: 1;
pointer-events: none;
}
.public-drawer.site-drawer .public-drawer__body {
flex: 0 0 auto;
padding: 7.2rem 5.5rem 4rem 8rem;
}
.public-drawer.site-drawer .public-drawer__nav {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.public-drawer.site-drawer .site-drawer__nav-item {
margin: 0;
border: 0;
}
.public-drawer.site-drawer .site-drawer__nav-item + .site-drawer__nav-item {
margin-top: var(--public-space-xl);
}
.public-drawer.site-drawer .site-drawer__nav-label {
position: relative;
display: block;
width: 100%;
padding: 0;
color: var(--public-brand-surface-strong);
background: none;
border: 0;
text-align: left;
text-decoration: none;
text-transform: uppercase;
font-family: var(--font-display-family);
font-weight: var(--font-weight-medium);
letter-spacing: 0.01em;
outline: 0;
overflow: hidden;
opacity: 0.76;
transition: opacity var(--public-duration) var(--public-ease);
}
.public-drawer.site-drawer .site-drawer__nav-label--korean {
font-family: var(--font-sans-family);
}
.public-drawer.site-drawer button.site-drawer__nav-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-md);
}
.public-drawer.site-drawer .site-drawer__nav-item.is-expanded > button.site-drawer__nav-label .public-drawer__nav-icon::before {
background: currentColor;
}
.public-drawer.site-drawer .site-drawer__nav-label::after {
display: none;
}
.public-drawer.site-drawer .site-drawer__sub {
display: block;
width: min(37.9rem, 100%);
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height var(--public-duration) var(--public-ease), opacity var(--public-duration) var(--public-ease);
}
.public-drawer.site-drawer .site-drawer__sub-list {
display: grid;
gap: var(--public-space-2xs);
min-height: 0;
margin: 0;
padding: var(--public-space-sm) 0 0;
overflow: hidden;
list-style: none;
}
.public-drawer.site-drawer .site-drawer__nav-item.is-expanded > .site-drawer__sub {
max-height: var(--drawer-sub-height, 0);
opacity: 1;
}
.public-drawer.site-drawer .site-drawer__sub-link {
color: inherit;
opacity: 0.76;
transition: opacity 180ms var(--public-ease);
}
.public-drawer.site-drawer .site-drawer__sub-link:hover, .public-drawer.site-drawer .site-drawer__sub-link:focus-visible, .public-drawer.site-drawer .site-drawer__sub-link[aria-current=page], .public-drawer.site-drawer .site-drawer__sub-link.is-current {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.public-drawer.site-drawer .site-drawer__sub-link {
transition: none;
}
}
.public-drawer.site-drawer .site-drawer__sub-link {
width: 100%;
min-height: var(--public-control-sm);
padding-inline: 0;
padding-inline-start: 0.1rem;
padding-block: var(--public-space-xs);
border-left: 0;
}
.public-drawer.site-drawer .site-drawer__nav-label:hover, .public-drawer.site-drawer .site-drawer__nav-label:focus-visible, .public-drawer.site-drawer .site-drawer__sub-link:hover, .public-drawer.site-drawer .site-drawer__sub-link:focus-visible {
background: transparent;
opacity: 1;
}
.public-drawer.site-drawer .site-drawer__sub-link.is-current {
background: transparent;
opacity: 1;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
}
.public-drawer.site-drawer .site-drawer__nav-label:hover, .public-drawer.site-drawer .site-drawer__nav-label:focus-visible {
opacity: 1;
}
.public-drawer.site-drawer .site-drawer__nav-label:focus-visible .public-drawer__nav-copy:first-child, .public-drawer.site-drawer .site-drawer__sub-link:focus-visible {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.16em;
}
.public-drawer.site-drawer .site-drawer__nav-item.is-current-branch > .site-drawer__nav-label, .public-drawer.site-drawer .site-drawer__nav-item.is-expanded > .site-drawer__nav-label {
opacity: 1;
}
@media (max-width: 767px) {
.public-drawer.site-drawer {
background: transparent;
}
.public-drawer.site-drawer[data-state=opening], .public-drawer.site-drawer[data-state=open] {
background: transparent;
}
.public-drawer.site-drawer .public-drawer__panel {
min-height: 100svh;
padding: 0 0 1.8rem;
clip-path: inset(0 0 100% 0);
transform: none;
}
.public-drawer.site-drawer[data-state=opening] .public-drawer__panel, .public-drawer.site-drawer[data-state=open] .public-drawer__panel, .public-drawer.site-drawer[data-state=closing] .public-drawer__panel {
clip-path: inset(0 0 0% 0);
}
.public-drawer.site-drawer .public-drawer__head {
height: var(--public-header-content-height);
padding-inline: var(--gutter);
}
.public-drawer .public-drawer__brand .public-logo {
justify-content: center;
}
.public-drawer .public-drawer__brand .public-logo__asset {
width: 6.8rem;
height: 4.4rem;
}
.public-drawer.site-drawer .public-drawer__close {
margin: 0;
}
.public-drawer.site-drawer .public-drawer__body {
display: flex;
flex: 1 0 auto;
align-items: flex-start;
padding: clamp(4rem, 9svh, 6.4rem) var(--public-header-gutter) 3.2rem;
}
.public-drawer.site-drawer .site-drawer__nav-item + .site-drawer__nav-item {
margin-top: 0.6rem;
}
.public-drawer.site-drawer .site-drawer__nav-label {
min-height: 3.8rem;
color: var(--public-brand-surface-strong);
font-size: clamp(2.6rem, 7.8vw, 3.1rem);
font-weight: var(--font-weight-regular);
line-height: 1.05;
letter-spacing: -0.03em;
}
.public-drawer.site-drawer .site-drawer__nav-label--korean {
font-size: clamp(2.15rem, 6.4vw, 2.6rem);
line-height: 1.15;
letter-spacing: -0.055em;
}
.public-drawer.site-drawer button.site-drawer__nav-label {
gap: var(--public-space-sm);
}
.public-drawer.site-drawer .site-drawer__sub {
width: 100%;
}
.public-drawer.site-drawer .site-drawer__sub-list {
gap: 0;
padding-top: 1.2rem;
}
.public-drawer.site-drawer .site-drawer__sub-link {
min-height: 3.6rem;
padding-block: 0.7rem;
font-size: 1.4rem;
line-height: 1.35;
}
.public-drawer.site-drawer .site-drawer__nav-label:hover, .public-drawer.site-drawer .site-drawer__nav-label:focus-visible, .public-drawer.site-drawer .site-drawer__sub-link:hover, .public-drawer.site-drawer .site-drawer__sub-link:focus-visible, .public-drawer.site-drawer .site-drawer__sub-link.is-current {
background: transparent;
}
.public-drawer.site-drawer .site-drawer__nav-label:focus-visible, .public-drawer.site-drawer .site-drawer__sub-link:focus-visible {
outline: 0;
}
.public-drawer.site-drawer .site-drawer__sub-link.is-current {
text-decoration: underline;
}
}
@media (prefers-reduced-motion: reduce) {
.public-drawer.site-drawer .site-drawer__sub, .public-drawer.site-drawer .site-drawer__sub-list, .public-drawer.site-drawer .site-drawer__sub-link, .public-drawer.site-drawer .public-drawer__nav-copy, .public-drawer.site-drawer .public-drawer__nav-icon::before, .public-drawer.site-drawer .site-drawer__nav-label::after, .public-drawer.site-drawer .site-drawer__sub-link::before, .public-drawer.site-drawer .site-drawer__sub-link::after {
transition: none;
}
}
.public-search-form {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) var(--public-search-submit-width);
align-items: stretch;
min-width: 0;
width: 100%;
max-width: var(--public-search-max-width);
margin-inline: auto;
gap: var(--public-search-gap);
border: 0;
background: transparent;
}
.public-search-form__field {
display: flex;
align-items: center;
box-sizing: border-box;
min-width: 0;
height: var(--public-search-height);
border: 1px solid var(--public-ink);
background: var(--public-white);
transition: border-color var(--public-duration) var(--public-ease);
}
.public-search-form__icon {
flex: 0 0 var(--public-search-icon-slot);
display: grid;
place-items: center;
color: var(--public-ink);
font-size: var(--public-search-icon-size);
}
.public-search-form input {
flex: 1 1 auto;
min-width: 0;
padding: 0 var(--public-search-input-padding-inline);
color: var(--public-ink);
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
appearance: none;
background: transparent;
font-size: var(--body-sm-fs);
}
.public-search-form input::-webkit-search-cancel-button, .public-search-form input::-webkit-search-decoration, .public-search-form input::-webkit-search-results-button, .public-search-form input::-webkit-search-results-decoration {
display: none;
appearance: none;
}
.public-search-form input::placeholder {
color: var(--public-search-placeholder-color);
}
.public-search-form .public-search-form__clear, .public-search-form .public-search-form__submit {
display: grid;
place-items: center;
padding: 0;
border: 0;
cursor: pointer;
transition: color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease);
}
.public-search-form .public-search-form__clear {
flex: 0 0 var(--public-control-sm);
color: var(--public-muted);
background: transparent;
font-size: var(--body-md-fs);
}
.public-search-form .public-search-form__clear[hidden] {
display: none;
}
.public-search-form .public-search-form__submit {
min-height: var(--public-search-height);
min-width: 0;
position: relative;
isolation: isolate;
border: 0;
background: transparent;
border-radius: var(--public-action-radius);
text-decoration: none;
}
.public-search-form .public-search-form__submit::before, .public-search-form .public-search-form__submit::after {
position: absolute;
inset-block: 0;
box-sizing: border-box;
width: var(--public-action-end-width);
border: 1px solid currentColor;
content: "";
pointer-events: none;
transition: width var(--public-action-duration) var(--public-ease);
}
.public-search-form .public-search-form__submit::before {
inset-inline-start: 0;
border-inline-end: 0;
border-radius: var(--public-action-radius) 0 0 var(--public-action-radius);
}
.public-search-form .public-search-form__submit::after {
inset-inline-end: 0;
border-inline-start: 0;
border-radius: 0 var(--public-action-radius) var(--public-action-radius) 0;
}
.public-search-form .public-search-form__submit:hover::before, .public-search-form .public-search-form__submit:hover::after, .public-search-form .public-search-form__submit:focus-visible::before, .public-search-form .public-search-form__submit:focus-visible::after, .public-search-form .public-search-form__submit.is-frame-completing::before, .public-search-form .public-search-form__submit.is-frame-completing::after, .public-search-form .public-search-form__submit[aria-expanded=true]::before, .public-search-form .public-search-form__submit[aria-expanded=true]::after {
width: calc(50% + 1px);
}
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
.public-search-form .public-search-form__submit::before, .public-search-form .public-search-form__submit::after {
width: calc(50% + 1px);
}
}
.public-search-form .public-search-form__submit:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.public-search-form .public-search-form__submit::before, .public-search-form .public-search-form__submit::after {
transition: none;
}
}
.public-search-form .public-search-form__submit {
font-weight: var(--font-weight-medium);
color: var(--public-ink);
background: transparent;
font-size: var(--body-md-fs);
}
.public-search-form__submit-label {
color: inherit;
}
.public-search-form .public-search-form__clear:hover, .public-search-form .public-search-form__clear:focus-visible {
color: var(--public-blue);
outline: 0;
}
.public-search-form:focus-within .public-search-form__field {
border-color: var(--public-blue);
box-shadow: none;
}
.public-search-form--theme-dark .public-search-form__submit {
color: var(--public-white);
}
@media (max-width: 767px) {
.public-search-form {
gap: var(--public-search-gap);
}
}
@media (max-width: 359px) {
.public-search-form {
grid-template-columns: minmax(0, 1fr);
}
}
@media (prefers-reduced-transparency: reduce) {
.public-search-form__field {
transition: none;
}
}
.public-select {
display: grid;
gap: var(--public-space-xs);
min-width: 0;
}
.public-select__label {
color: var(--public-ink);
}
.public-select__native {
width: 100%;
min-height: var(--public-control-sm);
padding-inline: var(--public-space-xs);
color: var(--public-ink);
background: var(--public-white);
border: 1px solid var(--public-line-strong);
border-radius: 0;
}
.public-select--md .public-select__native, .public-select--md .public-select__trigger {
min-height: var(--public-control-md);
padding-inline: var(--public-space-md);
}
.public-select__control {
position: relative;
min-width: 0;
}
.public-select__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-xs);
width: 100%;
min-height: var(--public-control-sm);
padding-inline: var(--public-space-xs);
color: var(--public-ink);
background: var(--public-white);
border: 1px solid var(--public-line-strong);
border-radius: 0.2rem 1.2rem 0.2rem 0.2rem;
font-size: var(--body-sm-fs);
font-weight: var(--font-weight-medium);
line-height: var(--body-sm-lh);
text-align: left;
transition: color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease), border-color var(--public-duration) var(--public-ease);
}
.public-select__trigger:hover:not(:disabled), .public-select__trigger.cs-trigger--open, .public-select__trigger[aria-expanded=true] {
color: var(--public-white);
background: var(--public-navy-deep);
border-color: var(--public-navy-deep);
}
.public-select__trigger:focus-visible {
outline: var(--public-focus-width) solid var(--public-focus);
outline-offset: var(--public-focus-offset);
}
.public-select__trigger:disabled {
color: var(--public-muted);
background: var(--public-surface);
border-color: var(--public-line);
cursor: not-allowed;
}
.public-select__trigger--monochrome:hover:not(:disabled), .public-select__trigger--monochrome.cs-trigger--open, .public-select__trigger--monochrome[aria-expanded=true] {
color: var(--clr-base-white);
background: var(--clr-base-black);
border-color: var(--clr-base-black);
}
.public-select__trigger .cs-trigger__value {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.public-select__trigger .cs-trigger__arrow {
display: inline-flex;
flex: 0 0 auto;
transition: transform var(--public-duration) var(--public-ease);
}
.public-select__trigger.cs-trigger--open .cs-trigger__arrow, .public-select__trigger[aria-expanded=true] .cs-trigger__arrow {
transform: rotate(180deg);
}
.public-select__dropdown {
overflow: hidden;
color: var(--public-ink);
background: var(--public-white);
border: 1px solid var(--public-line-strong);
border-radius: 0;
box-shadow: 0 var(--public-space-xs) var(--public-space-xl) color-mix(in srgb, var(--public-navy-deep) 14%, transparent);
}
.public-select__dropdown .cs-list {
max-height: 28rem;
overflow-y: auto;
overscroll-behavior: contain;
}
.public-select__dropdown .cs-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-xs);
min-height: var(--public-control-sm);
padding-inline: var(--public-space-xs);
cursor: pointer;
transition: color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease);
}
.public-select__dropdown .cs-option + .cs-option {
border-top: 1px solid var(--public-line);
}
.public-select__dropdown .cs-option:hover,
.public-select__dropdown .cs-option--active {
color: var(--public-white);
background: var(--public-navy-deep);
}
.public-select__dropdown .cs-option--selected {
color: var(--public-navy-deep);
background: var(--public-surface-subtle);
}
.public-select__dropdown .cs-option--selected:hover,
.public-select__dropdown .cs-option--selected.cs-option--active {
color: var(--public-white);
background: var(--public-navy-deep);
}
.public-select__dropdown .cs-option--disabled {
color: var(--public-muted);
background: var(--public-surface);
cursor: not-allowed;
}
.public-select__dropdown .cs-dropdown__search {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--public-space-xs);
padding: var(--public-space-xs);
border-bottom: 1px solid var(--public-line);
}
.public-select__dropdown .cs-dropdown__search-input {
width: 100%;
min-height: var(--public-control-sm);
color: var(--public-ink);
background: var(--public-white);
border-bottom: 1px solid var(--public-line-strong);
}
.public-select__dropdown .cs-dropdown__search-input:focus {
border-bottom-color: var(--public-focus);
}
.public-select__dropdown--monochrome .cs-option:hover,
.public-select__dropdown--monochrome .cs-option--active,
.public-select__dropdown--monochrome .cs-option--selected:hover,
.public-select__dropdown--monochrome .cs-option--selected.cs-option--active {
color: var(--clr-base-white);
background: var(--clr-base-black);
}
.public-select__dropdown--monochrome .cs-option--selected {
color: var(--clr-base-white);
background: var(--clr-base-black);
}
.flatpickr-calendar {
background: transparent;
opacity: 0;
display: none;
text-align: center;
visibility: hidden;
padding: 0;
-webkit-animation: none;
animation: none;
direction: ltr;
border: 0;
font-size: 14px;
line-height: 24px;
border-radius: 5px;
position: absolute;
width: 307.875px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-touch-action: manipulation;
touch-action: manipulation;
background: #fff;
-webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
opacity: 1;
max-height: 640px;
visibility: visible;
}
.flatpickr-calendar.open {
display: inline-block;
z-index: 99999;
}
.flatpickr-calendar.animate.open {
-webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
display: block;
position: relative;
top: 2px;
}
.flatpickr-calendar.static {
position: absolute;
top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
z-index: 999;
display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
-webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
height: 40px;
border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
position: absolute;
display: block;
pointer-events: none;
border: solid transparent;
content: "";
height: 0;
width: 0;
left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
left: auto;
right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
left: 50%;
right: 50%;
}
.flatpickr-calendar:before {
border-width: 5px;
margin: 0 -5px;
}
.flatpickr-calendar:after {
border-width: 4px;
margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
border-top-color: #fff;
}
.flatpickr-calendar:focus {
outline: 0;
}
.flatpickr-wrapper {
position: relative;
display: inline-block;
}
.flatpickr-months {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flatpickr-months .flatpickr-month {
background: transparent;
color: rgba(0, 0, 0, 0.9);
fill: rgba(0, 0, 0, 0.9);
height: 34px;
line-height: 1;
text-align: center;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
cursor: pointer;
position: absolute;
top: 0;
height: 34px;
padding: 10px;
z-index: 3;
color: rgba(0, 0, 0, 0.9);
fill: rgba(0, 0, 0, 0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
/*rtl:begin:ignore*/
/*
*/
left: 0;
/*
/*rtl:end:ignore*/
/*
*/
}
/*
/*rtl:begin:ignore*/
/*
/*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
/*rtl:begin:ignore*/
/*
*/
right: 0;
/*
/*rtl:end:ignore*/
/*
*/
}
/*
/*rtl:begin:ignore*/
/*
/*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
width: 14px;
height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
-webkit-transition: fill 0.1s;
transition: fill 0.1s;
fill: inherit;
}
.numInputWrapper {
position: relative;
height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
display: inline-block;
}
.numInputWrapper input {
width: 100%;
}
.numInputWrapper input::-ms-clear {
display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.numInputWrapper span {
position: absolute;
right: 0;
width: 14px;
padding: 0 4px 0 2px;
height: 50%;
line-height: 50%;
opacity: 0;
cursor: pointer;
border: 1px solid rgba(57, 57, 57, 0.15);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.numInputWrapper span:hover {
background: rgba(0, 0, 0, 0.1);
}
.numInputWrapper span:active {
background: rgba(0, 0, 0, 0.2);
}
.numInputWrapper span:after {
display: block;
content: "";
position: absolute;
}
.numInputWrapper span.arrowUp {
top: 0;
border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid rgba(57, 57, 57, 0.6);
top: 26%;
}
.numInputWrapper span.arrowDown {
top: 50%;
}
.numInputWrapper span.arrowDown:after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgba(57, 57, 57, 0.6);
top: 40%;
}
.numInputWrapper span svg {
width: inherit;
height: auto;
}
.numInputWrapper span svg path {
fill: rgba(0, 0, 0, 0.5);
}
.numInputWrapper:hover {
background: rgba(0, 0, 0, 0.05);
}
.numInputWrapper:hover span {
opacity: 1;
}
.flatpickr-current-month {
font-size: 135%;
line-height: inherit;
font-weight: 300;
color: inherit;
position: absolute;
width: 75%;
left: 12.5%;
padding: 7.48px 0 0 0;
line-height: 1;
height: 34px;
display: inline-block;
text-align: center;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
font-family: inherit;
font-weight: 700;
color: inherit;
display: inline-block;
margin-left: 0.5ch;
padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
background: rgba(0, 0, 0, 0.05);
}
.flatpickr-current-month .numInputWrapper {
width: 6ch;
width: 7ch\0 ;
display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
border-bottom-color: rgba(0, 0, 0, 0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
border-top-color: rgba(0, 0, 0, 0.9);
}
.flatpickr-current-month input.cur-year {
background: transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
cursor: text;
padding: 0 0 0 0.5ch;
margin: 0;
display: inline-block;
font-size: inherit;
font-family: inherit;
font-weight: 300;
line-height: inherit;
height: auto;
border: 0;
border-radius: 0;
vertical-align: initial;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
font-size: 100%;
color: rgba(0, 0, 0, 0.5);
background: transparent;
pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
appearance: menulist;
background: transparent;
border: none;
border-radius: 0;
box-sizing: border-box;
color: inherit;
cursor: pointer;
font-size: inherit;
font-family: inherit;
font-weight: 300;
height: auto;
line-height: inherit;
margin: -1px 0 0 0;
outline: none;
padding: 0 0 0 0.5ch;
position: relative;
vertical-align: initial;
-webkit-box-sizing: border-box;
-webkit-appearance: menulist;
-moz-appearance: menulist;
width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
background: rgba(0, 0, 0, 0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
background-color: transparent;
outline: none;
padding: 0;
}
.flatpickr-weekdays {
background: transparent;
text-align: center;
overflow: hidden;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
span.flatpickr-weekday {
cursor: default;
font-size: 90%;
background: transparent;
color: rgba(0, 0, 0, 0.54);
line-height: 1;
margin: 0;
text-align: center;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
padding: 1px 0 0 0;
}
.flatpickr-days {
position: relative;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
width: 307.875px;
}
.flatpickr-days:focus {
outline: 0;
}
.dayContainer {
padding: 0;
outline: 0;
text-align: left;
width: 307.875px;
min-width: 307.875px;
max-width: 307.875px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-ms-flex-pack: justify;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
opacity: 1;
}
.dayContainer + .dayContainer {
-webkit-box-shadow: -1px 0 0 #e6e6e6;
box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
background: none;
border: 1px solid transparent;
border-radius: 150px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #393939;
cursor: pointer;
font-weight: 400;
width: 14.2857143%;
-webkit-flex-basis: 14.2857143%;
-ms-flex-preferred-size: 14.2857143%;
flex-basis: 14.2857143%;
max-width: 39px;
height: 39px;
line-height: 39px;
margin: 0;
display: inline-block;
position: relative;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
cursor: pointer;
outline: 0;
background: #e6e6e6;
border-color: #e6e6e6;
}
.flatpickr-day.today {
border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
border-color: #959ea9;
background: #959ea9;
color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
background: #569ff7;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
border-color: #569ff7;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
-webkit-box-shadow: -10px 0 0 #569ff7;
box-shadow: -10px 0 0 #569ff7;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
border-radius: 50px;
}
.flatpickr-day.inRange {
border-radius: 0;
-webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
color: rgba(57, 57, 57, 0.3);
background: transparent;
border-color: transparent;
cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
cursor: not-allowed;
color: rgba(57, 57, 57, 0.1);
}
.flatpickr-day.week.selected {
border-radius: 0;
-webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.flatpickr-day.hidden {
visibility: hidden;
}
.rangeMode .flatpickr-day {
margin-top: 1px;
}
.flatpickr-weekwrapper {
float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
padding: 0 12px;
-webkit-box-shadow: 1px 0 0 #e6e6e6;
box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
float: none;
width: 100%;
line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
display: block;
width: 100%;
max-width: none;
color: rgba(57, 57, 57, 0.3);
background: transparent;
cursor: default;
border: none;
}
.flatpickr-innerContainer {
display: block;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.flatpickr-rContainer {
display: inline-block;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flatpickr-time {
text-align: center;
outline: 0;
display: block;
height: 0;
line-height: 40px;
max-height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flatpickr-time:after {
content: "";
display: table;
clear: both;
}
.flatpickr-time .numInputWrapper {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 40%;
height: 40px;
float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
width: 49%;
}
.flatpickr-time input {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
border-radius: 0;
text-align: center;
margin: 0;
padding: 0;
height: inherit;
line-height: inherit;
color: #393939;
font-size: 14px;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
font-weight: 400;
}
.flatpickr-time input:focus {
outline: 0;
border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
height: inherit;
float: left;
line-height: inherit;
color: #393939;
font-weight: bold;
width: 2%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
outline: 0;
width: 18%;
cursor: pointer;
text-align: center;
font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
background: #eee;
}
.flatpickr-input[readonly] {
cursor: pointer;
}
@-webkit-keyframes fpFadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fpFadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.public-date-picker {
display: grid;
gap: var(--public-space-xs);
min-width: 0;
color: var(--public-ink);
}
.public-date-picker__label {
color: var(--public-muted);
}
.public-date-picker__control {
position: relative;
display: block;
min-width: 0;
}
.public-date-picker__input {
appearance: none;
width: 100%;
min-height: var(--public-control-md);
padding-inline: var(--public-space-md) calc(var(--public-space-md) + var(--public-control-sm));
color: var(--public-ink);
background: var(--public-white);
border: 1px solid var(--public-line);
border-radius: 0.2rem 1.2rem 0.2rem 0.2rem;
transition: border-color var(--public-duration) var(--public-ease), box-shadow var(--public-duration) var(--public-ease);
}
.public-date-picker__input:hover:not(:disabled), .public-date-picker__input:focus-visible, .public-date-picker__input.active {
border-color: var(--public-ink);
box-shadow: 0 0 0 1px var(--public-ink);
outline: 0;
}
.public-date-picker__input:disabled {
color: var(--public-muted);
background: var(--public-surface-subtle);
cursor: not-allowed;
}
.public-date-picker__icon {
position: absolute;
top: 50%;
right: var(--public-space-md);
display: inline-grid;
width: var(--public-control-sm);
height: var(--public-control-sm);
place-items: center;
color: var(--public-ink);
pointer-events: none;
transform: translateY(-50%);
}
.flatpickr-calendar.public-date-picker__calendar {
color: var(--public-ink);
background: var(--public-white);
border: 1px solid var(--public-line-strong);
border-radius: 0;
box-shadow: 0 var(--public-space-xs) var(--public-space-xl) color-mix(in srgb, var(--public-ink) 14%, transparent);
font-family: var(--font-sans-family);
}
.flatpickr-calendar.public-date-picker__calendar .flatpickr-months,
.flatpickr-calendar.public-date-picker__calendar .flatpickr-weekdays {
color: var(--public-ink);
background: var(--public-white);
}
.flatpickr-calendar.public-date-picker__calendar .flatpickr-day {
color: var(--public-ink);
border-radius: 50%;
}
.flatpickr-calendar.public-date-picker__calendar .flatpickr-day:not(.flatpickr-disabled):hover,
.flatpickr-calendar.public-date-picker__calendar .flatpickr-day:not(.flatpickr-disabled):focus,
.flatpickr-calendar.public-date-picker__calendar .flatpickr-day.today:not(.flatpickr-disabled) {
color: var(--public-ink);
background: var(--public-surface-subtle);
border-color: var(--public-ink);
}
.flatpickr-calendar.public-date-picker__calendar .flatpickr-day.selected,
.flatpickr-calendar.public-date-picker__calendar .flatpickr-day.selected:hover,
.flatpickr-calendar.public-date-picker__calendar .flatpickr-day.selected:focus {
color: var(--public-white);
background: var(--public-ink);
border-color: var(--public-ink);
}
.flatpickr-calendar.public-date-picker__calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.public-date-picker__calendar .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-calendar.public-date-picker__calendar .flatpickr-day.flatpickr-disabled:focus {
color: var(--public-muted);
background: var(--public-surface);
border-color: transparent;
cursor: not-allowed;
opacity: 0.48;
}
.flatpickr-calendar.public-date-picker__calendar[data-disabled-dates-loading=true] .dayContainer {
pointer-events: none;
opacity: 0.48;
}
.public-async-directory-loader,
.public-async-directory-error {
position: fixed;
z-index: var(--public-z-async-directory);
inset: 0;
place-items: center;
padding: var(--spacing-xl);
background: color-mix(in srgb, var(--public-white) 86%, transparent);
backdrop-filter: blur(0.4rem);
}
.public-async-directory-loader:not([hidden]),
.public-async-directory-error:not([hidden]) {
display: grid;
}
.public-async-directory-loader[hidden],
.public-async-directory-error[hidden] {
display: none;
}
.public-async-directory-loader {
align-content: center;
gap: var(--spacing-md);
color: var(--public-navy);
text-align: center;
}
.public-async-directory-loader__spinner {
width: 3.6rem;
height: 3.6rem;
border: 0.3rem solid var(--public-blue-soft);
border-top-color: var(--public-blue);
border-radius: 50%;
animation: public-async-directory-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.public-async-directory-loader__spinner {
animation: none;
}
}
.public-async-directory-error__card {
display: grid;
justify-items: center;
gap: var(--spacing-lg);
width: min(42rem, 100%);
padding: var(--spacing-xl);
color: var(--public-navy);
border: 1px solid var(--public-line);
background: var(--public-white);
text-align: center;
}
.public-async-directory-error__retry {
min-height: var(--public-control-sm);
padding-inline: var(--spacing-lg);
color: var(--public-white);
border: 0;
background: var(--public-navy);
cursor: pointer;
}
@keyframes public-async-directory-spin {
to {
transform: rotate(1turn);
}
}
.public-page-hero {
position: relative;
width: 100%;
margin: 0;
background: var(--public-white);
isolation: isolate;
}
.public-page-hero__stage {
position: relative;
width: 100%;
height: 100svh;
min-height: 100svh;
margin: 0;
overflow: clip;
background: var(--public-white);
}
.public-page-hero__copy {
position: absolute;
z-index: 2;
inset: 0;
display: grid;
grid-template-columns: minmax(10rem, 1fr) auto minmax(18rem, 1fr);
column-gap: clamp(1.6rem, 3vw, 6rem);
align-items: center;
width: 100%;
max-width: none;
min-height: 100%;
margin: 0;
padding: calc(var(--public-header-height) + var(--public-space-2xl)) var(--public-header-gutter) var(--public-space-2xl);
text-align: left;
pointer-events: none;
}
.public-page-hero__title {
justify-self: center;
margin: 0;
color: var(--public-white);
white-space: nowrap;
}
.public-page-hero__description {
justify-self: end;
max-width: clamp(18rem, 18vw, 32rem);
margin: 0;
color: rgba(255, 255, 255, 0.92);
}
.public-page-hero__copy .public-kicker {
justify-self: start;
color: var(--public-white);
text-transform: none;
}
.public-page-hero__media {
position: absolute;
z-index: 1;
inset: 0;
margin: 0;
overflow: hidden;
border-radius: 0;
background: var(--public-navy-deep);
contain: paint;
backface-visibility: hidden;
transform: translateZ(0);
transform-origin: center top;
}
.public-page-hero__shade {
position: absolute;
inset: 0;
background: var(--public-navy-deep);
opacity: 0.52;
pointer-events: none;
}
.public-page-hero__scroll-cue {
position: absolute;
right: var(--public-header-gutter);
bottom: var(--public-space-2xl);
z-index: 3;
display: grid;
place-items: center;
width: clamp(6.4rem, 6vw, 8.7rem);
aspect-ratio: 1;
opacity: 1;
pointer-events: none;
transform: translateZ(0);
}
.public-page-hero__scroll-label, .public-page-hero__scroll-arrow {
display: block;
grid-area: 1/1;
width: 100%;
height: 100%;
object-fit: contain;
user-select: none;
}
.public-page-hero__scroll-label {
animation: public-page-hero-scroll-spin 12s linear infinite;
}
.public-page-hero__scroll-arrow {
width: 55.2%;
height: 55.2%;
}
.public-page-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
backface-visibility: hidden;
transform: translateZ(0) scale(1.2);
transform-origin: center center;
}
.public-page-hero.is-interactive .public-page-hero__copy, .public-page-hero.is-interactive .public-page-hero__media img {
will-change: transform;
}
.public-page-hero.is-interactive .public-page-hero__media {
will-change: clip-path, left, width;
}
.public-page-hero.is-interactive .public-page-hero__shade {
will-change: opacity;
}
.public-page-hero.is-interactive .public-page-hero__scroll-cue {
will-change: opacity;
}
@media (max-width: 767px) {
.public-page-hero__stage {
height: max(64rem, 100svh);
min-height: 100svh;
overflow: clip;
}
.public-page-hero__copy {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100%;
padding: calc(var(--public-header-height) + var(--public-space-xl)) var(--public-space-md) var(--public-space-2xl);
text-align: center;
}
.public-page-hero__title {
justify-self: auto;
margin-top: var(--public-space-sm);
white-space: normal;
}
.public-page-hero__description {
justify-self: auto;
max-width: 72rem;
margin-top: var(--public-space-sm);
}
.public-page-hero__media {
position: absolute;
inset: 0;
width: auto;
height: auto;
border-radius: 0;
}
.public-page-hero__media img {
transform: none;
}
.public-page-hero__scroll-cue {
right: var(--public-space-md);
bottom: var(--public-space-xl);
width: clamp(5.6rem, 18vw, 7.2rem);
}
.public-page-hero {
padding-top: var(--public-header-height);
}
.public-page-hero__copy {
padding-block: 5rem 4rem;
}
}
@media (prefers-reduced-motion: reduce) {
.public-page-hero__scroll-label {
animation: none;
}
}
@keyframes public-page-hero-scroll-spin {
to {
transform: rotate(360deg);
}
}
.public-simple-subhero {
padding-top: calc(var(--public-header-height, 8.8rem) + var(--public-space-2xl));
padding-bottom: var(--public-space-2xl);
background: var(--public-white);
border-bottom: 1px solid var(--public-line);
}
.public-simple-subhero__title {
margin: 0;
color: var(--public-ink);
letter-spacing: 0;
}
@media (max-width: 544px) {
.public-simple-subhero {
padding-top: calc(var(--public-header-height, 8.8rem) + var(--public-space-xl));
padding-bottom: var(--public-space-xl);
}
}
.public-professional-card--search-result .public-professional-card__photo {
height: 35rem;
background: #f4f5f7;
}
.public-professional-card--search-result .public-professional-card__body {
padding-top: 1.8rem;
}
.public-professional-card--search-result .public-professional-card__identity {
display: flex;
align-items: baseline;
gap: 0.9rem;
}
.public-professional-card--search-result .public-professional-card__name {
flex: 0 0 auto;
}
.public-professional-card--search-result .public-professional-card__role {
overflow: hidden;
color: #6f777d;
text-overflow: ellipsis;
white-space: nowrap;
}
.public-professional-card--search-result .public-professional-card__area {
margin-top: 1.3rem;
color: var(--public-navy);
}
.public-professional-card--search-result .public-professional-card__arrow {
display: none;
}
.public-professional-card {
min-width: 0;
}
.public-professional-card[id] {
scroll-margin-top: calc(var(--public-header-height) + var(--public-space-lg));
}
.public-professional-card__link {
position: relative;
display: block;
color: var(--public-ink);
text-decoration: none;
}
.public-professional-card__photo {
display: grid;
place-items: center;
aspect-ratio: 4/5;
overflow: hidden;
background: linear-gradient(145deg, var(--public-blue-soft), var(--public-surface));
}
.public-professional-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.public-professional-card__photo span {
color: var(--public-blue);
}
.public-professional-card__photo .public-professional-card__fallback {
width: 100%;
height: 100%;
background-image: url("/assets/images/professional/fallback-portraits.png");
background-repeat: no-repeat;
background-size: 600% 400%;
}
.public-professional-card__fallback--0 {
background-position: 0 0;
}
.public-professional-card__fallback--1 {
background-position: 20% 0;
}
.public-professional-card__fallback--2 {
background-position: 40% 0;
}
.public-professional-card__fallback--3 {
background-position: 60% 0;
}
.public-professional-card__fallback--4 {
background-position: 80% 0;
}
.public-professional-card__fallback--5 {
background-position: 100% 0;
}
.public-professional-card__fallback--6 {
background-position: 0 33.333%;
}
.public-professional-card__fallback--7 {
background-position: 20% 33.333%;
}
.public-professional-card__fallback--8 {
background-position: 40% 33.333%;
}
.public-professional-card__fallback--9 {
background-position: 60% 33.333%;
}
.public-professional-card__fallback--10 {
background-position: 80% 33.333%;
}
.public-professional-card__fallback--11 {
background-position: 100% 33.333%;
}
.public-professional-card__fallback--12 {
background-position: 0 66.666%;
}
.public-professional-card__fallback--13 {
background-position: 20% 66.666%;
}
.public-professional-card__fallback--14 {
background-position: 40% 66.666%;
}
.public-professional-card__fallback--15 {
background-position: 60% 66.666%;
}
.public-professional-card__fallback--16 {
background-position: 80% 66.666%;
}
.public-professional-card__fallback--17 {
background-position: 100% 66.666%;
}
.public-professional-card__fallback--18 {
background-position: 0 100%;
}
.public-professional-card__fallback--19 {
background-position: 20% 100%;
}
.public-professional-card__fallback--20 {
background-position: 40% 100%;
}
.public-professional-card__fallback--21 {
background-position: 60% 100%;
}
.public-professional-card__fallback--22 {
background-position: 80% 100%;
}
.public-professional-card__fallback--23 {
background-position: 100% 100%;
}
.public-professional-card__body {
position: relative;
padding: 2.4rem 4rem 0 0;
}
.public-professional-card__identity {
display: grid;
min-width: 0;
gap: var(--public-space-2xs);
}
.public-professional-card__role {
margin: 0;
color: var(--public-blue);
text-transform: uppercase;
overflow-wrap: anywhere;
}
.public-professional-card__name {
margin: 0;
}
.public-professional-card__area {
margin-top: 1rem;
color: var(--public-muted);
}
.public-professional-card__profile {
display: grid;
width: 100%;
gap: var(--public-space-lg);
margin-top: var(--public-space-xl);
padding-top: var(--public-space-lg);
border-top: 1px solid var(--public-line);
}
.public-professional-card__profile-intro {
margin: 0;
color: var(--public-muted);
}
.public-professional-card__profile-section {
display: grid;
gap: var(--public-space-sm);
}
.public-professional-card__profile-section + .public-professional-card__profile-section {
padding-top: var(--public-space-lg);
border-top: 1px solid var(--public-line);
}
.public-professional-card__profile-section h3, .public-professional-card__profile-section h4, .public-professional-card__profile-section h5 {
margin: 0;
color: var(--public-ink);
}
.public-professional-card__profile-list {
display: grid;
gap: var(--public-space-xs);
margin: 0;
padding: 0;
color: var(--public-muted);
list-style: none;
}
.public-professional-card__profile-list li {
position: relative;
padding-left: var(--public-space-sm);
}
.public-professional-card__profile-list li::before {
content: "";
position: absolute;
top: 0.72em;
left: 0;
width: 0.3rem;
height: 0.3rem;
border-radius: 50%;
background: currentColor;
}
.public-professional-card__profile-prose {
color: var(--public-muted);
}
.public-professional-card__profile-prose > :first-child {
margin-top: 0;
}
.public-professional-card__profile-prose > :last-child {
margin-bottom: 0;
}
.public-professional-card__profile-prose ul, .public-professional-card__profile-prose ol {
display: grid;
gap: var(--public-space-xs);
margin-block: 0;
padding-left: var(--public-space-lg);
}
.public-professional-card__arrow {
position: absolute;
top: 2.8rem;
right: 0;
font-size: var(--body-lg-fs);
}
.public-professional-card--compact .public-professional-card__photo {
aspect-ratio: 22/25;
}
.public-professional-card--compact .public-professional-card__body {
padding: 2rem 0 0;
}
.public-professional-card--compact .public-professional-card__role, .public-professional-card--compact .public-professional-card__area, .public-professional-card--compact .public-professional-card__arrow {
display: none;
}
.public-professional-card--compact .public-professional-card__name {
margin: 0;
}
.public-professional-card--directory .public-professional-card__photo {
aspect-ratio: auto;
height: 35rem;
border-radius: 0.7rem;
}
.public-professional-card--directory .public-professional-card__body {
min-height: 15rem;
padding: 2rem 0 0;
}
.public-professional-card--directory .public-professional-card__role {
color: #747e85;
text-transform: none;
}
.public-professional-card--directory .public-professional-card__area {
margin: 1.4rem 0 0;
color: #747e85;
}
.public-professional-card--directory .public-professional-card__contact {
margin-top: 1.2rem;
}
.public-professional-card--directory .public-professional-card__contact p {
display: flex;
gap: var(--public-space-2xs);
min-width: 0;
margin: 0.5rem 0 0;
color: #747e85;
}
.public-professional-card--directory .public-professional-card__contact b {
display: inline-block;
flex: 0 0 2rem;
color: #1688bb;
}
.public-professional-card--directory .public-professional-card__contact span {
min-width: 0;
overflow-wrap: anywhere;
}
.public-professional-card--directory .public-professional-card__arrow {
display: none;
}
.public-professional-card--directory .public-professional-card__link.is-static {
cursor: default;
}
.public-professional-card--editorial .public-professional-card__photo {
aspect-ratio: 4/5;
background: var(--public-surface);
}
.public-professional-card--editorial .public-professional-card__body {
padding: var(--public-space-lg) 0 0;
}
.public-professional-card--editorial .public-professional-card__role {
color: var(--public-blue);
text-transform: none;
}
.public-professional-card--editorial .public-professional-card__area {
margin-top: var(--public-space-xs);
color: var(--public-muted);
}
.public-professional-card--editorial .public-professional-card__arrow {
display: none;
}
.public-professional-card--featured {
display: block;
background: transparent;
}
.public-professional-card--featured .public-professional-card__link {
display: block;
min-height: 0;
}
.public-professional-card--featured .public-professional-card__hero {
display: grid;
grid-template-columns: 12.5% 25% minmax(0, 1fr);
align-items: start;
gap: 6.25%;
}
.public-professional-card--featured .public-professional-card__featured-label {
margin: 0;
color: var(--public-muted);
}
.public-professional-card--featured .public-professional-card__photo {
align-self: start;
aspect-ratio: 4/5;
background: var(--public-surface);
}
.public-professional-card--featured .public-professional-card__photo img {
object-position: center top;
}
.public-professional-card--featured .public-professional-card__body {
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: flex-start;
min-height: 0;
padding: 0;
background: transparent;
}
.public-professional-card--featured .public-professional-card__identity {
gap: var(--public-space-sm);
}
.public-professional-card--featured .public-professional-card__name {
color: var(--public-ink);
}
.public-professional-card--featured .public-professional-card__role {
color: var(--clr-accent-500);
text-transform: none;
}
.public-professional-card--featured .public-professional-card__specialties {
display: flex;
flex-wrap: wrap;
gap: var(--public-space-xs);
margin-top: var(--public-space-md);
}
.public-professional-card--featured .public-professional-card__specialty {
padding: var(--public-space-2xs) var(--public-space-sm);
border: 1px solid var(--public-line);
color: var(--public-muted);
background: var(--public-white);
}
.public-professional-card--featured .public-professional-card__body > .public-professional-card__profile-prose {
max-width: 64rem;
margin-top: var(--spacing-xl);
color: var(--public-ink);
}
.public-professional-card--featured .public-professional-card__body > .public-professional-card__profile-prose p {
margin: 0;
}
.public-professional-card--featured .public-professional-card__body > .public-professional-card__profile-prose p + p {
margin-top: var(--spacing-lg);
}
.public-professional-card--featured .public-professional-card__profile {
display: block;
width: 81.25%;
margin: var(--spacing-2xl) 0 0 auto;
padding: 0;
border-top: 0;
background: transparent;
}
.public-professional-card--featured .public-professional-card__profile-intro, .public-professional-card--featured .public-professional-card__profile > .public-professional-card__profile-prose {
margin-bottom: var(--spacing-3xl);
}
.public-professional-card--featured .public-professional-card__accordion-item {
border-top: 1px solid var(--public-line);
background: transparent;
}
.public-professional-card--featured .public-professional-card__accordion-item:last-child {
border-bottom: 1px solid var(--public-line);
}
.public-professional-card--featured .public-professional-card__accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 4.8rem;
gap: var(--public-space-sm);
padding: var(--spacing-md);
color: var(--public-ink);
cursor: pointer;
list-style: none;
}
.public-professional-card--featured .public-professional-card__accordion-trigger::-webkit-details-marker {
display: none;
}
.public-professional-card--featured .public-professional-card__accordion-trigger::marker {
content: "";
}
.public-professional-card--featured .public-professional-card__accordion-trigger:focus-visible {
outline: 2px solid var(--clr-accent-500);
outline-offset: var(--public-space-2xs);
}
.public-professional-card--featured .public-professional-card__accordion-item[open] .public-professional-card__accordion-title {
color: var(--clr-accent-500);
}
.public-professional-card--featured .public-professional-card__accordion-icon {
position: relative;
flex: 0 0 1.8rem;
width: 1.8rem;
height: 1.8rem;
}
.public-professional-card--featured .public-professional-card__accordion-icon::before, .public-professional-card--featured .public-professional-card__accordion-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1.4rem;
height: 0.2rem;
background: currentColor;
transform: translate(-50%, -50%);
transition: transform var(--public-duration-fast) var(--public-ease-standard);
}
.public-professional-card--featured .public-professional-card__accordion-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.public-professional-card--featured .public-professional-card__accordion-item[open] .public-professional-card__accordion-icon {
color: var(--clr-accent-500);
}
.public-professional-card--featured .public-professional-card__accordion-item[open] .public-professional-card__accordion-icon::after {
transform: translate(-50%, -50%) rotate(0);
}
.public-professional-card--featured .public-professional-card__accordion-panel {
padding: var(--spacing-xs) var(--spacing-md) var(--spacing-lg);
}
.public-professional-card--featured .public-professional-card__arrow {
display: none;
}
@media (max-width: 991px) {
.public-professional-card--featured .public-professional-card__hero {
grid-template-columns: 12% 27% minmax(0, 1fr);
gap: 4%;
}
.public-professional-card--featured .public-professional-card__profile {
width: 84%;
}
}
@media (max-width: 767px) {
.public-professional-card--featured .public-professional-card__hero {
grid-template-columns: 1fr;
gap: var(--spacing-2xl);
}
.public-professional-card--featured .public-professional-card__photo {
aspect-ratio: 4/5;
}
.public-professional-card--featured .public-professional-card__body {
min-height: 0;
}
.public-professional-card--featured .public-professional-card__profile {
width: 100%;
margin-top: var(--spacing-xl);
padding: 0;
}
.public-professional-card--featured .public-professional-card__accordion-trigger {
min-height: 4.8rem;
padding: var(--spacing-md);
}
.public-professional-card--featured .public-professional-card__accordion-panel {
padding: var(--spacing-xs) var(--spacing-md) var(--spacing-lg);
}
.public-professional-card--featured .public-professional-card__name {
font-size: var(--heading-lg-fs);
}
.public-professional-card--search-result .public-professional-card__identity {
display: block;
}
.public-professional-card--search-result .public-professional-card__role {
margin-top: 0.5rem;
}
}
@media (max-width: 1024px) {
.public-professional-card--search-result .public-professional-card__photo {
height: auto;
aspect-ratio: 0.89;
}
}
.public-cart-action {
position: relative;
isolation: isolate;
border: 0;
background: transparent;
border-radius: var(--public-action-radius);
text-decoration: none;
}
.public-cart-action::before, .public-cart-action::after {
position: absolute;
inset-block: 0;
box-sizing: border-box;
width: var(--public-action-end-width);
border: 1px solid currentColor;
content: "";
pointer-events: none;
transition: width var(--public-action-duration) var(--public-ease);
}
.public-cart-action::before {
inset-inline-start: 0;
border-inline-end: 0;
border-radius: var(--public-action-radius) 0 0 var(--public-action-radius);
}
.public-cart-action::after {
inset-inline-end: 0;
border-inline-start: 0;
border-radius: 0 var(--public-action-radius) var(--public-action-radius) 0;
}
.public-cart-action:hover::before, .public-cart-action:hover::after, .public-cart-action:focus-visible::before, .public-cart-action:focus-visible::after, .public-cart-action.is-frame-completing::before, .public-cart-action.is-frame-completing::after, .public-cart-action[aria-expanded=true]::before, .public-cart-action[aria-expanded=true]::after {
width: calc(50% + 1px);
}
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
.public-cart-action::before, .public-cart-action::after {
width: calc(50% + 1px);
}
}
.public-cart-action:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.public-cart-action::before, .public-cart-action::after {
transition: none;
}
}
.public-cart-action {
display: inline-grid;
width: var(--public-check-size);
height: var(--public-check-size);
padding: 0;
place-items: center;
flex: 0 0 var(--public-check-size);
background: transparent;
color: var(--public-ink);
cursor: pointer;
text-decoration: none;
transition: color var(--public-duration) var(--public-ease);
}
.public-cart-action i {
display: block;
font-size: var(--public-icon-sm);
line-height: 1;
}
.public-cart-action:hover, .public-cart-action.is-hover-preview {
color: var(--public-blue);
}
.public-cart-action:focus-visible, .public-cart-action.is-focus-preview {
color: var(--public-ink);
outline: var(--public-focus-width) solid var(--public-focus);
outline-offset: var(--public-focus-offset);
}
.public-cart-action[aria-busy=true], .public-cart-action.is-loading-preview, .public-cart-action:disabled, .public-cart-action[aria-disabled=true], .public-cart-action.is-disabled-preview {
color: var(--public-ink-muted);
cursor: wait;
opacity: 0.64;
}
.public-cart-action:disabled, .public-cart-action[aria-disabled=true], .public-cart-action.is-disabled-preview {
cursor: not-allowed;
}
.public-cart-action.is-added-preview {
color: var(--public-ink);
}
@media (prefers-reduced-motion: reduce) {
.public-cart-action {
transition: none;
}
}
.public-treatment-card {
min-height: 100%;
color: var(--public-ink);
background: var(--public-surface);
border: 0;
border-radius: 0;
}
.public-treatment-card--default, .public-treatment-card--event, .public-treatment-card--dark {
display: flex;
flex-direction: column;
}
.public-treatment-card--default .public-treatment-card__body, .public-treatment-card--event .public-treatment-card__body, .public-treatment-card--dark .public-treatment-card__body {
flex: 1 1 auto;
}
.public-treatment-card__media {
display: block;
aspect-ratio: 16/9;
overflow: hidden;
background: var(--public-surface);
}
.public-treatment-card__media img {
width: 100%;
}
.public-treatment-card__body {
display: flex;
min-width: 0;
min-height: 30rem;
flex-direction: column;
padding: var(--public-space-md);
}
@media (max-width: 1024px) {
.public-treatment-card__body {
min-height: 25rem;
}
}
@media (max-width: 768px) {
.public-treatment-card__body {
min-height: 20rem;
}
}
.public-treatment-card__top {
display: flex;
min-width: 0;
align-items: center;
gap: var(--public-space-xs);
min-height: 2.2rem;
}
.public-treatment-card__badge {
display: inline-flex;
align-items: center;
min-height: 2.2rem;
padding-inline: var(--public-space-xs);
color: var(--public-white);
background: var(--public-blue);
}
.public-treatment-card__check-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: var(--public-check-size);
height: var(--public-check-size);
cursor: pointer;
}
.public-treatment-card__check-input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
padding: 0;
}
.public-treatment-card__check {
display: grid;
width: var(--public-check-size);
height: var(--public-check-size);
place-items: center;
color: var(--public-white);
background: var(--public-blue);
border-radius: 0;
border: 1px solid transparent;
transition: background var(--public-duration) var(--public-ease), color var(--public-duration) var(--public-ease), border-color var(--public-duration) var(--public-ease), box-shadow var(--public-duration) var(--public-ease);
}
.public-treatment-card__check-wrapper:hover .public-treatment-card__check, .public-treatment-card__check-wrapper:focus-within .public-treatment-card__check {
border-color: var(--public-blue);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--public-blue) 15%, transparent);
}
.public-treatment-card__check::after {
content: "✓";
font-size: var(--body-xs-fs);
font-weight: var(--font-weight-medium);
line-height: 1;
}
.public-treatment-card__check-input:focus-visible + .public-treatment-card__check, .public-treatment-card__check-input:focus + .public-treatment-card__check {
outline: 2px solid var(--public-focus);
outline-offset: 1px;
}
.public-treatment-card:not(.is-selected) .public-treatment-card__check, .public-treatment-card--cart .public-treatment-card__check {
color: transparent;
background: var(--public-white);
border: 1px solid var(--public-line);
}
.public-treatment-card--cart .public-treatment-card__check-input:checked + .public-treatment-card__check, .public-treatment-card__check-input:checked + .public-treatment-card__check {
color: var(--public-white);
background: var(--public-blue);
border-color: var(--public-blue);
}
.public-treatment-card__title {
min-width: 0;
margin-top: var(--public-space-sm);
color: inherit;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.public-treatment-card__title a {
color: inherit;
}
.public-treatment-card__desc {
min-width: 0;
margin-top: var(--public-space-xs);
color: var(--public-muted);
}
.public-treatment-card__price {
display: grid;
min-width: 0;
grid-template-columns: max-content max-content minmax(0, 1fr);
align-items: baseline;
gap: 0.8rem;
margin-top: auto;
padding-top: var(--public-space-md);
}
.public-treatment-card__footer {
display: flex;
min-width: 0;
align-items: flex-end;
justify-content: space-between;
gap: var(--public-space-md);
margin-top: auto;
padding-top: var(--public-space-md);
}
.public-treatment-card__footer .public-treatment-card__price {
flex: 1 1 auto;
margin-top: 0;
padding-top: 0;
}
.public-treatment-card__vat {
grid-column: 1;
}
.public-treatment-card__price del {
grid-column: 2/-1;
}
.public-treatment-card__discount {
grid-column: 1;
grid-row: 2;
}
.public-treatment-card__amount {
grid-column: 2/-1;
grid-row: 2;
}
.public-treatment-card__vat, .public-treatment-card__price del {
color: var(--public-muted);
}
.public-treatment-card__discount {
color: var(--public-blue);
}
.public-treatment-card__amount {
color: inherit;
}
.public-treatment-card--event .public-treatment-card__amount, .public-treatment-card--dark .public-treatment-card__amount {
grid-column: 1/-1;
grid-row: auto;
}
.public-treatment-card__cta {
display: inline-flex;
align-items: center;
align-self: flex-end;
margin-top: auto;
color: inherit;
}
.public-treatment-card__cta--more .public-button__icon {
display: none;
}
.public-treatment-card__footer .public-treatment-card__cta {
flex: 0 0 auto;
align-self: flex-end;
margin-top: 0;
}
.public-treatment-card__footer > form {
flex: 0 0 auto;
align-self: flex-end;
}
.public-treatment-card__cta--selection {
min-width: 10.4rem;
min-height: var(--public-control-md);
justify-content: center;
padding-inline: var(--public-space-md);
color: var(--public-white);
background: var(--public-navy-deep);
border: 1px solid var(--public-navy-deep);
cursor: pointer;
transition: color var(--public-duration) var(--public-ease), background-color var(--public-duration) var(--public-ease), border-color var(--public-duration) var(--public-ease);
}
.public-treatment-card__cta--selection:hover, .public-treatment-card__cta--selection:focus-visible {
color: var(--public-white);
background: var(--public-blue);
border-color: var(--public-blue);
}
.public-treatment-card__cta--selection[aria-busy=true] {
gap: var(--public-space-2xs);
cursor: progress;
opacity: 0.76;
}
.public-treatment-card__cta--selection[aria-busy=true]::after {
content: "";
width: var(--public-space-sm);
height: var(--public-space-sm);
border: 1px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: public-button-spin var(--dur-slow) linear infinite;
}
.public-treatment-card--event .public-treatment-card__body {
min-height: 25rem;
}
.public-treatment-card--dark {
color: var(--public-white);
background: var(--public-white);
}
.public-treatment-card--dark .public-treatment-card__body {
color: var(--public-ink);
}
.public-treatment-card--media .public-treatment-card__body {
min-height: 11rem;
padding-inline: 0;
}
.public-treatment-card--media .public-treatment-card__media {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 56.25%;
}
.public-treatment-card--media .public-treatment-card__media img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
object-fit: cover;
}
.public-treatment-card--media {
border-color: transparent;
background: var(--public-white);
}
.public-treatment-card--full-link {
display: block;
color: var(--public-ink);
text-decoration: none;
}
.public-treatment-card--full-link:hover {
color: var(--public-ink);
}
.public-treatment-card--full-link:focus-visible {
outline: 2px solid var(--public-focus);
outline-offset: 2px;
}
.public-treatment-card--cart {
border: 0;
margin-inline: 0;
background: var(--public-white);
}
.public-treatment-card--cart .public-treatment-card__body {
min-height: 0;
padding: 0;
}
.public-treatment-card--cart .public-treatment-card__top {
min-height: 0;
}
.public-treatment-card--cart .public-treatment-card__badge {
min-height: 0;
padding-inline: 0;
color: var(--public-blue);
background: transparent;
}
.public-treatment-card--cart .public-treatment-card__body .public-treatment-card__price {
margin-top: auto;
padding-top: 0;
}
.public-treatment-card--cart .public-treatment-card__title {
margin-top: var(--public-space-md);
}
.public-treatment-card--cart .public-treatment-card__price {
gap: var(--public-space-2xs);
}
.public-treatment-card--cart .public-treatment-card__desc {
max-width: 76rem;
margin-top: var(--public-space-xs);
}
.public-treatment-card--guide-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
min-height: 16rem;
color: var(--public-ink);
background: var(--public-surface);
border: 0;
text-decoration: none;
}
.public-treatment-card__body--guide-list {
display: grid;
min-height: 16rem;
}
.public-treatment-card__guide-copy {
min-width: 0;
}
.public-treatment-card__guide-label {
display: block;
color: var(--public-blue);
}
.public-treatment-card__guide-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-md);
margin-bottom: var(--public-space-xs);
}
.public-treatment-card__guide-meta .public-treatment-card__deadline {
color: var(--public-blue);
}
.public-treatment-card__guide-title {
margin: 0;
color: inherit;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.public-treatment-card__guide-desc, .public-treatment-card__guide-summary {
max-width: 52rem;
margin: 0;
color: var(--public-muted);
}
.public-treatment-card__guide-desc.no-mg-md--t {
margin-top: var(--public-space-xs);
}
.public-treatment-card__guide-summary {
color: var(--public-muted-soft);
}
.public-treatment-card__guide-footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--public-space-md);
margin-top: auto;
}
.public-treatment-card__guide-footer.no-pd-lg--t {
padding-top: var(--public-space-sm);
}
.public-treatment-card__guide-price {
color: var(--public-ink);
}
.public-treatment-card__guide-pricing {
display: flex;
min-width: 0;
flex-direction: column;
align-items: flex-start;
gap: var(--public-space-2xs);
}
.public-treatment-card__guide-price-line {
display: inline-flex;
min-width: 0;
align-items: baseline;
gap: var(--public-space-2xs);
white-space: nowrap;
}
.public-treatment-card__guide-vat, .public-treatment-card__guide-regular {
color: var(--public-muted);
}
.public-treatment-card__guide-discount {
color: var(--public-blue);
}
.public-treatment-card__guide-footer form {
flex: 0 0 auto;
margin-inline-start: auto;
}
.public-treatment-card__guide-link {
display: inline-flex;
padding-bottom: var(--public-space-xs);
color: var(--public-ink);
background: transparent;
border-bottom: 1px solid currentColor;
}
.public-treatment-card__guide-link-label {
display: inline-flex;
align-items: center;
}
.public-treatment-card__guide-link-icon {
display: none;
align-items: center;
justify-content: center;
}
.public-treatment-card__guide-link-icon i {
font-size: var(--public-icon-sm);
line-height: 1;
}
.public-treatment-card__guide-link:hover, .public-treatment-card__guide-link:focus-visible {
color: var(--public-ink);
}
.public-treatment-card__guide-link--cart {
min-height: var(--public-control-sm);
padding: 0 var(--public-space-sm);
color: var(--public-white);
background: var(--public-navy-deep);
border: 1px solid var(--public-navy-deep);
cursor: pointer;
}
.public-treatment-card__guide-link--cart:hover, .public-treatment-card__guide-link--cart:focus-visible {
color: var(--public-white);
background: var(--public-blue);
border-color: var(--public-blue);
}
.public-treatment-card--guide-list:hover {
color: var(--public-ink);
background: var(--public-surface);
}
.public-treatment-card--guide-list:focus-visible {
outline: 2px solid var(--public-focus);
outline-offset: 2px;
}
@media (max-width: 768px) {
.public-treatment-card {
--heading-2xs-fs: 1.4rem;
--body-md-fs: 1.3rem;
--body-card-desc-fs: 1.2rem;
--body-xs-fs: 1.1rem;
}
.public-treatment-card__body {
padding: var(--public-space-xs);
}
.public-treatment-card__top {
gap: var(--public-space-2xs);
}
.public-treatment-card__badge {
min-height: 2rem;
padding-inline: var(--public-space-2xs);
}
.public-treatment-card__title {
margin-top: var(--public-space-xs);
}
.public-treatment-card__desc {
margin-top: var(--public-space-2xs);
}
.public-treatment-card__footer {
gap: var(--public-space-xs);
padding-top: var(--public-space-xs);
}
.public-treatment-card__footer .public-treatment-card__price {
min-width: 0;
grid-template-columns: minmax(0, 1fr) max-content;
column-gap: calc(var(--public-space-2xs) * 0.5);
}
.public-treatment-card--default .public-treatment-card__footer > form, .public-treatment-card--default .public-treatment-card__footer > .public-cart-action {
flex: 0 0 var(--public-check-size);
width: var(--public-check-size);
min-width: var(--public-check-size);
}
.public-treatment-card__vat, .public-treatment-card__price del, .public-treatment-card__discount, .public-treatment-card__amount {
min-width: 0;
white-space: nowrap;
}
.public-treatment-card--guide-list, .public-treatment-card__body--guide-list {
min-height: 16rem;
}
.public-treatment-card--guide-list {
grid-template-columns: minmax(0, 1fr);
}
.public-treatment-card__guide-footer {
align-items: flex-start;
flex-direction: row;
gap: var(--public-space-xs);
}
.public-treatment-card__guide-footer form {
margin-inline-start: auto;
}
.public-treatment-card__guide-link--cart {
padding-inline: var(--public-space-xs);
}
.public-treatment-card__cta--more {
width: var(--public-check-size);
min-width: var(--public-check-size);
min-height: var(--public-check-size);
padding: 0;
border: 0;
}
.public-treatment-card__cta--more .public-button__icon {
display: inline-flex;
margin: 0;
}
.public-treatment-card__cta--more .public-button__label {
display: none;
}
.public-treatment-card__cta--more .public-button__icon i {
font-size: var(--public-icon-sm);
line-height: 1;
}
.public-treatment-card__guide-link:not(.public-treatment-card__guide-link--cart) {
width: var(--public-check-size);
height: var(--public-check-size);
align-items: center;
justify-content: center;
padding: 0;
border-bottom: 0;
}
.public-treatment-card__guide-link:not(.public-treatment-card__guide-link--cart) .public-treatment-card__guide-link-label {
display: none;
}
.public-treatment-card__guide-link:not(.public-treatment-card__guide-link--cart) .public-treatment-card__guide-link-icon {
display: inline-flex;
}
}
/*
* Desktop footer reveal: opaque page content passes over a pinned footer.
* Mobile keeps the footer in normal flow to avoid sticky-layer bleed while scrolling.
*/
.public-page-layer:is([data-barba-namespace=newyoung-home],
[data-barba-namespace=newyoung-page]) {
isolation: isolate;
}
.public-page-layer:is([data-barba-namespace=newyoung-home],
[data-barba-namespace=newyoung-page]) > main {
position: relative;
z-index: 1;
}
.public-page-layer:is([data-barba-namespace=newyoung-home],
[data-barba-namespace=newyoung-page]) > .public-footer.site-footer {
position: relative;
z-index: 0;
}
@media (min-width: 1024px) {
.public-page-layer:is([data-barba-namespace=newyoung-home],
[data-barba-namespace=newyoung-page]) > .public-footer.site-footer {
position: sticky;
bottom: 0;
}
}
/* NEWYOUNG shared footer: supplied 4-column reference composition. */
.public-footer.site-footer {
--public-footer-foreground: var(--clr-accent-300);
--public-footer-muted: color-mix(in srgb, var(--clr-accent-300) 68%, transparent);
--public-footer-heading: var(--clr-primary-500);
--public-footer-line: color-mix(in srgb, var(--clr-accent-300) 28%, transparent);
--public-footer-font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
padding: 0;
color: var(--public-footer-muted);
background: var(--clr-primary-950);
border-top: 0;
}
.public-footer.site-footer .public-footer__company, .public-footer.site-footer .public-footer__heading, .public-footer.site-footer .public-footer__details, .public-footer.site-footer .public-footer__copyright, .public-footer.site-footer .public-footer__legal, .public-footer.site-footer .public-footer__legal a {
font-size: var(--public-footer-font-size);
}
.public-footer.site-footer .public-footer__inner {
width: 100%;
}
.public-footer.site-footer .public-footer__main {
display: grid;
grid-template-columns: minmax(0, 1.75fr) minmax(24rem, 1fr) minmax(28rem, 1.1fr) auto;
align-items: start;
gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
min-height: 25rem;
padding-top: 5.6rem;
padding-bottom: 3.2rem;
}
.public-footer.site-footer .public-footer__identity, .public-footer.site-footer .public-footer__hours, .public-footer.site-footer .public-footer__contact {
min-width: 0;
}
.public-footer.site-footer .public-logo {
color: var(--public-footer-foreground);
}
.public-footer.site-footer .public-footer__identity .public-logo__asset {
width: 14rem;
height: 5.2rem;
}
.public-footer.site-footer .public-footer__company {
display: grid;
gap: 0.4rem;
margin-top: 2rem;
}
.public-footer.site-footer .public-footer__company-line {
display: flex;
min-width: 0;
flex-wrap: wrap;
align-items: baseline;
gap: 0.3rem 1.2rem;
margin: 0;
}
.public-footer.site-footer .public-footer__company-field {
display: inline-flex;
min-width: 0;
gap: 0.4rem;
}
.public-footer.site-footer .public-footer__company-name, .public-footer.site-footer .public-footer__company-label {
flex: 0 0 auto;
}
.public-footer.site-footer .public-footer__company-value {
min-width: 0;
overflow-wrap: anywhere;
}
.public-footer.site-footer .public-footer__heading {
margin: 0.4rem 0 2.4rem;
color: var(--public-footer-heading);
font-weight: var(--font-weight-regular);
}
.public-footer.site-footer .public-footer__details {
display: grid;
gap: 1.2rem;
margin: 0;
}
.public-footer.site-footer .public-footer__detail {
display: grid;
grid-template-columns: 8.8rem minmax(0, 1fr);
align-items: baseline;
gap: 1.4rem;
}
.public-footer.site-footer .public-footer__detail dt, .public-footer.site-footer .public-footer__detail dd, .public-footer.site-footer .public-footer__detail a {
margin: 0;
overflow-wrap: anywhere;
font-size: var(--public-footer-font-size);
line-height: inherit;
}
.public-footer.site-footer .public-footer__detail dt {
color: var(--public-footer-foreground);
}
.public-footer.site-footer a {
color: inherit;
text-decoration: none;
}
.public-footer.site-footer .public-footer__socials {
justify-self: end;
padding-top: 0.8rem;
}
.public-footer.site-footer .public-footer__socials ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}
.public-footer.site-footer .public-footer__social {
display: grid;
width: 4.4rem;
height: 4.4rem;
border: 1px solid var(--public-footer-line);
border-radius: 50%;
place-items: center;
color: var(--public-footer-foreground);
transition: color var(--dur-base) var(--ease-out-quart), opacity var(--dur-base) var(--ease-out-quart);
}
.public-footer.site-footer .public-footer__social:hover, .public-footer.site-footer .public-footer__social:focus-visible {
color: var(--clr-primary-400);
opacity: 0.72;
}
.public-footer.site-footer .public-footer__social:focus-visible, .public-footer.site-footer .public-footer__legal a:focus-visible {
outline: 1px solid currentColor;
outline-offset: 0.4rem;
}
.public-footer.site-footer .public-footer__social svg, .public-footer.site-footer .public-footer__social i, .public-footer.site-footer .public-footer__social-custom-icon {
display: block;
width: 2.2rem;
height: 2.2rem;
}
.public-footer.site-footer .public-footer__social svg {
overflow: visible;
fill: currentColor;
color: inherit;
}
.public-footer.site-footer .public-footer__social svg [fill]:not([fill=none]) {
fill: currentColor;
}
.public-footer.site-footer .public-footer__social svg [stroke]:not([stroke=none]) {
stroke: currentColor;
}
.public-footer.site-footer .public-footer__social i {
color: inherit;
font-size: var(--public-social-icon-size);
line-height: 2.2rem;
text-align: center;
}
.public-footer.site-footer .public-footer__social-custom-icon {
object-fit: contain;
filter: brightness(0) saturate(100%) invert(91%) sepia(9%) saturate(708%) hue-rotate(345deg) brightness(102%) contrast(84%);
}
.public-footer.site-footer .public-footer__bottom {
display: flex;
min-height: 8.2rem;
align-items: center;
justify-content: space-between;
gap: 3rem;
border-top: 1px solid var(--public-footer-line);
}
.public-footer.site-footer .public-footer__copyright {
margin: 0;
}
.public-footer.site-footer .public-footer__legal ul {
display: flex;
align-items: center;
justify-content: flex-end;
margin: 0;
padding: 0;
list-style: none;
}
.public-footer.site-footer .public-footer__legal li {
white-space: nowrap;
}
.public-footer.site-footer .public-footer__legal li + li {
position: relative;
margin-left: 1.4rem;
padding-left: 1.4rem;
}
.public-footer.site-footer .public-footer__legal li + li::before {
position: absolute;
top: 50%;
left: 0;
width: 1px;
height: 0.8rem;
background: var(--public-footer-line);
content: "";
transform: translateY(-50%);
}
.public-footer.site-footer .public-footer__legal a:hover, .public-footer.site-footer .public-footer__legal a:focus-visible {
color: var(--public-footer-foreground);
text-decoration: underline;
text-underline-offset: 0.5rem;
}
@media (max-width: 1640px) {
.public-footer.site-footer .public-footer__main {
grid-template-columns: minmax(0, 1.5fr) minmax(21rem, 0.9fr) minmax(25rem, 1fr) auto;
gap: 3.2rem 4.8rem;
}
}
@media (max-width: 1320px) {
.public-footer.site-footer .public-footer__main {
grid-template-columns: minmax(32rem, 0.9fr) minmax(0, 1.1fr);
grid-template-areas: "identity hours" "identity contact" "identity socials";
gap: 3rem 5rem;
min-height: 0;
padding: 4.8rem 0 4rem;
}
.public-footer.site-footer .public-footer__identity {
grid-area: identity;
}
.public-footer.site-footer .public-footer__hours {
grid-area: hours;
}
.public-footer.site-footer .public-footer__contact {
grid-area: contact;
}
.public-footer.site-footer .public-footer__socials {
grid-area: socials;
justify-self: end;
padding-top: 0;
}
}
@media (max-width: 1024px) {
.public-footer.site-footer .public-footer__main {
grid-template-columns: minmax(28rem, 0.9fr) minmax(0, 1.1fr);
gap: 2.8rem 4rem;
padding: 4.2rem 0 3.8rem;
}
.public-footer.site-footer .public-footer__detail {
grid-template-columns: 7.6rem minmax(0, 1fr);
gap: 1.4rem;
}
.public-footer.site-footer .public-footer__heading {
margin-bottom: 2rem;
}
}
@media (max-width: 768px) {
.public-footer.site-footer .public-footer__main {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: none;
gap: 3rem;
padding: 4rem 0 3.2rem;
}
.public-footer.site-footer .public-footer__identity, .public-footer.site-footer .public-footer__hours, .public-footer.site-footer .public-footer__contact, .public-footer.site-footer .public-footer__socials {
grid-area: auto;
}
.public-footer.site-footer .public-footer__identity .public-logo__asset {
width: 13.2rem;
height: 4.8rem;
}
.public-footer.site-footer .public-footer__company {
margin-top: 1.8rem;
}
.public-footer.site-footer .public-footer__company-field {
flex-wrap: wrap;
}
.public-footer.site-footer .public-footer__heading {
margin-bottom: 1.8rem;
}
.public-footer.site-footer .public-footer__socials ul {
flex-wrap: wrap;
}
.public-footer.site-footer .public-footer__socials {
justify-self: start;
}
.public-footer.site-footer .public-footer__bottom {
min-height: 0;
flex-direction: column;
align-items: flex-start;
gap: 1.4rem;
padding: 2.2rem 0 calc(var(--public-footer-mobile-safe-space) + env(safe-area-inset-bottom));
}
.public-footer.site-footer .public-footer__legal ul {
flex-wrap: wrap;
justify-content: flex-start;
gap: 1rem 0;
}
}
@media (max-width: 544px) {
.public-footer.site-footer .public-footer__main {
gap: 2.8rem;
padding: 3.6rem 0 3rem;
}
.public-footer.site-footer .public-footer__identity .public-logo__asset {
width: 12.4rem;
height: 4.6rem;
}
.public-footer.site-footer .public-footer__company-line, .public-footer.site-footer .public-footer__company-field {
align-items: flex-start;
}
.public-footer.site-footer .public-footer__bottom {
padding-top: 2rem;
}
}
@media (max-width: 450px) {
.public-footer.site-footer .public-footer__detail {
grid-template-columns: 7.2rem minmax(0, 1fr);
gap: 1.2rem;
}
.public-footer.site-footer .public-footer__legal li + li {
margin-left: 1rem;
padding-left: 1rem;
}
.public-footer.site-footer .public-footer__legal li + li::before {
height: 0.7rem;
}
}
.public-home-hero {
position: relative;
height: 100svh;
min-height: clamp(64rem, 5.1779935275vw + 62.0582524272rem, 72rem);
color: var(--public-white);
overflow: hidden;
}
.public-home-hero__image, .public-home-hero__fallback, .public-home-hero__shade {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.public-home-hero__image, .public-home-hero__fallback img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.public-home-hero__fallback {
display: block;
}
.public-home-hero__fallback--only .public-home-hero__image {
position: static;
}
.public-home-hero video.public-home-hero__image {
z-index: 0;
filter: saturate(0.9) contrast(1.02);
}
.public-home-hero__shade {
background: linear-gradient(180deg, rgba(4, 22, 40, 0.08) 0%, rgba(4, 22, 40, 0.18) 48%, rgba(2, 15, 31, 0.42) 100%), radial-gradient(circle at 50% 48%, rgba(0, 0, 0, 0.02) 0%, rgba(0, 14, 31, 0.2) 74%, rgba(0, 12, 28, 0.34) 100%);
}
.public-home-hero__content {
position: absolute;
z-index: auto;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-block: 0;
text-align: center;
}
.public-home-hero__title {
margin: 0;
color: var(--public-white);
white-space: nowrap;
}
.public-home-hero__lead {
max-width: none;
color: var(--public-white);
}
.public-home-hero__search {
width: min(64rem, 100vw - 4rem);
}
@media (prefers-reduced-motion: reduce) {
.public-home-hero video.public-home-hero__image {
display: none;
}
}
@media (max-width: 767px) {
.public-home-hero__title {
white-space: normal;
}
.public-home-hero__lead {
max-width: 30rem;
margin-top: 2.4rem;
}
.public-home-hero__search {
margin-top: 5rem;
}
}
.public-key-home {
color: var(--public-ink);
background: var(--public-white);
padding-top: var(--public-header-height);
}
@media (max-width: 767px) {
.public-key-home > section {
overflow: hidden;
}
.public-key-home .swiper {
overflow: visible;
}
}
.public-key-hero {
position: relative;
height: 84rem;
min-height: 84rem;
overflow: hidden;
background: var(--public-surface);
}
.public-key-hero__swiper {
position: absolute;
inset: 0;
z-index: 0;
height: 100%;
}
.public-key-hero__slide {
position: relative;
width: 100%;
height: 100%;
min-height: 0;
}
.public-key-hero__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.public-key-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.public-key-hero__shade {
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
}
.public-key-hero__copy {
position: relative;
z-index: 2;
display: flex;
width: 100%;
height: 100%;
min-height: 0;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--public-white);
text-align: center;
}
.public-key-hero__copy-inner {
position: relative;
top: calc(var(--public-space-md) * 3);
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
}
.public-key-hero__title {
max-width: 100%;
color: inherit;
white-space: nowrap;
}
.public-key-hero__lead {
color: inherit;
}
.public-key-hero__actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--public-space-sm);
}
.public-key-hero__pagination {
position: absolute;
bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem) !important;
left: 50%;
z-index: 3;
display: flex;
width: auto;
align-items: center;
justify-content: center;
gap: 0.8rem;
transform: translateX(-50%);
}
.public-key-hero__pagination .swiper-pagination-bullet {
width: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem);
height: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem);
margin: 0;
background: var(--public-white);
opacity: 0.56;
}
.public-key-hero__pagination .swiper-pagination-bullet-active {
opacity: 1;
}
.public-key-hero__pagination .swiper-pagination-bullet:only-child {
display: block !important;
}
.public-key-hero__pagination.swiper-pagination {
left: 50%;
width: auto;
}
@media (max-width: 767px) {
.public-key-hero {
height: clamp(46rem, 120vw, 52rem);
min-height: 46rem;
}
.public-key-hero__title {
white-space: normal;
}
}
.public-key-section__head {
display: grid;
gap: var(--public-space-xs);
}
.public-key-section__head--row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-3xl);
}
.public-key-section__title {
color: var(--public-blue);
}
.public-key-section__desc {
color: var(--public-muted);
}
@media (max-width: 767px) {
.public-key-section__head--row {
align-items: flex-start;
gap: var(--public-space-md);
}
}
.public-key-search {
color: var(--public-white);
background: var(--public-navy-deep);
}
.public-key-search__head {
display: flex;
justify-content: space-between;
gap: 1.6rem;
align-items: center;
}
.public-key-search__title {
color: inherit;
}
.public-key-search__tabs {
margin: var(--public-space-xl) 0 0;
}
.public-key-search__tabs.public-filter-tabs--wrap {
justify-content: flex-start;
}
.public-key-search__tabs.public-filter-tabs--wrap a {
color: color-mix(in srgb, var(--public-white) 72%, transparent);
border-color: color-mix(in srgb, var(--public-white) 34%, transparent);
background: transparent;
}
.public-key-search__tabs.public-filter-tabs--wrap a:hover, .public-key-search__tabs.public-filter-tabs--wrap a:focus-visible {
color: var(--public-white);
border-color: color-mix(in srgb, var(--public-white) 58%, transparent);
background: color-mix(in srgb, var(--public-white) 8%, transparent);
}
.public-key-search__tabs.public-filter-tabs--wrap a.is-active {
color: var(--public-brand-ink);
border-color: var(--public-brand-accent-soft);
background: var(--public-brand-accent-soft);
}
.public-key-search__results {
min-width: 0;
}
.public-key-search__footer {
display: flex;
justify-content: flex-start;
}
.public-key-search__all.public-button {
color: var(--public-white);
border-color: currentColor;
}
@media (max-width: 767px) {
.public-key-search__tabs {
margin-top: var(--public-space-md);
}
.public-key-search__tabs.public-filter-tabs--wrap {
min-width: 0;
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
overscroll-behavior-inline: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.public-key-search__tabs.public-filter-tabs--wrap::-webkit-scrollbar {
display: none;
}
.public-key-search__tabs.public-filter-tabs--wrap a {
scroll-snap-align: center;
}
.public-key-search__tabs.public-filter-tabs--wrap a:first-child {
margin-inline-start: auto;
}
.public-key-search__tabs.public-filter-tabs--wrap a:last-child {
margin-inline-end: auto;
}
.public-key-search__footer {
justify-content: flex-start;
}
}
.public-key-info__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-3xl);
}
.public-key-info__hours p {
color: var(--public-muted);
}
.public-key-info__contact, .public-key-info__hours {
flex: 1 1 0;
min-width: 0;
}
.public-key-info__inner {
gap: var(--public-space-sm);
}
.public-key-info__contact-list {
display: grid;
width: min(34rem, 100%);
gap: var(--public-space-2xs);
}
.public-key-info__contact-row {
display: grid;
grid-template-columns: 12rem minmax(0, 1fr);
align-items: center;
gap: var(--public-space-sm);
}
.public-key-info__action.public-button {
width: 100%;
min-height: 4.4rem;
padding-inline: var(--public-space-xs);
}
.public-key-info__hours dl {
display: grid;
gap: var(--public-space-sm);
}
.public-key-info__hours div {
display: grid;
grid-template-columns: 8rem minmax(0, 1fr);
gap: var(--public-space-xl);
}
.public-key-info__hours dt {
color: var(--public-ink);
}
.public-key-info__hours dd {
color: var(--public-muted);
}
@media (min-width: 1024px) {
html body .public-key-info__inner.no-container-xl {
align-items: flex-start;
}
}
@media (max-width: 1023px) {
.public-key-info__inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: var(--public-space-sm);
}
}
@media (max-width: 767px) {
.public-key-info__inner {
grid-template-columns: 1fr;
gap: var(--public-space-xl);
}
.public-key-info__contact-list {
width: 100%;
}
.public-key-info__contact-row {
grid-template-columns: 7.8rem minmax(0, 1fr);
gap: var(--public-space-2xs);
}
.public-key-info__action.public-button {
min-height: 4rem;
padding-inline: 0;
}
.public-key-info__hours dl {
gap: var(--public-space-xs);
}
.public-key-info__hours div {
grid-template-columns: 4rem minmax(0, 1fr);
gap: var(--public-space-2xs);
}
.public-key-info__hours dd {
white-space: nowrap;
}
}
.public-key-map__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-3xl);
}
.public-key-map__inner {
gap: var(--public-space-sm);
}
.public-key-map {
border-top: 0;
}
.public-key-map__copy, .public-key-map__canvas {
flex: 1 1 0;
}
.public-key-map__route-list {
display: grid;
gap: var(--public-space-xs);
margin-bottom: 0;
padding: 0;
color: var(--public-muted);
list-style: none;
}
.public-key-map__route {
display: flex;
align-items: center;
gap: var(--public-space-2xs);
}
.public-key-map__route-badge {
display: inline-grid;
flex: 0 0 2rem;
width: 2rem;
height: 2rem;
place-items: center;
color: var(--public-white);
border-radius: var(--public-radius-pill);
font-size: 1.2rem;
font-weight: var(--font-weight-medium);
line-height: 1;
}
.public-key-map__route-badge--line-1 {
background: var(--public-transit-line-1);
}
.public-key-map__route-badge--line-2 {
background: var(--public-transit-line-2);
}
.public-key-map__links {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--public-space-md);
}
.public-key-map__canvas {
position: relative;
height: 37rem;
min-height: 37rem;
overflow: hidden;
background: linear-gradient(90deg, rgba(217, 95, 147, 0.18) 1px, transparent 1px), linear-gradient(0deg, rgba(217, 95, 147, 0.18) 1px, transparent 1px), var(--public-surface-subtle);
background-size: 4.8rem 4.8rem;
}
.public-key-map__map-canvas {
width: 100%;
height: 100%;
min-height: inherit;
}
.public-key-map__canvas .public-location__map-status {
width: 100%;
height: 100%;
}
.public-key-map__canvas .store-map-pin--active, .public-key-map__canvas .store-map-pin--active .store-map-pin__art {
transform: none;
}
.public-key-map__canvas .store-map-pin {
position: relative;
display: block;
max-width: 15.2rem;
max-height: 7.5rem;
overflow: visible;
pointer-events: none;
transform-origin: center bottom;
}
.public-key-map__canvas .store-map-pin__art, .public-key-map__canvas .store-map-pin__image {
display: block;
width: 100%;
height: 100%;
}
.public-key-map__canvas .store-map-pin__image {
object-fit: contain;
object-position: center bottom;
}
.public-key-map__pin {
position: absolute;
top: 48%;
left: 50%;
padding: var(--public-space-xs) var(--public-space-md);
color: var(--public-white);
background: var(--public-navy-deep);
transform: translate(-50%, -50%);
}
@media (min-width: 1024px) {
html body .public-key-map.no-section-md {
padding-top: 5.3rem;
padding-bottom: 7.4rem;
}
html body .public-key-map__inner.no-container-xl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: var(--public-space-sm);
padding-top: 8.1rem;
border-top: 1px solid var(--public-line);
}
}
@media (max-width: 1023px) {
.public-key-map__inner {
display: grid;
grid-template-columns: 1fr;
}
}
.public-key-study__copy p {
color: var(--public-muted);
}
.public-key-study {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--public-space-sm);
align-items: start;
}
.public-key-study__rail {
grid-column: span 3;
min-width: 0;
}
.public-key-study__swiper {
overflow: hidden;
}
.public-key-study__item {
height: auto;
}
.public-key-study__item img {
display: block;
width: 100%;
aspect-ratio: var(--public-study-media-ratio);
background: var(--public-surface);
}
.public-key-study__link {
display: block;
color: inherit;
}
.public-key-study__link:focus-visible {
outline: 0.2rem solid var(--public-rose);
outline-offset: 0.4rem;
}
.public-key-study__title {
display: -webkit-box;
min-height: 4.8rem;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.public-key-study__progress.swiper-scrollbar {
width: 100%;
height: 0.4rem;
position: relative;
inset: auto;
}
@media (max-width: 1023px) {
.public-key-study {
display: grid;
grid-template-columns: 1fr;
}
.public-key-study__rail {
grid-column: auto;
}
}
.public-key-card-carousel {
overflow: hidden;
}
.public-key-card-carousel__slide {
width: 30rem;
height: auto;
}
.public-key-card-carousel__slide > .public-treatment-card {
min-height: 100%;
}
@media (max-width: 768px) {
.public-key-card-carousel__slide {
width: 20rem;
}
}
.public-key-progress {
width: 65%;
height: 0.4rem;
position: relative;
inset: auto;
flex-shrink: 0;
touch-action: none;
background: var(--public-line);
}
.public-key-progress .swiper-scrollbar-drag {
height: 100%;
background: var(--public-blue);
border-radius: 0;
}
.public-key-progress--dark {
background: rgba(255, 255, 255, 0.28);
}
.public-key-carousel-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-xl);
}
.public-key-carousel-controls__arrows {
display: flex;
align-items: center;
gap: 0.8rem;
}
.public-key-carousel-controls__arrows button {
display: grid;
width: 2.4rem;
height: 2.4rem;
padding: 0;
place-items: center;
color: inherit;
background: transparent;
border: 0;
cursor: pointer;
}
.public-key-carousel-controls__arrows button:focus-visible {
outline: 0.2rem solid var(--public-blue);
outline-offset: 0.2rem;
}
.public-key-carousel-controls__arrows button:disabled, .public-key-carousel-controls__arrows button.swiper-button-disabled {
cursor: default;
opacity: 0.3;
}
.public-key-carousel-controls__arrows button.swiper-button-lock {
display: none;
}
.public-key-carousel-controls__arrows i {
font-size: 1.6rem;
}
.public-key-feature {
overflow: hidden;
background: var(--public-white);
}
.public-key-feature__carousel {
overflow: visible;
}
.public-key-feature__carousel--desktop {
display: none;
}
.public-key-feature__card {
display: flex;
height: auto;
align-items: stretch;
flex-direction: column;
text-align: left;
}
.public-key-feature__media {
display: grid;
width: 100%;
aspect-ratio: 3/4;
place-items: center;
overflow: hidden;
color: var(--public-muted);
background: linear-gradient(135deg, var(--public-surface-subtle), var(--public-surface));
}
.public-key-feature__image, .public-key-feature__desktop-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.public-key-feature__title, .public-key-feature__title-lead, .public-key-feature__title-tail {
display: block;
}
.public-key-feature__title {
color: var(--public-ink);
}
.public-key-feature__title-tail, .public-key-feature__description, .public-key-feature__footnotes {
color: var(--public-muted);
}
.public-key-feature__description {
min-height: 2rem;
}
.public-key-feature__points {
display: grid;
width: 100%;
}
.public-key-feature__point {
display: grid;
width: 100%;
min-height: var(--public-control-lg);
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--public-space-sm);
padding-block: var(--public-space-sm);
color: var(--public-ink);
background: var(--public-white);
border-top: 1px solid var(--public-line-strong);
border-radius: 0;
text-align: left;
}
.public-key-feature__point:last-child {
border-bottom: 1px solid var(--public-line-strong);
}
.public-key-feature__point-main {
display: flex;
min-width: 0;
align-items: baseline;
gap: var(--public-space-2xs);
}
.public-key-feature__point-label, .public-key-feature__point-value, .public-key-feature__point-period, .public-key-feature__desktop-point-label, .public-key-feature__desktop-point-value, .public-key-feature__desktop-point-period {
display: block;
max-width: 100%;
word-break: keep-all;
}
.public-key-feature__point-period, .public-key-feature__desktop-point-period {
margin-top: calc(var(--public-space-2xs) * 0.5);
opacity: 0.72;
}
.public-key-feature__point-period {
margin-top: 0;
color: var(--public-muted);
opacity: 1;
text-align: right;
}
.public-key-feature__point + .public-key-feature__point {
margin-inline-start: 0;
}
.public-key-feature__point--accent {
color: var(--public-ink);
background: var(--public-white);
}
.public-key-feature__footnotes {
display: grid;
}
.public-key-feature__pagination {
display: none;
}
.public-key-feature__desktop-pagination .swiper-pagination-bullet, .public-key-feature__pagination .swiper-pagination-bullet {
width: 100%;
height: 0.2rem;
box-sizing: border-box;
margin: 0;
border: 0.1rem solid var(--public-ink);
border-radius: 0;
background: var(--public-white);
opacity: 1;
transition: background-color var(--public-duration) var(--public-ease);
}
.public-key-feature__desktop-pagination .swiper-pagination-bullet-active, .public-key-feature__pagination .swiper-pagination-bullet-active {
width: 100%;
background: var(--public-ink);
}
@media (min-width: 1024px) {
.public-key-feature__carousel--mobile {
display: none;
}
.public-key-feature__carousel--desktop {
display: block;
overflow: hidden;
padding-bottom: var(--public-space-3xl);
}
.public-key-feature__desktop-slide {
display: grid;
height: auto;
grid-template-columns: minmax(0, 12fr) minmax(0, 13fr);
align-items: center;
gap: var(--public-space-3xl);
}
.public-key-feature__desktop-media {
display: grid;
width: 100%;
aspect-ratio: 1;
place-items: center;
overflow: hidden;
color: var(--public-muted);
background: linear-gradient(135deg, var(--public-line), var(--public-surface));
}
.public-key-feature__desktop-content {
display: flex;
min-width: 0;
align-items: flex-start;
flex-direction: column;
justify-content: flex-start;
padding-top: var(--public-space-page);
}
.public-key-feature__desktop-title, .public-key-feature__desktop-title-lead, .public-key-feature__desktop-title-tail {
display: block;
}
.public-key-feature__desktop-title {
color: var(--public-ink);
}
.public-key-feature__desktop-title-tail {
color: var(--public-muted);
}
.public-key-feature__desktop-description {
color: var(--public-ink);
}
.public-key-feature__desktop-points {
display: flex;
align-items: center;
width: 100%;
}
.public-key-feature__desktop-point {
display: flex;
width: 18rem;
aspect-ratio: 1;
align-items: center;
flex-direction: column;
justify-content: center;
padding: var(--public-space-sm);
color: var(--public-white);
background: var(--public-muted-soft);
border-radius: 50%;
text-align: center;
}
.public-key-feature__desktop-point + .public-key-feature__desktop-point {
margin-inline-start: calc(var(--public-space-xl) * -1);
}
.public-key-feature__desktop-point--accent {
position: relative;
z-index: 1;
color: var(--public-white);
background: var(--public-blue);
}
.public-key-feature__desktop-pagination {
position: absolute;
bottom: 0;
left: 0;
display: grid;
width: 100%;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
gap: var(--public-space-2xs);
}
}
@media (max-width: 767px) {
.public-key-feature.no-section-md {
padding-block: var(--public-space-xl);
}
.public-key-feature__carousel.swiper {
overflow: hidden;
padding-bottom: var(--public-space-lg);
}
.public-key-feature__image {
object-position: center top;
}
.public-key-feature__pagination {
position: absolute;
bottom: 0;
left: 0;
display: grid;
width: 100%;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
gap: var(--public-space-2xs);
}
}
.public-home ~ .no-floating-cta .no-floating-cta__btn--tel {
display: none;
}
.public-home ~ .no-floating-cta .no-floating-cta__btn--instagram {
order: 1;
}
.public-home ~ .no-floating-cta .no-floating-cta__btn--youtube {
order: 2;
}
.public-home ~ .no-floating-cta .no-floating-cta__btn--naverblog {
order: 3;
}
.public-home ~ .no-floating-cta .no-floating-cta__btn--kakao {
order: 4;
}
.public-home ~ .no-floating-cta .no-floating-cta__btn--top {
order: 5;
}
@media (max-width: 767px) {
.public-home ~ .no-floating-cta {
display: none;
}
}
.treatment-catalog, .clinic-editorial {
--color-background-primary: #f6f1ea;
--color-background-secondary: #d8cbb8;
--color-background-card: #ebe3d7;
--color-text-primary: #352820;
--color-text-secondary: #76685c;
--color-border-default: #d8cbb8;
--public-brand-surface: var(--color-background-primary);
--public-surface-subtle: var(--color-background-secondary);
--public-brand-surface-strong: #efe5da;
--public-ink: var(--color-text-primary);
--public-muted: var(--color-text-secondary);
--public-line: var(--color-border-default);
}
.treatment-catalog__note {
border: 1px solid var(--public-line);
border-radius: 0.6rem;
padding: 2.4rem;
margin-top: 3.2rem;
font-size: 1.4rem;
color: var(--public-muted);
}
.treatment-catalog__note h3 {
font-size: 1.6rem;
color: var(--public-ink);
margin-bottom: 1rem;
font-weight: var(--font-weight-medium);
}
.treatment-catalog__note[hidden] {
display: none;
}
.is-treatment-dialog-open {
overflow: hidden;
}
.treatment-catalog {
--color-text-body: #1e211e;
--catalog-table-padding: 2.4rem;
--catalog-table-font-size: 1.7rem;
--catalog-table-heading-size: 1.8rem;
}
.treatment-catalog__hero, .treatment-catalog__directory {
width: min(85.42%, 164rem);
margin-inline: auto;
}
.treatment-catalog__hero {
padding-top: 18.8rem;
padding-bottom: 8rem;
}
.treatment-catalog__hero h1 {
font-family: var(--font-display-family);
font-size: clamp(3.2rem, 2.5vw, 4.8rem);
font-weight: var(--font-weight-medium);
line-height: 1.35;
}
.treatment-catalog__hero p {
margin-top: 1.6rem;
color: var(--public-muted);
font-size: 1.8rem;
}
.treatment-catalog__directory {
padding-bottom: 20rem;
min-height: 135rem;
}
.treatment-catalog__directory > h2 {
font-family: var(--font-heading-family);
font-size: 3.2rem;
font-weight: var(--font-weight-regular);
margin-bottom: 2rem;
}
.treatment-catalog__layout {
display: grid;
grid-template-columns: 23.6rem minmax(0, 122.6rem);
gap: 4rem;
}
.treatment-catalog__search, .treatment-catalog__toolbar {
height: 6.8rem;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 2px solid var(--public-ink);
}
.treatment-catalog__search input {
width: 100%;
min-width: 0;
background: transparent;
border: 0;
padding: 0.8rem 0;
font-size: 1.5rem;
color: inherit;
}
.treatment-catalog__search:focus-within {
border-color: var(--public-focus);
box-shadow: 0 1px 0 var(--public-focus);
}
.treatment-catalog__actions {
display: flex;
align-items: center;
gap: 1.6rem;
min-width: 0;
}
.treatment-catalog__sort {
position: relative;
min-width: 0;
font-size: 1.5rem;
}
.treatment-catalog__sort-trigger {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1.2rem;
min-height: 4.4rem;
padding: 0.6rem 0.4rem;
color: var(--public-muted);
font: inherit;
}
.treatment-catalog__sort-trigger span {
text-align: right;
}
.treatment-catalog__sort-trigger i {
flex: 0 0 auto;
font-size: 1rem;
transition: transform 0.2s ease;
}
.treatment-catalog__sort-trigger:hover, .treatment-catalog__sort-trigger[aria-expanded=true] {
color: var(--public-ink);
}
.treatment-catalog__sort-trigger[aria-expanded=true] i {
transform: rotate(180deg);
}
.treatment-catalog__sort-menu {
position: absolute;
top: calc(100% + 0.4rem);
right: 0;
z-index: 20;
width: max-content;
min-width: 17rem;
max-width: min(28rem, 100vw - 4rem);
padding: 0.6rem;
border: 1px solid var(--public-line);
border-radius: 0.4rem;
background: var(--public-brand-surface);
box-shadow: 0 0.8rem 2.4rem rgba(40, 30, 20, 0.08);
}
.treatment-catalog__sort-menu[hidden] {
display: none;
}
.treatment-catalog__sort-menu button {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
width: 100%;
min-height: 4.4rem;
padding: 0.8rem 1.2rem;
color: var(--public-muted);
font: inherit;
text-align: left;
border-radius: 0.2rem;
}
.treatment-catalog__sort-menu button:hover, .treatment-catalog__sort-menu button:focus-visible {
background: var(--public-brand-surface-strong);
color: var(--public-ink);
outline-offset: -2px;
}
.treatment-catalog__sort-menu [aria-checked=true] {
color: var(--public-ink);
}
.treatment-catalog__sort-menu i {
font-size: 1.2rem;
visibility: hidden;
}
.treatment-catalog__sort-menu [aria-checked=true] i {
visibility: visible;
}
.treatment-catalog__category-scrollbar {
display: none;
}
.treatment-catalog__categories {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
padding-top: 2.4rem;
}
.treatment-catalog__categories button, .treatment-catalog__categories a {
min-height: var(--public-control-sm);
padding: 0.8rem 0.4rem;
text-align: left;
font-size: 1.7rem;
font-weight: var(--font-weight-regular);
color: var(--color-text-muted);
transition: color var(--public-duration) var(--public-ease);
}
.treatment-catalog__categories button:hover, .treatment-catalog__categories button:focus-visible, .treatment-catalog__categories a:hover, .treatment-catalog__categories a:focus-visible, .treatment-catalog__categories [aria-pressed=true] {
color: var(--public-ink);
}
.treatment-catalog__categories [aria-pressed=true] {
font-weight: var(--font-weight-semibold);
}
.treatment-catalog__toolbar {
justify-content: space-between;
color: var(--public-muted);
font-size: 1.8rem;
}
.treatment-catalog__views {
display: flex;
gap: 0.8rem;
padding: 0.6rem;
}
.treatment-catalog__views button {
position: relative;
isolation: isolate;
border: 0;
background: transparent;
border-radius: var(--public-action-radius);
text-decoration: none;
}
.treatment-catalog__views button::before, .treatment-catalog__views button::after {
position: absolute;
inset-block: 0;
box-sizing: border-box;
width: var(--public-action-end-width);
border: 1px solid currentColor;
content: "";
pointer-events: none;
transition: width var(--public-action-duration) var(--public-ease);
}
.treatment-catalog__views button::before {
inset-inline-start: 0;
border-inline-end: 0;
border-radius: var(--public-action-radius) 0 0 var(--public-action-radius);
}
.treatment-catalog__views button::after {
inset-inline-end: 0;
border-inline-start: 0;
border-radius: 0 var(--public-action-radius) var(--public-action-radius) 0;
}
.treatment-catalog__views button:hover::before, .treatment-catalog__views button:hover::after, .treatment-catalog__views button:focus-visible::before, .treatment-catalog__views button:focus-visible::after, .treatment-catalog__views button.is-frame-completing::before, .treatment-catalog__views button.is-frame-completing::after, .treatment-catalog__views button[aria-expanded=true]::before, .treatment-catalog__views button[aria-expanded=true]::after {
width: calc(50% + 1px);
}
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
.treatment-catalog__views button::before, .treatment-catalog__views button::after {
width: calc(50% + 1px);
}
}
.treatment-catalog__views button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.treatment-catalog__views button::before, .treatment-catalog__views button::after {
transition: none;
}
}
.treatment-catalog__views button {
--public-action-end-width: 1rem;
width: 4.4rem;
height: 4.4rem;
font-size: 2rem;
color: var(--public-ink);
}
.treatment-catalog__views [aria-pressed=true] {
color: var(--public-ink);
}
.treatment-catalog__views [aria-pressed=true]::before, .treatment-catalog__views [aria-pressed=true]::after {
width: calc(50% + 1px);
}
@media (max-width: 1023px) {
.treatment-catalog__views [aria-pressed=false]::before, .treatment-catalog__views [aria-pressed=false]::after {
content: none;
}
}
.treatment-catalog__items {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2.4rem;
padding-top: 2.4rem;
}
.treatment-catalog__item {
min-width: 0;
scroll-margin-top: 14rem;
}
.treatment-catalog__item[hidden], .treatment-catalog__empty[hidden] {
display: none;
}
.treatment-catalog__card {
display: flex;
width: 100%;
height: 100%;
min-height: 31.4rem;
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 2.8rem;
border-radius: 0.6rem;
background: var(--color-background-card);
color: var(--public-ink);
gap: 1.4rem;
outline: 1px solid transparent;
outline-offset: -1px;
transition: outline-color 0.25s ease;
}
@media (hover: hover) {
.treatment-catalog__card:hover {
outline-color: var(--public-ink);
}
}
.treatment-catalog__card h3 {
font-size: 2.2rem;
font-weight: var(--font-weight-medium);
line-height: 1.65;
overflow-wrap: anywhere;
}
.treatment-catalog__icon {
width: 8.8rem;
height: 8.8rem;
object-fit: contain;
margin: 1.2rem 0 1.6rem;
}
.treatment-catalog__preview {
font-size: 1.4rem;
color: var(--public-muted);
white-space: pre-line;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.treatment-catalog__preview--description {
display: block;
-webkit-line-clamp: unset;
overflow: visible;
}
.treatment-catalog__price {
font-size: 1.8rem;
margin-top: auto;
font-family: var(--font-en, "Manrope"), sans-serif;
}
.treatment-catalog__list-options, .treatment-catalog__list-heading, .treatment-catalog__list-price-label {
display: none;
}
.treatment-catalog__notice {
font-size: 1.4rem;
color: var(--public-muted);
margin-top: 4rem;
line-height: 1.65;
white-space: pre-line;
}
.treatment-catalog__empty {
padding: 8rem 0;
text-align: center;
}
.treatment-catalog__list-heading, .treatment-catalog__dialog thead {
border-block: 2px solid var(--public-ink);
color: var(--public-muted);
font-size: var(--catalog-table-heading-size);
font-weight: var(--font-weight-medium);
}
.treatment-catalog__list-options > div, .treatment-catalog__dialog td {
color: var(--color-text-body);
font-size: var(--catalog-table-font-size);
line-height: 1.65;
}
.treatment-catalog[data-view=list] .treatment-catalog__toolbar {
border-bottom: 0;
}
.treatment-catalog[data-view=list] .treatment-catalog__items {
display: block;
padding: 0;
}
.treatment-catalog[data-view=list] .treatment-catalog__list-heading {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: var(--catalog-table-padding);
line-height: 1.65;
}
.treatment-catalog[data-view=list] .treatment-catalog__list-heading > :last-child {
text-align: right;
}
.treatment-catalog[data-view=list] .treatment-catalog__card {
display: none;
}
.treatment-catalog[data-view=list] .treatment-catalog__list-options {
display: block;
}
.treatment-catalog[data-view=list] .treatment-catalog__list-options > div {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
padding: var(--catalog-table-padding);
}
.treatment-catalog[data-view=list] .treatment-catalog__list-options > div > button {
text-align: left;
padding-right: 1.6rem;
font: inherit;
color: inherit;
overflow-wrap: anywhere;
}
.treatment-catalog[data-view=list] .treatment-catalog__list-options > div > button:hover {
text-decoration: underline;
text-underline-offset: 0.3em;
}
.treatment-catalog[data-view=list] .treatment-catalog__list-options > div > span {
min-width: 0;
overflow-wrap: anywhere;
}
.treatment-catalog[data-view=list] .treatment-catalog__list-options > div > :last-child {
text-align: right;
font-variant-numeric: tabular-nums;
}
.treatment-catalog small {
display: block;
color: var(--public-muted);
font-size: 1.4rem;
line-height: 1.6;
}
.treatment-catalog__dialog {
position: fixed;
inset: 0;
margin: auto;
width: min(76rem, 100% - 3.2rem);
max-height: calc(100dvh - 4rem);
border: 1px solid var(--public-line);
border-radius: 0.8rem;
padding: 4.8rem;
overflow: auto;
background: var(--public-brand-surface);
color: var(--public-ink);
}
.treatment-catalog__dialog::backdrop {
background: rgba(25, 20, 16, 0.58);
opacity: 0;
transition: opacity 0.2s ease-in;
}
.treatment-catalog__dialog.is-visible::backdrop {
opacity: 1;
transition-duration: 0.32s;
transition-timing-function: ease-out;
}
.treatment-catalog__dialog h2 {
font-size: 4rem;
font-weight: var(--font-weight-regular);
margin: 0.8rem 3rem 2rem 0;
}
.treatment-catalog__dialog p {
font-size: 1.6rem;
line-height: 1.65;
}
.treatment-catalog__dialog table {
width: 100%;
margin-top: 3.2rem;
border-collapse: collapse;
}
.treatment-catalog__dialog th, .treatment-catalog__dialog td {
padding: var(--catalog-table-padding);
text-align: left;
vertical-align: top;
line-height: 1.65;
}
.treatment-catalog__dialog th:last-child, .treatment-catalog__dialog td:last-child {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.treatment-catalog__close {
position: relative;
isolation: isolate;
border: 0;
background: transparent;
border-radius: var(--public-action-radius);
text-decoration: none;
}
.treatment-catalog__close::before, .treatment-catalog__close::after {
position: absolute;
inset-block: 0;
box-sizing: border-box;
width: var(--public-action-end-width);
border: 1px solid currentColor;
content: "";
pointer-events: none;
transition: width var(--public-action-duration) var(--public-ease);
}
.treatment-catalog__close::before {
inset-inline-start: 0;
border-inline-end: 0;
border-radius: var(--public-action-radius) 0 0 var(--public-action-radius);
}
.treatment-catalog__close::after {
inset-inline-end: 0;
border-inline-start: 0;
border-radius: 0 var(--public-action-radius) var(--public-action-radius) 0;
}
.treatment-catalog__close:hover::before, .treatment-catalog__close:hover::after, .treatment-catalog__close:focus-visible::before, .treatment-catalog__close:focus-visible::after, .treatment-catalog__close.is-frame-completing::before, .treatment-catalog__close.is-frame-completing::after, .treatment-catalog__close[aria-expanded=true]::before, .treatment-catalog__close[aria-expanded=true]::after {
width: calc(50% + 1px);
}
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
.treatment-catalog__close::before, .treatment-catalog__close::after {
width: calc(50% + 1px);
}
}
.treatment-catalog__close:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.treatment-catalog__close::before, .treatment-catalog__close::after {
transition: none;
}
}
.treatment-catalog__close {
position: absolute;
top: 2rem;
right: 2rem;
width: 4.8rem;
height: 4.8rem;
display: grid;
place-items: center;
font-size: 3rem;
line-height: 1;
color: var(--public-ink);
}
.treatment-catalog__dialog:lang(ja), .treatment-catalog__dialog:lang(zh) {
word-break: normal;
overflow-wrap: anywhere;
}
.treatment-catalog__dialog-category, .treatment-catalog__members {
color: var(--public-muted);
}
.treatment-catalog :is(button, a):focus-visible {
outline: 2px solid var(--public-focus);
outline-offset: 4px;
}
.treatment-catalog__search input:focus-visible {
outline: none;
}
@media (prefers-reduced-motion: reduce) {
.treatment-catalog__card, .treatment-catalog__dialog::backdrop, .treatment-catalog__sort-trigger i {
transition: none;
}
}
.clinic-editorial h1, .clinic-editorial h2:not(:where(.newyoung-home__reservation-title)), .clinic-editorial h3 {
font-weight: var(--font-weight-regular);
}
.clinic-editorial h1, .clinic-editorial h2:not(:where(.newyoung-home__reservation-title)) {
font-family: var(--font-display-family);
letter-spacing: -0.025em;
}
.clinic-editorial h2:not(:where(.newyoung-home__reservation-title)) {
font-size: clamp(3rem, 3.33vw, 6.4rem);
line-height: 1.35;
}
.clinic-editorial h3 {
font-size: 2.4rem;
margin-bottom: 1.6rem;
font-weight: var(--font-weight-medium);
}
.clinic-editorial p:not(:where(.newyoung-home__reservation-copy)), .clinic-editorial figcaption {
font-size: var(--body-md-fs);
line-height: var(--body-md-lh);
}
.clinic-editorial img {
display: block;
width: 100%;
object-fit: cover;
}
.clinic-editorial__chapter {
padding: 9rem 2rem;
text-align: center;
font-family: var(--font-display-family);
font-size: clamp(3.6rem, 4.27vw, 8.2rem);
}
.clinic-editorial__number {
display: block;
font-family: "Manrope", sans-serif;
font-size: 2.4rem;
color: var(--public-brand-accent);
margin-bottom: 2rem;
}
.clinic-editorial__cover {
position: relative;
min-height: 56.25vw;
color: var(--public-brand-surface);
display: grid;
align-items: center;
}
.clinic-editorial__cover > img {
position: absolute;
inset: 0;
height: 100%;
}
.clinic-editorial__cover > div {
position: relative;
z-index: 1;
padding: 8rem 7.3%;
}
.clinic-editorial__cover p {
margin-top: 2.4rem;
font-size: clamp(1.6rem, 1.25vw, 2.4rem);
}
.clinic-story {
--color-border-default: #c4ae9b;
background: var(--public-brand-surface);
}
.clinic-story__copy-mobile {
display: none;
}
.clinic-story p, .clinic-story figcaption {
word-break: keep-all;
overflow-wrap: break-word;
}
.clinic-story h2 {
font-family: var(--font-display-family);
}
.clinic-story h3 {
margin-bottom: 2.4rem;
font-weight: var(--font-weight-medium);
line-height: 1.65;
}
.clinic-story h2.clinic-editorial__chapter {
font-size: clamp(3.6rem, 4.27vw, 8.2rem);
line-height: 1.65;
padding: 4.53vw 2rem 3.85vw;
font-weight: var(--font-weight-medium);
}
.clinic-story__media {
position: relative;
overflow: hidden;
isolation: isolate;
}
.clinic-story__media > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.clinic-story__opening {
display: grid;
grid-template-columns: 63% 27.72%;
column-gap: 9.28%;
row-gap: 9.9vw;
align-items: start;
padding: 15.3125vw 8.23% 9.7vw 10.05%;
background: var(--public-brand-surface-strong);
}
.clinic-story__opening-main {
aspect-ratio: 988/664;
}
.clinic-story__opening-copy {
align-self: center;
}
.clinic-story__opening-copy h1 {
font-size: clamp(2.8rem, 2.5vw, 4.8rem);
line-height: 1.65;
margin-bottom: 2.4rem;
}
.clinic-story__opening-copy p {
font-size: var(--body-md-fs);
}
.clinic-story__opening-balance {
grid-column: 2;
grid-row: 2;
width: 113.56%;
margin-left: -21.38%;
}
.clinic-story__opening-balance .clinic-story__media {
aspect-ratio: 494/333;
}
.clinic-story__opening-care {
grid-column: 1;
grid-row: 2;
margin: 9.74vw 0 0 5.16%;
width: 67.41%;
}
.clinic-story__opening-care .clinic-story__media {
aspect-ratio: 666/443;
}
.clinic-story figcaption {
padding-top: 3.2rem;
font-size: var(--body-md-fs);
}
.clinic-story__private {
text-align: center;
}
.clinic-story__private > .clinic-story__media {
position: absolute;
inset: 0;
}
.clinic-story__private > div {
width: 100%;
max-width: 110rem;
margin: auto;
padding-inline: 2.4rem;
}
.clinic-story__private h2 {
line-height: 1.65;
font-weight: var(--font-weight-medium);
}
.clinic-story__private p {
margin-top: 4.8rem;
}
.clinic-story__philosophy {
padding-bottom: 6.67vw;
}
.clinic-story__philosophy-row {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 30.5vw;
border-top: 1px solid var(--public-line);
}
.clinic-story__philosophy-row figure, .clinic-story__philosophy-row > div {
display: flex;
flex-direction: column;
justify-content: center;
}
.clinic-story__philosophy-row figure {
border-right: 1px solid var(--public-line);
}
.clinic-story__philosophy-row .clinic-story__media {
width: 55.83%;
margin-left: 29.375%;
aspect-ratio: 536/336;
}
.clinic-story__philosophy-row > div {
min-width: 0;
padding: 6rem 5% 6rem 13.54%;
}
.clinic-story__philosophy-row p {
font-size: var(--body-md-fs);
}
.clinic-story__philosophy-row:nth-of-type(1) p {
max-width: 54.5rem;
}
.clinic-story__philosophy-row:nth-of-type(even) figure {
order: 2;
border-right: 0;
border-left: 1px solid var(--public-line);
}
.clinic-story__philosophy-row:nth-of-type(even) .clinic-story__media {
margin-left: 13.54%;
}
.clinic-story__philosophy-row:nth-of-type(even) > div {
padding-left: 28.44%;
padding-right: 10%;
}
.clinic-story__philosophy-row:last-child {
border-bottom: 1px solid var(--public-line);
}
.clinic-story__confidence {
background: var(--public-surface-subtle);
padding-bottom: 6.94vw;
}
.clinic-story__confidence h2.clinic-editorial__chapter {
border-bottom: 1px solid var(--public-brand-accent);
padding-top: 5.83vw;
padding-bottom: 3.33vw;
font-weight: var(--font-weight-regular);
}
.clinic-story__confidence-row {
display: grid;
grid-template-columns: 35.33% minmax(0, 1fr);
align-items: center;
gap: 15.43%;
width: 79%;
margin-left: 14.48%;
min-height: 30.73vw;
}
.clinic-story__confidence-row h3 {
font-size: clamp(2.2rem, 1.458vw, 2.8rem);
}
.clinic-story__confidence-row > div:last-child {
padding-block: 3.2rem;
}
.clinic-story__confidence-row .clinic-editorial__number {
margin-bottom: 2.7rem;
}
.clinic-story__confidence-art {
aspect-ratio: 1;
}
.clinic-story__confidence-art svg {
max-width: 100%;
height: auto;
}
.clinic-story__care {
display: grid;
grid-template-columns: 36% 64%;
min-height: 56.25vw;
background: var(--public-ink);
color: var(--public-brand-surface);
}
.clinic-story__care > div {
padding: 6rem 4.6% 6rem 20.25%;
align-self: center;
}
.clinic-story__care h2 {
font-family: var(--font-heading-family);
font-size: clamp(3rem, 2.5vw, 4.8rem);
margin-bottom: 4.8rem;
}
.clinic-story__care p {
font-size: var(--body-md-fs);
line-height: var(--body-md-lh);
}
.clinic-story__care > .clinic-story__media {
min-height: 100%;
}
.clinic-story__care > .clinic-story__media > img {
position: absolute;
inset: 0;
}
@media (min-width: 768px) and (max-width: 1200px) {
.clinic-story__opening {
column-gap: 6%;
grid-template-columns: 58% 36%;
padding: 18rem 6% 10rem;
}
.clinic-story__opening-balance {
width: 100%;
margin-left: 0;
}
.clinic-story__opening-care {
width: 88%;
margin-left: 0;
}
.clinic-story__philosophy-row .clinic-story__media {
width: 76%;
margin-left: 12%;
}
.clinic-story__philosophy-row > div, .clinic-story__philosophy-row:nth-of-type(even) > div {
padding: 4.8rem 8%;
}
.clinic-story__philosophy-row:nth-of-type(even) .clinic-story__media {
margin-left: 12%;
}
.clinic-story__confidence-row {
width: 88%;
margin-inline: auto;
gap: 8%;
grid-template-columns: 34% minmax(0, 1fr);
}
.clinic-story__care {
grid-template-columns: 42% 58%;
}
.clinic-story__care > div {
padding: 6rem 8%;
}
}
@media (max-width: 1200px) {
.treatment-catalog__layout {
grid-template-columns: 20rem minmax(0, 1fr);
gap: 2.4rem;
}
.treatment-catalog__items {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.treatment-catalog__card {
padding: 2rem;
}
}
@media (max-width: 767px) {
.treatment-catalog {
--catalog-table-padding: 1.6rem .8rem;
--catalog-table-font-size: 1.4rem;
--catalog-table-heading-size: 1.4rem;
}
.treatment-catalog__hero, .treatment-catalog__directory {
width: calc(100% - 4rem);
}
.treatment-catalog__hero {
padding-top: 13rem;
padding-bottom: 4rem;
}
.treatment-catalog__hero p {
font-size: 1.6rem;
}
.treatment-catalog__directory {
min-height: 0;
padding-bottom: 8rem;
}
.treatment-catalog__directory > h2 {
font-size: 2.4rem;
}
.treatment-catalog__layout {
display: block;
}
.treatment-catalog__category-scroll {
position: relative;
min-width: 0;
margin: 0;
overflow: visible;
}
.treatment-catalog__category-scroll.swiper-initialized .treatment-catalog__categories {
overflow: visible;
gap: 0;
}
.treatment-catalog__category-scroll.swiper-initialized .treatment-catalog__category-scrollbar {
display: block;
}
.treatment-catalog__category-scroll.swiper-initialized .treatment-catalog__category-scrollbar.swiper-scrollbar-lock {
display: none;
}
.treatment-catalog__category-scrollbar {
position: relative;
width: 100%;
height: 6px;
border: 1px solid var(--public-muted);
border-radius: 3px;
background: transparent;
overflow: hidden;
touch-action: none;
}
.treatment-catalog__category-scrollbar-drag {
position: relative;
height: 100%;
max-width: 100%;
background: var(--public-muted);
border-radius: 2px;
}
.treatment-catalog__categories {
flex-direction: row;
overflow-x: auto;
padding: 1.6rem 0;
gap: 0.8rem;
}
.treatment-catalog__categories button, .treatment-catalog__categories a {
flex: 0 0 auto;
width: auto;
font-size: 1.5rem;
white-space: nowrap;
}
.treatment-catalog__categories::-webkit-scrollbar {
height: 3px;
background: transparent;
}
.treatment-catalog__categories::-webkit-scrollbar-track {
background: transparent;
}
.treatment-catalog__categories::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
border-radius: 3px;
}
.treatment-catalog__categories::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--color-text-secondary) 55%, transparent);
}
@supports not selector(::-webkit-scrollbar) {
.treatment-catalog__categories {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--color-text-secondary) 30%, transparent) transparent;
}
}
.treatment-catalog__toolbar {
font-size: 1.5rem;
}
.treatment-catalog__toolbar > p {
flex-shrink: 0;
}
.treatment-catalog__actions {
gap: 0.6rem;
}
.treatment-catalog__sort {
font-size: 1.4rem;
}
.treatment-catalog__sort-trigger {
gap: 0.8rem;
}
.treatment-catalog__items {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.2rem;
}
.treatment-catalog__card {
padding: 1.6rem;
min-height: 27rem;
}
.treatment-catalog__card h3 {
font-size: 1.8rem;
}
.treatment-catalog__icon {
width: 7rem;
height: 7rem;
}
.treatment-catalog__price {
font-size: 1.6rem;
}
.treatment-catalog[data-view=list] .treatment-catalog__toolbar {
border-bottom: 2px solid var(--public-ink);
}
.treatment-catalog[data-view=list] .treatment-catalog__list-heading {
display: none;
}
.treatment-catalog[data-view=list] .treatment-catalog__items {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--public-space-xs);
padding-top: var(--public-space-xs);
}
.treatment-catalog[data-view=list] .treatment-catalog__list-options {
display: grid;
gap: var(--public-space-xs);
}
.treatment-catalog[data-view=list] .treatment-catalog__list-options > div {
display: grid;
gap: var(--public-space-2xs);
min-width: 0;
padding: var(--public-space-sm);
border: 1px solid var(--public-line);
border-radius: var(--public-radius-sm);
grid-template-columns: minmax(0, 1fr);
color: var(--public-muted);
}
.treatment-catalog[data-view=list] .treatment-catalog__list-options > div > button {
padding-right: 0;
color: var(--public-ink);
font-weight: var(--list-title-fw);
}
.treatment-catalog[data-view=list] .treatment-catalog__list-options > div > :last-child {
text-align: left;
}
.treatment-catalog[data-view=list] .treatment-catalog__list-price-label {
display: inline;
margin-right: var(--public-space-2xs);
}
.treatment-catalog__dialog {
padding: 2.4rem;
}
.treatment-catalog__dialog h2 {
font-size: 2.8rem;
}
.treatment-catalog__close {
top: 1rem;
right: 1rem;
}
.clinic-editorial h3 {
font-size: 2.2rem;
}
.clinic-editorial__cover {
min-height: 85svh;
}
.clinic-editorial__cover > div {
padding: 8rem 2.4rem;
}
.clinic-editorial__chapter {
padding: 6rem 2rem;
}
.clinic-story h2.clinic-editorial__chapter {
padding: 6rem 2.4rem;
font-size: clamp(3rem, 7.5vw, 4.8rem);
}
.clinic-story p br, .clinic-story figcaption br {
display: initial;
}
.clinic-story__copy-desktop {
display: none;
}
.clinic-story__copy-mobile {
display: inline;
}
.clinic-story__copy-line {
display: block;
text-wrap: balance;
}
.clinic-story__opening {
display: flex;
flex-direction: column;
padding: 13rem 2.4rem 6rem;
gap: 3.2rem;
}
.clinic-story__opening-main {
width: 100%;
}
.clinic-story__opening-copy {
order: -1;
align-self: start;
}
.clinic-story__opening-balance {
width: 78%;
margin: 2rem 0 0 auto;
}
.clinic-story__opening-care {
width: 90%;
margin: 2rem 0 0;
}
.clinic-story__philosophy-row {
display: flex;
flex-direction: column;
padding: 3.2rem 2.4rem;
gap: 2.4rem;
}
.clinic-story__philosophy-row figure, .clinic-story__philosophy-row > div {
padding: 0;
border: 0;
}
.clinic-story__philosophy-row .clinic-story__media {
width: 100%;
margin: 0;
}
.clinic-story__philosophy-row:nth-of-type(even) figure {
order: 0;
border: 0;
}
.clinic-story__philosophy-row:nth-of-type(even) > div {
padding: 0;
}
.clinic-story__philosophy-row:nth-of-type(even) .clinic-story__media {
margin: 0;
}
.clinic-story__confidence-row {
width: calc(100% - 4.8rem);
margin-inline: auto;
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
padding-bottom: 5rem;
}
.clinic-story__confidence-row > div:last-child {
padding: 0;
}
.clinic-story__confidence-art {
width: min(100%, 32rem);
margin: auto;
}
.clinic-story__care {
grid-template-columns: minmax(0, 1fr);
}
.clinic-story__care > div {
padding: 6rem 2.4rem;
}
.clinic-story__care > .clinic-story__media {
min-height: 0;
aspect-ratio: 1.2;
}
}
@media (prefers-reduced-motion: no-preference) {
.clinic-space__hero:not(.is-hero-ready) > :is(.clinic-space__media, .clinic-space__hero-copy) {
visibility: hidden;
animation: newyoung-motion-content-fallback 1ms linear 1500ms forwards;
}
.clinic-space__hero.is-hero-loading > :is(.clinic-space__media, .clinic-space__hero-copy) {
animation: none;
}
.is-page-motion-fallback .clinic-space__hero > :is(.clinic-space__media, .clinic-space__hero-copy) {
visibility: visible;
animation: none;
}
[data-barba=container].is-page-motion-pending .clinic-reset__hero-content,
[data-barba=container].is-page-motion-pending [data-anim=type-mask]:not(.is-text-reveal-ready),
[data-barba=container].is-page-motion-pending :is([data-page-transition-content], .public-footer) :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
blockquote,
figcaption,
dt,
dd,
address,
span,
strong,
em,
small,
time,
a):not([data-no-text-reveal],
[data-no-text-reveal] *,
.sr-only,
[aria-hidden=true],
[aria-hidden=true] *,
[hidden],
[hidden] *):not(.is-text-reveal-ready) {
visibility: hidden;
animation: newyoung-motion-content-fallback 1ms linear 1500ms forwards;
}
}
.public-site.newyoung-wechat {
--color-text-primary: var(--public-brand-surface);
--color-text-secondary: var(--public-brand-accent-soft);
--color-border-default: color-mix(
in srgb,
var(--public-brand-accent-soft) 28%,
transparent
);
min-height: 100svh;
color: var(--color-text-primary);
background: var(--public-brand-ink);
}
.public-site.newyoung-wechat .newyoung-wechat__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
align-items: center;
gap: clamp(4rem, 8vw, 14rem);
width: min(112rem, 100% - var(--public-shell-gutter) * 2);
min-height: 100svh;
margin-inline: auto;
padding-block: calc(var(--public-header-height) + 7.2rem) 8rem;
}
.public-site.newyoung-wechat .newyoung-wechat__eyebrow {
margin: 0 0 3.2rem;
color: var(--color-text-secondary);
font-family: var(--public-home-title-family);
font-size: 1.2rem;
letter-spacing: 0.24em;
}
.public-site.newyoung-wechat .newyoung-wechat__title {
margin: 0;
font-size: clamp(3.2rem, 3.6vw, 5.6rem);
font-weight: var(--font-weight-regular);
line-height: 1.35;
letter-spacing: -0.035em;
word-break: keep-all;
text-wrap: balance;
}
.public-site.newyoung-wechat .newyoung-wechat__description {
max-width: 36rem;
margin: 3.2rem 0 0;
padding-top: 3.2rem;
border-top: 1px solid var(--color-border-default);
color: var(--color-text-secondary);
font-size: 1.6rem;
line-height: 1.9;
word-break: keep-all;
}
.public-site.newyoung-wechat .newyoung-wechat__back {
display: inline-flex;
align-items: center;
gap: 1.2rem;
min-height: 4.4rem;
margin-top: 4rem;
color: var(--color-text-secondary);
font-size: 1.3rem;
text-decoration: none;
}
.public-site.newyoung-wechat .newyoung-wechat__back:hover {
color: var(--color-text-primary);
text-decoration: underline;
text-underline-offset: 0.5rem;
}
.public-site.newyoung-wechat .newyoung-wechat__contact {
min-width: 0;
}
.public-site.newyoung-wechat .newyoung-wechat__qr {
margin: 0;
}
.public-site.newyoung-wechat .newyoung-wechat__qr figcaption {
margin-top: 2.4rem;
color: var(--color-text-secondary);
font-size: 1.3rem;
line-height: 1.8;
word-break: keep-all;
}
.public-site.newyoung-wechat .newyoung-wechat__image {
padding: 1.2rem;
border: 1px solid var(--color-border-default);
}
.public-site.newyoung-wechat .newyoung-wechat__image img {
display: block;
width: 100%;
height: auto;
}
.public-site.newyoung-wechat .newyoung-wechat__download {
position: relative;
isolation: isolate;
border: 0;
background: transparent;
border-radius: var(--public-action-radius);
text-decoration: none;
}
.public-site.newyoung-wechat .newyoung-wechat__download::before, .public-site.newyoung-wechat .newyoung-wechat__download::after {
position: absolute;
inset-block: 0;
box-sizing: border-box;
width: var(--public-action-end-width);
border: 1px solid currentColor;
content: "";
pointer-events: none;
transition: width var(--public-action-duration) var(--public-ease);
}
.public-site.newyoung-wechat .newyoung-wechat__download::before {
inset-inline-start: 0;
border-inline-end: 0;
border-radius: var(--public-action-radius) 0 0 var(--public-action-radius);
}
.public-site.newyoung-wechat .newyoung-wechat__download::after {
inset-inline-end: 0;
border-inline-start: 0;
border-radius: 0 var(--public-action-radius) var(--public-action-radius) 0;
}
.public-site.newyoung-wechat .newyoung-wechat__download:hover::before, .public-site.newyoung-wechat .newyoung-wechat__download:hover::after, .public-site.newyoung-wechat .newyoung-wechat__download:focus-visible::before, .public-site.newyoung-wechat .newyoung-wechat__download:focus-visible::after, .public-site.newyoung-wechat .newyoung-wechat__download.is-frame-completing::before, .public-site.newyoung-wechat .newyoung-wechat__download.is-frame-completing::after, .public-site.newyoung-wechat .newyoung-wechat__download[aria-expanded=true]::before, .public-site.newyoung-wechat .newyoung-wechat__download[aria-expanded=true]::after {
width: calc(50% + 1px);
}
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
.public-site.newyoung-wechat .newyoung-wechat__download::before, .public-site.newyoung-wechat .newyoung-wechat__download::after {
width: calc(50% + 1px);
}
}
.public-site.newyoung-wechat .newyoung-wechat__download:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.public-site.newyoung-wechat .newyoung-wechat__download::before, .public-site.newyoung-wechat .newyoung-wechat__download::after {
transition: none;
}
}
.public-site.newyoung-wechat .newyoung-wechat__download {
display: flex;
align-items: center;
justify-content: center;
gap: 1.6rem;
min-height: var(--public-control-lg);
margin-top: 2.4rem;
padding: 1.6rem 2.6rem;
color: var(--public-brand-ink);
font-size: var(--public-button-font-size);
font-weight: var(--font-weight-medium);
}
@media (max-width: 767px) {
.public-site.newyoung-wechat .newyoung-wechat__inner {
grid-template-columns: minmax(0, 1fr);
gap: 4rem;
max-width: 44rem;
padding-block: calc(var(--public-header-height) + 4.8rem) 6.4rem;
}
.public-site.newyoung-wechat .newyoung-wechat__eyebrow {
margin-bottom: 2rem;
}
.public-site.newyoung-wechat .newyoung-wechat__description {
max-width: none;
margin-top: 2.4rem;
padding-top: 2.4rem;
}
.public-site.newyoung-wechat .newyoung-wechat__back {
margin-top: 1.6rem;
}
}
.newyoung-appointment {
--public-sticky-section-nav-height: calc(
var(--public-filter-tab-mobile-height) + (var(--public-space-xs) * 2)
);
color: var(--public-ink);
background: var(--public-brand-surface);
}
.newyoung-appointment br {
display: initial;
}
.newyoung-appointment__intro {
padding: calc(var(--public-header-height) + var(--public-space-2xl)) max(4rem, var(--public-shell-gutter)) var(--public-space-2xl);
}
.newyoung-appointment__intro-inner {
display: block;
}
.newyoung-appointment__title, .newyoung-appointment__section-heading h2 {
margin: 0;
font-family: var(--public-home-title-family);
font-weight: var(--font-weight-regular);
letter-spacing: 0.03em;
}
.newyoung-appointment__title {
flex: 0 0 auto;
font-size: clamp(3.2rem, 2.5vw, 4rem);
line-height: 1.1;
}
.newyoung-appointment__content {
width: min(104rem, 100% - var(--public-shell-gutter) * 2);
margin-inline: auto;
padding-block: var(--section-sm) var(--section-md);
}
.newyoung-appointment__section {
border-top: 1px solid var(--public-line-strong);
scroll-margin-top: calc(var(--public-header-height) + var(--public-sticky-section-nav-height) + var(--public-space-xl));
}
.newyoung-appointment__section:first-of-type {
border-top: none;
}
.newyoung-appointment__section.no-section-md {
padding-top: var(--public-space-2xl);
}
.newyoung-appointment__section-heading {
display: grid;
gap: var(--public-space-md);
margin-bottom: var(--public-space-2xl);
}
.newyoung-appointment__section-heading h2 {
font-size: 2rem;
font-weight: var(--font-weight-medium);
line-height: 1.35;
}
.newyoung-appointment__section-heading p {
max-width: 100%;
color: var(--public-muted);
font-size: var(--body-md-fs);
line-height: 1.7;
text-wrap: pretty;
}
.newyoung-appointment__section-heading--location p {
max-width: 62rem;
color: var(--public-ink);
}
.newyoung-appointment__subsection, .newyoung-appointment__detail {
display: grid;
gap: var(--public-space-md);
}
.newyoung-appointment__subsection h3, .newyoung-appointment__detail h3 {
margin: 0;
font-size: var(--body-md-fs);
font-weight: var(--font-weight-medium);
line-height: 1.5;
}
.newyoung-appointment__channel-list {
border-top: 1px solid var(--public-line);
}
.newyoung-appointment__channel-row {
display: grid;
grid-template-columns: minmax(18rem, 0.34fr) minmax(0, 1fr);
min-height: 7.2rem;
align-items: center;
border-bottom: 1px solid var(--public-line);
color: inherit;
}
.newyoung-appointment__channel-row:last-of-type {
border-bottom: none;
}
.newyoung-appointment__channel-row strong {
min-width: 0;
padding: var(--public-space-md) var(--public-space-xl);
align-self: stretch;
display: flex;
align-items: center;
gap: var(--public-space-xs);
}
.newyoung-appointment__channel-icon {
flex: none;
width: 1.8rem;
font-size: 1.6rem;
text-align: center;
height: 1.8rem;
object-fit: contain;
}
.newyoung-appointment__channel-icon--naver {
width: 2.4rem;
height: 2.4rem;
margin-inline: -0.3rem;
}
.newyoung-appointment__channel-row small {
display: block;
margin-top: 0.4rem;
color: var(--public-muted);
font-size: 1.2rem;
font-weight: var(--font-weight-regular);
}
.newyoung-appointment__messenger-links a {
display: inline-block;
margin-right: 0.8rem;
padding-block: 0.4rem;
text-decoration: underline;
text-underline-offset: 0.3rem;
}
.newyoung-appointment__messenger-links a:focus-visible {
outline: 2px solid var(--public-ink);
outline-offset: 3px;
}
.newyoung-appointment__channel-pending {
color: var(--public-muted);
font-size: var(--body-sm-fs);
}
.newyoung-appointment__social-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 var(--public-space-2xl);
}
.newyoung-appointment__social-link {
position: relative;
display: inline-flex;
align-items: center;
min-height: var(--public-control-sm);
padding-inline-start: calc(var(--public-link-line-hover-width) + var(--public-link-line-gap));
border: 0;
border-radius: 0;
background: transparent;
text-decoration: none;
}
.newyoung-appointment__social-link::before {
position: absolute;
inset-inline-start: 0;
top: 50%;
width: var(--public-link-line-width);
height: 1px;
border: 0;
border-radius: 0;
background: currentColor;
content: "";
pointer-events: none;
transition: width var(--public-action-duration) var(--public-ease);
}
.newyoung-appointment__social-link::after {
content: none;
}
.newyoung-appointment__social-link:hover::before, .newyoung-appointment__social-link:focus-visible::before {
width: var(--public-link-line-hover-width);
}
.newyoung-appointment__social-link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.newyoung-appointment__social-link::before {
transition: none;
}
}
.newyoung-appointment__social-link {
gap: var(--public-space-md);
min-height: 7.2rem;
padding-block: var(--public-space-md);
color: var(--public-ink);
line-height: 1.5;
}
.newyoung-appointment__channel-link {
justify-self: end;
margin: var(--public-space-md) var(--public-space-xl);
color: var(--public-ink);
transition: color var(--public-duration) var(--public-ease);
}
.newyoung-appointment__channel-link:lang(ja), .newyoung-appointment__channel-link:lang(zh) {
min-width: 0;
word-break: normal;
overflow-wrap: anywhere;
}
.newyoung-appointment__channel-link:hover, .newyoung-appointment__channel-link:focus-visible {
color: var(--public-muted);
}
.newyoung-appointment__map-actions {
display: flex;
flex-wrap: wrap;
gap: var(--public-space-lg);
}
.newyoung-appointment__map-actions a {
color: var(--public-ink);
text-underline-offset: 0.4rem;
}
.newyoung-appointment__map-actions a:hover, .newyoung-appointment__map-actions a:focus-visible {
color: var(--public-muted);
}
@media (hover: none) and (pointer: coarse) {
.newyoung-appointment__channel-link[href]::before, .newyoung-appointment__social-link::before, .newyoung-appointment__map-actions a::before {
width: 0.8rem;
transition-duration: 280ms;
}
.newyoung-appointment__channel-link[href]:hover::before, .newyoung-appointment__social-link:hover::before, .newyoung-appointment__map-actions a:hover::before {
width: 0.8rem;
}
.newyoung-appointment__channel-link[href].is-opening::before, .newyoung-appointment__social-link.is-opening::before, .newyoung-appointment__map-actions a.is-opening::before {
width: var(--public-link-line-hover-width);
}
}
@media (prefers-reduced-motion: reduce) {
.newyoung-appointment__channel-link[href]::before, .newyoung-appointment__social-link::before, .newyoung-appointment__map-actions a::before {
transition: none;
}
}
.newyoung-appointment__map {
width: 100%;
margin: 0;
border: 1px solid var(--public-line);
border-radius: 0.8rem;
overflow: hidden;
}
.newyoung-appointment__map img {
display: block;
width: 100%;
height: auto;
}
.newyoung-appointment__detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-2xl);
margin-top: var(--section-sm);
}
.newyoung-appointment__detail {
align-content: start;
padding-top: var(--public-space-xl);
border-top: 1px solid var(--public-line);
scroll-margin-top: calc(var(--public-header-height) + var(--public-sticky-section-nav-height) + var(--public-space-xl));
}
.newyoung-appointment__hours {
display: grid;
gap: var(--public-space-xs);
}
.newyoung-appointment__hours > div {
display: grid;
grid-template-columns: minmax(10rem, 0.42fr) minmax(0, 1fr);
gap: var(--public-space-md);
}
.newyoung-appointment__hours dd, .newyoung-appointment__parking-copy {
color: var(--public-muted);
}
.newyoung-appointment__parking-copy {
display: grid;
gap: var(--public-space-lg);
line-height: 1.7;
}
.newyoung-appointment__parking-copy p {
text-wrap: pretty;
}
.newyoung-appointment__parking-copy strong {
color: var(--public-ink);
font-weight: var(--font-weight-medium);
}
.newyoung-appointment__parking-sign {
display: inline-block;
white-space: nowrap;
}
.newyoung-appointment__parking-logo {
display: inline-flex;
vertical-align: middle;
margin-inline: 0.5rem;
}
.newyoung-appointment__parking-logo .public-logo {
width: 4.8rem;
min-width: 0;
height: auto;
}
.newyoung-appointment__parking-logo .public-logo__asset,
.newyoung-appointment__parking-logo .public-logo__image {
width: 100%;
height: auto;
}
.newyoung-appointment__contact-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--public-space-2xl) var(--public-space-xl);
}
.newyoung-appointment__contact-list > div {
display: grid;
align-content: start;
gap: var(--public-space-sm);
}
.newyoung-appointment__contact-list dt {
font-size: var(--body-xs-fs);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04em;
}
.newyoung-appointment__contact-list dd, .newyoung-appointment__contact-list a {
color: var(--public-muted);
line-height: 1.6;
overflow-wrap: anywhere;
}
.newyoung-appointment__contact-list a:hover, .newyoung-appointment__contact-list a:focus-visible {
color: var(--public-ink);
}
@media (max-width: 1023px) {
.newyoung-appointment__contact-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.newyoung-appointment__intro {
padding: calc(var(--public-header-height) + var(--public-space-2xl) + 1.2rem) var(--public-shell-gutter) var(--public-space-xl);
}
.newyoung-appointment__title {
font-size: 2.8rem;
}
.newyoung-appointment__content {
width: calc(100% - var(--public-shell-gutter) * 2);
padding-block: var(--public-space-3xl);
}
.newyoung-appointment__section.no-section-md {
padding-bottom: var(--section-sm);
}
.newyoung-appointment__section-heading {
gap: var(--public-space-sm);
margin-bottom: var(--public-space-xl);
}
.newyoung-appointment__section-heading h2 {
font-size: 2rem;
}
.newyoung-appointment__channel-row {
grid-template-columns: minmax(0, 1fr) max-content;
min-height: 8.8rem;
}
.newyoung-appointment__channel-row strong {
padding: var(--public-space-md) var(--public-space-sm);
white-space: normal;
}
.newyoung-appointment__channel-link {
margin: var(--public-space-md) var(--public-space-sm);
max-width: 14rem;
white-space: normal;
text-align: right;
}
.newyoung-appointment__social-list {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-appointment__detail-grid {
grid-template-columns: minmax(0, 1fr);
margin-top: var(--public-space-3xl);
}
.newyoung-appointment__contact-list {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-appointment__contact-list > div {
grid-template-columns: minmax(9rem, 0.34fr) minmax(0, 1fr);
align-items: baseline;
gap: var(--public-space-md);
}
}
[data-barba=container].is-page-motion-pending [data-newyoung-intro] {
animation: newyoung-motion-intro-fallback 1ms linear 1500ms forwards;
}
@media (max-width: 767px) {
main.newyoung-page {
--display-md-fs: clamp(3.2rem, 9.2vw, 3.6rem);
--display-lg-fs: clamp(3.2rem, 9.2vw, 3.6rem);
--display-xl-fs: clamp(3.2rem, 9.2vw, 3.6rem);
--heading-lg-fs: clamp(2.8rem, 8.2vw, 3.2rem);
--heading-xl-fs: clamp(3.2rem, 9.2vw, 3.6rem);
--subhero-title-fs: clamp(3.2rem, 9.2vw, 3.6rem);
--section-title-fs: clamp(2.8rem, 8.2vw, 3.2rem);
--middle-title-lg-fs: clamp(2.8rem, 8.2vw, 3.2rem);
}
}
@keyframes newyoung-motion-content-fallback {
to {
visibility: visible;
opacity: 1;
transform: none;
}
}
@keyframes newyoung-motion-intro-fallback {
to {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
}
.ny-reveal-copy {
opacity: 0;
}
.ny-reveal-copy.is-text-reveal-complete {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.ny-reveal-copy,
[data-anim=type-mask] {
opacity: 1;
visibility: visible;
filter: none;
}
}
.newyoung-site {
color: var(--public-ink);
background: var(--public-white);
}
.newyoung-site__hero, .newyoung-site__page-hero {
display: grid;
align-items: end;
min-height: clamp(46rem, 60vw, 76rem);
padding-top: var(--public-header-height);
background: linear-gradient(135deg, var(--public-surface-subtle), var(--public-white) 58%, var(--public-blue-soft));
}
.newyoung-site__hero-inner, .newyoung-site__page-hero .newyoung-site__inner {
width: 100%;
padding-bottom: var(--section-lg);
}
.newyoung-site__eyebrow {
color: var(--public-blue);
}
.newyoung-site__hero-title, .newyoung-site__page-title {
margin-top: var(--public-space-sm);
max-width: 14ch;
}
.newyoung-site__hero-lead, .newyoung-site__page-lead {
display: block;
margin-top: var(--public-space-md);
max-width: 46rem;
}
.newyoung-site__hero-description, .newyoung-site__section-copy {
margin-top: var(--public-space-md);
max-width: 64rem;
color: var(--public-muted);
}
.newyoung-site__actions {
display: flex;
flex-wrap: wrap;
gap: var(--public-space-xs);
margin-top: var(--public-space-xl);
}
.newyoung-site__inner {
width: 100%;
}
.newyoung-site__section-heading {
display: grid;
gap: var(--public-space-xs);
margin-bottom: var(--public-space-2xl);
}
.newyoung-site__section--contrast {
color: var(--public-white);
background: var(--public-navy-deep);
}
.newyoung-site__section--contrast .newyoung-site__section-copy {
color: var(--public-line);
}
.newyoung-site__section--contrast .public-button {
margin-top: var(--public-space-xl);
}
.newyoung-site__section--cta {
background: var(--public-surface);
}
.newyoung-site__link-grid, .newyoung-site__treatment-grid, .newyoung-site__channel-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--public-space-sm);
}
.newyoung-site__link-card, .newyoung-site__treatment-item, .newyoung-site__channel {
display: grid;
align-content: space-between;
min-height: 20rem;
padding: var(--public-space-xl);
border: 1px solid var(--public-line);
color: inherit;
background: var(--public-white);
text-decoration: none;
transition: border-color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease);
}
.newyoung-site__link-card:hover, .newyoung-site__link-card:focus-visible, .newyoung-site__treatment-item:hover, .newyoung-site__treatment-item:focus-visible, .newyoung-site__channel:hover, .newyoung-site__channel:focus-visible {
border-color: var(--public-line-strong);
background: var(--public-surface-subtle);
outline: none;
}
.newyoung-site__link-index, .newyoung-site__link-action {
color: var(--public-muted);
}
.newyoung-site__link-title, .newyoung-site__treatment-label {
margin-top: var(--public-space-2xl);
max-width: 18ch;
}
.newyoung-site__link-action {
margin-top: var(--public-space-xl);
}
.newyoung-site__editorial {
display: grid;
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
gap: var(--public-space-3xl);
}
.newyoung-site__prose {
display: grid;
gap: var(--public-space-md);
color: var(--public-muted);
}
.newyoung-site__cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-xl);
}
.newyoung-site__treatment-icon {
width: 8rem;
}
.newyoung-site__pricing, .newyoung-site__book {
display: grid;
gap: var(--section-sm);
}
.newyoung-site__pricing-category, .newyoung-site__book-section {
scroll-margin-top: calc(var(--public-header-height) + var(--public-space-xl));
padding-top: var(--public-space-2xl);
border-top: 1px solid var(--public-line-strong);
}
.newyoung-site__pricing-group {
display: grid;
grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 1.45fr);
gap: var(--public-space-2xl);
padding-block: var(--public-space-xl);
border-bottom: 1px solid var(--public-line);
}
.newyoung-site__price-list, .newyoung-site__hours, .newyoung-site__contact-list {
display: grid;
}
.newyoung-site__price-row, .newyoung-site__hours > div, .newyoung-site__contact-list > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--public-space-lg);
padding-block: var(--public-space-sm);
border-bottom: 1px solid var(--public-line);
}
.newyoung-site__price-row dd, .newyoung-site__hours dd, .newyoung-site__contact-list dd {
margin: 0;
text-align: right;
}
.newyoung-site__channel-grid {
margin-top: var(--public-space-xl);
}
.newyoung-site__channel {
min-height: 13rem;
}
.newyoung-site__channel--disabled {
color: var(--public-muted);
background: var(--public-surface);
cursor: not-allowed;
}
.newyoung-site__hours, .newyoung-site__contact-list {
margin-top: var(--public-space-xl);
}
@media (max-width: 1023px) {
.newyoung-site__link-grid, .newyoung-site__treatment-grid, .newyoung-site__channel-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.newyoung-site__hero, .newyoung-site__page-hero {
min-height: 52rem;
}
.newyoung-site__link-grid, .newyoung-site__treatment-grid, .newyoung-site__channel-grid, .newyoung-site__editorial, .newyoung-site__pricing-group {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-site__link-card, .newyoung-site__treatment-item {
min-height: 16rem;
}
.newyoung-site__cta {
align-items: flex-start;
flex-direction: column;
}
.newyoung-site__price-row, .newyoung-site__hours > div, .newyoung-site__contact-list > div {
grid-template-columns: minmax(0, 1fr);
gap: var(--public-space-2xs);
}
.newyoung-site__price-row dd, .newyoung-site__hours dd, .newyoung-site__contact-list dd {
text-align: left;
}
}
.newyoung-content-page {
overflow: clip;
color: var(--public-ink);
background: var(--public-brand-surface);
}
.newyoung-content-hero {
position: relative;
isolation: isolate;
display: grid;
min-height: clamp(58rem, 68vw, 84rem);
align-items: end;
overflow: hidden;
border-bottom: 1px solid var(--public-line-strong);
background: radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--public-brand-accent-soft) 58%, transparent), transparent 34%), linear-gradient(135deg, var(--public-brand-surface-strong), var(--public-brand-surface) 56%, var(--public-white));
}
.newyoung-content-hero.no-section-md {
padding-top: calc(var(--public-header-height) + var(--section-sm));
}
.newyoung-content-hero::after {
position: absolute;
z-index: -1;
right: var(--public-shell-gutter);
bottom: var(--section-sm);
width: min(30vw, 38rem);
height: 1px;
background: var(--public-line-strong);
content: "";
}
.newyoung-content-hero__inner {
display: grid;
width: 100%;
gap: var(--public-space-lg);
}
.newyoung-content-hero__breadcrumb {
color: var(--public-muted);
}
.newyoung-content-hero__title {
max-width: 15ch;
text-wrap: balance;
}
.newyoung-content-hero__lead {
max-width: 68rem;
color: var(--public-muted);
text-wrap: balance;
white-space: normal;
}
.newyoung-content-sections {
background: var(--public-brand-surface);
}
.newyoung-content-page--doctor {
background: var(--public-brand-surface);
}
.newyoung-doctor-visual-hero + .newyoung-doctor-hero.no-section-md {
padding-top: clamp(12.8rem, 8.284789644vw + 9.6932038835rem, 25.6rem);
}
.newyoung-doctor-hero {
position: relative;
isolation: isolate;
background: var(--public-brand-surface);
}
.newyoung-doctor-hero.no-section-md {
padding-block: calc(var(--public-header-height) + clamp(12.8rem, 8.284789644vw + 9.6932038835rem, 25.6rem)) clamp(12.8rem, 8.284789644vw + 9.6932038835rem, 25.6rem);
}
.newyoung-doctor-hero__inner {
display: grid;
grid-template-columns: minmax(24rem, 34rem) minmax(0, 1fr);
align-items: start;
gap: clamp(9.6rem, 6.213592233vw + 7.2699029126rem, 19.2rem);
}
.newyoung-doctor-hero__content {
display: grid;
gap: var(--public-space-2xl);
}
.newyoung-doctor-hero__copy {
display: grid;
max-width: 72rem;
gap: var(--public-space-lg);
}
.newyoung-doctor-hero__title {
margin: 0;
color: var(--public-ink);
text-wrap: balance;
}
.newyoung-doctor-hero__portrait {
position: sticky;
top: calc(var(--public-header-height) + var(--public-space-lg));
justify-self: start;
width: min(100%, 34rem);
aspect-ratio: 1470/2226;
margin: 0;
overflow: hidden;
background: var(--public-brand-surface-strong);
}
.newyoung-doctor-hero__portrait-mask {
position: absolute;
z-index: 1;
inset: 0;
transform: translateX(101%);
background: var(--public-brand-ink);
pointer-events: none;
}
.newyoung-doctor-hero__portrait img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.newyoung-doctor-sections {
display: grid;
gap: var(--public-space-2xl);
}
.newyoung-doctor-section {
position: relative;
isolation: isolate;
display: grid;
gap: var(--public-space-md);
}
.newyoung-doctor-section__signature-layer {
width: 14.7rem;
justify-self: start;
margin-top: var(--public-space-xs);
pointer-events: none;
}
.newyoung-doctor-section__signature-art {
width: 100%;
}
.newyoung-doctor-section__signature-svg {
display: block;
width: 100%;
height: auto;
}
.newyoung-doctor-section__title {
max-width: 20ch;
margin: 0;
text-wrap: balance;
}
.newyoung-doctor-section__body {
display: grid;
max-width: 72rem;
gap: var(--public-space-2xl);
}
.newyoung-doctor-section__paragraph {
max-width: 72rem;
margin: 0;
color: var(--public-muted);
text-wrap: pretty;
}
.newyoung-doctor-section__paragraph br {
display: block;
}
.newyoung-doctor-section__body > .newyoung-doctor-section__paragraph:first-child {
color: var(--public-ink);
}
.newyoung-doctor-section__list {
display: grid;
gap: var(--public-space-xs);
margin: 0;
color: var(--public-ink);
}
.newyoung-doctor-section__list li {
padding: 0;
}
@media (max-width: 1024px) {
.newyoung-doctor-hero__inner {
grid-template-columns: minmax(22rem, 28rem) minmax(0, 1fr);
gap: var(--public-space-2xl);
}
}
@media (max-width: 767px) {
.newyoung-doctor-hero__inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--public-space-xl);
}
.newyoung-doctor-hero__copy {
gap: var(--public-space-lg);
}
.newyoung-doctor-hero__portrait {
position: relative;
top: auto;
justify-self: start;
width: min(82%, 30rem);
}
.newyoung-doctor-section {
gap: var(--public-space-md);
}
.newyoung-doctor-section__signature-layer {
width: 12rem;
}
.newyoung-doctor-section__body {
gap: var(--public-space-sm);
}
.newyoung-doctor-section__list {
gap: 0.8rem;
}
.newyoung-doctor-section__list li {
padding: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.newyoung-doctor-hero__portrait, .newyoung-doctor-hero__portrait img {
opacity: 1;
clip-path: none;
transform: none;
}
.newyoung-doctor-hero__portrait-mask {
display: none;
}
}
.newyoung-space-hero {
position: relative;
isolation: isolate;
display: grid;
min-height: max(72rem, 100svh);
overflow: hidden;
color: var(--public-white);
background: var(--public-brand-ink);
}
.newyoung-space-hero.no-section-sm {
padding-top: calc(var(--public-header-height) + var(--public-space-xl));
}
.newyoung-space-hero__media, .newyoung-space-hero__shade, .newyoung-space-hero__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.newyoung-space-hero__media {
z-index: -2;
margin: 0;
overflow: hidden;
}
.newyoung-space-hero__media img {
object-fit: cover;
object-position: center 52%;
filter: saturate(0.76) contrast(0.98) brightness(0.88) sepia(0.08);
transform: scale(1.015);
}
.newyoung-space-hero__shade {
z-index: -1;
background: linear-gradient(180deg, rgba(22, 14, 10, 0.62) 0%, transparent 31%), linear-gradient(90deg, rgba(18, 12, 9, 0.12) 24%, rgba(19, 12, 8, 0.76) 100%), linear-gradient(0deg, rgba(19, 12, 8, 0.46) 0%, transparent 42%);
}
.newyoung-space-hero__inner {
display: grid;
grid-template-rows: minmax(0, 1fr);
width: 100%;
}
.newyoung-space-hero__copy {
padding-top: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 9.6rem);
align-self: center;
display: grid;
width: min(92rem, 64%);
gap: var(--public-space-md);
padding-right: var(--public-space-lg);
}
.newyoung-space-hero__title {
max-width: none;
margin: 0;
color: inherit;
font-family: var(--public-home-title-family);
font-weight: var(--font-weight-regular);
line-height: 1.08;
letter-spacing: -0.045em;
text-wrap: balance;
white-space: nowrap;
}
.newyoung-space-hero__lead {
max-width: 50rem;
margin: 0;
color: color-mix(in srgb, var(--public-white) 84%, transparent);
line-height: 1.75;
}
.newyoung-space-feature {
border-bottom: 1px solid var(--public-line-strong);
background: var(--public-brand-surface);
}
.newyoung-space-feature__inner {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: center;
gap: var(--public-space-xl);
}
.newyoung-space-feature__copy {
display: grid;
align-content: center;
gap: var(--public-space-xl);
}
.newyoung-space-feature__title {
max-width: 13ch;
margin: 0;
color: var(--public-brand-ink);
text-wrap: balance;
}
.newyoung-space-feature__description, .newyoung-space-feature__body {
max-width: 52rem;
color: var(--public-muted);
}
.newyoung-space-feature__body {
display: grid;
gap: var(--public-space-md);
}
.newyoung-space-feature__description, .newyoung-space-feature__body p {
margin: 0;
text-wrap: pretty;
}
.newyoung-space-feature__media {
position: relative;
margin: 0;
overflow: hidden;
background: var(--public-brand-surface-strong);
}
.newyoung-space-feature__media::after {
position: absolute;
inset: 0;
background: rgba(67, 44, 31, 0.08);
content: "";
mix-blend-mode: multiply;
pointer-events: none;
}
.newyoung-space-feature__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.76) contrast(0.97) brightness(0.94) sepia(0.08);
will-change: transform;
}
.newyoung-space-feature__media--landscape {
aspect-ratio: 3/2;
}
.newyoung-space-feature__media--portrait {
aspect-ratio: 2/3;
}
.newyoung-space-feature--overview .newyoung-space-feature__copy {
grid-column: 1/-1;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: start;
}
.newyoung-space-feature--overview .newyoung-space-feature__title {
grid-column: 1/span 6;
max-width: none;
}
.newyoung-space-feature--overview .newyoung-space-feature__description {
grid-column: 8/-1;
}
.newyoung-space-feature--overview .newyoung-space-feature__media {
grid-column: 1/-1;
margin-top: var(--public-space-xl);
}
.newyoung-space-feature--consultation .newyoung-space-feature__media {
grid-column: 1/span 8;
}
.newyoung-space-feature--consultation .newyoung-space-feature__copy {
grid-column: 9/-1;
padding-left: var(--public-space-xl);
}
.newyoung-space-feature--brand {
color: var(--public-white);
background: var(--public-brand-ink);
}
.newyoung-space-feature--brand .newyoung-space-feature__inner {
min-height: min(92rem, 100svh);
}
.newyoung-space-feature--brand .newyoung-space-feature__media {
grid-column: 2/span 4;
max-height: 72rem;
}
.newyoung-space-feature--brand .newyoung-space-feature__copy {
grid-column: 7/span 5;
}
.newyoung-space-feature--brand .newyoung-space-feature__body {
color: color-mix(in srgb, var(--public-white) 68%, transparent);
}
.newyoung-space-feature--brand .newyoung-space-feature__title {
color: var(--public-white);
}
.newyoung-space-gallery {
overflow: hidden;
border-bottom: 1px solid var(--public-line-strong);
color: var(--public-white);
background: var(--public-brand-ink);
}
.newyoung-space-gallery__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--public-space-xl);
}
.newyoung-space-gallery__header {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--public-space-xl);
}
.newyoung-space-gallery__heading {
display: grid;
max-width: 80rem;
gap: var(--public-space-xs);
}
.newyoung-space-gallery__title {
margin: 0;
color: var(--public-white);
}
.newyoung-space-gallery__controls {
display: flex;
flex: none;
align-items: center;
gap: var(--public-space-md);
}
.newyoung-space-gallery__button {
display: grid;
width: 4.8rem;
height: 4.8rem;
padding: 0;
border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
border-radius: 50%;
color: var(--public-white);
background: transparent;
cursor: pointer;
transition: opacity var(--public-duration) var(--public-ease);
place-items: center;
}
.newyoung-space-gallery__button:hover, .newyoung-space-gallery__button:focus-visible {
opacity: 0.58;
}
.newyoung-space-gallery__button:focus-visible {
outline: 1px solid currentColor;
outline-offset: -0.4rem;
}
.newyoung-space-gallery__button.swiper-button-disabled {
cursor: default;
opacity: 0.3;
}
.newyoung-space-gallery__pagination {
position: static;
width: auto;
min-width: 6.6rem;
color: color-mix(in srgb, var(--public-white) 62%, transparent);
font-variant-numeric: tabular-nums;
text-align: center;
}
.newyoung-space-gallery__stage {
width: 100%;
height: clamp(64rem, 78svh, 82rem);
overflow: hidden;
background: color-mix(in srgb, var(--public-brand-ink) 88%, var(--public-white));
}
.newyoung-space-gallery__slide {
display: grid;
grid-template-columns: minmax(24rem, 0.46fr) minmax(0, 1.54fr);
margin: 0;
background: color-mix(in srgb, var(--public-brand-ink) 92%, var(--public-white));
}
.newyoung-space-gallery__media {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: color-mix(in srgb, var(--public-brand-ink) 84%, var(--public-white));
}
.newyoung-space-gallery__media::after {
position: absolute;
inset: 0;
background: rgba(67, 44, 31, 0.08);
content: "";
mix-blend-mode: multiply;
pointer-events: none;
}
.newyoung-space-gallery__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.74) contrast(0.97) brightness(0.93) sepia(0.09);
}
.newyoung-space-gallery__caption {
display: grid;
align-content: end;
margin: 0;
padding: var(--public-space-2xl);
gap: var(--public-space-sm);
color: var(--public-white);
}
.newyoung-space-gallery__number {
align-self: start;
margin-bottom: auto;
color: color-mix(in srgb, var(--public-white) 42%, transparent);
font-family: var(--public-home-title-family);
font-weight: var(--font-weight-regular);
}
.newyoung-space-gallery__label {
color: inherit;
font-family: var(--public-home-title-family);
font-weight: var(--font-weight-regular);
line-height: 1;
letter-spacing: -0.03em;
}
.newyoung-space-gallery__description {
max-width: 26rem;
color: color-mix(in srgb, var(--public-white) 62%, transparent);
}
.newyoung-space-gallery__slide--portrait .newyoung-space-gallery__media img {
object-fit: cover;
}
.newyoung-space-gallery--frame .newyoung-space-gallery__slide {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-space-gallery--rail .newyoung-space-gallery__stage {
width: calc(100vw - max(2.4rem, (100vw - 132rem) / 2));
height: clamp(60rem, 72svh, 76rem);
overflow: visible;
background: transparent;
}
.newyoung-space-gallery--rail .newyoung-space-gallery__slide {
position: relative;
display: block;
width: clamp(72rem, 66vw, 106rem) !important;
height: 100%;
overflow: hidden;
}
.newyoung-space-gallery--rail .newyoung-space-gallery__slide--portrait {
width: clamp(46rem, 42vw, 68rem) !important;
}
.newyoung-space-gallery--rail .newyoung-space-gallery__caption {
position: absolute;
z-index: 2;
inset: 0;
display: grid;
align-content: end;
min-height: 0;
padding: var(--public-space-xl);
background: linear-gradient(180deg, transparent 48%, rgba(22, 14, 10, 0.76) 100%);
pointer-events: none;
}
.newyoung-space-gallery--rail .newyoung-space-gallery__number {
position: absolute;
top: var(--public-space-xl);
left: var(--public-space-xl);
margin: 0;
}
.newyoung-space-gallery--rail .newyoung-space-gallery__description {
max-width: 34rem;
}
.newyoung-space-gallery--rail .newyoung-space-gallery__media, .newyoung-space-gallery--rail .newyoung-space-gallery__media img {
height: 100%;
}
.newyoung-space-gallery--rail .newyoung-space-gallery__media img {
transition: transform 900ms var(--public-ease);
}
.newyoung-space-gallery--rail .newyoung-space-gallery__slide:hover .newyoung-space-gallery__media img {
transform: scale(1.025);
}
@media (max-width: 767px) {
.newyoung-space-gallery__inner {
gap: var(--public-space-lg);
}
.newyoung-space-gallery__header {
display: contents;
}
.newyoung-space-gallery__heading {
order: 1;
gap: var(--public-space-xs);
}
.newyoung-space-gallery__controls {
order: 3;
width: 100%;
justify-content: center;
}
.newyoung-space-gallery__controls .newyoung-space-gallery__pagination.swiper-pagination-horizontal {
width: 6.6rem;
max-width: 6.6rem;
flex: 0 0 6.6rem;
}
.newyoung-space-gallery__stage {
order: 2;
height: min(76rem, 90svh);
min-height: 64rem;
}
.newyoung-space-gallery--rail .newyoung-space-gallery__stage {
width: calc(100vw - 2rem);
height: min(68rem, 82svh);
min-height: 56rem;
}
.newyoung-space-gallery--rail .newyoung-space-gallery__slide, .newyoung-space-gallery--rail .newyoung-space-gallery__slide--portrait {
width: min(82vw, 58rem) !important;
}
.newyoung-space-gallery--rail .newyoung-space-gallery__caption {
padding: var(--public-space-lg);
}
.newyoung-space-gallery--rail .newyoung-space-gallery__number {
top: var(--public-space-lg);
left: var(--public-space-lg);
}
.newyoung-space-gallery__button {
width: 4.4rem;
height: 4.4rem;
flex: 0 0 4.4rem;
}
.newyoung-space-gallery__slide {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
}
.newyoung-space-gallery--frame .newyoung-space-gallery__slide {
grid-template-rows: minmax(0, 1fr);
}
.newyoung-space-gallery__caption {
min-height: 18rem;
padding: var(--public-space-lg);
}
.newyoung-space-gallery__number {
margin-bottom: 0;
}
.newyoung-space-gallery__media {
min-height: 0;
}
}
@media (max-width: 1024px) {
.newyoung-space-feature--overview .newyoung-space-feature__copy {
grid-column: 1/-1;
}
.newyoung-space-feature--consultation .newyoung-space-feature__media {
grid-column: 1/span 7;
}
.newyoung-space-feature--consultation .newyoung-space-feature__copy {
grid-column: 8/-1;
padding-left: 0;
}
.newyoung-space-feature--brand .newyoung-space-feature__media {
grid-column: 1/span 5;
}
.newyoung-space-feature--brand .newyoung-space-feature__copy {
grid-column: 7/-1;
}
}
@media (max-width: 767px) {
.newyoung-space-hero {
min-height: 78rem;
}
.newyoung-space-hero__media img {
object-position: 38% center;
}
.newyoung-space-hero__shade {
background: linear-gradient(180deg, rgba(22, 14, 10, 0.62) 0%, transparent 34%), linear-gradient(0deg, rgba(20, 12, 8, 0.78) 0%, transparent 58%);
}
.newyoung-space-hero.no-section-sm {
padding-top: calc(var(--public-header-height) + var(--public-space-lg));
}
.newyoung-space-hero__copy {
justify-self: stretch;
width: 100%;
gap: var(--public-space-md);
padding-right: 0;
}
.newyoung-space-hero__title {
max-width: 9ch;
white-space: normal;
}
.newyoung-space-hero__lead {
max-width: 34rem;
font-size: var(--body-md-fs);
}
.newyoung-space-feature__inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--public-space-2xl);
}
.newyoung-space-feature__copy, .newyoung-space-feature--overview .newyoung-space-feature__copy, .newyoung-space-feature--consultation .newyoung-space-feature__copy, .newyoung-space-feature--brand .newyoung-space-feature__copy {
grid-column: 1;
padding-left: 0;
}
.newyoung-space-feature--overview .newyoung-space-feature__copy {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-space-feature--overview .newyoung-space-feature__title, .newyoung-space-feature--overview .newyoung-space-feature__description {
grid-column: 1;
}
.newyoung-space-feature__media, .newyoung-space-feature--overview .newyoung-space-feature__media, .newyoung-space-feature--consultation .newyoung-space-feature__media, .newyoung-space-feature--brand .newyoung-space-feature__media {
grid-column: 1;
width: 100%;
margin-top: 0;
}
.newyoung-space-feature--consultation .newyoung-space-feature__media {
order: 2;
}
.newyoung-space-feature--brand .newyoung-space-feature__inner {
min-height: 0;
}
.newyoung-space-feature--brand .newyoung-space-feature__media {
width: min(82%, 40rem);
justify-self: start;
}
}
.newyoung-doctor-visual-hero {
position: relative;
isolation: isolate;
display: grid;
height: 100svh;
min-height: 68rem;
overflow: hidden;
place-items: center;
color: var(--public-white);
background: var(--public-brand-ink);
}
.newyoung-doctor-visual-hero__media, .newyoung-doctor-visual-hero__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.newyoung-doctor-visual-hero__media {
z-index: -2;
overflow: hidden;
}
.newyoung-doctor-visual-hero__image {
overflow: hidden;
clip-path: inset(100% 0 0);
opacity: 0;
visibility: hidden;
}
.newyoung-doctor-visual-hero__image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.newyoung-doctor-visual-hero__image::after {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--public-brand-ink) 45%, transparent);
}
.newyoung-doctor-visual-hero__image.is-active {
clip-path: inset(0);
opacity: 1;
visibility: visible;
}
.newyoung-doctor-visual-hero__image:first-child img {
width: 114.42%;
height: 135.62%;
top: -17.81%;
}
.newyoung-doctor-visual-hero__image:first-child::after {
background: color-mix(in srgb, var(--public-brand-ink) 55%, transparent);
}
.newyoung-doctor-visual-hero__inner {
position: relative;
display: grid;
width: 100%;
height: 100%;
place-items: center;
}
.newyoung-doctor-visual-hero__title {
width: 100%;
margin: 0;
font-family: var(--public-home-title-family);
font-size: var(--heading-lg-fs);
font-weight: var(--font-weight-regular);
line-height: 1;
letter-spacing: -0.04em;
text-align: center;
}
.newyoung-doctor-visual-hero .newyoung-doctor-visual-hero__location {
position: absolute;
bottom: 4.9%;
inset-inline: 0;
display: grid;
justify-items: center;
height: 1.61em;
margin: 0;
overflow: hidden;
font-family: "Pretendard Variable", "Pretendard", sans-serif;
font-size: clamp(1.6rem, 1.25vw, 2.4rem);
font-weight: var(--font-weight-regular);
line-height: 1.61;
text-align: center;
}
.newyoung-doctor-visual-hero__phrase {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
}
.newyoung-doctor-visual-hero__word-window {
display: inline-grid;
width: 9.5ch;
height: 1.08em;
align-items: center;
justify-items: center;
overflow: hidden;
}
.newyoung-doctor-visual-hero__word {
grid-area: 1/1;
opacity: 0;
visibility: hidden;
white-space: nowrap;
}
.newyoung-doctor-visual-hero__word.is-active {
opacity: 1;
visibility: visible;
}
.newyoung-doctor-visual-hero__fixed {
white-space: nowrap;
color: color-mix(in srgb, var(--public-white) 68%, transparent);
font-weight: var(--font-weight-regular);
}
@media (max-width: 1023px) {
.newyoung-doctor-visual-hero__phrase {
align-items: center;
flex-direction: column;
gap: 0.24em;
}
.newyoung-doctor-visual-hero__word-window {
width: 100%;
height: 1.06em;
}
.newyoung-doctor-visual-hero__fixed {
padding: 0;
}
}
@media (max-width: 767px) {
.newyoung-doctor-visual-hero {
height: 100svh;
min-height: 64rem;
}
.newyoung-doctor-visual-hero__title {
line-height: 0.96;
}
.newyoung-doctor-visual-hero__image:first-child img {
object-position: 30% center;
}
.newyoung-doctor-visual-hero__image:nth-child(2) img {
object-position: 72% center;
}
.newyoung-doctor-visual-hero__image:nth-child(3) img {
object-position: 48% center;
}
}
.newyoung-story {
--story-rule: color-mix(in srgb, var(--public-brand-ink) 18%, transparent);
color: var(--public-ink);
background: var(--public-brand-surface);
}
.newyoung-story__promise {
padding-top: calc(var(--public-header-height) + var(--section-md));
}
.newyoung-story .newyoung-content-section__paragraph strong, .newyoung-story__promise-prose strong, .newyoung-story__standard-copy strong, .newyoung-story__private-copy strong, .newyoung-story__trust-copy strong {
font-weight: var(--font-weight-medium);
}
.newyoung-story .newyoung-content-section__groups {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-story .newyoung-content-section__group,
.newyoung-story .newyoung-content-section__group:nth-child(odd),
.newyoung-story .newyoung-content-section__group:nth-child(even) {
min-height: 0;
padding-inline: 0;
border-left: 0;
}
.newyoung-story__chapter-heading {
display: grid;
align-content: start;
gap: var(--public-space-sm);
}
.newyoung-story__standard-index, .newyoung-story__trust-index {
color: var(--public-muted);
}
.newyoung-story__chapter-title {
margin: 0;
text-wrap: balance;
}
.newyoung-story__promise-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(32rem, 0.78fr);
align-items: center;
gap: clamp(8rem, 5.1779935275vw + 6.0582524272rem, 16rem);
}
.newyoung-story__promise-media-shell {
position: relative;
width: 100%;
aspect-ratio: 5/6;
margin: 0;
overflow: hidden;
background: var(--public-brand-surface-strong);
}
.newyoung-story__promise-media, .newyoung-story__background-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
.newyoung-story [data-story-media] .no-auto-cover__img {
position: absolute;
top: -10%;
left: 0;
width: 100%;
max-width: none;
height: 120%;
object-fit: cover;
transform: scale(1.1);
transform-origin: center;
}
.newyoung-story__promise-content {
display: grid;
width: min(100%, 58rem);
justify-self: center;
gap: var(--public-space-xl);
}
.newyoung-story__promise-title {
margin: 0;
color: var(--public-ink);
}
.newyoung-story__promise-prose {
display: grid;
gap: var(--public-space-2xl);
}
.newyoung-story__promise-group {
display: grid;
gap: var(--public-space-md);
}
.newyoung-story__promise-group p {
color: var(--public-ink);
text-wrap: pretty;
}
.newyoung-story__standards {
border-top: 1px solid var(--story-rule);
background: var(--public-white);
}
.newyoung-story__standards-inner {
display: grid;
gap: clamp(5.6rem, 2.071197411vw + 4.8233009709rem, 8.8rem);
}
.newyoung-story__chapter-heading--standards {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-story__standard-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--story-rule);
border-bottom: 1px solid var(--story-rule);
}
.newyoung-story__standard {
display: grid;
align-content: start;
min-height: 0;
padding: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 5.6rem) clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
gap: var(--public-space-xl);
}
.newyoung-story__standard:first-child {
padding-left: 0;
}
.newyoung-story__standard:last-child {
padding-right: 0;
}
.newyoung-story__standard + .newyoung-story__standard {
border-left: 1px solid var(--story-rule);
}
.newyoung-story__standard-body {
display: grid;
align-content: start;
gap: var(--public-space-lg);
}
.newyoung-story__standard-title {
max-width: 18ch;
text-wrap: balance;
}
.newyoung-story__standard-copy {
max-width: 62rem;
color: var(--public-muted);
text-wrap: pretty;
}
.newyoung-story__private {
position: relative;
isolation: isolate;
display: grid;
min-height: max(72rem, 100svh);
align-items: start;
padding-block: var(--section-lg);
overflow: hidden;
color: var(--public-white);
background: var(--public-brand-ink);
}
.newyoung-story__private-media, .newyoung-story__private-shade, .newyoung-story__trust-media, .newyoung-story__trust-shade, .newyoung-story__premium-media, .newyoung-story__premium-shade {
position: absolute;
z-index: -2;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.newyoung-story__private-shade, .newyoung-story__trust-shade, .newyoung-story__premium-shade {
z-index: -1;
}
.newyoung-story__private-shade {
background: linear-gradient(180deg, rgba(16, 10, 7, 0.52), rgba(16, 10, 7, 0.7)), linear-gradient(90deg, rgba(16, 10, 7, 0.46), rgba(16, 10, 7, 0.18) 72%);
}
.newyoung-story__private-inner {
display: grid;
grid-template-columns: minmax(18rem, 0.34fr) minmax(0, 0.66fr);
align-items: start;
width: 100%;
gap: var(--section-md);
}
.newyoung-story__private-heading {
display: grid;
align-content: start;
gap: var(--public-space-sm);
}
.newyoung-story__private-title {
margin: 0;
text-wrap: balance;
}
.newyoung-story__private-copy {
display: grid;
max-width: 68rem;
gap: var(--public-space-lg);
text-wrap: pretty;
}
.newyoung-story__private-copy p {
color: color-mix(in srgb, var(--public-white) 78%, transparent);
}
.newyoung-story__trust {
position: relative;
isolation: isolate;
min-height: max(82rem, 100svh);
overflow: hidden;
color: var(--public-white);
background: var(--public-brand-ink);
}
.newyoung-story__trust-shade {
background: linear-gradient(90deg, rgba(245, 238, 226, 0.78) 0%, rgba(245, 238, 226, 0.46) 30%, rgba(20, 13, 9, 0.42) 58%, rgba(20, 13, 9, 0.82) 100%), linear-gradient(180deg, transparent 24%, rgba(20, 13, 9, 0.34) 100%);
}
.newyoung-story__trust-inner {
display: grid;
grid-template-columns: minmax(18rem, 0.34fr) minmax(0, 0.66fr);
align-items: start;
gap: clamp(5.6rem, 2.071197411vw + 4.8233009709rem, 8.8rem) var(--section-md);
}
.newyoung-story__chapter-heading--trust {
align-self: start;
color: var(--public-ink);
}
.newyoung-story__trust-list {
display: grid;
grid-column: 2;
grid-template-columns: minmax(0, 1fr);
border-top: 1px solid color-mix(in srgb, var(--public-white) 34%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--public-white) 34%, transparent);
}
.newyoung-story__trust-item {
display: grid;
grid-template-columns: var(--public-space-xl) minmax(15rem, 0.32fr) minmax(0, 0.68fr);
align-content: start;
min-height: 0;
padding-block: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 4.8rem);
gap: var(--public-space-lg);
}
.newyoung-story__trust-item + .newyoung-story__trust-item {
border-top: 1px solid color-mix(in srgb, var(--public-white) 24%, transparent);
}
.newyoung-story__trust-title {
color: var(--public-white);
text-wrap: balance;
}
.newyoung-story__trust-index {
color: color-mix(in srgb, var(--public-white) 58%, transparent);
}
.newyoung-story__trust-copy {
display: grid;
align-content: start;
gap: var(--public-space-md);
color: color-mix(in srgb, var(--public-white) 72%, transparent);
text-wrap: pretty;
}
.newyoung-story__premium {
position: relative;
isolation: isolate;
min-height: max(72rem, 100svh);
overflow: hidden;
color: var(--public-white);
background: var(--public-brand-ink);
}
.newyoung-story__premium-shade {
background: linear-gradient(90deg, rgba(17, 10, 7, 0.48), rgba(17, 10, 7, 0.18) 58%, rgba(17, 10, 7, 0.5)), linear-gradient(180deg, rgba(17, 10, 7, 0.56), rgba(17, 10, 7, 0.72));
}
.newyoung-story__premium-inner {
display: grid;
grid-template-columns: minmax(18rem, 0.34fr) minmax(0, 0.66fr);
align-items: start;
gap: var(--section-md);
}
.newyoung-story__premium-list {
display: grid;
max-width: 72rem;
gap: 0;
border-top: 1px solid color-mix(in srgb, var(--public-white) 34%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--public-white) 34%, transparent);
}
.newyoung-story__premium-item {
display: grid;
padding-block: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 4.8rem);
gap: var(--public-space-lg);
}
.newyoung-story__premium-item + .newyoung-story__premium-item {
border-top: 1px solid color-mix(in srgb, var(--public-white) 24%, transparent);
}
.newyoung-story__premium-item p {
color: color-mix(in srgb, var(--public-white) 76%, transparent);
text-wrap: pretty;
}
@media (max-width: 1023px) {
.newyoung-story__private-inner, .newyoung-story__trust-inner, .newyoung-story__premium-inner {
column-gap: var(--public-space-2xl);
}
}
@media (max-width: 767px) {
.newyoung-story__promise {
padding-top: calc(var(--public-header-height) + var(--section-sm));
}
.newyoung-story__promise-inner, .newyoung-story__standards-inner, .newyoung-story__private-inner, .newyoung-story__trust-inner, .newyoung-story__premium-inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--section-sm);
}
.newyoung-story__promise-media-shell {
width: min(86%, 52rem);
}
.newyoung-story__promise-content {
width: 100%;
justify-self: stretch;
}
.newyoung-story__standard-list {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-story__standard, .newyoung-story__standard:first-child, .newyoung-story__standard:last-child {
padding-inline: 0;
}
.newyoung-story__standard + .newyoung-story__standard {
border-top: 1px solid var(--story-rule);
border-left: 0;
}
.newyoung-story__private {
min-height: 100svh;
padding-block: var(--section-md);
}
.newyoung-story__private-inner, .newyoung-story__premium-inner {
align-content: start;
}
.newyoung-story__trust, .newyoung-story__premium {
min-height: 100svh;
}
.newyoung-story__chapter-heading--trust {
color: var(--public-white);
}
.newyoung-story__trust-shade {
background: linear-gradient(180deg, rgba(20, 13, 9, 0.62), rgba(20, 13, 9, 0.82));
}
.newyoung-story__trust-list {
grid-column: auto;
}
.newyoung-story__trust-item {
grid-template-columns: var(--public-space-xl) minmax(0, 1fr);
}
.newyoung-story__trust-title, .newyoung-story__trust-copy {
grid-column: 2;
}
.newyoung-story__premium-list {
max-width: none;
}
}
@media (max-width: 543px) {
.newyoung-story__promise-media-shell {
width: 100%;
}
.newyoung-story__trust-item {
grid-template-columns: var(--public-space-lg) minmax(0, 1fr);
}
}
.newyoung-content-section {
border-bottom: 1px solid var(--public-line);
background: var(--public-brand-surface);
}
.newyoung-content-section:nth-child(even) {
background: var(--public-white);
}
.newyoung-content-section__inner {
display: grid;
grid-template-columns: minmax(18rem, 0.42fr) minmax(0, 1.08fr);
grid-template-areas: "heading lead" "heading groups";
gap: var(--public-space-2xl) var(--section-md);
}
.newyoung-content-section__heading {
grid-area: heading;
align-self: start;
display: grid;
gap: var(--public-space-sm);
}
.newyoung-content-section__index, .newyoung-content-section__group-index {
color: var(--public-muted);
}
.newyoung-content-section__title {
max-width: 16ch;
text-wrap: balance;
}
.newyoung-content-section__lead {
grid-area: lead;
display: grid;
gap: var(--public-space-lg);
max-width: 78rem;
}
.newyoung-content-section__paragraph {
color: var(--public-muted);
text-wrap: pretty;
}
.newyoung-content-section__paragraph br {
display: none;
}
.newyoung-content-section__lead > .newyoung-content-section__paragraph:first-child {
color: var(--public-ink);
}
.newyoung-content-section__groups {
grid-area: groups;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--public-line-strong);
}
.newyoung-content-section__group {
display: grid;
grid-template-columns: var(--public-space-xl) minmax(0, 1fr);
align-content: start;
min-height: 24rem;
padding-block: var(--public-space-xl);
gap: var(--public-space-md);
border-bottom: 1px solid var(--public-line);
}
.newyoung-content-section__group:nth-child(odd) {
padding-right: var(--public-space-xl);
}
.newyoung-content-section__group:nth-child(even) {
padding-left: var(--public-space-xl);
border-left: 1px solid var(--public-line);
}
.newyoung-content-section__group-body {
display: grid;
align-content: start;
gap: var(--public-space-md);
}
.newyoung-content-section__item-title, .newyoung-content-section__subheading {
text-wrap: balance;
}
.newyoung-content-section__subheading {
color: var(--public-muted);
}
.newyoung-content-section__list {
display: grid;
gap: var(--public-space-xs);
color: var(--public-muted);
}
.newyoung-content-section__list li {
position: relative;
padding-left: var(--public-space-lg);
}
.newyoung-content-section__list li::before {
position: absolute;
top: 0.82em;
left: 0;
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: var(--public-brand-accent);
content: "";
}
.newyoung-content-section__groups--actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--public-space-sm);
border-top: 0;
}
.newyoung-content-section__action {
display: grid;
align-content: space-between;
min-height: 16rem;
padding: var(--public-space-xl);
gap: var(--public-space-xl);
border: 1px solid var(--public-line-strong);
color: inherit;
background: color-mix(in srgb, var(--public-white) 74%, transparent);
text-decoration: none;
transition: color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease);
}
.newyoung-content-section__action span {
color: var(--public-muted);
}
.newyoung-content-section__action[href]:hover, .newyoung-content-section__action[href]:focus-visible {
color: var(--public-white);
background: var(--public-brand-ink);
outline: none;
}
.newyoung-content-section__action[href]:hover span, .newyoung-content-section__action[href]:focus-visible span {
color: color-mix(in srgb, var(--public-white) 74%, transparent);
}
.newyoung-content-section__action.is-disabled {
opacity: 0.54;
}
.newyoung-content-section--process .newyoung-content-section__groups {
counter-reset: newyoung-process;
}
.newyoung-content-section--process .newyoung-content-section__group {
counter-increment: newyoung-process;
}
.newyoung-content-section--qa .newyoung-content-section__groups {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-content-section--qa .newyoung-content-section__group {
grid-template-columns: minmax(16rem, 0.45fr) minmax(0, 1fr);
min-height: 0;
padding-inline: 0;
border-left: 0;
}
.newyoung-content-page--pricing .newyoung-content-section__groups {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-content-page--pricing .newyoung-content-section__group {
grid-template-columns: var(--public-space-xl) minmax(20rem, 0.55fr) minmax(0, 1fr);
min-height: 0;
padding-inline: 0;
border-left: 0;
}
.newyoung-content-page--pricing .newyoung-content-section__group-body {
display: contents;
}
.newyoung-content-page--pricing .newyoung-content-section__item-title {
align-self: start;
}
.newyoung-treatments {
--public-sticky-section-nav-height: calc(
var(--public-filter-tab-mobile-height) + (var(--public-space-xs) * 2)
);
}
.newyoung-treatments__hero {
padding-top: calc(var(--public-header-height) + var(--section-sm));
padding-bottom: var(--section-sm);
border-bottom: 1px solid var(--public-line-strong);
background: var(--public-brand-surface);
}
.newyoung-treatments__hero-inner, .newyoung-treatments__section-inner {
width: 100%;
}
.newyoung-treatments__hero-inner {
display: grid;
gap: var(--public-space-sm);
}
.newyoung-treatments__lead, .newyoung-treatments__section-description, .newyoung-treatments__menu-group-name, .newyoung-treatments__menu-item-name, .newyoung-treatments__package-description, .newyoung-treatments__reset-program-description, .newyoung-treatments__reset-program-note, .newyoung-treatments__reset-principle-number, .newyoung-treatments__reset-principle-description, .newyoung-treatments__reset-notice, .newyoung-treatments__process-number, .newyoung-treatments__process-description, .newyoung-treatments__price-description, .newyoung-treatments__pricing-notice {
color: var(--public-muted);
}
.newyoung-treatments__menu, .newyoung-treatments__packages, .newyoung-treatments__reset, .newyoung-treatments__pricing {
scroll-margin-top: calc(var(--public-header-height) + var(--public-sticky-section-nav-height) + var(--public-space-xl));
border-bottom: 1px solid var(--public-line-strong);
}
.newyoung-treatments__menu, .newyoung-treatments__reset {
background: var(--public-white);
}
.newyoung-treatments__packages, .newyoung-treatments__pricing {
background: var(--public-brand-surface);
}
.newyoung-treatments__section-inner {
display: grid;
min-width: 0;
gap: var(--section-sm);
}
.newyoung-treatments__section-heading {
display: grid;
max-width: 72rem;
align-items: start;
}
.newyoung-treatments__section-copy {
display: grid;
gap: var(--public-space-sm);
}
.newyoung-treatments__reset .newyoung-treatments__section-heading {
max-width: none;
}
.newyoung-treatments__section-copy--reset {
grid-template-columns: minmax(24rem, 0.38fr) minmax(0, 0.62fr);
gap: var(--public-space-2xl) var(--section-md);
}
.newyoung-treatments__reset-intro {
display: grid;
align-content: start;
gap: var(--public-space-lg);
}
.newyoung-treatments__section-description {
max-width: 72rem;
}
.newyoung-treatments__lead, .newyoung-treatments__section-description, .newyoung-treatments__process-description {
text-wrap: pretty;
}
.newyoung-treatments__package-description, .newyoung-treatments__reset-program-description {
text-wrap: balance;
}
.newyoung-treatments__section-title, .newyoung-treatments__package-title, .newyoung-treatments__reset-lead, .newyoung-treatments__reset-program-title, .newyoung-treatments__process-title, .newyoung-treatments__pricing-title {
text-wrap: balance;
}
.newyoung-treatments__menu-groups, .newyoung-treatments__pricing-list {
min-width: 0;
}
.newyoung-treatments__menu-hint {
padding-bottom: var(--public-space-md);
color: var(--public-brand-ink);
text-align: right;
}
.newyoung-treatments__menu-group {
display: grid;
grid-template-columns: minmax(16rem, 0.34fr) minmax(0, 1fr);
gap: var(--public-space-2xl);
padding-block: var(--public-space-xl);
}
.newyoung-treatments__menu-group + .newyoung-treatments__menu-group {
border-top: 1px solid var(--public-line);
}
.newyoung-treatments__menu-group-heading {
display: grid;
align-content: start;
gap: var(--public-space-2xs);
}
.newyoung-treatments__menu-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.newyoung-treatments__menu-item {
display: grid;
min-width: 0;
min-height: 15rem;
align-content: center;
justify-items: center;
padding: var(--public-space-md) var(--public-space-xs);
gap: var(--public-space-xs);
color: inherit;
background: transparent;
text-align: center;
text-decoration: none;
transition: color var(--public-duration) var(--public-ease), opacity var(--public-duration) var(--public-ease);
}
.newyoung-treatments__menu-item:hover, .newyoung-treatments__menu-item:focus-visible, .newyoung-treatments__menu-item.is-active {
color: var(--public-brand-accent);
}
.newyoung-treatments__menu-item:focus-visible {
outline: 1px solid var(--public-brand-accent);
outline-offset: -1px;
}
.newyoung-treatments__menu-icon, .newyoung-treatments__package-icon, .newyoung-treatments__reset-icon {
margin: 0;
background: transparent;
}
.newyoung-treatments__menu-icon {
width: 7.2rem;
height: 7.2rem;
}
.newyoung-treatments__package-icon, .newyoung-treatments__reset-icon {
width: 9rem;
height: 9rem;
}
.newyoung-treatments__reset-icon {
width: 11rem;
height: 11rem;
}
.newyoung-treatments__menu-icon .no-auto-cover__img, .newyoung-treatments__package-icon .no-auto-cover__img, .newyoung-treatments__reset-icon .no-auto-cover__img {
object-fit: contain;
}
.newyoung-treatments__menu-item-title {
max-width: 14ch;
line-height: 1.35;
text-wrap: balance;
word-break: keep-all;
}
.newyoung-treatments__menu-item-name {
max-width: 24ch;
line-height: 1.4;
text-wrap: balance;
}
.newyoung-treatments__package-list {
display: grid;
border-top: 1px solid var(--public-line-strong);
}
.newyoung-treatments__package-category {
padding-block: var(--public-space-lg);
color: var(--public-brand-ink);
border-bottom: 1px solid var(--public-line-strong);
}
.newyoung-treatments__package-card + .newyoung-treatments__package-category {
margin-top: var(--public-space-xl);
}
.newyoung-treatments__package-card {
display: grid;
grid-template-columns: 11rem minmax(0, 1fr) auto;
min-height: 13rem;
align-items: center;
gap: var(--public-space-xl);
padding: var(--public-space-lg) var(--public-space-xl);
border-bottom: 1px solid var(--public-line);
background: color-mix(in srgb, var(--public-white) 68%, transparent);
color: inherit;
text-decoration: none;
}
.newyoung-treatments__package-card:hover, .newyoung-treatments__package-card:focus-visible, .newyoung-treatments__package-card.is-active {
background: color-mix(in srgb, var(--public-brand-accent) 8%, transparent);
}
.newyoung-treatments__package-card:focus-visible {
outline: 1px solid var(--public-brand-accent);
outline-offset: -1px;
}
.newyoung-treatments__package-copy {
display: grid;
gap: var(--public-space-2xs);
}
.newyoung-treatments__package-link {
justify-self: end;
color: var(--public-brand-ink);
white-space: nowrap;
}
.newyoung-treatments__package-composition {
margin-top: var(--public-space-xs);
white-space: pre-line;
color: var(--public-brand-ink);
line-height: 1.8;
}
.newyoung-treatments__reset-lead {
max-width: 18ch;
}
.newyoung-treatments__reset-principles {
display: grid;
grid-column: 1/-1;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
border-top: 1px solid var(--public-line-strong);
border-bottom: 1px solid var(--public-line-strong);
}
.newyoung-treatments__reset-principle {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
min-height: 12rem;
align-content: center;
gap: var(--public-space-2xs) var(--public-space-xs);
padding: var(--public-space-lg) var(--public-space-xl);
}
.newyoung-treatments__reset-principle + .newyoung-treatments__reset-principle {
border-left: 1px solid var(--public-line);
}
.newyoung-treatments__reset-principle-description {
grid-column: 2;
}
.newyoung-treatments__reset-programs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--public-line-strong);
border-bottom: 1px solid var(--public-line-strong);
}
.newyoung-treatments__reset-program {
display: grid;
min-height: 38rem;
align-content: start;
justify-items: start;
padding: var(--public-space-2xl);
gap: var(--public-space-md);
text-align: left;
}
.newyoung-treatments__reset-program + .newyoung-treatments__reset-program {
border-left: 1px solid var(--public-line);
}
.newyoung-treatments__reset-program-description {
max-width: 32rem;
}
.newyoung-treatments__reset-program-note {
max-width: 34rem;
margin-top: auto;
padding-top: var(--public-space-sm);
border-top: 1px solid var(--public-line);
text-wrap: pretty;
}
.newyoung-treatments__process {
display: grid;
gap: var(--public-space-xl);
}
.newyoung-treatments__process-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
border-top: 1px solid var(--public-line-strong);
border-bottom: 1px solid var(--public-line-strong);
}
.newyoung-treatments__process-item {
display: grid;
min-height: 15rem;
align-content: start;
padding: var(--public-space-xl);
gap: var(--public-space-sm);
}
.newyoung-treatments__process-item + .newyoung-treatments__process-item {
border-left: 1px solid var(--public-line);
}
.newyoung-treatments__reset-notice {
justify-self: end;
max-width: 78rem;
text-align: right;
}
.newyoung-treatments__pricing-category {
min-width: 0;
scroll-margin-top: calc(var(--public-header-height) + var(--public-sticky-section-nav-height) + var(--public-space-xl));
border-top: 2px solid var(--public-brand-ink);
}
.newyoung-treatments__pricing-list {
display: grid;
}
.newyoung-treatments__pricing-currency {
justify-self: end;
margin: 0 0 var(--public-space-xs);
color: var(--public-muted);
font-weight: var(--font-weight-medium);
letter-spacing: 0.12em;
}
.newyoung-treatments__pricing-meta {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--public-space-xs) var(--public-space-lg);
padding: var(--public-space-sm) var(--public-space-md);
color: var(--public-brand-ink);
background: color-mix(in srgb, var(--public-brand-accent) 8%, transparent);
}
.newyoung-treatments__price-option strong {
white-space: pre-line;
}
.newyoung-treatments__pricing-summary {
display: grid;
grid-template-columns: minmax(0, 1fr) 2.4rem;
align-items: center;
gap: var(--public-space-md);
min-height: 6.4rem;
padding-inline: var(--public-space-md);
color: var(--public-brand-ink);
background: transparent;
cursor: pointer;
list-style: none;
transition: color var(--public-duration) var(--public-ease);
}
.newyoung-treatments__pricing-summary::-webkit-details-marker {
display: none;
}
.newyoung-treatments__pricing-icon {
transition: transform var(--public-duration) var(--public-ease);
}
.newyoung-treatments__pricing-category[open] .newyoung-treatments__pricing-icon {
transform: rotate(180deg);
}
.newyoung-treatments__pricing-summary:hover, .newyoung-treatments__pricing-summary:focus-visible, .newyoung-treatments__pricing-category.is-active > .newyoung-treatments__pricing-summary {
color: var(--public-brand-accent);
}
.newyoung-treatments__pricing-body {
min-width: 0;
border-top: 1px solid var(--public-line);
}
.newyoung-treatments__price-table-wrap {
width: 100%;
min-width: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
}
.newyoung-treatments__price-table {
width: 100%;
min-width: 64rem;
border-collapse: collapse;
table-layout: fixed;
}
.newyoung-treatments__price-table th, .newyoung-treatments__price-table td {
padding: var(--public-space-sm) var(--public-space-md);
vertical-align: top;
}
.newyoung-treatments__price-table thead {
border-bottom: 1px solid var(--public-brand-ink);
}
.newyoung-treatments__price-table thead th {
color: var(--public-muted);
font-weight: var(--font-weight-medium);
text-align: left;
background: color-mix(in srgb, var(--public-brand-ink) 4%, transparent);
}
.newyoung-treatments__price-table thead th:first-child {
width: 26%;
}
.newyoung-treatments__price-table thead th:last-child {
width: 15rem;
text-align: right;
}
.newyoung-treatments__price-treatment {
font-weight: var(--font-weight-medium);
text-align: left;
background: color-mix(in srgb, var(--public-brand-accent) 8%, transparent);
box-shadow: inset -1px 0 0 var(--public-line);
transition: color var(--public-duration) var(--public-ease), box-shadow var(--public-duration) var(--public-ease);
}
.newyoung-treatments__price-option strong, .newyoung-treatments__price-option span {
display: block;
}
.newyoung-treatments__price-option span {
color: var(--public-muted);
}
.newyoung-treatments__price-option strong + span {
margin-top: var(--public-space-2xs);
}
.newyoung-treatments__price-value {
text-align: right;
white-space: nowrap;
}
.newyoung-treatments__price-value span {
display: block;
margin-top: var(--public-space-2xs);
color: var(--public-muted);
}
.newyoung-treatments__price-anchor {
display: block;
width: 0;
height: 0;
scroll-margin-top: calc(var(--public-header-height) + var(--public-sticky-section-nav-height) + var(--public-space-xl));
}
.newyoung-treatments__price-group + .newyoung-treatments__price-group {
border-top: 2px solid var(--public-line-strong);
}
.newyoung-treatments__price-group tr + tr {
border-top: 1px solid var(--public-line);
}
.newyoung-treatments__price-group.is-active .newyoung-treatments__price-treatment {
color: var(--public-brand-accent);
box-shadow: inset 0.3rem 0 0 currentcolor, inset -1px 0 0 var(--public-line);
}
.newyoung-treatments__pricing-notice {
padding-top: var(--public-space-md);
text-align: right;
}
@media (max-width: 1023px) {
.newyoung-treatments__menu-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.newyoung-treatments__process-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.newyoung-treatments__process-item:nth-child(4) {
border-left: 0;
}
.newyoung-treatments__process-item:nth-child(n+4) {
border-top: 1px solid var(--public-line);
}
}
@media (max-width: 767px) {
.newyoung-treatments__hero {
padding-top: calc(var(--public-header-height) + var(--public-space-3xl));
padding-bottom: var(--public-space-3xl);
}
.newyoung-treatments__menu-group {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-treatments__menu-group {
gap: var(--public-space-xl);
}
.newyoung-treatments__menu-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.newyoung-treatments__menu-item {
min-height: 13rem;
padding-inline: var(--public-space-2xs);
}
.newyoung-treatments__menu-icon {
width: 6rem;
height: 6rem;
}
.newyoung-treatments__package-card {
grid-template-columns: 7.2rem minmax(0, 1fr);
gap: var(--public-space-lg);
padding-inline: 0;
}
.newyoung-treatments__package-icon {
width: 7.2rem;
height: 7.2rem;
}
.newyoung-treatments__package-link {
grid-column: 2;
justify-self: start;
white-space: normal;
}
.newyoung-treatments__reset-programs, .newyoung-treatments__process-list, .newyoung-treatments__reset-principles {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-treatments__section-copy--reset {
grid-template-columns: minmax(0, 1fr);
gap: var(--public-space-xl);
}
.newyoung-treatments__reset-principle {
padding-inline: 0;
}
.newyoung-treatments__reset-principle + .newyoung-treatments__reset-principle {
border-top: 1px solid var(--public-line);
border-left: 0;
}
.newyoung-treatments__reset-program {
min-height: 0;
padding-inline: 0;
}
.newyoung-treatments__reset-program + .newyoung-treatments__reset-program, .newyoung-treatments__process-item + .newyoung-treatments__process-item {
border-top: 1px solid var(--public-line);
border-left: 0;
}
.newyoung-treatments__process-item, .newyoung-treatments__process-item:nth-child(4) {
min-height: 0;
padding-inline: 0;
border-left: 0;
}
.newyoung-treatments__reset-notice {
justify-self: start;
text-align: left;
}
.newyoung-treatments__pricing-summary {
grid-template-columns: minmax(0, 1fr) 2rem;
}
.newyoung-treatments__price-table {
min-width: 0;
}
.newyoung-treatments__price-table th, .newyoung-treatments__price-table td {
padding-inline: var(--public-space-2xs);
overflow-wrap: anywhere;
}
.newyoung-treatments__price-table thead th:first-child {
width: 26%;
}
.newyoung-treatments__price-table thead th:last-child {
width: 10rem;
}
.newyoung-treatments__price-value {
text-align: right;
}
}
.newyoung-signature__content-visual {
position: relative;
isolation: isolate;
min-height: clamp(34rem, 38vw, 58rem);
overflow: hidden;
border-bottom: 1px solid var(--public-line-strong);
}
.newyoung-signature-detail {
position: relative;
}
.newyoung-signature-detail__back.public-button {
position: fixed;
z-index: calc(var(--public-z-header) + 1);
top: calc(var(--public-header-height) + var(--public-space-lg));
left: var(--public-shell-gutter);
color: var(--public-brand-ink);
background: var(--public-surface-subtle);
}
.newyoung-signature-detail__layout {
--heading-lg-fs: var(--heading-md-fs);
--heading-xs-fs: var(--heading-2xs-fs);
display: grid;
width: 100%;
margin-inline: auto;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.newyoung-signature-detail__visual-column {
position: sticky;
top: 0;
height: 100svh;
min-height: 100svh;
}
.newyoung-signature-detail__visual {
position: relative;
isolation: isolate;
height: 100%;
min-height: 100%;
overflow: hidden;
border-bottom: 0;
background: radial-gradient(ellipse 72% 54% at 12% 12%, color-mix(in srgb, var(--public-white) 94%, transparent), transparent 68%), radial-gradient(ellipse 66% 64% at 92% 14%, color-mix(in srgb, var(--public-blue-soft) 82%, transparent), transparent 72%), linear-gradient(145deg, color-mix(in srgb, var(--public-white) 90%, var(--public-brand-accent-soft)), color-mix(in srgb, var(--public-white) 78%, var(--public-brand-surface-strong)) 48%, color-mix(in srgb, var(--public-white) 72%, var(--public-brand-accent-soft)));
}
.newyoung-signature-detail__visual::before, .newyoung-signature-detail__visual::after {
position: absolute;
z-index: 0;
inset: -24%;
content: "";
pointer-events: none;
will-change: transform;
}
.newyoung-signature-detail__visual::before {
background: radial-gradient(ellipse 32% 46% at 24% 34%, color-mix(in srgb, var(--public-white) 92%, transparent), transparent 74%), radial-gradient(ellipse 40% 34% at 76% 62%, color-mix(in srgb, var(--public-brand-accent-soft) 56%, transparent), transparent 76%), radial-gradient(ellipse 30% 42% at 54% 18%, color-mix(in srgb, var(--public-blue-soft) 72%, transparent), transparent 72%);
filter: blur(2.8rem);
opacity: 0.92;
transform: translate3d(-4%, -2%, 0) rotate(-5deg) scale(1.04);
}
.newyoung-signature-detail__visual::after {
background: radial-gradient(ellipse 36% 48% at 28% 78%, color-mix(in srgb, var(--public-brand-accent-soft) 44%, transparent), transparent 76%), radial-gradient(ellipse 38% 38% at 78% 30%, color-mix(in srgb, var(--public-white) 86%, transparent), transparent 74%);
filter: blur(4.8rem);
mix-blend-mode: soft-light;
opacity: 0.84;
transform: translate3d(5%, 3%, 0) rotate(7deg) scale(1.08);
}
.newyoung-signature-detail__visual-summary {
position: absolute;
z-index: 2;
top: 0;
right: var(--public-shell-gutter);
bottom: 0;
left: var(--public-shell-gutter);
display: grid;
align-content: center;
justify-items: center;
gap: var(--public-space-xl);
text-align: center;
}
.newyoung-signature-detail__visual-copy {
display: grid;
width: min(100%, 52rem);
justify-items: center;
gap: var(--public-space-xs);
color: var(--public-brand-ink);
background: transparent;
}
.newyoung-signature-detail__visual-lead {
color: color-mix(in srgb, var(--public-brand-ink) 72%, transparent);
}
.newyoung-signature-detail__visual-title, .newyoung-signature-detail__visual-lead {
max-width: 40ch;
word-break: keep-all;
overflow-wrap: break-word;
}
.newyoung-signature-detail__visual-title {
max-width: 24ch;
font-size: var(--heading-sm-fs);
line-height: var(--heading-sm-lh);
text-wrap: balance;
}
.newyoung-signature-detail__visual-lead {
width: 100%;
text-wrap: pretty;
}
.newyoung-signature-detail__visual-actions {
display: flex;
margin-top: var(--public-space-md);
justify-content: center;
}
.newyoung-signature-detail__visual-listen.public-button {
background: transparent;
}
.newyoung-signature-detail__content-column {
min-width: 0;
background: var(--public-brand-surface);
}
.newyoung-signature-detail__content-column .newyoung-content-section.no-section-md {
padding-block: calc(var(--section-md) * 2);
}
.newyoung-signature-detail__content-column .newyoung-content-section__inner {
width: calc(100% - var(--public-shell-gutter) * 2);
}
.newyoung-signature-detail__body {
background: var(--public-brand-surface);
}
.newyoung-signature-detail__body:has(.newyoung-content-section:nth-child(even):last-child) {
background: var(--public-white);
}
.newyoung-signature-detail__body .newyoung-content-section:last-child {
border-bottom: 0;
}
.newyoung-signature-detail__content-column .newyoung-content-section__inner {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "heading" "lead" "groups";
gap: var(--public-space-2xl);
}
.newyoung-signature-detail__content-column .newyoung-content-section__groups, .newyoung-signature-detail__content-column .newyoung-content-section__groups--actions {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-signature-detail__content-column .newyoung-content-section__group, .newyoung-signature-detail__content-column .newyoung-content-section__group:nth-child(odd), .newyoung-signature-detail__content-column .newyoung-content-section__group:nth-child(even), .newyoung-signature-detail__content-column .newyoung-content-section--qa .newyoung-content-section__group {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
padding-inline: 0;
gap: 0;
border-left: 0;
}
.newyoung-signature-detail__content-column .newyoung-content-section__group-index {
display: none;
}
.newyoung-signature-detail__content-column :is(.newyoung-content-section__title,
.newyoung-content-section__item-title,
.newyoung-content-section__subheading,
.newyoung-content-section__paragraph,
.newyoung-content-section__list) {
word-break: keep-all;
overflow-wrap: break-word;
}
.newyoung-signature-detail__content-column .newyoung-content-section__paragraph {
max-width: 72ch;
text-wrap: pretty;
}
.newyoung-signature-detail__content-column :is(.newyoung-content-section__paragraph,
.newyoung-content-section__item-title,
.newyoung-content-section__subheading) strong {
font-weight: var(--font-weight-medium);
}
.newyoung-signature-detail:is(.newyoung-signature-detail--tailored-botox, .newyoung-signature-detail--tailored-lifting, .newyoung-signature-detail--tailored-collagen-booster, .newyoung-signature-detail--sedation, .newyoung-signature-detail--under-eye-ultracol, .newyoung-signature-detail--sesla, .newyoung-signature-detail--ultrasound-guided-filler-removal) .newyoung-signature-detail__content-column .newyoung-content-section__paragraph br {
display: initial;
}
.newyoung-signature-detail:is(.newyoung-signature-detail--tailored-botox, .newyoung-signature-detail--tailored-lifting, .newyoung-signature-detail--tailored-collagen-booster, .newyoung-signature-detail--sedation, .newyoung-signature-detail--under-eye-ultracol, .newyoung-signature-detail--sesla, .newyoung-signature-detail--ultrasound-guided-filler-removal) .newyoung-content-section__title {
max-width: none;
white-space: pre-line;
}
.newyoung-signature-detail__content-column .newyoung-content-section__group-body {
gap: var(--public-space-sm);
}
.newyoung-signature-detail .newyoung-content-section__figure {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--public-space-lg);
margin: var(--public-space-md) 0;
padding: var(--public-space-lg);
background: var(--public-surface-subtle);
}
.newyoung-signature-detail .newyoung-content-section__figure-art {
width: min(100%, 56rem);
margin-inline: auto;
}
.newyoung-signature-detail .newyoung-content-section__figure-art img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
}
.newyoung-signature-detail .newyoung-content-section__figure-legend {
display: grid;
gap: var(--public-space-lg);
margin: 0;
padding: 0;
list-style: none;
}
.newyoung-signature-detail .newyoung-content-section__figure-legend li {
display: grid;
grid-template-columns: 2.8rem minmax(0, 1fr);
align-items: start;
gap: var(--public-space-sm);
}
.newyoung-signature-detail .newyoung-content-section__figure-number {
display: grid;
width: 2.8rem;
height: 2.8rem;
place-items: center;
border-radius: 50%;
background: var(--public-brand-ink);
color: var(--clr-base-white);
font-size: 1.4rem;
font-weight: var(--font-weight-medium);
line-height: 1;
}
.newyoung-signature-detail .newyoung-content-section__figure-legend strong {
display: block;
color: var(--public-brand-ink);
font-size: 2rem;
font-weight: var(--font-weight-medium);
line-height: 1.55;
word-break: keep-all;
overflow-wrap: anywhere;
}
.newyoung-signature-detail .newyoung-content-section__figure-legend p {
margin: var(--public-space-xs) 0 0;
color: var(--public-brand-accent);
font-size: 1.6rem;
line-height: 1.65;
word-break: keep-all;
overflow-wrap: anywhere;
}
@media (min-width: 768px) and (max-width: 1023px), (min-width: 1920px) {
.newyoung-signature-detail .newyoung-content-section__figure {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
align-items: center;
}
}
@media (max-width: 767px) {
.newyoung-signature-detail .newyoung-content-section__figure {
padding: var(--public-space-sm);
}
}
.newyoung-signature-detail__content-column .newyoung-content-section__group + .newyoung-content-section__group {
border-top: 0;
}
.newyoung-signature-detail__list-action {
display: flex;
width: calc(100% - var(--public-shell-gutter) * 2);
margin-inline: auto;
padding-bottom: var(--section-md);
justify-content: center;
background: transparent;
}
.newyoung-signature-detail__list-link.public-button {
width: min(100%, 18rem);
background: transparent;
}
@media (min-width: 1024px) {
.newyoung-signature-detail__content-column .newyoung-content-sections > .newyoung-content-section:first-child {
padding-top: calc(var(--public-header-height) + var(--section-sm) * 2);
}
}
@media (max-width: 1023px) {
.newyoung-signature-detail__back.public-button {
top: calc(var(--public-header-height) + var(--public-space-sm));
}
.newyoung-signature-detail__layout {
width: 100%;
grid-template-columns: minmax(0, 1fr);
}
.newyoung-signature-detail__visual-column {
position: relative;
height: auto;
min-height: clamp(42rem, 72vw, 68rem);
}
.newyoung-signature-detail__visual {
height: auto;
min-height: inherit;
}
.newyoung-signature-detail__visual-summary {
position: relative;
inset: auto;
min-height: inherit;
padding: calc(var(--public-header-height) + var(--public-space-xl)) var(--public-shell-gutter) var(--public-space-2xl);
}
}
@media (max-width: 767px) {
.newyoung-signature-detail__content-column .newyoung-content-section__inner {
padding-inline: 0;
}
.newyoung-signature-detail__content-column .newyoung-content-section.no-section-md {
padding-block: var(--section-lg);
}
}
.newyoung-signature__content-visual-media {
position: absolute;
z-index: -1;
inset: 0;
height: 100%;
aspect-ratio: auto;
}
.newyoung-signature__content-visual-media .no-auto-cover__img {
object-position: center;
}
.newyoung-signature-detail__visual-light {
position: absolute;
z-index: 1;
inset: 0;
display: block;
width: 100%;
height: 100%;
mix-blend-mode: soft-light;
opacity: 0;
pointer-events: none;
transition: opacity 1.4s ease;
}
.newyoung-signature-detail__visual.is-webgl-light-active .newyoung-signature-detail__visual-light {
opacity: 0.78;
}
.newyoung-signature-detail__visual-icon {
display: grid;
width: clamp(16rem, 17vw, 27rem);
height: auto;
place-items: center;
color: var(--public-brand-ink);
}
.newyoung-signature-detail__visual-icon .no-auto-cover {
background: transparent;
}
.newyoung-signature-detail__visual-icon .no-auto-cover__img {
object-fit: contain;
}
.newyoung-signature__route-rail {
background: var(--public-brand-surface);
}
.newyoung-signature__route-rail ol {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--public-line-strong);
}
.newyoung-signature__route-rail li {
border-bottom: 1px solid var(--public-line);
}
.newyoung-signature__route-rail li:nth-child(odd) {
border-right: 1px solid var(--public-line);
}
.newyoung-signature__route-rail a {
display: grid;
grid-template-columns: var(--public-space-xl) minmax(0, 1fr);
align-items: center;
min-height: 10rem;
padding: var(--public-space-lg);
gap: var(--public-space-md);
color: inherit;
text-decoration: none;
transition: color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease);
}
.newyoung-signature__route-rail a span {
color: var(--public-muted);
}
.newyoung-signature__route-rail a:hover,
.newyoung-signature__route-rail a:focus-visible {
color: var(--public-white);
background: var(--public-brand-ink);
outline: none;
}
.newyoung-signature__route-rail a:hover span,
.newyoung-signature__route-rail a:focus-visible span {
color: color-mix(in srgb, var(--public-white) 72%, transparent);
}
@media (max-width: 1023px) {
.newyoung-content-section__inner {
grid-template-columns: minmax(14rem, 0.32fr) minmax(0, 1fr);
column-gap: var(--public-space-2xl);
}
.newyoung-content-section__groups--actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.newyoung-content-hero {
min-height: 62rem;
}
.newyoung-content-hero.no-section-md {
padding-bottom: var(--section-sm);
}
.newyoung-content-hero::after {
width: 34vw;
bottom: var(--public-space-2xl);
}
.newyoung-content-section__inner {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "heading" "lead" "groups";
gap: var(--public-space-2xl);
}
.newyoung-content-section__title {
max-width: 20ch;
}
.newyoung-content-section__groups, .newyoung-content-section__groups--actions {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-content-section__group, .newyoung-content-section__group:nth-child(odd), .newyoung-content-section__group:nth-child(even), .newyoung-content-section--qa .newyoung-content-section__group {
grid-template-columns: var(--public-space-xl) minmax(0, 1fr);
min-height: 0;
padding-inline: 0;
border-left: 0;
}
.newyoung-content-page--pricing .newyoung-content-section__group {
grid-template-columns: var(--public-space-xl) minmax(0, 1fr);
}
.newyoung-content-page--pricing .newyoung-content-section__group-body {
display: grid;
}
.newyoung-signature__content-visual,
.newyoung-signature-detail__visual {
min-height: 38rem;
}
.newyoung-signature-detail__visual-column,
.newyoung-signature-detail__visual {
min-height: 54rem;
}
.newyoung-signature-detail__visual-icon {
width: min(100%, var(--public-treatment-pictogram-frame-lg));
}
.newyoung-signature__route-rail ol {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-signature__route-rail li:nth-child(odd) {
border-right: 0;
}
}
@keyframes newyoung-intro-failsafe {
to {
visibility: hidden;
pointer-events: none;
}
}
html:has(.newyoung-intro:not([hidden])),
html:has(.newyoung-intro:not([hidden])) body {
overflow: hidden;
}
html:has(.newyoung-intro:not([hidden])) .site-popup-layer,
html:has(.newyoung-intro:not([hidden])) .site-popup-backdrop {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
html:has(.newyoung-intro:not([hidden])) .public-header.site-header {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.newyoung-intro {
position: fixed;
z-index: 30000;
inset: 0;
display: grid;
place-items: center;
background: var(--clr-primary-900);
pointer-events: none;
animation: newyoung-intro-failsafe 0s linear 5s forwards;
will-change: transform;
}
.newyoung-intro::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
background: color-mix(in srgb, var(--public-brand-ink) 16%, transparent);
content: "";
}
.newyoung-intro[hidden] {
display: none;
}
.newyoung-intro__mark {
position: relative;
z-index: 1;
display: grid;
height: clamp(12rem, 12vw, 19rem);
place-items: center;
color: var(--clr-gray-50);
will-change: opacity, transform;
}
.newyoung-intro__mark [data-brand-mark] {
visibility: hidden;
opacity: 0;
}
.newyoung-home,
.newyoung-signature,
.newyoung-signature-detail__layout {
word-break: keep-all;
overflow-wrap: break-word;
}
.newyoung-home :is(h1, h2, h3, p) br,
.newyoung-signature :is(h1, h2, h3, p) br,
.newyoung-signature-detail__layout :is(h1, h2, h3, p) br {
display: initial;
}
.newyoung-home {
overflow: clip;
background: var(--public-white);
}
.newyoung-home.is-intro-pending .newyoung-home__hero-media {
transform: scale(1.08);
}
.newyoung-home.is-intro-pending .newyoung-home__hero-mark, .newyoung-home.is-intro-pending .newyoung-home__hero-title, .newyoung-home.is-intro-pending .newyoung-home__hero-description {
opacity: 0;
transform: translateY(2.8rem);
}
.newyoung-home__hero, .newyoung-home__program, .newyoung-home__private, .newyoung-home__reservation {
position: relative;
isolation: isolate;
overflow: hidden;
}
.newyoung-home__hero {
display: grid;
min-height: 100svh;
place-items: center;
color: var(--public-header-white);
}
.newyoung-home__hero::before {
position: absolute;
z-index: 0;
inset: -34% -42%;
background: radial-gradient(ellipse 24% 64% at 50% 50%, color-mix(in srgb, var(--public-header-white) 22%, transparent) 0, color-mix(in srgb, var(--public-brand-accent-soft) 14%, transparent) 38%, transparent 74%);
content: "";
filter: blur(2.4rem);
opacity: 0.38;
pointer-events: none;
transform: translate3d(-18%, -3%, 0) rotate(-4deg);
transition: opacity 1.2s ease;
}
.newyoung-home__hero-light {
position: absolute;
z-index: 0;
inset: 0;
display: block;
width: 100%;
height: 100%;
mix-blend-mode: screen;
opacity: 0;
pointer-events: none;
transition: opacity 1.4s ease;
}
.newyoung-home__hero.is-webgl-light-active::before {
opacity: 0.1;
}
.newyoung-home__hero.is-webgl-light-active .newyoung-home__hero-light {
opacity: 0.9;
}
.newyoung-home__hero-media, .newyoung-home__program-media, .newyoung-home__private-media, .newyoung-home__reservation-media {
position: absolute;
z-index: -2;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.newyoung-home__hero-shade, .newyoung-home__private-shade {
position: absolute;
z-index: -1;
inset: 0;
background: color-mix(in srgb, var(--public-brand-ink) 36%, transparent);
pointer-events: none;
}
.newyoung-home__hero-content {
position: relative;
z-index: 2;
display: grid;
justify-items: center;
gap: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
text-align: center;
}
.newyoung-home__hero-mark {
display: grid;
height: clamp(8rem, 8vw, 13rem);
margin-bottom: var(--public-space-sm);
place-items: center;
color: var(--public-header-white);
}
.newyoung-home__hero-title {
max-width: 30ch;
font-size: clamp(3.4rem, 2.7184466019vw + 2.3805825243rem, 7.6rem);
line-height: 1.08;
text-wrap: balance;
font-weight: var(--font-weight-regular);
}
.newyoung-home__hero-description {
max-width: 58rem;
color: color-mix(in srgb, var(--public-header-white) 78%, transparent);
font-size: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
line-height: 1.65;
text-wrap: pretty;
}
.newyoung-home__about {
display: grid;
align-items: center;
min-height: 100svh;
color: var(--public-white);
background: var(--public-brand-dark);
}
.newyoung-home__about-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: var(--section-md);
}
.newyoung-home__about-copy, .newyoung-home__doctor-copy {
display: grid;
align-content: center;
justify-items: start;
gap: var(--public-space-xl);
}
.newyoung-home__about-title {
max-width: 32ch;
text-wrap: balance;
}
.newyoung-home__prose {
display: grid;
gap: var(--public-space-sm);
max-width: 52rem;
}
.newyoung-home__prose p {
text-wrap: pretty;
}
.newyoung-home__about-copy .newyoung-home__prose, .newyoung-home__safety-copy {
color: color-mix(in srgb, var(--public-white) 72%, transparent);
}
.newyoung-home__about .public-button--outline, .newyoung-home__program--dark .public-button--outline {
color: var(--public-white);
border-color: var(--public-white);
}
.newyoung-home__about-art {
justify-self: end;
width: min(100%, 56rem);
margin: 0;
overflow: visible;
color: var(--public-brand-surface);
}
.newyoung-home__line-art-svg, .newyoung-home__line-art-fallback {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.newyoung-home__line-art-svg path[pathLength="1"] {
stroke: currentColor;
stroke-width: 0.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.newyoung-home__program-intro {
position: relative;
isolation: isolate;
background: var(--public-brand-surface-strong);
}
.newyoung-home__program-intro > .no-section-lg {
position: relative;
z-index: 2;
display: grid;
align-items: stretch;
min-height: 60svh;
}
.newyoung-home__program-intro-inner {
display: grid;
grid-template-columns: repeat(11, minmax(0, 1fr));
grid-template-rows: auto 1fr auto;
align-items: start;
column-gap: var(--public-space-xs);
}
.newyoung-home__program-intro-heading {
grid-column: 2/span 6;
grid-row: 1;
display: grid;
gap: var(--public-space-sm);
}
.newyoung-home__program-intro-title {
max-width: none;
font-size: clamp(2.6rem, 1.0355987055vw + 2.2116504854rem, 4.2rem);
line-height: 1.18;
text-wrap: balance;
}
.newyoung-home__program-intro-content {
grid-column: 7/span 4;
grid-row: 3;
align-self: end;
display: grid;
justify-items: start;
gap: var(--public-space-xl);
}
.newyoung-home__program-intro-copy {
max-width: 46rem;
color: var(--public-muted);
text-wrap: pretty;
}
.newyoung-home__programs {
position: relative;
isolation: isolate;
}
.newyoung-home__program {
position: relative;
width: 100%;
height: 100svh;
min-height: 60rem;
}
.newyoung-home__program-media {
top: 0;
height: 100%;
}
.newyoung-home__program-card {
position: absolute;
top: 50%;
right: max(var(--public-shell-gutter), (100vw - var(--public-shell-max)) / 2);
display: grid;
width: min(50rem, 100% - var(--public-shell-gutter) * 2);
padding: var(--public-space-2xl);
gap: var(--public-space-md);
translate: 0 -50%;
backdrop-filter: blur(1.2rem);
}
.newyoung-home__program--dark .newyoung-home__program-card {
color: var(--public-white);
background: color-mix(in srgb, var(--public-brand-ink) 82%, transparent);
}
.newyoung-home__program--light .newyoung-home__program-card {
color: var(--public-ink);
background: color-mix(in srgb, var(--public-white) 86%, transparent);
}
.newyoung-home__program-copy {
color: inherit;
font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
opacity: 0.76;
text-wrap: pretty;
}
.newyoung-home__program-copy.no-copy--desktop-breaks {
text-wrap: balance;
}
.newyoung-home__program-card .public-button {
justify-self: start;
margin-top: var(--public-space-xs);
}
.newyoung-home__doctor {
background: var(--public-brand-surface);
}
.newyoung-home__doctor-inner {
display: grid;
grid-template-columns: minmax(22rem, 0.8fr) minmax(24rem, 0.62fr) minmax(28rem, 1fr);
align-items: center;
gap: var(--section-sm);
}
.newyoung-home__doctor-heading {
display: grid;
gap: var(--public-space-sm);
}
.newyoung-home__doctor-title {
max-width: 100%;
}
@media (max-width: 768px) {
.newyoung-home__doctor-title {
max-width: 100%;
}
}
.newyoung-home__doctor-portrait {
align-self: stretch;
margin: 0;
overflow: hidden;
background: var(--public-muted-soft);
}
.newyoung-home__doctor-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.newyoung-home__doctor-copy .newyoung-home__prose {
color: var(--public-muted);
}
.newyoung-home__private {
display: grid;
min-height: 100vh;
color: var(--public-white);
}
.newyoung-home__private-shade {
background: linear-gradient(90deg, color-mix(in srgb, var(--public-brand-ink) 58%, transparent), color-mix(in srgb, var(--public-brand-ink) 12%, transparent) 62%, color-mix(in srgb, var(--public-brand-ink) 42%, transparent));
}
.newyoung-home__private-inner {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
padding-inline: clamp(var(--gutter), 6.25vw, var(--section-lg));
container-type: inline-size;
}
.newyoung-home__private-title, .newyoung-home__safety-title {
display: flex;
align-items: baseline;
justify-content: center;
column-gap: 0.2em;
min-width: 0;
text-align: center;
white-space: nowrap;
}
.newyoung-home__private-title {
font-size: clamp(2.4rem, 9vw, 14.7rem);
font-size: clamp(2.4rem, 10.4cqw, 19.2rem);
}
.newyoung-home__private-copy {
display: grid;
align-self: start;
gap: var(--public-space-sm);
max-width: 42rem;
margin-top: var(--section-lg);
margin-left: clamp(0rem, 7.5vw, var(--section-lg));
}
.newyoung-home__private-copy > :last-child {
color: color-mix(in srgb, var(--public-white) 76%, transparent);
text-wrap: pretty;
}
.newyoung-home__safety {
min-height: 100vh;
padding-block: 0;
color: var(--public-white);
background: var(--public-brand-dark);
}
.newyoung-home__safety-inner {
padding-inline: 0;
container-type: inline-size;
}
.newyoung-home__safety-title {
margin-bottom: var(--section-md);
padding-top: var(--section-sm);
padding-inline: clamp(var(--gutter), 6.25vw, var(--section-lg));
font-size: clamp(2.4rem, 9.2vw, 15rem);
font-size: clamp(2.4rem, 9.4cqw, 15rem);
}
.newyoung-home__safety-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid color-mix(in srgb, var(--public-white) 24%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--public-white) 24%, transparent);
}
.newyoung-home__safety-item {
display: grid;
align-content: start;
padding: var(--section-md) var(--section-lg);
}
.newyoung-home__safety-item + .newyoung-home__safety-item {
border-left: 1px solid color-mix(in srgb, var(--public-white) 24%, transparent);
}
.newyoung-home__safety-item-description {
max-width: 48rem;
margin-top: var(--public-space-xs);
text-wrap: pretty;
}
.newyoung-home__safety-copy {
max-width: 48rem;
margin-top: var(--public-space-md);
text-wrap: pretty;
}
.newyoung-home__safety-copy-body {
display: block;
}
@media (min-width: 1024px) {
.newyoung-home__safety-item:nth-child(2) {
padding-inline-end: calc(var(--section-lg) - var(--public-space-xl));
}
.newyoung-home__safety-item:nth-child(2) .newyoung-home__safety-copy {
max-width: none;
}
}
.newyoung-home__safety-art {
width: min(100%, 56.4rem);
margin-top: var(--public-space-2xl);
overflow: visible;
color: var(--public-brand-surface);
}
.newyoung-home__safety-art .newyoung-home__line-art-svg {
opacity: 0.48;
}
.newyoung-home__reservation {
min-height: 64rem;
background: var(--public-brand-surface);
}
.newyoung-home__reservation-media {
opacity: 1;
}
.newyoung-home__reservation-content {
position: relative;
z-index: 1;
display: grid;
justify-items: center;
gap: var(--public-space-md);
text-align: center;
}
.newyoung-home__reservation-copy {
max-width: 58rem;
color: var(--public-muted);
text-wrap: pretty;
}
.newyoung-home__reservation-copy br {
display: initial;
}
.newyoung-home__reservation-copy-mobile {
display: none;
}
@media (max-width: 767px) {
.newyoung-home__reservation-copy-desktop {
display: none;
}
.newyoung-home__reservation-copy-mobile {
display: inline;
}
}
.newyoung-home__reservation-content .public-button {
margin-top: var(--public-space-sm);
}
.newyoung-home__reservation-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
margin: var(--section-sm) 0 0;
gap: 0;
border-top: 1px solid var(--public-line-strong);
border-bottom: 1px solid var(--public-line-strong);
text-align: left;
}
.newyoung-home__reservation-detail {
display: grid;
align-content: start;
min-width: 0;
padding: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 6.4rem) clamp(2.8rem, 2.8478964401vw + 1.732038835rem, 7.2rem);
gap: var(--public-space-lg);
}
.newyoung-home__reservation-detail + .newyoung-home__reservation-detail {
border-left: 1px solid var(--public-line-strong);
}
.newyoung-home__reservation-detail dd {
display: grid;
gap: var(--public-space-xs);
margin: 0;
}
.newyoung-home__reservation-row {
display: grid;
grid-template-columns: minmax(5.6rem, 7.2rem) minmax(0, 1fr);
align-items: baseline;
gap: var(--public-space-sm);
}
.newyoung-home__reservation-label {
font-weight: var(--font-weight-regular);
}
.newyoung-home__reservation-value {
min-width: 0;
overflow-wrap: anywhere;
}
.newyoung-home__reservation-detail a {
color: inherit;
text-decoration: none;
}
@media (max-width: 1023px) {
.newyoung-home__about-inner, .newyoung-home__doctor-inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.newyoung-home__doctor-copy {
grid-column: 1/-1;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
}
.newyoung-home__doctor-copy .public-button {
align-self: end;
}
}
@media (max-width: 767px) {
.newyoung-home__hero {
min-height: max(68rem, 100svh);
}
.newyoung-home__hero-title {
max-width: 18ch;
}
.newyoung-home__about-title {
font-size: clamp(1.8rem, 6.1vw, 2.6rem);
}
.newyoung-home__hero-media {
object-position: 58% center;
}
.newyoung-home__hero-mark {
height: 9rem;
margin-bottom: var(--public-space-xs);
}
.newyoung-home__about-inner, .newyoung-home__program-intro-inner, .newyoung-home__doctor-inner, .newyoung-home__doctor-copy, .newyoung-home__safety-grid, .newyoung-home__reservation-details, .newyoung-home__reservation-detail {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-home__reservation-detail {
padding-inline: var(--public-space-xl);
}
.newyoung-home__reservation-detail + .newyoung-home__reservation-detail {
border-top: 1px solid var(--public-line-strong);
border-left: 0;
}
.newyoung-home__about-art {
max-width: 48rem;
justify-self: center;
}
.newyoung-home__program-intro-inner {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
gap: var(--public-space-2xl);
}
.newyoung-home__program-intro-heading, .newyoung-home__program-intro-content {
grid-column: auto;
grid-row: auto;
}
.newyoung-home__program-intro-content {
align-self: auto;
}
.newyoung-home__program-intro > .no-section-lg {
min-height: 0;
}
.newyoung-home__program {
position: relative;
height: auto;
min-height: max(64rem, 100svh);
}
.newyoung-home__program-media {
top: 0;
height: 100%;
}
.newyoung-home__program-card {
top: auto;
right: var(--public-shell-gutter);
bottom: var(--public-shell-gutter);
left: var(--public-shell-gutter);
width: auto;
padding: var(--public-space-xl);
translate: none;
}
.newyoung-home__doctor-heading, .newyoung-home__doctor-copy {
grid-column: auto;
}
.newyoung-home__doctor-portrait {
min-height: 52rem;
}
.newyoung-home__private {
min-height: 0;
padding-top: 0;
background: var(--public-brand-dark);
}
.newyoung-home__private-media {
position: relative;
z-index: 0;
height: auto;
aspect-ratio: 16/9;
object-fit: contain;
}
.newyoung-home__private-shade {
display: none;
}
.newyoung-home__private-inner {
padding-top: var(--public-space-xl);
}
.newyoung-home__private-copy {
margin-left: 0;
}
.newyoung-home__safety {
border-top: 1px solid color-mix(in srgb, var(--public-brand-line) 20%, transparent);
background: color-mix(in srgb, var(--public-brand-dark) 80%, var(--public-brand-accent));
}
.newyoung-home__safety-grid {
margin-inline: var(--gutter);
}
.newyoung-home__safety-item {
padding-inline: 0;
}
.newyoung-home__safety-item + .newyoung-home__safety-item {
border-top: 1px solid color-mix(in srgb, var(--public-white) 24%, transparent);
border-left: 0;
}
.newyoung-home__reservation {
min-height: 72rem;
}
.newyoung-home__reservation-details {
gap: var(--public-space-xl);
}
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
html.is-newyoung-intro-complete .newyoung-home__hero-media {
animation: home-hero-media-breathe 36s ease-in-out infinite alternate;
will-change: transform;
}
}
@keyframes home-hero-media-breathe {
from {
transform: scale(1);
}
to {
transform: scale(1.035);
}
}
@media (prefers-reduced-motion: reduce) {
.newyoung-home__program {
position: relative;
top: auto;
}
.newyoung-home__program-media {
top: 0;
height: 100%;
}
}
.newyoung-signature,
.newyoung-signature-detail {
overflow: clip;
color: var(--public-ink);
background: var(--public-brand-surface);
}
.newyoung-signature__hero, .newyoung-signature__intro, .newyoung-signature__why {
position: relative;
isolation: isolate;
overflow: hidden;
}
.newyoung-signature__hero {
display: grid;
min-height: clamp(64rem, 56.25vw, 108rem);
place-items: center;
}
.newyoung-signature__hero::after {
position: absolute;
z-index: 0;
inset: 0;
background: linear-gradient(116deg, color-mix(in srgb, var(--public-brand-ink) 12%, transparent), transparent 38%, color-mix(in srgb, var(--public-white) 8%, transparent) 64%, color-mix(in srgb, var(--public-brand-ink) 10%, transparent));
content: "";
opacity: 0.62;
pointer-events: none;
transition: opacity 1.2s ease;
}
.newyoung-signature__hero-light {
position: absolute;
z-index: 1;
inset: 0;
display: block;
width: 100%;
height: 100%;
mix-blend-mode: soft-light;
opacity: 0;
pointer-events: none;
transition: opacity 1.5s ease;
}
.newyoung-signature__hero.is-webgl-light-active::after {
opacity: 0.14;
}
.newyoung-signature__hero.is-webgl-light-active .newyoung-signature__hero-light {
opacity: 0.96;
}
.newyoung-signature__hero-media, .newyoung-signature__intro-media, .newyoung-signature__why-media {
position: absolute;
z-index: -1;
inset: 0;
height: 100%;
aspect-ratio: auto;
}
.newyoung-signature__hero-media .no-auto-cover__img, .newyoung-signature__intro-media .no-auto-cover__img, .newyoung-signature__why-media .no-auto-cover__img {
object-position: center;
}
.newyoung-signature__hero-content {
position: relative;
z-index: 2;
display: grid;
justify-items: center;
gap: var(--public-space-md);
text-align: center;
}
.newyoung-signature__eyebrow {
color: inherit;
}
.newyoung-signature__hero-title {
max-width: 25ch;
text-wrap: balance;
}
.newyoung-signature__hero-period, .newyoung-signature__mobile-copy {
display: none;
}
.newyoung-signature__intro-title, .newyoung-signature__program-title {
scroll-margin-top: calc(var(--public-header-height) + 2.4rem);
}
@media (min-width: 1024px) {
.newyoung-signature__hero-title {
max-width: none;
}
}
@media (max-width: 1023px) {
.newyoung-signature__hero-period {
display: inline;
}
.newyoung-signature__mobile-copy {
display: block;
}
.newyoung-signature__desktop-copy {
display: none;
}
}
.newyoung-signature__intro {
display: grid;
min-height: 100vh;
place-items: center;
background: var(--public-brand-surface);
}
.newyoung-signature__intro-inner {
display: grid;
justify-items: center;
gap: var(--public-space-md);
text-align: center;
}
.newyoung-signature__intro-text, .newyoung-signature__intro-copy {
display: grid;
justify-items: center;
}
.newyoung-signature__intro-text {
font-size: var(--heading-xs-fs);
gap: 1.5em;
}
.newyoung-signature__intro-title {
max-width: 36ch;
text-wrap: balance;
}
.newyoung-signature__intro-copy {
color: var(--public-muted);
}
.newyoung-signature__intro-copy p {
text-wrap: pretty;
}
.newyoung-signature__catalog {
position: relative;
background: var(--public-brand-surface-strong);
}
.newyoung-signature__programs {
position: relative;
}
.newyoung-signature__program {
--signature-program-overlay-opacity: 0;
position: relative;
isolation: isolate;
background: var(--public-brand-surface-strong);
}
.newyoung-signature__program::after {
position: absolute;
z-index: 1;
inset: 0;
background: var(--public-brand-ink);
content: "";
opacity: var(--signature-program-overlay-opacity);
pointer-events: none;
}
.newyoung-signature__program-inner {
position: relative;
display: grid;
width: min(100% - var(--public-shell-gutter) * 2, var(--public-shell-max));
max-width: none;
margin-inline: auto;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: auto 32svh auto minmax(0, 1fr);
column-gap: var(--public-space-sm);
row-gap: var(--section-sm);
min-height: max(52rem, 100svh);
padding-block: var(--section-sm);
}
.newyoung-signature__program-heading {
position: relative;
grid-column: 1/-1;
grid-row: 1;
display: grid;
align-content: start;
padding-bottom: var(--public-space-md);
}
.newyoung-signature__program-heading::after {
position: absolute;
right: calc(50% - 50vw);
bottom: 0;
left: calc(50% - 50vw);
height: 1px;
background: color-mix(in srgb, var(--public-ink) 46%, transparent);
content: "";
}
.newyoung-signature__program-title {
max-width: none;
text-wrap: balance;
}
.newyoung-signature__program-copy, .newyoung-signature__program-process {
max-width: 64rem;
}
.newyoung-signature__program-copy {
grid-column: 1/span 10;
grid-row: 2;
max-width: none;
align-self: start;
color: var(--public-muted);
columns: 2;
column-gap: var(--public-space-sm);
}
.newyoung-signature__program-copy p {
break-inside: avoid;
text-wrap: pretty;
}
.newyoung-signature__program-copy--columns {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
columns: auto;
}
.newyoung-signature__program-copy-column br {
display: initial;
}
.newyoung-signature__program-copy-line {
display: block;
}
.newyoung-signature__program-copy-column:first-child p {
color: var(--public-ink);
font-size: clamp(1.7rem, 1.3vw, 2rem);
font-weight: var(--font-weight-medium);
line-height: 1.65;
}
.newyoung-signature__program--tailored-collagen-booster .newyoung-signature__program-copy-column:last-child p {
text-wrap: balance;
}
.newyoung-signature__program-process {
grid-column: 5/span 6;
grid-row: 3;
width: 100%;
max-width: none;
align-self: start;
}
.newyoung-signature__program-process-label {
margin-bottom: var(--public-space-xs);
}
.newyoung-signature__program-process-list {
border-top: 0;
}
.newyoung-signature__program-process-list li {
display: grid;
grid-template-columns: 1.2rem minmax(0, 1fr);
gap: var(--public-space-2xs);
padding-block: 0.1rem;
border-bottom: 1px solid color-mix(in srgb, var(--public-ink) 46%, transparent);
color: var(--public-muted);
}
.newyoung-signature__program-process-list li::before {
content: "•";
color: var(--public-ink);
}
.newyoung-signature__program-action {
grid-column: 11/-1;
grid-row: 2;
display: grid;
align-self: start;
align-content: start;
justify-items: stretch;
gap: var(--public-space-md);
}
.newyoung-signature__program-icon {
display: grid;
width: min(100%, var(--public-treatment-pictogram-frame-lg));
min-height: var(--public-treatment-pictogram-frame-lg);
place-items: center;
justify-self: center;
}
.newyoung-signature__program-icon .no-auto-cover {
width: 100%;
background: transparent;
}
.newyoung-signature__program-icon .no-auto-cover__img {
mix-blend-mode: normal;
object-fit: contain;
}
.newyoung-signature__program-action .public-button, .newyoung-signature__program-listen.public-button {
min-width: 0;
--public-button-min-height: var(--public-control-lg);
--public-button-padding-inline: var(--public-space-sm);
white-space: nowrap;
}
.newyoung-signature__program-action .public-button {
width: 100%;
}
.newyoung-signature__program-action .public-button__icon i, .newyoung-signature__program-listen .public-button__icon i {
font-size: var(--public-icon-sm);
font-weight: var(--font-weight-regular);
}
.newyoung-signature__program-listen {
color: var(--public-brand-ink);
border-color: var(--public-brand-ink);
background: transparent;
}
.newyoung-signature__program-buttons {
display: grid;
width: 100%;
gap: var(--public-space-xs);
}
@media (max-width: 1023px) {
.newyoung-signature__program-copy {
grid-column: 1/span 9;
}
.newyoung-signature__program-action {
grid-column: 10/-1;
}
.newyoung-signature__program-action .public-button, .newyoung-signature__program-listen.public-button {
--public-button-padding-inline: var(--public-space-2xs);
font-size: 1.4rem;
}
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.newyoung-signature__catalog.is-sticky-motion .newyoung-signature__programs {
will-change: transform;
}
.newyoung-signature__catalog.is-sticky-motion .newyoung-signature__program {
position: sticky;
}
.newyoung-signature__catalog.is-sticky-motion .newyoung-signature__program-inner {
min-height: max(52rem, 100svh);
}
}
.newyoung-signature__why {
min-height: 68rem;
color: var(--public-white);
}
.newyoung-signature__why::after {
position: absolute;
z-index: -1;
inset: 0;
background: linear-gradient(90deg, color-mix(in srgb, var(--public-brand-ink) 78%, transparent), transparent 74%);
content: "";
}
.newyoung-signature__why-inner {
display: grid;
align-content: center;
justify-items: start;
min-height: inherit;
gap: var(--public-space-md);
}
.newyoung-signature__why-copy {
max-width: 44rem;
}
.newyoung-signature__why-copy {
color: color-mix(in srgb, var(--public-white) 72%, transparent);
text-wrap: pretty;
}
.newyoung-signature__why .public-button {
margin-top: var(--public-space-sm);
}
.newyoung-signature__why .public-button--outline {
color: var(--public-white);
border-color: var(--public-white);
}
@media (max-width: 767px) {
.newyoung-signature__hero {
min-height: 68rem;
}
.newyoung-signature__hero-title {
max-width: none;
font-size: clamp(1.8rem, 5.8vw, 3.2rem);
line-height: 1.45;
}
.newyoung-signature__hero-media .no-auto-cover__img {
object-position: 46% center;
}
.newyoung-signature__program + .newyoung-signature__program {
border-top: 2px solid color-mix(in srgb, var(--public-ink) 68%, transparent);
}
.newyoung-signature__program-inner {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "heading" "action" "copy" "process";
grid-template-rows: auto;
min-height: 0;
padding-inline: 0;
padding-block: var(--section-sm);
gap: var(--public-space-xl);
}
.newyoung-signature__program-title {
font-size: clamp(2.4rem, 6.4vw, 3.6rem);
}
.newyoung-signature__program-action {
grid-column: auto;
grid-row: auto;
grid-area: action;
width: min(100%, 31.6rem);
justify-self: center;
justify-items: stretch;
}
.newyoung-signature__program-copy {
grid-column: auto;
grid-row: auto;
grid-area: copy;
columns: 1;
}
.newyoung-signature__program-copy--columns {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--public-space-md);
}
.newyoung-signature__program-copy-column:first-child p {
font-size: clamp(1.6rem, 4.3vw, 2rem);
}
.newyoung-signature__program-heading {
grid-column: auto;
grid-row: auto;
grid-area: heading;
}
.newyoung-signature__program-process {
grid-column: auto;
grid-row: auto;
grid-area: process;
}
.newyoung-signature__program-icon {
width: min(100%, var(--public-treatment-pictogram-frame-lg));
min-height: var(--public-treatment-pictogram-frame-lg);
}
.newyoung-signature__program-action .public-button {
width: 100%;
}
.newyoung-signature__program-buttons {
width: 100%;
}
.newyoung-signature__why {
min-height: 62rem;
}
.newyoung-signature__why-media .no-auto-cover__img {
object-position: 64% center;
}
.newyoung-signature__why::after {
background: linear-gradient(0deg, color-mix(in srgb, var(--public-brand-ink) 86%, transparent), transparent 82%);
}
}
.newyoung-signature__program-icon--wide {
width: 100%;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.newyoung-signature-detail__visual::before {
animation: signature-detail-gradient-drift-primary 18s ease-in-out infinite alternate;
}
.newyoung-signature-detail__visual::after {
animation: signature-detail-gradient-drift-secondary 22s ease-in-out infinite alternate;
}
}
@keyframes signature-detail-gradient-drift-primary {
from {
transform: translate3d(-4%, -2%, 0) rotate(-5deg) scale(1.04);
}
to {
transform: translate3d(7%, 5%, 0) rotate(7deg) scale(1.14);
}
}
@keyframes signature-detail-gradient-drift-secondary {
from {
transform: translate3d(5%, 3%, 0) rotate(7deg) scale(1.08);
}
to {
transform: translate3d(-7%, -4%, 0) rotate(-8deg) scale(1.16);
}
}
@media (prefers-reduced-motion: no-preference) {
.newyoung-signature__hero-media {
animation: signature-hero-media-enter 1.8s ease-out both;
}
.newyoung-signature__hero-content {
animation: signature-hero-copy-enter 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.newyoung-signature__hero .newyoung-signature__hero-media .no-auto-cover__img {
animation: signature-hero-image-drift 32s ease-in-out infinite alternate;
will-change: transform;
}
}
@keyframes signature-hero-media-enter {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes signature-hero-copy-enter {
from {
opacity: 0;
transform: translate3d(0, 1.6rem, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes signature-hero-image-drift {
from {
transform: translate3d(-1.1%, 0.3%, 0) scale(1.025);
}
to {
transform: translate3d(1.2%, -0.8%, 0) scale(1.065);
}
}
.newyoung-signature-detail__hero, .newyoung-signature-detail__overview {
position: relative;
isolation: isolate;
overflow: hidden;
}
.newyoung-signature-detail__hero {
display: grid;
min-height: clamp(58rem, 48vw, 86rem);
align-items: end;
}
.newyoung-signature-detail__hero-media, .newyoung-signature-detail__overview-media {
position: absolute;
z-index: -1;
inset: 0;
height: 100%;
aspect-ratio: auto;
}
.newyoung-signature-detail__hero-content {
display: grid;
gap: var(--public-space-sm);
padding-bottom: var(--section-md);
}
.newyoung-signature-detail__title {
max-width: 20ch;
}
.newyoung-signature-detail__name, .newyoung-signature-detail__overview-copy {
color: var(--public-muted);
}
.newyoung-signature-detail__overview {
min-height: 62rem;
}
.newyoung-signature-detail__overview-inner {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.45fr);
align-items: center;
min-height: inherit;
gap: var(--section-sm);
}
.newyoung-signature-detail__overview-heading {
display: grid;
gap: var(--public-space-md);
}
.newyoung-signature-detail__overview-title, .newyoung-signature-detail__overview-copy {
max-width: 58rem;
}
.newyoung-signature-detail__icon {
display: grid;
width: min(100%, var(--public-treatment-pictogram-frame-lg));
min-height: var(--public-treatment-pictogram-frame-lg);
justify-self: center;
place-items: center;
}
.newyoung-signature-detail__process {
background: var(--public-brand-surface-strong);
}
.newyoung-signature-detail__process-inner, .newyoung-signature-detail__process-heading {
display: grid;
}
.newyoung-signature-detail__process-inner {
gap: var(--public-space-2xl);
}
.newyoung-signature-detail__process-heading {
gap: var(--public-space-sm);
}
.newyoung-signature-detail__process-title {
max-width: 28ch;
}
.newyoung-signature-detail__process-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--public-line-strong);
border-bottom: 1px solid var(--public-line-strong);
}
.newyoung-signature-detail__process-list li {
display: grid;
align-content: start;
min-height: 20rem;
padding: var(--public-space-xl);
gap: var(--public-space-md);
}
.newyoung-signature-detail__process-list li + li {
border-left: 1px solid var(--public-line-strong);
}
.newyoung-signature-detail__process-list p, .newyoung-signature-detail__process-number {
color: var(--public-muted);
}
.newyoung-signature-detail__process-inner .public-button {
justify-self: start;
}
@media (max-width: 767px) {
.newyoung-signature-detail__hero {
min-height: 64rem;
}
.newyoung-signature-detail__hero-media .no-auto-cover__img {
object-position: 48% center;
}
.newyoung-signature-detail__overview {
min-height: 58rem;
}
.newyoung-signature-detail__overview-inner, .newyoung-signature-detail__process-list {
grid-template-columns: minmax(0, 1fr);
}
.newyoung-signature-detail__icon {
width: var(--public-treatment-pictogram-frame-md);
min-height: var(--public-treatment-pictogram-frame-md);
justify-self: start;
}
.newyoung-signature-detail__process-list li {
min-height: 0;
padding-inline: 0;
}
.newyoung-signature-detail__process-list li + li {
border-top: 1px solid var(--public-line-strong);
border-left: 0;
}
}
.clinic-rail {
background: var(--public-ink);
color: var(--public-brand-surface);
}
.clinic-rail__viewport {
height: 100svh;
min-height: 60rem;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: var(--public-brand-accent) transparent;
}
.clinic-rail.is-pinned .clinic-rail__viewport {
overflow: clip;
}
.clinic-rail__track {
display: flex;
width: max-content;
height: 100%;
gap: 2.4rem;
padding: 12rem 7.3vw 4.8rem;
}
.clinic-rail__intro {
width: 39vw;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 4vw;
border-right: 1px solid rgba(246, 241, 234, 0.25);
margin-right: 2.4rem;
}
.clinic-rail__intro > .clinic-space__media {
width: 12vw;
height: 16vw;
max-height: 22vh;
margin-bottom: 2rem;
flex-shrink: 0;
}
.clinic-rail__intro h2 {
font-size: clamp(3rem, 2.5vw, 4.8rem);
margin: 2.4rem 0;
}
.clinic-rail__intro > span {
font-size: 1.8rem;
}
.clinic-rail__photo {
display: flex;
flex-direction: column;
gap: 2rem;
width: 36vw;
flex-shrink: 0;
}
.clinic-rail__photo .clinic-space__media {
flex: 1;
min-height: 0;
}
.clinic-rail__photo figcaption {
font-family: "Manrope", sans-serif;
font-size: 1.8rem;
}
.clinic-rail__photo:nth-of-type(n+2), .clinic-rail__photo--wide {
width: 70vw;
}
.clinic-space [id] {
scroll-margin-top: calc(var(--public-header-height) + 2.4rem);
}
.clinic-space p br {
display: initial;
}
.clinic-space__copy-mobile {
display: none;
}
.clinic-space {
--color-background-space-dark: #050403;
--space-background-darkness: 0%;
--space-background-warmth: 0%;
}
.clinic-space.has-background-transitions {
background: color-mix(in srgb, color-mix(in srgb, var(--public-ink), var(--color-background-space-dark) var(--space-background-darkness)), var(--public-ink) var(--space-background-warmth));
}
.clinic-space.has-background-transitions .clinic-space__promise, .clinic-space.has-background-transitions .clinic-space__privacy, .clinic-space.has-background-transitions .clinic-space__calm, .clinic-space.has-background-transitions .clinic-space__beyond {
background: transparent;
}
.clinic-space__media {
position: relative;
overflow: hidden;
min-width: 0;
}
.clinic-space__media > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.clinic-space__hero {
position: relative;
height: 100svh;
min-height: 65rem;
overflow: hidden;
color: var(--public-brand-surface);
}
.clinic-space__hero > .clinic-space__media {
position: absolute;
inset: 0;
}
.clinic-space__hero::after {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--public-ink) 40%, transparent);
pointer-events: none;
}
.clinic-space__hero p {
order: -1;
align-self: flex-end;
width: 30vw;
margin: 0;
font-size: clamp(1.6rem, 1.25vw, 2.4rem);
line-height: 1.61;
}
.clinic-space__hero h1 {
font-family: var(--font-display-family);
font-size: 9.791667vw;
white-space: nowrap;
line-height: 1.35;
letter-spacing: -0.02em;
margin: 0;
}
.clinic-space__hero h1 span {
white-space: nowrap;
}
.clinic-space__hero-copy {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: max(7.5vw, var(--public-header-height) + 2.4rem) 5.260417vw 0;
}
.clinic-space__arrival .clinic-rail__intro {
position: relative;
display: grid;
grid-template-columns: 1fr 12.135417vw;
grid-template-rows: auto 1fr;
width: 41.875vw;
padding-right: 6.770833vw;
margin-right: 0;
border: 0;
}
.clinic-space__arrival .clinic-rail__intro::after {
content: "";
position: absolute;
top: -12rem;
bottom: -4.8rem;
right: 2.708333vw;
width: 1px;
background: var(--public-brand-accent);
}
.clinic-space__arrival .clinic-rail__intro > span {
grid-area: 1/1;
align-self: start;
font-size: clamp(1.4rem, 1.041667vw, 2rem);
}
.clinic-space__arrival .clinic-rail__intro > .clinic-space__media {
grid-area: 1/2;
width: 100%;
height: 15.677083vw;
max-height: none;
margin: 0;
}
.clinic-space__arrival .clinic-rail__intro > .clinic-space__media img {
object-position: 82% center;
}
.clinic-space__arrival .clinic-rail__copy {
grid-column: 1/-1;
align-self: end;
padding-top: 3rem;
}
.clinic-space__arrival .clinic-rail__copy h2 {
margin: 0 0 1.6rem;
line-height: 1.5;
}
.clinic-space__arrival .clinic-rail__copy p {
margin: 0;
font-size: clamp(1.6rem, 1.25vw, 2.4rem);
line-height: 1.61;
}
.clinic-space__arrival .clinic-rail__copy p + p {
margin-top: 1.6rem;
font-size: var(--body-md-fs);
line-height: var(--body-md-lh);
}
@media (max-width: 1023px) {
.clinic-space__arrival .clinic-rail__track {
padding-top: max(3rem, var(--public-header-height) + 2.4rem);
}
.clinic-space__arrival .clinic-rail__intro {
width: 75vw;
padding-right: 4rem;
grid-template-columns: 1fr 18rem;
}
.clinic-space__arrival .clinic-rail__intro::after {
top: -3rem;
bottom: -3rem;
right: 1.2rem;
}
.clinic-space__arrival .clinic-rail__intro > .clinic-space__media {
height: 22rem;
}
}
@media (max-width: 767px) {
.clinic-space__arrival .clinic-rail__intro {
width: 85vw;
grid-template-columns: 1fr 12rem;
}
.clinic-space__arrival .clinic-rail__intro > .clinic-space__media {
height: 15.5rem;
}
.clinic-space__arrival .clinic-rail__copy {
padding-top: 2rem;
}
.clinic-space__arrival .clinic-rail__copy h2 {
font-size: 2.4rem;
}
}
.clinic-space__promise {
position: relative;
min-height: 100svh;
background: var(--public-ink);
color: var(--public-brand-surface);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: max(12rem, var(--public-header-height) + 2.4rem) 2.4rem;
}
.clinic-space__promise p {
max-width: 55.4rem;
font-size: clamp(1.8rem, 1.46vw, 2.8rem);
line-height: 1.61;
}
.clinic-space__promise-copy {
display: grid;
gap: 3rem;
}
.clinic-space__promise-label {
position: absolute;
inset-inline: 2.4rem;
bottom: clamp(3.2rem, 6svh, 8rem);
display: grid;
justify-items: center;
gap: 0.8rem;
font-size: 1.6rem;
}
.clinic-space__promise-label img {
width: auto;
}
.clinic-space__privacy {
background: var(--color-background-space-dark);
}
.clinic-space__privacy .clinic-rail__intro {
width: 34vw;
text-align: center;
border: 0;
}
.clinic-space__rooms {
display: grid;
grid-template-rows: 1fr 1fr;
grid-auto-flow: column;
grid-auto-columns: 36.6vw;
gap: 2.4rem;
height: 100%;
}
.clinic-space__rooms figure {
min-height: 0;
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.clinic-space__rooms .clinic-space__media {
min-height: 0;
flex: 1;
}
.clinic-space__rooms figcaption {
font-size: 1.5rem;
}
.clinic-space__panel {
width: 100vw;
flex-shrink: 0;
min-height: 56.25vw;
padding: 7.2vw;
background: var(--public-ink);
color: var(--public-brand-surface);
display: grid;
grid-template-columns: 1fr 1fr 0.85fr;
align-items: center;
gap: 6rem;
}
.clinic-space__panel h2 {
font-size: clamp(3rem, 2.5vw, 4.8rem);
}
.clinic-space__panel > .clinic-space__media {
aspect-ratio: 2/3;
height: 100%;
max-height: 75vh;
}
.clinic-space__panel p {
font-size: clamp(1.6rem, 1.25vw, 2.4rem);
}
.clinic-space__panel > header p {
margin-top: 2rem;
}
.clinic-space__calm {
background: var(--color-background-space-dark);
}
.clinic-space__calm > header {
align-self: start;
}
.clinic-space__calm > p {
align-self: end;
}
.clinic-space__beyond {
background: var(--public-ink);
color: var(--public-brand-surface);
}
.clinic-space__stage {
padding: 7.2vw;
}
.clinic-space__stage h2 {
font-size: clamp(3rem, 2.5vw, 4.8rem);
}
.clinic-space__scenes {
display: grid;
gap: 6rem;
margin-top: 4rem;
}
.clinic-space__scene {
display: grid;
grid-template-columns: 1fr 0.85fr;
align-items: center;
gap: 6rem;
}
.clinic-space__scene .clinic-space__media {
width: 100%;
aspect-ratio: 2/3;
max-height: 70svh;
}
.clinic-space__scene p {
font-size: clamp(1.6rem, 1.25vw, 2.4rem);
}
.clinic-space__beyond.is-pinned .clinic-space__stage {
display: grid;
grid-template-columns: 1fr 1.85fr;
align-items: center;
gap: 6rem;
height: 100svh;
padding-block: max(3rem, var(--public-header-height)) 3rem;
}
.clinic-space__beyond.is-pinned .clinic-space__scenes {
gap: 0;
margin: 0;
min-height: 0;
}
.clinic-space__beyond.is-pinned .clinic-space__scene {
grid-area: 1/1;
min-width: 0;
min-height: 0;
}
.clinic-doctor :is(h2, p) br {
display: initial;
}
.clinic-doctor .newyoung-doctor-visual-hero__title {
font-size: clamp(2.8rem, 2.5vw, 4.8rem);
line-height: 1;
}
.clinic-doctor .newyoung-doctor-section__title {
font-size: 2.4rem;
}
.clinic-doctor .newyoung-doctor-section__paragraph {
font-size: var(--body-md-fs);
}
.clinic-doctor__approach {
background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url("/assets/images/about/doctor-approach.png") center/cover;
}
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
.clinic-doctor__approach {
background-attachment: fixed;
}
}
.clinic-doctor__approach > div {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20%;
padding: 18vw 14% 5vw;
align-items: start;
}
.clinic-doctor__approach h2 {
font-size: clamp(3rem, 2.5vw, 4.8rem);
}
.clinic-doctor__approach p {
margin: 0;
}
.clinic-doctor__global h2 {
font-size: clamp(3rem, 2.5vw, 4.8rem);
}
.clinic-doctor__global .clinic-rail__viewport:focus-visible {
outline: 2px solid var(--public-brand-accent);
outline-offset: -4px;
}
.clinic-doctor__global .clinic-rail__track {
position: relative;
gap: 8vw;
padding-block: max(12rem, 12svh) 6svh;
}
.clinic-doctor__global .clinic-rail__track::before {
content: "";
position: absolute;
top: 48%;
left: 0;
right: 0;
border-top: 1px solid rgba(246, 241, 234, 0.2);
pointer-events: none;
}
.clinic-doctor__global-intro {
position: relative;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 43vw;
padding-right: 4vw;
}
.clinic-doctor__global-intro h2 {
margin-bottom: 3rem;
}
.clinic-doctor__signature {
color: color-mix(in srgb, var(--public-brand-surface) 55%, transparent);
}
.clinic-doctor__signature span {
font-weight: var(--font-weight-regular);
}
.clinic-doctor__global-copy {
max-width: 42rem;
margin: auto 0 0;
padding-top: 5rem;
}
.clinic-doctor__global-photos {
position: relative;
display: flex;
flex-shrink: 0;
gap: 8vw;
align-items: center;
}
.clinic-doctor__global-photos img {
flex-shrink: 0;
min-width: 0;
width: 48vw;
height: auto;
max-height: 100%;
object-fit: contain;
}
.clinic-doctor__global-photos img:nth-child(3n+1) {
width: 40vw;
}
.clinic-reset {
--reset-section-space: clamp(7.2rem, 6.667vw, 12.8rem);
}
.clinic-reset__principles p br, .clinic-reset__journey li p br {
display: initial;
}
.clinic-reset__journey > p br {
display: none;
}
@media (max-width: 1023px) {
.clinic-reset__journey > p br {
display: initial;
}
}
.clinic-reset__inner {
width: min(71.04%, 136.4rem);
margin: auto;
}
.clinic-reset__hero {
min-height: max(100svh, 56.25vw);
overflow: hidden;
}
.clinic-reset__hero .clinic-reset__water-surface {
filter: brightness(0.75);
}
.clinic-reset__hero > .clinic-reset__hero-content {
padding-top: clamp(13rem, 9.063vw, 17.4rem);
padding-bottom: clamp(5rem, 4.167vw, 8rem);
width: 100%;
min-height: inherit;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
align-content: end;
}
.clinic-reset__hero h1 {
margin: 0;
font-family: var(--font-sans-family);
font-size: clamp(3.6rem, 5vw, 9.6rem);
line-height: 1.1;
letter-spacing: 0.04em;
}
.clinic-reset__hero h1 > span {
display: block;
}
.clinic-reset__hero.has-water.is-water-moving .clinic-reset__water-surface > img {
opacity: 0;
}
.clinic-reset__hero.has-water.is-water-moving canvas {
opacity: 1;
}
.clinic-reset [data-reset-media] {
overflow: hidden;
}
.clinic-reset__hero > .clinic-reset__hero-media {
position: absolute;
inset: 0;
padding: 0;
z-index: 0;
}
.clinic-reset__water-surface {
position: absolute;
inset: 0;
}
.clinic-reset__water-surface > img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.25s;
}
.clinic-reset__water {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
}
.clinic-reset__hero-copy h2 {
font-size: clamp(3.6rem, 3.33vw, 6.4rem);
}
.clinic-reset__hero-copy p {
margin-top: clamp(2.4rem, 2.5vw, 4.8rem);
}
.clinic-reset__hero-copy p:first-of-type {
font-weight: var(--font-weight-medium);
}
.clinic-reset__hero-copy p + p {
font-size: clamp(1.6rem, 1.042vw, 2rem);
}
.clinic-reset__heading {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.4rem;
align-items: start;
margin-bottom: clamp(4rem, 4.167vw, 8rem);
}
.clinic-reset__heading h2 {
font-size: clamp(3rem, 2.5vw, 4.8rem);
font-weight: var(--font-weight-medium);
line-height: 1.35;
}
.clinic-reset__heading p {
font-size: clamp(1.6rem, 1.094vw, 2.1rem);
}
.clinic-reset__heading p + p {
font-size: var(--body-md-fs);
margin-top: 2rem;
}
.clinic-reset__intro {
padding: var(--reset-section-space) 0;
color: var(--public-brand-surface);
background: var(--public-ink);
}
.clinic-reset__intro .clinic-reset__heading {
align-items: center;
}
.clinic-reset__intro .clinic-reset__heading h2 {
line-height: 1.65;
}
.clinic-reset__intro .clinic-reset__heading > div > p:first-child {
font-size: clamp(1.6rem, 1.25vw, 2.4rem);
}
.clinic-reset__portrait {
aspect-ratio: 1364/649;
}
.clinic-reset__portrait img {
height: 100%;
}
.clinic-reset__principles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 0.781vw, 1.5rem);
margin-top: clamp(4rem, 4.167vw, 8rem);
}
.clinic-reset__principles article {
aspect-ratio: 1;
border: 1px solid rgba(246, 241, 234, 0.7);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem;
}
.clinic-reset__principles article:nth-child(2) img {
width: 80.64%;
}
.clinic-reset__principles article:nth-child(3) img {
width: 94.3%;
}
.clinic-reset__principles h3 {
font-size: clamp(2.2rem, 1.458vw, 2.8rem);
font-weight: var(--font-weight-regular);
line-height: 1.65;
}
.clinic-reset__principles p {
color: var(--public-brand-accent-soft);
font-size: var(--body-md-fs);
}
.clinic-reset__principle-icon {
display: grid;
place-items: center;
flex-shrink: 0;
width: clamp(10rem, 8.594vw, 16.5rem);
height: clamp(10rem, 8.594vw, 16.5rem);
margin-bottom: 0.8rem;
}
.clinic-reset__principle-icon img {
height: auto;
object-fit: contain;
}
.clinic-reset__programs {
position: relative;
overflow: hidden;
padding: var(--reset-section-space) 0 4rem;
color: var(--public-brand-surface);
background: var(--public-ink);
}
.clinic-reset__programs > .clinic-reset__inner {
position: relative;
}
.clinic-reset__programs header h2 {
font-weight: var(--font-weight-medium);
}
.clinic-reset__programs header p {
margin-top: 2.1rem;
font-size: clamp(1.6rem, 1.094vw, 2.1rem);
}
.clinic-reset__programs.is-enhanced .clinic-reset__program {
display: grid;
}
.clinic-reset__programs.has-morph .clinic-reset__program > img {
visibility: hidden;
}
.clinic-reset__programs.is-pinned {
height: 100svh;
padding: clamp(9rem, 13.33svh, 14.4rem) 0 3rem;
}
.clinic-reset__programs.is-pinned > .clinic-reset__inner {
height: 100%;
display: flex;
flex-direction: column;
}
.clinic-reset__programs.is-pinned .clinic-reset__program-selector {
flex: 1;
min-height: 0;
grid-template-rows: minmax(0, 1fr) auto;
}
.clinic-reset__programs.is-pinned .clinic-reset__program {
min-height: 0;
padding-top: 2rem;
padding-bottom: 2rem;
}
.clinic-reset__programs.is-pinned .clinic-reset__program > img, .clinic-reset__programs.is-pinned .clinic-reset__program-art {
max-height: 37svh;
}
.clinic-reset__program-background {
position: absolute;
inset: 0;
}
.clinic-reset__program-background img {
height: 100%;
}
.clinic-reset__program-selector {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 0;
min-width: 0;
}
.clinic-reset__program-selector > input {
top: auto;
bottom: 2rem;
}
.clinic-reset__program-selector > label {
grid-row: 2;
cursor: pointer;
text-align: center;
padding: 2.4rem 1rem 1rem;
border-top: 3px solid rgba(246, 241, 234, 0.25);
margin: 0 1rem;
font-size: clamp(1.4rem, 1.042vw, 2rem);
transition: border-color 0.45s;
}
.clinic-reset__program-selector > input:checked + label {
border-color: var(--public-brand-surface);
}
.clinic-reset__program-selector > input:focus-visible + label {
outline: 2px solid currentColor;
outline-offset: 4px;
}
.clinic-reset__program-selector > input:checked + label + article {
display: grid;
}
.clinic-reset__program-art {
width: clamp(22rem, 20.729vw, 39.8rem);
max-width: 40%;
aspect-ratio: 1;
pointer-events: none;
grid-area: 1/1/2/-1;
align-self: center;
justify-self: start;
margin-left: 5.2%;
}
.clinic-reset__program-motion {
width: 100%;
height: 100%;
}
.clinic-reset__morph {
display: block;
width: 100%;
height: 100%;
}
.clinic-reset__program {
display: none;
grid-row: 1;
grid-column: 1/-1;
grid-template-columns: 1fr 1fr;
gap: 2.4rem;
align-items: center;
min-height: 56rem;
padding: 7rem 0;
}
.clinic-reset__program > img {
width: 100%;
max-width: 39.8rem;
aspect-ratio: 1;
object-fit: contain;
justify-self: center;
filter: brightness(0) invert(94%) sepia(9%) saturate(230%);
}
.clinic-reset__program > div {
max-width: 53.6rem;
}
.clinic-reset__program h3 {
font-size: clamp(2.6rem, 1.667vw, 3.2rem);
font-weight: var(--font-weight-medium);
line-height: 1.65;
margin-bottom: 2.4rem;
}
.clinic-reset__program p + p {
margin-top: 1.6rem;
}
.clinic-reset__application {
padding: var(--reset-section-space) 0;
background: var(--public-surface-subtle);
}
.clinic-reset__application .clinic-reset__heading {
align-items: center;
}
.clinic-reset__application .clinic-reset__heading h2 {
font-size: clamp(3rem, 2.396vw, 4.6rem);
}
.clinic-reset__application-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.4rem;
}
.clinic-reset__application-grid h3 {
font-size: clamp(2.2rem, 1.458vw, 2.8rem);
font-weight: var(--font-weight-medium);
line-height: 1.65;
margin-bottom: 0.8rem;
}
.clinic-reset__application-grid p {
font-size: var(--body-md-fs);
}
.clinic-reset__application-photo {
aspect-ratio: 674/388;
margin-bottom: 2.4rem;
}
.clinic-reset__application-photo img {
height: 100%;
}
.clinic-reset__consultation {
padding: var(--reset-section-space) 0 clamp(7.2rem, 8.724vw, 16.75rem);
background: var(--public-brand-surface-strong);
}
.clinic-reset__consultation .clinic-reset__heading {
align-items: center;
}
.clinic-reset__consultation .clinic-reset__heading p {
font-size: clamp(1.6rem, 1.042vw, 2rem);
}
.clinic-reset__consultation-grid {
display: grid;
grid-template-columns: 660fr 674fr;
gap: 1.6rem;
align-items: center;
}
.clinic-reset__consultation-grid li {
display: flex;
gap: clamp(1.6rem, 1.25vw, 2.4rem);
padding: clamp(2.4rem, 1.667vw, 3.2rem) 0;
border-bottom: 1px solid color-mix(in srgb, var(--public-ink) 30%, transparent);
}
.clinic-reset__consultation-grid li:first-child {
padding-top: 0;
}
.clinic-reset__consultation-grid li > span {
flex: 0 0 clamp(2.8rem, 2.083vw, 4rem);
font-size: 1.6rem;
line-height: 3.6rem;
}
.clinic-reset__consultation-grid li h3 {
font-size: clamp(2rem, 1.25vw, 2.4rem);
font-weight: var(--font-weight-medium);
line-height: 1.65;
margin-bottom: 0.8rem;
}
.clinic-reset__consultation-grid li p {
font-size: var(--body-md-fs);
color: var(--public-muted);
}
.clinic-reset__consultation-grid ol + p {
margin-top: clamp(2.4rem, 1.667vw, 3.2rem);
color: var(--public-muted);
font-size: clamp(1.4rem, 0.833vw, 1.6rem);
}
.clinic-reset__consultation-art {
aspect-ratio: 674/505.5;
}
.clinic-reset__consultation-art svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.clinic-reset__journey {
padding: var(--reset-section-space) 7.3%;
text-align: center;
}
.clinic-reset__journey > h2 {
font-size: clamp(3rem, 2.5vw, 4.8rem);
font-weight: var(--font-weight-medium);
}
.clinic-reset__journey-brand {
font-size: 1.18em;
}
.clinic-reset__journey > p {
margin-top: 2.4rem;
color: var(--public-muted);
font-size: clamp(1.6rem, 1.094vw, 2.1rem);
}
.clinic-reset__journey ol {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(2.4rem, 2.17vw, 4.166rem);
margin: clamp(4rem, 4.167vw, 8rem) auto 0;
max-width: 164rem;
}
.clinic-reset__journey li {
position: relative;
min-width: 0;
padding-bottom: clamp(1.6rem, 1.59vw, 3.047rem);
}
.clinic-reset__journey li:nth-child(2) .clinic-reset__step-icon img, .clinic-reset__journey li:nth-child(5) .clinic-reset__step-icon img {
width: 100%;
}
.clinic-reset__journey h3 {
font-size: clamp(1.8rem, 1.25vw, 2.4rem);
font-weight: var(--font-weight-medium);
line-height: 1.65;
margin: clamp(1.6rem, 1.042vw, 2rem) 0;
}
.clinic-reset__journey li p {
font-size: var(--body-md-fs);
line-height: var(--body-md-lh);
min-height: 4.95em;
color: var(--public-muted);
}
.clinic-reset__step-number {
display: block;
padding-bottom: 1.6rem;
border-bottom: 1px solid var(--public-brand-accent);
color: var(--public-muted);
font-size: clamp(1.8rem, 1.146vw, 2.2rem);
font-weight: var(--font-weight-medium);
line-height: 1.65;
}
.clinic-reset__step-icon {
display: grid;
place-items: center;
width: clamp(9rem, 6.903vw, 13.253rem);
height: clamp(9rem, 6.903vw, 13.253rem);
margin: 0 auto;
}
.clinic-reset__step-icon img {
width: 94%;
height: 82%;
object-fit: contain;
}
.clinic-reset__step-arrow {
position: absolute;
left: calc(100% + 0.7rem);
top: calc(4.9rem + clamp(9rem, 6.903vw, 13.253rem) + 2rem);
width: clamp(1.8rem, 1.44vw, 2.766rem);
height: 1.72rem;
display: grid;
place-items: center;
}
.clinic-reset__step-arrow img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 1023px) {
.clinic-rail__viewport {
height: 75svh;
min-height: 50rem;
}
.clinic-rail__track {
padding: 3rem;
}
.clinic-rail__intro {
width: 65vw;
padding-right: 3rem;
}
.clinic-rail__intro > .clinic-space__media {
width: 18rem;
height: 22rem;
}
.clinic-rail__photo {
width: 65vw;
}
.clinic-space__panel {
gap: 3rem;
padding: 6rem 4%;
}
.clinic-reset__inner {
width: 86%;
}
.clinic-reset__principles article {
padding: 2rem;
}
}
@media (max-width: 767px) {
.clinic-space__copy-desktop {
display: none;
}
.clinic-space__copy-mobile {
display: inline;
}
.clinic-space__hero {
min-height: 68rem;
}
.clinic-space__hero h1 {
font-size: min(9vw, 4rem);
white-space: normal;
line-height: 1.2;
}
.clinic-space__hero p {
order: 0;
align-self: flex-start;
width: 100%;
max-width: 34rem;
font-size: 1.6rem;
}
.clinic-space__hero-copy {
justify-content: flex-end;
gap: 2.4rem;
padding: calc(var(--public-header-height) + 4rem) 2.4rem 4rem;
}
.clinic-space__panel {
padding: 4rem 2.4rem;
width: 88vw;
height: 100%;
min-height: 0;
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 2rem;
}
.clinic-space__panel > .clinic-space__media {
aspect-ratio: auto;
width: 100%;
height: 100%;
}
.clinic-space__panel h2 {
font-size: 2.8rem;
}
.clinic-space__panel p {
font-size: var(--body-md-fs);
line-height: var(--body-md-lh);
}
.clinic-space__calm {
width: 100%;
min-height: 90svh;
}
.clinic-space__calm > .clinic-space__media {
height: 45vh;
}
.clinic-space__stage {
padding: 6rem 2.4rem;
}
.clinic-space__scene {
grid-template-columns: 1fr;
gap: 2rem;
}
.clinic-space__scene .clinic-space__media {
height: 45svh;
aspect-ratio: auto;
}
.clinic-space__scene p {
font-size: var(--body-md-fs);
line-height: var(--body-md-lh);
}
.clinic-space__scene--portrait .clinic-space__media {
height: auto;
max-height: none;
aspect-ratio: 2/3;
}
.clinic-space__arrival .clinic-rail__intro {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
width: 100%;
padding: 0;
}
.clinic-space__arrival .clinic-rail__intro::after {
display: none;
}
.clinic-space__arrival .clinic-rail__intro > span,
.clinic-space__arrival .clinic-rail__intro > .clinic-space__media,
.clinic-space__arrival .clinic-rail__intro > .clinic-rail__copy {
grid-area: auto;
}
.clinic-space__arrival .clinic-rail__intro > span {
order: 1;
}
.clinic-space__arrival .clinic-rail__intro > .clinic-space__media {
order: 2;
width: 100%;
height: auto;
margin-top: 2.4rem;
aspect-ratio: 3/2;
}
.clinic-space__arrival .clinic-rail__intro > .clinic-rail__copy {
order: 3;
}
.clinic-space__privacy .clinic-rail__intro {
width: 100%;
text-align: left;
}
.clinic-space__rooms {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
grid-auto-flow: row;
grid-auto-columns: auto;
gap: 3.2rem;
height: auto;
}
.clinic-space__rooms figure {
gap: 1.2rem;
}
.clinic-space__rooms .clinic-space__media {
flex: none;
aspect-ratio: 4/3;
}
.clinic-space__rooms figcaption {
font-size: 1.2rem;
}
.clinic-rail__viewport {
height: auto;
min-height: 0;
overflow: visible;
}
.clinic-rail__track {
display: grid;
width: auto;
height: auto;
gap: 4.8rem;
padding: 6rem 2.4rem;
}
.clinic-rail__intro {
width: 100%;
margin: 0;
padding: 0 0 4.8rem;
border-right: 0;
border-bottom: 1px solid rgba(246, 241, 234, 0.25);
}
.clinic-rail__intro h2 {
font-size: 2.8rem;
}
.clinic-rail__photo, .clinic-rail__photo:nth-of-type(n+2), .clinic-rail__photo--wide {
width: 100%;
gap: 1.2rem;
}
.clinic-rail__photo .clinic-space__media, .clinic-rail__photo:nth-of-type(n+2) .clinic-space__media, .clinic-rail__photo--wide .clinic-space__media {
flex: none;
aspect-ratio: 4/3;
}
.clinic-doctor__approach > div {
display: flex;
flex-direction: column;
gap: 4rem;
padding: 8rem 2.4rem;
background: rgba(0, 0, 0, 0.2);
}
.clinic-doctor__global .clinic-rail__viewport {
min-height: 0;
}
.clinic-doctor__global .clinic-rail__track {
padding: 4rem 2.4rem;
gap: 3.2rem;
}
.clinic-doctor__global .clinic-rail__track::before {
display: none;
}
.clinic-doctor__global-intro {
width: 100%;
padding-right: 0;
}
.clinic-doctor__global-intro h2 {
font-size: 2.8rem;
margin-bottom: 2rem;
}
.clinic-doctor__global .clinic-doctor__signature {
font-size: 1.4rem;
}
.clinic-doctor__global-copy {
padding-top: 3rem;
}
.clinic-doctor__global-photos {
display: block;
columns: 2;
column-gap: 0.8rem;
}
.clinic-doctor__global-photos img,
.clinic-doctor__global-photos img:nth-child(3n+1) {
display: block;
width: 100%;
max-height: none;
margin-bottom: 0.8rem;
break-inside: avoid;
}
.clinic-reset__inner {
width: calc(100% - 4.8rem);
}
.clinic-reset__hero > .clinic-reset__hero-content {
grid-template-columns: 1fr;
align-content: end;
gap: 3.2rem;
padding: max(14rem, 45svh) 2.4rem 5rem;
}
.clinic-reset__hero h1 {
font-size: clamp(3.6rem, 11vw, 4.8rem);
}
.clinic-reset__hero-copy p + p {
margin-top: 1.2rem;
font-size: 1.6rem;
}
.clinic-reset__heading {
grid-template-columns: 1fr;
gap: 2.4rem;
margin-bottom: 4rem;
}
.clinic-reset__heading p {
font-size: 1.6rem;
}
.clinic-reset__intro, .clinic-reset__application, .clinic-reset__consultation, .clinic-reset__programs {
padding: 6rem 0;
}
.clinic-reset__portrait {
aspect-ratio: 1.1;
}
.clinic-reset__principles {
grid-template-columns: 1fr;
justify-items: center;
margin-top: 4rem;
gap: 2rem;
}
.clinic-reset__principles article {
width: min(100%, 34rem);
}
.clinic-reset__program-selector {
grid-template-columns: minmax(0, 1fr) repeat(3, auto) minmax(0, 1fr);
}
.clinic-reset__program-selector > label {
position: relative;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
}
.clinic-reset__program-selector > label:nth-of-type(1) {
grid-column: 2;
}
.clinic-reset__program-selector > label:nth-of-type(2) {
grid-column: 3;
}
.clinic-reset__program-selector > label:nth-of-type(3) {
grid-column: 4;
}
.clinic-reset__program-selector > label > span {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.clinic-reset__program-selector > label::before {
content: "";
width: 10px;
height: 10px;
border: 1px solid currentColor;
border-radius: 50%;
opacity: 0.5;
}
.clinic-reset__program-selector > input:checked + label::before {
background: currentColor;
opacity: 1;
}
.clinic-reset__programs.has-autoplay .clinic-reset__program-selector > label {
box-sizing: content-box;
width: 8px;
height: 8px;
padding: 24px 8px;
border-radius: 0;
background: rgba(246, 241, 234, 0.08);
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.clinic-reset__programs.has-autoplay .clinic-reset__program-selector > label:first-of-type {
padding-left: 24px;
border-radius: 999px 0 0 999px;
}
.clinic-reset__programs.has-autoplay .clinic-reset__program-selector > label:last-of-type {
padding-right: 24px;
border-radius: 0 999px 999px 0;
}
.clinic-reset__programs.has-autoplay .clinic-reset__program-selector > label::before {
width: 100%;
height: 8px;
border: 0;
border-radius: 999px;
background: currentColor;
transition: opacity 0.3s;
}
.clinic-reset__programs.has-autoplay .clinic-reset__program-selector > label::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
top: 24px;
height: 8px;
border-radius: 999px;
background: currentColor;
opacity: 0;
clip-path: inset(0 calc((1 - var(--program-progress, 0)) * 100%) 0 0 round 999px);
}
.clinic-reset__programs.has-autoplay .clinic-reset__program-selector > label:first-of-type::after {
left: 24px;
}
.clinic-reset__programs.has-autoplay .clinic-reset__program-selector > label:last-of-type::after {
right: 24px;
}
.clinic-reset__programs.has-autoplay .clinic-reset__program-selector > input:checked + label {
width: 48px;
}
.clinic-reset__programs.has-autoplay .clinic-reset__program-selector > input:checked + label::before {
opacity: 0.3;
}
.clinic-reset__programs.has-autoplay .clinic-reset__program-selector > input:checked + label::after {
opacity: 1;
}
.clinic-reset__program {
grid-template-columns: 1fr;
grid-template-rows: 22rem auto;
gap: 2rem;
padding: 4rem 0;
min-height: 55rem;
}
.clinic-reset__program > img {
max-width: 22rem;
margin: auto;
}
.clinic-reset__program h3 {
font-size: 2.6rem;
}
.clinic-reset__program-art {
position: absolute;
top: 4rem;
left: 50%;
transform: translateX(-50%);
margin: 0;
width: 22rem;
max-width: 100%;
}
.clinic-reset__application-grid, .clinic-reset__consultation-grid {
grid-template-columns: 1fr;
gap: 4rem;
}
.clinic-reset__journey {
padding: 6rem 2.4rem;
}
.clinic-reset__journey ol {
grid-template-columns: 1fr;
gap: 4rem;
margin-top: 4rem;
}
.clinic-reset__journey li {
max-width: 34rem;
margin: auto;
width: 100%;
}
.clinic-reset__journey h3 {
font-size: 2.2rem;
}
.clinic-reset__journey li p {
font-size: 1.6rem;
}
.clinic-reset__step-icon {
width: 13.253rem;
height: 13.253rem;
}
.clinic-reset__step-arrow {
top: auto;
bottom: -2.4rem;
left: calc(50% - 1.4rem);
transform: rotate(90deg);
width: 2.8rem;
}
}
html.is-signature-voice-open,
html.is-signature-voice-open body {
overflow: hidden;
}
.newyoung-signature-voice:lang(ja), .newyoung-signature-voice:lang(zh) {
word-break: normal;
overflow-wrap: anywhere;
}
.newyoung-signature-voice:lang(ja) .newyoung-signature-voice__section,
.newyoung-signature-voice:lang(ja) .newyoung-signature-voice__tab-title, .newyoung-signature-voice:lang(zh) .newyoung-signature-voice__section,
.newyoung-signature-voice:lang(zh) .newyoung-signature-voice__tab-title {
min-width: 0;
}
.newyoung-signature-voice {
--signature-voice-small-type: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
position: fixed;
top: 50%;
left: 50%;
width: min(112rem, 100vw - var(--public-shell-gutter) * 2);
max-width: none;
height: min(76rem, 100dvh - var(--public-space-xl) * 2);
max-height: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--public-line) 72%, transparent);
color: var(--public-ink);
background: transparent;
transform: translate(-50%, -50%);
}
.newyoung-signature-voice::backdrop {
background: color-mix(in srgb, var(--public-brand-ink) 72%, transparent);
}
.newyoung-signature-voice__surface {
display: grid;
height: 100%;
min-height: 0;
grid-template-rows: auto auto minmax(0, 1fr);
overflow: hidden;
background: var(--public-white);
}
.newyoung-signature-voice__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: var(--public-space-2xl) var(--public-space-3xl) var(--public-space-xl);
gap: var(--public-space-2xl);
}
.newyoung-signature-voice__heading {
min-width: 0;
}
.newyoung-signature-voice__title {
max-width: 82rem;
font-family: var(--font-display-family);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-heading);
}
.newyoung-signature-voice__title:focus {
outline: none;
}
.newyoung-signature-voice__settings-panel:focus {
outline: none;
}
.newyoung-signature-voice__section-eyebrow {
color: var(--public-brand-accent);
letter-spacing: 0.12em;
}
.newyoung-signature-voice__disclaimer-label, .newyoung-signature-voice__disclaimer {
font-size: var(--signature-voice-small-type);
line-height: 1.6;
}
.newyoung-signature-voice__disclaimer {
color: color-mix(in srgb, var(--public-muted) 76%, transparent);
}
.newyoung-signature-voice__close, .newyoung-signature-voice__play {
display: inline-grid;
flex: 0 0 auto;
padding: 0;
border: 0;
place-items: center;
color: var(--public-ink);
background: transparent;
cursor: pointer;
transition: color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease), border-color var(--public-duration) var(--public-ease);
}
.newyoung-signature-voice__close {
width: var(--public-control-md);
min-height: var(--public-control-md);
height: var(--public-control-md);
color: var(--public-muted-soft);
transition: color var(--public-duration) var(--public-ease), opacity var(--public-duration) var(--public-ease);
}
.newyoung-signature-voice__close .public-button__content, .newyoung-signature-voice__close .public-button__icon {
display: grid;
width: 100%;
height: 100%;
place-items: center;
line-height: 1;
font-size: var(--public-icon-lg);
}
.newyoung-signature-voice__close .public-button__label:empty {
display: none;
}
.newyoung-signature-voice__close .public-button__icon i {
display: block;
line-height: 1;
}
.newyoung-signature-voice__play {
width: 4.8rem;
min-width: 4.8rem;
min-height: 4.8rem;
height: 4.8rem;
border-radius: 50%;
}
.newyoung-signature-voice__play .public-button__icon {
display: grid;
width: 1em;
height: 1em;
place-items: center;
line-height: 1;
}
.newyoung-signature-voice__play .public-button__icon i {
display: block;
line-height: 1;
transform: translateX(0.06em);
}
.newyoung-signature-voice__close:hover, .newyoung-signature-voice__close:focus-visible {
color: var(--public-ink);
border-color: transparent;
background: transparent;
opacity: 0.72;
}
.newyoung-signature-voice__close:focus-visible, .newyoung-signature-voice__play:focus-visible, .newyoung-signature-voice__settings-toggle:focus-visible, .newyoung-signature-voice__speed-option:focus-visible, .newyoung-signature-voice__size-option:focus-visible, .newyoung-signature-voice__tab:focus-visible {
outline: var(--public-focus-width) solid var(--public-focus);
outline-offset: calc(var(--public-focus-offset) * -1);
}
.newyoung-signature-voice__player {
display: grid;
margin-inline: var(--public-space-3xl);
padding: var(--public-space-lg) 0;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--public-space-xl);
color: var(--public-ink);
border-top: 1px solid color-mix(in srgb, var(--public-line) 48%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--public-line) 48%, transparent);
}
.newyoung-signature-voice__player .newyoung-signature-voice__play {
color: var(--public-brand-ink);
background: transparent;
}
.newyoung-signature-voice__player .newyoung-signature-voice__play:not(:disabled):hover, .newyoung-signature-voice__player .newyoung-signature-voice__play:focus-visible, .newyoung-signature-voice__player .newyoung-signature-voice__play.is-playing {
color: var(--public-brand-ink);
background: transparent;
}
.newyoung-signature-voice__player .newyoung-signature-voice__play:disabled {
color: var(--public-brand-ink);
background: transparent;
cursor: wait;
}
.newyoung-signature-voice__time {
color: var(--public-muted-soft);
}
.newyoung-signature-voice__settings-toggle {
display: grid;
width: 4.4rem;
min-width: 4.4rem;
height: 4.4rem;
min-height: 4.4rem;
place-items: center;
flex: 0 0 auto;
padding: 0;
color: var(--public-muted-soft);
background: transparent;
font-size: var(--public-icon-md);
cursor: pointer;
}
.newyoung-signature-voice__settings-toggle:hover, .newyoung-signature-voice__settings-toggle:focus-visible, .newyoung-signature-voice__settings-toggle[aria-expanded=true] {
color: var(--public-ink);
background: transparent;
}
.newyoung-signature-voice__settings-overlay {
position: absolute;
z-index: 2;
inset: 0;
display: flex;
justify-content: flex-end;
overflow: hidden;
background: color-mix(in srgb, var(--public-brand-ink) 24%, transparent);
}
.newyoung-signature-voice__settings-overlay[hidden] {
display: none;
}
.newyoung-signature-voice__settings-panel {
display: grid;
width: min(34rem, 100% - 3.2rem);
height: 100%;
padding: var(--public-space-2xl);
align-content: start;
gap: var(--public-space-2xl);
overflow-y: auto;
overscroll-behavior: contain;
border-left: 1px solid var(--public-line);
background: var(--public-white);
animation: signature-voice-settings-enter var(--public-duration) var(--public-ease);
}
.newyoung-signature-voice__settings-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-sm);
padding-bottom: var(--public-space-md);
border-bottom: 1px solid var(--public-line);
}
.newyoung-signature-voice__settings-header h3 {
font-family: var(--font-display-family);
font-size: var(--heading-sm-fs);
font-weight: var(--font-weight-regular);
line-height: 1.3;
}
.newyoung-signature-voice__settings-group {
display: grid;
gap: var(--public-space-xs);
}
.newyoung-signature-voice__settings-group + .newyoung-signature-voice__settings-group {
padding-top: var(--public-space-xl);
border-top: 1px solid var(--public-line);
}
.newyoung-signature-voice__settings-group > span {
color: var(--public-ink);
font-weight: var(--font-weight-medium);
}
.newyoung-signature-voice__speed, .newyoung-signature-voice__text-size {
display: flex;
min-height: var(--public-control-sm);
align-items: center;
gap: var(--public-space-xs);
}
.newyoung-signature-voice__speed-option, .newyoung-signature-voice__size-option {
flex: 1;
min-width: 5.2rem;
min-height: var(--public-control-sm);
padding: 0.8rem var(--public-space-xs);
border: 0;
color: var(--color-text-muted);
background: transparent;
font-size: var(--body-sm-fs);
font-weight: var(--font-weight-regular);
cursor: pointer;
transition: color var(--public-duration) var(--public-ease);
}
.newyoung-signature-voice__speed-option:hover, .newyoung-signature-voice__speed-option:focus-visible, .newyoung-signature-voice__size-option:hover, .newyoung-signature-voice__size-option:focus-visible {
color: var(--public-ink);
}
.newyoung-signature-voice__speed-option.is-active, .newyoung-signature-voice__size-option.is-active {
color: var(--public-ink);
font-weight: var(--font-weight-semibold);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.55em;
}
.newyoung-signature-voice__waveform {
--signature-voice-wave-active: var(--public-brand-dark);
--signature-voice-wave-idle: color-mix(
in srgb,
var(--public-brand-accent) 28%,
var(--public-white)
);
min-width: 0;
cursor: pointer;
touch-action: none;
}
.newyoung-signature-voice__waveform[aria-disabled=true] {
opacity: 0.48;
pointer-events: none;
cursor: wait;
}
.newyoung-signature-voice__waveform:focus-visible {
outline: var(--public-focus-width) solid var(--public-focus);
outline-offset: var(--public-space-2xs);
}
.newyoung-signature-voice__waveform canvas {
display: block;
width: 100%;
}
.newyoung-signature-voice__time {
min-width: 8.8rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
letter-spacing: 0.04em;
text-align: right;
}
.newyoung-signature-voice__time[data-signature-voice-state=loading] {
min-width: 14rem;
color: var(--public-muted);
}
.newyoung-signature-voice__time[data-signature-voice-state=error] {
min-width: 18rem;
color: var(--public-brand-accent);
}
.newyoung-signature-voice__body {
display: grid;
min-height: 0;
grid-template-columns: minmax(26rem, 0.37fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
}
.newyoung-signature-voice__navigator {
display: grid;
min-width: 0;
min-height: 0;
grid-template-rows: auto minmax(0, 1fr);
padding: var(--public-space-xl) var(--public-space-xl) var(--public-space-xl) var(--public-space-3xl);
}
.newyoung-signature-voice__navigator-label {
padding: 0 var(--public-space-sm) var(--public-space-lg);
color: var(--public-brand-accent);
font-weight: var(--font-weight-medium);
letter-spacing: 0.12em;
}
.newyoung-signature-voice__tabs, .newyoung-signature-voice__content {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.newyoung-signature-voice__tabs {
position: relative;
min-width: 0;
background: transparent;
}
.newyoung-signature-voice__tabs-wrapper {
position: relative;
display: grid;
width: 100%;
height: auto;
align-content: start;
gap: 0.4rem;
}
.newyoung-signature-voice__tab {
position: relative;
display: grid;
width: 100%;
height: auto;
min-height: 5.6rem;
padding: var(--public-space-xs) var(--public-space-sm);
grid-template-columns: var(--public-space-xl) minmax(0, 1fr);
align-items: center;
gap: var(--public-space-sm);
border: 0;
color: var(--color-text-muted);
text-align: left;
background: transparent;
cursor: pointer;
transition: color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease);
}
.newyoung-signature-voice__tab:hover, .newyoung-signature-voice__tab:focus-visible {
color: var(--public-ink);
background: transparent;
}
.newyoung-signature-voice__tab.is-active {
color: var(--public-ink);
background: transparent;
}
.newyoung-signature-voice__tab-number {
color: var(--color-text-muted);
letter-spacing: 0.08em;
transition: color var(--public-duration) var(--public-ease);
}
.newyoung-signature-voice__tab.is-active .newyoung-signature-voice__tab-number {
color: var(--public-ink);
}
.newyoung-signature-voice__tab-title {
font-size: var(--body-sm-fs);
font-weight: var(--font-weight-regular);
line-height: 1.5;
}
.newyoung-signature-voice__tab.is-active .newyoung-signature-voice__tab-title {
font-weight: var(--font-weight-semibold);
}
.newyoung-signature-voice__content {
padding: var(--public-space-2xl) var(--public-space-3xl);
border-left: 1px solid color-mix(in srgb, var(--public-line) 34%, transparent);
scroll-behavior: smooth;
}
.newyoung-signature-voice__section {
display: grid;
max-width: 72rem;
margin-inline: auto;
gap: var(--public-space-lg);
}
.newyoung-signature-voice__content[data-signature-voice-text-size=large] {
font-size: var(--body-lg-fs);
}
.newyoung-signature-voice__section-title {
margin-bottom: var(--public-space-sm);
}
.newyoung-signature-voice__section-introduction {
padding-bottom: var(--public-space-sm);
color: var(--public-ink);
}
.newyoung-signature-voice__points, .newyoung-signature-voice__steps {
display: grid;
padding-left: var(--public-space-xl);
gap: var(--public-space-lg);
}
.newyoung-signature-voice__cue {
color: var(--public-muted-soft);
line-height: 1.85;
transition: color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease);
}
.newyoung-signature-voice__section > .newyoung-signature-voice__cue:first-of-type {
margin-bottom: var(--public-space-sm);
color: var(--public-ink);
font-weight: var(--font-weight-medium);
}
.newyoung-signature-voice__cue.is-spoken {
color: var(--public-brand-dark);
}
.newyoung-signature-voice__content[data-signature-voice-highlight-mode=cue] .newyoung-signature-voice__cue.is-current {
color: var(--public-brand-dark);
background: color-mix(in srgb, var(--public-brand-accent-soft) 36%, transparent);
}
.newyoung-signature-voice__word {
--signature-voice-word-progress: 0%;
position: relative;
display: inline-block;
color: var(--public-brand-dark);
background: linear-gradient(color-mix(in srgb, var(--public-brand-accent-soft) 64%, transparent), color-mix(in srgb, var(--public-brand-accent-soft) 64%, transparent)) left center/var(--signature-voice-word-progress) 100% no-repeat;
}
.newyoung-signature-voice__cue-visual {
display: inline;
}
.newyoung-signature-voice__word-base {
position: relative;
z-index: 1;
}
.newyoung-signature-voice__word-space {
white-space: pre;
}
.newyoung-signature-voice__footer {
display: grid;
grid-column: 1/-1;
margin-inline: var(--public-space-3xl);
padding: var(--public-space-sm) 0;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: var(--public-space-sm);
border-top: 1px solid color-mix(in srgb, var(--public-line) 48%, transparent);
}
.newyoung-signature-voice__disclaimer-label {
color: var(--public-brand-accent);
font-weight: var(--font-weight-medium);
letter-spacing: 0.08em;
white-space: nowrap;
}
.newyoung-signature-voice__tabs, .newyoung-signature-voice__content {
scrollbar-color: color-mix(in srgb, var(--public-brand-accent) 28%, transparent) transparent;
scrollbar-width: thin;
}
.newyoung-signature-voice__tabs {
scrollbar-width: none;
}
.newyoung-signature-voice__tabs::-webkit-scrollbar {
display: none;
}
.newyoung-signature-voice__tabs::-webkit-scrollbar, .newyoung-signature-voice__content::-webkit-scrollbar {
width: 0.6rem;
}
.newyoung-signature-voice__tabs::-webkit-scrollbar-thumb, .newyoung-signature-voice__content::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--public-brand-accent) 28%, transparent);
}
@media (max-width: 1023px) {
.newyoung-signature-voice {
width: calc(100vw - var(--public-space-md) * 2);
height: calc(100dvh - var(--public-space-md) * 2);
}
.newyoung-signature-voice__header, .newyoung-signature-voice__content {
padding-inline: var(--public-space-xl);
}
.newyoung-signature-voice__header {
padding-block: var(--public-space-xl) var(--public-space-lg);
}
.newyoung-signature-voice__player, .newyoung-signature-voice__footer {
margin-inline: var(--public-space-xl);
}
.newyoung-signature-voice__player {
grid-template-columns: auto minmax(0, 1fr) auto auto;
gap: var(--public-space-sm);
}
.newyoung-signature-voice__navigator {
padding: var(--public-space-xl) var(--public-space-sm) var(--public-space-xl) var(--public-space-xl);
}
.newyoung-signature-voice__body {
grid-template-columns: minmax(22rem, 0.3fr) minmax(0, 1fr);
}
}
@media (max-width: 767px) {
.newyoung-signature-voice {
width: 100vw;
height: 100dvh;
border: 0;
}
.newyoung-signature-voice__header {
padding-block: var(--public-space-md);
gap: var(--public-space-md);
}
.newyoung-signature-voice__header, .newyoung-signature-voice__content, .newyoung-signature-voice__navigator {
padding-inline: var(--public-shell-gutter);
}
.newyoung-signature-voice__player, .newyoung-signature-voice__footer {
margin-inline: var(--public-shell-gutter);
}
.newyoung-signature-voice__player {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "play time settings" "waveform waveform waveform";
padding-block: var(--public-space-sm);
gap: var(--public-space-xs) var(--public-space-sm);
}
.newyoung-signature-voice__play {
grid-area: play;
}
.newyoung-signature-voice__player > .newyoung-signature-voice__settings-toggle {
grid-area: settings;
}
.newyoung-signature-voice__waveform {
grid-area: waveform;
}
.newyoung-signature-voice__time {
grid-area: time;
min-width: 0;
font-size: var(--body-sm-fs);
text-align: left;
}
.newyoung-signature-voice__time[data-signature-voice-state=loading], .newyoung-signature-voice__time[data-signature-voice-state=error] {
min-width: 0;
white-space: normal;
}
.newyoung-signature-voice__body {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
}
.newyoung-signature-voice__navigator {
grid-template-rows: auto auto;
padding-block: var(--public-space-xs);
border-right: 0;
}
.newyoung-signature-voice__navigator-label {
padding: 0 0 var(--public-space-xs);
}
.newyoung-signature-voice__tabs {
overflow: hidden;
touch-action: pan-y;
}
.newyoung-signature-voice__tabs-wrapper {
display: flex;
align-items: stretch;
gap: 0;
transition-property: transform;
}
.newyoung-signature-voice__tab {
width: clamp(18rem, 78%, 28rem);
min-width: 0;
min-height: 6.4rem;
flex: 0 0 auto;
}
.newyoung-signature-voice__tab.is-active {
color: var(--public-ink);
background: transparent;
}
.newyoung-signature-voice__tab-title {
font-size: var(--body-sm-fs);
word-break: keep-all;
overflow-wrap: anywhere;
}
.newyoung-signature-voice__content {
border-top: 1px solid color-mix(in srgb, var(--public-line) 34%, transparent);
border-left: 0;
overflow-y: auto;
}
.newyoung-signature-voice__content {
padding-block: var(--public-space-sm);
}
.newyoung-signature-voice__footer {
grid-template-columns: minmax(0, 1fr);
gap: var(--public-space-2xs);
}
}
@media (max-width: 767px) and (max-height: 640px) {
.newyoung-signature-voice__header, .newyoung-signature-voice__footer {
padding-block: var(--public-space-xs);
}
}
@keyframes signature-voice-settings-enter {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.newyoung-signature-voice__close, .newyoung-signature-voice__play, .newyoung-signature-voice__speed-option, .newyoung-signature-voice__size-option, .newyoung-signature-voice__tab, .newyoung-signature-voice__cue, .newyoung-signature-voice__word {
transition: none;
}
.newyoung-signature-voice__content {
scroll-behavior: auto;
}
.newyoung-signature-voice__settings-panel {
animation: none;
}
}
.newyoung-signature-detail--tailored-botox .newyoung-content-section--process,
.newyoung-signature-detail--tailored-lifting .newyoung-content-section--process,
.newyoung-signature-detail--tailored-collagen-booster .newyoung-content-section--process,
.newyoung-signature-detail--tailored-bio-volume .newyoung-content-section--process,
.newyoung-signature-detail--sedation .newyoung-content-section--process,
.newyoung-signature-detail--under-eye-ultracol .newyoung-content-section--process,
.newyoung-signature-detail--sesla .newyoung-content-section--process,
.newyoung-signature-detail--ultrasound-guided-filler-removal .newyoung-content-section--process {
background: var(--public-surface-subtle);
}
.newyoung-signature-detail--tailored-botox .newyoung-content-section--process .newyoung-content-section__inner,
.newyoung-signature-detail--tailored-lifting .newyoung-content-section--process .newyoung-content-section__inner,
.newyoung-signature-detail--tailored-collagen-booster .newyoung-content-section--process .newyoung-content-section__inner,
.newyoung-signature-detail--tailored-bio-volume .newyoung-content-section--process .newyoung-content-section__inner,
.newyoung-signature-detail--sedation .newyoung-content-section--process .newyoung-content-section__inner,
.newyoung-signature-detail--under-eye-ultracol .newyoung-content-section--process .newyoung-content-section__inner,
.newyoung-signature-detail--sesla .newyoung-content-section--process .newyoung-content-section__inner,
.newyoung-signature-detail--ultrasound-guided-filler-removal .newyoung-content-section--process .newyoung-content-section__inner {
row-gap: var(--public-space-xl);
}
@media (max-width: 1023px) {
.newyoung-signature-detail--tailored-botox .newyoung-signature-detail__back.public-button,
.newyoung-signature-detail--tailored-lifting .newyoung-signature-detail__back.public-button,
.newyoung-signature-detail--tailored-collagen-booster .newyoung-signature-detail__back.public-button,
.newyoung-signature-detail--tailored-bio-volume .newyoung-signature-detail__back.public-button,
.newyoung-signature-detail--sedation .newyoung-signature-detail__back.public-button,
.newyoung-signature-detail--under-eye-ultracol .newyoung-signature-detail__back.public-button,
.newyoung-signature-detail--sesla .newyoung-signature-detail__back.public-button,
.newyoung-signature-detail--ultrasound-guided-filler-removal .newyoung-signature-detail__back.public-button {
position: absolute;
}
}
@media (max-width: 1023px) {
.signature-process--tailored-botox .signature-process__step--05 .signature-process__description {
text-wrap: wrap;
}
}
.signature-process--ultrasound-guided-filler-removal .signature-process__face {
position: relative;
z-index: 1;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__regions {
z-index: 2;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--01 .signature-process__point {
--point-x: 330;
--point-y: 276;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--01 .signature-process__callout {
top: calc(40.7143% - 10px);
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--02 .signature-process__point {
--point-x: 330;
--point-y: 344;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--02 .signature-process__callout {
top: calc(52.8571% - 10px);
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--03 .signature-process__point--1 {
--point-x: 214;
--point-y: 342;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--03 .signature-process__point--2 {
--point-x: 225;
--point-y: 387;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--03 .signature-process__callout:nth-child(1) {
top: calc(52.5% - 10px);
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--03 .signature-process__callout:nth-child(2) {
top: calc(77.6786% - 10px);
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--04 .signature-process__point {
--point-x: 289;
--point-y: 201;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--04 .signature-process__callout {
top: calc(27.3214% - 20px);
white-space: pre-line;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--05 .signature-process__point--1 {
--point-x: 288;
--point-y: 248;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--05 .signature-process__point--2 {
--point-x: 402;
--point-y: 315;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--05 .signature-process__callout:nth-child(1) {
top: calc(35.7143% - 10px);
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--05 .signature-process__callout:nth-child(2) {
top: calc(64.8214% - 10px);
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--06 .signature-process__point--1 {
--point-x: 169;
--point-y: 193;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--06 .signature-process__point--2 {
--point-x: 290;
--point-y: 394;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--06 .signature-process__callout:nth-child(1) {
top: calc(25.1786% - 10px);
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--06 .signature-process__callout:nth-child(2) {
top: calc(80% - 10px);
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--07 .signature-process__point--1 {
--point-x: 219;
--point-y: 238;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--07 .signature-process__point--2 {
--point-x: 319;
--point-y: 387;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--07 .signature-process__callout:nth-child(1) {
top: calc(33.9286% - 10px);
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--07 .signature-process__callout:nth-child(2) {
top: calc(77.6786% - 10px);
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--08 .signature-process__point--1 {
--point-x: 252;
--point-y: 379;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--08 .signature-process__point--2 {
--point-x: 366;
--point-y: 400;
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--08 .signature-process__callout:nth-child(1) {
top: calc(59.1071% - 10px);
}
.signature-process--ultrasound-guided-filler-removal .signature-process__step--08 .signature-process__callout:nth-child(2) {
top: calc(80% - 10px);
}
.signature-process--sesla .signature-process__step--01 .signature-process__point--1 {
--point-x: 200;
--point-y: 348;
}
.signature-process--sesla .signature-process__step--01 .signature-process__point--2 {
--point-x: 170;
--point-y: 407;
}
.signature-process--sesla .signature-process__step--01 .signature-process__callout:nth-child(1) {
top: calc(53.5714% - 10px);
}
.signature-process--sesla .signature-process__step--01 .signature-process__callout:nth-child(2) {
top: calc(85.3571% - 10px);
}
.signature-process--sesla .signature-process__step--02 .signature-process__point--1 {
--point-x: 277;
--point-y: 247;
}
.signature-process--sesla .signature-process__step--02 .signature-process__point--2 {
--point-x: 322;
--point-y: 171;
}
.signature-process--sesla .signature-process__step--03 .signature-process__point--1 {
--point-x: 280;
--point-y: 485;
}
.signature-process--sesla .signature-process__step--03 .signature-process__point--2 {
--point-x: 220;
--point-y: 486;
}
.signature-process--sesla .signature-process__step--03 .signature-process__callout:nth-child(1) {
top: calc(57.1429% - 10px);
}
.signature-process--sesla .signature-process__step--03 .signature-process__callout:nth-child(2) {
top: calc(89.2857% - 10px);
}
.signature-process--sesla .signature-process__step--04 .signature-process__point--1 {
--point-x: 347;
--point-y: 158;
}
.signature-process--sesla .signature-process__step--04 .signature-process__point--2 {
--point-x: 446;
--point-y: 420;
}
.signature-process--sesla .signature-process__step--04 .signature-process__callout:nth-child(1) {
top: calc(19.6429% - 10px);
}
.signature-process--sesla .signature-process__step--04 .signature-process__callout:nth-child(2) {
top: calc(83.5714% - 10px);
}
.signature-process--sesla .signature-process__step--05 .signature-process__point--1 {
--point-x: 237;
--point-y: 229;
}
.signature-process--sesla .signature-process__step--05 .signature-process__point--2 {
--point-x: 300;
--point-y: 450;
}
.signature-process--sesla .signature-process__step--05 .signature-process__callout:nth-child(1) {
top: calc(32.3214% - 10px);
}
.signature-process--sesla .signature-process__step--05 .signature-process__callout:nth-child(2) {
top: calc(71.7857% - 10px);
}
.signature-process--sesla .signature-process__art--composite {
left: 0;
top: 0;
width: 100%;
aspect-ratio: 2;
}
.signature-process--under-eye-ultracol .signature-process__face {
position: relative;
z-index: 1;
}
.signature-process--under-eye-ultracol .signature-process__regions {
z-index: 2;
}
.signature-process--under-eye-ultracol .signature-process__step--01 {
--region-left: 0%;
--region-top: 0%;
--region-width: 100%;
}
.signature-process--under-eye-ultracol .signature-process__step--01 .signature-process__point--1 {
--point-x: 340;
--point-y: 304;
}
.signature-process--under-eye-ultracol .signature-process__step--01 .signature-process__callout:nth-child(1) {
top: calc(46.0714% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--01 .signature-process__point--2 {
--point-x: 340;
--point-y: 324;
}
.signature-process--under-eye-ultracol .signature-process__step--01 .signature-process__callout:nth-child(2) {
top: calc(71.25% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--02 .signature-process__point--1 {
--point-x: 345;
--point-y: 288;
}
.signature-process--under-eye-ultracol .signature-process__step--02 .signature-process__callout:nth-child(1) {
top: calc(42.5% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--02 .signature-process__point--2 {
--point-x: 344;
--point-y: 308;
}
.signature-process--under-eye-ultracol .signature-process__step--02 .signature-process__callout:nth-child(2) {
top: calc(72.1429% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--03 .signature-process__point--1 {
--point-x: 335;
--point-y: 271;
}
.signature-process--under-eye-ultracol .signature-process__step--03 .signature-process__callout:nth-child(1) {
top: calc(39.2857% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--03 .signature-process__point--2 {
--point-x: 316;
--point-y: 279;
}
.signature-process--under-eye-ultracol .signature-process__step--03 .signature-process__callout:nth-child(2) {
top: calc(58.9286% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--03 .signature-process__point--3 {
--point-x: 335;
--point-y: 298;
}
.signature-process--under-eye-ultracol .signature-process__step--03 .signature-process__callout:nth-child(3) {
top: calc(78.5714% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--04 {
--region-left: 0%;
--region-top: 0%;
--region-width: 100%;
}
.signature-process--under-eye-ultracol .signature-process__step--04 .signature-process__point--1 {
--point-x: 340;
--point-y: 304;
}
.signature-process--under-eye-ultracol .signature-process__step--04 .signature-process__callout:nth-child(1) {
top: calc(46.0714% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--04 .signature-process__point--2 {
--point-x: 340;
--point-y: 324;
}
.signature-process--under-eye-ultracol .signature-process__step--04 .signature-process__callout:nth-child(2) {
top: calc(71.25% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--05 .signature-process__point--1 {
--point-x: 463;
--point-y: 304;
}
.signature-process--under-eye-ultracol .signature-process__step--05 .signature-process__point--2 {
--point-x: 448;
--point-y: 398;
}
.signature-process--under-eye-ultracol .signature-process__step--05 .signature-process__callout:nth-child(1) {
top: calc(45.7143% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--05 .signature-process__callout:nth-child(2) {
top: calc(79.6429% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--06 {
--region-left: 30.67%;
--region-top: 56.22%;
--region-width: 38.66%;
}
.signature-process--under-eye-ultracol .signature-process__step--06 .signature-process__point {
--point-x: 320;
--point-y: 306;
}
.signature-process--under-eye-ultracol .signature-process__step--06 .signature-process__callout {
top: calc(65.5357% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--07 .signature-process__point--1 {
--point-x: 471;
--point-y: 214;
}
.signature-process--under-eye-ultracol .signature-process__step--07 .signature-process__point--2 {
--point-x: 473;
--point-y: 363;
}
.signature-process--under-eye-ultracol .signature-process__step--07 .signature-process__callout:nth-child(1) {
top: calc(29.6429% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--07 .signature-process__callout:nth-child(2) {
top: calc(73.3929% - 10px);
}
.signature-process--under-eye-ultracol .signature-process__step--08 .signature-process__point {
--point-x: 447;
--point-y: 342;
}
.signature-process--under-eye-ultracol .signature-process__step--08 .signature-process__callout {
top: calc(52.5% - 10px);
}
.signature-process--sedation .signature-process__step--01 .signature-process__point {
--point-x: 490;
--point-y: 321;
}
.signature-process--sedation .signature-process__step--01 .signature-process__callout {
top: calc(65.8929% - 10px);
}
.signature-process--sedation .signature-process__step--02 .signature-process__point {
--point-x: 350;
--point-y: 280;
}
.signature-process--sedation .signature-process__step--02 .signature-process__callout {
top: calc(50% - 20px);
white-space: pre-line;
}
.signature-process--sedation .signature-process__step--03 .signature-process__point--1 {
--point-x: 390;
--point-y: 168;
}
.signature-process--sedation .signature-process__step--03 .signature-process__point--2 {
--point-x: 390;
--point-y: 208;
}
.signature-process--sedation .signature-process__step--03 .signature-process__callout:nth-child(1) {
top: calc(21.4286% - 10px);
}
.signature-process--sedation .signature-process__step--03 .signature-process__callout:nth-child(2) {
top: calc(45.7143% - 10px);
}
.signature-process--sedation .signature-process__step--04 .signature-process__point--1 {
--point-x: 489;
--point-y: 217;
}
.signature-process--sedation .signature-process__step--04 .signature-process__point--2 {
--point-x: 489;
--point-y: 339;
}
.signature-process--sedation .signature-process__step--04 .signature-process__callout:nth-child(1) {
top: calc(30.1786% - 10px);
}
.signature-process--sedation .signature-process__step--04 .signature-process__callout:nth-child(2) {
top: calc(69.1071% - 10px);
}
.signature-process--sedation .signature-process__step--05 .signature-process__point {
--point-x: 360;
--point-y: 174;
}
.signature-process--sedation .signature-process__step--05 .signature-process__callout {
top: calc(22.5% - 10px);
}
.signature-process--sedation .signature-process__step--06 .signature-process__point--1 {
--point-x: 213;
--point-y: 115;
}
.signature-process--sedation .signature-process__step--06 .signature-process__point--2 {
--point-x: 446;
--point-y: 285;
}
.signature-process--sedation .signature-process__step--06 .signature-process__callout:nth-child(1) {
top: calc(11.9643% - 10px);
}
.signature-process--sedation .signature-process__step--06 .signature-process__callout:nth-child(2) {
top: calc(59.4643% - 10px);
}
.signature-process--sedation .signature-process__step--07 .signature-process__point {
--point-x: 338;
--point-y: 125;
}
.signature-process--sedation .signature-process__step--07 .signature-process__callout {
top: calc(13.75% - 10px);
}
@media (min-width: 1024px) {
html[lang=ko] .signature-process--under-eye-ultracol :is(.signature-process__step--06, .signature-process__step--07) .signature-process__description br,
html[lang=ko] .signature-process--sesla .signature-process__step--04 .signature-process__description br,
html[lang=ko] .signature-process--tailored-collagen-booster .signature-process__step--06 .signature-process__description p:nth-child(2) br,
html[lang=ko] .newyoung-signature-detail--tailored-bio-volume .newyoung-content-section__paragraph br,
html[lang=ko] .newyoung-signature-detail--sedation .newyoung-content-section__lead > p:first-child br {
display: none;
}
}
@media (max-width: 1023px) {
html[lang=ko] .signature-process--sesla :is(.signature-process__step--01, .signature-process__step--05) .signature-process__description br,
html[lang=ko] .signature-process--sedation .signature-process__step--04 .signature-process__description br {
display: none;
}
html[lang=ko] .newyoung-signature-detail--sedation .newyoung-content-section__lead > p:nth-child(2) > br:is(:nth-of-type(3), :nth-of-type(6), :nth-of-type(12)) {
display: none;
}
}
.signature-process--tailored-lifting .signature-process__face {
position: relative;
z-index: 1;
}
.signature-process--tailored-lifting .signature-process__step--10 .signature-process__regions {
z-index: 2;
}
.signature-process--tailored-lifting .signature-process__step--01 {
--region-left: 58.75%;
--region-top: 55.8128%;
--region-width: 10.25%;
}
.signature-process--tailored-lifting .signature-process__step--01 :is(.signature-process__point--1, .signature-process__reference--1) {
--point-x: 350;
--point-y: 385;
}
.signature-process--tailored-lifting .signature-process__step--01 :is(.signature-process__point--2, .signature-process__reference--2) {
--point-x: 370;
--point-y: 312;
}
.signature-process--tailored-lifting .signature-process__step--01 .signature-process__callout:nth-child(1) {
top: calc(77.67857% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--01 .signature-process__callout:nth-child(2) {
top: calc(47.14286% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--02 {
--region-left: 27.37386%;
--region-top: 42.31168%;
--region-width: 44.69437%;
}
.signature-process--tailored-lifting .signature-process__step--02 :is(.signature-process__point--1, .signature-process__reference--1) {
--point-x: 364;
--point-y: 308;
}
.signature-process--tailored-lifting .signature-process__step--02 :is(.signature-process__point--2, .signature-process__reference--2) {
--point-x: 345;
--point-y: 345;
}
.signature-process--tailored-lifting .signature-process__step--02 .signature-process__callout:nth-child(1) {
top: calc(48.21429% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--02 .signature-process__callout:nth-child(2) {
top: calc(75% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--03 {
--region-left: 30%;
--region-top: 56.56318%;
--region-width: 40%;
}
.signature-process--tailored-lifting .signature-process__step--03 :is(.signature-process__point--1, .signature-process__reference--1) {
--point-x: 355.60001;
--point-y: 340;
}
.signature-process--tailored-lifting .signature-process__step--03 .signature-process__callout:nth-child(1) {
top: calc(52.14286% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--04 {
--region-left: 36.8128%;
--region-top: 61.06185%;
--region-width: 26.375%;
}
.signature-process--tailored-lifting .signature-process__step--04 :is(.signature-process__point--1, .signature-process__reference--1) {
--point-x: 323.20001;
--point-y: 347.20001;
}
.signature-process--tailored-lifting .signature-process__step--04 :is(.signature-process__point--2, .signature-process__reference--2) {
--point-x: 331;
--point-y: 395;
}
.signature-process--tailored-lifting .signature-process__step--04 .signature-process__callout:nth-child(1) {
top: calc(53.42857% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--04 .signature-process__callout:nth-child(2) {
top: calc(78.28571% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--05 {
--region-left: 29.5%;
--region-top: 51.25%;
--region-width: 40.75%;
}
.signature-process--tailored-lifting .signature-process__step--05 :is(.signature-process__point--1, .signature-process__reference--1) {
--point-x: 349.60001;
--point-y: 298;
}
.signature-process--tailored-lifting .signature-process__step--05 :is(.signature-process__point--2, .signature-process__reference--2) {
--point-x: 331.60001;
--point-y: 395.20001;
}
.signature-process--tailored-lifting .signature-process__step--05 .signature-process__callout:nth-child(1) {
top: calc(44.64286% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--05 .signature-process__callout:nth-child(2) {
top: calc(79.14286% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--06 {
--region-left: 27.75%;
--region-top: 52.75%;
--region-width: 44.5%;
}
.signature-process--tailored-lifting .signature-process__step--06 :is(.signature-process__point--1, .signature-process__reference--1) {
--point-x: 376;
--point-y: 307.60001;
}
.signature-process--tailored-lifting .signature-process__step--06 :is(.signature-process__point--2, .signature-process__reference--2) {
--point-x: 331.60001;
--point-y: 404.79999;
}
.signature-process--tailored-lifting .signature-process__step--06 .signature-process__callout:nth-child(1) {
top: calc(46.35714% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--06 .signature-process__callout:nth-child(2) {
top: calc(80.85714% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--07 {
--region-left: 34.5%;
--region-top: 55.75%;
--region-width: 31%;
}
.signature-process--tailored-lifting .signature-process__step--07 :is(.signature-process__point--1, .signature-process__reference--1) {
--point-x: 337.60001;
--point-y: 329.20001;
}
.signature-process--tailored-lifting .signature-process__step--07 .signature-process__callout:nth-child(1) {
top: calc(50.21429% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--08 {
--region-left: 27.56415%;
--region-top: 42.0613%;
--region-width: 44.625%;
}
.signature-process--tailored-lifting .signature-process__step--08 :is(.signature-process__point--1, .signature-process__reference--1) {
--point-x: 361.60001;
--point-y: 293.20001;
}
.signature-process--tailored-lifting .signature-process__step--08 :is(.signature-process__point--2, .signature-process__reference--2) {
--point-x: 353.20001;
--point-y: 337.60001;
}
.signature-process--tailored-lifting .signature-process__step--08 .signature-process__callout:nth-child(1) {
top: calc(43.78571% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--08 .signature-process__callout:nth-child(2) {
top: calc(68.85714% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--09 {
--region-left: 31.75%;
--region-top: 52.82%;
--region-width: 36.25021%;
}
.signature-process--tailored-lifting .signature-process__step--09 :is(.signature-process__point--1, .signature-process__reference--1) {
--point-x: 343.60001;
--point-y: 313.60001;
}
.signature-process--tailored-lifting .signature-process__step--09 .signature-process__callout:nth-child(1) {
top: calc(47.42857% - 10px);
}
.signature-process--tailored-lifting .signature-process__step--10 {
--region-left: 58.75%;
--region-top: 55.83403%;
--region-width: 24.77479%;
}
.signature-process--tailored-lifting .signature-process__step--10 :is(.signature-process__point--1, .signature-process__reference--1) {
--point-x: 365.20001;
--point-y: 325.60001;
}
.signature-process--tailored-lifting .signature-process__step--10 .signature-process__callout:nth-child(1) {
top: calc(49.57143% - 10px);
}
.signature-process--tailored-lifting :is(.signature-process__step--01, .signature-process__step--04, .signature-process__step--05, .signature-process__step--08) {
--region-left: 0%;
--region-top: 0%;
--region-width: 100%;
}
@media (max-width: 1023px) {
.signature-process--tailored-lifting :is(.signature-process__step--01, .signature-process__step--03, .signature-process__step--05) .signature-process__description br {
display: none;
}
}
.signature-process--tailored-collagen-booster {
--region-left: 0%;
--region-top: 0%;
--region-width: 100%;
}
.signature-process--tailored-collagen-booster .signature-process__regions {
z-index: 2;
}
.signature-process--tailored-collagen-booster .signature-process__step--04 .signature-process__scene {
aspect-ratio: 3;
}
.signature-process--tailored-collagen-booster .signature-process__art--collagen-04 {
position: relative;
left: 0;
top: 0;
width: 100%;
aspect-ratio: 3;
}
.signature-process--tailored-collagen-booster .signature-process__art--collagen-04 .signature-process__face, .signature-process--tailored-collagen-booster .signature-process__art--collagen-04 .signature-process__outline {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.signature-process--tailored-collagen-booster .signature-process__art--collagen-04 img, .signature-process--tailored-collagen-booster .signature-process__art--collagen-04 svg {
display: block;
width: 100%;
height: auto;
}
.signature-process--tailored-collagen-booster .signature-process__step--01 .signature-process__point--1 {
--point-x: 344;
--point-y: 319;
}
.signature-process--tailored-collagen-booster .signature-process__step--01 .signature-process__point--2 {
--point-x: 355;
--point-y: 386;
}
.signature-process--tailored-collagen-booster .signature-process__step--01 .signature-process__callout:nth-child(1) {
top: calc(48.3929% - 10px);
}
.signature-process--tailored-collagen-booster .signature-process__step--01 .signature-process__callout:nth-child(2) {
top: calc(76.25% - 10px);
}
.signature-process--tailored-collagen-booster .signature-process__step--02 .signature-process__point--1 {
--point-x: 357;
--point-y: 296;
}
.signature-process--tailored-collagen-booster .signature-process__step--02 .signature-process__point--2 {
--point-x: 369;
--point-y: 355;
}
.signature-process--tailored-collagen-booster .signature-process__step--02 .signature-process__callout:nth-child(1) {
top: calc(44.2857% - 10px);
}
.signature-process--tailored-collagen-booster .signature-process__step--02 .signature-process__callout:nth-child(2) {
top: calc(71.9643% - 10px);
}
.signature-process--tailored-collagen-booster .signature-process__step--03 .signature-process__point--1 {
--point-x: 357;
--point-y: 297;
}
.signature-process--tailored-collagen-booster .signature-process__step--03 .signature-process__point--2 {
--point-x: 351;
--point-y: 333;
}
.signature-process--tailored-collagen-booster .signature-process__step--03 .signature-process__callout:nth-child(1) {
top: calc(44.4643% - 10px);
}
.signature-process--tailored-collagen-booster .signature-process__step--03 .signature-process__callout:nth-child(2) {
top: calc(68.0357% - 10px);
}
.signature-process--tailored-collagen-booster .signature-process__step--04 .signature-process__point--1 {
--point-x: 335;
--point-y: 120;
}
.signature-process--tailored-collagen-booster .signature-process__step--04 .signature-process__point--2 {
--point-x: 380;
--point-y: 300;
}
.signature-process--tailored-collagen-booster .signature-process__step--04 .signature-process__point--3 {
--point-x: 447;
--point-y: 480;
}
.signature-process--tailored-collagen-booster .signature-process__step--04 .signature-process__callout:nth-child(1) {
top: calc(12.8571% - 10px);
}
.signature-process--tailored-collagen-booster .signature-process__step--04 .signature-process__callout:nth-child(2) {
top: calc(45% - 10px);
}
.signature-process--tailored-collagen-booster .signature-process__step--04 .signature-process__callout:nth-child(3) {
top: calc(77.1429% - 10px);
}
.signature-process--tailored-collagen-booster .signature-process__step--05 .signature-process__point--1 {
--point-x: 383;
--point-y: 245;
}
.signature-process--tailored-collagen-booster .signature-process__step--05 .signature-process__point--2 {
--point-x: 232;
--point-y: 421;
}
.signature-process--tailored-collagen-booster .signature-process__step--05 .signature-process__callout:nth-child(1) {
top: calc(35.1786% - 10px);
}
.signature-process--tailored-collagen-booster .signature-process__step--05 .signature-process__callout:nth-child(2) {
top: calc(83.75% - 10px);
}
.signature-process--tailored-collagen-booster .signature-process__step--06 .signature-process__point--1 {
--point-x: 347;
--point-y: 393;
}
.signature-process--tailored-collagen-booster .signature-process__step--06 .signature-process__callout {
top: calc(61.6071% - 10px);
}
.signature-process {
grid-area: groups;
min-width: 0;
color: var(--public-brand-ink);
}
.signature-process__step {
scroll-margin-top: calc(var(--public-header-height) + 24px);
}
.signature-process__panel {
padding-block: 28px 56px;
background: var(--public-surface-subtle);
}
.signature-process__heading {
display: flex;
align-items: baseline;
gap: 16px;
}
.signature-process__index {
flex: none;
color: var(--public-brand-accent);
font-size: 13px;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
.signature-process__title {
font-size: clamp(20px, 2vw, 24px);
line-height: 1.5;
font-weight: 500;
word-break: keep-all;
overflow-wrap: break-word;
text-wrap: balance;
}
.signature-process__figure {
position: relative;
margin: 24px 0 32px;
}
.signature-process__scene {
position: relative;
aspect-ratio: 2;
}
.signature-process__art {
--art-origin-x: 40;
--art-origin-y: 40;
position: absolute;
left: 3.5714%;
top: 7.1429%;
width: 42.8571%;
height: auto;
aspect-ratio: 1;
object-fit: contain;
}
.signature-process--tailored-botox .signature-process__step--06 .signature-process__art {
--art-origin-x: 10;
left: 0.8929%;
}
.signature-process__face {
display: block;
width: 100%;
height: auto;
}
.signature-process__outline {
position: absolute;
inset: 0;
z-index: 3;
opacity: 0;
pointer-events: none;
}
.signature-process__outline > svg, .signature-process__connection > svg {
display: block;
width: 100%;
height: auto;
}
.signature-process__regions {
position: absolute;
left: var(--region-left);
top: var(--region-top);
width: var(--region-width);
height: auto;
}
.signature-process__art-labels {
left: 0;
top: 73.3333%;
z-index: 4;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
color: var(--public-muted);
font-size: clamp(8px, 1vw, 14px);
line-height: 1.7;
text-align: center;
white-space: nowrap;
}
.signature-process__closing {
grid-column: 1/-1;
padding-block: 40px;
}
.signature-process__closing .signature-process__description {
margin-top: 20px;
}
.signature-process__connection {
position: absolute;
inset: 0;
width: 100%;
height: auto;
}
.signature-process__mobile-connections {
display: none;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
color: var(--public-brand-accent);
}
.signature-process__mobile-connections > path {
stroke-opacity: 0.65;
}
.signature-process__reference, .signature-process__reference-key, .signature-process__mobile-reference {
display: none;
}
.signature-process__mobile-reference > circle {
fill: var(--public-surface-subtle);
stroke: currentColor;
stroke-width: 1;
}
.signature-process__mobile-reference > text {
fill: currentColor;
font-size: 14px;
font-weight: 500;
}
.signature-process__pointer-ripple {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
.signature-process__mobile-connections.is-pointer-active .signature-process__pointer-ripple {
animation: signature-pointer-ripple 1.5s cubic-bezier(0.2, 0.65, 0.3, 1) var(--pointer-delay, 0ms) infinite;
}
}
.signature-process__point {
position: absolute;
width: 9px;
height: 9px;
margin: -4.5px 0 0 -4.5px;
border: 1px solid var(--public-brand-accent);
border-radius: 50%;
pointer-events: none;
opacity: 0;
left: calc(var(--point-x) / 1120 * 100%);
top: calc(var(--point-y) / 560 * 100%);
}
.signature-process__point--mobile-only {
display: none;
}
.signature-process--tailored-botox .signature-process__step--01 .signature-process__point {
--point-x: 330;
--point-y: 193;
}
.signature-process--tailored-botox .signature-process__step--02 .signature-process__point {
--point-x: 314;
--point-y: 181;
}
.signature-process--tailored-botox .signature-process__step--03 .signature-process__point--1 {
--point-x: 265;
--point-y: 193;
}
.signature-process--tailored-botox .signature-process__step--03 .signature-process__point--2 {
--point-x: 335;
--point-y: 211;
}
.signature-process--tailored-botox .signature-process__step--04 .signature-process__point {
--point-x: 277;
--point-y: 190;
}
.signature-process--tailored-botox .signature-process__step--05 .signature-process__point {
--point-x: 341;
--point-y: 183;
}
.signature-process--tailored-botox .signature-process__step--06 .signature-process__point {
--point-x: 306;
--point-y: 196;
}
.signature-process--tailored-botox .signature-process__step--07 .signature-process__point--1 {
--point-x: 298;
--point-y: 171;
}
.signature-process--tailored-botox .signature-process__step--07 .signature-process__point--2 {
--point-x: 353;
--point-y: 210;
}
.signature-process__callouts {
position: absolute;
inset: 0 0 0 62.5%;
}
.signature-process__callout {
position: absolute;
top: calc(25.8929% - 11px);
width: 100%;
padding-left: 12px;
color: var(--public-brand-accent);
font-size: 13px;
line-height: 20px;
word-break: keep-all;
}
.signature-process--tailored-botox .signature-process__step--02 .signature-process__callout {
top: calc(23.75% - 11px);
}
.signature-process--tailored-botox .signature-process__step--03 .signature-process__callout:nth-child(2) {
top: calc(46.25% - 11px);
}
.signature-process--tailored-botox .signature-process__step--04 .signature-process__callout {
top: calc(25.3571% - 11px);
}
.signature-process--tailored-botox .signature-process__step--05 .signature-process__callout {
top: calc(24.1071% - 11px);
}
.signature-process--tailored-botox .signature-process__step--06 .signature-process__callout {
top: calc(26.4286% - 11px);
}
.signature-process--tailored-botox .signature-process__step--07 .signature-process__callout {
top: calc(21.9643% - 11px);
}
.signature-process--tailored-botox .signature-process__step--07 .signature-process__callout:nth-child(2) {
top: calc(46.0714% - 11px);
}
.signature-process__description {
width: 100%;
font-size: var(--body-md-fs);
line-height: var(--body-md-lh);
word-break: keep-all;
overflow-wrap: break-word;
text-wrap: balance;
}
.signature-process__description p + p {
margin-top: 12px;
}
.signature-process__caption {
max-inline-size: 40em;
margin-top: 20px;
font-size: 11px;
line-height: 1.7;
color: var(--public-muted);
text-wrap: pretty;
}
@media (min-width: 1024px) {
.signature-process__callouts--embedded {
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
@media (min-width: 1024px) and (min-height: 800px) and (prefers-reduced-motion: no-preference) {
.signature-process__step.is-pinned {
min-height: 140svh;
scroll-margin-top: calc(var(--public-header-height) + 20px - 36svh);
}
.signature-process__step.is-pinned .signature-process__panel {
position: sticky;
top: calc(var(--public-header-height) + 20px);
}
}
@media (max-width: 1439px) {
.signature-process__figure {
width: min(100%, 420px);
margin-inline: auto;
}
.signature-process__callouts {
inset: 0 0 0 64%;
}
.signature-process__callout {
padding: 0;
font-size: 11px;
line-height: 20px;
}
}
@media (max-width: 1023px) {
.signature-process__figure {
display: flex;
flex-direction: column;
width: min(100%, 420px);
}
.signature-process__scene {
width: min(100% - 48px, 340px);
margin-inline: auto;
aspect-ratio: 1;
}
.signature-process__figure:has(.signature-process__reference-key) .signature-process__scene {
margin-inline: 0 auto;
}
.signature-process__art {
position: relative;
left: 0;
top: 0;
width: 100%;
}
.signature-process--tailored-botox .signature-process__step--06 .signature-process__art {
left: 0;
}
.signature-process__connection, .signature-process__point {
display: none;
}
.signature-process__mobile-connections {
display: block;
}
.signature-process__callouts {
position: static;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
padding: 0;
margin: 24px 0 0;
}
.signature-process__callout {
position: static;
display: flex;
align-items: baseline;
gap: 8px;
width: 100%;
padding: 0;
font-size: 1.6rem;
line-height: 1.65;
text-align: left;
}
.signature-process__mobile-reference {
display: block;
}
.signature-process__reference-key {
display: inline-grid;
place-items: center;
flex: none;
width: 28px;
height: 28px;
border: 1px solid currentColor;
border-radius: 50%;
font-size: 1.4rem;
font-weight: 500;
line-height: 1;
}
.signature-process__figure--composite .signature-process__art {
aspect-ratio: 1;
}
.signature-process__figure--composite .signature-process__outline {
display: none;
}
}
@media (max-width: 767px) {
.signature-process__heading {
gap: 12px;
}
.signature-process__title {
font-size: 20px;
}
.signature-process__figure {
margin-block: 28px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.signature-process {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 40px;
}
.signature-process__step {
min-width: 0;
}
.signature-process__panel {
padding-block: 28px 36px;
}
.signature-process__heading {
min-height: 60px;
gap: 12px;
}
.signature-process__title {
font-size: 20px;
}
}
@keyframes signature-pointer-ripple {
0% {
opacity: 0.65;
transform: scale(1);
}
90%, 100% {
opacity: 0;
transform: scale(7);
}
}
.public-page-layer {
position: relative;
min-width: 0;
min-height: 100svh;
}
[data-barba=container].is-page-transition-current {
position: relative;
z-index: 0;
isolation: isolate;
transform-origin: center var(--public-page-transition-origin-y, 50svh);
pointer-events: none;
will-change: transform, opacity;
}
[data-barba=container].is-page-transition-current > .site-header.public-header {
position: absolute;
inset: var(--public-page-transition-scroll-top, 0) 0 auto;
}
[data-barba=container].is-page-transition-next {
position: fixed;
z-index: calc(var(--public-z-drawer) + 31);
inset: 0;
width: 100%;
height: 100svh;
overflow: hidden;
background: var(--public-white);
clip-path: inset(100% 0 0 0);
pointer-events: none;
will-change: clip-path, transform;
contain: paint;
isolation: isolate;
}
.public-page-transition-overlay {
position: fixed;
z-index: calc(var(--public-z-drawer) + 30);
inset: 0;
visibility: hidden;
background: var(--public-page-transition-backdrop);
opacity: 0;
pointer-events: none;
will-change: opacity;
}
.public-page-transition-overlay.is-active {
visibility: visible;
}
html.is-page-transitioning {
cursor: progress;
}
html.is-page-transitioning body {
overflow: hidden;
background: var(--public-page-transition-backdrop);
}
@media (prefers-reduced-motion: reduce) {
.public-page-transition-overlay {
display: none;
}
}
.public-cart {
padding-top: calc(var(--public-header-height) + var(--public-space-page));
padding-bottom: var(--public-cart-page-bottom);
background: var(--public-surface);
}
.public-cart.is-public-cart-loading {
cursor: progress;
}
.public-cart__inner {
display: grid;
gap: var(--public-space-2xl);
width: min(100% - var(--public-shell-gutter) * 2, var(--public-cart-max));
max-width: var(--public-cart-max);
margin-inline: auto;
}
.public-cart__header {
text-align: center;
}
.public-cart__panel {
padding: 0 var(--public-cart-panel-padding) var(--public-cart-panel-padding);
background: var(--public-white);
}
.public-cart__toolbar {
display: flex;
align-items: center;
gap: var(--public-space-xs);
min-height: 7.2rem;
border-bottom: 1px solid var(--public-line);
}
.public-cart__master {
display: grid;
width: var(--public-check-size);
height: var(--public-check-size);
padding: 0;
place-items: center;
color: transparent;
background: var(--public-white);
border: 1px solid var(--public-line);
border-radius: 0;
transition: color var(--public-duration) var(--public-ease), border-color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease), box-shadow var(--public-duration) var(--public-ease);
}
.public-cart__master:hover, .public-cart__master:focus-visible {
color: var(--public-blue);
border-color: var(--public-blue);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--public-blue) 16%, transparent);
}
.public-cart__master[data-state=mixed], .public-cart__master[data-state=checked] {
color: var(--public-white);
background: var(--public-blue);
border-color: var(--public-blue);
}
.public-cart__delete, .public-cart__row-delete {
min-height: 4.8rem;
padding-inline: var(--public-space-md);
padding-block: 0;
color: var(--public-ink);
background: var(--public-white);
border: 1px solid var(--public-line);
border-radius: 0.2rem;
font-weight: var(--font-weight-medium);
transition: color var(--public-duration) var(--public-ease), border-color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease), box-shadow var(--public-duration) var(--public-ease);
}
.public-cart__delete {
margin-left: auto;
}
.public-cart__delete:hover, .public-cart__delete:focus-visible, .public-cart__row-delete:hover, .public-cart__row-delete:focus-visible {
color: var(--public-white);
background: var(--public-ink);
border-color: var(--public-ink);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--public-ink) 16%, transparent);
}
.public-cart__empty {
padding-block: var(--public-space-3xl);
border-bottom: 1px solid var(--public-line);
}
.public-cart__empty .empty-state {
padding: 0;
}
.public-cart__row {
display: grid;
position: relative;
grid-template-columns: minmax(0, 1fr);
min-height: var(--public-cart-row-min-height);
padding-block: var(--public-space-xs);
border-bottom: 1px solid var(--public-line);
}
.public-cart__row.is-hidden {
display: none !important;
}
.public-cart__row .public-treatment-card__body {
height: 100%;
padding-right: 10rem;
}
.public-cart__row-delete {
position: absolute;
top: var(--public-space-xl);
right: 0;
}
.public-cart__quantity {
display: flex;
align-items: center;
gap: var(--public-space-2xs);
width: max-content;
margin-top: var(--public-space-sm);
}
.public-cart__quantity input {
width: 6rem;
min-height: 3.2rem;
padding-inline: var(--public-space-2xs);
background: var(--public-white);
border: 1px solid var(--public-line);
}
.public-cart__summary {
margin-top: var(--public-space-2xl);
padding-top: var(--public-space-2xl);
border-top: 1px solid var(--public-line-strong);
}
.public-cart__summary dl {
display: grid;
gap: var(--public-space-sm);
}
.public-cart__summary div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--public-space-xl);
}
.public-cart__summary dt {
color: var(--public-muted);
}
.public-cart__summary dt strong {
margin-left: var(--public-space-2xs);
color: var(--public-blue);
}
.public-cart__summary dd {
color: var(--public-ink);
white-space: nowrap;
}
.public-cart__notice {
margin-top: var(--public-space-2xl);
color: var(--public-muted);
}
.public-cart__notice .public-notice {
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding: var(--public-space-xl) var(--public-space-2xl);
background: var(--public-surface);
border: 1px solid var(--public-line);
}
.public-cart__notice .public-notice__mark {
display: none;
background: var(--public-ink);
}
.public-cart__notice .public-notice__list {
list-style: disc;
}
.public-cart__booking-gate {
display: grid;
gap: var(--public-space-lg);
margin-top: var(--public-space-2xl);
padding-top: var(--public-space-2xl);
border-top: 1px solid var(--public-line);
}
.public-cart__booking-head, .public-cart__booking-form, .public-cart__consents {
display: grid;
}
.public-cart__booking-head, .public-cart__consents {
gap: var(--public-space-xs);
}
.public-cart__booking-form {
gap: var(--public-space-md);
}
.public-cart__booking-copy, .public-cart__policy {
color: var(--public-muted);
}
.public-cart__consent {
display: grid;
grid-template-columns: var(--public-check-size) minmax(0, 1fr);
align-items: start;
gap: var(--public-space-xs);
cursor: pointer;
}
.public-cart__consent input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.public-cart__consent input:checked + .public-form-field__checkbox-mark, .public-cart .public-treatment-card--cart .public-treatment-card__check-input:checked + .public-treatment-card__check {
color: var(--public-white);
background: var(--public-blue);
border-color: var(--public-blue);
}
.public-cart .public-treatment-card--cart .public-treatment-card__check-wrapper:hover .public-treatment-card__check, .public-cart .public-treatment-card--cart .public-treatment-card__check-wrapper:focus-within .public-treatment-card__check {
border-color: var(--public-blue);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--public-blue) 15%, transparent);
}
.public-cart .public-treatment-card--cart .public-treatment-card__badge, .public-cart .public-treatment-card--cart .public-treatment-card__discount {
color: var(--public-blue);
}
.public-cart__policy a {
color: inherit;
text-underline-offset: var(--public-space-2xs);
}
.public-cart__actions {
margin-top: var(--public-space-2xl);
padding-inline-end: 0;
}
.public-cart__panel[aria-busy=true] {
opacity: 0.68;
pointer-events: none;
}
@media (max-width: 767px) {
.public-cart {
padding-top: calc(var(--public-header-height) + var(--public-space-2xl));
padding-bottom: var(--public-space-page);
}
.public-cart__inner {
gap: var(--public-space-xl);
width: 100%;
}
.public-cart__panel {
padding-inline: var(--public-space-md);
padding-bottom: var(--public-space-xl);
}
.public-cart__toolbar {
min-height: 6.4rem;
}
.public-cart__delete, .public-cart__row-delete {
min-height: 4rem;
padding-inline: var(--public-space-sm);
}
.public-cart__row {
min-height: 0;
padding-block: var(--public-space-lg) var(--public-space-xl);
}
.public-cart__row .public-treatment-card__body {
padding-right: 7rem;
}
.public-cart__row-delete {
top: var(--public-space-lg);
}
.public-cart__summary {
margin-top: var(--public-space-xl);
padding-top: var(--public-space-xl);
}
.public-cart__summary div {
gap: var(--public-space-sm);
}
.public-cart__summary dt strong {
display: block;
margin-left: 0;
margin-top: var(--public-space-2xs);
}
.public-cart__notice, .public-cart__booking-gate, .public-cart__actions {
margin-top: var(--public-space-xl);
padding-inline-end: 0;
}
.public-cart__notice .public-notice {
padding: var(--public-space-md);
}
}
.public-cart-page ~ .no-floating-cta {
display: none;
}
.public-booking-steps {
width: 100%;
padding: var(--public-space-lg) var(--public-space-xl);
background: var(--public-white);
border: 0;
}
.public-booking-steps__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
padding: 0;
list-style: none;
}
.public-booking-steps__item {
position: relative;
display: grid;
justify-items: center;
gap: var(--public-space-2xs);
color: var(--public-muted);
}
.public-booking-steps__item:not(:last-child)::after {
position: absolute;
z-index: 0;
top: calc(var(--public-control-sm) / 2);
left: calc(50% + var(--public-control-sm) / 2);
width: calc(100% - var(--public-control-sm));
height: 1px;
background: var(--public-line);
content: "";
}
.public-booking-steps__item[data-state=complete]::after {
background: var(--public-ink);
}
.public-booking-steps__marker {
position: relative;
z-index: 1;
display: grid;
width: var(--public-control-sm);
height: var(--public-control-sm);
place-items: center;
color: var(--public-muted);
background: var(--public-white);
border: 1px solid var(--public-line);
border-radius: 50%;
}
.public-booking-steps__item[data-state=complete] .public-booking-steps__marker {
color: var(--public-white);
background: var(--public-ink);
border-color: var(--public-ink);
}
.public-booking-steps__item[data-state=current] {
color: var(--public-ink);
}
.public-booking-steps__item[data-state=current] .public-booking-steps__marker {
color: var(--public-white);
background: var(--public-blue);
border-color: var(--public-blue);
}
@media (max-width: 767px) {
.public-booking-steps {
padding: var(--public-space-md) var(--public-space-sm);
}
.public-booking-steps__label {
text-align: center;
}
}
.public-booking {
min-height: calc(100svh - var(--public-header-height));
padding-top: calc(var(--public-header-height) + var(--public-space-page));
padding-bottom: var(--public-space-page);
background: var(--public-surface);
}
.public-booking.no-section-xl {
padding-top: calc(var(--public-header-height) + var(--public-space-page));
padding-bottom: var(--public-space-page);
}
.public-booking__inner {
display: grid;
gap: var(--public-space-2xl);
}
.public-booking__head {
display: grid;
gap: var(--public-space-sm);
text-align: center;
}
.public-booking .public-kicker {
color: var(--public-ink);
}
.public-booking :focus-visible {
outline-color: var(--public-ink);
}
.public-booking__form, .public-booking__record, .public-booking__complete {
display: grid;
gap: var(--public-space-xl);
padding: var(--public-space-2xl);
border: 0;
background: var(--public-white);
}
.public-booking__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-lg);
}
.public-booking label {
display: grid;
gap: var(--public-space-xs);
color: var(--public-ink);
}
.public-booking input:not([type=radio]):not([type=checkbox]), .public-booking select, .public-booking textarea {
width: 100%;
min-height: var(--public-control-md);
padding: var(--public-space-sm) var(--public-space-md);
border: 1px solid var(--public-line);
background: var(--public-white);
color: var(--public-ink);
}
.public-booking .public-date-picker__input, .public-booking .public-select__trigger {
height: var(--public-control-md);
min-height: var(--public-control-md);
}
.public-booking .public-select__trigger:hover:not(:disabled), .public-booking .public-select__trigger.cs-trigger--open, .public-booking .public-select__trigger[aria-expanded=true] {
color: var(--public-white);
background: var(--public-ink);
border-color: var(--public-ink);
}
.public-booking .public-select__dropdown .cs-option:hover, .public-booking .public-select__dropdown .cs-option--active, .public-booking .public-select__dropdown .cs-option--selected:hover, .public-booking .public-select__dropdown .cs-option--selected.cs-option--active {
color: var(--public-white);
background: var(--public-ink);
}
.public-booking .public-select__dropdown .cs-option--selected {
color: var(--public-ink);
background: var(--public-surface);
}
.public-booking textarea {
min-height: calc(var(--public-control-md) * 2 + var(--public-space-sm));
resize: vertical;
}
.public-booking__options {
display: flex;
flex-wrap: wrap;
gap: var(--public-space-sm);
margin-top: var(--public-space-md);
}
.public-booking__option, .public-booking__consent {
display: flex;
grid-template-columns: none;
align-items: center;
gap: var(--public-space-xs);
}
.public-booking__option {
padding: var(--public-space-sm) var(--public-space-md);
border: 1px solid var(--public-line);
border-radius: var(--public-button-frame-radius);
cursor: pointer;
}
.public-booking__option:has(input:checked) {
color: var(--public-white);
border-color: var(--public-ink);
background: var(--public-ink);
}
.public-booking input:checked + .public-form-field__checkbox-mark, .public-booking input:checked + .public-form-field__radio-mark {
border-color: var(--public-ink);
background: var(--public-ink);
}
.public-booking__option input, .public-booking__consent input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.public-booking__fieldset {
display: grid;
gap: var(--public-space-md);
padding: 0;
border: 0;
}
.public-booking__availability {
margin: 0;
padding: var(--public-space-md);
border: 1px solid var(--public-line);
background: var(--public-surface);
color: var(--public-muted);
}
.public-booking__availability[data-state=available] {
color: var(--public-ink);
}
.public-booking__availability[data-state=notice], .public-booking__availability[data-state=loading] {
color: var(--public-ink);
}
.public-booking__availability[data-state=closed], .public-booking__availability[data-state=error] {
color: var(--public-ink);
}
.public-booking__selection-summary {
display: grid;
gap: var(--public-space-sm);
padding-block: var(--public-space-lg);
border-top: 1px solid var(--public-ink);
}
.public-booking__selection-main {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--public-space-lg);
margin: 0;
}
.public-booking__selection-label, .public-booking__selection-value, .public-booking__selection-note {
margin: 0;
}
.public-booking__selection-label, .public-booking__selection-note {
color: var(--public-muted);
}
.public-booking__record dl {
display: grid;
gap: var(--public-space-sm);
}
.public-booking__change-form {
display: grid;
gap: var(--public-space-xl);
}
.public-booking__record dl div {
display: flex;
justify-content: space-between;
gap: var(--public-space-lg);
padding-bottom: var(--public-space-sm);
border-bottom: 1px solid var(--public-line);
}
.public-booking__complete {
text-align: center;
justify-items: center;
}
@media (max-width: 767px) {
.public-booking {
padding-top: calc(var(--public-header-height) + var(--section-sm));
}
.public-booking.no-section-xl {
padding-top: calc(var(--public-header-height) + var(--section-sm));
}
.public-booking__grid {
grid-template-columns: 1fr;
}
.public-booking__form, .public-booking__record, .public-booking__complete {
padding: var(--public-space-lg);
}
.public-booking__selection-main {
display: grid;
gap: var(--public-space-xs);
}
}
.public-booking-page ~ .no-floating-cta {
display: none;
}
.public-booking-flow {
color: var(--public-ink);
background: var(--public-surface);
}
.public-booking-flow__inner {
display: grid;
gap: var(--public-space-2xl);
width: min(100% - var(--public-shell-gutter) * 2, var(--public-cart-max));
max-width: var(--public-cart-max);
margin-inline: auto;
}
.public-booking-flow__head {
display: grid;
gap: var(--public-space-sm);
text-align: center;
}
.public-booking-flow__head .public-kicker {
color: var(--public-ink);
}
.public-booking-flow__surface {
display: grid;
gap: var(--public-space-xl);
padding: var(--public-space-2xl);
background: var(--public-white);
border: 0;
}
.public-booking-flow__actions {
display: grid;
grid-template-columns: 1fr;
align-items: center;
gap: var(--public-space-xs);
width: 100%;
padding-top: var(--public-space-md);
border-top: 1px solid var(--public-line);
}
.public-booking-flow__actions > .public-button {
width: 100%;
justify-content: center;
}
.public-booking-flow__actions > .public-button--primary {
color: var(--public-white);
background: var(--public-ink);
border-color: var(--public-ink);
}
.public-booking-flow__actions > .public-button--primary:hover, .public-booking-flow__actions > .public-button--primary:focus-visible {
color: var(--public-white);
background: var(--public-ink);
border-color: var(--public-ink);
}
.public-booking-flow__actions > .public-button--text {
justify-self: center;
width: max-content;
color: var(--public-ink);
}
.public-booking-flow__actions > .public-button--outline {
width: 100%;
color: var(--public-ink);
background: var(--public-white);
border-color: var(--public-ink);
}
.public-booking-flow__actions > .public-button--outline:hover, .public-booking-flow__actions > .public-button--outline:focus-visible {
color: var(--public-white);
background: var(--public-ink);
border-color: var(--public-ink);
}
.public-booking-flow__actions > .public-button--text:hover, .public-booking-flow__actions > .public-button--text:focus-visible {
color: var(--public-ink);
}
.public-booking-flow__actions > .public-button:hover, .public-booking-flow__actions > .public-button:focus-visible {
transform: none;
}
.public-booking-flow :focus-visible {
outline-color: var(--public-ink);
}
@media (max-width: 767px) {
.public-booking-flow__inner {
width: 100%;
gap: var(--public-space-xl);
}
.public-booking-flow__surface {
padding: var(--public-space-lg);
}
}
.public-home-relational {
background: var(--public-white);
}
.public-home-relational__head, .public-home-relational__section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--public-space-2xl);
}
.public-home-relational__head {
padding-bottom: var(--public-space-3xl);
border-bottom: 1px solid var(--public-line);
}
.public-home-relational__head h2, .public-home-relational__head p, .public-home-relational__section-head h3, .public-home-relational__section-head p {
margin: 0;
}
.public-home-relational__head h2 {
margin-top: var(--public-space-xs);
color: var(--public-navy);
}
.public-home-relational__head > p {
max-width: 44rem;
color: var(--public-muted);
text-align: right;
}
.public-home-relational__section {
padding-top: var(--public-space-section);
}
.public-home-relational__section-head {
margin-bottom: var(--public-space-xl);
}
.public-home-relational__section-head h3 {
margin-top: var(--public-space-2xs);
color: var(--public-navy);
}
.public-home-relational__practice-grid, .public-home-relational__people-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--public-space-md);
}
.public-home-relational__practice-grid .public-practice-card {
min-height: 34rem;
}
.public-home-relational__people-grid .public-professional-card {
min-width: 0;
}
.public-home-relational__editorial {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-3xl);
padding-top: var(--public-space-section);
}
.public-home-relational__rows {
border-bottom: 1px solid var(--public-line);
}
.public-home-relational__rows .public-insight-card--row, .public-home-relational__rows .public-insight-card--event {
grid-template-columns: 10rem minmax(0, 1fr) 4.2rem;
gap: var(--public-space-md);
min-height: 12rem;
padding-block: var(--public-space-lg);
}
.public-home-relational__rows .public-insight-card__excerpt {
display: none;
}
@media (max-width: 1024px) {
.public-home-relational__practice-grid, .public-home-relational__people-grid, .public-home-relational__editorial {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.public-home-relational__head, .public-home-relational__section-head {
align-items: flex-start;
}
.public-home-relational__head {
flex-direction: column;
}
.public-home-relational__head > p {
text-align: left;
}
.public-home-relational__practice-grid, .public-home-relational__people-grid, .public-home-relational__editorial {
grid-template-columns: 1fr;
}
.public-home-relational__editorial {
gap: var(--public-space-section);
}
.public-home-relational__rows .public-insight-card--row, .public-home-relational__rows .public-insight-card--event {
grid-template-columns: minmax(0, 1fr) 4rem;
}
}
.public-about-intro {
overflow: hidden;
background: var(--public-white);
}
.public-about-intro [data-aos=public-about-blur] {
opacity: 0;
filter: blur(1rem);
transform: scale(1.07);
transition-property: opacity, filter, transform;
transition-duration: 1.2s;
transition-timing-function: cubic-bezier(0.22, 0.8, 0.25, 1);
will-change: opacity, filter, transform;
}
.public-about-intro [data-aos=public-about-blur].aos-animate {
opacity: 1;
filter: blur(0);
transform: scale(1);
will-change: auto;
}
.public-about-intro [data-aos=public-about-blur][data-aos-delay].aos-animate {
transition-delay: 0s;
}
.public-about-intro [data-aos=public-about-blur][data-aos-delay="120"].aos-animate {
transition-delay: 0.12s;
}
.public-about-intro [data-aos=public-about-blur][data-aos-delay="240"].aos-animate {
transition-delay: 0.24s;
}
.public-about-intro [data-aos=public-about-blur][data-aos-delay="360"].aos-animate {
transition-delay: 0.36s;
}
.public-about-intro [data-aos=public-about-blur][data-aos-delay="480"].aos-animate {
transition-delay: 0.48s;
}
.public-about-intro [data-aos=public-about-blur][data-aos-delay="600"].aos-animate {
transition-delay: 0.6s;
}
@media (prefers-reduced-motion: reduce) {
.public-about-intro [data-aos=public-about-blur] {
opacity: 1;
filter: none;
transform: none;
transition: none;
will-change: auto;
}
}
.public-about-label {
margin: 0;
color: #2889b5;
}
.public-about-marquee {
display: flex;
align-items: center;
min-height: 12rem;
overflow: hidden;
background: var(--public-white);
}
.public-about-marquee__track {
display: flex;
width: max-content;
animation: public-about-marquee 24s linear infinite;
will-change: transform;
}
.public-about-marquee__group {
display: flex;
flex: none;
width: max-content;
}
.public-about-marquee__group span {
flex: none;
color: #9abcc0;
white-space: nowrap;
}
@media (max-width: 767px) {
.public-about-marquee {
min-height: 8rem;
}
.public-about-marquee__track {
animation-duration: 16s;
}
}
@media (prefers-reduced-motion: reduce) {
.public-about-marquee__track {
animation-play-state: paused;
}
}
@keyframes public-about-marquee {
to {
transform: translateX(-50%);
}
}
.public-about-showcase {
position: relative;
width: 100%;
max-width: none;
height: clamp(78rem, 100svh, 112rem);
isolation: isolate;
}
.public-about-showcase__wave {
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: 50%;
width: 100vw;
height: 100%;
pointer-events: none;
opacity: calc(var(--public-about-showcase-wave) * 0.52);
filter: blur(0.06rem);
transform: translateX(-50%) translateZ(0);
will-change: opacity;
}
.public-about-showcase__media {
position: absolute;
z-index: 1;
width: 31rem;
height: 38.2rem;
margin: 0;
overflow: hidden;
border-radius: 1.6rem;
}
.public-about-showcase__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.public-about-showcase__media--one {
top: 0.4rem;
left: 21.46%;
}
.public-about-showcase__media--two {
z-index: 2;
top: 23.8rem;
right: 5.36%;
}
.public-about-showcase__media--three {
z-index: 3;
bottom: 5rem;
left: 3.85%;
}
.public-about-showcase__media--four {
z-index: 4;
bottom: 0.4rem;
right: 21.51%;
}
.public-about-showcase__copy {
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
width: min(58rem, 100% - 4rem);
text-align: center;
text-shadow: 0 0 1.6rem rgba(255, 255, 255, 0.92), 0 0.2rem 2.8rem rgba(255, 255, 255, 0.86);
transform: translate(-50%, -50%);
}
.public-about-showcase__copy h2 {
margin: 4.5rem 0 0;
color: var(--public-ink);
}
.public-about-showcase__copy > p:last-child {
margin: 3.5rem 0 0;
color: #59636b;
}
@media (max-width: 1199px) {
.public-about-showcase {
height: clamp(78rem, 100svh, 96rem);
}
.public-about-showcase__media {
width: 22rem;
height: 28rem;
}
.public-about-showcase__media--one {
left: 12%;
}
.public-about-showcase__media--two {
right: 3%;
}
.public-about-showcase__media--three {
top: auto;
bottom: 8rem;
}
.public-about-showcase__media--four {
top: auto;
bottom: 2rem;
right: 14%;
}
.public-about-showcase__copy {
top: 50%;
}
}
@media (max-width: 767px) {
.public-about-showcase {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.2rem;
width: calc(100% - 4rem);
height: auto;
padding-block: 7rem 9rem;
}
.public-about-showcase__wave {
display: none;
}
.public-about-showcase__copy, .public-about-showcase__media {
position: relative;
inset: auto;
width: 100%;
height: auto;
transform: none;
}
.public-about-showcase__copy {
grid-column: 1/-1;
order: -1;
margin-bottom: 3rem;
}
.public-about-showcase__copy h2 {
margin-top: 2.4rem;
}
.public-about-showcase__copy > p:last-child {
margin-top: 2.6rem;
}
.public-about-showcase__copy br {
display: none;
}
.public-about-showcase__media {
aspect-ratio: 4/5;
border-radius: 1rem;
}
.public-about-showcase__media--one, .public-about-showcase__media--four {
transform: translateY(2rem);
}
}
@media (prefers-reduced-motion: reduce) {
.public-about-showcase__wave {
display: none;
}
}
.public-about-approach {
display: grid;
grid-template-columns: 92.3rem 1fr;
align-items: center;
gap: 19rem;
min-height: 115rem;
}
.public-about-approach__media {
position: relative;
top: 11.9rem;
width: 100%;
height: 103.2rem;
margin: 0;
overflow: hidden;
border-radius: 1.6rem;
}
.public-about-approach__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.public-about-approach__copy {
position: relative;
top: 6rem;
padding-right: 8rem;
}
.public-about-approach__copy h2 {
margin: 4.8rem 0 0;
color: var(--public-ink);
}
.public-about-approach__copy > p:last-child {
margin: 5rem 0 0;
color: #515b63;
}
@media (max-width: 1199px) {
.public-about-approach {
grid-template-columns: 1.04fr 0.96fr;
gap: 5rem;
}
.public-about-approach__media {
top: 0;
height: 90rem;
}
.public-about-approach__copy {
top: 0;
padding-right: 0;
}
}
@media (max-width: 767px) {
.public-about-approach {
grid-template-columns: 1fr;
gap: 4rem;
min-height: 0;
padding-block: 7rem 10rem;
}
.public-about-approach__media {
height: 48rem;
}
.public-about-approach__copy {
top: 0;
}
.public-about-approach__copy h2 {
margin-top: 2.4rem;
}
.public-about-approach__copy > p:last-child {
margin-top: 2.6rem;
}
.public-about-approach__copy br {
display: none;
}
}
.public-about-figures {
display: grid;
grid-template-columns: 1fr 2fr;
align-items: start;
gap: 12rem;
min-height: 95rem;
padding-top: 14.8rem;
}
.public-about-figures__header h2 {
margin: 4.6rem 0 0;
}
.public-about-figures__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 6rem;
margin: 6rem 0 0;
}
.public-about-figures__grid > div {
min-height: 18rem;
padding: 2.2rem 0 3.8rem;
border-top: 1px solid var(--public-line);
}
.public-about-figures__grid dt {
color: #59636b;
}
.public-about-figures__grid dd {
margin: 3rem 0 0;
color: var(--public-ink);
}
.public-about-figures__value {
display: inline-flex;
overflow: hidden;
padding-block: 0.06em;
font-variant-numeric: tabular-nums;
white-space: pre;
}
.public-about-figures__value .char {
display: inline-block;
}
.public-about-figures__value .char.is-digit {
min-width: 0.58em;
text-align: center;
}
@media (max-width: 1199px) {
.public-about-figures {
grid-template-columns: 1fr 1.7fr;
gap: 5rem;
}
}
@media (max-width: 767px) {
.public-about-figures__header h2 {
margin-top: 2.4rem;
}
.public-about-figures {
grid-template-columns: 1fr;
gap: 5rem;
min-height: 0;
padding: 8rem 0 10rem;
}
.public-about-figures__grid {
gap: 0 2rem;
}
.public-about-figures__grid > div {
min-height: 14rem;
}
}
.public-about-reasons {
min-height: 248.8rem;
color: var(--public-white);
background: linear-gradient(180deg, #0793cb 0%, #49afd1 52%, #d1ecee 100%);
}
.public-about-reasons__header {
text-align: center;
}
.public-about-reasons__header .public-about-label {
color: rgba(255, 255, 255, 0.92);
}
.public-about-reasons__header h2 {
margin: 4.5rem 0 0;
color: inherit;
}
.public-about-reasons__header > p:last-child {
margin: 3.5rem 0 0;
color: rgba(255, 255, 255, 0.86);
}
.public-about-reasons__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4.8rem;
margin-top: 8.7rem;
}
@media (max-width: 1199px) {
.public-about-reasons__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.public-about-reasons__header h2 {
margin-top: 2.4rem;
}
.public-about-reasons {
min-height: 0;
padding-right: 2rem;
padding-left: 2rem;
}
.public-about-reasons__grid {
grid-template-columns: 1fr;
gap: 2rem;
width: 100%;
margin-top: 6rem;
}
}
.public-about-reason {
position: relative;
height: 62rem;
overflow: hidden;
border-radius: 0.8rem;
}
.public-about-reason--right {
top: 20rem;
}
.public-about-reason img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.22, 0.8, 0.25, 1);
}
.public-about-reason:hover img {
transform: scale(1.035);
}
.public-about-reason__shade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 38%, rgba(4, 24, 42, 0.82));
}
.public-about-reason__copy {
position: absolute;
inset: auto 4.5rem 4.5rem;
color: var(--public-white);
}
.public-about-reason__copy h3 {
margin: 1.6rem 0 0;
color: inherit;
}
.public-about-reason__copy p {
margin: 2rem 0 0;
color: rgba(255, 255, 255, 0.86);
}
@media (max-width: 767px) {
.public-about-reason, .public-about-reason--right {
top: auto;
height: 44rem;
}
.public-about-reason__copy {
inset: auto 2.8rem 2.8rem;
}
}
.public-about-network {
min-height: 82rem;
}
.public-about-network__header {
width: 58rem;
}
.public-about-network__header h2 {
margin: 3.5rem 0 0;
}
.public-about-network__header > p:last-child {
margin: 3rem 0 0;
color: #4f5961;
}
.public-about-network__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 7rem;
}
.public-about-network__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 36.4rem;
padding: 4rem 6rem;
border-left: 1px solid var(--public-line);
text-align: center;
}
.public-about-network__item:last-child {
border-right: 1px solid var(--public-line);
}
.public-about-network__icon {
display: grid;
width: 8rem;
height: 8rem;
margin-inline: auto;
place-items: center;
}
.public-about-network__lord-icon {
width: 8rem;
height: 8rem;
color: var(--public-blue);
}
.public-about-network__item > p {
margin: 4rem 0 0;
color: #6d757b;
}
.public-about-network__item h3 {
margin: 1.4rem 0 0;
}
@media (max-width: 1199px) {
.public-about-network__item {
padding-inline: 2.5rem;
}
}
@media (max-width: 767px) {
.public-about-network__header h2 {
margin-top: 2.4rem;
}
.public-about-network {
min-height: 0;
}
.public-about-network__header {
width: auto;
}
.public-about-network__header br {
display: none;
}
.public-about-network__grid {
grid-template-columns: 1fr;
margin-top: 5rem;
border-block: 0;
}
.public-about-network__item {
min-height: 28rem;
padding: 4rem;
border-top: 1px solid var(--public-line);
border-right: 0;
}
.public-about-network__item:last-child {
border-right: 0;
border-bottom: 1px solid var(--public-line);
}
.public-about-network__item > p {
margin-top: 2.5rem;
}
}
.public-about-cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 81.6rem;
text-align: center;
}
.public-about-cta__headline {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
width: 100%;
gap: 2rem 3.5rem;
}
.public-about-cta__headline strong {
color: var(--public-ink);
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.public-about-cta__phrase {
display: block;
}
.public-about-cta__media {
display: block;
width: 100%;
height: auto;
aspect-ratio: 46/13;
overflow: hidden;
border-radius: 0.8rem;
}
.public-about-cta__headline img {
width: 100%;
height: 100%;
object-fit: cover;
}
.public-about-cta > p {
margin: 5rem 0 0;
color: #4e585f;
}
.public-about-cta__actions {
display: flex;
gap: 2rem;
margin-top: 5rem;
}
.public-about-cta__actions .public-button {
min-width: 15.2rem;
min-height: 5.2rem;
border-radius: 0.4rem;
gap: 2.5rem;
}
.public-about-cta__actions .public-button__icon {
order: 2;
margin-left: var(--public-space-2xs);
}
.public-about-cta__actions .public-button__icon + .public-button__label {
margin-left: 0;
}
@media (max-width: 767px) {
.public-about-cta {
min-height: 72rem;
}
.public-about-cta__headline {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.public-about-cta__media {
width: 28rem;
height: 8rem;
aspect-ratio: auto;
}
.public-about-cta > p {
margin-top: 3.5rem;
}
.public-about-cta > p br {
display: none;
}
.public-about-cta__actions {
flex-direction: column;
width: 100%;
margin-top: 3.5rem;
}
}
.public-history {
position: relative;
isolation: isolate;
min-height: 430rem;
color: var(--public-white);
background: #171819;
overflow: hidden;
}
.public-history__media, .public-history__shade {
position: absolute;
inset-inline: 0;
z-index: -2;
pointer-events: none;
}
.public-history__media {
background-repeat: no-repeat;
background-size: cover;
opacity: 0.28;
filter: saturate(0.42) brightness(0.48);
transform: translate3d(0, 0, 0);
will-change: transform, opacity, filter;
}
.public-history__media--city {
top: 0;
height: 150rem;
background-image: url("/assets/images/hero/history.jpg");
background-position: center top;
}
.public-history__media--structure {
top: 116rem;
height: 172rem;
background-image: url("/assets/images/hero/location.jpg");
background-position: center top;
opacity: 0.22;
}
.public-history__media--people {
top: 248rem;
bottom: 0;
background-image: url("/assets/images/hero/professional.jpg");
background-position: center bottom;
opacity: 0.2;
}
.public-history__shade {
inset-block: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(23, 24, 25, 0.94) 0%, rgba(23, 24, 25, 0.89) 18%, rgba(23, 24, 25, 0.91) 39%, rgba(23, 24, 25, 0.84) 64%, rgba(23, 24, 25, 0.95) 100%), radial-gradient(circle at 50% 6%, rgba(255, 255, 255, 0.08), transparent 28%), rgba(23, 24, 25, 0.62);
opacity: 1;
will-change: opacity;
}
.public-history.is-history-lit .public-history__shade {
opacity: 0.58;
}
.public-history__media.is-history-media-active {
opacity: 0.72;
filter: saturate(0.68) brightness(0.96);
}
.public-history__media--structure.is-history-media-active {
opacity: 0.62;
}
.public-history__media--people.is-history-media-active {
opacity: 0.58;
}
.public-history__inner {
position: relative;
}
.public-history__track {
position: relative;
padding-top: 6rem;
}
.public-history__line {
position: absolute;
z-index: 0;
top: var(--history-line-top);
bottom: var(--history-line-bottom);
left: 50%;
width: 3px;
overflow: hidden;
background: rgba(255, 255, 255, 0.22);
box-shadow: 0 0 1.4rem rgba(255, 255, 255, 0.16);
mask-image: linear-gradient(180deg, #000 0, #000 var(--history-line-gap-1-start), transparent var(--history-line-gap-1-start), transparent var(--history-line-gap-1-end), #000 var(--history-line-gap-1-end), #000 var(--history-line-gap-2-start), transparent var(--history-line-gap-2-start), transparent var(--history-line-gap-2-end), #000 var(--history-line-gap-2-end), #000 var(--history-line-gap-3-start), transparent var(--history-line-gap-3-start), transparent var(--history-line-gap-3-end), #000 var(--history-line-gap-3-end), #000 100%);
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--history-line-gap-1-start), transparent var(--history-line-gap-1-start), transparent var(--history-line-gap-1-end), #000 var(--history-line-gap-1-end), #000 var(--history-line-gap-2-start), transparent var(--history-line-gap-2-start), transparent var(--history-line-gap-2-end), #000 var(--history-line-gap-2-end), #000 var(--history-line-gap-3-start), transparent var(--history-line-gap-3-start), transparent var(--history-line-gap-3-end), #000 var(--history-line-gap-3-end), #000 100%);
transform: translateX(-50%);
}
.public-history__line-fill {
position: absolute;
inset: 0;
background: linear-gradient(180deg, var(--public-white), var(--public-focus) 56%, var(--public-blue));
box-shadow: 0 0 1.8rem rgba(141, 231, 244, 0.9), 0 0 3.6rem rgba(47, 183, 207, 0.52);
transform: scaleY(0);
transform-origin: 50% 0;
will-change: transform;
}
.public-history__chapter {
position: relative;
z-index: 1;
}
.public-history__chapter + .public-history__chapter {
margin-top: 30rem;
}
.public-history__intro {
position: relative;
display: grid;
justify-items: center;
width: min(100%, 80rem);
margin-inline: auto;
text-align: center;
isolation: isolate;
}
.public-history__intro::before {
content: none;
}
.public-history__eyebrow, .public-history__title, .public-history__lead {
position: relative;
z-index: 1;
}
.public-history__chapter--1 .public-history__intro {
margin-bottom: 0;
}
.public-history__chapter--2 .public-history__intro, .public-history__chapter--3 .public-history__intro {
padding-top: 1rem;
margin-bottom: 0;
}
.public-history__eyebrow {
margin: 0;
color: var(--public-focus);
text-shadow: 0 0 1.8rem rgba(141, 231, 244, 0.38);
}
.public-history__title {
margin: 1.8rem 0 0;
color: var(--public-white);
}
.public-history__lead {
max-width: 68rem;
margin: 2.8rem 0 0;
color: rgba(255, 255, 255, 0.84);
}
.public-history .public-history__intro .public-history__lead {
color: rgba(255, 255, 255, 0.84);
}
.public-history__list {
position: relative;
display: grid;
gap: 24rem;
margin: 0;
padding: 42rem 0 0;
list-style: none;
}
.public-history__event {
position: relative;
display: grid;
width: 50%;
}
.public-history__event::before, .public-history__event::after {
position: absolute;
top: 2.35rem;
box-sizing: border-box;
width: 1rem;
height: 1rem;
border-radius: 50%;
transform-origin: 50% 50%;
content: "";
}
.public-history__event::before {
z-index: 2;
background: rgba(255, 255, 255, 0.92);
border: 2px solid rgba(255, 255, 255, 0.54);
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
transition: background var(--public-duration) var(--public-ease), box-shadow var(--public-duration) var(--public-ease), transform var(--public-duration) var(--public-ease);
}
.public-history__event::after {
z-index: 1;
background: rgba(141, 231, 244, 0.34);
box-shadow: 0 0 1.8rem rgba(141, 231, 244, 0.48);
opacity: 0;
transform: scale(1);
pointer-events: none;
}
.public-history__event--left {
justify-self: start;
padding-right: 10.8rem;
text-align: right;
}
.public-history__event--right {
justify-self: end;
padding-left: 10.8rem;
text-align: left;
}
.public-history__event--left::before {
right: -0.5rem;
}
.public-history__event--right::before {
left: -0.5rem;
}
.public-history__event--left::after {
right: -0.5rem;
}
.public-history__event--right::after {
left: -0.5rem;
}
.public-history__event-copy {
display: grid;
gap: 4rem;
}
.public-history__year {
display: block;
color: rgba(255, 255, 255, 0.92);
transition: color var(--public-duration) var(--public-ease);
}
.public-history__items {
display: grid;
gap: 2rem;
margin: 0;
padding: 0;
list-style: none;
}
.public-history__item {
position: relative;
display: flex;
align-items: flex-start;
gap: 1rem;
color: rgba(255, 255, 255, 0.76);
transition: color var(--public-duration) var(--public-ease);
}
.public-history__item::before {
flex: 0 0 auto;
width: 0.42rem;
height: 0.42rem;
margin-top: 0.72em;
background: currentColor;
border-radius: 50%;
content: "";
opacity: 0.88;
}
.public-history__item-text {
min-width: 0;
}
.public-history__event--left .public-history__item {
justify-content: flex-end;
}
.public-history__event--left .public-history__item::before {
order: 2;
}
.public-history__event--left .public-history__item-text {
text-align: right;
}
.public-history__event--right .public-history__item-text {
text-align: left;
}
.public-history__outro {
position: relative;
width: min(100%, 152rem);
margin: 24rem auto 0;
text-align: center;
}
.public-history__outro-title {
margin: 0;
color: rgba(255, 255, 255, 0.24);
text-transform: uppercase;
white-space: nowrap;
}
.public-history__outro-text {
margin: 6.8rem 0 0;
color: rgba(255, 255, 255, 0.88);
}
.public-history [data-history-reveal] {
opacity: 0.32;
transform: translate3d(0, 4.8rem, 0);
filter: blur(0.8rem);
will-change: opacity, transform, filter;
}
.public-history [data-history-reveal].is-history-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
.public-history__event.is-history-active::before {
background: var(--public-white);
box-shadow: 0 0 0 0.42rem rgba(141, 231, 244, 0.18), 0 0 2.2rem rgba(141, 231, 244, 0.72);
transform: scale(1.14);
}
.public-history__event.is-history-active::after {
animation: public-history-ripple 1.55s var(--public-ease) infinite;
}
.public-history__event.is-history-active .public-history__year, .public-history__event.is-history-active .public-history__item {
color: var(--public-white);
}
@media (max-width: 1024px) {
.public-history {
min-height: 0;
}
.public-history__media--city {
height: 124rem;
}
.public-history__media--structure {
top: 104rem;
height: 136rem;
}
.public-history__media--people {
top: 214rem;
}
.public-history__track {
width: 100%;
}
.public-history__line {
top: var(--history-line-top);
bottom: var(--history-line-bottom);
left: var(--gutter);
}
.public-history__chapter + .public-history__chapter {
margin-top: 16rem;
}
.public-history__chapter--1 .public-history__intro, .public-history__chapter--2 .public-history__intro, .public-history__chapter--3 .public-history__intro {
margin-bottom: 0;
}
.public-history__intro {
width: 100%;
padding-left: 4.4rem;
justify-items: start;
text-align: left;
}
.public-history__list {
gap: 9rem;
padding-top: 24rem;
}
.public-history__event, .public-history__event--left, .public-history__event--right {
justify-self: stretch;
width: 100%;
padding-right: 0;
padding-left: 4.4rem;
text-align: left;
}
.public-history__event::before, .public-history__event::after, .public-history__event--left::before, .public-history__event--left::after, .public-history__event--right::before, .public-history__event--right::after {
right: auto;
left: calc(var(--gutter) - 0.5rem);
}
.public-history__event--left .public-history__item {
justify-content: flex-start;
}
.public-history__event--left .public-history__item::before {
order: 0;
}
.public-history__event--left .public-history__item-text {
text-align: left;
}
.public-history__outro {
margin-top: 15rem;
}
.public-history__outro-title {
white-space: normal;
}
}
@media (max-width: 544px) {
.public-history__lead {
margin-top: 3.6rem;
}
.public-history__list {
gap: 8rem;
padding-top: 18rem;
}
.public-history__event-copy {
gap: 2.2rem;
}
.public-history__items {
gap: 1.4rem;
}
.public-history__outro-text {
margin-top: 4rem;
}
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
.public-history__outro-title {
color: transparent;
background: linear-gradient(90deg, var(--public-white) 0%, var(--public-white) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 100%);
background-position: var(--history-outro-fill) 50%;
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
will-change: background-position;
}
}
@keyframes public-history-ripple {
0% {
opacity: 0.72;
transform: scale(1);
}
62% {
opacity: 0.14;
transform: scale(5.2);
}
100% {
opacity: 0;
transform: scale(6.2);
}
}
.public-location {
display: block;
background: var(--public-white);
}
.public-location a {
color: inherit;
text-decoration: none;
}
.public-location__top-offset.no-pd-5xl--t {
padding-top: var(--public-location-top-gap);
}
.public-location__inner {
display: grid;
gap: var(--public-space-2xl);
}
.public-location__intro {
display: grid;
justify-items: center;
max-width: 76rem;
margin-inline: auto;
text-align: center;
}
.public-location__eyebrow {
margin: 0;
color: var(--public-blue);
}
.public-location__title {
margin: var(--public-space-md) 0 0;
color: var(--public-navy);
}
.public-location__information {
display: grid;
grid-template-columns: minmax(28rem, 1.25fr) minmax(40rem, 1fr);
align-items: stretch;
border-top: 1px solid var(--public-line-strong);
border-bottom: 1px solid var(--public-line);
}
.public-location__address, .public-location__contacts, .public-location__map-links {
padding: var(--public-space-xl) var(--public-space-2xl);
}
.public-location__address {
padding-left: 0;
}
.public-location__information-label, .public-location__contacts dt {
color: var(--public-muted);
}
.public-location__address-primary {
margin: var(--public-space-md) 0 0;
color: var(--public-ink);
}
.public-location__address-detail {
margin: var(--public-space-xs) 0 0;
color: var(--public-muted);
}
.public-location__contacts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--public-space-xl);
margin: 0;
border-left: 1px solid var(--public-line);
}
.public-location__contacts dd {
margin: var(--public-space-md) 0 0;
color: var(--public-ink);
overflow-wrap: anywhere;
}
.public-location__map {
height: clamp(36rem, 10.355987055vw + 32.1165048544rem, 52rem);
min-height: 0;
overflow: hidden;
background: var(--public-surface);
}
.public-location__canvas, .public-location__map-status {
width: 100%;
height: 100%;
}
.public-location__map-status {
display: flex;
align-items: center;
justify-content: center;
color: var(--public-muted);
}
.public-location__map .store-map-pin {
position: relative;
top: auto;
left: auto;
display: block;
overflow: visible;
color: inherit;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
font-size: inherit;
font-weight: inherit;
pointer-events: none;
transform-origin: center bottom;
}
.public-location__map .store-map-pin__art {
position: relative;
top: auto;
left: auto;
display: block;
width: 100%;
height: 100%;
color: inherit;
background: transparent;
border: 0;
border-radius: 0;
font-size: inherit;
font-weight: inherit;
transform-origin: center bottom;
}
.public-location__map .store-map-pin__image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
filter: none;
}
.public-location__map .store-map-pin {
max-width: 15.2rem;
max-height: 7.5rem;
}
.public-location__map-links {
grid-column: 1/-1;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--public-space-md);
padding-left: 0;
padding-right: 0;
border-top: 1px solid var(--public-line);
}
.public-location__gallery {
display: grid;
gap: var(--public-space-md);
}
.public-location__gallery-heading {
display: grid;
max-width: 68rem;
}
.public-location__gallery-title {
margin: var(--public-space-xs) 0 0;
color: var(--public-navy);
}
.public-location__gallery-description {
margin: var(--public-space-xs) 0 0;
color: var(--public-muted);
}
.public-location__gallery-frame {
position: relative;
overflow: hidden;
background: var(--public-surface);
}
.public-location__gallery-stage {
width: 100%;
aspect-ratio: 1288/659;
}
.public-location__gallery-list {
height: 100%;
}
.public-location__gallery-slide {
height: 100%;
margin: 0;
background: var(--public-surface);
}
.public-location__gallery-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.public-location__gallery-control {
position: absolute;
top: 50%;
z-index: 2;
color: var(--public-white);
background: var(--public-navy-deep);
border-color: transparent;
transform: translateY(-50%);
}
.public-location__gallery-control:hover, .public-location__gallery-control:focus-visible {
color: var(--public-white);
background: var(--public-blue);
border-color: transparent;
}
.public-location__gallery-control[data-location-gallery-prev] {
left: var(--public-space-md);
}
.public-location__gallery-control[data-location-gallery-next] {
right: var(--public-space-md);
}
.public-location__gallery-count {
position: absolute;
right: var(--public-space-md);
bottom: var(--public-space-md);
z-index: 2;
display: flex;
gap: var(--public-space-2xs);
margin: 0;
padding: var(--public-space-2xs) var(--public-space-xs);
color: var(--public-white);
background: var(--public-navy-deep);
}
.public-location__gallery-thumbnails {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: var(--public-space-2xs);
}
.public-location__gallery-thumbnail {
display: block;
min-width: 0;
padding: 0;
overflow: hidden;
cursor: pointer;
background: var(--public-surface);
border: var(--public-focus-width) solid transparent;
opacity: 0.55;
transition: border-color var(--public-duration) var(--public-ease), opacity var(--public-duration) var(--public-ease);
}
.public-location__gallery-thumbnail:hover, .public-location__gallery-thumbnail:focus-visible, .public-location__gallery-thumbnail[aria-current=true] {
border-color: var(--public-blue);
opacity: 1;
}
.public-location__gallery-thumbnail:focus-visible {
outline: var(--public-focus-width) solid var(--public-focus);
outline-offset: var(--public-focus-offset);
}
.public-location__gallery-thumbnail img {
display: block;
width: 100%;
aspect-ratio: 1288/659;
object-fit: cover;
}
.public-location__transit h2 {
margin: 0;
}
.public-location__transit-table {
margin-top: var(--public-space-xl);
border-top: 1px solid var(--public-line-strong);
}
.public-location__transit-row {
display: grid;
grid-template-columns: 18rem 1fr;
min-height: 5.8rem;
border-bottom: 1px solid var(--public-line);
}
.public-location__transit-label {
display: flex;
align-items: center;
gap: var(--public-space-xs);
padding: 0 var(--public-space-lg);
border-right: 1px solid var(--public-line);
}
.public-location__transit-label i {
flex: 0 0 auto;
width: 1.4rem;
color: var(--public-blue);
text-align: center;
}
.public-location__transit-copy {
display: flex;
align-items: center;
margin: 0;
padding: 0 var(--public-space-xl);
color: var(--public-muted);
}
.public-location__transit-routes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-xs) var(--public-space-xl);
margin: 0;
padding: var(--public-space-md) var(--public-space-xl);
list-style: none;
}
.public-location__transit-route {
display: flex;
align-items: flex-start;
gap: var(--public-space-2xs);
min-width: 0;
}
.public-location__transit-markers {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 0.4rem;
min-width: 0.8rem;
padding-top: 0.6rem;
}
.public-location__transit-marker {
display: block;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
}
.public-location__transit-marker--subway-1 {
background: var(--public-transit-subway-1);
}
.public-location__transit-marker--subway-2 {
background: var(--public-transit-subway-2);
}
.public-location__transit-marker--bus-trunk {
background: var(--public-transit-bus-trunk);
}
.public-location__transit-marker--bus-feeder {
background: var(--public-transit-bus-feeder);
}
.public-location__transit-marker--bus-express {
background: var(--public-transit-bus-express);
}
.public-location__transit-route-copy {
display: grid;
gap: 0.2rem;
min-width: 0;
color: var(--public-ink);
}
.public-location__transit-route-copy > span {
color: var(--public-muted);
}
@media (max-width: 1199px) {
.public-location__information {
grid-template-columns: minmax(0, 1fr) minmax(38rem, 1fr);
}
.public-location__map-links {
justify-content: flex-end;
}
}
@media (max-width: 767px) {
.public-location__inner {
gap: var(--public-space-xl);
}
.public-location__title {
white-space: nowrap;
}
.public-location__information {
grid-template-columns: 1fr;
}
.public-location__address, .public-location__contacts, .public-location__map-links {
padding: var(--public-space-lg) 0;
}
.public-location__contacts {
grid-template-columns: 1fr;
border-top: 1px solid var(--public-line);
border-left: 0;
}
.public-location__map-links {
grid-column: auto;
justify-content: flex-start;
border-top: 1px solid var(--public-line);
}
.public-location__gallery-heading {
max-width: none;
}
.public-location__gallery-control[data-location-gallery-prev] {
left: var(--public-space-xs);
}
.public-location__gallery-control[data-location-gallery-next] {
right: var(--public-space-xs);
}
.public-location__gallery-count {
right: var(--public-space-xs);
bottom: var(--public-space-xs);
}
.public-location__gallery-thumbnails {
display: flex;
gap: var(--public-space-2xs);
padding-bottom: var(--public-space-2xs);
overflow-x: auto;
scroll-snap-type: x proximity;
}
.public-location__gallery-thumbnail {
flex: 0 0 9.6rem;
scroll-snap-align: start;
}
.public-location__transit-row {
grid-template-columns: 1fr;
}
.public-location__transit-label {
min-height: 5rem;
border-right: 0;
}
.public-location__transit-copy {
display: block;
padding: var(--public-space-md) var(--public-space-lg);
}
.public-location__transit-routes {
grid-template-columns: 1fr;
padding: var(--public-space-md) var(--public-space-lg);
}
}
.public-recruit {
height: 196.4rem;
color: var(--public-ink);
background: var(--public-white);
}
.public-recruit__people {
height: 78rem;
background: #f4f9fb;
}
.public-recruit__eyebrow {
margin: 0;
color: #2889b5;
}
.public-recruit__people h2, .public-recruit__selection-copy h2 {
margin: 3.2rem 0 0;
}
.public-recruit__lead {
margin: 3.2rem 0 0;
color: #5a646b;
}
.public-recruit__values {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
margin-top: 7.6rem;
}
.public-recruit__values article {
padding-top: 3rem;
border-top: 1px solid #cbd6db;
}
.public-recruit__values article > p, .public-recruit__steps li p {
margin: 0;
color: #2889b5;
}
.public-recruit__values h3 {
margin: 1.8rem 0 0;
}
.public-recruit__values span {
display: block;
margin-top: 2.1rem;
color: #5c666d;
}
.public-recruit__selection {
height: 118.4rem;
}
.public-recruit__selection-inner {
display: grid;
grid-template-columns: 48rem 1fr;
gap: 9.6rem;
}
.public-recruit__selection-copy > p:last-child {
margin: 3.5rem 0 0;
color: #5c666d;
}
.public-recruit__selection-content {
width: 74.4rem;
}
.public-recruit__steps {
position: relative;
height: 51rem;
margin: 0;
padding: 6.8rem 7.5rem 5rem 8rem;
background: #f7f7f7;
border-radius: 1rem;
list-style: none;
}
.public-recruit__steps li {
position: relative;
display: grid;
grid-template-columns: var(--recruit-step-marker) 1fr;
gap: 3.8rem;
}
.public-recruit__steps li:first-child::after {
position: absolute;
z-index: 0;
top: calc(var(--recruit-step-marker) / 2);
bottom: calc((var(--recruit-step-gap) + var(--recruit-step-marker) / 2) * -1);
left: calc(var(--recruit-step-marker) / 2);
width: 1px;
background: #ced4d8;
content: "";
pointer-events: none;
}
.public-recruit__steps li + li {
margin-top: var(--recruit-step-gap);
}
.public-recruit__steps li > b {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: var(--recruit-step-marker);
height: var(--recruit-step-marker);
color: #fff;
background: #2889b5;
border-radius: 50%;
font-size: var(--subtitle-fs);
}
.public-recruit__steps li h3 {
margin: 1.4rem 0 0;
}
.public-recruit__steps li span {
display: block;
margin-top: 2rem;
color: #5c666d;
}
.public-recruit__apply {
position: relative;
display: block;
min-height: 36.5rem;
margin-top: 2.5rem;
padding: 5rem 7.5rem;
color: inherit;
border: 1px solid #d7dcdf;
border-radius: 1rem;
text-decoration: none;
}
.public-recruit__apply > span {
color: #697278;
}
.public-recruit__apply h3 {
margin: 1.8rem 0 0;
}
.public-recruit__apply p {
margin: 2.5rem 0 0;
color: #5c666d;
}
.public-recruit__apply i {
display: block;
height: 1px;
margin: 3rem 0 2.5rem;
background: #d7dcdf;
}
.public-recruit__apply strong {
display: block;
margin-top: 0.8rem;
color: #2889b5;
}
.public-recruit__apply b {
position: absolute;
right: 7.5rem;
bottom: 5rem;
color: #2889b5;
}
@media (max-width: 1279px) and (min-width: 768px) {
.public-recruit .public-recruit__selection.no-section-lg {
height: auto;
padding-top: 7.6rem;
padding-bottom: 4rem;
}
.public-recruit .public-recruit__selection .public-recruit__selection-inner {
grid-template-columns: minmax(28rem, 30rem) minmax(0, 56.2rem);
gap: 13.2rem;
align-items: start;
}
.public-recruit__selection-copy > p:last-child {
margin-top: 2.8rem;
}
.public-recruit__selection-content {
width: 100%;
}
.public-recruit__steps {
height: auto;
min-height: 41.3rem;
padding: 5.4rem 6.2rem 4.8rem 4.2rem;
border-radius: 0.8rem;
}
.public-recruit__steps li {
gap: 3.4rem;
}
.public-recruit__steps li h3 {
margin-top: 1.2rem;
}
.public-recruit__steps li span {
margin-top: 1.6rem;
}
.public-recruit__apply {
min-height: 28.1rem;
margin-top: 1.8rem;
padding: 3rem 6rem 2.4rem;
border-radius: 0.8rem;
}
.public-recruit__apply h3 {
margin-top: 1rem;
}
.public-recruit__apply p {
margin-top: 1.2rem;
}
.public-recruit__apply i {
margin: 1.2rem 0;
}
.public-recruit__apply b {
right: 6rem;
bottom: 2.4rem;
}
}
@media (max-width: 767px) {
.public-recruit {
height: auto;
}
.public-recruit__people {
height: auto;
}
.public-recruit__values {
grid-template-columns: 1fr;
gap: 4rem;
margin-top: 6rem;
}
.public-recruit__values br {
display: none;
}
.public-recruit__selection {
height: auto;
}
.public-recruit__selection-inner {
display: block;
}
.public-recruit__selection-copy br {
display: none;
}
.public-recruit__selection-content {
width: 100%;
margin-top: 5rem;
}
.public-recruit__steps {
height: auto;
padding: 4rem 2.5rem;
}
.public-recruit__steps li {
gap: 2rem;
}
.public-recruit__steps li span br {
display: none;
}
.public-recruit__apply {
min-height: 0;
padding: 4rem 2.5rem;
}
.public-recruit__apply p br {
display: none;
}
.public-recruit__apply b {
right: 2.5rem;
bottom: 4rem;
}
}
.public-practice-directory {
padding-top: var(--public-header-height);
color: var(--public-ink);
background: var(--public-white);
}
.public-practice-directory__hero {
display: grid;
place-items: center;
align-content: center;
min-height: 18rem;
gap: var(--public-space-lg);
color: var(--public-white);
background: var(--public-navy-deep);
}
.public-practice-directory__hero h1 {
margin: 0;
color: inherit;
}
.public-practice-directory__body {
background: var(--public-white);
}
.public-practice-directory__tabs {
gap: var(--public-space-xs);
background: var(--public-white);
}
.public-practice-directory__results-head {
display: flex;
align-items: end;
justify-content: space-between;
border-bottom: 1px solid var(--public-line);
}
.public-practice-directory__results-head h2, .public-practice-directory__results-head span {
margin: 0;
}
.public-practice-directory__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--public-space-sm);
}
.public-practice-directory.is-treatment-directory-loading {
cursor: progress;
}
@media (max-width: 767px) {
.public-practice-directory__hero {
gap: var(--public-space-md);
padding-inline: var(--public-shell-gutter);
}
html body .public-practice-directory__categories.no-container-xl {
padding-inline: 0;
}
.public-practice-directory__tabs.public-filter-tabs--wrap:not(.public-filter-tabs--static) {
min-width: 0;
flex-wrap: nowrap;
column-gap: calc(var(--public-space-2xs) * 0.5);
row-gap: 0;
padding-block: var(--public-space-sm);
padding-inline: var(--public-shell-gutter);
overflow-x: auto;
overflow-y: hidden;
scroll-padding-inline: var(--public-shell-gutter);
scroll-snap-type: x proximity;
touch-action: pan-x;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.public-practice-directory__tabs.public-filter-tabs--wrap:not(.public-filter-tabs--static)::-webkit-scrollbar {
display: none;
}
.public-practice-directory__tabs.public-filter-tabs--wrap:not(.public-filter-tabs--static) a {
flex: 0 0 auto;
scroll-snap-align: start;
padding-inline: var(--public-space-xs);
}
.public-practice-directory__tabs.public-filter-tabs--wrap.public-filter-tabs--static {
min-width: 0;
flex-wrap: wrap;
justify-content: flex-start;
padding-block: var(--public-space-sm);
padding-inline: var(--public-shell-gutter);
overflow: visible;
touch-action: auto;
}
.public-practice-directory__list {
grid-template-columns: minmax(0, 1fr);
gap: var(--public-space-sm);
}
}
.public-practice-page ~ .public-footer.site-footer {
background: var(--public-navy-deep);
}
.public-practice-page ~ .no-floating-cta .no-floating-cta__btn--tel, .public-practice-page ~ .no-floating-cta .no-floating-cta__btn--naverblog, .public-practice-page ~ .no-floating-cta .no-floating-cta__btn--top {
display: none;
}
.public-practice-page ~ .no-floating-cta .no-floating-cta__btn--instagram {
order: 1;
}
.public-practice-page ~ .no-floating-cta .no-floating-cta__btn--youtube {
order: 2;
}
.public-practice-page ~ .no-floating-cta .no-floating-cta__btn--kakao {
order: 3;
}
@media (max-width: 767px) {
.public-practice-page ~ .no-floating-cta {
display: none;
}
}
.public-practice-detail-page {
position: relative;
display: grid;
grid-template-columns: 14rem minmax(0, 1fr) 14rem;
grid-template-rows: auto auto;
margin-top: var(--public-header-height);
padding-bottom: 0;
background: var(--public-white);
}
.public-practice-detail-page__top {
display: contents;
}
.public-practice-detail-page__back {
grid-column: 1;
grid-row: 1;
align-self: start;
}
.public-practice-detail-page__heading {
grid-column: 2;
grid-row: 1;
text-align: center;
}
.public-practice-detail-page__heading h1 {
margin: 0;
}
.public-practice-detail-page__index {
position: sticky;
top: calc(var(--public-header-height) + var(--public-space-xl));
grid-column: 3;
grid-row: 1/3;
align-self: start;
justify-self: end;
z-index: 2;
width: 14rem;
height: max-content;
transform: translateX(calc(100% + var(--public-space-xl)));
}
.public-practice-detail-page--structured {
display: block;
margin-top: var(--public-header-height);
padding: 0;
color: var(--public-ink);
background: var(--public-white);
}
.public-practice-detail-page--structured .public-practice-detail-page__hero {
padding-block: var(--section-sm);
color: var(--public-white);
background: var(--public-navy-deep);
text-align: center;
}
.public-practice-detail-page--structured .public-practice-detail-page__hero-inner {
display: grid;
justify-items: center;
gap: var(--public-space-md);
}
.public-practice-detail-page--structured .public-practice-detail-page__hero h1,
.public-practice-detail-page--structured .public-practice-detail-page__hero p {
margin: 0;
}
.public-practice-detail-page--structured .public-practice-detail-page__hero p {
max-width: var(--public-detail-max);
color: color-mix(in srgb, var(--public-white) 74%, transparent);
}
.public-practice-detail-page--structured .public-practice-detail-page__breadcrumbs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--public-space-xs);
color: color-mix(in srgb, var(--public-white) 66%, transparent);
}
.public-practice-detail-page--structured .public-practice-detail-page__breadcrumbs a {
color: inherit;
}
.public-practice-detail-page--structured .public-practice-detail-page__visual {
margin-block: var(--section-xs);
overflow: hidden;
aspect-ratio: 16/7;
border-radius: var(--public-radius-md);
}
.public-practice-detail-page--structured .public-practice-detail-page__visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.public-practice-detail-page__content {
grid-column: 1/-1;
grid-row: 2;
width: 100%;
}
.public-practice-detail-page__media {
width: 100%;
height: auto;
aspect-ratio: 16/7;
overflow: hidden;
border-radius: var(--public-radius-md);
}
.public-practice-detail-page__intro {
box-sizing: border-box;
border-bottom: 1px solid var(--public-line);
}
.public-practice-detail-page__intro p {
max-width: var(--public-detail-max);
margin: 0;
color: var(--public-muted);
}
.public-practice-detail-page__services {
border-bottom: 1px solid var(--public-line);
}
.public-practice-detail-page__services h2 {
margin: 0;
}
.public-practice-detail-page__services ol {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-sm);
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding: 0;
align-content: start;
list-style: none;
}
.public-practice-detail-page__services li {
display: flex;
align-items: center;
min-height: var(--public-card-row);
padding: 0 var(--public-space-lg);
background: var(--public-surface-subtle);
}
.public-practice-detail-page__services li span {
color: var(--public-muted-soft);
}
.public-practice-detail-page__services li p {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}
@media (max-width: 767px) {
.public-practice-detail-page--structured .public-practice-detail-page__hero {
padding-block: var(--section-xs);
}
.public-practice-detail-page--structured .public-practice-detail-page__visual {
margin-inline: var(--public-space-md);
aspect-ratio: 4/3;
}
.public-practice-detail-page {
display: block;
min-height: 0;
margin-top: var(--public-header-height);
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.public-practice-detail-page__top {
display: block;
width: calc(100% - var(--public-space-md) * 2);
min-height: 0;
margin-inline: auto;
}
.public-practice-detail-page__back {
position: static;
}
.public-practice-detail-page__heading {
margin-top: var(--public-space-3xl);
}
.public-practice-detail-page__index {
position: sticky;
top: calc(var(--public-header-height) + var(--public-space-xs));
right: auto;
z-index: 2;
width: calc(100% - var(--public-space-md) * 2);
margin-top: var(--public-space-xl);
margin-inline: auto;
overflow-x: auto;
background: var(--public-white);
transform: none;
}
.public-practice-detail-page__content {
width: calc(100% - var(--public-space-md) * 2);
margin-inline: auto;
}
.public-practice-detail-page__media {
height: auto;
aspect-ratio: 16/9;
border-radius: var(--public-radius-sm);
}
.public-practice-detail-page__intro {
min-height: 0;
}
.public-practice-detail-page__services {
min-height: 0;
}
.public-practice-detail-page__services ol {
grid-template-columns: 1fr;
min-height: 0;
}
}
@media (max-width: 1699px) and (min-width: 768px) {
.public-practice-detail-page {
grid-template-rows: auto auto auto;
}
.public-practice-detail-page__index {
position: sticky;
top: calc(var(--public-header-height) + var(--public-space-xs));
grid-column: 1/-1;
grid-row: 2;
justify-self: stretch;
width: 100%;
margin-top: var(--public-space-xl);
overflow-x: auto;
background: var(--public-white);
transform: none;
}
.public-practice-detail-page__index .public-section-index {
display: flex;
gap: var(--public-space-xs);
min-width: max-content;
padding: var(--public-space-2xs) 0;
}
.public-practice-detail-page__index .public-section-index::before, .public-practice-detail-page__index .public-section-index__dot {
display: none;
}
.public-practice-detail-page__index .public-section-index__item {
min-height: var(--public-control-sm);
padding: 0 var(--public-space-sm);
align-items: center;
border: 1px solid var(--public-line);
border-radius: var(--public-radius-pill);
}
.public-practice-detail-page__index .public-section-index__item.is-active {
color: var(--public-white);
background: var(--public-blue);
border-color: var(--public-blue);
}
.public-practice-detail-page__content {
grid-row: 3;
}
}
.public-treatment-section {
padding-block: var(--section-sm);
border-bottom: 1px solid var(--public-line);
scroll-margin-top: calc(var(--public-header-height) + var(--public-space-lg));
}
.public-treatment-section__title {
margin: 0 0 var(--public-space-2xl);
text-align: center;
}
.public-treatment-section__prose {
max-width: var(--public-detail-max);
margin-inline: auto;
color: var(--public-muted);
line-height: 1.9;
text-align: center;
}
.public-treatment-section__prose > :first-child {
margin-top: 0;
}
.public-treatment-section__prose > :last-child {
margin-bottom: 0;
}
.public-treatment-section--list#treatment-section-concerns {
background: var(--public-white);
}
.public-treatment-section--products {
background: var(--public-white);
}
.public-treatment-section--videos {
color: var(--public-white);
background: var(--public-navy-deep);
border-bottom: 0;
}
@media (max-width: 767px) {
.public-treatment-section {
padding-block: var(--section-xs);
}
}
.public-treatment-actions {
border-bottom: 1px solid var(--public-line);
background: var(--public-white);
}
.public-treatment-actions__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--public-space-xl);
padding-block: var(--section-sm);
text-align: center;
}
.public-treatment-actions__copy {
display: grid;
justify-items: center;
gap: var(--public-space-xs);
max-width: var(--public-detail-max);
}
.public-treatment-actions__copy > span {
color: var(--public-muted);
}
.public-treatment-actions__buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--public-space-sm);
}
.public-treatment-actions__button.public-button {
white-space: nowrap;
}
.public-treatment-actions__button--cart.public-button {
color: var(--public-white);
background: var(--public-ink);
border-color: var(--public-ink);
}
.public-treatment-actions__button--cart.public-button:hover, .public-treatment-actions__button--cart.public-button:focus-visible {
color: var(--public-white);
background: var(--public-ink);
border-color: var(--public-ink);
}
@media (max-width: 767px) {
.public-treatment-actions__inner {
display: grid;
align-items: stretch;
}
.public-treatment-actions__copy {
min-width: 0;
}
.public-treatment-actions__buttons {
display: grid;
grid-template-columns: 1fr;
}
.public-treatment-actions__button.public-button {
width: 100%;
}
}
.public-treatment-videos__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--public-space-xl);
margin-bottom: var(--public-space-2xl);
}
.public-treatment-videos__eyebrow {
display: block;
margin-bottom: var(--public-space-sm);
color: color-mix(in srgb, var(--public-white) 62%, transparent);
letter-spacing: 0.12em;
}
.public-treatment-videos__head .public-treatment-section__title {
margin: 0;
text-align: left;
}
.public-treatment-videos__controls {
display: flex;
gap: var(--public-space-sm);
}
.public-treatment-videos__nav {
display: inline-grid;
place-items: center;
width: var(--public-space-3xl);
height: var(--public-space-3xl);
color: var(--public-white);
background: transparent;
border: 1px solid color-mix(in srgb, var(--public-white) 36%, transparent);
border-radius: 50%;
cursor: pointer;
transition: color var(--public-duration) var(--public-ease), background-color var(--public-duration) var(--public-ease), border-color var(--public-duration) var(--public-ease);
}
.public-treatment-videos__nav:hover, .public-treatment-videos__nav:focus-visible {
color: var(--public-navy-deep);
background: var(--public-white);
border-color: var(--public-white);
}
.public-treatment-videos__stage {
overflow: hidden;
}
.public-treatment-videos__slide {
height: auto;
}
.public-treatment-videos__embed {
overflow: hidden;
aspect-ratio: 16/9;
border-radius: var(--public-radius-md);
background: var(--public-ink);
}
.public-treatment-videos__embed iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.public-treatment-videos__slide h3 {
margin: var(--public-space-lg) 0 0;
}
.public-treatment-videos__slide p {
margin: var(--public-space-sm) 0 0;
color: color-mix(in srgb, var(--public-white) 68%, transparent);
}
.public-treatment-videos__pagination {
display: flex;
justify-content: center;
gap: var(--public-space-xs);
margin-top: var(--public-space-xl);
}
.public-treatment-videos__pagination .swiper-pagination-bullet {
width: var(--public-space-sm);
height: var(--public-space-sm);
margin: 0;
background: color-mix(in srgb, var(--public-white) 42%, transparent);
opacity: 1;
}
.public-treatment-videos__pagination .swiper-pagination-bullet-active {
background: var(--public-white);
}
@media (max-width: 767px) {
.public-treatment-videos__head {
align-items: flex-start;
}
.public-treatment-videos__controls {
flex: 0 0 auto;
}
}
.public-treatment-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-md);
max-width: var(--public-detail-max);
margin: 0 auto;
padding: 0;
list-style: none;
}
.public-treatment-list li {
display: flex;
align-items: flex-start;
gap: var(--public-space-sm);
padding: var(--public-space-lg);
border: 1px solid var(--public-line);
border-radius: 0;
background: var(--public-white);
}
.public-treatment-list li > span {
flex: 0 0 auto;
color: var(--public-ink);
}
@media (max-width: 767px) {
.public-treatment-list {
grid-template-columns: 1fr;
}
}
.public-treatment-facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--public-space-md);
max-width: var(--public-detail-max);
margin: 0 auto;
}
.public-treatment-facts__item {
padding: var(--public-space-xl) var(--public-space-md);
border: 1px solid var(--public-line);
border-radius: 0;
background: var(--public-white);
text-align: center;
}
.public-treatment-facts dt {
color: var(--public-muted-soft);
}
.public-treatment-facts dd {
margin: var(--public-space-xs) 0 0;
}
@media (max-width: 767px) {
.public-treatment-facts {
grid-template-columns: 1fr;
}
}
.public-treatment-faq {
max-width: var(--public-detail-max);
margin: 0 auto;
border-top: 1px solid var(--public-line);
}
.public-treatment-faq__item {
border-bottom: 1px solid var(--public-line);
}
.public-treatment-faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-lg);
padding-block: var(--public-space-lg);
cursor: pointer;
list-style: none;
}
.public-treatment-faq summary::-webkit-details-marker {
display: none;
}
.public-treatment-faq summary > span::before {
content: "+";
}
.public-treatment-faq details[open] summary > span::before {
content: "−";
}
.public-treatment-faq__answer {
padding: 0 var(--public-space-xl) var(--public-space-xl);
color: var(--public-muted);
line-height: 1.8;
}
.public-treatment-products {
display: grid;
gap: var(--public-space-md);
max-width: var(--public-detail-max);
margin: 0 auto;
}
.public-treatment-products > .public-treatment-card {
background: var(--public-white);
border: 1px solid var(--public-line);
}
.public-treatment-products .public-treatment-card__badge {
background: var(--public-ink);
}
.public-treatment-products .public-treatment-card__discount {
color: var(--public-ink);
}
.public-treatment-products__empty {
margin: 0;
text-align: center;
}
.public-treatment-related {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-md);
margin: 0;
padding: 0;
list-style: none;
}
.public-treatment-related a {
display: grid;
gap: var(--public-space-sm);
height: 100%;
padding: var(--public-space-xl);
border: 1px solid var(--public-line);
border-radius: var(--public-radius-md);
color: inherit;
text-decoration: none;
}
.public-treatment-related span {
color: var(--public-muted);
}
@media (max-width: 767px) {
.public-treatment-related {
grid-template-columns: 1fr;
}
}
.public-section-index {
position: relative;
display: grid;
gap: var(--public-space-2xl);
}
.public-section-index::before {
position: absolute;
top: var(--public-space-2xs);
bottom: var(--public-space-2xs);
left: 0.7rem;
width: 1px;
background: var(--public-line);
content: "";
}
.public-section-index__item {
position: relative;
display: flex;
align-items: flex-start;
min-height: var(--public-space-sm);
padding: 0 0 0 3.5rem;
color: var(--public-muted-soft);
background: transparent;
border: 0;
text-align: left;
transition: color var(--public-duration) var(--public-ease);
}
.public-section-index__dot {
position: absolute;
top: 0.2rem;
left: 0.2rem;
width: 1.1rem;
height: 1.1rem;
background: var(--public-white);
border: 1px solid var(--public-line);
border-radius: 50%;
transition: background-color var(--public-duration) var(--public-ease), border-color var(--public-duration) var(--public-ease), transform var(--public-duration) var(--public-ease);
}
.public-section-index__item:hover, .public-section-index__item:focus-visible, .public-section-index__item.is-active {
color: var(--public-blue);
}
.public-section-index__item.is-active .public-section-index__dot {
background: var(--public-blue);
border-color: var(--public-blue);
transform: scale(1.05);
}
.public-section-index__label {
position: relative;
z-index: 1;
}
@media (max-width: 767px) {
.public-section-index {
display: flex;
gap: var(--public-space-xs);
min-width: max-content;
padding: var(--public-space-2xs) 0;
}
.public-section-index::before, .public-section-index__dot {
display: none;
}
.public-section-index__item {
min-height: var(--public-control-sm);
padding: 0 var(--public-space-sm);
align-items: center;
border: 1px solid var(--public-line);
border-radius: var(--public-radius-pill);
}
.public-section-index__item.is-active {
color: var(--public-white);
background: var(--public-blue);
border-color: var(--public-blue);
}
}
.public-related-professionals > h2 {
margin: 0;
}
.public-related-professionals__swiper {
padding-bottom: calc(var(--public-space-2xl) + var(--public-space-2xs));
}
.public-related-professionals__slide {
height: auto;
}
.public-related-professionals__slide .public-professional-card {
height: 100%;
}
.public-related-professionals .public-professional-card__photo img, .public-related-professionals .public-professional-card__fallback {
transition: transform var(--public-duration) var(--public-ease);
}
.public-related-professionals .public-professional-card__link:hover .public-professional-card__photo img, .public-related-professionals .public-professional-card__link:focus-visible .public-professional-card__photo img, .public-related-professionals .public-professional-card__link:hover .public-professional-card__fallback, .public-related-professionals .public-professional-card__link:focus-visible .public-professional-card__fallback {
transform: scale(1.04);
}
.public-related-professionals .public-professional-card__link:focus-visible {
outline: 2px solid var(--public-focus);
outline-offset: 0.4rem;
}
.public-related-professionals__scrollbar.swiper-scrollbar {
bottom: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 0.4rem;
background: var(--public-surface);
border: 1px solid var(--public-line);
border-radius: var(--public-radius-pill);
}
.public-related-professionals__scrollbar .swiper-scrollbar-drag {
min-width: var(--public-space-3xl);
background: var(--public-navy);
border-radius: var(--public-radius-pill);
cursor: grab;
transition: background-color var(--public-duration) var(--public-ease);
}
.public-related-professionals__scrollbar .swiper-scrollbar-drag:hover {
background: color-mix(in srgb, var(--public-navy) 82%, var(--public-muted));
}
.public-related-professionals__scrollbar .swiper-scrollbar-drag:active {
cursor: grabbing;
}
@media (max-width: 767px) {
.public-related-professionals__swiper {
padding-bottom: calc(var(--public-space-2xl) + var(--public-space-2xs));
}
}
@media (prefers-reduced-motion: reduce) {
.public-related-professionals .public-professional-card__photo img, .public-related-professionals .public-professional-card__fallback, .public-related-professionals__scrollbar .swiper-scrollbar-drag {
transition: none;
}
.public-related-professionals .public-professional-card__link:hover .public-professional-card__photo img, .public-related-professionals .public-professional-card__link:focus-visible .public-professional-card__photo img, .public-related-professionals .public-professional-card__link:hover .public-professional-card__fallback, .public-related-professionals .public-professional-card__link:focus-visible .public-professional-card__fallback {
transform: none;
}
}
.public-related-content {
border-top: 1px solid var(--public-line);
color: var(--public-ink);
background: var(--public-surface-subtle);
}
.public-related-content__group + .public-related-content__group {
margin-top: var(--section-sm);
}
.public-related-content__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--public-space-2xl);
padding-bottom: var(--public-space-lg);
border-bottom: 1px solid var(--public-line);
}
.public-related-content__head h2 {
margin: 0;
}
.public-related-content__insight-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
padding: 1px;
background: var(--public-line);
}
.public-related-content__insight-grid .public-insight-card--featured {
min-height: 28rem;
padding: 0;
outline: 1px solid transparent;
outline-offset: -1px;
transition: background-color var(--public-duration) var(--public-ease), outline-color var(--public-duration) var(--public-ease);
}
.public-related-content .public-insight-card__surface {
box-sizing: border-box;
height: 100%;
color: inherit;
text-decoration: none;
}
.public-related-content__insight-grid .public-insight-card__surface {
position: relative;
display: block;
min-height: inherit;
padding: var(--public-space-xl);
}
.public-related-content__insight-grid .public-insight-card--featured:hover, .public-related-content__insight-grid .public-insight-card--featured:focus-within {
z-index: 1;
background: color-mix(in srgb, var(--public-navy) 3%, var(--public-white));
outline-color: color-mix(in srgb, var(--public-navy) 38%, var(--public-line));
}
.public-related-content .public-insight-card__title {
transition: color var(--public-duration) var(--public-ease);
}
.public-related-content .public-insight-card__surface:hover .public-insight-card__title, .public-related-content .public-insight-card__surface:focus-visible .public-insight-card__title {
color: var(--public-blue);
}
.public-related-content .public-insight-card__surface:focus-visible {
outline: 0;
}
.public-related-content__event-list {
border-bottom: 1px solid var(--public-line);
}
.public-related-content__event-list .public-insight-card--event {
display: block;
min-height: 11.6rem;
padding: 0;
background: var(--public-white);
border-color: var(--public-line);
outline: 1px solid transparent;
outline-offset: -1px;
transition: background-color var(--public-duration) var(--public-ease), outline-color var(--public-duration) var(--public-ease);
}
.public-related-content__event-list .public-insight-card--event:hover, .public-related-content__event-list .public-insight-card--event:focus-within {
background: color-mix(in srgb, var(--public-navy) 3%, var(--public-white));
outline-color: color-mix(in srgb, var(--public-navy) 38%, var(--public-line));
}
.public-related-content__event-list .public-insight-card__surface {
display: grid;
grid-template-areas: "title excerpt date";
grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.8fr) auto;
align-items: center;
gap: var(--public-space-lg);
min-height: inherit;
padding-inline: var(--public-space-lg);
padding-block: var(--public-space-md);
}
.public-related-content__event-list .public-insight-card__title {
grid-area: title;
}
.public-related-content__event-list .public-insight-card__excerpt {
grid-area: excerpt;
}
.public-related-content__event-list .public-insight-card__meta {
grid-area: date;
display: flex;
justify-content: flex-end;
}
.public-related-content__event-list .public-insight-card--event .public-insight-card__meta time {
color: var(--public-muted);
}
@media (max-width: 1023px) {
.public-related-content__insight-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.public-related-content__insight-grid .public-insight-card--featured:last-child:nth-child(odd) {
grid-column: 1/-1;
}
.public-related-content__event-list .public-insight-card__surface {
grid-template-areas: "title" "excerpt" "date";
grid-template-columns: minmax(0, 1fr);
}
.public-related-content__event-list .public-insight-card--event .public-insight-card__excerpt {
display: -webkit-box;
}
.public-related-content__event-list .public-insight-card__meta {
justify-content: flex-start;
}
}
@media (max-width: 767px) {
.public-related-content__head {
align-items: flex-start;
gap: var(--public-space-md);
}
.public-related-content__insight-grid {
grid-template-columns: 1fr;
}
.public-related-content__insight-grid .public-insight-card--featured:last-child:nth-child(odd) {
grid-column: auto;
}
.public-related-content__event-list .public-insight-card__surface {
gap: var(--public-space-sm);
}
.public-related-content__event-list .public-insight-card__meta {
grid-column: auto;
justify-content: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
.public-related-content__insight-grid .public-insight-card--featured, .public-related-content__insight-grid .public-insight-card__title, .public-related-content__event-list .public-insight-card--event {
transition: none;
}
}
.public-professional-directory__inner {
display: block;
}
.public-professional-directory__visual {
width: min(100%, 120rem);
aspect-ratio: 16/9;
margin: 0 auto;
overflow: hidden;
}
.public-professional-directory__visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.public-professional-directory__intro {
display: grid;
grid-template-columns: minmax(12rem, 1fr) minmax(0, 5fr);
width: min(100%, 120rem);
gap: var(--spacing-4xl);
margin: var(--spacing-6xl) auto 0;
padding-bottom: var(--spacing-6xl);
border-bottom: 1px solid var(--public-line);
}
.public-professional-directory__eyebrow {
margin: 0;
color: var(--clr-accent-500);
}
.public-professional-directory__eyebrow span {
margin-right: var(--public-space-2xs);
}
.public-professional-directory__intro-copy {
display: grid;
gap: var(--spacing-3xl);
}
.public-professional-directory__title {
margin: 0;
color: var(--public-ink);
}
.public-professional-directory__title span {
color: var(--clr-accent-500);
}
.public-professional-directory__description {
max-width: 56rem;
margin: 0;
color: var(--public-muted);
}
.public-professional-directory__lead, .public-professional-directory__doctors {
width: min(100%, 120rem);
margin: var(--spacing-5xl) auto 0;
}
.public-professional-directory__selector {
display: flex;
gap: var(--spacing-3xl);
overflow-x: auto;
border-bottom: 1px solid var(--public-line);
scrollbar-width: none;
}
.public-professional-directory__selector::-webkit-scrollbar {
display: none;
}
.public-professional-directory__selector-item {
position: relative;
display: grid;
flex: 0 0 auto;
gap: var(--public-space-2xs);
padding-bottom: var(--public-space-md);
color: var(--public-muted);
text-decoration: none;
}
.public-professional-directory__selector-item::after {
content: "";
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 0.2rem;
background: transparent;
}
.public-professional-directory__selector-item:hover, .public-professional-directory__selector-item:focus-visible, .public-professional-directory__selector-item.is-active {
color: var(--public-ink);
}
.public-professional-directory__selector-item.is-active::after {
background: var(--clr-accent-500);
}
.public-professional-directory__selector-role {
color: var(--public-muted);
}
.public-professional-directory__profiles {
margin-top: var(--spacing-4xl);
}
.public-professional-directory__doctors:not([data-professional-selector]) .public-professional-directory__profiles {
margin-top: 0;
}
.public-professional-directory__profile-panel[hidden] {
display: none;
}
.public-professional-directory__groups {
display: grid;
width: min(100%, 120rem);
gap: var(--public-space-section);
margin: var(--spacing-6xl) auto 0;
}
.public-professional-directory__empty {
display: grid;
min-height: 24rem;
place-items: center;
border-top: 1px solid var(--public-line);
border-bottom: 1px solid var(--public-line);
text-align: center;
}
.public-professional-directory__empty p {
margin: 0;
}
.public-professional-directory.is-async-loading {
cursor: progress;
}
@media (max-width: 1024px) {
.public-professional-directory__intro {
gap: var(--spacing-3xl);
margin-top: var(--spacing-5xl);
padding-bottom: var(--spacing-5xl);
}
}
@media (max-width: 991px) {
.public-professional-directory__groups {
gap: var(--public-space-section);
}
}
@media (max-width: 767px) {
.public-professional-directory__visual {
aspect-ratio: 4/3;
}
.public-professional-directory__intro {
grid-template-columns: 1fr;
gap: var(--spacing-2xl);
margin-top: var(--spacing-4xl);
padding-bottom: var(--spacing-4xl);
}
.public-professional-directory__intro-copy {
gap: var(--spacing-2xl);
}
.public-professional-directory__lead, .public-professional-directory__doctors {
margin-top: var(--spacing-4xl);
}
.public-professional-directory__selector {
gap: var(--spacing-3xl);
}
.public-professional-directory__profiles {
margin-top: var(--spacing-3xl);
}
.public-professional-directory__groups {
margin-top: var(--spacing-5xl);
}
}
.public-professional-group__head {
padding-bottom: var(--public-space-md);
border-bottom: 1px solid var(--public-line-strong);
}
.public-professional-group__head h2 {
margin: 0;
}
.public-professional-group__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--public-space-2xl) var(--public-space-lg);
margin-top: var(--public-space-xl);
}
@media (max-width: 1279px) {
.public-professional-group__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.public-professional-group__head {
padding-bottom: var(--public-space-md);
}
.public-professional-group__grid {
grid-template-columns: 1fr;
gap: var(--public-space-2xl);
margin-top: var(--public-space-lg);
}
}
.public-profile-page {
min-height: 0;
}
.public-professional-detail {
position: relative;
min-height: 0;
color: var(--public-ink);
background: var(--public-white);
}
.public-professional-detail.no-section-lg {
padding-top: calc(var(--public-header-height) + var(--section-sm));
padding-bottom: var(--section-lg);
}
.public-professional-detail__rail {
position: absolute;
z-index: 2;
top: calc(var(--public-header-height) + var(--section-sm));
right: 0;
width: 0.7rem;
height: 18rem;
background: var(--public-blue);
}
.public-professional-detail__back {
display: inline-flex;
align-items: center;
gap: 0.8rem;
min-height: 5.2rem;
padding: 0 2rem;
color: var(--public-ink);
border: 1px solid var(--public-line);
border-radius: 0.4rem;
transition: color 0.2s ease, border-color 0.2s ease;
}
.public-professional-detail__back:hover, .public-professional-detail__back:focus-visible {
color: var(--public-blue);
border-color: var(--public-blue);
}
.public-professional-detail__grid {
position: relative;
display: grid;
grid-template-columns: minmax(28rem, 44rem) minmax(0, 66rem) 14rem;
gap: 0 min(4vw, 5.6rem);
align-items: start;
margin-top: var(--public-space-2xl);
}
.public-professional-detail__profile {
align-self: start;
position: sticky;
top: calc(var(--public-header-height) + var(--public-space-lg));
}
.public-professional-detail__photo {
width: 100%;
aspect-ratio: 4/5;
overflow: hidden;
border-radius: var(--public-radius-sm);
background: var(--public-blue-soft);
}
.public-professional-detail__photo img, .public-professional-detail__portrait-fallback {
display: block;
width: 100%;
height: 100%;
}
.public-professional-detail__photo img {
object-fit: cover;
object-position: center top;
}
.public-professional-detail__portrait-fallback {
background-image: url("/assets/images/professional/fallback-portraits.png");
background-repeat: no-repeat;
background-size: 600% 400%;
background-position: 60% 33.333%;
}
.public-professional-detail__identity {
display: grid;
gap: var(--public-space-xs);
margin-top: var(--public-space-lg);
}
.public-professional-detail__identity h1 {
margin: 0;
}
.public-professional-detail__identity p {
margin: 0;
}
.public-professional-detail__bio {
margin: var(--public-space-md) 0 0;
padding-left: var(--public-space-sm);
border-left: 0.4rem solid var(--public-blue);
color: var(--public-muted);
}
.public-professional-detail__contacts {
display: grid;
gap: var(--public-space-xs);
margin-top: var(--public-space-lg);
}
.public-professional-detail__contacts a {
display: inline-flex;
align-items: center;
gap: 1rem;
width: fit-content;
color: var(--public-ink);
}
.public-professional-detail__contact-icon {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: 2.2rem;
height: 2.2rem;
color: var(--public-blue);
font-size: var(--body-sm-fs);
}
.public-professional-detail__profile-tags, .public-professional-detail__expertise {
display: flex;
flex-wrap: wrap;
gap: var(--public-space-2xs);
margin: var(--public-space-sm) 0 0;
padding: 0;
list-style: none;
}
.public-professional-detail__profile-tags li, .public-professional-detail__expertise li {
display: inline-flex;
align-items: center;
min-height: 3.2rem;
padding: 0 var(--public-space-sm);
color: var(--public-ink);
border: 1px solid color-mix(in srgb, var(--public-blue) 38%, var(--public-line));
border-radius: var(--public-radius-sm);
background: color-mix(in srgb, var(--public-blue) 5%, var(--public-white));
}
.public-professional-detail__section {
display: grid;
grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
gap: var(--public-space-lg);
align-items: start;
padding-top: 0;
padding-bottom: var(--public-space-2xl);
}
.public-professional-detail__section + .public-professional-detail__section {
padding-top: var(--public-space-2xl);
border-top: 1px solid var(--public-line);
}
.public-professional-detail__section h2 {
align-self: start;
width: fit-content;
margin: 0;
padding-left: var(--public-space-sm);
border-left: 0.4rem solid var(--public-blue);
}
.public-professional-detail__bullets {
display: grid;
gap: var(--public-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.public-professional-detail__bullets li {
position: relative;
padding-left: 1.4rem;
}
.public-professional-detail__bullets li::before {
content: "";
position: absolute;
top: 0.72em;
left: 0;
width: 0.3rem;
height: 0.3rem;
border-radius: 50%;
background: currentColor;
}
.public-professional-detail__expertise {
margin-top: 0;
}
.public-professional-detail__index {
position: sticky;
top: calc(var(--public-header-height) + var(--public-space-lg));
align-self: start;
justify-self: end;
z-index: 2;
width: 14rem;
height: max-content;
padding-top: var(--public-space-sm);
}
@media (max-width: 1500px) {
.public-professional-detail__grid {
grid-template-columns: minmax(26rem, 40rem) minmax(0, 1fr) 14rem;
gap: min(4vw, 4.8rem);
}
}
@media (max-width: 1180px) {
.public-professional-detail__grid {
grid-template-columns: minmax(24rem, 38rem) minmax(0, 1fr);
}
.public-professional-detail__index {
display: none;
}
}
@media (max-width: 1024px) {
.public-professional-detail {
min-height: auto;
}
.public-professional-detail.no-section-lg {
padding-top: calc(var(--public-header-height) + var(--section-xs));
}
.public-professional-detail__grid {
grid-template-columns: minmax(0, 42rem) minmax(0, 1fr);
gap: 6rem;
}
.public-professional-detail__photo {
aspect-ratio: 0.947;
}
.public-professional-detail__profile {
position: static;
}
.public-professional-detail__identity {
align-items: flex-start;
}
.public-professional-detail__contacts {
margin-top: var(--public-space-xl);
}
.public-professional-detail__section {
grid-template-columns: 1fr;
gap: var(--public-space-lg);
}
}
@media (max-width: 767px) {
.public-professional-detail.no-section-lg {
padding-top: calc(var(--public-header-height) + var(--section-xs));
}
.public-professional-detail__rail {
top: calc(var(--public-header-height) + var(--section-xs));
height: 12rem;
width: 0.4rem;
}
.public-professional-detail__back {
min-height: 4.4rem;
padding: 0 1.5rem;
}
.public-professional-detail__grid {
display: block;
margin-top: 3rem;
}
.public-professional-detail__photo {
max-height: 48rem;
}
.public-professional-detail__contacts {
margin-top: var(--public-space-xl);
}
.public-professional-detail__content {
margin-top: var(--section-sm);
}
.public-professional-detail__section {
padding-top: 0;
padding-bottom: var(--public-space-2xl);
}
}
.public-insight-card {
position: relative;
}
.public-insight-card__surface {
display: block;
color: inherit;
}
.public-insight-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-md);
}
.public-insight-card__category, .public-insight-card__title, .public-insight-card__excerpt {
margin: 0;
}
.public-insight-card__category {
color: var(--public-ink);
}
.public-insight-card__meta time, .public-insight-card__date {
color: var(--public-muted);
white-space: nowrap;
}
.public-insight-card__title {
color: var(--public-navy-deep);
transition: color var(--public-duration) var(--public-ease);
}
.public-insight-card__excerpt {
color: var(--public-muted);
}
.public-insight-card__tags, .public-insight-card__link, .public-insight-card__arrow {
display: none;
}
.public-insight-card--featured {
min-height: 22rem;
background: var(--public-white);
border-top: 1px solid var(--public-line-strong);
}
.public-insight-card--featured .public-insight-card__surface {
display: grid;
min-height: inherit;
padding: var(--public-space-xl);
}
.public-insight-card--featured .public-insight-card__title {
align-self: start;
margin-top: var(--public-space-xl);
}
.public-insight-card--featured .public-insight-card__arrow {
display: inline-flex;
}
.public-insight-card--row, .public-insight-card--event {
border-bottom: 1px solid var(--public-line);
}
.public-insight-card--row .public-insight-card__surface, .public-insight-card--event .public-insight-card__surface {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--public-space-xs);
min-height: 12rem;
padding-block: var(--public-space-md);
}
.public-insight-card--row.public-insight-card--with-thumbnail .public-insight-card__surface {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--public-space-xl);
align-items: stretch;
}
.public-insight-card--row.public-insight-card--with-thumbnail .public-insight-card__thumbnail {
grid-column: span 4;
}
.public-insight-card--row.public-insight-card--with-thumbnail .public-insight-card__body {
grid-column: span 8;
align-content: center;
}
.public-insight-card--row .public-insight-card__meta, .public-insight-card--event .public-insight-card__meta {
justify-content: flex-start;
gap: var(--public-space-md);
}
.public-insight-card--event .public-insight-card__category {
color: var(--public-ink);
}
.public-insight-card__thumbnail {
display: block;
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
background: var(--public-surface);
text-decoration: none;
}
.public-insight-card__thumbnail > img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.public-insight-card__body {
display: grid;
min-width: 0;
gap: var(--public-space-xs);
}
.public-insight-card__headline {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: var(--public-space-md);
min-width: 0;
}
.public-insight-card__title a {
color: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
text-decoration: none;
}
.public-insight-card__category-link {
display: inline-flex;
align-items: center;
min-height: var(--public-control-sm);
padding-inline: var(--public-space-xs);
color: var(--public-ink);
border: 1px solid var(--public-line);
text-decoration: none;
white-space: nowrap;
}
.public-insight-card__category-link:hover, .public-insight-card__category-link:focus-visible {
color: var(--public-white);
background: var(--public-navy-deep);
outline: none;
}
.public-insight-card__taxonomies {
display: flex;
flex-wrap: wrap;
gap: var(--public-space-2xs);
color: var(--public-muted-soft);
}
.public-insight-card__taxonomies a {
color: inherit;
text-decoration: none;
}
.public-insight-card__taxonomies a + a::before {
margin-right: var(--public-space-2xs);
content: "-";
}
.public-insight-card--row .public-insight-card__excerpt, .public-insight-card--event .public-insight-card__excerpt {
display: none;
}
.public-insight-card--blog, .public-insight-card__blog-link {
height: 100%;
}
.public-insight-card__blog-link {
display: grid;
grid-template-rows: auto 1fr;
overflow: hidden;
color: inherit;
background: var(--public-white);
border: 1px solid var(--public-line-strong);
border-radius: 0;
text-decoration: none;
transition: border-color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease);
min-height: 32rem;
}
.public-insight-card__blog-media {
position: relative;
display: block;
aspect-ratio: 16/10;
overflow: hidden;
background: var(--public-surface);
border-bottom: 1px solid var(--public-line-strong);
}
.public-insight-card__blog-media > img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background: var(--public-surface);
}
.public-insight-card__blog-body {
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: var(--public-space-md);
padding: var(--public-space-xl);
}
.public-insight-card__blog-meta, .public-insight-card__blog-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-md);
}
.public-insight-card__blog-meta, .public-insight-card__blog-excerpt {
color: var(--public-muted);
}
.public-insight-card__blog-category {
color: var(--public-ink);
}
.public-insight-card__blog-title {
color: var(--public-navy-deep);
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.public-insight-card__blog-bottom {
align-self: end;
padding-top: var(--public-space-lg);
color: var(--public-navy-deep);
border-top: 1px solid var(--public-line);
}
.public-insight-card__blog-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--public-control-sm);
height: var(--public-control-sm);
color: var(--public-white);
background: var(--public-navy-deep);
}
.public-insight-card__blog-link:hover, .public-insight-card__blog-link:focus-visible {
background: var(--public-surface);
border-color: var(--public-navy-deep);
outline: none;
}
.public-insight-card__blog-link:hover .public-insight-card__blog-arrow, .public-insight-card__blog-link:focus-visible .public-insight-card__blog-arrow {
background: var(--public-ink);
}
.public-insight-card--blog-featured {
height: 100%;
}
.public-insight-card--blog .public-insight-card__blog-link, .public-insight-card--blog-featured .public-insight-card__blog-link {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: 1fr;
min-height: 28rem;
border: 0;
border-right: 1px solid var(--public-line-strong);
border-bottom: 1px solid var(--public-line-strong);
}
.public-insight-card--blog .public-insight-card__blog-media, .public-insight-card--blog-featured .public-insight-card__blog-media {
min-height: 100%;
aspect-ratio: auto;
border-right: 1px solid var(--public-line-strong);
border-bottom: 0;
}
.public-insight-card--blog-featured .public-insight-card__blog-link {
min-height: 42rem;
}
.public-insight-card--blog-featured .public-insight-card__blog-body {
padding: var(--public-space-3xl);
}
@media (max-width: 767px) {
.public-insight-card--row.public-insight-card--with-thumbnail .public-insight-card__surface {
grid-template-columns: minmax(0, 1fr);
gap: var(--public-space-md);
}
.public-insight-card--row.public-insight-card--with-thumbnail .public-insight-card__thumbnail, .public-insight-card--row.public-insight-card--with-thumbnail .public-insight-card__body {
grid-column: auto;
}
.public-insight-card--blog .public-insight-card__blog-link, .public-insight-card--blog-featured .public-insight-card__blog-link {
grid-template-columns: 1fr;
min-height: 0;
}
.public-insight-card--blog .public-insight-card__blog-media, .public-insight-card--blog-featured .public-insight-card__blog-media {
min-height: 0;
aspect-ratio: 16/10;
border-right: 0;
border-bottom: 1px solid var(--public-line-strong);
}
.public-insight-card--blog-featured .public-insight-card__blog-body {
padding: var(--public-space-xl);
}
}
.public-insight-directory__featured-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--public-space-md);
}
.public-insight-directory__rows {
border-top: 1px solid var(--public-line);
}
/* ARTICLES — clean black-line editorial directory */
.public-blog {
padding-top: var(--public-header-height);
color: var(--public-ink);
background: var(--public-white);
}
.public-blog__intro {
background: var(--public-white);
border-bottom: 1px solid var(--public-line-strong);
}
.public-blog__intro .public-blog__shell {
display: grid;
align-items: end;
min-height: 42rem;
padding-block: var(--public-space-page) var(--public-space-3xl);
}
.public-blog__intro-copy {
display: grid;
gap: var(--public-space-lg);
max-width: 82rem;
}
.public-blog__eyebrow, .public-blog__title, .public-blog__lead, .public-blog__sidebar-label, .public-blog__archive-kicker {
margin: 0;
}
.public-blog__eyebrow, .public-blog__archive-kicker, .public-blog__sidebar-label {
color: var(--public-ink);
letter-spacing: 0.08em;
}
.public-blog__title {
max-width: 82rem;
color: var(--public-navy-deep);
}
.public-blog__lead {
color: var(--public-muted);
}
.public-blog__directory {
padding-block: var(--public-space-page) calc(var(--public-space-page) + var(--public-space-3xl));
}
.public-blog__content {
display: grid;
grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
gap: clamp(var(--public-space-2xl), 7vw, var(--public-space-3xl));
align-items: start;
}
.public-blog__sidebar {
position: sticky;
top: calc(var(--public-header-height) + var(--public-space-xl));
display: grid;
gap: var(--public-space-lg);
padding-top: var(--public-space-md);
border-top: 1px solid var(--public-line-strong);
}
.public-blog__topics {
display: grid;
border-top: 1px solid var(--public-line);
border-bottom: 1px solid var(--public-line);
}
.public-blog__topic {
display: flex;
align-items: center;
min-height: var(--public-control-sm);
padding-inline: var(--public-space-xs);
color: var(--public-muted);
border-bottom: 1px solid var(--public-line);
text-decoration: none;
transition: color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease);
}
.public-blog__topic:last-child {
border-bottom: 0;
}
.public-blog__topic:hover, .public-blog__topic:focus-visible, .public-blog__topic.is-active {
color: var(--public-navy-deep);
background: var(--public-surface);
outline: none;
}
.public-blog__topic.is-active {
border-left: 3px solid var(--public-navy-deep);
}
.public-blog__results {
min-width: 0;
}
.public-blog__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-xl);
margin-top: 0;
}
.public-blog__grid-item {
min-width: 0;
}
.public-blog .public-pagination {
margin-top: var(--public-space-page);
}
.public-blog .empty-state {
min-height: 24rem;
background: var(--public-surface);
border: 1px solid var(--public-line);
border-radius: 0;
}
.public-blog__featured, .public-blog__directory {
border-bottom: 1px solid var(--public-line-strong);
}
.public-blog__featured .public-blog__shell, .public-blog__directory .public-blog__shell {
padding-block: var(--public-space-page);
}
.public-blog__section-head {
display: grid;
gap: var(--public-space-md);
}
.public-blog__section-head h2 {
margin: 0;
color: var(--public-navy-deep);
}
.public-blog__featured-slider {
position: relative;
margin-top: var(--public-space-xl);
overflow: hidden;
border: 1px solid var(--public-line-strong);
}
.public-blog__featured-controls {
position: absolute;
right: var(--public-space-xl);
bottom: var(--public-space-xl);
z-index: 2;
display: flex;
align-items: center;
gap: var(--public-space-xs);
}
.public-blog__slider-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--public-control-sm);
height: var(--public-control-sm);
color: var(--public-white);
background: var(--public-navy-deep);
border: 1px solid var(--public-navy-deep);
}
.public-blog__slider-button:hover, .public-blog__slider-button:focus-visible {
color: var(--public-navy-deep);
background: var(--public-white);
outline: none;
}
.public-blog__slider-pagination {
min-width: 5rem;
color: var(--public-ink);
text-align: center;
}
.public-blog__directory-tools {
display: grid;
gap: var(--public-space-xl);
padding-bottom: var(--public-space-xl);
}
.public-blog__directory-search-row {
display: flex;
justify-content: center;
}
.public-blog__directory-filter-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-xl);
}
.public-blog__directory-tools .public-filter-tabs {
margin: 0;
}
.public-blog__sort-form {
min-width: 13rem;
}
.public-blog__results {
padding-top: var(--public-space-xl);
}
.public-blog__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--public-line-strong);
border-left: 1px solid var(--public-line-strong);
}
.public-blog__grid-item {
grid-column: span 2;
}
@media (max-width: 1024px) {
.public-blog__content {
grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
gap: var(--public-space-xl);
}
.public-blog__directory-filter-row {
align-items: start;
flex-direction: column;
}
.public-blog__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.public-blog__intro .public-blog__shell {
min-height: 0;
padding-block: var(--public-space-page) var(--public-space-2xl);
}
.public-blog__content {
grid-template-columns: 1fr;
gap: var(--public-space-3xl);
}
.public-blog__sidebar {
position: static;
}
.public-blog__topics {
display: flex;
overflow-x: auto;
border: 0;
scrollbar-width: none;
}
.public-blog__topics::-webkit-scrollbar {
display: none;
}
.public-blog__topic {
flex: 0 0 auto;
min-height: var(--public-control-sm);
padding-inline: var(--public-space-md);
border: 1px solid var(--public-line);
border-right: 0;
}
.public-blog__topic:last-child {
border-right: 1px solid var(--public-line);
}
.public-blog__topic.is-active {
border-left: 3px solid var(--public-navy-deep);
}
.public-blog__grid {
grid-template-columns: 1fr;
}
.public-blog__featured-controls {
right: var(--public-space-md);
bottom: var(--public-space-md);
}
.public-blog__directory-filter-row {
align-items: stretch;
gap: var(--public-space-md);
}
.public-blog__directory-tools .public-filter-tabs {
width: 100%;
overflow-x: auto;
}
.public-blog__sort-form {
width: 100%;
min-width: 0;
}
.public-blog__sort-select {
width: 100%;
}
.public-blog__grid {
grid-template-columns: 1fr;
}
.public-blog__grid-item {
grid-column: span 1;
}
}
.public-event-directory > .public-practice-directory__body {
display: flow-root;
}
.public-event-directory .public-practice-directory__categories {
position: relative;
z-index: 1;
background: var(--public-white);
}
html body .public-event-directory .public-practice-directory__categories.no-container-xl {
box-sizing: border-box;
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: 0;
}
.public-event-directory.is-event-directory-loading {
cursor: progress;
}
.public-event-detail {
padding-top: var(--public-header-height);
color: var(--public-ink);
background: var(--public-white);
}
.public-event-detail__event-tabs {
position: sticky;
top: var(--public-header-height);
z-index: calc(var(--public-z-header) - 1);
border-bottom: 1px solid var(--public-line);
background: var(--public-white);
}
.public-event-detail__event-tabs-track {
display: flex;
justify-content: safe center;
gap: var(--public-space-xs);
padding-block: var(--public-space-sm);
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: none;
scroll-snap-type: x proximity;
touch-action: pan-x;
-webkit-overflow-scrolling: touch;
}
.public-event-detail__event-tabs-track::-webkit-scrollbar {
display: none;
}
.public-event-detail__event-tab {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
max-width: 22rem;
min-height: 3.2rem;
padding-inline: var(--public-space-md);
overflow: hidden;
scroll-snap-align: start;
color: var(--public-muted);
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
background: var(--public-surface-subtle);
border: 1px solid var(--public-line);
border-radius: 999px;
}
.public-event-detail__event-tab:hover, .public-event-detail__event-tab:focus-visible {
color: var(--public-ink);
border-color: var(--public-ink);
}
.public-event-detail__event-tab.is-active {
color: var(--public-white);
background: var(--public-blue);
border-color: var(--public-blue);
}
.public-event-detail__content {
width: 100%;
}
.public-event-detail__hero {
padding-bottom: var(--public-space-xl);
border-bottom: 1px solid var(--public-line);
}
.public-event-detail__meta {
display: flex;
justify-content: space-between;
gap: var(--public-space-lg);
color: var(--public-blue);
}
.public-event-detail__hero h1 {
margin: var(--public-space-sm) 0 0;
}
.public-event-detail__summary {
max-width: 68rem;
margin: var(--public-space-lg) 0 0;
color: var(--public-muted);
}
.public-event-detail__prose {
max-width: 68rem;
margin-top: var(--public-space-sm);
color: var(--public-muted);
}
.public-event-detail__prose p {
margin: 0;
}
.public-event-detail__prose p + p {
margin-top: var(--public-space-2xs);
}
.public-event-detail__facts {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--public-space-lg);
margin-top: var(--public-space-xl);
}
.public-event-detail__products {
padding-top: var(--public-space-xl);
}
.public-event-detail__filters .public-filter-tabs {
justify-content: flex-start;
}
.public-event-detail__section-head {
border-bottom: 1px solid var(--public-line);
}
.public-event-detail__section-head h2 {
margin: 0;
}
.public-event-detail__product-list {
display: grid;
gap: var(--public-space-sm);
}
.public-event-detail.is-event-detail-loading {
cursor: progress;
}
@media (max-width: 767px) {
.public-event-detail__event-tabs-track {
justify-content: flex-start;
gap: var(--public-space-2xs);
padding: var(--public-space-2xs) var(--public-shell-gutter);
scroll-padding-inline: var(--gutter);
}
.public-event-detail__event-tab {
min-height: var(--public-filter-tab-mobile-height);
padding-inline: var(--public-space-xs);
}
.public-event-detail__content {
max-width: none;
}
.public-event-detail__facts {
align-items: flex-start;
flex-direction: column;
gap: var(--public-space-sm);
}
}
.public-event-page ~ .public-footer.site-footer {
background: var(--public-navy-deep);
}
.public-event-page ~ .no-floating-cta .no-floating-cta__btn--tel, .public-event-page ~ .no-floating-cta .no-floating-cta__btn--naverblog, .public-event-page ~ .no-floating-cta .no-floating-cta__btn--top {
display: none;
}
.public-event-page ~ .no-floating-cta .no-floating-cta__btn--instagram {
order: 1;
}
.public-event-page ~ .no-floating-cta .no-floating-cta__btn--youtube {
order: 2;
}
.public-event-page ~ .no-floating-cta .no-floating-cta__btn--kakao {
order: 3;
}
@media (max-width: 767px) {
.public-event-page ~ .no-floating-cta {
display: none;
}
}
.public-article-detail {
padding-top: calc(var(--public-header-height) + var(--public-space-page));
padding-bottom: var(--public-space-page);
color: var(--public-ink);
background: var(--public-white);
}
.public-article-detail--preview {
padding-top: var(--public-space-page);
}
.public-article-detail__inner.no-container-xl {
width: min(100%, 80rem);
}
.public-article-detail__hero {
aspect-ratio: 1;
margin: 0 0 var(--public-space-xl);
overflow: hidden;
background: var(--public-surface);
}
.public-article-detail__hero .no-auto-cover__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.public-article-detail__header {
padding-bottom: var(--public-space-xl);
border-bottom: 1px solid var(--public-line);
}
.public-article-detail__header h1, .public-article-detail__header p {
margin-inline: 0;
}
.public-article-detail__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--public-space-2xs);
margin-top: var(--public-space-sm);
color: var(--public-muted);
}
.public-article-detail__excerpt {
margin-top: var(--public-space-md);
color: var(--public-muted);
}
.public-article-detail__content {
padding-block: var(--public-space-2xl) var(--public-space-page);
color: var(--public-ink);
}
.public-article-detail__content > :first-child {
margin-top: 0;
}
.public-article-detail__content > :last-child {
margin-bottom: 0;
}
.public-article-detail__content h2, .public-article-detail__content h3, .public-article-detail__content h4 {
margin: var(--public-space-2xl) 0 var(--public-space-md);
color: var(--public-ink);
}
.public-article-detail__content h2 {
font-size: var(--heading-xs-fs);
line-height: var(--heading-xs-lh);
}
.public-article-detail__content h3, .public-article-detail__content h4 {
font-size: var(--body-lg-fs);
line-height: var(--body-lg-lh);
}
.public-article-detail__content p, .public-article-detail__content ul, .public-article-detail__content ol, .public-article-detail__content blockquote, .public-article-detail__content figure, .public-article-detail__content table {
margin: 0 0 var(--public-space-md);
}
.public-article-detail__content ul, .public-article-detail__content ol {
padding-left: var(--public-space-lg);
}
.public-article-detail__content img {
display: block;
max-width: 100%;
height: auto;
margin-inline: auto;
}
.public-article-detail__content table {
width: 100%;
border-collapse: collapse;
}
.public-article-detail__content th, .public-article-detail__content td {
padding: var(--public-space-xs);
border: 1px solid var(--public-line);
text-align: left;
vertical-align: top;
}
.public-article-detail__content blockquote {
padding-left: var(--public-space-md);
color: var(--public-muted);
border-left: 1px solid var(--public-ink);
}
.public-article-detail__navigation {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--public-space-xs);
padding-top: var(--public-space-xl);
border-top: 1px solid var(--public-line);
}
.public-article-detail__navigation .public-button {
width: 100%;
}
.public-article-detail__related {
margin-top: var(--public-space-page);
padding-top: var(--public-space-xl);
border-top: 1px solid var(--public-ink);
}
.public-article-detail__related-list {
margin-top: var(--public-space-md);
}
.public-article-detail__related-list .public-insight-card--row {
grid-template-columns: minmax(18rem, 36%) minmax(0, 1fr);
}
@media (max-width: 767px) {
.public-article-detail {
padding-top: calc(var(--public-header-height) + var(--public-space-xl));
padding-bottom: var(--public-space-xl);
}
.public-article-detail--preview {
padding-top: var(--public-space-xl);
}
.public-article-detail__hero {
margin-bottom: var(--public-space-md);
}
.public-article-detail__header {
padding-bottom: var(--public-space-md);
}
.public-article-detail__content {
padding-block: var(--public-space-xl) var(--public-space-2xl);
overflow-x: auto;
}
.public-article-detail__navigation {
gap: var(--public-space-2xs);
}
.public-article-detail__navigation .public-button {
padding-inline: var(--public-space-2xs);
}
.public-article-detail__related {
margin-top: var(--public-space-2xl);
}
.public-article-detail__related-list .public-insight-card--row {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.public-article-detail-page ~ .no-floating-cta {
display: none;
}
}
.public-post-detail {
padding-top: var(--public-header-height);
color: var(--public-ink);
background: var(--public-white);
}
.public-post-detail__masthead {
border-bottom: 1px solid var(--public-line);
background: var(--public-surface-subtle);
}
.public-post-detail__masthead h1, .public-post-detail__masthead p {
margin: 0;
}
.public-post-detail__masthead h1 {
max-width: 96rem;
margin-top: 0;
color: var(--public-navy);
}
.public-post-detail__lead {
max-width: 82rem;
margin-top: var(--public-space-2xl);
color: var(--public-muted);
}
.public-post-detail__layout {
display: grid;
grid-template-columns: minmax(14rem, 18rem) minmax(0, 78rem) minmax(24rem, 30rem);
align-items: start;
justify-content: center;
gap: var(--public-space-3xl);
padding-block: var(--public-space-page);
}
.public-post-detail__meta, .public-post-detail__relations {
position: sticky;
top: calc(var(--public-header-height) + var(--public-space-xl));
}
.public-post-detail__relations {
max-height: calc(100vh - var(--public-header-height) - var(--public-space-xl) * 2);
overflow-y: auto;
padding-inline-end: var(--public-space-xs);
scrollbar-width: thin;
scrollbar-color: var(--public-line-strong) transparent;
}
.public-post-detail__facts {
margin: var(--public-space-xl) 0 0;
padding-top: var(--public-space-lg);
border-top: 1px solid var(--public-line);
}
.public-post-detail__facts div {
display: grid;
gap: var(--public-space-2xs);
padding-block: var(--public-space-sm);
border-bottom: 1px solid var(--public-line);
}
.public-post-detail__facts dt {
color: var(--public-muted-soft);
}
.public-post-detail__facts dd {
margin: 0;
color: var(--public-navy);
}
.public-post-detail__media {
margin: 0 0 var(--public-space-3xl);
overflow: hidden;
border-radius: var(--public-radius-md);
background: var(--public-surface);
}
.public-post-detail__media img {
display: block;
width: 100%;
height: auto;
}
.public-post-detail__content {
color: var(--public-ink);
}
.public-post-detail__content > :first-child {
margin-top: 0;
}
.public-post-detail__content h2, .public-post-detail__content h3 {
margin-top: var(--public-space-3xl);
margin-bottom: var(--public-space-md);
color: var(--public-navy);
}
.public-post-detail__content p, .public-post-detail__content ul, .public-post-detail__content ol, .public-post-detail__content blockquote {
margin-block: 0 var(--public-space-md);
}
.public-post-detail__content img {
max-width: 100%;
height: auto;
}
.public-post-detail__relation-block + .public-post-detail__relation-block {
margin-top: var(--public-space-3xl);
}
.public-post-detail__relation-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-md);
padding-bottom: var(--public-space-sm);
border-bottom: 1px solid color-mix(in srgb, var(--public-navy) 26%, transparent);
}
.public-post-detail__relation-head h2 {
margin: 0;
color: var(--public-navy);
}
.public-post-detail__practice-list {
margin: 0;
padding: 0;
list-style: none;
}
.public-post-detail__practice-list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-md);
min-height: var(--public-control-lg);
color: var(--public-navy);
border-bottom: 1px solid var(--public-line);
text-decoration: none;
transition: color var(--public-duration) var(--public-ease), padding var(--public-duration) var(--public-ease);
}
.public-post-detail__practice-list a:hover, .public-post-detail__practice-list a:focus-visible {
padding-inline-start: var(--public-space-xs);
color: var(--public-blue);
outline: none;
}
.public-post-detail__people {
display: grid;
gap: var(--public-space-lg);
margin-top: var(--public-space-lg);
}
.public-post-detail__people .public-professional-card__link {
display: grid;
grid-template-columns: 7.2rem minmax(0, 1fr);
align-items: center;
gap: var(--public-space-md);
}
.public-post-detail__people .public-professional-card__photo {
aspect-ratio: 1;
min-height: 0;
border-radius: var(--public-radius-pill);
}
.public-post-detail__people .public-professional-card__body {
padding: 0;
}
.public-post-detail__people .public-professional-card__area {
display: none;
}
.public-post-detail__people .public-professional-card__name {
font-size: var(--body-lg-fs);
line-height: var(--body-lg-lh);
}
.public-post-detail__people .public-professional-card__role {
display: block;
margin: var(--public-space-2xs) 0 0;
color: var(--public-muted);
text-transform: none;
}
@media (max-width: 1180px) {
.public-post-detail__layout {
grid-template-columns: 14rem minmax(0, 1fr) 24rem;
gap: var(--public-space-2xl);
}
}
@media (max-width: 1024px) {
.public-post-detail__layout {
grid-template-columns: 14rem minmax(0, 1fr);
}
.public-post-detail__relations {
position: static;
grid-column: 2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-2xl);
max-height: none;
overflow: visible;
padding-inline-end: 0;
}
.public-post-detail__relation-block + .public-post-detail__relation-block {
margin-top: 0;
}
}
@media (max-width: 767px) {
.public-post-detail__masthead {
padding-block: var(--public-space-section);
}
.public-post-detail__layout {
display: block;
}
.public-post-detail__meta {
position: static;
margin-bottom: var(--public-space-2xl);
}
.public-post-detail__facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.public-post-detail__relations {
display: block;
margin-top: var(--public-space-section);
}
.public-post-detail__relation-block + .public-post-detail__relation-block {
margin-top: var(--public-space-3xl);
}
}
.public-faq-directory {
color: var(--public-ink);
background: var(--public-white);
}
.public-faq-directory__hero {
text-align: center;
}
.public-faq-directory__hero p {
margin: 0;
color: var(--public-blue);
}
.public-faq-directory__hero h1 {
margin: 1.5rem 0 0;
color: var(--public-navy);
}
.public-faq-directory__hero span {
display: block;
margin-top: 3rem;
color: #737d85;
}
.public-faq-directory__list {
margin-top: 8.8rem;
background: #fbfcfc;
}
.public-faq-directory details {
border-bottom: 1px solid #e2e6e8;
}
.public-faq-directory summary {
display: grid;
grid-template-columns: 3.2rem minmax(0, 1fr) 2rem;
align-items: center;
gap: 1rem;
min-height: 9.8rem;
padding: 0 3.2rem;
cursor: pointer;
list-style: none;
}
.public-faq-directory summary::-webkit-details-marker {
display: none;
}
.public-faq-directory__q {
color: var(--public-blue);
}
.public-faq-directory summary i {
position: relative;
width: 1.4rem;
height: 1.4rem;
}
.public-faq-directory summary i::before, .public-faq-directory summary i::after {
content: "";
position: absolute;
top: 0.6rem;
width: 0.8rem;
height: 1px;
background: #283238;
transition: transform 0.2s ease;
}
.public-faq-directory summary i::before {
left: 0;
transform: rotate(45deg);
}
.public-faq-directory summary i::after {
right: 0;
transform: rotate(-45deg);
}
.public-faq-directory details[open] summary i::before {
transform: rotate(-45deg);
}
.public-faq-directory details[open] summary i::after {
transform: rotate(45deg);
}
.public-faq-directory__answer {
display: grid;
grid-template-columns: 3.2rem minmax(0, 1fr);
gap: 1rem;
padding: 0 7.5rem 6rem 3.2rem;
}
.public-faq-directory__answer > span {
color: #5f686e;
}
.public-faq-directory__answer p {
margin: 0;
color: #68727a;
}
@media (max-width: 1024px) {
.public-faq-directory {
min-height: auto;
}
}
@media (max-width: 767px) {
.public-faq-directory__hero span {
max-width: 30rem;
margin: 2rem auto 0;
}
.public-faq-directory__list {
margin-top: 5rem;
}
.public-faq-directory summary {
grid-template-columns: 2.5rem minmax(0, 1fr) 1.6rem;
min-height: 8.4rem;
padding: 0 1.8rem;
}
.public-faq-directory__answer {
grid-template-columns: 2.5rem minmax(0, 1fr);
padding: 0 1.8rem 4rem;
}
}
.public-search-directory {
min-height: calc(100svh - var(--public-header-height));
color: var(--public-navy);
background: linear-gradient(180deg, #f2f8fb 0, var(--public-white) 44rem);
}
.public-search-directory__hero {
text-align: center;
}
.public-search-directory__hero h1 {
margin: 0;
}
.public-search-directory__hero .public-search-form--result {
margin: 10.3rem auto 0;
}
.public-search-directory__hero > p {
margin: 2rem 0 0;
color: #4e5961;
}
.public-search-directory__hero > p b {
color: #2689ad;
}
.public-search-directory__body {
margin-top: 12rem;
}
.public-search-directory__section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4.2rem;
}
.public-search-directory__section-head h2, .public-search-directory__links h2, .public-search-directory__compact h2 {
margin: 0;
}
.public-search-directory__section-head > a, .public-search-directory__more {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 12rem;
height: 5rem;
color: var(--public-navy);
border: 1px solid var(--public-navy);
}
.public-search-directory__people-viewport {
overflow: hidden;
}
.public-search-directory__people-track {
display: flex;
gap: 2.4rem;
overflow-x: auto;
scrollbar-width: none;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.public-search-directory__people-track::-webkit-scrollbar {
display: none;
}
.public-search-directory__people-track .public-professional-card {
flex: 0 0 calc((100% - 7.2rem) / 4);
scroll-snap-align: start;
}
.public-search-directory__slider-controls {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 5.8rem;
}
.public-search-directory__slider-controls > span {
width: calc(100% - 17rem);
height: 2px;
background: linear-gradient(90deg, var(--public-navy) 0 55%, #d6dce0 55% 100%);
}
.public-search-directory__slider-controls div {
display: flex;
gap: 1.2rem;
}
.public-search-directory__slider-controls button {
width: 5.5rem;
height: 5.5rem;
color: var(--public-navy);
border: 1px solid #dce1e4;
border-radius: 50%;
background: var(--public-white);
font-size: var(--subtitle-fs);
}
.public-search-directory__links {
margin-top: 14.5rem;
}
.public-search-directory__links ul, .public-search-directory__simple-list {
margin: 4.5rem 0 0;
padding: 0;
border-top: 1px solid #6f7c84;
list-style: none;
}
.public-search-directory__links li, .public-search-directory__simple-list li {
border-bottom: 1px solid #e1e5e8;
}
.public-search-directory__links li a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
min-height: 9.5rem;
color: var(--public-navy);
}
.public-search-directory__links time {
color: #a4abb0;
}
.public-search-directory__more {
display: flex;
width: fit-content;
margin: 4.5rem auto 0;
}
.public-search-directory__empty {
display: grid;
place-items: center;
align-content: center;
min-height: 42rem;
padding: 6rem 2rem;
border: 1px solid var(--public-line);
border-radius: var(--public-radius-md);
background: var(--public-surface-subtle);
text-align: center;
}
.public-search-directory__empty p {
margin: 0;
}
.public-search-directory__empty span {
margin-top: 1rem;
color: var(--public-muted);
}
.public-search-directory__compact + .public-search-directory__compact {
margin-top: 10rem;
}
.public-search-directory__compact .public-professional-grid {
margin-top: 4rem;
}
.public-search-directory__simple-list a {
display: flex;
align-items: center;
min-height: 8rem;
color: var(--public-navy);
}
@media (max-width: 1024px) {
.public-search-directory {
min-height: auto;
}
.public-search-directory__body {
margin-top: 9rem;
}
.public-search-directory__people-track .public-professional-card {
flex-basis: calc((100% - 4.8rem) / 3);
}
}
@media (max-width: 767px) {
.public-search-directory__hero .public-search-form--result {
margin-top: 6rem;
}
.public-search-directory__body {
margin-top: 7rem;
}
.public-search-directory__section-head > a {
min-width: 9rem;
height: 4.2rem;
}
.public-search-directory__people-track .public-professional-card {
flex-basis: calc((100% - 1.6rem) / 2);
}
.public-search-directory__links {
margin-top: 10rem;
}
.public-search-directory__links ul {
margin-top: 3rem;
}
.public-search-directory__links li a {
align-items: flex-start;
flex-direction: column;
gap: 1rem;
min-height: 9rem;
padding: 2rem 0;
}
}
.public-member-auth {
min-height: calc(100dvh - var(--public-header-height));
padding-top: calc(var(--public-header-height) + var(--public-space-page));
padding-block-start: calc(var(--public-header-height) + var(--public-space-page));
background: var(--public-white);
color: var(--public-ink);
}
.public-member-auth--login, .public-member-auth--signup {
background: var(--public-surface);
}
.public-member-auth.no-section-lg {
padding-top: calc(var(--public-header-height) + var(--public-space-page));
padding-block-start: calc(var(--public-header-height) + var(--public-space-page));
}
.public-member-auth[hidden], .public-member-auth [hidden] {
display: none;
}
.public-member-auth__shell {
display: flex;
justify-content: center;
padding-right: var(--gutter);
padding-left: var(--gutter);
}
.public-member-auth__panel {
display: flex;
flex-direction: column;
justify-content: center;
width: min(100%, var(--public-auth-panel-max));
padding: var(--public-space-2xl) var(--public-space-3xl);
border: 1px solid var(--public-line);
border-top-color: var(--clr-base-black);
background: var(--public-white);
}
.public-member-auth__head {
margin-bottom: var(--public-space-2xl);
text-align: center;
}
.public-member-auth__brand {
display: inline-flex;
margin-bottom: var(--public-space-md);
padding-bottom: var(--public-space-xs);
border-bottom: 1px solid var(--clr-base-black);
color: var(--clr-base-black);
letter-spacing: 0.12em;
}
.public-member-auth__title {
margin-bottom: var(--public-space-sm);
font-family: var(--font-heading-family);
font-weight: var(--font-weight-medium);
}
.public-member-auth__desc {
max-width: 42ch;
margin-right: auto;
margin-left: auto;
color: var(--public-muted);
}
.public-member-auth__form {
display: grid;
gap: var(--public-space-sm);
}
.public-member-auth__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-sm);
}
.public-member-auth__field {
display: grid;
gap: var(--public-space-xs);
color: var(--public-ink);
}
.public-member-auth__field > span, .public-member-auth__captcha > span {
color: var(--public-muted);
}
.public-member-auth__field input:not([type=checkbox]), .public-member-auth__field select, .public-member-auth__input {
appearance: none;
width: 100%;
min-height: var(--public-control-md);
padding: 0 var(--public-space-md);
border: 1px solid var(--public-line);
background: var(--public-white);
color: var(--public-ink);
transition: border-color var(--tran-15), box-shadow var(--tran-15);
}
.public-member-auth__field input:disabled, .public-member-auth__field select:disabled, .public-member-auth__field textarea:disabled, .public-member-auth__input:disabled {
background: var(--public-surface-subtle);
color: var(--public-muted);
cursor: not-allowed;
}
.public-member-auth__field input:focus-visible, .public-member-auth__field select:focus-visible, .public-member-auth__input:focus-visible {
border-color: var(--public-blue);
box-shadow: 0 0 0 2px var(--public-blue-soft);
outline: 0;
}
.public-member-auth__field small {
color: var(--public-muted);
}
.public-member-auth__password {
position: relative;
}
.public-member-auth__password-toggle {
position: absolute;
top: 50%;
right: var(--public-space-sm);
display: grid;
width: var(--public-control-sm);
height: var(--public-control-sm);
place-items: center;
transform: translateY(-50%);
border: 0;
background: transparent;
color: var(--public-muted);
cursor: pointer;
}
.public-member-auth__password-toggle:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.public-member-auth__choices {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--public-space-sm);
}
.public-member-auth__choice {
display: inline-flex;
align-items: center;
gap: var(--public-space-xs);
color: var(--public-muted);
cursor: pointer;
}
.public-member-auth__choice input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.public-member-auth__choice .public-form-field__checkbox-mark {
display: grid;
width: var(--public-check-size);
height: var(--public-check-size);
flex: 0 0 var(--public-check-size);
place-items: center;
border: 1px solid var(--public-line);
border-radius: 0;
background: var(--public-white);
color: transparent;
transition: color var(--public-duration) var(--public-ease), border-color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease), box-shadow var(--public-duration) var(--public-ease);
}
.public-member-auth__choice .public-form-field__checkbox-mark::after {
width: calc(var(--public-check-size) * 0.25);
height: calc(var(--public-check-size) * 0.5);
border: solid currentColor;
border-width: 0 2px 2px 0;
content: "";
transform: translateY(-8%) rotate(45deg);
}
.public-member-auth__choice:hover .public-form-field__checkbox-mark, .public-member-auth__choice input:focus-visible + .public-form-field__checkbox-mark {
border-color: var(--public-blue);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--public-blue) 16%, transparent);
outline: 0;
}
.public-member-auth__choice input:checked + .public-form-field__checkbox-mark, .public-member-auth__choice:has(input:checked) .public-form-field__checkbox-mark {
border-color: var(--public-blue);
background: var(--public-blue);
background-color: var(--public-blue);
color: var(--public-white);
}
.public-member-auth__choice input:disabled + .public-form-field__checkbox-mark {
border-color: var(--public-line);
background-color: var(--public-surface-subtle);
color: color-mix(in srgb, var(--public-muted) 55%, transparent);
cursor: not-allowed;
}
.public-member-auth__choice:has(input:disabled) {
cursor: not-allowed;
opacity: 0.72;
}
.public-member-auth__submit.public-button, .public-member-auth__social.public-button {
width: 100%;
justify-content: center;
}
.public-member-auth--login .public-member-auth__submit.public-button, .public-member-auth--signup .public-member-auth__submit.public-button {
color: var(--public-ink);
}
.public-member-auth--login .public-member-auth__submit.public-button:hover, .public-member-auth--login .public-member-auth__submit.public-button:focus-visible, .public-member-auth--signup .public-member-auth__submit.public-button:hover, .public-member-auth--signup .public-member-auth__submit.public-button:focus-visible {
color: var(--public-ink);
}
.public-member-auth__submit.public-button[aria-busy=true], .public-member-auth__logout-button.public-button[aria-busy=true] {
pointer-events: none;
opacity: 1;
}
.public-member-auth__social-list {
display: grid;
gap: var(--public-space-sm);
}
.public-member-auth__social.public-button {
position: relative;
}
.public-member-auth__social .public-button__icon {
position: absolute;
left: var(--public-space-md);
width: var(--public-social-icon-size);
height: var(--public-social-icon-size);
justify-content: center;
}
.public-member-auth__social .public-button__icon img {
display: block;
width: 100%;
height: 100%;
}
.public-member-auth__social[aria-busy=true] {
pointer-events: none;
opacity: 1;
}
.public-member-auth__social.is-complete.public-button {
color: var(--public-auth-success);
}
.public-member-auth__social--google.public-button {
color: var(--public-ink);
}
.public-member-auth__social--google.public-button:hover, .public-member-auth__social--google.public-button:focus-visible {
color: var(--public-ink);
}
.public-member-auth__social--kakao.public-button {
color: var(--public-ink);
}
.public-member-auth__social--kakao.public-button:hover, .public-member-auth__social--kakao.public-button:focus-visible {
color: var(--public-ink);
}
.public-member-auth__social--naver.public-button {
color: var(--public-ink);
}
.public-member-auth__social--naver.public-button:hover, .public-member-auth__social--naver.public-button:focus-visible {
color: var(--public-ink);
}
.public-member-auth__divider {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--public-space-sm);
margin: var(--public-space-lg) 0;
color: var(--public-muted-soft);
}
.public-member-auth__divider::before, .public-member-auth__divider::after {
height: 1px;
background: var(--public-line);
content: "";
}
.public-member-auth__links, .public-member-auth__account-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--public-space-md);
margin-top: var(--public-space-lg);
}
.public-member-auth__links {
display: grid;
grid-template-columns: repeat(3, max-content);
justify-content: center;
gap: 0;
}
.public-member-auth__links a {
padding-inline: var(--public-space-sm);
color: var(--public-ink);
text-decoration: none;
text-underline-offset: 0.3em;
white-space: nowrap;
}
.public-member-auth__links a + a {
border-left: 1px solid var(--public-line);
}
.public-member-auth__links a:hover, .public-member-auth__links a:focus-visible {
text-decoration: underline;
}
.public-member-auth__account-actions a, .public-member-auth__foot a, .public-member-auth__policy a {
color: var(--public-ink);
text-decoration: underline;
text-underline-offset: 0.3em;
}
.public-member-auth__foot {
margin-top: var(--public-space-lg);
color: var(--public-muted);
text-align: center;
}
.public-member-auth__policy {
color: var(--public-muted);
}
.public-member-auth__message {
margin-bottom: var(--public-space-lg);
padding: var(--public-space-sm) var(--public-space-md);
border-left: 2px solid var(--public-blue);
background: var(--public-blue-soft);
color: var(--public-ink);
}
.public-member-auth__message--error {
border-left-color: var(--public-auth-error);
color: var(--public-auth-error);
}
.public-member-auth__message--success {
border-left-color: var(--public-auth-success);
color: var(--public-auth-success);
}
.public-member-auth__captcha {
display: grid;
gap: var(--public-space-xs);
}
.public-member-auth__captcha-row {
display: grid;
grid-template-columns: auto var(--public-control-md) minmax(0, 1fr);
align-items: end;
gap: var(--public-space-xs);
}
.public-member-auth__captcha-row img, .public-member-auth__captcha-refresh {
height: var(--public-control-md);
border: 1px solid var(--public-line);
background: var(--public-white);
}
.public-member-auth__captcha-refresh {
display: grid;
width: var(--public-control-md);
place-items: center;
}
.public-member-auth__field--captcha > span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.public-member-auth__verify {
display: grid;
gap: var(--public-space-lg);
text-align: center;
}
.public-member-auth__verify-icon {
display: grid;
width: var(--public-auth-mark-size);
height: var(--public-auth-mark-size);
margin: 0 auto;
place-items: center;
border-radius: 50%;
background: var(--public-blue-soft);
color: var(--public-blue);
}
.public-member-auth__security {
display: flex;
align-items: center;
gap: var(--public-space-xs);
margin-top: var(--public-space-lg);
color: var(--public-muted);
}
.public-member-auth__account {
display: flex;
align-items: center;
gap: var(--public-space-md);
}
.public-member-auth__account-mark {
display: grid;
flex: 0 0 var(--public-auth-mark-size);
width: var(--public-auth-mark-size);
height: var(--public-auth-mark-size);
place-items: center;
border-radius: 50%;
overflow: hidden;
background: var(--public-ink);
color: var(--public-white);
}
.public-member-auth__account-mark img {
width: 100%;
height: 100%;
object-fit: cover;
}
.public-member-auth__account-copy {
display: grid;
gap: var(--public-space-2xs);
}
.public-member-auth__account-copy > span {
color: var(--public-muted);
}
.public-member-auth__profile-head {
padding-block: var(--public-space-3xl);
}
.public-member-auth__profile-head .public-member-auth__account {
align-items: center;
}
.public-member-auth__profile-head .public-member-auth__account-copy {
justify-items: start;
}
.public-member-auth__workspace {
width: 100%;
}
.public-member-auth__tabs {
display: flex;
align-items: center;
gap: var(--public-space-xl);
border-bottom: 1px solid var(--public-line);
}
.public-member-auth__tab {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--public-space-2xs);
min-height: var(--public-control-md);
padding-block: var(--public-space-xs);
color: var(--public-muted);
text-decoration: none;
transition: color var(--public-duration) var(--public-ease), background var(--public-duration) var(--public-ease);
}
.public-member-auth__tab:hover, .public-member-auth__tab:focus-visible {
color: var(--public-ink);
}
.public-member-auth__tab.is-active {
color: var(--public-ink);
}
.public-member-auth__tab.is-active::after {
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 2px;
background: var(--public-ink);
content: "";
}
.public-member-auth__tab-count {
display: grid;
min-width: var(--public-space-lg);
min-height: var(--public-space-lg);
padding-inline: var(--public-space-2xs);
place-items: center;
border: 1px solid var(--public-line);
color: var(--public-ink);
}
.public-member-auth__tabpanel {
padding-top: var(--public-space-3xl);
scroll-margin-top: calc(var(--public-header-height) + var(--public-space-sm));
}
.public-member-auth__section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--public-space-xl);
margin-bottom: var(--public-space-2xl);
}
.public-member-auth__section-head > div {
display: grid;
gap: var(--public-space-xs);
}
.public-member-auth__section-head p:last-child {
color: var(--public-muted);
}
.public-member-auth__reservation-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--public-space-md);
}
.public-member-auth__reservation-empty {
display: grid;
justify-items: center;
gap: var(--public-space-lg);
padding: var(--public-space-page) var(--public-space-xl);
border: 1px dashed var(--public-line);
}
.public-member-auth__settings-content {
display: grid;
width: min(100%, 72rem);
gap: var(--public-space-2xl);
}
.public-member-auth__settings-section-head {
display: grid;
gap: var(--public-space-xs);
padding-bottom: var(--public-space-md);
border-bottom: 1px solid var(--public-line);
}
.public-member-auth__settings-section-head p, .public-member-auth__account-management-copy p {
color: var(--public-muted);
}
.public-member-auth__form--profile {
gap: var(--public-space-lg);
}
.public-member-auth__settings-content .public-member-auth__field input:disabled {
background: var(--public-white);
color: var(--public-muted);
}
.public-member-auth__settings-content .public-member-auth__field input:focus-visible, .public-member-auth__settings-content .public-member-auth__field select:focus-visible {
border-color: var(--public-ink);
box-shadow: 0 0 0 1px var(--public-ink);
}
.public-member-auth__submit--profile.public-button {
width: auto;
min-width: 14rem;
justify-self: end;
margin-top: var(--public-space-sm);
}
.public-member-auth__new-reservation.public-button, .public-member-auth__submit--profile.public-button {
color: var(--public-ink);
}
.public-member-auth__new-reservation.public-button:hover, .public-member-auth__new-reservation.public-button:focus-visible, .public-member-auth__submit--profile.public-button:hover, .public-member-auth__submit--profile.public-button:focus-visible {
color: var(--public-ink);
}
.public-member-auth--profile {
padding-block-end: var(--public-space-page);
}
.public-member-auth--profile :focus-visible {
outline-color: var(--public-ink);
}
.public-member-auth--profile .public-member-auth__shell {
display: block;
}
.public-member-auth--profile .public-member-auth__panel {
width: 100%;
padding: 0;
border: 0;
}
.public-member-auth__account-management {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--public-space-lg);
padding-top: var(--public-space-xl);
border-top: 1px solid var(--public-line);
}
.public-member-auth__account-management-copy {
display: grid;
gap: var(--public-space-2xs);
}
.public-member-auth__account-management-actions, .public-member-auth__logout {
display: flex;
align-items: center;
gap: var(--public-space-xs);
}
.public-member-auth__password-link.public-button, .public-member-auth__logout-button.public-button {
border-color: var(--public-ink);
color: var(--public-ink);
}
.public-member-auth__password-link.public-button:hover, .public-member-auth__password-link.public-button:focus-visible, .public-member-auth__logout-button.public-button:hover, .public-member-auth__logout-button.public-button:focus-visible {
color: var(--public-ink);
}
@media (max-width: 1023px) and (min-width: 768px) {
.public-member-auth__reservation-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.public-member-auth {
padding-top: calc(var(--public-header-height) + var(--section-sm));
padding-block-start: calc(var(--public-header-height) + var(--section-sm));
}
.public-member-auth.no-section-lg {
padding-top: calc(var(--public-header-height) + var(--section-sm));
padding-block-start: calc(var(--public-header-height) + var(--section-sm));
}
.public-member-auth__shell {
padding-right: var(--public-shell-gutter);
padding-left: var(--public-shell-gutter);
}
.public-member-auth__panel {
padding: var(--public-space-xl);
}
.public-member-auth__grid {
grid-template-columns: 1fr;
}
.public-member-auth__captcha-row {
grid-template-columns: 1fr var(--public-control-md);
}
.public-member-auth__field--captcha {
grid-column: 1/-1;
}
.public-member-auth__profile-head {
padding-block: var(--public-space-3xl);
}
.public-member-auth__account {
align-items: center;
}
.public-member-auth__tabs {
gap: var(--public-space-lg);
overflow-x: auto;
}
.public-member-auth__tab {
flex: 0 0 auto;
}
.public-member-auth__section-head {
align-items: stretch;
flex-direction: column;
}
.public-member-auth__reservation-grid {
grid-template-columns: 1fr;
}
.public-member-auth__reservation-empty {
padding: var(--public-space-3xl) var(--public-space-md);
}
.public-member-auth__submit--profile.public-button {
width: 100%;
}
.public-member-auth__account-management {
align-items: stretch;
flex-direction: column;
}
.public-member-auth__account-management-actions {
display: grid;
grid-template-columns: 1fr;
}
.public-member-auth__account-management-actions .public-button {
width: 100%;
}
.public-member-auth--profile .public-member-auth__panel {
padding: 0;
}
}
.public-member-auth-page ~ .no-floating-cta {
display: none;
}
.public-social-popup {
display: grid;
min-height: 100dvh;
margin: 0;
padding: var(--public-space-xl);
place-items: center;
background: var(--public-surface);
color: var(--public-ink);
}
.public-social-popup__panel {
display: grid;
width: min(100%, var(--public-auth-panel-max));
padding: var(--public-space-xl);
gap: var(--public-space-sm);
border: 1px solid var(--public-line);
background: var(--public-white);
text-align: center;
}
.public-social-popup__loader {
width: var(--public-space-lg);
height: var(--public-space-lg);
margin-inline: auto;
border: 2px solid var(--public-line);
border-right-color: var(--public-blue);
border-radius: 50%;
animation: public-button-spin var(--dur-slow) linear infinite;
}
.public-social-popup__help {
color: var(--public-muted);
}
.public-guide--review .public-guide__hero {
max-width: none;
padding-bottom: var(--section-sm);
}
.public-guide--review .public-guide__hero h1 {
margin-block: var(--public-space-lg);
}
.public-guide--review .public-guide__section {
scroll-margin-top: 12rem;
}
.public-guide--review .public-guide__type-row {
display: grid;
grid-template-columns: 18rem minmax(0, 1fr);
gap: var(--public-space-xl);
padding-block: var(--public-space-2xl);
border-bottom: 1px solid var(--public-line);
}
.public-guide--review .public-guide__type-row > div > p + p {
margin-top: var(--public-space-sm);
}
.public-guide--review .public-guide__type-row strong {
font-weight: var(--font-weight-medium);
}
.public-guide--review .public-guide__action-grid, .public-guide--review .public-guide__compositions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-xl);
}
.public-guide--review .public-guide__action-sample {
display: grid;
gap: var(--public-space-lg);
padding: var(--public-space-2xl);
border: 1px solid var(--public-line);
}
.public-guide--review .public-guide__states {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--public-space-lg);
padding-block: var(--public-space-2xl);
}
.public-guide--review .public-guide__states > p {
flex-basis: 100%;
}
.public-guide--review .public-guide__composition {
display: grid;
gap: var(--public-space-xl);
padding: var(--section-sm);
background: var(--public-brand-surface-strong);
}
.public-guide--review .public-guide__composition--dark {
color: var(--public-white);
background: var(--public-brand-dark);
}
.public-guide--review .public-guide__composition--dark .public-button {
color: inherit;
}
.public-guide--review .public-guide__motion {
display: grid;
gap: var(--public-space-lg);
padding-block: var(--section-sm);
}
.public-guide--review .public-guide__process-review {
margin-top: var(--public-space-xl);
}
.public-guide--review .public-guide__process-options {
gap: 1.2rem 3.2rem;
}
.public-guide--review .public-guide__process-options small {
margin-left: 0.8rem;
font-size: 1.1rem;
font-weight: 400;
color: var(--public-muted);
}
.public-guide--review .public-guide__process-note {
max-width: 76rem;
margin-block: 1.6rem 3.2rem;
color: var(--public-muted);
text-wrap: pretty;
}
.public-guide--review .public-guide__process-studies {
display: grid;
grid-template-columns: minmax(0, 72rem) minmax(0, 36rem);
gap: 4rem;
align-items: start;
}
.public-guide--review .public-guide__process-study {
min-width: 0;
}
.public-guide--review .public-guide__process-label {
margin-bottom: 1.2rem;
color: var(--public-muted);
}
.public-guide--review .public-guide__process-canvas {
container-type: inline-size;
background: var(--public-surface-subtle);
}
.public-guide--review .public-guide__process-sample {
padding: 4rem 3.2rem;
}
.public-guide--review .public-guide__process-heading {
display: flex;
align-items: baseline;
gap: 1.6rem;
}
.public-guide--review .public-guide__process-index {
flex-shrink: 0;
color: var(--public-brand-accent);
font: 400 1.3rem/1.5 var(--font-sans-family);
font-variant-numeric: tabular-nums;
}
.public-guide--review .public-guide__process-total {
display: none;
}
.public-guide--review .public-guide__process-review:has(#guide-process-total:checked) .public-guide__process-total {
display: inline;
}
.public-guide--review .public-guide__process-heading h3 {
font: 500 clamp(2rem, 2vw, 2.4rem)/1.5 var(--font-sans-family);
word-break: keep-all;
text-wrap: balance;
}
.public-guide--review .public-guide__process-figure {
position: relative;
margin: 2.4rem 0 3.2rem;
}
.public-guide--review .public-guide__process-art {
position: relative;
aspect-ratio: 2;
}
.public-guide--review .public-guide__process-portrait {
position: absolute;
left: 3.5714%;
top: 7.1429%;
width: 42.8571%;
height: auto;
aspect-ratio: 1;
object-fit: contain;
}
.public-guide--review .public-guide__process-connection {
position: absolute;
inset: 0;
width: 100%;
height: auto;
}
.public-guide--review .public-guide__process-figure figcaption {
position: absolute;
left: 62.5%;
top: calc(25.3571% - 1rem);
padding-left: 1.2rem;
color: var(--public-brand-accent);
font-size: 1.3rem;
line-height: 2rem;
}
.public-guide--review .public-guide__process-body {
max-inline-size: 32em;
font-size: 1.6rem;
line-height: 1.85;
word-break: keep-all;
overflow-wrap: break-word;
text-wrap: balance;
}
.public-guide--review .public-guide__process-caption {
max-inline-size: 40em;
margin-top: 2rem;
color: var(--public-muted);
font-size: 1.1rem;
line-height: 1.7;
word-break: keep-all;
text-wrap: pretty;
}
@container (max-width: 480px) {
.public-guide--review .public-guide__process-sample {
padding: 2.8rem 2rem;
}
.public-guide--review .public-guide__process-heading {
gap: 1.2rem;
}
.public-guide--review .public-guide__process-heading h3 {
font-size: 2rem;
}
.public-guide--review .public-guide__process-figure {
margin-block: 2.8rem;
}
.public-guide--review .public-guide__process-art {
width: min(100%, 30rem);
margin-inline: auto;
aspect-ratio: 1.3;
}
.public-guide--review .public-guide__process-portrait {
left: 15%;
top: 0;
width: 70%;
}
.public-guide--review .public-guide__process-connection {
display: none;
}
.public-guide--review .public-guide__process-figure figcaption {
position: static;
padding: 0;
margin-top: 0.8rem;
text-align: center;
}
.public-guide--review .public-guide__process-body {
font-size: 1.5rem;
line-height: 1.85;
}
}
@media (max-width: 1023px) {
.public-guide--review .public-guide__process-studies {
grid-template-columns: minmax(0, 1fr);
gap: 3.2rem;
}
.public-guide--review .public-guide__process-study--compact {
width: min(100%, 36rem);
}
}
.public-guide--review .public-guide__menu-studies {
display: grid;
gap: 4rem;
margin-top: 3.2rem;
}
.public-guide--review .public-guide__menu-study {
border: 1px solid var(--public-line);
}
.public-guide--review .public-guide__menu-heading {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 1.2rem 2.4rem;
padding: 2.4rem 3.2rem;
}
.public-guide--review .public-guide__menu-heading h3 {
display: flex;
align-items: center;
gap: 1.6rem;
}
.public-guide--review .public-guide__menu-heading p {
color: var(--public-muted);
}
.public-guide--review .public-guide__menu-number {
font-family: var(--font-sans-family);
font-size: 1.2rem;
}
.public-guide--review .public-guide__menu-badge {
padding: 0.4rem 0.8rem;
background: var(--public-brand-surface-strong);
}
.public-guide--review .public-guide__menu-surface {
display: grid;
grid-template-columns: 8rem minmax(0, 1fr);
align-items: center;
gap: 2.4rem;
padding: 2rem 3.2rem;
color: var(--public-brand-ink);
background: var(--public-brand-surface);
}
.public-guide--review .public-guide__menu-surface--dark {
color: var(--public-brand-surface);
background: color-mix(in srgb, var(--public-brand-ink) 82%, var(--public-brand-surface));
}
.public-guide--review .public-guide__menu-tone {
font: 500 1rem/1.5 var(--font-sans-family);
letter-spacing: 0.1em;
opacity: 0.75;
}
.public-guide--review .public-guide__menu-preview {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem 4.8rem;
}
.public-guide--review .public-guide__menu-link {
color: inherit;
opacity: 0.76;
transition: opacity 180ms var(--public-ease);
}
.public-guide--review .public-guide__menu-link:hover, .public-guide--review .public-guide__menu-link:focus-visible, .public-guide--review .public-guide__menu-link[aria-current=page], .public-guide--review .public-guide__menu-link.is-current {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.public-guide--review .public-guide__menu-link {
transition: none;
}
}
.public-guide--review .public-guide__menu-link {
position: relative;
display: inline-flex;
align-items: center;
min-height: 4.8rem;
padding: 0.8rem 0;
font: 500 1.5rem/1.5 var(--font-sans-family);
letter-spacing: 0.015em;
text-decoration: none;
}
.public-guide--review .public-guide__menu-link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 5px;
}
.public-guide--review .public-guide__menu-link--dot::after,
.public-guide--review .public-guide__menu-link--underline::after {
position: absolute;
bottom: 0.3rem;
background: currentColor;
content: "";
opacity: 0;
pointer-events: none;
transition: opacity 180ms var(--public-ease), transform 180ms var(--public-ease);
}
.public-guide--review .public-guide__menu-link--dot::after {
left: calc(50% - 1.5px);
width: 3px;
height: 3px;
border-radius: 50%;
}
.public-guide--review .public-guide__menu-link--underline::after {
inset-inline: 0;
height: 1px;
transform: scaleX(0);
transform-origin: center;
}
.public-guide--review .public-guide__menu-link:hover::after,
.public-guide--review .public-guide__menu-link:focus-visible::after,
.public-guide--review .public-guide__menu-link[aria-current=page]::after {
opacity: 1;
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
.public-guide--review .public-guide__menu-link, .public-guide--review .public-guide__menu-link::after {
transition: none;
}
}
.public-guide--review .public-guide__dropdown-heading {
display: grid;
gap: var(--public-space-sm);
margin-top: var(--public-space-section);
padding-top: var(--public-space-2xl);
border-top: 1px solid var(--public-line);
}
.public-guide--review .public-guide__dropdown-heading p {
max-width: 78rem;
color: var(--public-muted);
}
.public-guide--review .public-guide__dropdown-studies {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-xl);
margin-top: var(--public-space-xl);
}
.public-guide--review .public-guide__dropdown-study {
min-width: 0;
border: 1px solid var(--public-line);
}
.public-guide--review .public-guide__dropdown-study > .public-guide__menu-tone {
display: block;
padding: 1.6rem 2rem;
color: var(--public-muted);
}
.public-guide--review .public-guide__dropdown-surface {
--dropdown-header: var(--public-brand-dark);
--dropdown-ground: var(--dropdown-header);
--dropdown-text: var(--public-brand-surface);
--dropdown-surface: var(--color-background-dropdown-dark);
display: grid;
grid-template-columns: minmax(12rem, 1fr) minmax(20rem, 1.5fr);
gap: var(--public-space-md);
min-height: 30rem;
padding: 1.6rem;
color: var(--dropdown-text);
background: linear-gradient(to bottom, var(--dropdown-header) 0 7.6rem, var(--dropdown-ground) 7.6rem);
}
.public-guide--review .public-guide__dropdown-surface--light {
--dropdown-header: var(--public-white);
--dropdown-text: var(--public-brand-ink);
--dropdown-surface: var(--color-background-dropdown-light);
}
.public-guide--review .public-guide__dropdown-example {
position: relative;
min-width: 0;
}
.public-guide--review .public-guide__dropdown-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--public-control-sm);
list-style: none;
color: inherit;
cursor: pointer;
font: 500 1.4rem/1.4 var(--font-sans-family);
letter-spacing: 0.015em;
}
.public-guide--review .public-guide__dropdown-trigger::-webkit-details-marker {
display: none;
}
.public-guide--review .public-guide__dropdown-trigger:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
.public-guide--review .public-guide__dropdown-trigger--language {
position: relative;
isolation: isolate;
border: 0;
background: transparent;
border-radius: var(--public-action-radius);
text-decoration: none;
}
.public-guide--review .public-guide__dropdown-trigger--language::before, .public-guide--review .public-guide__dropdown-trigger--language::after {
position: absolute;
inset-block: 0;
box-sizing: border-box;
width: var(--public-action-end-width);
border: 1px solid currentColor;
content: "";
pointer-events: none;
transition: width var(--public-action-duration) var(--public-ease);
}
.public-guide--review .public-guide__dropdown-trigger--language::before {
inset-inline-start: 0;
border-inline-end: 0;
border-radius: var(--public-action-radius) 0 0 var(--public-action-radius);
}
.public-guide--review .public-guide__dropdown-trigger--language::after {
inset-inline-end: 0;
border-inline-start: 0;
border-radius: 0 var(--public-action-radius) var(--public-action-radius) 0;
}
.public-guide--review .public-guide__dropdown-trigger--language:hover::before, .public-guide--review .public-guide__dropdown-trigger--language:hover::after, .public-guide--review .public-guide__dropdown-trigger--language:focus-visible::before, .public-guide--review .public-guide__dropdown-trigger--language:focus-visible::after, .public-guide--review .public-guide__dropdown-trigger--language.is-frame-completing::before, .public-guide--review .public-guide__dropdown-trigger--language.is-frame-completing::after, .public-guide--review .public-guide__dropdown-trigger--language[aria-expanded=true]::before, .public-guide--review .public-guide__dropdown-trigger--language[aria-expanded=true]::after {
width: calc(50% + 1px);
}
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
.public-guide--review .public-guide__dropdown-trigger--language::before, .public-guide--review .public-guide__dropdown-trigger--language::after {
width: calc(50% + 1px);
}
}
.public-guide--review .public-guide__dropdown-trigger--language:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.public-guide--review .public-guide__dropdown-trigger--language::before, .public-guide--review .public-guide__dropdown-trigger--language::after {
transition: none;
}
}
.public-guide--review .public-guide__dropdown-trigger--language {
gap: 0.8rem;
width: 8.8rem;
margin-inline: auto;
display: flex;
padding-inline: 1.4rem;
}
.public-guide--review .public-guide__dropdown-trigger--language svg {
flex: 0 0 1.8rem;
width: 1.8rem;
height: 1.8rem;
}
.public-guide--review .public-guide__dropdown-current {
display: none;
}
.public-guide--review .public-guide__dropdown-example:has(input[value=KO]:checked) .public-guide__dropdown-current--ko,
.public-guide--review .public-guide__dropdown-example:has(input[value=EN]:checked) .public-guide__dropdown-current--en,
.public-guide--review .public-guide__dropdown-example:has(input[value=JA]:checked) .public-guide__dropdown-current--ja {
display: inline;
}
.public-guide--review .public-guide__dropdown-example[open] .public-guide__dropdown-trigger--language::before,
.public-guide--review .public-guide__dropdown-example[open] .public-guide__dropdown-trigger--language::after {
width: calc(50% + 1px);
}
.public-guide--review .public-guide__dropdown-trigger--menu {
width: 100%;
padding-inline: 1.2rem;
opacity: 0.76;
}
.public-guide--review .public-guide__dropdown-trigger--menu:hover, .public-guide--review .public-guide__dropdown-trigger--menu:focus-visible {
opacity: 1;
}
.public-guide--review .public-guide__dropdown-example[open] .public-guide__dropdown-trigger--menu {
opacity: 1;
}
.public-guide--review .public-guide__dropdown-panel {
position: absolute;
top: 6rem;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: grid;
width: 12rem;
min-width: 12rem;
margin: 0;
padding: 0.8rem;
border: 0;
color: var(--dropdown-text);
background: var(--dropdown-surface);
box-shadow: none;
}
.public-guide--review .public-guide__dropdown-example--menu .public-guide__dropdown-panel {
width: min(24rem, 100%);
}
.public-guide--review .public-guide__dropdown-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 4.4rem;
padding: 0.8rem 1.2rem 1rem;
border: 0;
color: inherit;
background: transparent;
font: 400 1.4rem/1.4 var(--font-sans-family);
text-align: center;
text-decoration: none;
opacity: 0.66;
cursor: pointer;
transition: opacity var(--public-duration) var(--public-ease);
}
.public-guide--review .public-guide__dropdown-item input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.public-guide--review .public-guide__dropdown-item::after {
position: absolute;
bottom: 0.7rem;
left: 50%;
transform: translateX(-50%);
width: 1.6rem;
height: 1px;
background: currentColor;
content: "";
opacity: 0;
}
.public-guide--review .public-guide__dropdown-item:hover, .public-guide--review .public-guide__dropdown-item:focus-visible, .public-guide--review .public-guide__dropdown-item:focus-within, .public-guide--review .public-guide__dropdown-item.is-current, .public-guide--review .public-guide__dropdown-item:has(input:checked) {
opacity: 1;
}
.public-guide--review .public-guide__dropdown-item:focus-visible, .public-guide--review .public-guide__dropdown-item:focus-within {
outline: 2px solid currentColor;
outline-offset: -2px;
}
.public-guide--review .public-guide__dropdown-item.is-current, .public-guide--review .public-guide__dropdown-item:has(input:checked) {
font-weight: var(--font-weight-medium);
}
.public-guide--review .public-guide__dropdown-item.is-current::after, .public-guide--review .public-guide__dropdown-item:has(input:checked)::after {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.public-guide--review .public-guide__dropdown-item {
transition: none;
}
}
.public-guide--review .public-guide__category-studies {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-xl);
margin-top: var(--public-space-2xl);
}
.public-guide--review .public-guide__category-study {
min-width: 0;
border: 1px solid var(--public-line);
}
.public-guide--review .public-guide__category-heading {
display: grid;
gap: 0.8rem;
padding: 2.4rem 2.8rem;
}
.public-guide--review .public-guide__category-heading h3 {
display: flex;
align-items: center;
gap: 1.2rem;
}
.public-guide--review .public-guide__category-heading p {
color: var(--public-muted);
}
.public-guide--review .public-guide__category-context {
min-width: 0;
padding: 2rem 2.8rem;
border-top: 1px solid var(--public-line);
background: color-mix(in srgb, var(--public-brand-surface-strong) 48%, transparent);
}
.public-guide--review .public-guide__category-context--appointment {
background: var(--public-brand-surface);
}
.public-guide--review .public-guide__category-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.public-guide--review .public-guide__category-columns > :first-child {
border-right: 1px solid var(--public-line);
}
.public-guide--review .public-guide__category-caption {
margin-bottom: 1.4rem;
color: var(--public-brand-ink);
font: 500 1.1rem/1.5 var(--font-sans-family);
letter-spacing: 0.04em;
}
.public-guide--review .public-guide__category-caption span {
margin-left: 0.8rem;
color: var(--public-muted);
font-weight: var(--font-weight-regular);
letter-spacing: 0;
}
.public-guide--review .public-guide__category-options {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.public-guide--review .public-guide__category-options--horizontal {
display: flex;
gap: 0.6rem;
overflow-x: auto;
scrollbar-width: none;
}
.public-guide--review .public-guide__category-options--horizontal::-webkit-scrollbar {
display: none;
}
.public-guide--review .public-guide__category-options--vertical {
display: grid;
gap: 0.3rem;
}
.public-guide--review .public-guide__category-option {
position: relative;
display: block;
min-width: 0;
}
.public-guide--review .public-guide__category-option input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
}
.public-guide--review .public-guide__category-option label {
position: relative;
display: flex;
align-items: center;
min-height: 4.2rem;
padding: 0.8rem 1.2rem;
color: var(--color-text-muted);
font: 400 1.4rem/1.45 var(--font-sans-family);
cursor: pointer;
transition: color 180ms var(--public-ease), background-color 180ms var(--public-ease);
}
.public-guide--review .public-guide__category-option input:checked + label {
color: var(--public-brand-ink);
font-weight: var(--font-weight-semibold);
}
.public-guide--review .public-guide__category-option input:hover + label, .public-guide--review .public-guide__category-option input:focus-visible + label, .public-guide--review .public-guide__category-option label:hover {
color: var(--public-brand-ink);
}
.public-guide--review .public-guide__category-option input:focus-visible + label {
outline: 2px solid var(--public-brand-ink);
outline-offset: -2px;
}
.public-guide--review .public-guide__category-options--horizontal .public-guide__category-option {
flex: 0 0 auto;
}
.public-guide--review .public-guide__category-options--vertical .public-guide__category-option label {
width: 100%;
}
.public-guide--review .public-guide__category-ordinal {
display: none;
}
.public-guide--review .public-guide__category-options--surface input:checked + label {
background: color-mix(in srgb, var(--public-brand-ink) 13%, transparent);
}
.public-guide--review .public-guide__category-options--surface label:hover {
background: color-mix(in srgb, var(--public-brand-ink) 7%, transparent);
}
.public-guide--review .public-guide__category-options--rule label::after {
position: absolute;
background: currentColor;
content: "";
opacity: 0;
transition: opacity 180ms var(--public-ease);
}
.public-guide--review .public-guide__category-options--rule input:checked + label::after {
opacity: 1;
}
.public-guide--review .public-guide__category-options--rule.public-guide__category-options--horizontal label::after {
right: 1.2rem;
bottom: 0.2rem;
left: 1.2rem;
height: 1px;
}
.public-guide--review .public-guide__category-options--rule.public-guide__category-options--vertical label::after {
top: 0.8rem;
bottom: 0.8rem;
left: 0;
width: 1px;
}
.public-guide--review .public-guide__category-options--index .public-guide__category-ordinal {
display: inline;
flex: 0 0 2.4rem;
color: var(--public-brand-accent);
font: 500 1.1rem/1 var(--font-sans-family);
}
.public-guide--review .public-guide__category-options--index input:checked + label .public-guide__category-ordinal {
color: var(--public-brand-ink);
}
.public-guide--review .public-guide__pagination-studies {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--public-space-xl);
margin-top: var(--public-space-2xl);
}
.public-guide--review .public-guide__pagination-study {
min-width: 0;
border: 1px solid var(--public-line);
}
.public-guide--review .public-guide__pagination-surface {
display: grid;
gap: 1.6rem;
min-height: 15rem;
align-content: center;
padding: 2.4rem;
border-top: 1px solid var(--public-line);
color: var(--public-brand-ink);
background: var(--public-brand-surface);
}
.public-guide--review .public-guide__pagination-surface--dark {
color: var(--public-brand-surface);
background: color-mix(in srgb, var(--public-brand-ink) 82%, var(--public-brand-surface));
}
.public-guide--review .public-guide__pagination-preview {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
font: 400 1.4rem/1.4 var(--font-sans-family);
}
.public-guide--review .public-guide__pagination-direction,
.public-guide--review .public-guide__pagination-number {
display: inline-flex;
min-width: 3.6rem;
min-height: 4.4rem;
align-items: center;
justify-content: center;
color: inherit;
opacity: 0.55;
}
.public-guide--review .public-guide__pagination-direction {
font-size: 1.8rem;
}
.public-guide--review .public-guide__pagination-number.is-current {
font-weight: var(--font-weight-medium);
opacity: 1;
}
.public-guide--review .public-guide__pagination-preview--type .is-current {
font-size: 1.7rem;
}
.public-guide--review .public-guide__pagination-preview--rule .is-current {
border-bottom: 1px solid currentColor;
}
.public-guide--review .public-guide__pagination-preview--counter {
gap: 1.2rem;
}
.public-guide--review .public-guide__pagination-preview--counter .public-guide__pagination-direction {
min-width: 4.4rem;
font-size: 1.2rem;
}
.public-guide--review .public-guide__pagination-count {
display: inline-flex;
align-items: baseline;
gap: 0.8rem;
min-width: 9rem;
justify-content: center;
}
.public-guide--review .public-guide__pagination-count strong {
font-size: 2.4rem;
font-weight: var(--font-weight-medium);
}
.public-guide--review .public-guide__pagination-count span {
opacity: 0.55;
}
@media (max-width: 480px) {
.public-guide--review .public-guide__pagination-direction--edge {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.public-guide--review .public-guide__category-option label,
.public-guide--review .public-guide__category-options--rule label::after {
transition: none;
}
}
@media (max-width: 1023px) {
.public-guide--review .public-guide__pagination-studies {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.public-guide--review .public-guide__pagination-study:last-child {
grid-column: 1/-1;
}
}
@media (max-width: 768px) {
.public-guide--review .public-guide__type-row, .public-guide--review .public-guide__section-head,
.public-guide--review .public-guide__action-grid, .public-guide--review .public-guide__compositions,
.public-guide--review .public-guide__category-studies, .public-guide--review .public-guide__dropdown-studies {
grid-template-columns: minmax(0, 1fr);
}
.public-guide--review .public-guide__composition {
padding: var(--public-space-xl);
}
.public-guide--review .public-guide__menu-heading, .public-guide--review .public-guide__menu-surface {
padding: 2rem;
}
.public-guide--review .public-guide__menu-surface {
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
.public-guide--review .public-guide__menu-preview {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.4rem 2.4rem;
}
.public-guide--review .public-guide__menu-link {
justify-self: start;
font-size: 1.4rem;
}
.public-guide--review .public-guide__dropdown-surface {
grid-template-columns: minmax(10rem, 1fr) minmax(18rem, 1.5fr);
gap: 0.8rem;
}
.public-guide--review .public-guide__category-heading, .public-guide--review .public-guide__category-context {
padding-inline: 1.8rem;
}
.public-guide--review .public-guide__category-columns {
grid-template-columns: minmax(0, 1fr);
}
.public-guide--review .public-guide__category-columns > :first-child {
border-right: 0;
}
.public-guide--review .public-guide__pagination-studies {
grid-template-columns: minmax(0, 1fr);
}
.public-guide--review .public-guide__pagination-study:last-child {
grid-column: auto;
}
}
@media (max-width: 380px) {
.public-guide--review .public-guide__dropdown-surface {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
background: var(--dropdown-ground);
}
.public-guide--review .public-guide__dropdown-example {
padding: 1.2rem;
background: var(--dropdown-header);
}
.public-guide--review .public-guide__dropdown-panel, .public-guide--review .public-guide__dropdown-example--menu .public-guide__dropdown-panel {
position: static;
width: 100%;
transform: none;
box-shadow: none;
}
}
.public-guide {
padding-top: 15rem;
color: var(--public-ink);
}
.public-guide__hero {
max-width: 78rem;
border-bottom: 1px solid var(--public-line);
}
.public-guide__eyebrow, .public-guide__section-head p {
color: var(--public-blue);
}
.public-guide__lead, .public-guide__copy {
margin-top: var(--public-space-sm);
color: var(--public-muted);
}
.public-guide__tabs {
display: flex;
gap: var(--public-space-xl);
margin: var(--public-space-xl) 0 var(--public-space-section);
overflow-x: auto;
border-bottom: 1px solid var(--public-line);
}
.public-guide__tabs a {
position: relative;
flex: 0 0 auto;
padding: var(--public-space-sm) 0;
color: var(--public-muted);
}
.public-guide__tabs a.is-active {
color: var(--public-ink);
}
.public-guide__tabs a.is-active::after {
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 2px;
background: var(--public-blue);
content: "";
}
.public-guide__section {
padding: var(--public-space-section) 0;
border-bottom: 1px solid var(--public-line);
}
.public-guide__section-head {
display: grid;
grid-template-columns: 18rem 1fr;
gap: var(--public-space-md);
margin-bottom: var(--public-space-2xl);
}
.public-guide__logo-stage, .public-guide__statement, .public-guide__stack {
display: grid;
gap: var(--public-space-lg);
padding: var(--public-space-2xl);
background: var(--public-surface-subtle);
}
.public-guide__stack {
grid-template-columns: minmax(0, 1fr);
}
.public-guide__booking-flow {
background: var(--public-white);
}
.public-guide__search-stages {
display: grid;
gap: var(--public-space-md);
}
.public-guide__search-stage {
padding: var(--public-space-xl);
background: var(--public-surface-subtle);
}
.public-guide__search-stage--dark {
background: var(--public-navy-deep);
}
.public-guide__logo-stage .public-logo {
position: static;
width: 9rem;
}
.public-guide__statement {
grid-template-columns: 1.1fr 0.9fr;
align-items: end;
}
.public-guide__statement p {
color: var(--public-muted);
}
.public-guide__swatches, .public-guide__cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--public-space-sm);
}
.public-guide__swatch {
display: grid;
gap: var(--public-space-2xs);
}
.public-guide__swatch > span {
aspect-ratio: 1;
border: 1px solid var(--public-line);
border-radius: var(--public-radius-sm);
background: var(--swatch);
}
.public-guide__swatch--ink {
--swatch: var(--public-brand-ink);
}
.public-guide__swatch--dark {
--swatch: var(--public-brand-dark);
}
.public-guide__swatch--accent {
--swatch: var(--public-brand-accent);
}
.public-guide__swatch--accent-soft {
--swatch: var(--public-brand-accent-soft);
}
.public-guide__swatch--surface {
--swatch: var(--public-brand-surface);
}
.public-guide__swatch--surface-strong {
--swatch: var(--public-brand-surface-strong);
}
.public-guide__swatch--line {
--swatch: var(--public-brand-line);
}
.public-guide__swatch--white {
--swatch: var(--public-white);
}
.public-guide__swatch code, .public-guide__registry code {
color: var(--public-muted);
}
.public-guide__registry span {
color: var(--public-blue);
}
.public-guide__type {
display: grid;
gap: var(--public-space-lg);
}
.public-guide__utility-group {
display: grid;
gap: var(--public-space-sm);
padding: var(--public-space-xl);
border: 1px solid var(--public-line);
}
.public-guide__utility-row {
display: grid;
grid-template-columns: 18rem minmax(0, 1fr);
gap: var(--public-space-md);
align-items: baseline;
padding-top: var(--public-space-sm);
border-top: 1px solid var(--public-line);
}
.public-guide__utility-row p {
margin: 0;
}
.public-guide__spacing-list {
display: grid;
gap: var(--public-space-xs);
}
.public-guide__spacing-row {
display: grid;
grid-template-columns: 18rem 18rem minmax(0, 1fr);
gap: var(--public-space-md);
align-items: center;
}
.public-guide__spacing-bar {
display: block;
width: var(--spacing-preview);
min-width: 1px;
height: var(--public-space-xs);
background: var(--public-blue);
}
.public-guide__spacing-bar--xxs {
--spacing-preview: var(--spacing-xxs);
}
.public-guide__spacing-bar--xs {
--spacing-preview: var(--spacing-xs);
}
.public-guide__spacing-bar--sm {
--spacing-preview: var(--spacing-sm);
}
.public-guide__spacing-bar--md {
--spacing-preview: var(--spacing-md);
}
.public-guide__spacing-bar--lg {
--spacing-preview: var(--spacing-lg);
}
.public-guide__spacing-bar--xl {
--spacing-preview: var(--spacing-xl);
}
.public-guide__spacing-bar--2xl {
--spacing-preview: var(--spacing-2xl);
}
.public-guide__spacing-bar--3xl {
--spacing-preview: var(--spacing-3xl);
}
.public-guide__spacing-bar--4xl {
--spacing-preview: var(--spacing-4xl);
}
.public-guide__spacing-bar--5xl {
--spacing-preview: var(--spacing-5xl);
}
.public-guide__spacing-bar--6xl {
--spacing-preview: var(--spacing-6xl);
}
.public-guide__section-utilities {
display: flex;
flex-wrap: wrap;
gap: var(--public-space-xs);
}
.public-guide__section-utilities code {
padding: var(--public-space-xs) var(--public-space-sm);
background: var(--public-surface-subtle);
}
.public-guide__actions {
display: flex;
flex-wrap: wrap;
gap: var(--public-space-sm);
align-items: center;
}
.public-guide__state-grid, .public-guide__feedback-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--public-space-sm);
}
.public-guide__state-card {
display: grid;
min-height: 16rem;
place-items: center;
align-content: center;
gap: var(--public-space-xs);
padding: var(--public-space-lg);
border: 1px solid var(--public-line);
background: var(--public-white);
text-align: center;
}
.public-guide__state-card span {
color: var(--public-muted);
}
.public-guide__feedback-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.public-guide__feedback-grid .ui-toast, .public-guide__feedback-preview .ui-toast {
position: static;
width: 100%;
}
.public-guide__feedback-preview {
max-width: var(--public-cart-toast-max);
margin-inline: auto;
}
.public-guide__motion-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--public-space-md);
}
.public-guide__motion-card {
display: grid;
min-height: 24rem;
gap: var(--public-space-xl);
align-content: center;
padding: var(--public-space-2xl);
overflow: hidden;
border: 1px solid var(--public-line);
border-radius: var(--public-radius-md);
background: var(--public-surface-subtle);
}
.public-guide__motion-card code {
color: var(--public-blue);
}
.public-guide__stack .public-section-index {
position: static;
}
.public-guide__cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-bottom: var(--public-space-xl);
}
.public-guide__pictogram-sizes, .public-guide__pictograms {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--public-space-sm);
}
.public-guide__pictogram-sizes article, .public-guide__pictogram-card {
display: grid;
min-width: 0;
place-items: center;
gap: var(--public-space-xs);
padding: var(--public-space-lg);
border: 1px solid var(--public-line);
background: var(--public-white);
text-align: center;
}
.public-guide__pictogram-card span {
max-width: 100%;
overflow-wrap: anywhere;
color: var(--public-muted);
}
.public-guide__pictograms {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.public-guide__registry {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--public-line);
border: 1px solid var(--public-line);
}
.public-guide__registry article {
display: grid;
gap: var(--public-space-2xs);
padding: var(--public-space-md);
background: var(--public-white);
}
.public-guide__registry-summary {
display: flex;
gap: var(--public-space-sm);
align-items: baseline;
color: var(--public-muted);
}
.public-guide__registry-summary strong {
color: var(--public-blue);
}
@media (max-width: 1023px) {
.public-guide {
padding-top: 12rem;
}
.public-guide__swatches {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.public-guide__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.public-guide__pictograms {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.public-guide__state-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.public-guide {
padding-top: 10rem;
}
.public-guide__tabs {
gap: var(--public-space-lg);
}
.public-guide__section-head, .public-guide__statement, .public-guide__swatches, .public-guide__cards, .public-guide__registry, .public-guide__motion-grid, .public-guide__utility-row, .public-guide__spacing-row {
grid-template-columns: 1fr;
}
.public-guide__pictogram-sizes, .public-guide__pictograms {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.public-guide__state-grid, .public-guide__feedback-grid {
grid-template-columns: 1fr;
}
.public-guide__logo-stage, .public-guide__statement, .public-guide__stack {
padding: var(--public-space-lg);
}
}
.public-notice {
display: grid;
grid-template-columns: 0.4rem minmax(0, 1fr);
gap: var(--public-space-md);
padding: var(--public-space-lg);
color: var(--public-ink);
background: var(--public-surface);
border: 1px solid var(--public-line);
}
.public-notice__mark {
background: var(--public-blue);
}
.public-notice__content {
display: grid;
gap: var(--public-space-xs);
}
.public-notice__message {
margin: 0;
color: var(--public-muted);
}
.public-notice__list {
display: grid;
gap: var(--public-space-xs);
margin: 0;
padding-left: var(--public-space-lg);
}
.public-notice--success .public-notice__mark {
background: var(--public-feedback-success);
}
.public-notice--warning .public-notice__mark {
background: var(--public-feedback-warning);
}
.public-notice--error .public-notice__mark {
background: var(--public-feedback-error);
}
.newyoung-notice-archive {
--notice-directory-title-font-size: clamp(2.8rem, 2.5vw, 3.6rem);
--notice-directory-item-font-size: clamp(1.5rem, 1.12vw, 1.6rem);
position: relative;
min-height: 100svh;
padding: calc(var(--public-header-height) + 7rem) 0 10rem;
box-sizing: border-box;
color: var(--public-ink, var(--clr-base-black));
background: var(--public-surface-subtle);
}
.newyoung-notice-archive__inner {
display: grid;
grid-template-columns: 4fr 8fr;
align-items: start;
}
.newyoung-notice-archive__hero, .newyoung-notice-archive__content {
width: 100%;
}
.newyoung-notice-archive__hero {
grid-column: 1;
min-height: 0;
padding: 0;
text-align: left;
background: transparent;
}
.newyoung-notice-archive__intro {
max-width: 26rem;
}
.newyoung-notice-archive__eyebrow, .newyoung-notice-archive__description {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.newyoung-notice-archive__title {
max-width: 18ch;
margin: 0;
color: var(--public-ink);
font-family: var(--font-display-family);
font-size: var(--notice-directory-title-font-size);
font-weight: var(--font-weight-medium);
line-height: 1.1;
letter-spacing: 0.03em;
text-wrap: balance;
}
.newyoung-notice-archive__content {
position: relative;
grid-column: 2;
min-width: 0;
padding: 0;
}
.newyoung-notice-archive__list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid color-mix(in srgb, var(--public-ink) 12%, transparent);
}
.newyoung-notice-archive__row {
border-bottom: 1px solid color-mix(in srgb, var(--public-ink) 12%, transparent);
}
.newyoung-notice-archive__item {
display: grid;
grid-template-columns: minmax(0, 1fr) 10rem;
align-items: center;
gap: var(--public-space-lg);
min-height: 8.1rem;
padding: 3rem 2rem;
box-sizing: border-box;
color: inherit;
border-bottom: 0;
}
.newyoung-notice-archive__item:focus-visible {
color: var(--public-ink);
background: transparent;
outline: var(--public-focus-width) solid var(--public-ink);
outline-offset: calc(-1 * var(--public-focus-width));
}
.newyoung-notice-archive__item-title {
display: flex;
align-items: center;
gap: var(--public-space-sm);
min-width: 0;
margin: 0;
font-size: var(--notice-directory-item-font-size);
font-weight: var(--font-weight-medium);
line-height: 1.4;
opacity: 1;
transition: opacity var(--public-duration) var(--public-ease);
}
.newyoung-notice-archive__item:hover .newyoung-notice-archive__item-title, .newyoung-notice-archive__item:focus-visible .newyoung-notice-archive__item-title {
opacity: 0.52;
}
.newyoung-notice-archive__category {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
white-space: nowrap;
clip: rect(0 0 0 0);
border: 0;
}
.newyoung-notice-archive__date {
justify-self: end;
color: var(--public-ink);
font-size: var(--body-xs-fs);
line-height: var(--body-xs-lh);
white-space: nowrap;
}
.newyoung-notice-archive__empty {
margin-top: 0;
border-block: 1px solid color-mix(in srgb, var(--public-ink) 12%, transparent);
}
.newyoung-notice-archive .public-pagination {
margin-top: var(--spacing-4xl);
}
@media (max-width: 899px) {
.newyoung-notice-archive__item {
gap: var(--public-space-md);
}
}
@media (max-width: 767px) {
.newyoung-notice-archive {
min-height: 100svh;
padding: calc(var(--public-header-height) + 6rem) 0 10rem;
}
.newyoung-notice-archive__inner {
display: block;
}
.newyoung-notice-archive__hero {
min-height: 0;
padding: 0;
}
.newyoung-notice-archive__intro, .newyoung-notice-archive__title {
max-width: none;
}
.newyoung-notice-archive__content {
margin-top: 4rem;
padding: 0;
}
.newyoung-notice-archive__item {
grid-template-columns: minmax(0, 1fr);
justify-items: start;
gap: var(--public-space-xs);
min-height: 0;
padding: 2rem 0;
}
.newyoung-notice-archive__date {
justify-self: start;
color: color-mix(in srgb, var(--public-ink) 52%, transparent);
}
}
.newyoung-notice-archive--overview .newyoung-notice-archive__inner {
grid-template-columns: minmax(0, 1fr);
gap: 4rem;
scroll-margin-top: calc(var(--public-header-height) + 3rem);
}
.newyoung-notice-archive--overview .newyoung-notice-archive__inner + .newyoung-notice-archive__inner {
margin-top: 10rem;
}
.newyoung-notice-archive--overview .newyoung-notice-archive__hero,
.newyoung-notice-archive--overview .newyoung-notice-archive__content {
grid-column: 1;
}
.newyoung-notice-archive--overview .newyoung-notice-archive__intro {
max-width: none;
}
.newyoung-notice-archive--overview .newyoung-notice-archive__title {
max-width: none;
white-space: pre-line;
text-wrap: initial;
}
.newyoung-notice-archive--overview .newyoung-notice-archive__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3.2rem;
border-top: 0;
}
.newyoung-notice-archive--overview .newyoung-notice-archive__row {
min-width: 0;
}
.newyoung-notice-archive--overview .newyoung-notice-archive__item {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.4rem;
padding: 0 0 2.4rem;
height: 100%;
}
.newyoung-notice-archive--overview .newyoung-notice-archive__thumbnail {
display: block;
aspect-ratio: 32/21;
overflow: hidden;
background: var(--public-surface);
}
.newyoung-notice-archive--overview .newyoung-notice-archive__thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.newyoung-notice-archive--overview .newyoung-notice-archive__item-title {
font-size: clamp(1.8rem, 1.4vw, 2.2rem);
overflow-wrap: anywhere;
}
.newyoung-notice-archive--overview .newyoung-notice-archive__date {
margin-top: auto;
align-self: start;
}
.newyoung-notice-archive--overview .newyoung-notice-archive__more {
display: inline-block;
margin-top: 2rem;
text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.newyoung-notice-archive--overview .newyoung-notice-archive__thumbnail img {
transition: transform var(--dur-slower) var(--ease-out-quart);
}
.newyoung-notice-archive--overview .newyoung-notice-archive__item:is(:hover, :focus-visible) .newyoung-notice-archive__thumbnail img {
transform: scale(1.04);
}
}
@media (max-width: 767px) {
.newyoung-notice-archive--overview .newyoung-notice-archive__inner {
display: grid;
gap: 2.8rem;
}
.newyoung-notice-archive--overview .newyoung-notice-archive__inner + .newyoung-notice-archive__inner {
margin-top: 7rem;
}
.newyoung-notice-archive--overview .newyoung-notice-archive__content {
margin-top: 0;
}
.newyoung-notice-archive--overview .newyoung-notice-archive__list {
grid-template-columns: minmax(0, 1fr);
gap: 3.2rem;
}
}
.post-detail--newyoung-notice {
min-height: 100svh;
color: var(--public-ink);
background: var(--public-surface-subtle);
}
.post-detail--newyoung-notice .post-detail__body {
min-width: 0;
}
.post-detail--newyoung-notice .post-detail__head,
.post-detail--newyoung-notice .post-detail__back {
width: 100%;
}
.post-detail--newyoung-notice .post-detail__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--public-space-lg);
margin-bottom: 4rem;
padding: 2.4rem 2rem;
border-bottom: 1px solid var(--public-ink);
}
.post-detail--newyoung-notice .post-detail__title {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
color: var(--public-ink);
font-size: 1.8rem;
font-family: var(--font-heading-family);
font-weight: var(--font-weight-medium);
line-height: 1.4;
text-wrap: balance;
}
.post-detail--newyoung-notice .post-detail__meta {
display: block;
margin: 0;
padding: 0;
border: 0;
color: var(--public-ink);
}
.post-detail--newyoung-notice .post-detail__date {
color: inherit;
font-size: 1.6rem;
line-height: 1.3;
white-space: nowrap;
}
.post-detail--newyoung-notice .post-detail__article {
width: 100%;
}
.post-detail--newyoung-notice .post-detail__thumb {
margin: 0 0 4rem;
}
.post-detail--newyoung-notice .post-detail__thumb img {
width: auto;
max-width: 100%;
max-height: none;
border-radius: 0;
object-fit: contain;
}
.post-detail--newyoung-notice .post-detail__content strong, .post-detail--newyoung-notice .post-detail__content b {
font-weight: 700;
}
.post-detail--newyoung-notice .post-detail__content em, .post-detail--newyoung-notice .post-detail__content i {
font-style: italic;
}
.post-detail--newyoung-notice .post-detail__content u {
text-decoration: underline;
}
.post-detail--newyoung-notice .post-detail__content s, .post-detail--newyoung-notice .post-detail__content strike {
text-decoration: line-through;
}
.post-detail--newyoung-notice .post-detail__content a {
text-decoration: underline;
text-underline-offset: 0.15em;
}
.post-detail--newyoung-notice .post-detail__content h1, .post-detail--newyoung-notice .post-detail__content h2, .post-detail--newyoung-notice .post-detail__content h3, .post-detail--newyoung-notice .post-detail__content h4, .post-detail--newyoung-notice .post-detail__content h5, .post-detail--newyoung-notice .post-detail__content h6 {
font-weight: 700;
line-height: 1.4;
}
.post-detail--newyoung-notice .post-detail__content h1 {
font-size: 2em;
}
.post-detail--newyoung-notice .post-detail__content h2 {
font-size: 1.5em;
}
.post-detail--newyoung-notice .post-detail__content h3 {
font-size: 1.25em;
}
.post-detail--newyoung-notice .post-detail__content h4 {
font-size: 1.125em;
}
.post-detail--newyoung-notice .post-detail__content .ql-align-center {
text-align: center;
}
.post-detail--newyoung-notice .post-detail__content .ql-align-right {
text-align: right;
}
.post-detail--newyoung-notice .post-detail__content .ql-align-justify {
text-align: justify;
}
.post-detail--newyoung-notice .post-detail__content .ql-direction-rtl {
direction: rtl;
}
.post-detail--newyoung-notice .post-detail__content .ql-font-serif {
font-family: Georgia, "Times New Roman", serif;
}
.post-detail--newyoung-notice .post-detail__content .ql-font-monospace {
font-family: ui-monospace, "Cascadia Code", monospace;
}
.post-detail--newyoung-notice .post-detail__content .ql-font-display, .post-detail--newyoung-notice .post-detail__content .ql-font-inter {
font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
.post-detail--newyoung-notice .post-detail__content .ql-font-pretendard {
font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
}
.post-detail--newyoung-notice .post-detail__content .ql-font-noto {
font-family: "Noto Sans KR", "Pretendard Variable", sans-serif;
}
.post-detail--newyoung-notice .post-detail__content .ql-font-nanum {
font-family: "Nanum Gothic", "Noto Sans KR", sans-serif;
}
.post-detail--newyoung-notice .post-detail__content .ql-font-cormorant {
font-family: "Cormorant Garamond", Georgia, serif;
}
.post-detail--newyoung-notice .post-detail__content .ql-font-rounded {
font-family: "Arial Rounded MT Bold", Pretendard, system-ui, sans-serif;
}
.post-detail--newyoung-notice .post-detail__content ul, .post-detail--newyoung-notice .post-detail__content ol {
padding-inline-start: 1.75em;
}
.post-detail--newyoung-notice .post-detail__content ul > li, .post-detail--newyoung-notice .post-detail__content li[data-list=bullet] {
list-style-type: disc;
}
.post-detail--newyoung-notice .post-detail__content ol > li {
list-style-type: decimal;
}
.post-detail--newyoung-notice .post-detail__content ol > li[data-list=bullet] {
list-style-type: disc;
}
.post-detail--newyoung-notice .post-detail__content li {
display: list-item;
}
.post-detail--newyoung-notice .post-detail__content ol {
counter-reset: article-list;
}
.post-detail--newyoung-notice .post-detail__content li[data-list=ordered] {
counter-increment: article-list;
}
.post-detail--newyoung-notice .post-detail__content li[data-list=ordered]::marker {
content: counter(article-list) ". ";
}
.post-detail--newyoung-notice .post-detail__content .ql-ui, .post-detail--newyoung-notice .post-detail__content .ql-table-temporary {
display: none;
}
.post-detail--newyoung-notice .post-detail__content .ql-indent-1 {
padding-inline-start: 3em;
}
.post-detail--newyoung-notice .post-detail__content .ql-indent-2 {
padding-inline-start: 6em;
}
.post-detail--newyoung-notice .post-detail__content .ql-indent-3 {
padding-inline-start: 9em;
}
.post-detail--newyoung-notice .post-detail__content .ql-indent-4 {
padding-inline-start: 12em;
}
.post-detail--newyoung-notice .post-detail__content .ql-indent-5 {
padding-inline-start: 15em;
}
.post-detail--newyoung-notice .post-detail__content .ql-indent-6 {
padding-inline-start: 18em;
}
.post-detail--newyoung-notice .post-detail__content .ql-indent-7 {
padding-inline-start: 21em;
}
.post-detail--newyoung-notice .post-detail__content .ql-indent-8 {
padding-inline-start: 24em;
}
.post-detail--newyoung-notice .post-detail__content blockquote {
border-inline-start: 3px solid currentColor;
padding-inline-start: 1em;
}
.post-detail--newyoung-notice .post-detail__content pre, .post-detail--newyoung-notice .post-detail__content .ql-code-block-container {
font-family: ui-monospace, "Cascadia Code", monospace;
white-space: pre-wrap;
overflow-wrap: anywhere;
padding: 1em;
background: var(--public-surface-subtle);
margin-bottom: var(--spacing-lg);
}
.post-detail--newyoung-notice .post-detail__content table {
border-collapse: collapse;
max-width: 100%;
}
.post-detail--newyoung-notice .post-detail__content td, .post-detail--newyoung-notice .post-detail__content th {
border: 1px solid var(--public-line-strong);
padding: 0.5em 0.75em;
vertical-align: top;
}
.post-detail--newyoung-notice .post-detail__content th {
font-weight: 700;
}
.post-detail--newyoung-notice .post-detail__content td > p, .post-detail--newyoung-notice .post-detail__content th > p {
margin: 0;
}
.post-detail--newyoung-notice .post-detail__content video, .post-detail--newyoung-notice .post-detail__content iframe {
max-width: 100%;
}
.post-detail--newyoung-notice .post-detail__content {
color: var(--public-ink);
font-size: 1.6rem;
line-height: 1.75;
overflow-wrap: anywhere;
word-break: keep-all;
}
.post-detail--newyoung-notice .post-detail__content > :first-child {
margin-top: 0;
}
.post-detail--newyoung-notice .post-detail__content :where(p, ul, ol, h2, h3, h4, blockquote, table) {
width: 100%;
}
.post-detail--newyoung-notice .post-detail__content :where(p, ul, ol, h2, h3, h4, blockquote, figure, table) {
margin-bottom: 2.4rem;
}
.post-detail--newyoung-notice .post-detail__content :where(p, figure):has(img) {
width: 100%;
}
.post-detail--newyoung-notice .post-detail__content figure {
margin-inline: auto;
}
.post-detail--newyoung-notice .post-detail__content img {
display: block;
width: auto;
max-width: 100%;
height: auto;
margin-inline: auto;
object-fit: contain;
}
.post-detail--newyoung-notice .post-detail__content img[width="25%"] {
width: 25%;
}
.post-detail--newyoung-notice .post-detail__content img[width="50%"] {
width: 50%;
}
.post-detail--newyoung-notice .post-detail__content img[width="75%"] {
width: 75%;
}
.post-detail--newyoung-notice .post-detail__content img[width="100%"] {
width: 100%;
}
.post-detail--newyoung-notice .post-detail__content figcaption {
width: 100%;
margin: 1.2rem auto 0;
color: color-mix(in srgb, var(--public-ink) 58%, transparent);
font-size: 1.3rem;
line-height: 1.6;
text-align: center;
}
.post-detail--newyoung-notice .post-detail__content table {
display: block;
max-width: 100%;
overflow-x: auto;
}
.post-detail--newyoung-notice .post-attachments {
width: 100%;
margin-top: 4rem;
color: var(--public-ink);
}
.post-detail--newyoung-notice .post-attachments__title {
margin-bottom: 1.2rem;
font-size: 1.4rem;
}
.post-detail--newyoung-notice .post-attachments__list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--public-line);
}
.post-detail--newyoung-notice .post-attachments__link {
display: flex;
align-items: center;
gap: 1.2rem;
padding-block: 1.2rem;
border-bottom: 1px solid var(--public-line);
color: inherit;
font-size: 1.4rem;
}
.post-detail--newyoung-notice .post-attachments__icon,
.post-detail--newyoung-notice .post-attachments__size {
flex: 0 0 auto;
}
.post-detail--newyoung-notice .post-attachments__name {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
}
.post-detail--newyoung-notice .post-attachments__size {
color: var(--public-muted);
font-size: 1.2rem;
}
.post-detail--newyoung-notice .post-prev-next {
display: flex;
flex-direction: column;
margin-top: 3.2rem;
border-top: 1px solid var(--public-line-strong);
}
.post-detail--newyoung-notice .post-prev-next__cell {
display: flex;
align-items: center;
gap: 1.6rem;
padding-block: 1.6rem;
border-bottom: 1px solid var(--public-line);
color: var(--public-ink);
}
.post-detail--newyoung-notice .post-prev-next__label,
.post-detail--newyoung-notice .post-prev-next__date {
flex: 0 0 auto;
color: var(--public-muted);
font-size: 1.3rem;
}
.post-detail--newyoung-notice .post-prev-next__title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1.4rem;
}
.post-detail--newyoung-notice .post-attachments__link:hover,
.post-detail--newyoung-notice a.post-prev-next__cell:hover {
background: var(--public-surface-subtle);
}
.post-detail--newyoung-notice .post-attachments__link:focus-visible,
.post-detail--newyoung-notice a.post-prev-next__cell:focus-visible {
outline: 2px solid var(--public-ink);
outline-offset: 3px;
}
@media (max-width: 543px) {
.post-detail--newyoung-notice .post-prev-next__date {
display: none;
}
}
.post-detail--newyoung-notice .post-detail__spacer {
padding-top: clamp(12.8rem, 8.284789644vw + 9.6932038835rem, 25.6rem);
}
.post-detail--newyoung-notice .post-detail__back {
display: flex;
justify-content: center;
margin-top: 0;
padding-top: 3rem;
border-top: 1px solid var(--public-ink);
}
.post-detail--newyoung-notice .post-detail__back .public-button {
--public-button-min-height: var(--public-control-sm);
--public-button-padding-inline: var(--public-space-lg);
color: var(--public-ink);
border-color: var(--public-ink);
}
@media (max-width: 767px) {
.post-detail--newyoung-notice .post-detail__head {
display: block;
margin-bottom: 4rem;
padding: 0 0 2.4rem;
}
.post-detail--newyoung-notice .post-detail__title {
font-size: 2rem;
}
.post-detail--newyoung-notice .post-detail__meta {
margin-top: 0.8rem;
}
.post-detail--newyoung-notice .post-detail__date {
color: color-mix(in srgb, var(--public-ink) 56%, transparent);
font-size: 1.4rem;
}
.post-detail--newyoung-notice .post-detail__content {
font-size: 1.5rem;
line-height: 1.7;
}
}
@media (prefers-reduced-motion: reduce) {
.newyoung-notice-archive__item-title {
transition: none;
}
}
.public-error-state {
display: grid;
min-height: 100dvh;
place-items: center;
padding: var(--public-space-2xl) var(--public-shell-gutter);
color: var(--public-ink);
background: var(--public-surface);
}
.public-error-state__inner {
width: min(100%, 56rem);
text-align: center;
}
.public-error-state__title {
margin: 0 0 var(--public-space-sm);
}
.public-error-state__description {
margin: 0;
color: var(--public-muted);
}
.public-error-state__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--public-space-sm);
margin-top: var(--public-space-2xl);
}
.public-legal-document {
background: var(--public-white);
}
.public-legal-document__inner {
display: flex;
flex-direction: column;
gap: var(--public-space-page);
}
.public-legal-document__body {
display: grid;
gap: var(--public-space-2xl);
min-width: 0;
}
.public-legal-document__main {
width: min(100%, 88ch);
}
.public-legal-document__section {
display: grid;
gap: var(--public-space-md);
padding-top: var(--public-space-3xl);
margin-top: var(--public-space-3xl);
border-top: 1px solid var(--public-line);
scroll-margin-top: calc(var(--public-header-height) + var(--public-space-md));
}
.public-legal-document__section:first-child {
padding-top: 0;
margin-top: 0;
border-top: 0;
}
.public-legal-document__title {
color: var(--public-ink);
}
.public-legal-document__copy {
margin: 0;
color: var(--public-muted);
white-space: pre-line;
}
.public-legal-document__rich-content {
overflow-wrap: anywhere;
}
.public-legal-document__rich-content h2, .public-legal-document__rich-content h3, .public-legal-document__rich-content h4 {
margin: var(--public-space-3xl) 0 var(--public-space-xs);
font-size: var(--heading-xs-fs);
line-height: var(--heading-xs-lh);
font-weight: var(--font-weight-medium);
}
.public-legal-document__rich-content > :first-child {
margin-top: 0;
}
.public-legal-document__rich-content p, .public-legal-document__rich-content ul, .public-legal-document__rich-content ol, .public-legal-document__rich-content blockquote {
margin: 0 0 var(--public-space-md);
}
.public-legal-document__rich-content ul, .public-legal-document__rich-content ol {
padding-left: 1.5em;
}
.public-legal-document__rich-content ul {
list-style: disc;
}
.public-legal-document__rich-content ol {
list-style: decimal;
}
.public-legal-document__rich-content a {
text-decoration: underline;
}
.public-legal-document__aside {
order: -1;
padding-bottom: var(--public-space-2xl);
border-bottom: 1px solid var(--public-line);
}
.public-legal-document__toc-label {
margin-bottom: var(--public-space-md);
color: var(--public-blue);
letter-spacing: 0.12em;
}
.public-legal-document__toc-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--public-space-xs) var(--public-space-xl);
}
.public-legal-document__toc-link {
display: inline-flex;
width: fit-content;
padding-block: var(--public-space-2xs);
color: var(--public-muted);
text-decoration: none;
transition: color var(--public-duration) var(--public-ease);
position: relative;
}
.public-legal-document__toc-link::after {
position: absolute;
right: 0;
bottom: -0.4rem;
left: 0;
height: 1px;
background: currentColor;
content: "";
pointer-events: none;
transform: scaleX(0);
transform-origin: right center;
transition: transform var(--public-duration) var(--public-ease);
}
@media (prefers-reduced-motion: reduce) {
.public-legal-document__toc-link::after {
transition-duration: 0.01ms;
}
}
.public-legal-document__toc-link:hover, .public-legal-document__toc-link:focus-visible {
color: var(--public-blue);
}
.public-legal-document__toc-link:hover::after, .public-legal-document__toc-link:focus-visible::after {
transform: scaleX(1);
transform-origin: left center;
}
.public-legal-document--plain {
padding-top: calc(var(--public-header-height) + var(--section-sm));
padding-bottom: var(--section-lg);
color: var(--public-brand-dark);
background: var(--public-brand-surface);
}
.public-legal-document--plain .public-legal-document__inner {
display: block;
}
.public-legal-document--plain .public-legal-document__body {
width: min(100%, 104rem);
gap: 0;
margin-inline: auto;
}
.public-legal-document--plain .public-legal-document__intro {
margin-bottom: var(--public-space-page);
}
.public-legal-document--plain .public-legal-document__page-title {
max-width: 18ch;
margin: 0;
color: var(--public-brand-dark);
}
.public-legal-document--plain .public-legal-document__main {
width: 100%;
}
.public-legal-document--plain .public-legal-document__section {
gap: var(--public-space-xs);
padding-top: 0;
margin-top: var(--public-space-3xl);
border-top: 0;
}
.public-legal-document--plain .public-legal-document__section:first-child {
margin-top: 0;
}
.public-legal-document--plain .public-legal-document__title {
color: var(--public-brand-dark);
}
.public-legal-document--plain .public-legal-document__copy {
color: var(--public-brand-dark);
}
@media (max-width: 768px) {
.public-legal-document__inner {
gap: var(--public-space-3xl);
}
.public-legal-document__aside {
display: none;
}
.public-legal-document--plain {
padding-top: calc(var(--public-header-height) + var(--public-space-3xl));
padding-bottom: var(--section-md);
}
.public-legal-document--plain .public-legal-document__intro {
margin-bottom: var(--public-space-3xl);
}
.public-legal-document--plain .public-legal-document__section {
margin-top: var(--public-space-2xl);
}
}
.public-non-covered-costs {
padding-top: calc(var(--public-header-height) + var(--section-sm));
padding-bottom: var(--section-lg);
min-height: 85vh;
color: var(--public-ink);
background: var(--public-brand-surface);
}
.public-non-covered-costs__container {
width: min(100%, 104rem);
margin-inline: auto;
}
.public-non-covered-costs__title {
margin: 0 0 var(--public-space-xl);
color: var(--public-brand-dark);
}
.public-non-covered-costs__group {
display: grid;
gap: var(--public-space-sm);
}
.public-non-covered-costs__group-title {
margin: 0;
color: var(--public-brand-dark);
}
.public-non-covered-costs__table-scroll {
max-width: 100%;
border-bottom: 1px solid var(--public-line-strong);
}
.public-non-covered-costs__table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-top: 1px solid var(--public-line-strong);
}
.public-non-covered-costs__table th, .public-non-covered-costs__table td {
padding: var(--public-space-sm);
border-bottom: 1px solid var(--public-line);
text-align: left;
overflow-wrap: anywhere;
}
.public-non-covered-costs__table th {
color: var(--public-brand-dark);
font-weight: var(--list-title-fw);
}
.public-non-covered-costs__table td {
color: var(--public-muted);
}
.public-non-covered-costs__table th:first-child, .public-non-covered-costs__table td:first-child {
width: 6rem;
}
.public-non-covered-costs__table th:last-child, .public-non-covered-costs__table td:last-child {
width: 20%;
text-align: right;
}
.public-non-covered-costs__table tbody tr:last-child td {
border-bottom: 0;
}
.public-non-covered-costs__cost-label {
display: none;
}
@media (max-width: 767px) {
.public-non-covered-costs {
padding-top: calc(var(--public-header-height) + var(--public-space-3xl));
padding-bottom: var(--section-md);
}
.public-non-covered-costs__title {
margin-bottom: var(--public-space-lg);
}
.public-non-covered-costs__table-scroll {
border: 0;
}
.public-non-covered-costs__table {
display: block;
border: 0;
}
.public-non-covered-costs__table thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.public-non-covered-costs__table tbody {
display: grid;
gap: var(--public-space-xs);
}
.public-non-covered-costs__table tbody tr {
display: grid;
gap: var(--public-space-2xs);
min-width: 0;
padding: var(--public-space-sm);
border: 1px solid var(--public-line);
border-radius: var(--public-radius-sm);
}
.public-non-covered-costs__table td {
min-width: 0;
padding: 0;
border: 0;
}
.public-non-covered-costs__table th:first-child, .public-non-covered-costs__table td:first-child {
display: none;
}
.public-non-covered-costs__table td:nth-child(2) {
color: var(--public-brand-dark);
font-weight: var(--list-title-fw);
}
.public-non-covered-costs__table td:last-child {
width: auto;
text-align: left;
}
.public-non-covered-costs__cost-label {
display: inline;
margin-right: var(--public-space-2xs);
}
}
:root {
--e-bg: var(--clr-base-white);
--e-fg: var(--clr-text-base);
--e-brand: var(--clr-primary-900);
--e-muted: var(--clr-text-sub);
--e-line: var(--clr-ui-border);
--e-line-light: var(--clr-gray-100);
--e-accent: var(--clr-status-error);
--e-accent-bg: var(--clr-primary-50);
--e-code-bg: #1e1e1e;
--e-code-fg: #d4d4d4;
}
.e-body {
margin: 0;
background: var(--e-bg);
color: var(--e-fg);
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.e-404 {
max-width: 400px;
width: 100%;
text-align: center;
}
.e-404__icon {
margin: 0 auto 28px;
color: var(--e-brand);
}
.e-404__icon svg {
width: 64px;
height: 64px;
stroke-width: 1.5;
}
.e-404__num {
font-size: clamp(48px, 10vw, 72px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
margin: 0 0 16px;
color: var(--e-brand);
}
.e-404__title {
font-size: clamp(15px, 2vw, 16px);
font-weight: 500;
margin: 0 0 8px;
color: var(--e-fg);
}
.e-404__desc {
font-size: 13px;
color: var(--e-muted);
margin: 0 0 32px;
line-height: 1.6;
}
.e-404__actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.e-btn {
appearance: none;
border: 1px solid var(--e-line);
background: transparent;
color: var(--e-fg);
border-radius: 6px;
padding: 10px 18px;
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.e-btn:hover {
background: var(--e-line-light);
border-color: var(--e-line);
}
.e-btn--primary {
background: var(--e-brand);
color: var(--e-bg);
border-color: var(--e-brand);
}
.e-btn--primary:hover {
opacity: 0.9;
}
.e-error {
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 48px 24px;
}
.e-error__container {
width: min(720px, 100%);
text-align: left;
}
.e-error__header {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.e-error__badge {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
color: var(--e-fg);
background: var(--e-line-light);
border: 1px solid var(--e-line);
}
.e-error__exception {
font-size: 12px;
color: var(--e-muted);
font-family: ui-monospace, monospace;
padding: 4px 10px;
background: var(--e-line-light);
border-radius: 4px;
border: 1px solid var(--e-line);
}
.e-error__title {
font-size: clamp(22px, 3.5vw, 32px);
font-weight: 700;
margin: 0 0 12px;
color: var(--e-fg);
line-height: 1.25;
}
.e-error__desc {
font-size: 15px;
color: var(--e-muted);
margin: 0 0 24px;
line-height: 1.6;
}
.e-error__desc .e-error__path {
padding: 2px 8px;
background: var(--e-line-light);
border-radius: 4px;
font-size: 13px;
}
.e-error__source {
margin: 24px 0;
border: 1px solid var(--e-line-light);
border-radius: 8px;
overflow: hidden;
}
.e-error__source-header {
padding: 12px 16px;
font-size: 12px;
font-family: ui-monospace, monospace;
background: var(--e-line-light);
color: var(--e-fg);
border-bottom: 1px solid var(--e-line);
}
.e-error__source-file {
color: var(--e-muted);
}
.e-error__source-line {
color: var(--e-accent);
font-weight: 600;
}
.e-error__snippet {
background: var(--e-code-bg);
color: var(--e-code-fg);
}
.e-error__snippet-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
}
.e-error__snippet-row td {
padding: 4px 16px;
vertical-align: top;
}
.e-error__snippet-row--active td {
background: var(--e-accent-bg);
color: var(--e-accent);
}
.e-error__snippet-row--active .e-error__snippet-num {
color: var(--e-accent);
font-weight: 600;
}
.e-error__snippet-num {
width: 1%;
min-width: 48px;
padding-right: 16px;
text-align: right;
user-select: none;
color: var(--e-muted);
}
.e-error__snippet-code code {
display: block;
white-space: pre;
overflow-x: auto;
}
.e-error__meta {
margin: 24px 0;
padding: 20px;
border: 1px solid var(--e-line-light);
border-radius: 8px;
font-size: 13px;
background: var(--e-bg);
}
.e-error__meta dt {
color: var(--e-muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.e-error__meta dd {
margin: 0 0 16px;
word-break: break-all;
}
.e-error__meta dd:last-child {
margin-bottom: 0;
}
.e-error__meta dd code {
padding: 2px 6px;
background: var(--e-line-light);
border-radius: 4px;
font-size: 12px;
}
.e-error__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 24px 0;
}
.e-error__details {
margin-top: 24px;
border: 1px solid var(--e-line-light);
border-radius: 8px;
overflow: hidden;
}
.e-error__details-summary {
padding: 14px 18px;
cursor: pointer;
font-weight: 600;
font-size: 13px;
background: var(--e-line-light);
color: var(--e-fg);
user-select: none;
}
.e-error__details-summary:hover {
background: var(--e-line);
}
.e-error__pre {
margin: 0;
padding: 16px;
max-height: 320px;
overflow: auto;
font-size: 11px;
line-height: 1.5;
font-family: ui-monospace, monospace;
background: var(--e-code-bg);
color: var(--e-code-fg);
}
.e-btn--link {
border-color: transparent;
text-decoration: underline;
color: var(--e-muted);
}
.e-btn--link:hover {
background: transparent;
border-color: transparent;
color: var(--e-fg);
opacity: 1;
}
}
/*# sourceMappingURL=style.css.map */