@charset "utf-8";

/* ========== ABOUT · 공통 컨텐츠 ========== */
.container { width:100%; margin:0 auto; padding-right:var(--space-80); padding-left:var(--space-80); }
.section { padding-block:var(--space-120); }
.section--alt { background:#f8f8f7; }

/* page-header */
.page-header { padding-block:calc(var(--header-height) + var(--space-56)) var(--space-56); background:#fff; border-bottom:1px solid #14171a; }
.page-header .container { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-24) var(--space-80); align-items:end; }
.page-header .breadcrumb { grid-column:1 / -1; margin-bottom:var(--space-8); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#676767; line-height:1.5em; }
.page-header .breadcrumb a { color:#676767; }
.page-header .breadcrumb a:hover { color:#545e34; }
.page-header .breadcrumb .sep { margin:0 var(--space-10); color:#878787; opacity:1; }
.page-header h2 { font-size:var(--font-size-56); font-weight:600; line-height:1.15em; letter-spacing:-0.02em; color:#2c2c2c; }
.page-header h2 + p, .page-header__desc { margin-top:0; color:#505050; font-size:var(--font-size-16); line-height:1.8em; max-width:none; align-self:end; text-align:right; }

/* badge */
.badge { display:inline-flex; align-items:center; gap:var(--space-8); padding:var(--space-7) var(--space-14); border-radius:4px; font-size:var(--font-size-13); font-weight:700; letter-spacing:0.06em; line-height:1.3em; background:var(--color-primary); color:#fff; }

/* jl-section */
.jl-section { padding-block:clamp(48px, calc(96 / var(--inner) * 100vw), 96px); }
.jl-section__head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-24); margin-bottom:var(--space-28); flex-wrap:wrap; }
.jl-section__head h2 { font-size:var(--font-size-32); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; line-height:1.3em; color:#2c2c2c; }
.jl-section__more { font-size:var(--font-size-14); font-weight:500; color:#676767; line-height:1.5em; transition:color .2s; }
.jl-section__more:hover { color:#545e34; }
.jl-section__more strong { font-weight:700; color:#2c2c2c; }

/* jl-grid */
.jl-grid { display:grid; gap:var(--space-18); }
.jl-grid-3 { grid-template-columns:repeat(4,1fr); }

/* jl-feature */
.jl-feature { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-100); align-items:center; }
.jl-feature--reverse { direction:rtl; }
.jl-feature--reverse > * { direction:ltr; }
.jl-feature__media { aspect-ratio:6/5; overflow:hidden; border-radius:0; background:#e2e3e4; }
.jl-feature__media img { width:100%; height:100%; object-fit:cover; }
.jl-feature__copy h3 { font-size:var(--font-size-48); font-weight:600; line-height:1.4em; color:#2c2c2c; }
.jl-feature__copy p { margin-top:var(--space-24); color:#505050; line-height:1.8em; font-size:var(--font-size-18); }
.jl-feature__copy p + p { margin-top:var(--space-20); }
.jl-feature__copy .btn { margin-top:var(--space-40); }

/* jl-news-card */
.jl-news-card { display:block; }
.jl-news-card__thumb { aspect-ratio:3/4; overflow:hidden; background:#e2e3e4; }
.jl-news-card__thumb img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
.jl-news-card:hover .jl-news-card__thumb img { transform:scale(1.04); }
.jl-news-card__body { padding-top:var(--space-14); }
.jl-news-card__tag { display:inline-block; margin-bottom:var(--space-8); font-size:var(--font-size-13); font-weight:600; color:var(--color-primary); line-height:1.4em; }
.jl-news-card__title { font-size:var(--font-size-16); font-weight:600; line-height:1.45em; color:#2c2c2c; transition:color .2s; }
.jl-news-card:hover .jl-news-card__title { color:#545e34; }
.jl-news-card__date { margin-top:var(--space-10); font-size:var(--font-size-13); color:#676767; line-height:1.65em; }
.jl-news-card__thumb--logo { display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; background:#fff; border:1px solid #e2e3e4; }
.jl-news-card__thumb--logo img { position:static; width:auto; height:auto; max-height:64px; max-width:85%; object-fit:contain; }
.jl-news-card__thumb--logo img[src*="jangdesign"] { max-height:88px; max-width:92%; }
.jl-news-card:hover .jl-news-card__thumb--logo img { transform:none; }
.about-company .jl-news-card__title { font-size:var(--font-size-18); }
.about-company .jl-news-card__date { font-size:var(--font-size-16); }

/* jl-vision */
.jl-vision-hero { position:relative; min-height:440px; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:url("/images/sub/about-philosophy-bg.jpg") center / cover no-repeat; }
.jl-vision-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,23,26,0.15) 0%,rgba(20,23,26,0.72) 68%,rgba(20,23,26,0.92) 100%); }
.jl-vision-hero__inner { position:relative; z-index:1; width:100%; padding-block:var(--space-80); }
.jl-vision-hero__badges { display:flex; gap:var(--space-8); flex-wrap:wrap; margin-bottom:var(--space-20); }
.jl-vision-hero__title { font-size:var(--font-size-56); font-weight:600; line-height:1.2em; letter-spacing:-0.02em; color:#fff; }
.jl-vision-manifesto { background:#14171a; color:#fff; padding-block:clamp(48px, calc(96 / var(--inner) * 100vw), 96px); }
.jl-vision-manifesto__grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:var(--space-80); align-items:start; }
.jl-vision-manifesto__lead { font-size:var(--font-size-34); font-weight:600; line-height:1.55em; letter-spacing:-0.02em; }
.jl-vision-manifesto__body p { font-size:var(--font-size-16); line-height:1.85em; color:rgba(255,255,255,0.68); }
.jl-vision-manifesto__body p + p { margin-top:var(--space-20); }
.jl-vision-values { border-top:1px solid #14171a; }
.jl-vision-value { display:flex; align-items:center; gap:var(--space-48); max-width: 1660px; margin: auto; padding-block:var(--space-56); border-bottom:1px solid #e2e3e4; }
.jl-vision-values .jl-vision-value:last-child { border-bottom:none; }
.jl-vision-value--reverse { flex-direction:row-reverse; }
.jl-vision-value__num { flex:0 0 72px; font-size:var(--font-size-56); font-weight:700; color:#878787; line-height:1em; letter-spacing:-0.02em; }
.jl-vision-value__copy { flex:1; min-width:0; }
.jl-vision-value__copy h3 { font-size:var(--font-size-28); font-weight:600; line-height:1.35em; color:#2c2c2c; }
.jl-vision-value__copy p { margin-top:var(--space-14); font-size:var(--font-size-18); color:#505050; line-height:1.8em; max-width:520px; }
.jl-vision-value__thumb { flex:0 0 19%; width:19%; max-width:320px; aspect-ratio:3/2; overflow:hidden; background:#e2e3e4; }
.jl-vision-value__thumb img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
.jl-vision-value:hover .jl-vision-value__thumb img { transform:scale(1.04); }

/* jl-clients */
.jl-clients-section { padding-top:clamp(36px, calc(72 / var(--inner) * 100vw), 72px); }
.jl-clients-intro { margin-bottom:var(--space-48); }
.jl-clients-intro h2 { font-size:var(--font-size-32); font-weight:600; line-height:1.35em; color:#2c2c2c; margin-bottom:var(--space-20); }
.jl-clients-intro p { font-size:var(--font-size-16); color:#505050; line-height:1.85em; white-space:nowrap; }
.jl-clients-intro p + p { margin-top:var(--space-16); }
.jl-clients-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:var(--space-20) var(--space-16); margin:0; padding:0; list-style:none; }
.jl-clients-grid__item { display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:0 var(--space-16); background:#fff; border:1px solid #e2e3e4; border-radius:0; aspect-ratio: 235 / 100;}
.jl-clients-grid__item img { width:100%; height:auto; max-height:64px; object-fit:contain; object-position:center; }

/* contact-banner (clients) */
.contact-banner { width:100%; }
.contact-banner__media { height:clamp(140px, calc(380 / var(--inner) * 100vw), 380px); overflow:hidden; }
.contact-banner__media img { width:100%; height:100%; object-fit:cover; }
.contact-banner--clients { height:clamp(140px, calc(380 / var(--inner) * 100vw), 380px); background:url("/images/sub/clients-banner.jpg") center 46% / cover no-repeat; }