:root {
  --main_c : #f37020;
}

:root {
  --main_c2 : #1c2e5d;
}


body { width:100%;  min-width:1240px;   display:inline-block  }
html { width:100%;   min-width:1240px; display:inline-block }
.in{max-width:1300px; margin:0 auto;}

#wrap {height:100%; position:relative; width:100%;   display:inline-block}
 
.main_con * {transition: all 0.3s ease-out;}
.main_con {font-size:1.1em; line-height:1.5; margin-top:80px;}
.main_con h1 {font-size:2.5em; line-height:1.2; font-weight:400;}
.main_con h2 {font-size:2.3em; line-height:1.3; font-weight:600;}
.main_con h3 {font-size:2em; line-height:1; font-weight:600;}
.main_con p{font-weight:300;}
.main_con .titbox p {font-size:1.1em; font-weight:300;}
.main_con .titbox span {color:var(--main_c); display:inline-block; margin-bottom:5px; letter-spacing:1.5px;}
.main_con .titbox{margin-bottom:30px;}

.main_con section{padding:80px 0; box-sizing:border-box;}
.flex {display:flex}
.main_c{color:var(--main_c) !important;}

 
footer {width:100%; background:#333; font-size:1rem; font-weight:300; padding:60px 0;  box-sizing:border-box; line-height:1.5em; display:inline-block }
footer *{color:#999} 
footer h2 {margin-bottom:15px; font-family: "Saira"; font-weight:600;}
footer .txtbox{width:100%;}
footer .top_wrap{border-bottom:1px solid #777; box-sizing:border-box; padding-bottom:10px; margin-bottom:10px;}
footer span{display:inline-block; margin-top:10px; width:100%;}
footer b{font-weight:600;}

footer .top_link { text-align:Center; display:inline-block;  position:fixed; right:20px; bottom:200px; box-sizing:border-box;}
footer .top_link i {font-size:6em; color:#0bc143; }

@media all and (max-width:900px) {
	 footer {line-height:1.4em; padding-right:0}
	 footer .top_link {margin-right:0}
	 footer h2 {margin-bottom:10px; font-size:1.2em}

}


.section1{background: url(/linespace/img/s1.png) no-repeat center / cover, rgb(255 255 255 / 80%); background-blend-mode: hue; padding:100px 0; box-sizing:border-box;}
.section1 h1 b{font-weight:700; letter-spacing:1.5px;}
.section1 p{margin-top:20px;}
.section1 .in{display:flex; justify-content:space-between; align-items:center;}
.section1 .btnbox{display:flex; gap:10px;}
.section1 .btnbox a{padding:17px 35px; box-sizing:border-box; border-radius:5px; border:1px solid #333; color:#333;}
.section1 .btnbox a.color{ box-shadow: 0 10px 20px rgba(255, 92, 0, 0.2); background:var(--main_c); color:#fff; border:1px solid var(--main_c);}

.section2{}
.section2 .wrap{display:flex; gap:40px; justify-content:center; }
.section2 .wrap span{padding:40px; box-sizing:border-box; background:#f7f7f7; display: inline-block; border-radius:50%; font-size:3em;}
.section2 .wrap a:hover span { background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.05); transform: translateY(-5px); }
.section2 .wrap p{text-align:center; margin-top:10px;}

.section3{background: url(/linespace/img/s2.png) no-repeat center bottom/ cover, rgb(255 255 255 / 50%); background-blend-mode: hue; background-attachment:fixed;}
.section3 .in{max-width:1100px;}
.section3 ul{display:flex; justify-content:center; gap:20px;}
.section3 li{padding:40px 0; box-sizing:border-box; background:rgb(255 255 255 / 50%); text-align:center; border-radius:10px; width:100%;}
.section3 li span{font-size:3em;}
.section3 li h3{font-size:1.5em; margin:10px 0 10px 0}
.section3 li p{font-weight:300; line-height:1.4;}


.section4 .titbox{display:flex; justify-content:space-between; align-items:end;}
.main_gallery .titbox{display:flex; justify-content:space-between; align-items:end;}


/* 그리드 기본 구조 */
.ls-magazine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 20px;
}

.ls-mag-card { position: relative; grid-column: span 1; grid-row: span 2; overflow: hidden; border-radius: 16px; }
.ls-mag-card.wide { grid-column: span 2; grid-row: span 2; }

/* 이미지 영역 */
.ls-mag-img { position: relative; width: 100%; height: 100%; }
.ls-mag-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }

/* 이미지 위 텍스트 오버레이 (핵심) */
.ls-mag-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px 20px 25px; /* 하단에서 위로 그라데이션을 위한 여백 */
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: padding-bottom 0.3s ease;
}

/* 마우스 호버 시 효과 */
.ls-mag-card:hover img { transform: scale(1.1); }
.ls-mag-card:hover .ls-g-overlay { background: rgba(255, 92, 0, 0.8); z-index:99; } /* 주황색 틴트 효과 */

/* 내부 텍스트 상세 스타일 */
.ls-mag-meta { display: flex; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 800; }
.ls-mag-cat { color: #FF5C00; } /* 주황색 포인트 */
.ls-mag-size { color: rgba(255,255,255,0.7); }
/*  */
.ls-mag-title { font-size: 18px; font-weight: 800; margin-bottom: 5px; line-height: 1.3; }
.ls-mag-price { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.9); }

/* 배지 스타일 */
.ls-mag-badge {
  position: absolute; top: 20px; left: 20px; background: #FF5C00;
  color: #fff; padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 900; z-index: 2;
}



/* 갤러리 카드 UI UX 개선 */
.ls-gallery-grid {display:flex; gap:20px; flex-wrap:wrap; padding:0 !important;}
.ls-mag-card { 
  position: relative; border-radius: 10px; overflow: hidden; height: 400px; 
  cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.03); transition: 0.4s; width:calc(25% - 15px)
}
.ls-mag-card:hover { transform: translateY(-10px); box-shadow: var(--ls-shadow); }

.ls-mag-img img { width: 100%; height: 100%; object-fit: cover; transition: 1.2s ease; }
.ls-mag-card:hover img { transform: scale(1.1); }

.ls-mag-card .info{position:absolute; bottom:0; left:0; padding:30px; box-sizing:border-box; z-index:2; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 80%, transparent 100%); width:100%;}
.ls-mag-card .info span{font-size:.9em; color:#fff;}
.ls-mag-card .info h4{font-size:1.2em; font-weight:600; color:#fff;}


.step{background:#f7f7f7;}
.step .in{max-width:1100px;}
.step ul{ display: flex; justify-content: space-between; position: relative; margin-top:60px;}
.step ul::after { content: ''; position: absolute; top: 20px; left: 10%; right: 10%; height: 1px; background: #ddd; z-index: 9; }
.step li{position:relative; text-align:center; z-index: 99;}
.step li span{padding:25px; box-sizing:border-box; background: var(--main_c); color: #fff; border-radius: 50%; font-size:1.4em; font-weight: 700; box-shadow: 0 10px 20px rgba(255,92,0,0.2);}
.step li h4{font-weight:600; font-size:1.4em; margin-top:40px;}
.step li p{font-weight:300;}

.main_contact{background:var(--main_c);  background: url(/linespace/img/orange.png) no-repeat center / cover, rgb(0 0 0 / 40%);      background-blend-mode: multiply; padding:100px 0 !important;}
.main_contact *{color:#fff;}
.main_contact .in{display:flex; justify-content:space-between; align-items:center;}
.main_contact .titbox{margin-bottom:0;}
.main_contact .titbox p{margin-top:5px;}
.main_contact a{background:#fff; color:var(--main_c); padding:20px 50px; box-sizing:border-box; border-radius:50px; font-weight:600;}


.main_quick .in{display:flex; gap:30px;}
.main_quick .box{background:#f5f5f5; padding:50px 60px; box-sizing:border-box; width:50%; border-radius:10px; display:flex; justify-content:space-between; align-items:center;
/* 	background: url(/linespace/img/22739322.jpg) no-repeat center / cover, rgb(255 255 255 / 80%); background-blend-mode: hue;  */
}
.main_quick h3{font-family: "Saira";}
.main_quick p{margin-top:7px;}
.main_quick a{margin-top:20px; display:inline-block; box-sizing:border-box; border-bottom:1px solid #333; color:#333; padding-bottom:5px; font-size:.9em;}
.main_quick .icon{ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); background:#fff; padding:20px; box-sizing:border-box;border-radius: 15px; display:flex; justify-content:center; align-items:center;}
.main_quick .icon svg{ stroke:var(--main_c); font-size:3em;}




/* 기초 레이아웃 */
.ls-container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.ls-archive-header { padding: 60px 0 40px; border-bottom: 1.5px solid #eee; }

/* 제목 디자인 */
.ls-sub-label { color: var(--ls-orange); font-weight: 900; font-size: 13px; letter-spacing: 0.15em; }
.ls-main-title { font-size: 36px; font-weight: 300; margin-top: 10px; }
.ls-main-title strong { font-weight: 900; }

/* 유틸리티 바 */
.ls-archive-top-bar { display: flex; justify-content: space-between; align-items: center; margin: 40px 0 25px; }

/* RESET 버튼 (기존 디자인 유지) */
.ls-reset-btn {
  display: flex; align-items: center; gap: 6px; background: none; border: none;
  font-size: 11px; font-weight: 800; color: #bbb; cursor: pointer; transition: 0.2s;
}
.ls-reset-btn svg { transition: transform 0.4s ease; }
.ls-reset-btn:hover { color: var(--ls-black); }
.ls-reset-btn:hover svg { transform: rotate(-180deg); }

/* 검색창 */
.ls-search-wrapper { position: relative; width: 340px; }
.ls-search-wrapper input {
  width: 100%; padding: 12px 15px; border-radius: 4px; border: 1.5px solid #eee;
  background: var(--ls-gray); font-size: 14px; outline: none; transition: 0.3s;
}
.ls-search-wrapper input:focus { border-color: var(--ls-orange); background: #fff; }
.ls-search-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--ls-orange); cursor: pointer; }

/* 8종 필터 그리드 (아까와 동일한 디자인 스타일) */
.ls-filter-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 8개 필터 가로 배치 */
  gap: 15px;
}
.ls-filter-item { display: flex; flex-direction: column; gap: 8px; }
.ls-filter-item label { font-size: 11px; font-weight: 900; color: #aaa; text-transform: uppercase; }
.ls-select {
  width: 100%; padding: 12px; border: 1px solid #eee; background: var(--ls-gray);
  border-radius: 4px; font-size: 13px; font-weight: 700; color: #333; cursor: pointer; outline: none;
}
.ls-select:focus { border-color: var(--ls-orange); background: #fff; }

/* 갤러리 리스트 (4열 구성) */
.ls-gallery-list { display:flex; flex-wrap:wrap; gap:20px;     align-items: start; }
.ls-gallery-card{width:calc(33.33% - 14px); box-shadow: 5px 5px 17px 1px #dddddd7d;    border-radius: 10px;  }



.ls-card-img-wrap { 
  position: relative; border-radius: 10px 10px 0 0; 
  overflow: hidden; background: #eee; height:300px;
}
.ls-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }

/* 호버 오버레이 (주황색) */
.ls-orange-hit {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255, 92, 0, 0.85); display: flex; align-items: center; justify-content: center;
background:  linear-gradient(to top, rgba(255,92,0,0.9) 0%, transparent 90%);
  opacity: 0; transition: 0.4s; z-index: 2;
}
.ls-gallery-card:hover .ls-orange-hit { opacity: 1; }
.ls-gallery-card:hover img { transform: scale(1.1); }
.ls-hit-btn { color: #fff; font-size: 3em;     font-family: "Saira";}

/* 카드 텍스트 정보 */
.ls-card-body { padding: 20px; }
.ls-card-cat { color:var(--main_c); font-size: .9em; font-weight:300;}
.ls-card-title { font-size: 1.2em; font-weight: 600; }	





:root {
  --ls-orange: #FF5C00;
  --ls-black: #111111;
  --ls-gray-1: #F8F9FA;
  --ls-gray-2: #E9ECEF;
  --ls-text-light: #868E96;
  --ls-shadow:  5px 5px 17px 1px #dddddd7d;
  --ls-glass: rgba(255, 255, 255, 0.8);
}

/* 기초 레이아웃 */
.ls-main-v4 { background: #fff; color: var(--ls-black); font-family: 'Pretendard', sans-serif; }
.ls-container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* 헤더 & 검색 UX */
.ls-header-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
.ls-sub-label { color: var(--ls-orange); font-weight: 900; font-size: 13px; letter-spacing: 0.1em; }
.ls-main-title { font-size: 3em; font-weight: 700; }
.ls-main-title strong { font-weight: 900; }

.ls-search-wrapper { position: relative; width: 380px; }
.ls-search-wrapper input {width: 100%; padding: 15px 25px; box-sizing: border-box; border-radius: 40px;   background: var(--ls-gray-1); font-size: 1em; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); border:none;}
.ls-search-wrapper input:focus { border:1px solid var(--main_c); background: #fff; box-shadow: var(--ls-shadow); outline: none; }
.ls-search-btn { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--ls-orange); cursor: pointer; }

/* 1차 칩 필터 */
.ls-nav-primary { display: flex; gap: 15px;  }
.ls-chip {
  padding: 13px 25px; border-radius: 50px; border: none; background: var(--ls-gray-1);
  font-size: 1.05em; font-weight: 600; cursor: pointer; transition: 0.3s;
}
.ls-chip.active { background: var(--main_c); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.ls-chip:hover:not(.active) { background: var(--ls-gray-2); }

/* 2차 텍스트 탭 */
.ls-nav-secondary { display: flex; gap: 30px; border-bottom: 1px solid #eee; margin:10px 0 40px 0; }
.ls-text-tab {
  background: none; border: none; padding: 15px 0; font-size: 1.05em;
  color: var(--ls-text-light); cursor: pointer; transition: 0.3s; position: relative;
}
.ls-text-tab.active { color: var(--ls-orange); font-weight: 800; }
.ls-text-tab.active::after { content: ''; position: absolute; bottom: -1.5px; left: 0; width: 100%; height: 3px; background: var(--ls-orange); }

/* 유틸리티 바 */
.ls-utility-bar { display: flex; justify-content: space-between; align-items: center;  margin-bottom:20px;}
.ls-filter-group { display: flex; align-items: center; gap: 40px; }
.ls-reset-btn { 
  display: flex; align-items: center; gap: 5px; font-size: 1em; font-weight:400;
  color: #999; border: none; background: none; cursor: pointer; transition: 0.3s;
}
.ls-reset-btn svg { transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);  stroke:#aaa;}
.ls-reset-btn:hover { color: var(--ls-black); }
.ls-reset-btn:hover svg { transform: rotate(-180deg); stroke:#333;}

.ls-select-box { display: flex; gap: 20px; }
.ls-select-box select { border: none; font-weight: 700; font-size: 1em; cursor: pointer; outline: none; color: #495057; }



/* 글래스모피즘 정보창 */
.ls-mag-info-overlay {
  position: absolute; bottom: 25px; left: 25px; right: 25px; padding: 25px;
  background: var(--ls-glass); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; z-index: 2;
  transition: 0.3s;
}
.ls-mag-card:hover .ls-mag-info-overlay { background: #fff; }

.ls-mag-info-overlay .cat { font-size: 11px; font-weight: 900; color: var(--ls-orange); letter-spacing: 0.1em; }
.ls-mag-info-overlay .title { font-size: 20px; font-weight: 800; margin: 8px 0; color: var(--ls-black); }
.ls-mag-info-overlay .meta { font-size: 14px; color: var(--ls-text-light); font-weight: 500; }