/* 이 파일의 규칙은 모두 #p-<화면이름> 안쪽에만 걸립니다.
접두사를 떼면 특이도가 낮아져 base.css 의 반응형 규칙을 덮어쓰게 되므로 그대로 둡니다. */
#p-en-company h1, #p-en-company h2, #p-en-company h3, #p-en-company h4{margin:0;font-weight:700;line-height:.95;color:var(--ink)}
#p-en-company p{margin:0}
#p-en-company :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#p-en-company .display-xl{font-size:clamp(32px, 20.4px + 3.09vw, 56px);font-weight:700;line-height:1.2}
#p-en-company .display-lg{font-size:clamp(26px, 19.2px + 1.80vw, 40px);font-weight:700;line-height:1}
#p-en-company .display-md{font-size:clamp(22px, 17.2px + 1.29vw, 32px);font-weight:700;line-height:1}
#p-en-company .heading-lg{font-size:24px;font-weight:700;line-height:.95}
#p-en-company .heading-md{font-size:20px;font-weight:700;line-height:.95}
#p-en-company .subtitle{font-size:19.2px;font-weight:600;line-height:1.3}
#p-en-company .body-lg{font-size:18px;line-height:1.5}
#p-en-company .body-md{font-size:16px;line-height:1.4}
#p-en-company .body-sm{font-size:14px;line-height:1.57}
#p-en-company .caption{font-size:12px;line-height:1.4}
#p-en-company .overline{font-size:12px;font-weight:700;line-height:1.45;letter-spacing:0}
#p-en-company .band{padding:var(--s-section) var(--s-xl)}
#p-en-company .band.light{background:var(--canvas)}
#p-en-company .band.soft{background:var(--surface-soft)}
#p-en-company .band.dark{background:var(--surface-dark);color:var(--on-dark)}
#p-en-company .band.dark h1, #p-en-company .band.dark h2, #p-en-company .band.dark h3, #p-en-company .band.dark h4, #p-en-company .hd h1, #p-en-company .hd h2{color:var(--on-dark)}
#p-en-company .inner{max-width:1200px;margin:0 auto}
@media(max-width:767px){#p-en-company .band{padding:96px var(--s-lg)}}
#p-en-company .btn{display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;letter-spacing:.144px;line-height:1;
padding:14px 24px;border-radius:var(--r-xs);border:1px solid transparent;min-height:48px}
#p-en-company .btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
#p-en-company .band.dark .btn-primary, #p-en-company .hd .btn-primary{background:var(--accent-on-dark);color:var(--ink);border-color:var(--accent-on-dark)}
#p-en-company .btn-outline-dark{background:var(--canvas);color:var(--ink);border-color:var(--hairline-strong);padding:13px 23px}
#p-en-company .btn-outline-light{background:var(--surface-dark);color:var(--on-dark);border-color:var(--on-dark);padding:13px 23px}
#p-en-company .btns{display:flex;flex-wrap:wrap;gap:var(--s-sm)}
#p-en-company
.hd{background:var(--surface-dark);color:var(--on-dark);padding:var(--s-section) var(--s-xl)}
#p-en-company .hd .inner{display:flex;flex-direction:column;gap:var(--s-xl)}
#p-en-company .hd h1{max-width:16ch}
#p-en-company .hd .subtitle{color:var(--on-dark-mute);max-width:52ch}
#p-en-company
.cnt{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hairline-strong);margin-top:var(--s-xxl)}
@media(max-width:767px){#p-en-company .cnt{grid-template-columns:1fr}}
#p-en-company .cnt .c{padding:var(--s-xl) var(--s-xl) var(--s-xl) 0;border-right:1px solid var(--hairline)}
#p-en-company .cnt .c:last-child{border-right:0}
@media(max-width:767px){#p-en-company .cnt .c{border-right:0;border-bottom:1px solid var(--hairline);padding-right:0}}
#p-en-company .cnt .v{font-size:56px;font-weight:700;line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums}
#p-en-company .cnt .l{font-size:16px;font-weight:700;color:var(--ink);margin-top:var(--s-md)}
#p-en-company .cnt .d{font-size:14px;line-height:1.57;color:var(--mute);margin-top:6px}
#p-en-company
.prin{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-md);margin-top:var(--s-xxl)}
@media(max-width:767px){#p-en-company .prin{grid-template-columns:1fr}}
#p-en-company .prin .p{border-top:2px solid var(--on-dark);padding-top:var(--s-md);display:flex;flex-direction:column;gap:var(--s-sm);padding-bottom:var(--s-lg)}
#p-en-company .prin .n{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--on-dark-mute)}
#p-en-company .prin .t{font-size:24px;font-weight:700;line-height:1;color:var(--on-dark)}
#p-en-company .prin .d{font-size:15px;line-height:1.6;color:var(--on-dark-mute)}
#p-en-company
.stack{border-top:1px solid var(--hairline-strong);margin-top:var(--s-xxl)}
#p-en-company .row{display:grid;grid-template-columns:44px 1.1fr 1.6fr;gap:var(--s-lg);padding:var(--s-md) 0;border-bottom:1px solid var(--hairline);align-items:baseline}
@media(max-width:767px){#p-en-company .row{grid-template-columns:36px 1fr;gap:var(--s-sm)}
#p-en-company .row .who{grid-column:2}}
#p-en-company .row .n{font-size:12px;font-weight:700;color:var(--ash);font-variant-numeric:tabular-nums}
#p-en-company .row .t{font-size:17px;font-weight:700;color:var(--ink)}
#p-en-company .row .who{font-size:14px;line-height:1.57;color:var(--mute)}
#p-en-company .row.ours{background:var(--ink);margin:0 -16px;padding:var(--s-lg) 16px;border-bottom:0}
#p-en-company .row.ours .n{color:rgba(255,255,255,.5)}
#p-en-company .row.ours .t{color:var(--on-dark);font-size:20px}
#p-en-company .row.ours .who{color:var(--on-dark-mute)}
#p-en-company
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-md);margin-top:var(--s-xxl)}
@media(max-width:900px){#p-en-company .team{grid-template-columns:1fr}}
#p-en-company .team .m{background:var(--canvas);border:1px solid var(--hairline);padding:var(--s-xl);display:flex;flex-direction:column;gap:var(--s-sm)}
#p-en-company .team .ph{height:180px;background:var(--surface-soft);border:1px dashed var(--stone);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-xs)}
#p-en-company .team .ph span{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--ash)}
#p-en-company .team .nm{font-size:22px;font-weight:700;line-height:1;color:var(--ink)}
#p-en-company .team .ro{font-size:14px;font-weight:700;color:var(--mute)}
#p-en-company .team .bio{font-size:14px;line-height:1.6;color:var(--mute)}
#p-en-company .team .hl{font-size:14px;line-height:1.5;color:var(--ink);font-weight:700;border-top:1px solid var(--hairline);padding-top:var(--s-sm);margin-top:auto}
#p-en-company
.tl{border-top:1px solid var(--divider-dark);margin-top:var(--s-xxl)}
#p-en-company .tl .e{display:grid;grid-template-columns:130px 1fr;gap:var(--s-lg);padding:var(--s-md) 0;border-bottom:1px solid var(--divider-dark)}
@media(max-width:600px){#p-en-company .tl .e{grid-template-columns:1fr;gap:4px}}
#p-en-company .tl .d{font-size:14px;font-weight:700;color:var(--on-dark-mute);font-variant-numeric:tabular-nums}
#p-en-company .tl .t{font-size:17px;line-height:1.5;color:var(--on-dark)}
#p-en-company
.off{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-md);margin-top:var(--s-xxl)}
@media(max-width:767px){#p-en-company .off{grid-template-columns:1fr}}
#p-en-company .off .o{border-top:2px solid var(--ink);padding-top:var(--s-md)}
#p-en-company .off .k{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--mute)}
#p-en-company .off .t{font-size:22px;font-weight:700;line-height:1;color:var(--ink);margin-top:var(--s-xs)}
#p-en-company .off .d{font-size:14px;line-height:1.6;color:var(--mute);margin-top:var(--s-xs)}
#p-en-company
.cta{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s-lg)}
#p-en-company .cta p{color:var(--on-dark-mute);max-width:52ch}
@media(max-width:767px){#p-en-company .fg{grid-template-columns:1fr}}
#p-en-company .note{background:var(--surface-deep);color:var(--on-dark-mute);padding:var(--s-section) var(--s-xl)}
#p-en-company .note h3{color:var(--on-dark);font-size:24px;margin-bottom:var(--s-lg)}
#p-en-company .ngrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-xl);margin-top:var(--s-xl)}
@media(max-width:900px){#p-en-company .ngrid{grid-template-columns:1fr}}
#p-en-company .ni{border-top:1px solid var(--divider-dark);padding-top:var(--s-md)}
#p-en-company .ni .k{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark);margin-bottom:var(--s-xs)}
#p-en-company .ni p{font-size:14px;line-height:1.6}
#p-en-company .ni b{color:var(--on-dark)}
#p-en-company .chk{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;border:1px solid #D19A5C;color:#D19A5C;padding:2px 8px;margin-left:8px;vertical-align:middle}
#p-en-company .chk.lite{border-color:var(--stone);color:var(--ash)}
#p-en-company .draftbar{background:var(--ink);color:var(--canvas);padding:10px var(--s-xl);font-size:12px;font-weight:700;letter-spacing:.05em;text-align:center}
#p-en-company a{text-decoration:none;color:inherit}
#p-en-company .btn{transition:background-color .15s,color .15s,border-color .15s;cursor:pointer}
#p-en-company .band.dark .btn-primary:hover{background:#e6e6e6;border-color:#e6e6e6}
#p-en-company .btn-outline-light:hover{background:var(--on-dark);color:var(--ink)}
#p-en-company
.bc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;font-weight:700;
letter-spacing:.06em;color:rgba(255,255,255,.45);margin-bottom:var(--s-xl)}
#p-en-company .bc a{color:rgba(255,255,255,.45);transition:color .15s}
#p-en-company .bc a:hover{color:var(--on-dark)}
#p-en-company .bc .sep{color:rgba(255,255,255,.25)}
#p-en-company .bc .cur{color:var(--on-dark)}
/* 자리가 셋입니다. 두 열로 두면 마지막 하나가 줄에 혼자 남으므로
세 열로 세우고, 좁아질 때 두 열을 거치지 않고 곧바로 한 열로 갑니다. */
#p-en-company .off{grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--s-xxl);margin-top:var(--s-xxxl)}
@media(max-width:900px){#p-en-company .off{grid-template-columns:1fr}}
#p-en-company .off .k{font-size:12px}
#p-en-company .vm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--s-xxxl);margin-top:var(--s-xxl)}
@media(max-width:900px){#p-en-company .vm{grid-template-columns:1fr;gap:var(--s-xxl)}}
/* 회사 소개의 미션과 비전. 숫자 대신 이 회사가 무엇을 하려는지를 먼저 놓습니다. */
#p-en-company .vm .b{border-top:2px solid var(--ink);padding-top:var(--s-md)}
#p-en-company .vm .k{display:block;font-size:12px;font-weight:700;
letter-spacing:.16em;color:var(--ash);margin-bottom:var(--s-md)}
#p-en-company .vm h2{margin:0 0 var(--s-md)}
#p-en-company .vm p{margin:0;font-size:16px;line-height:1.75;color:var(--charcoal)}
/* 회사 소개만 컨테이너가 1200px이라 다른 화면보다 좌우 여백이 24px씩 좁았습니다.
1152px으로 맞춰 스무 화면의 시작점을 같게 합니다. */
#p-en-company .inner{max-width:1152px}
/* 연혁 — 연도마다 선을 하나씩 긋고, 그 아래 왼쪽에 연도, 오른쪽에 월별로 묶은 일들을 둡니다.
줄마다 선을 그으면 항목이 많은 해와 적은 해의 결이 달라집니다. */
/* 묶음마다 선을 그으므로 바깥 상자의 선은 끕니다. 그대로 두면 맨 위만 두 겹입니다. */
#p-en-company .tl{display:flex;flex-direction:column;gap:var(--s-xxl);border-top:0}
#p-en-company .tl .yr{display:grid;
grid-template-columns:130px minmax(0,1fr);gap:var(--s-lg);
border-top:1px solid var(--divider-dark);padding-top:var(--s-lg)}
#p-en-company .tl .y{font-size:24px;font-weight:700;line-height:1.2;
color:var(--on-dark);font-variant-numeric:tabular-nums}
#p-en-company .tl .es{display:flex;flex-direction:column;gap:var(--s-md)}
#p-en-company .tl .mo{display:grid;
grid-template-columns:88px minmax(0,1fr);gap:var(--s-md);align-items:baseline}
#p-en-company .tl .d{font-size:14px;font-weight:700;
color:var(--on-dark-mute);font-variant-numeric:tabular-nums}
#p-en-company .tl .ts{display:flex;flex-direction:column;gap:6px}
#p-en-company .tl .t{font-size:17px;color:var(--on-dark)}
@media(max-width:767px){#p-en-company .tl .yr{grid-template-columns:1fr;gap:var(--s-sm)}
#p-en-company .tl .mo{grid-template-columns:1fr;gap:4px}}
/* 원칙 — 제목과 첫 선 사이를 벌립니다. 2px 검정선이 무거워서 32px으로는
제목에 붙어 보입니다. 아래 위치 섹션과 같은 48px을 씁니다. */
#p-en-company .prin{margin-top:var(--s-xxxl)}
/* 선 굵기를 2px에서 1px로 낮춥니다. 흰 선이라 2px이면 글자보다 먼저 읽힙니다. */
#p-en-company .prin .p{border-top-width:1px}
/* 연혁도 제목 아래에 선이 바로 오므로 같은 값을 씁니다 */
#p-en-company .tl{margin-top:var(--s-xxxl)}
/* 회사 소개만 좌우 여백이 24px이라 다른 화면의 64px과 어긋났습니다.
첫 화면과 아래 문단 전부를 같은 값으로 맞춥니다. 끊기는 폭도 767px에서
900px로 옮겨 다른 화면과 같은 자리에서 좁아지게 합니다. */
#p-en-company .hd{padding-left:64px;padding-right:64px;padding-bottom:var(--s-section)}
#p-en-company .band{padding:var(--s-section) 64px}
@media(max-width:900px){#p-en-company .hd{padding-left:24px;padding-right:24px;padding-bottom:96px}
#p-en-company .band{padding:96px 24px}}
/* 사무실 항목의 선을 위가 아니라 왼쪽에 세웁니다. 선 다음에 여백을 두고
글이 시작하므로 네 곳이 각각 한 덩어리로 읽힙니다.
굵기 1px과 검정은 계약 조건 카드에 쓰는 값과 같습니다. */
#p-en-company .off .o{
border-top:0;padding-top:0;
border-left:1px solid var(--hairline-strong);padding-left:var(--s-md)}
/* 미션과 비전의 선도 왼쪽에서 오른쪽으로 그어집니다. 도입 절차와 같은 방식입니다. */
#p-en-company .vm .b{position:relative;border-top:0}
/* 굵기는 1px 입니다. 바로 아래 원칙 섹션의 선이 1px 이라 2px 이면 미션·비전만
혼자 진해 보였습니다. 도입 절차도 같은 구조이고 그쪽 이웃인 적용 현장 표가
1px 이라 함께 맞췄습니다. 그어지는 움직임은 그대로입니다. */
#p-en-company .vm .b::before{content:"";position:absolute;
top:0;left:0;width:100%;height:1px;background:var(--ink);
transform:scaleX(0);transform-origin:left center;
transition:transform .6s cubic-bezier(.22,.61,.36,1)}
#p-en-company .vm .b.drawn::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){#p-en-company .vm .b::before{transition:none;transform:scaleX(1)}}
#p-en-company .display-xl, #p-en-company .display-lg, #p-en-company .display-md{line-height:.95}
#p-en-company .prin .d b{color:var(--on-dark);font-weight:700}
#p-en-company .tmrow{display:grid;grid-template-columns:1.05fr 1fr;
gap:var(--s-xxxl);margin-top:var(--s-xxl);align-items:start}
@media(max-width:900px){#p-en-company .tmrow{grid-template-columns:1fr;gap:var(--s-xl)}}
#p-en-company .tmcopy .d{font-size:17px;line-height:1.75;color:var(--charcoal)}
#p-en-company .tmcopy .d + .d{margin-top:var(--s-md)}
#p-en-company .tmlist{list-style:none;margin:0;padding:0;
border-top:1px solid var(--hairline-strong)}
#p-en-company .tmlist li{font-size:15px;line-height:1.6;color:var(--mute);
padding:var(--s-md) 0;border-bottom:1px solid var(--hairline)}
#p-en-company .tmlist li b{color:var(--ink);font-weight:700}
/* ── 원칙 설명을 문장마다 한 줄로 ────────────────────────────
한때 문장마다 를 두고 12px 를 띄웠습니다. 네 원칙이 문단이 아니라
선언문이라고 보아, 어느 것이 주장이고 어느 것이 부연인지 갈라 보이려던
것입니다. 실제로 세워 보니 반대가 되었습니다. 글줄 사이 24px 에 12px 이
끼어 문장마다 떨어져 서니, 문단이 아니라 항목을 나열한 목록처럼 읽혔습니다.
문장이 넷인 03 이 특히 그랬습니다. 지금은 설명마다
하나에 문장을
이어 붙인 평범한 문단입니다. 아래 규칙은 문단이 둘 이상 필요해지는 날을
위해 값만 남겨 둡니다. */
#p-en-company .prin .d p+p{margin-top:var(--s-sm)}
/* ── 회사 화면의 「우리 자리」 ───────────────────────────────────────
덱에 있던 The Gap 논증에서 결론에 해당하는 숫자만 옮겨 왔습니다.
두 숫자를 좌우에 나란히 놓아 견주게 하고, 설명은 그 아래에 답니다. */
#p-en-company .gapx{margin-top:var(--s-xxxl)}
#p-en-company .gapx .split{
display:grid;grid-template-columns:1fr 1fr;gap:var(--s-xxxl);align-items:start}
@media(max-width:767px){#p-en-company .gapx .split{grid-template-columns:1fr;gap:var(--s-xl)}}
/* 80과 20을 좌우로 놓습니다. 두 칸의 폭이 같아야 크기 차이가 그대로 견줌이 됩니다.
80은 이미 끝난 몫이라 물러나 있고, 20은 남은 몫이자 값이 가장 큰 몫이라 앞에 섭니다. */
#p-en-company .gapx .s{
display:flex;flex-direction:column;gap:6px;padding-top:var(--s-md);border-top:1px solid}
/* 칸 위의 선도 무게를 따릅니다. 끝난 쪽은 옅은 회색, 남은 쪽은 검정입니다. */
#p-en-company .gapx .s.inside{border-top-color:var(--stone)}
#p-en-company .gapx .s.outside{border-top-color:var(--hairline-strong)}
#p-en-company .gapx .fig{
display:block;font-weight:700;line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
#p-en-company .gapx .s.inside .fig{
font-size:clamp(30px, 24px + 1.6vw, 42px);color:var(--stone)}
#p-en-company .gapx .s.outside .fig{
font-size:clamp(56px, 36px + 5.3vw, 96px);color:var(--ink)}
#p-en-company .gapx .fig i{font-style:normal}
#p-en-company .gapx .l{
font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--mute);margin-top:2px}
#p-en-company .gapx .s.outside .l{color:var(--ink)}
#p-en-company .gapx .w{
font-size:15px;line-height:1.7;color:var(--ash);max-width:34ch}
#p-en-company .gapx .s.outside .w{color:var(--charcoal)}
#p-en-company .gapx .d{
margin-top:var(--s-xxxl);font-size:16px;line-height:1.75;color:var(--charcoal);max-width:62ch}
/* 설명은 두 숫자 아래에 답니다. 한 줄이 너무 길어지지 않도록 폭을 묶습니다. */
#p-en-company .gapx .d p+p{margin-top:var(--s-sm)}
#p-en-company .gapx .d b{color:var(--ink)}
/* 굵게 쓴 문장만 문단 전체가 아니라 에 언어 표시가 붙습니다.
그대로 두면 영문에서 이 한 줄만 자간이 풀려 옆 문단과 어긋납니다. */
#p-en-company .gapx .d [data-t="en"]{letter-spacing:-.005em}
#p-en-company .hd{position:relative;overflow:hidden}
#p-en-company .hd .hbg{position:absolute;inset:0;z-index:0}
#p-en-company .hd .hbg::after{
content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}
#p-en-company .hd .inner{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){#p-en-company .hd .hbg::after{background:rgba(0,0,0,.66)}}
/* ── 원칙 항목 안의 간격 ────────────────────────────────────────────
번호와 제목, 제목과 설명, 설명의 문단 사이가 모두 12px로 같았습니다.
네 관계가 한 값을 쓰니 무엇이 무엇에 딸린 글인지 드러나지 않고,
설명이 문단이 아니라 흩어진 줄처럼 읽혔습니다.
가까운 것은 붙이고 끊어야 할 곳은 벌립니다. */
#p-en-company .prin .p{gap:6px}
#p-en-company .prin .d{margin-top:14px}
/* 「우리 자리」 설명도 글자가 16px에 줄 간격이 28px이라 문단 사이 12px는
좁았습니다. 팀 설명과 같은 16px로 맞춥니다. */
#p-en-company .gapx .d p+p{margin-top:var(--s-md)}