@charset "utf-8";

/* #region elements & layout styles */
/* typography */
.global-eyebrow{ font: var(--fs20) var(--font-pre); letter-spacing: .5em; color: var(--primary); text-transform: uppercase; }
.main-heading{ margin-top: .5em; font: 700 var(--fs40) var(--font-pre); }
.main-subheading{ margin-top: 1em; font: var(--fs20)/1.5 var(--font-pre); text-wrap: balance; }
.site-heading{ position: relative; margin-bottom: 3em; font: 700 var(--fs30)/1.5625 var(--font-pre); }
.site-heading:has(b){ font-weight: 400; }
.site-heading::before{ content: ''; position: absolute; bottom: -1.36666667em; width: 100rem; border-top: 1px solid var(--black); }
.site-heading .heading{ font: inherit; }
.sub-subheading{ margin-top: 1em; font: var(--fs20)/1.5 var(--font-pre); text-wrap: balance; }
.sub-description{ font: var(--fs16)/1.875 var(--font-pre); }

/* layout */
.layout-horizontal{ display: grid; row-gap: 5rem;
    .site-heading{ text-wrap: balance; }
    .image-block{ height: 300rem; background: #eee no-repeat 50% / cover; }
    .content-block > *:first-child{ margin-top: 0; }
    .content-block > * ~ *{ margin-top: 3.1875em; }
    @media(width >= 768px){
        &{ grid-template-columns: 5fr 9fr; align-items: start; }
        .site-heading{ margin-bottom: 1.5em; padding-right: 2ch; }
    }
}

/* list */
.disc-list{ padding-left: 1.5em;
    & > li{ position: relative; }
    & > li::before{ content: ''; position: absolute; left: -0.83333333em; top: 0.66666667em; width: 0.22222222em; aspect-ratio: 1; background: currentColor; border-radius: 50%; }
}
.dot-list{ list-style-type: '·'; margin-top: 2.3125em; display: grid; gap: 0.25lh; padding-left: .25em;
    li{ padding-left: .25em; }
}
.hyphen-list{ list-style-type: '-'; margin-top: 1.625em; display: grid; gap: 0.25lh; padding-left: .25em;
    li{ padding-left: .25em; }
}
.numbered-list{ counter-reset: item; margin-top: 1.6875em; display: grid; gap: 1.6875em; font: var(--fs16)/1.875 var(--font-pre);
    .title{ font-size: var(--fs18); color: var(--green); }
    .title::before{ counter-increment: item; content: "("counter(item)")"; margin-right: .4ch; }
}
.plain-list{ margin-top: 1.625em; display: grid; gap: 1.625em; font: var(--fs16)/1.875 var(--font-pre);
    .title{ font-size: var(--fs18); color: var(--green); }
}
.step-list{ counter-reset: item; display: grid; gap: 1.75em;
    .title{ margin-bottom: .1em; font: 700 var(--fs20)/1.5 var(--font-pre); }
    .title::before{ counter-increment: item; content: 'Step 'counter(item)'. '; color: var(--primary); }
    p{ line-height: 1.875; }
}
/* #endregion */

/* #region quick-menu margin */
@media(768px <= width < 1600px){
    article, main > section:not(.main-hero), .main-counseling-overview, .related-agencies, #footer, main.sub{ padding-right: 102rem; }
}
/* #endregion */

/* #region main page */
.main-hero{ --base-height: 930rem; contain: content; position:relative; align-content: center; height: clamp(600px, var(--base-height), 100dvh); padding-top: .3%; background: #000; color: #fff; isolation: isolate;
    .swiper{ position: absolute; inset: 0; z-index: -1; }
    .swiper-slide{ position: relative; height: var(--base-height); }
    .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: #000 no-repeat 50% / cover; }
    .slide-1::before{ background-image: url('/assets/images/main/hero-slide-1.webp'); }
    .slide-2::before{ background-image: url('/assets/images/main/hero-slide-1.webp'); }
    .slide-3::before{ background-image: url('/assets/images/main/hero-slide-1.webp'); }

    .heading{ display: grid; gap: .5em; font: var(--fs60) var(--font-pre); text-align: center; text-wrap: balance; }
    .heading small{ font-size: clamp(14rem, .5em, 30rem); }
    .heading b{ font-weight: 800; }

    .control-block{ margin-top: calc(var(--fs60) + 1px); display: flex; align-items: center; justify-content: center; gap: 1.25em;  }
    .pagination{ display: inline-flex; align-items: center; gap: .625em; width: auto; font: 300 var(--fs16) var(--font-pre); }
    .swiper-pagination-current, .swiper-pagination-total{ min-width: 2ch; }
    .swiper-pagination-current{ font-weight: 700; }
    .swiper-pagination-total{ margin-left: .4ch; }
    .progress{ contain: content; position: relative; display: block; width: 180rem; height: 2px; background: linear-gradient(#fff, #fff) left / calc(var(--progress, 0) * 100%) 100% no-repeat, #FFFFFF4D; border-radius: 5em; }

    .play-toggle{ flex-shrink: 0; align-items: center; width: 40rem; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; }
    .play-toggle::before{ content: ''; display: inline-block; width: 30%; aspect-ratio: 1; background: currentColor; }
    .play-toggle:not(.is-pause)::before{ --p-1: 20%; --p-2: 37.5%; --p-3: 62.5%; --p-4: 80%; clip-path: polygon(0 100%, var(--p-1) 100%, var(--p-1) 0, var(--p-2) 0, var(--p-2) 100%, var(--p-3) 100%, var(--p-3) 0, var(--p-4) 0, var(--p-4) 100%); }
    .play-toggle.is-pause::before{ clip-path: polygon( 10% 0, 90% 50%, 10% 100%); }

    .scroll-down{ position: absolute; inset: auto 0 49px; font: 700 14rem var(--font-pre); text-transform: uppercase; text-align: center; }
    .text{ margin-bottom: 13rem; }
    .arrow{ margin-inline: auto; display: block; width: 13rem; height: auto; }
    .arrow-1{ translate: 0 2rem; }
}

.main-promises{ padding-block: clamp(60rem, calc(150 / var(--container) * 100vw), 150rem) clamp(60rem, calc(75 / var(--container) * 100vw), 75rem);
    .container{ display: grid; gap: 50rem clamp(20rem, calc(80 / var(--container) * 100vw), 80rem); }
    .image-block{ background: url('/assets/images/main/promises-image-block.webp') no-repeat 10% 50% / cover; }
    .heading{ font: var(--fs60) var(--font-pre); }
    .heading small{ margin-bottom: 0.33333333em; display: block; font-size: clamp(14rem, .5em, 30rem); }
    .vertical-divider{ margin-top: clamp(25rem, calc(31 / var(--container) * 100vw), 31rem); height: clamp(50rem, calc(75 / var(--container) * 100vw), 75rem); border-left: 1px solid #000; }
    .list{ counter-reset: item; position: relative; margin-top: 25rem; display: grid; gap: 1em; font: var(--fs20)/1.5 var(--font-pre); }
    .list li{ display: grid; grid-template-columns: auto 1fr; gap: .6ch; align-items: center; padding-bottom: 0.95em; border-bottom: 1px solid var(--border-color); }
    .list li::before{ counter-increment: item; content: counter(item, decimal-leading-zero)'.'; width: 2.609ch; font-weight: 700; font-size: 1.8em; color: var(--primary); }
    .list li:nth-child(1){ padding-bottom: 0.65em; }
    @media(width >= 768px){
        .container{ grid-template-columns: 58fr 74fr; }
        .text-block{ padding-block: 42rem; }
    }
    @media(width < 768px){
        .image-block{ aspect-ratio: 3/2; }
    }
}

.main-business{ padding-block: clamp(60rem, calc(75 / var(--container) * 100vw), 75rem) clamp(60rem, calc(150 / var(--container) * 100vw), 150rem); text-align: center;
    .main-subheading{ margin-top: .85em; }
    .list{ margin-top: clamp(40rem, calc(97 / var(--container) * 100vw), 97rem); display: grid; gap: clamp(10rem, calc(21 / var(--container) * 100vw), 21rem) clamp(10rem, calc(20 / var(--container) * 100vw), 20rem); font-weight: 700; font-size: var(--fs24); color: #fff; }
    .link{ position: relative; display: block; aspect-ratio: 335/250; background: #000 no-repeat 50% / cover; isolation: isolate; }
    .link-1{ background-image: url('/assets/images/main/business-list-1.webp'); }
    .link-2{ background-image: url('/assets/images/main/business-list-2.webp'); }
    .link-3{ background-image: url('/assets/images/main/business-list-3.webp'); }
    .link-4{ background-image: url('/assets/images/main/business-list-4.webp'); }
    .link-5{ background-image: url('/assets/images/main/business-list-5.webp'); }
    .link-6{ background-image: url('/assets/images/main/business-list-6.webp'); }
    .link-7{ background-image: url('/assets/images/main/business-list-7.webp'); }
    .link-8{ background-image: url('/assets/images/main/business-list-8.webp'); }
    .link-9{ background-image: url('/assets/images/main/business-list-9.webp'); }
    .link-10{ background-image: url('/assets/images/main/business-list-10.webp'); }
    .link-11{ background-image: url('/assets/images/main/business-list-11.webp'); }
    .link-12{ background-image: url('/assets/images/main/business-list-12.webp'); }
    .link::before{ content: ''; position: absolute; inset: 0; z-index: -1; background: #00000080; }
    .link-text{ position: absolute; inset: 0; margin: auto; align-content: center; }
    .link::after{ content: ''; position: absolute; inset: 0; margin: auto; display: block; width: 4.29166667em; aspect-ratio: 103/29; background: url('/assets/images/main/business-view.svg') no-repeat 50% / contain; }
    @media(prefers-reduced-motion:no-preference){
        .link::before, .link-text, .link::after{ transition: .4s; }
    }
    @media(any-hover){
        .link::after{ translate: 0 1.78em; opacity: 0; }
        .link:hover{
            &::before{ background: #C79D4D99; }
            .link-text{ translate: 0 -0.88em; }
            &::after{ translate: 0 0.9em; opacity: 1; }
        }
    }
    @media(any-hover:none){
        .link-text{ translate: 0 -0.88em; }
        .link::after{ translate: 0 0.9em; }
    }
    @media(width >= 768px){
        .list{ grid-template-columns: repeat(4, 1fr); }
    }
    @media(width < 768px){
        .list{ grid-template-columns: repeat(2, 1fr); }
    }
}

:where(.main-case, .main-column){
    .heading-block{ text-align: center; }

    .tablist{ overflow: auto clip; margin-top: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem); margin-inline: calc(var(--container-edge-offset) * -1); display: flex; gap: 10rem; padding-inline: var(--container-edge-offset); font-size: var(--fs18); white-space: nowrap; }
    .tab{ position: relative; flex: calc((100% - (10rem * 6)) / 7); padding: 0.88888889em 1.5ch; border: 1px solid var(--border-color); color: #0000; cursor: pointer; isolation: isolate; }
    .tab::before{ content: attr(data-label); position: absolute; inset: 0; z-index: -1; margin: auto; align-content: center; color: var(--black); }
    .tab[aria-selected="true"]{ background: var(--primary); border-color: #0000; }
    .tab[aria-selected="true"]::selection{ background: var(--white, #fff); color: var(--primary); }
    .tab[aria-selected="true"]::before{ font-weight: 700; color: #fff; }

    .swiper{ margin-top: 50rem; }
    .swiper-slide[hidden]{ display: none; }
    .control{ margin-top: 40rem; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10rem; }
    .swiper-pagination-lock{ display: none; }
    .swiper-pagination-current, .swiper-pagination-total{ display: inline-block; width: 2.2ch; }
    .slash{ margin-inline: .6ch 1ch; }
    .swiper-button{ display: grid; place-content: center; width: 36rem; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; }
    .swiper-button-lock{ display: none; }
    .swiper-button::before{ content: ''; display: inline-block; width: 9rem; aspect-ratio: 9/16; background: url('/assets/images/main/global-nav-arrow-black.svg') no-repeat 50% / contain; }
    .swiper-next::before{ rotate: 180deg; }
}

.main-case{ contain: content; padding-block: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem); background: #000 url('/assets/images/main/case-bg.webp') no-repeat 50% / cover; color: #fff;
    .tab::before{ color: #fff; }
    .link{ display: block; padding: 2.5625em 1.6875em; background: #fff; border: 1px solid var(--border-color); color: var(--black); }
    .category{ display: block; font: 700 var(--fs18) var(--font-pre); color: var(--primary); }
    .title{ margin-top: 1em; font: 600 var(--fs20)/1.5 var(--font-pre); }
    .description{ margin-top: 2.5em; font: var(--fs16)/1.5625 var(--font-pre); color: var(--gray); }
    .swiper-button::before{ background-image: url('/assets/images/main/global-nav-arrow-white.svg'); }
}

.main-column{ contain: content; padding-block: clamp(60rem, calc(150 / var(--container) * 100vw), 150rem);
    .link{ display: block; background: #fff; border: 1px solid var(--border-color); }
    .image-block{ position: relative; display: block; aspect-ratio: 335/298; max-height: 296rem; }
    .title{ margin: 1.05555556em; font: var(--fs18) var(--font-pre); }
}

.main-counseling-overview{ padding-block: clamp(60rem, calc(80 / var(--container) * 100vw), 80rem) clamp(60rem, calc(102 / var(--container) * 100vw), 102rem); background: #000 url('/assets/images/main/counseling-bg.webp') no-repeat 50% / cover; color: #fff;
    .container{ display: grid; gap: 50rem clamp(10rem, calc(60 / var(--container) * 100vw), 60rem); }
    .main-heading{ margin-bottom: 1.275em; }
    @media(width >= 1024px){
        .container{ grid-template-columns: repeat(2, 1fr); }
    }
}

.main-live-status{
    .list{ display: grid; gap: clamp(5rem, calc(15 / var(--container) * 100vw), 15rem); } 
    .link{ display: grid; grid-template-columns: 1fr auto; font-weight: 500; }
    .title{ position: relative; padding: 1.1875em 1.9375em 1.0625em 4.3125em; background: #fff; color: var(--black); }
    .title::before{ content: ''; position: absolute; inset: 0 auto 0 1.9375em; display: inline-block; width: 1.125em; aspect-ratio: 18/20; background: no-repeat 50% / contain; }
    .title--open::before{ background-image: url('/assets/images/main/live-status-lock-open.svg'); }
    .title--locked::before{ background-image: url('/assets/images/main/live-status-lock-locked.svg'); }
    .status{ padding: 1.1875em 2.34375em 1.0625em; color: #fff; }
    .status--consulted{ background: #5982EA; }
    .status--received{ background: #999999; }
}

.main-booking-request{
    fieldset{ margin: 0; padding: 0; border: 0; display: grid; gap: clamp(5rem, calc(15 / var(--container) * 100vw), 15rem); }
    .field{ padding: 1.1875em 1.25em 1.0625em; width: 100%; min-height: 3.75em; background: #eee; border: 0; color: var(--black); }
    .field::placeholder, select:has([value=""]:checked){ color: #999; }
    select.field{ appearance: none; padding-inline: calc(1.25em - .4ch) calc(31rem + 1ch); background: #eee url('/assets/images/components/select-arrow.svg') no-repeat calc(100% - 19rem) 50% / 12rem; }
    option{ color: var(--black); }
    textarea{ display: block; height: 8.4375em; resize: none; }

    .privacy-block{ margin-top: 1.0625em; color: #eee; }
    .privacy-label{ display: inline-flex; align-items: center; gap: 1ch; }
    .privacy-checkbox{ width: .9375em; height: .9375em; }
    .privacy-button{ vertical-align: text-bottom; }
    .submit-inquiry{ margin-top: 1.25em; width: 100%; padding: .9em 1ch; background: var(--primary); font: 500 var(--fs20) var(--font-pre); }
    @media(width >= 768px){
        fieldset{ grid-template-columns: repeat(2, 1fr); }
        label:has(textarea){ grid-column: 1/-1; }

    }
}

.main-location{ padding-block: clamp(60rem, calc(150 / var(--container) * 100vw), 150rem);
    .container{ display: grid; gap: 50rem clamp(10rem, calc(80 / var(--container) * 100vw), 80rem); }
    .map-block{ position: relative; }
    .root-map{ z-index: 0; width: 100%; }
    .root-map .wrap_map{ height: 100%; }
    .root-map svg{ pointer-events: none; }
    .map_border, .wrap_controllers, .cont{ display: none; }
    .link{ position: absolute; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 1.61111111em; max-width: 14.22222222em; width: 100%; padding: 1.33333333em 1ch; background: #222; font: 700 var(--fs18) var(--font-pre); color: #fff; }
    .link::after{ content: ''; display: inline-block; width: 0.88888889em; aspect-ratio: 16/15; background: url('/assets/images/main/location-blank-arrow.svg') no-repeat 50% / contain; }
    
    .list{ margin-top: clamp(40rem, calc(68 / var(--container) * 100vw), 68rem); font-size: var(--fs18); }
    .item:not(:first-child){ display: grid; grid-template-columns: 9.6ch 1fr; gap: 2ch; }
    dt{ color: var(--gray); }
    dd{ font-weight: 600; color: #000; }
    .address{ margin-bottom: 0.36363636em; display: block; font-size: 1.22222222em; }
    .font-400{ font-weight: 400; }
    .divisor{ margin-block: 2.55555556em 2.61111111em; border-top: 1px solid var(--border-color); }
    .divisor ~ .item{ margin-top: 0.77777778em; }
    .note{ line-height: 2; color: var(--gray); }
    @media(width >= 768px){
        .root-map .wrap_map{ height: 580rem; }
    }
    @media(width >= 1024px){
        .container{ grid-template-columns: 677fr 640fr; }
    }
    @media(width < 768px){
        .root-map{ aspect-ratio: 1; }
    }
}
/* #endregion main page */

/* #region sub page */
/* #region sub layout */
#main.sub{ contain: content; min-height:300px; padding-block: clamp(60rem, calc(94 / var(--container) * 100vw), 94rem) clamp(60rem, calc(149 / var(--container) * 100vw), 149rem); }
.legal-document .page-heading,
.page-heading-block{ margin-bottom: clamp(60rem, calc(97 / var(--container) * 100vw), 97rem); text-align: center; }
.page-heading{ min-height: 1lh; font-size: var(--fs40); }
.page-heading-en{ margin-top: .125em; min-height: 1lh; font-weight: 700; font-size: var(--fs16); color: #999; }
.page-heading-en:empty{ display: none; }
#main:has(.join_area) .sub_title{ display: none; } /* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */
.sub > .container > section + section{ margin-top: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem); }
/* #endregion */

.sub-introduction{
    .section-1{ display: grid; gap: 50rem clamp(10rem, calc(80 / var(--container) * 100vw), 80rem);
        .image-block{ height: 550rem; background: var(--black) url('/assets/images/pages/introduction-bg-1.webp') no-repeat 50% / cover; }
        @media(width >= 768px){
            &{ grid-template-columns: 60fr 72fr; align-items: center; }
            .text-block{ padding-bottom: 0.3%; }
        }
    }
    .section-2{ display: grid; padding-block: 50rem; background: var(--black) url('/assets/images/pages/introduction-bg-2.webp') no-repeat 50% / cover; color: #fff; text-align: center;
        .heading{ margin-bottom: 1.25em; font: 700 var(--fs32) var(--font-pre); }
        .description{ margin-inline: auto; max-width: 34ch; font: var(--fs20) var(--font-pre); }
        @media(width >= 768px){
            &{ grid-template-columns: 1fr 1fr; }
            .sub-section{ padding: clamp(20rem, calc(75 / var(--container) * 100vw), 75rem) 2ch; }
            .sub-section-2{ border-left: 1px solid currentColor; }
        }
        @media(width < 768px){
            &{ padding-inline: 2ch; }
            .sub-section-2{ margin-top: 40rem; border-top: 1px solid currentColor; padding-top: 40rem; }
        }
    }
}

.sub-greeting{
    .section-1{ display: grid; gap: 50rem clamp(10rem, calc(70 / var(--container) * 100vw), 70rem);
        .image-block{ margin-inline: auto; display: block; width: 70%; height: auto; background: var(--black) url('/assets/images/pages/introduction-bg-1.webp') no-repeat 50% / cover; }
        .site-heading{ margin-bottom: 1.90625em; font-size: var(--fs32); }
        .site-heading::before{ display: none; }
        .signature{ margin-top: 3.6875em; display: block; width: 142rem; height: auto; }
        @media(width >= 1280px){
            &{ grid-template-columns: 60fr 73fr; align-items: center; }
            .image-block{ width: 100%; }
        }
    }
}

.sub-location{
    .swiper{ position: relative; }
    .slide-image{ display: block; width: 100%; height: auto; }
    .swiper-button{ position: absolute; inset: 0; z-index: 1; margin: auto; width: clamp(45rem, calc(50 / var(--container) * 100vw), 50rem); aspect-ratio: 1; background: #09090933; border: 1px solid #fff; border-radius: 50%; }
    .swiper-button::before{ content: ''; position: absolute; inset: 0; margin: auto; width: 9rem; aspect-ratio: 9/16; background: url('/assets/images/pages/location-slide-arrow.svg') no-repeat 50% / contain; }
    .swiper-prev{ margin-left: clamp(10rem, calc(20 / var(--container) * 100vw), 20rem); }
    .swiper-next{ margin-right: clamp(10rem, calc(20 / var(--container) * 100vw), 20rem); }
    .swiper-next::before{ rotate: 180deg; }

    .section-1{ display: grid; gap: 50rem clamp(10rem, calc(80 / var(--container) * 100vw), 80rem); }
    .map-block{ position: relative; }
    .root-map{ z-index: 0; width: 100%; }
    .root-map .wrap_map{ height: 100%; }
    .root-map svg{ pointer-events: none; }
    .map_border, .wrap_controllers, .cont{ display: none; }
    
    .list{ margin-top: clamp(40rem, calc(49 / var(--container) * 100vw), 49rem); font-size: var(--fs18); }
    .item:not(:first-child){ display: grid; grid-template-columns: 9.6ch 1fr; gap: 2ch; }
    dt{ color: var(--gray); }
    dd{ font-weight: 600; color: #000; }
    .address{ margin-bottom: 0.36363636em; display: block; font-size: 1.22222222em; }
    .font-400{ font-weight: 400; }
    .divisor{ margin-block: 1.44444444em 1.5em; border-top: 1px solid var(--border-color); }
    .divisor ~ .item{ margin-top: 0.77777778em; }
    .note{ line-height: 2; color: var(--gray); }

    .link-group{ margin-top: 42rem; display: flex; gap: 10rem; }
    .link{ display: flex; align-items: center; justify-content: center; gap: 1.61111111em; max-width: 12.5em; width: 100%; padding: 1.33333333em 1ch; font: 700 var(--fs18) var(--font-pre); }
    .link::after{ content: ''; display: inline-block; width: 0.83333333em; aspect-ratio: 1; background: no-repeat 50% / contain; }
    .link-naver{ background: #00B518; color: #fff; }
    .link-naver::after{ background-image: url('/assets/images/pages/location-link-arrow-white.svg'); }
    .link-kakao{ background: #FFE503; }
    .link-kakao::after{ background-image: url('/assets/images/pages/location-link-arrow-black.svg'); }
    @media(width >= 768px){
        .root-map .wrap_map{ height: 580rem; }
    }
    @media(width >= 1024px){
        .section-1{ grid-template-columns: 677fr 640fr; }
    }
    @media(width < 768px){
        .root-map{ aspect-ratio: 1; }
    }
}

.sub-staff{
    .list{ display: grid; gap: clamp(10rem, calc(20 / var(--container) * 100vw), 20rem); }
    .profile{ display: block; width: 100%; height: auto; background: #e0e0e0 url('/assets/images/layouts/placeholder-logo.svg') no-repeat 50% / min(60%, 200rem); text-indent: -100vw; }
    figcaption{ display: flex; align-items: center; gap: 0.83333333em; padding: 0.41666667em 1.20833333em .5em; border: 1px solid var(--border-color); font-size: var(--fs24); }
    figcaption::before{ content: '|'; color: var(--border-color); }
    .name{ order: -1; font: 700 var(--fs24) var(--font-pre); }
    .position{ position: relative; font: 300 var(--fs20) var(--font-pre); color: var(--gray); }
    @media(width >= 768px){
        .list{ grid-template-columns: repeat(2, 1fr); }
    }
    @media(width >= 1280px){
        .list{ grid-template-columns: repeat(3, 1fr); }
    }
}

.sub-practice{
    /* #region tab */
    .tablist{ gap: 5rem; font-size: var(--fs18); line-height: normal; }
    .tab{ position: relative; padding: 1.05555556em 1.5ch; border: 1px solid var(--border-color); color: #0000; cursor: pointer; isolation: isolate; }
    .tab::before{ content: attr(data-label); position: absolute; inset: 0; z-index: -1; margin: auto; align-content: center; padding: 1.05555556em 1.5ch; color: var(--black); }
    .tab[aria-selected="true"]{ background: var(--primary); border-color: #0000; }
    .tab[aria-selected="true"]::selection{ background: var(--white, #fff); color: var(--primary); }
    .tab[aria-selected="true"]::before{ font-weight: 700; color: #fff; }
    @media(width >= 768px){
        .tablist{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170rem, 1fr)); }
    }
    @media(width < 768px){
        .tablist{ overflow: auto clip; margin-inline: calc(var(--container-edge-offset) * -1); display: flex; gap: 10rem; padding-inline: var(--container-edge-offset); white-space: nowrap; }
    }
    
    .tabpanel-group{ margin-top: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem); }
    .tabpanel{ display: grid; gap: clamp(60rem, calc(129 / var(--container) * 100vw), 129rem); }
    .tabpanel[aria-hidden="true"]{ overflow: hidden; position: absolute; width: 0; height: 0; }
    /* #endregion */
    /* #region section heading */
    .section-heading{ margin-bottom: 1.53125em; font: 600 var(--fs32) var(--font-pre); }
    .section-subheading{ margin-top: 1.125em; font: 700 var(--fs24) var(--font-pre); }
    /* #endregion */
    .layout-horizontal{ display: grid; row-gap: 5rem;
        .site-heading{ margin-top: -.1875em; font-size: var(--fs32); }
        .site-heading::before{ width: 120rem; }
        @media(width >= 768px){
            &{ grid-template-columns: 5fr 9fr; align-items: start; }
        }
    }
    .heading-block{ font-size: var(--fs24);
        .heading-bg{ height: 400rem; background: #eee no-repeat 50% / cover; }
        .heading-text{ margin: -130rem auto 0; width: 89.3%; padding: 1.70833333em 1.95833333em; background: #fff; border: 1px solid var(--border-color); }
        .heading{ margin-bottom: 1.08333333em; font: 600 var(--fs24) var(--font-pre); }
        .sub-subheading{ font-size: var(--fs16); }
    }
    .process-list{ --bullet-space: clamp(40rem, calc(74 / var(--container) * 100vw), 74rem); counter-reset: item; position: relative; font: var(--fs18)/1.38888889 var(--font-pre); color: var(--gray);
        .heading-block + &{ margin-top: clamp(50rem, calc(109 / var(--container) * 100vw), 109rem); }
        & > li{ --bg-border: linear-gradient(90deg, #0000 var(--bullet-space), var(--border-color) var(--bullet-space), var(--border-color) calc(var(--bullet-space) + 1px), #0000 calc(var(--bullet-space) + 1px)); position: relative; padding-left: clamp(50rem, calc(112 / var(--container) * 100vw), 112rem); background: var(--bg-border); }
        & > li:first-child{ background: linear-gradient(#fff, #fff) no-repeat 50% 0 / 100% 10rem, var(--bg-border); }
        & > li:last-child{ background: linear-gradient(#fff, #fff) no-repeat 50% 100% / 100% calc(100% - var(--item-gap) - 10rem), var(--bg-border); }
        & > li + li{ --item-gap: 50rem; padding-top: var(--item-gap); }
    
        & > li::before{ counter-increment: item; content: counter(item, decimal-leading-zero); position: absolute; top: calc(var(--item-gap, 0) - 0.225em); left: .55em; translate: -50%; font: 600 var(--fs40) var(--font-pre); color: var(--primary); }
        & > li::after{ content: ''; position: absolute; top: calc(var(--item-gap, 0) + .175em); left: var(--bullet-space); translate: -50%; width: clamp(10rem, .375em, 15rem); aspect-ratio: 1; background: var(--primary); border-radius: 50%; font-size: var(--fs40); }
        & > li:first-child::before{ top: -0.225em; }
        & > li:first-child::after{ top: .175em; }
    
        .title{ margin-bottom: .75em; display: block; font: 600 var(--fs24) var(--font-pre); color: var(--black); }
        .title small{ translate: 0 -0.2ch; margin-left: 0.4ch; display: inline-block; font: 400 var(--fs18) var(--font-pre); }
        .image-block{ margin-top: 28rem; height: 218rem; background: no-repeat 50% / cover; }
        .image-judgment{ background-image: url('/assets/images/pages/practice-bg-judgment.jpg'); background-position: 10% 90%;}
        @media(width >= 1280px){
            .list > li{ padding-right: 75rem; }
        }
    }
    /* #region table */
    :where(table, th, td){ border: 1px solid var(--border-color); }
    table{ width: 100%; text-align: center; }
    th{ padding: .9em .4ch; background: var(--primary); border-bottom: 0; font: 600 var(--fs20) var(--font-pre); color: #fff; }
    th::selection{ background: var(--white, #fff); color: var(--primary); }
    td{ padding: .94444444em .4ch; font: var(--fs18-14) var(--font-pre); }
    /* #endregion */
}

/* #region sub-practice variants */
.sub-real-estate{
    .image-1{ background-image: url('/assets/images/pages/real-estate-bg-1.webp'); }
    .image-2{ background-image: url('/assets/images/pages/real-estate-bg-2.webp'); }
    .image-3{ background-image: url('/assets/images/pages/real-estate-bg-3.jpg'); }
    .image-4{ background-image: url('/assets/images/pages/real-estate-bg-4.jpg'); }
    .image-5{ background-image: url('/assets/images/pages/real-estate-bg-5.jpg'); }
    .image-6{ background-image: url('/assets/images/pages/real-estate-bg-6.jpg'); }
    .image-7{ background-image: url('/assets/images/pages/real-estate-bg-7.jpg'); }
    .image-8{ background-image: url('/assets/images/pages/real-estate-bg-8.jpg'); }
    .image-9{ background-image: url('/assets/images/pages/real-estate-bg-9.jpg'); }
    .text-18{ line-height: 1.66666667; }
}

.sub-civil{
    .heading-block .heading-bg{ background-image: url('/assets/images/pages/civil-heading-bg.webp'); } 
    .process-list .image-1{ background-image: url('/assets/images/pages/civil-bg-1.webp'); }
    .image-2{ background-image: url('/assets/images/pages/civil-bg-2.jpg'); }
    .image-3{ background-image: url('/assets/images/pages/civil-bg-3.jpg'); }
    .image-4{ background-image: url('/assets/images/pages/civil-bg-4.jpg'); }
    .image-5{ background-image: url('/assets/images/pages/civil-bg-5.jpg'); }
    .image-6{ background-image: url('/assets/images/pages/civil-bg-6.jpg'); }
    .image-7{ background-image: url('/assets/images/pages/civil-bg-7.jpg'); }
    .image-8{ background-image: url('/assets/images/pages/civil-bg-8.jpg'); }
    .image-9{ background-image: url('/assets/images/pages/civil-bg-9.jpg'); }
    .section-2{
        .section-heading::before{ content: '★'; margin-right: 1ch; }
        @media(width >= 768px){
            col:nth-child(1){ width: 57.5%; }
        }
    }
    .content-certification-sample{ display: block; max-width: 790rem; width: 100%; height: auto; }
}

.sub-criminal{
    .process-list .image-1{ background-image: url('/assets/images/pages/criminal-bg-1.jpg'); }
    .image-2{ background-image: url('/assets/images/pages/criminal-bg-2.jpg'); }
    .image-3{ background-image: url('/assets/images/pages/criminal-bg-3.jpg'); }
    .image-4{ background-image: url('/assets/images/pages/criminal-bg-4.jpg'); }
    .image-5{ background-image: url('/assets/images/pages/criminal-bg-5.jpg'); }
    .image-6{ background-image: url('/assets/images/pages/criminal-bg-6.jpg'); }
    .image-7{ background-image: url('/assets/images/pages/criminal-bg-7.jpg'); }
    .image-8{ background-image: url('/assets/images/pages/criminal-bg-8.jpg'); }
    .image-9{ background-image: url('/assets/images/pages/criminal-bg-9.jpg'); }
    .image-10{ background-image: url('/assets/images/pages/criminal-bg-10.jpg'); }
    .image-11{ background-image: url('/assets/images/pages/criminal-bg-11.jpg'); }
    .image-12{ background-image: url('/assets/images/pages/criminal-bg-12.jpg'); }
    .image-13{ background-image: url('/assets/images/pages/criminal-bg-13.jpg'); }
    .section-2 .title{ color: var(--black); }
    .section-12 .plain-list{ gap: 0; }
}

.sub-family-law{
    .process-list .image-1{ background-image: url('/assets/images/pages/family-law-bg-1.jpg'); }
    .image-2{ background-image: url('/assets/images/pages/family-law-bg-2.jpg'); }
    .image-3{ background-image: url('/assets/images/pages/family-law-bg-3.jpg'); }
    .image-4{ background-image: url('/assets/images/pages/family-law-bg-4.jpg'); }
    .image-5{ background-image: url('/assets/images/pages/family-law-bg-5.jpg'); }
    .image-6{ background-image: url('/assets/images/pages/family-law-bg-6.jpg'); }
    .image-7{ background-image: url('/assets/images/pages/family-law-bg-7.jpg'); }
    .image-8{ background-image: url('/assets/images/pages/family-law-bg-8.jpg'); }
    .image-9{ background-image: url('/assets/images/pages/family-law-bg-9.jpg'); }
    .divorce-procedure-flowchart{ display: block; max-width: 1200rem; width: 100%; height: auto; }
}

.sub-administrative{
    .image-1{ background-image: url('/assets/images/pages/administrative-bg-1.jpg'); }
    .image-2{ background-image: url('/assets/images/pages/administrative-bg-2.jpg'); }
    .image-3{ background-image: url('/assets/images/pages/administrative-bg-3.jpg'); }
    .image-4{ background-image: url('/assets/images/pages/administrative-bg-4.jpg'); }
    .image-5{ background-image: url('/assets/images/pages/administrative-bg-5.jpg'); }
    .image-6{ background-image: url('/assets/images/pages/administrative-bg-6.jpg'); }
    .image-7{ background-image: url('/assets/images/pages/administrative-bg-7.jpg'); }
}

.sub-corporate{
    .layout-horizontal .image-1{ background-image: url('/assets/images/pages/corporate-bg-1.jpg'); }
    .image-2{ background-image: url('/assets/images/pages/corporate-bg-2.jpg'); }
    .image-3{ background-image: url('/assets/images/pages/corporate-bg-3.jpg'); }
    .image-4{ background-image: url('/assets/images/pages/corporate-bg-4.jpg'); }
    .image-5{ background-image: url('/assets/images/pages/corporate-bg-5.jpg'); }
    .image-6{ background-image: url('/assets/images/pages/corporate-bg-6.jpg'); }
    .image-7{ background-image: url('/assets/images/pages/corporate-bg-7.jpg'); }
    .image-8{ background-image: url('/assets/images/pages/corporate-bg-8.jpg'); }
    .image-9{ background-image: url('/assets/images/pages/corporate-bg-9.jpg'); }
}

.sub-military-crime{
    .heading-block .heading-bg-1{ background-image: url('/assets/images/pages/military-crime-heading-bg-1.jpg'); }
    .heading-block .heading-bg-2{ background-image: url('/assets/images/pages/military-crime-heading-bg-2.jpg'); }
    .heading-block .heading-bg-3{ background-image: url('/assets/images/pages/military-crime-heading-bg-3.jpg'); }
    .heading-block .heading-bg-4{ background-image: url('/assets/images/pages/military-crime-heading-bg-4.jpg'); }
    .heading-block .heading-bg-5{ background-image: url('/assets/images/pages/military-crime-heading-bg-5.jpg'); }
    .heading-block .heading-bg-6{ background-image: url('/assets/images/pages/military-crime-heading-bg-1.jpg'); }
    .image-1{ background-image: url('/assets/images/pages/military-crime-bg-1.jpg'); }
    .image-2{ background-image: url('/assets/images/pages/military-crime-bg-2.jpg'); }
    .image-3{ background-image: url('/assets/images/pages/criminal-bg-4.jpg'); }
    .image-4{ background-image: url('/assets/images/pages/military-crime-bg-6.jpg'); }
    .image-5{ background-image: url('/assets/images/pages/military-crime-bg-7.jpg'); }
    .image-6{ background-image: url('/assets/images/pages/military-crime-bg-2.jpg'); }
    .image-7{ background-image: url('/assets/images/pages/military-crime-bg-3.jpg'); }
    .image-8{ background-image: url('/assets/images/pages/military-crime-bg-8.webp'); }
    .image-9{ background-image: url('/assets/images/pages/military-crime-bg-2.jpg'); }
    .image-10{ background-image: url('/assets/images/pages/military-crime-bg-2.jpg'); }
    .image-11{ background-image: url('/assets/images/pages/military-crime-bg-5.jpg'); }
    .table-2{
        col:nth-child(-n+2){ width: 15%; }
    }
    .table-3{
        col:nth-child(n+2):nth-child(-n+4){ width: 30%; }
    }
    .sub-tabpanel-group{ margin-top: clamp(50rem, calc(80 / var(--container) * 100vw), 80rem); }
    .sub-tabpanel-group td{ padding: 2ch; }
    @media(width >= 768px){
        .table-1{ table-layout: fixed; }
    }
} 

.sub-traffic-accident{
    .heading-block .heading-bg{ background-image: url('/assets/images/pages/civil-bg-2'); }
    .section-2 .image-1{ background-image: url('/assets/images/pages/criminal-bg-4'); }
    @media(width >= 768px){
        col:nth-child(-n+2){ width: 25%; }
    }
}

.sub-departments{
    .image-1{ background-image: url('/assets/images/pages/departments-bg-1.jpg'); }
    .image-2{ background-image: url('/assets/images/pages/departments-bg-2.jpg'); }
    .image-3{ background-image: url('/assets/images/pages/departments-bg-3.jpg'); }
    .image-4{ background-image: url('/assets/images/pages/departments-bg-4.jpg'); }
    .image-5{ background-image: url('/assets/images/pages/departments-bg-5.jpg'); }
    .image-6{ background-image: url('/assets/images/pages/departments-bg-6.jpg'); }
    .image-7{ background-image: url('/assets/images/pages/departments-bg-7.jpg'); }
    .image-8{ background-image: url('/assets/images/pages/departments-bg-8.jpg'); }
    .image-9{ background-image: url('/assets/images/pages/departments-bg-9.jpg'); }
    .image-10{ background-image: url('/assets/images/pages/departments-bg-10.jpg'); }

    .link-block{ margin-top: clamp(50rem, calc(99 / var(--container) * 100vw), 99rem); display: flex; justify-content: end; gap: 10rem; }
    .procedure-link{ display: inline-flex; align-items: center; justify-content: center; gap: 1.61111111em; padding: 1.33333333em 4.1ch; background: var(--black); font: 700 var(--fs18) var(--font-pre); color: #fff; }
    .procedure-link::after{ content: ''; display: block; width: 0.83333333em; aspect-ratio: 1; background: url('/assets/images/pages/location-link-arrow-white.svg') no-repeat 50% / contain; }
}
/* #endregion sub-practice variants */

.sub-online{ --color-required: #D80D0D; --field-row-gap: 10rem; --field-column-gap: clamp(10rem, calc(60 / var(--container) * 100vw), 60rem);
    .site-heading{ font-size: var(--fs32); line-height: normal; }
    .site-heading::before{ width: 120rem; }
    .site-heading .heading{ text-wrap: balance; }
    .heading:has(+ .privacy-button){ margin-bottom: .46875em; }
    .privacy-button{ font-size: var(--fs16); }

    .required-message{ margin-bottom: .7em; font: var(--fs20) var(--font-pre); color: var(--gray); }
    .required-mark{ font-size: var(--fs16); color: var(--color-required); }

    fieldset{ margin: 0; display: grid; padding: 5rem 0 0; border: 0; border-top: 1px solid var(--black); }
    .field-item{ display: grid; grid-template-columns: clamp(10ch, calc(140 / var(--container) * 100vw), 140rem) 1fr; padding-block: var(--field-row-gap) calc(var(--field-row-gap) - 1px); border-bottom: 1px solid var(--border-color); }
    .field-item:has([required]) .field-title::before{ content: '* '; color: var(--color-required); }
    .field-title{ align-content: center; font-weight: 700; }
    .field-item:has(textarea) .field-title{ grid-row: 1/3; }

    .field{ width: 100%; padding: 18rem 40rem 16rem 19rem; border: 1px solid var(--border-color); }
    .field::placeholder, select:has([value=""]:checked){ color: #999; }
    select{ appearance: none; background: url('/assets/images/components/select-arrow.svg') no-repeat calc(100% - 18rem) 50% / 12rem; }
    option{ color: var(--black); }
    textarea{ display: block; min-height: 8.4375em; resize: none; }
    [type="file"]{ margin-top: var(--field-row-gap); padding: 0.5625em; }
    [type="file"]::file-selector-button{ margin: 0 2ch 0 0; padding: 0.9375em 1.875em; background: var(--black); border: 0; font: var(--fs16) var(--font-pre); color: #fff; }

    .privacy-block{ margin-top: 2.3125em; }
    .privacy-label{ display: inline-flex; align-items: center; gap: 1ch; }
    .privacy-checkbox{ width: .9375em; height: .9375em; }
    .privacy-button{ vertical-align: text-bottom; }

    .button-group{ margin-top: 2.25em; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10rem, calc(20 / var(--container) * 100vw), 20rem); }
    .form-button{ padding: .85em 1ch; border: 1px solid #0000; font: 500 var(--fs20) var(--font-pre); }
    .form-submit{ background: var(--primary); color: #fff; }
    .form-reset{ border-color: currentColor; }
    @media(width >= 1280px){
        fieldset{ grid-template-columns: 1fr 1.14285714fr; }
        .field-item:nth-child(odd){ padding-left: var(--field-column-gap); }
        .field:not(textarea){ max-width: 280rem; }
    }
}

 /* #region sub-online variants */
.sub-lease-dispute{
    .field-item:has(#mail, #title, #message){
        &{ grid-column: 1/-1; padding-left: 0; }
        .field{ max-width: none; } 
    }
    .layout-horizontal{
        .image-1{ background-image: url('/assets/images/pages/real-estate-bg-3.jpg'); }
        .image-2{ background-image: url('/assets/images/pages/real-estate-bg-4.jpg'); }
    }
}

.sub-contract-cancellation{
    .field-item:has(#tel, #mail, #title, #message){
        &{ grid-column: 1/-1; padding-left: 0; }
        .field{ max-width: none; } 
    }
    .layout-horizontal{
        .image-1{ background-image: url('/assets/images/pages/real-estate-bg-8.jpg'); }
    }
}

.sub-consent-judgment{
    .field-item:has(#title, #message){
        &{ grid-column: 1/-1; padding-left: 0; }
        .field{ max-width: none; } 
    }
    .layout-horizontal{
        .image-1{ background-image: url('/assets/images/pages/departments-bg-5.jpg'); }
        .image-2{ background-image: url('/assets/images/pages/departments-bg-6.jpg'); }
    }
    .leading-normal{ line-height: 1.5; }
    .text-18{ line-height: 1.66666667; }
}

.sub-housing-union-withdrawal{
    .field-item:has(#project-name, #mail, #title, #message){
        &{ grid-column: 1/-1; padding-left: 0; }
        .field{ max-width: none; }
    }
    .layout-horizontal{
        .image-1{ background-image: url('/assets/images/pages/administrative-bg-6.jpg'); }
    }
    .text-18{ line-height: 1.66666667; }
    @media(width >= 1280px){
        .field-item:nth-child(odd){ padding-left: 0; }
        .field-item:nth-child(3 of .field-item){ padding-left: var(--field-column-gap); }
    }
}
/* #endregion sub-online variants */
/* #endregion sub layout */

/* #region board, consultation */
.board-category-tab{ all: unset; overflow: auto clip; margin: 0 calc(var(--container-edge-offset) * -1) clamp(40rem, calc(53 / var(--container) * 100vw), 53rem); display: flex; gap: 10rem; padding: 0 var(--container-edge-offset); font-size: var(--fs18); text-align: center; white-space: nowrap; list-style: none;
    li{ flex: calc((100% - (10rem * 6)) / 7); }
    a{ all: unset; position: relative; display: block; padding: 0.88888889em 1.5ch; border: 1px solid var(--border-color); color: var(--black); cursor: pointer; isolation: isolate; }
    a.is-visiting{ background: var(--primary); border-color: #0000; color: #fff; }
    a.is-visiting::selection{ background: var(--white, #fff); color: var(--primary); }
}

.board-search-block{ margin-bottom: 50rem; display: flex; flex-direction: column; gap: 20rem;
    .board-search{ margin-bottom: 0; }
    .board-post-count{ margin-bottom: 0; font: var(--fs18) var(--font-pre); }
    @media(width >= 768px){ display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
}

.board-case-list{ display: grid; gap: clamp(10rem, calc(20 / var(--container) * 100vw), 20rem);
    a{ display: block; padding: clamp(20rem, calc(41 / var(--container) * 100vw), 41rem) clamp(16rem, calc(27 / var(--container) * 100vw), 27rem); border: 1px solid var(--border-color); }
    .category{ display: block; font: 700 var(--fs18-14) var(--font-pre); color: var(--primary); }
    .title{ margin-block: 1em 2em; font: 600 var(--fs20)/1.5 var(--font-pre); }
    .content{ font: var(--fs16)/1.5625 var(--font-pre); color: var(--gray); }
    @media(width >= 768px){
        &{ grid-template-columns: repeat(3, 1fr); }
    }
    @media(width >= 1280px){
        &{ grid-template-columns: repeat(4, 1fr); }
    }
    @media(width < 768px){
        .ellipsis{ height: auto; }
    }
}

.board-press-list{ display: grid; gap: 40rem clamp(10rem, calc(20 / var(--container) * 100vw), 20rem);
    a{ display: block; }
    .img-group{ display: block; aspect-ratio: 16/9; }
    .img{ display: block; width: 100%; height: 100%; object-fit: cover; }
    .info{ margin-top: 1.0625em; display: grid; grid-template-columns: auto auto; justify-content: start; }
    .category{ font-weight: 600; color: var(--primary); }
    .category:empty{ display: none; }
    .date{ color: var(--gray); }
    .category:not(:empty) + .date::before{ content: '|'; margin-inline: .7ch 1ch; font-weight: 300; color: #bbb; }
    .title{ margin-top: .38888889em; font: 600 var(--fs18)/1.38888889 var(--font-pre); }
    @media(width >= 768px){
        &{ grid-template-columns: repeat(3, 1fr); }
    }
    @media(width >= 1280px){
        &{ grid-template-columns: repeat(4, 1fr); }
    }
    @media(width < 768px){
        .ellipsis{ height: auto; }
    }
}

.board-announcement-list{ display: grid; gap: clamp(10rem, calc(20 / var(--container) * 100vw), 20rem);
    a{ display: block; padding: clamp(20rem, calc(39 / var(--container) * 100vw), 39rem) clamp(16rem, calc(39 / var(--container) * 100vw), 39rem); border: 1px solid var(--border-color); }
    .title{ margin-bottom: 2.05em; font: 600 var(--fs20)/1.5 var(--font-pre); }
    .content{ font: var(--fs16)/1.5625 var(--font-pre); color: var(--gray); }
    @media(width >= 768px){
        &{ grid-template-columns: repeat(3, 1fr); }
    }
    @media(width < 768px){
        .ellipsis{ height: auto; }
    }
}

.board-column-list{ display: grid; gap: 40rem clamp(10rem, calc(20 / var(--container) * 100vw), 20rem);
    .img-group{ display: block; width: 100%; aspect-ratio: 335/298; }
    .img{ display: block; width: 100%; height: 100%; object-fit: cover; }
    .title{ margin-block: 1.22222222em 0.55555556em; font: 600 var(--fs18) var(--font-pre); }
    .date{ color: var(--gray); }
    @media(width >= 768px){
        &{ grid-template-columns: repeat(3, 1fr); }
    }
    @media(width >= 1280px){
        &{ grid-template-columns: repeat(4, 1fr); }
    }
}

.board-reviews-list{ display: grid; gap: 40rem clamp(10rem, calc(20 / var(--container) * 100vw), 20rem);
    .img-group{ display: block; width: 100%; aspect-ratio: 335/298; border: 7rem solid #b8d7b8; }
    .img{ display: block; width: 100%; height: 100%; object-fit: cover; }
    .title{ margin-block: 1.22222222em 0.55555556em; font: 600 var(--fs18) var(--font-pre); }
    .author{ color: var(--gray); }
    @media(width >= 768px){
        &{ grid-template-columns: repeat(3, 1fr); }
    }
    @media(width >= 1280px){
        &{ grid-template-columns: repeat(4, 1fr); }
    }
}

.consultation-list{ width: 100%; color:#434343; white-space: nowrap;
    :where(th, td){ padding-inline: clamp(1ch, calc(20 / var(--container) * 100vw), 20rem); border-bottom: 1px solid #0000001A; }
    th{ padding-block: .875em; background: #F5F5F5; border-top: 2px solid #0000001A; font: var(--fs20-14) var(--font-pre); }
    td{ padding-block: .55555556em; font: var(--fs18-12) var(--font-pre); }
    td:not(:nth-child(2)){ text-align: center; }
    a{ display:flex; align-items:center; gap: 1ch; }
    .new::after{ content: 'New'; font: 700 12rem var(--font-pre); color: #D80D0D; }
    .status{ display: inline-block; min-width: 5.72222222em; padding: .55555556em; }
    .status--received{  }
    .status--completed{ background: var(--primary); color: #fff; }
    @media(width >= 768px){
        .col-number, .col-author, .col-status, .col-date{ width: 11.28571429%; }
    }
    @media(width < 1280px){
        .col-author, .col-status, .col-date{ width: 14%; }
        .col-1{ display: none; }
    }
    @media(width < 768px){
        .col-5{ display: none; }
    }
}

.common-pagination .number{ border-radius: 0; }
/* #endregion board */