@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */ 

/* 노무법인 율 소개 */
.intro-hero {margin-bottom:var(--space-40);}

.intro-content {display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-40);}
.intro-content .intro-left {width:270px; flex-shrink:0;}
.intro-content .intro-title {font-weight:700; font-size:var(--font-size-28); line-height:1.29em; color:#242424; letter-spacing:-0.03em;}
.intro-content .intro-title .text-primary {color:var(--color-primary);}
.intro-content .intro-right {flex:1 1 auto; min-width:0; width:1%; max-width:806px;}
.intro-content .intro-subtitle {font-weight:700; font-size:var(--font-size-20); line-height:1.4em; color:#242424; margin-bottom:var(--space-40); letter-spacing:-0.03em;}
.intro-content .intro-text {font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}
.intro-content .intro-text p {margin:0;}

/* 구성원 목록 */
.member-list {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-60) var(--space-40);}
.member-list .none {grid-column:1/-1; text-align:center; padding:var(--space-100) 0; color:#999; font-size:var(--font-size-18);}
.member-list .item {display:block; overflow:hidden; transition:transform .3s;}
.member-list .item:hover {transform:translateY(-5px);}
.member-list .thumb {position:relative; width:100%; aspect-ratio:373/500; border:1px solid #ddd; display:flex; align-items:flex-end; justify-content:center;}
.member-list .thumb img {width:100%; height:100%; object-fit:contain;}
.member-list .name {margin-top:var(--space-16); text-align:center; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-10);}
.member-list .name strong {font-weight:700; font-size:var(--font-size-28); line-height:1.3em; color:#242424; letter-spacing:-0.03em;}
.member-list .name span {font-weight:600; font-size:var(--font-size-18); line-height:1.3em; color:#454545; letter-spacing:-0.03em;}

/* 구성원 상세 */
.member-view {display:flex; align-items:flex-start; gap:var(--space-40); padding:var(--space-40); border:1px solid #ddd; margin-bottom:var(--space-60);}
.member-view .member-image {width:36%; max-width:400px;}
.member-view .user-photo {aspect-ratio:373/500; overflow:hidden;}
.member-view .user-photo img {display:block; width:100%; height:100%; object-fit:contain;}
.member-view .contact-bar {padding:12px; background:#111; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-40);}
.member-view .contact-item {display:flex; align-items:center; gap:var(--space-10); color:#fff; font-size:var(--font-size-14); line-height:1.5em; letter-spacing:-0.03em;}
.member-view .contact-item .icon {width:16px; height:16px; display:block; flex-shrink:0;}

.member-view .member-info {flex:1 1 auto; min-width:0; width:1%;}
.member-view .info-label {font-weight:600; font-size:var(--font-size-20); line-height:1.5em; color:var(--color-primary); margin-bottom:var(--space-20); letter-spacing:-0.03em;}
.member-view .info-name {font-weight:700; font-size:var(--font-size-40); line-height:1.25em; color:#242424; margin-bottom:var(--space-50); letter-spacing:-0.03em;}
.member-view .info-name span {font-weight:500; font-size:var(--font-size-24); line-height:1.33em; color:#454545; margin-left:var(--space-12); letter-spacing:-0.03em;}

.member-view .profile-wrap {display:flex; gap:var(--space-40);}
.member-view .profile-item {flex:1 0 auto;}
.member-view .profile-item h3 {font-weight:700; font-size:var(--font-size-20); line-height:1.4em; color:#242424; margin-bottom:var(--space-30); letter-spacing:-0.03em;}
.member-view .profile-item ul {display:flex; flex-direction:column; gap:var(--space-10);}
.member-view .profile-item ul li {position:relative; padding-left:1em; font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}
.member-view .profile-item ul li:before {content:'ㆍ'; position:absolute; top:0; left:0; color:var(--color-primary);}


/* 오시는 길 */
.root_daum_roughmap {width:100% !important; overflow:hidden;}
.root_daum_roughmap .wrap_map {height:clamp(240px, calc(500 / var(--inner) * 100vw), 500px) !important;}
.root_daum_roughmap .cont {display:none;}

.directions {margin-top:var(--space-40); margin-bottom:var(--space-100);}
.directions .address-info {margin-bottom:30px;}
.directions .address-info .comp {color:var(--color-primary); font-size:var(--font-size-20); line-height:1.5em; font-weight:700; margin-bottom:2px;}
.directions .address-info .addr {color:#242424; font-size:var(--font-size-28); font-weight:700; line-height:1.33em; letter-spacing:-.03em; margin-bottom:5px;}
.directions .address-info .etc {color:#454545;}
.directions .address-info .etc span {display:inline-block; margin-right:2em;}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info {border-top:1px solid #ddd; line-height:1.5em;}
.directions .contact-info dl {display:flex; padding:18px 0; border-bottom:1px solid #ddd;}
.directions .contact-info dt {width:130px; color:#242424; font-size:1.125em; font-weight:600;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}

.traffic-info {display:flex; gap:var(--space-40);}
.traffic-item {flex:1; display:flex; flex-direction:column; gap:var(--space-40);}
.traffic-item .text {flex:1 1 auto; min-height:0; height:1%;}
.traffic-item .text h2 {margin-bottom:var(--space-20); font-size:var(--font-size-24); line-height:1.33em; letter-spacing:-.03em;}
.traffic-item .text p {font-size:var(--font-size-20); line-height:1.5em; letter-spacing:-0.03em;}

/* 산업재해 */
.sub-sec {position:relative; padding:var(--space-120) 0; overflow:hidden;}
.sub-sec.bg {background:#f9f9f9;}
.sub-sec.bg .sec-bg {position:absolute; inset:0; z-index:0; overflow:hidden;}
.sub-sec.bg .sec-bg img {width:100%; height:100%; object-fit:cover; object-position:50% 50%;}
.sub-sec.bg .contain {position:relative; z-index:1;}

.biz-hero {color:#fff;}
.biz-hero h2 { font-size:var(--font-size-28); line-height:1.25em; letter-spacing:-0.03em;}
.biz-hero .vline {width:1px; height:clamp(20px, calc(40 / var(--inner) * 100vw), 40px); background:var(--color-primary); margin:var(--space-30) 0;}
.biz-hero p {font-size:var(--font-size-20); font-weight: 500; line-height:1.5em; letter-spacing:-0.03em;}

.sec-heading {display:flex; align-items:center; justify-content:center; gap:var(--space-40); text-align:center; margin-bottom:var(--space-50);}
.sec-heading:before,
.sec-heading:after {content:''; flex:1; height:1px; background:var(--color-primary);}
.sec-heading h2 {font-size:var(--font-size-28); line-height:1.29em; letter-spacing:-0.03em;}

.sub-sec .sec-content {display:flex; flex-direction:column; gap:var(--space-40);}
.sub-sec .content-image {width:100%;}
.sub-sec .content-image img {width:100%; height:clamp(200px, calc(280 / var(--inner) * 100vw), 280px); object-fit:cover; object-position:50% 50%;}
.sub-sec .content-text {font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}
.sub-sec .content-text p {margin:0;}

.sub-sec .sec-quote {font-weight:700; font-size:var(--font-size-32); line-height:1.25em; color:#fff; letter-spacing:-0.03em; margin-bottom:var(--space-30);}
.sub-sec .sec-text {font-weight:600; font-size:var(--font-size-20); line-height:1.5em; color:#fff; letter-spacing:-0.03em;}
.sub-sec .sec-text p {margin:0 0 var(--space-20) 0;}

.sec-why {display:flex; gap:var(--space-80);}
.sec-why .why-left {width:48%; max-width:560px;}
.sec-why .why-left img {border-radius:0 clamp(40px, calc(120 / var(--inner) * 100vw), 120px) 0 0;}
.sec-why .why-right {flex:1 1 auto; min-width:0; width:1%;}
.sec-why h2 {font-size:var(--font-size-28); line-height:1.29em; letter-spacing:-0.03em;}
.sec-why p{font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}
.sec-why .vline {width:1px; height:clamp(20px, calc(40 / var(--inner) * 100vw), 40px); background:var(--color-primary); margin:var(--space-40) 0;}

.why-cards {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-40); margin-top:var(--space-80);}
.why-card {position:relative; background:#fff; border:1px solid #ddd; padding:var(--space-40);}
.why-card .number {width:60px; height:30px; background:var(--color-primary); border-radius:60px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--font-size-18); color:#fff; letter-spacing:-0.03em;}
.why-card h3 {display:flex; align-items:center; gap:var(--space-10); font-size:var(--font-size-24); line-height:1.33em; color:#242424; margin-bottom:var(--space-30); letter-spacing:-0.03em;}
.why-card p {font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}

.service-list {display:flex; gap:var(--space-40); background:#fff; border:1px solid #ddd; padding:var(--space-30);}
.service-list .service-col {flex:1 1 auto; min-width:0; width:1%;}
.service-list ul {display:flex; flex-direction:column; gap:var(--space-10);}
.service-list li {position:relative; padding-left:1em; font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}
.service-list li:before {content:'ㆍ'; position:absolute; top:0; left:0; font-weight:700;}

.case-list {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-40);}
.case-item {position:relative; background:#fff; border:1px solid #ddd; padding:var(--space-30);}
.case-item .case-title {font-weight:700; font-size:var(--font-size-20); line-height:1.4em; color:var(--color-primary); margin:0 0 var(--space-24) 0; letter-spacing:-0.03em;}
.case-item .case-content {display:flex; flex-direction:column; gap:var(--space-10); font-size:var(--font-size-18); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}
.case-item .case-note {font-weight:700; font-size:var(--font-size-18); line-height:1.44em; color:#242424; margin:var(--space-30) 0 0 0; letter-spacing:-0.03em;}
.case-item.full {grid-column:1/-1;}
.case-item .semibold {color:#242424;}
.case-item ul {display:flex; flex-direction:column; gap:var(--space-10); margin-bottom:var(--space-40);}
.case-item ul li {position:relative; padding-left:1em; font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}
.case-item ul li:before {content:'ㆍ'; position:absolute; top:0; left:0; font-weight:700;}

.bottom-contact {overflow:hidden; padding:var(--space-100) 0; background:url('/images/sub/contact-bg.jpg') no-repeat center center / cover; color:#fff;}
.bottom-contact h2 {font-size:var(--font-size-28); line-height:1.3em; letter-spacing:-0.03em; margin-bottom:var(--space-30);}
.bottom-contact p {font-size:var(--font-size-20); line-height:1.5em; letter-spacing:-0.03em; margin-bottom:var(--space-70);}
.bottom-contact .btn {display:inline-flex; align-items:center; justify-content:center; width:160px; height:48px; border:1px solid #fff; color:#fff; font-weight:700; font-size:var(--font-size-16); letter-spacing:-0.03em; transition:all .3s;}
.bottom-contact .btn:hover {background:#fff; color:#242424;}

/* 인사노무교육 */
.service-cards {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-40); margin-top:var(--space-40);}
.service-card {position:relative; background:#fff; border:1px solid #ddd; padding:var(--space-40);}
.service-card .card-number {margin-bottom:var(--space-20); width:60px; height:30px; background:var(--color-primary); border-radius:60px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--font-size-18); color:#fff; letter-spacing:-0.03em;}
.service-card .card-title {font-weight:700; font-size:var(--font-size-24); line-height:1.33em; color:#242424; margin:var(--space-20) 0 var(--space-30); letter-spacing:-0.03em;}
.service-card .card-desc {font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}

.effect-image {text-align:center; margin-top:var(--space-50);}
.effect-image img {max-width:100%; height:auto;}

.process-list {display:grid;}
.process-item {position:relative; background:#fff; border-radius:var(--radius-24); box-shadow:6px 6px 30px rgba(0, 0, 0, 0.16);}
.process-item .process-image {width:100%; height:clamp(150px, calc(200 / var(--inner) * 100vw), 200px); border-radius:var(--radius-24) var(--radius-24) 0 0; overflow:hidden;}
.process-item .process-image img {width:100%; height:100%; object-fit:cover; object-position:50% 50%;}
.process-item .process-content {padding:var(--space-30); border-radius:0 0 var(--radius-24) var(--radius-24); text-align:center; display:flex; flex-direction:column; gap:var(--space-20);}
.process-item .step {font-weight:600; font-size:var(--font-size-16); line-height:1.63em; color:var(--color-primary); letter-spacing:-0.03em;}
.process-item h3 {font-weight:600; font-size:var(--font-size-22); line-height:1.36em; color:#242424; letter-spacing:-0.03em;}
.process-item p {font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}
.process-item:after {content:''; position:absolute; top:0; left:100%; height:100%; background:url('/images/sub/arrow-right.svg') no-repeat center center;}
.process-item:last-child:after {display:none;}

.process-list.col-2 {grid-template-columns:repeat(2, 1fr); gap:var(--space-50) var(--space-120);}
.process-list.col-2 .process-item:after {width:var(--space-120);}
.process-list.col-2 .process-item:nth-child(2n):after {display:none;}

.process-list.col-3 {grid-template-columns:repeat(3, 1fr); gap:var(--space-50) var(--space-90);}
.process-list.col-3 .process-item:after {width:var(--space-90);}
.process-list.col-3 .process-item:nth-child(3n):after {display:none;}

/* 기업자문/컨설팅 */
.consulting-cards {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-40); margin-top:var(--space-40);}
.consulting-card {position:relative; background:#fff; border:1px solid #ddd; padding:var(--space-40);}
.consulting-card .number {margin-bottom:var(--space-20); width:60px; height:30px; background:var(--color-primary); border-radius:60px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--font-size-18); color:#fff; letter-spacing:-0.03em;}
.consulting-card h3 {font-weight:700; font-size:var(--font-size-24); line-height:1.33em; color:#242424; margin:var(--space-20) 0 var(--space-30); letter-spacing:-0.03em;}
.consulting-card ul {display:flex; flex-direction:column; gap:var(--space-10);}
.consulting-card ul li {position:relative; padding-left:1em; font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}
.consulting-card ul li:before {content:'ㆍ'; position:absolute; top:0; left:0; font-weight:700;}
.consulting-card.full {grid-column:1/-1;}

.consulting-services {display:flex; flex-direction:column; gap:var(--space-100); margin-top:var(--space-50);}
.consulting-service-item {display:flex; gap:var(--space-80); align-items:flex-start;}
.consulting-service-item.reverse {flex-direction:row-reverse;}
.consulting-service-item .service-image {width:48%; max-width:600px; flex-shrink:0; border-radius:0 clamp(40px, calc(120 / var(--inner) * 100vw), 120px) 0 0; overflow:hidden;}
.consulting-service-item .service-image img {width:100%; height:clamp(300px, calc(400 / var(--inner) * 100vw), 400px); object-fit:cover; object-position:50% 50%;}
.consulting-service-item .service-content {flex:1 1 auto; min-width:0; width:1%;}
.consulting-service-item .service-content h3 {font-weight:700; font-size:var(--font-size-28); line-height:1.29em; color:#242424; margin-bottom:var(--space-40); letter-spacing:-0.03em;}
.consulting-service-item .service-content .vline {width:1px; height:clamp(20px, calc(40 / var(--inner) * 100vw), 40px); background:var(--color-primary); margin-bottom:var(--space-40);}
.consulting-service-item .service-content ul {display:flex; flex-direction:column; gap:var(--space-10); margin-top:var(--space-40);}
.consulting-service-item .service-content ul li {position:relative; padding-left:1em; font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}
.consulting-service-item .service-content ul li:before {content:'ㆍ'; position:absolute; top:0; left:0; font-weight:700;}

/* 노동사건 */
.labor-service {display:flex; flex-direction:column; gap:var(--space-40);}
.labor-service .service-item {position:relative; background:#f9f9f9; border:1px solid #ddd; padding:var(--space-40);}
.labor-service .service-item h3 {display:flex; align-items:center; gap:var(--space-20); font-weight:700; font-size:var(--font-size-24); line-height:1.33em; color:#242424; margin-bottom:var(--space-20); letter-spacing:-0.03em;}
.labor-service .service-item .number {width:60px; height:30px; background:var(--color-primary); border-radius:60px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--font-size-18); color:#fff; letter-spacing:-0.03em; flex-shrink:0;}
.labor-service .service-item .tit {flex:1 1 auto; min-width:0; width:1%;}
.labor-service .service-item .text {margin-top:var(--space-20); margin-left:var(--space-80);}
.labor-service .service-item ul {display:flex; flex-direction:column; gap:var(--space-10);}
.labor-service .service-item ul li {position:relative; padding-left:1em; font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}
.labor-service .service-item ul li:before {content:'ㆍ'; position:absolute; top:0; left:0; font-weight:700;}

/* 진행과정설명 */
.sec-title {margin-bottom:var(--space-50);}
.sec-title h2 {font-weight:700; font-size:var(--font-size-32); line-height:1.25em; color:#242424; margin-bottom:var(--space-30); letter-spacing:-0.03em;}
.sec-title .vline {width:1px; height:clamp(20px, calc(40 / var(--inner) * 100vw), 40px); background:var(--color-primary); margin-bottom:var(--space-30);}
.sec-title p {font-weight:400; font-size:var(--font-size-18); line-height:1.44em; color:#454545; letter-spacing:-0.03em;}

.process-flow {overflow:hidden;}
.process-flow .flow-items {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-80) 0; margin:0 calc(clamp(60px, calc(135 / var(--inner) * 100vw), 135px) * -1);}
.process-flow .flow-item {position:relative; text-align:center;}
.process-flow .flow-icon {position:relative; padding:0 clamp(60px, calc(135 / var(--inner) * 100vw), 135px); margin-bottom:var(--space-40);}
.process-flow .flow-icon:after {content:''; position:absolute; top:50%; right:0; transform:translate(50%, -50%); width:23px; height:36px; background:url('/images/sub/industrial-accident-step-arrow.svg') no-repeat center center; background-size:contain;}

.process-flow .flow-step {font-weight:700; font-size:var(--font-size-20); line-height:1.4em; color:var(--color-primary); margin-bottom:var(--space-20); letter-spacing:-0.03em;}
.process-flow .flow-item h3 {font-weight:700; font-size:var(--font-size-24); line-height:1.33em; color:#242424; margin-bottom:var(--space-20); letter-spacing:-0.03em;}
.process-flow .flow-item p {font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#242424; letter-spacing:-0.03em;}
.process-flow .flow-item:last-child .flow-icon:after {display:none;}


.case-cards {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-30);}
.case-card {position:relative; background:#fff; border:1px solid #ddd; border-radius:var(--radius-24); padding:var(--space-40);}
.case-card .card-number {margin-bottom:var(--space-30); width:32px; height:32px; background:var(--color-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--font-size-18); color:#fff; letter-spacing:-0.03em;}
.case-card .card-icon {position:absolute; top:var(--space-40); right:var(--space-40); width:64px; height:64px; display:flex; align-items:center; justify-content:center;}
.case-card .card-icon img {width:100%; height:100%; object-fit:contain;}
.case-card h3 {font-weight:700; font-size:var(--font-size-24); line-height:1.33em; color:#242424; margin:var(--space-40) 0 var(--space-20); letter-spacing:-0.03em;}
.case-card p {font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}

.benefit-list {display:flex; flex-direction:column; gap:var(--space-20); margin-top:var(--space-50);}
.benefit-item {position:relative; background:#fff; border:1px solid #ddd; border-radius:var(--radius-24); display:flex; align-items:center; height:120px; overflow:hidden;}
.benefit-item .benefit-title {position:relative; width:278px; height:100%; padding:var(--space-30) var(--space-50); background:var(--color-primary); border-radius:var(--radius-24) 0 0 var(--radius-24); display:flex; align-items:center; font-weight:700; font-size:var(--font-size-24); line-height:1.33em; color:#fff; letter-spacing:-0.03em; flex-shrink:0; gap:var(--space-20);}
.benefit-item .benefit-title .benefit-number {width:32px; height:32px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--font-size-18); color:var(--color-primary); letter-spacing:-0.03em; z-index:1;}
.benefit-item .benefit-desc {flex:1 1 auto; min-width:0; width:1%; padding:var(--space-30) var(--space-40); font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-0.03em;}