@charset "utf-8";

@layer reset, form;

:root{
	interpolate-size: allow-keywords;
	--header-height: clamp(60rem, calc( 100 / var(--container) * 100vw ), 100rem);
	--container-narrow: 1280;
	--container: 1400;
	--container-wide: 1700;
    --container-scale: .92;
	--container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw);
    --primary: #C79D4D;
    --placeholder-bg: #444444;
	--white: #fff;
	--red: #ED2727;
	--blue: #5982EA;
	--green: #085B54;
	--gray: #222;
	--black: #222;
	--border-color: #ddd; /* components.css 공유 */
	--hover-border-color: #444; /* components.css 공유 */
    --font-pre: 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif;
    --offcanvas-button-size: 25rem;
}

/* #region view transition, scroll behavior */
@media(prefers-reduced-motion:no-preference){
	@view-transition { navigation: auto; }
    html{ scroll-behavior: smooth; }
}
/* #endregion */

/* #region container */
.container{ position: relative; margin: 0 auto; max-width: calc(var(--container) * 1rem); width: calc(var(--container-scale) * 100%); }
.container--narrow{ max-width: calc(var(--container-narrow) * 1rem); }
.container--wide{ max-width: calc(var(--container-wide) * 1rem); }
.container--fluid{ max-width: none; width: 100%; }
/* #endregion */
 
#header{ position: absolute; inset: 0 0 auto; z-index: 10; background: linear-gradient(0deg, #FFFFFF26 1px, #0000 1px); color: #fff;
	.container{ display: flex; align-items: center; justify-content: space-between; height: var(--header-height); }
	.logo{ justify-self: start; position: relative; display: inline-block; }
	.logo-image{ display: block; width: auto; height: clamp(24rem, calc(34 / var(--container) * 100vw), 34rem); }
	.main-nav{
		.main-menu{ display: flex; }
		.main-menu > li{ position: relative; }
		[data-nav-level="1"]{ display: flex; align-items: center; height: var(--header-height); padding-inline: clamp(10rem, calc(25.5 / 1920 * 100vw), 25.5rem);; font: 600 var(--fs20) var(--font-pre); }
	
		.sub-menu{ visibility: hidden; position: absolute; top: 75%; left: 50%; transform: translateX(-50%); min-width: 120px; width: max-content; background: #fff; border: 1px solid #ddd; opacity: 0; }
		li:hover .sub-menu{ visibility: visible; top: 80%; opacity: 1; }
		[data-nav-level="2"]{ display: block; padding: 14rem; color: #333; font-size: 14rem; text-align: center; }
		[data-nav-level="2"]:hover{ background: var(--primary); color: #fff; }
		.sub-menu li + li{ border-top: 1px solid #ddd; }
	}
	.hotline{ display: block; align-content: center; padding: 10rem; width: 210rem; height: 100%; background: #C79D4D; font: 700 var(--fs24) var(--font-pre); text-align: center;
		.text-block{ display: flex; align-items: center; justify-content: center; gap: 6rem; font: 14rem var(--font-pre); }
		.phone{ display: block; width: 15rem; height: auto; }
		.number{ margin-top: .125em; display: block; }
	}
	.offcanvas-toggle{ position: relative; display: block; width: var(--offcanvas-button-size); aspect-ratio: 1; cursor: pointer;
		.bar{ position: absolute; inset: 0; margin: auto; height: 2px; background: currentColor; }
		.bar-1{ translate: 0 -8rem; }
		.bar-3{ translate: 0 8rem; }
	}
	@media(prefers-reduced-motion:no-preference){
		.sub-menu, .menu-bar{ transition: .4s; }
	}
	@media(min-width:1280px){
		.container{ margin-inline: calc((1920 - var(--container-wide)) / 2 * 1rem) 0; max-width: none; width: auto; }
		.offcanvas-toggle{ display: none; }
	}
	@media(max-width:1279px){
		.main-nav, .hotline{ display: none; }
	}

	.offcanvas{ --border-color: #eaeaea; --padding-block: 15rem; --padding-inline: 16rem; left: auto; z-index: 12; max-width: 280rem; width: 100%; height: 100dvh; padding: 0; background: #fff; border: 0; color: #000;
		&::backdrop{ background: #000; opacity: .6; }
		.offcanvas-header{ display: grid; align-items: center; justify-content: flex-end; height: var(--header-height); }
		.offcanvas-close{ position: relative; margin-right: 16px; display: block; width: var(--offcanvas-button-size); aspect-ratio: 1; background: 0;
			&::before, &::after{ content: ''; position: absolute; top: 50%; left: 0; display: block;  width: 100%; height: 2px; background: currentColor; transform: translateY(-50%) rotate(45deg); }
			&::after{ transform: translateY(-50%) rotate(-45deg); }
		}
		.main-menu{
			& > li{ border-top: 1px solid var(--border-color); }
			& > li:last-child{ border-bottom: 1px solid var(--border-color); }
			[data-nav-level="1"]{ position: relative; display: block; width: 100%; padding: var(--padding-block) 30rem var(--padding-block) var(--padding-inline); text-align: left; font-size: 16rem; }
			summary[data-nav-level="1"]::before{ content: ''; position: absolute; inset: 0; margin: auto 16rem auto auto; display: block; width: 8rem; aspect-ratio: 1; border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg) translateY(-75%); }
			[open] summary[data-nav-level="1"]::before{ scale: 1 -1; translate: 0 -50%; }
			::details-content{ overflow: clip; height: 0; }
			[open]::details-content{ height: auto; }
			.sub-menu{ background: #f8f8f8; }
			.sub-menu > li{ border-top: 1px solid var(--border-color); }
			[data-nav-level="2"]{ position: relative; display: block; padding: var(--padding-block) var(--padding-inline); font-size: 14rem; }
		}
		@media(prefers-reduced-motion:no-preference){
			&{ transition: .4s allow-discrete; translate: 100%;}
			&::backdrop{ opacity: 0; transition: .4s allow-discrete; }
			&:popover-open{ translate: 0;
				&::backdrop{ opacity: .6; }
				@starting-style{ translate: 100%;
					&::backdrop{ opacity: 0; }
				}
			}
			.main-menu{
				[data-nav-level="1"], summary::before, ::details-content{ transition: .4s allow-discrete; }
				::details-content{ overflow: clip; height: 0; }
				[open]::details-content{ height: auto; }
			}
		}
		@media(width >= 1280px){
			.offcanvas-toggle, .offcanvas-close{ translate: 0 -3rem; }
		}
	}
}

.quick-menu{ position: fixed; right: 10rem; z-index: 9; text-align: center;
    .heading{ align-content: center; padding-block: 11rem; background: #222; font: 600 14rem var(--font-pre); color: #fff; text-transform: capitalize; }
    .link-list{ padding-inline: 10rem; background: #fff; border: 1px solid var(--border-color); font: 600 14rem var(--font-pre);}
	.link-list > li{ padding-block: 16.5rem; }
	.link-icon{ margin-inline: auto; display: block; width: 40rem; aspect-ratio: 1; border-radius: 50%; }
	.link-icon-1{ background: #C79D4D33 url('/assets/images/layouts/quick-icon-1.svg') no-repeat 50% / 50%; }
	.link-icon-2{ background: #C79D4D33 url('/assets/images/layouts/quick-icon-2.svg') no-repeat 50% / 50%; }
	.link-icon-3{ background: #ffe812 url('/assets/images/layouts/quick-icon-3.png') no-repeat 50% / 100%; }
	.link-icon-4{ background: #00c63b url('/assets/images/layouts/quick-icon-4.png') no-repeat 50% / 100%; }
	.link-text{ margin-top: 10rem; display: block; }
	.scroll-to-top{ margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13.5%; width: 70rem; aspect-ratio: 1; background: var(--black); border: 1px solid #fff; border-radius: 50%; font: 600 14rem var(--font-pre); color: #fff; text-transform: uppercase; }
	.scroll-arrow{ display: inline-block; width: 16rem; aspect-ratio: 16/17; background: url('/assets/images/layouts/arrow-up.svg') no-repeat 50% / contain; }
	@media(width >= 768px){
		&{ bottom: 46rem; }
		.heading, .link-list{ max-width: 102rem; }
		.link-list > li + li{ border-top: 1px solid var(--border-color); }
		.scroll-to-top{ margin-top: 30rem; padding-top: 2%; }
	}
	@media(width < 768px){
		&{ display: inline-flex; align-items: center; bottom: 10rem; }
		.heading{ align-self: stretch; padding: 5rem; font-size: 12rem; }
		.link-list{ display: inline-flex; padding: 0; }
		.link-list > li{ padding: 5rem; }
		.link-list > li + li{ border-left: 1px solid var(--border-color); }
		.link-text, .scroll-text{ overflow: hidden; position: absolute; width: 0; height: 0; }
		.scroll-to-top{ margin-left: 10rem; width: 45rem; }
	}
}

.page-header{ --nav-height: clamp(54rem, calc(70 / var(--container) * 100vw), 70rem); contain: content; position: relative; z-index: 7; display: flex; align-items: center; justify-content: center; height: clamp(400rem, calc(500 / var(--container) * 100vw), 500rem); padding-block: var(--header-height) var(--nav-height); background: #000; color: #fff; isolation: isolate;
	&.misc :is(.breadcrumb, .local-nav){ display: none; }
	.bg{ contain: content; position: absolute; inset: 0; z-index: -1;
		&::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
		.about &::before{ background-image:url('/assets/images/pages/page-header-1.webp'); }
		.staff &::before{ background-image:url('/assets/images/pages/page-header-2.webp'); }
		.practice &::before{ background-image:url('/assets/images/pages/page-header-3.webp'); }
		.dispute-care &::before{ background-image:url('/assets/images/pages/page-header-4.webp'); }
		.case-success &::before{ background-image:url('/assets/images/pages/page-header-5.webp'); }
		.press &::before{ background-image:url('/assets/images/pages/page-header-5.webp'); }
		.community &::before{ background-image:url('/assets/images/pages/page-header-5.webp'); }
		.consultation &::before{ background-image:url('/assets/images/pages/page-header-5.webp'); }
		.misc &::before{ background-image:url('/assets/images/pages/page-header-5.webp'); }
		@media(prefers-reduced-motion:no-preference){
			&::before{ animation: page-header-bg 1.8s both; }
		}
	}

	.page-header-container{ text-align: center; }
	.heading{ font: 700 var(--fs50) var(--font-pre); }
	.subheading{ margin-top: .55555556em; font: var(--fs18)/1.66666667 var(--font-pre); }
	@media(prefers-reduced-motion:no-preference){
		.heading{ animation: page-header-slide-up .6s .2s both; opacity: 0; }
		.subheading{ animation: page-header-slide-up .6s .35s both; opacity: 0; }
	}

	.local-nav{ position: absolute; inset: auto 0 0; background: #00000080; text-align: center; white-space: nowrap; }
	.sub-menu{ overflow: auto clip; margin-inline: calc(var(--container-edge-offset) * -1); padding-inline: var(--container-edge-offset); }
	.sub-menu > li{ display: inline-block; }
	[data-nav-level]{ display: block; align-content: center; height: var(--nav-height); padding-inline: clamp(20rem, calc(48 / var(--container) * 100vw), 48rem); font-size: var(--fs18); }
	.is-visiting{ background: linear-gradient(to top, var(--primary), var(--primary) 3rem, #0000 3rem); font-weight: 800; color: var(--primary); }
}
@keyframes page-header-bg {
	0%{ scale: 1.05; }
	100%{ scale: 1; }
}
@keyframes page-header-slide-up {
	0%{ translate: 0 40rem; opacity: 0; }
	100%{ translate: 0; opacity: 1; }
}
@keyframes page-header-clip-right {
	0%{ translate: -40rem; opacity: 0; }
	100%{ translate: 0; opacity: 1; }
}

.related-agencies{ contain: content; padding-block: 19rem 20rem; border-top: 1px solid var(--border-color);
	.list{ overflow: auto; display: flex; }
	.logo{ display: block; width: clamp(140rem, calc(175 / var(--container) * 100vw), 175rem); height: auto; }
	@media(width >= 1280px){
		.list{ justify-content: center; }
	}
}

#footer{ padding-block: 55rem 88rem; background: #222; color: #B8B8B8;
	.container{ display: grid; gap: 50rem 40rem; }
	.link-list{ display: flex; gap: 1.625em 1ch; }
	.link{ display: block; padding: .78125em 2ch; background: #FFFFFF12; font-weight: 700; color: #fff; text-align: center; }
	.logo-image{ display: block; width: auto; height: clamp(24rem, calc(39 / var(--container) * 100vw), 39rem); }
	address{ margin-top: 43rem; }
	.info-list{ display: flex; flex-wrap: wrap; gap: 0.6lh 3.2ch; max-width: 900rem; }
	.info-list :where(dt, b){ font-weight: 600; }
	.info-item{ display: inline-flex; gap: 1.2ch; }
	.copyright{ margin-top: 35rem; }
	@media(width >= 1280px){
		.container{ grid-template-columns: 1fr 11.25em; align-items: start; }
		.link-list{ display: grid; gap: .625em; order: 2; }
	}
	@media(width < 768px){
		.info-list{ flex-direction: column; }
	}
}