/* IRUE 회사 사이트 (irue.kr) — 3개 언어 공용 스타일시트
   언어별로 다른 것은 글꼴과 줄바꿈 규칙뿐입니다 (AGENTS.md §1).
   페이지를 고칠 때 이 파일 하나만 고치면 세 언어에 함께 반영됩니다. */

:root{
  --paper:#FBFAF9;
  --ink:#241C22;
  --muted:#6B5F68;
  --rule:#E3DEE1;
  --plum:#460E44;
  --wash:#F4EFF3;
  --shell:68rem;
  --label:12.5rem;
  --gutter:clamp(1.25rem,5vw,2.5rem);
  /* 글꼴은 언어마다 갈아 끼웁니다 */
  --sans:"Noto Sans KR";
  --serif:"Noto Serif KR";
}
html[lang="ja"]{--sans:"Noto Sans JP";--serif:"Noto Serif JP"}
html[lang="en"]{--sans:"Noto Sans";--serif:"Noto Serif"}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans),system-ui,sans-serif;
  font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.85;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif),serif;font-weight:600;line-height:1.4;margin:0}
p{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px;border-radius:2px}

/* 줄바꿈 — 한국어는 어절 단위로 끊고, 일본어·영어는 표준 규칙을 따릅니다 */
body,h1,h2,h3{word-break:keep-all;overflow-wrap:break-word}
html[lang="ja"] body,html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3{
  word-break:normal;line-break:strict;overflow-wrap:break-word;
}
html[lang="en"] body,html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{
  word-break:normal;overflow-wrap:break-word;
}

.wrap{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

/* 좌: 섹션 이름 / 우: 내용. 폭이 좁으면 한 줄로 쌓입니다. */
.grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:56rem){
  .grid{
    grid-template-columns:var(--label) minmax(0,40rem);
    column-gap:clamp(2.5rem,6vw,4.5rem);
  }
}
.grid > .col{min-width:0}

.band{padding-block:clamp(3.25rem,8vw,5.5rem)}
.band + .band{border-top:1px solid var(--rule)}
.band h2{
  font-size:clamp(1.15rem,1.05rem + .4vw,1.3rem);
  font-weight:600;color:var(--ink);
}
@media (min-width:56rem){
  /* 왼쪽 좁은 칸에 놓인 섹션 이름만 따라다닙니다.
     오른쪽 본문을 읽는 동안 지금 어느 단락인지 보이게 하기 위해서입니다. */
  .grid > .col > h2{position:sticky;top:2.5rem}
}

/* 머리말 */
.masthead{padding-block:clamp(1.75rem,4vw,2.5rem)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.masthead img{height:clamp(2.6rem,6vw,3.3rem);width:auto}
.mast-right{display:flex;align-items:center;gap:clamp(.9rem,3vw,1.6rem);flex-wrap:wrap}
.masthead .svc{
  font-size:.875rem;font-weight:500;color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:.15rem;
  transition:color .18s,border-color .18s;
}
.masthead .svc:hover{color:var(--plum);border-color:var(--plum)}

/* 언어 — 실제 링크여야 크롤러가 다른 언어판을 찾습니다 (AGENTS.md 규칙 4) */
.langs{display:flex;align-items:center;gap:.7rem;font-size:.8125rem;line-height:1.4}
.langs a,.langs span{text-decoration:none;padding-bottom:.1rem;border-bottom:1px solid transparent}
.langs a{color:var(--muted);transition:color .18s,border-color .18s}
.langs a:hover{color:var(--plum);border-color:var(--plum)}
.langs [aria-current="page"]{color:var(--ink);font-weight:700}

/* 히어로 */
.hero{padding-block:clamp(1.75rem,5vw,3.5rem) clamp(3.25rem,8vw,5.5rem)}
.hero h1{
  grid-column:1/-1;
  font-size:clamp(1.85rem,1.05rem + 3.5vw,3.2rem);
  font-weight:700;letter-spacing:-.015em;max-width:18ch;
  margin-bottom:clamp(1.25rem,3vw,2rem);
  text-wrap:balance;
}
html[lang="en"] .hero h1{max-width:20ch}
/* 일본어는 단어 사이에 띄어쓰기가 없어 복합어 한가운데서 끊깁니다.
   큰 글씨의 표제에서는 보기 나쁘므로, 붙여 둘 덩어리만 nowrap으로 묶습니다. */
.hero h1 .nb{white-space:nowrap}
.hero .lede{color:var(--muted)}
@media (min-width:56rem){.hero .lede{grid-column:2}}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.5rem,3.5vw,2rem)}
.btn{
  display:inline-block;padding:.8rem 1.6rem;border-radius:999px;
  font-size:.9375rem;font-weight:700;text-decoration:none;
  border:1px solid var(--plum);transition:background .18s,color .18s;
}
.btn-solid{background:var(--plum);color:#fff}
.btn-solid:hover{background:#2F0930}
.btn-line{color:var(--plum)}
.btn-line:hover{background:var(--wash)}

/* 본문 */
.prose{display:grid;gap:1.15rem}
.prose .note{color:var(--muted);font-size:.9375rem}
/* 본문 안에서 서비스 사이트로 나가는 링크 */
.prose a{
  color:var(--plum);font-weight:500;text-decoration:none;
  border-bottom:1px solid #C2ABBF;transition:border-color .18s,background .18s;
}
.prose a:hover{border-color:var(--plum);background:var(--wash)}

/* 표처럼 읽히는 사실 목록 */
.facts{list-style:none;margin:2rem 0 0;padding:0}
.facts li{
  display:flex;flex-wrap:wrap;gap:.2rem 1.25rem;
  padding:.9rem 0;border-top:1px solid var(--rule);
}
.facts li:last-child{border-bottom:1px solid var(--rule)}
.facts .k{flex:0 0 8rem;color:var(--muted);font-size:.875rem}
html[lang="ja"] .facts .k{flex-basis:10.5rem}
html[lang="en"] .facts .k{flex-basis:11rem}
.facts li > span:last-child{flex:1 1 0;min-width:0}

/* 잇는 자리 — 이 페이지에서 유일하게 힘을 주는 곳 */
.bridge{background:var(--wash);border-top:1px solid var(--rule)}
.bridge h2{text-align:center;margin-bottom:clamp(2.25rem,5vw,3rem)}
.sides{
  display:grid;grid-template-columns:1fr;gap:2.25rem;
  max-width:50rem;margin-inline:auto;
}
.side h3{font-size:1rem;font-weight:700;color:var(--plum);margin-bottom:.7rem}
/* 두 쪽을 가르는 선. 로고의 획처럼 양 끝이 사라지게 둡니다. */
.seam{
  height:1px;
  background:linear-gradient(to right,transparent,#C2ABBF 18%,#C2ABBF 82%,transparent);
}
@media (min-width:48rem){
  .sides{grid-template-columns:1fr 1px 1fr;gap:0;column-gap:clamp(3.5rem,7vw,5.5rem)}
  .seam{
    height:auto;width:1px;align-self:stretch;
    background:linear-gradient(to bottom,transparent,#C2ABBF 18%,#C2ABBF 82%,transparent);
  }
}
.resolve{
  margin-top:clamp(2.5rem,6vw,3.5rem);
  display:grid;justify-items:center;gap:1.1rem;text-align:center;
}
.resolve img{height:2.6rem;width:auto}
.resolve p{
  font-family:var(--serif),serif;font-weight:600;
  font-size:clamp(1.15rem,1rem + .8vw,1.5rem);line-height:1.6;max-width:22ch;
  text-wrap:balance;
}
html[lang="en"] .resolve p{max-width:26ch}

/* 근거 각주 — 넓은 화면에서는 한 줄, 좁아지면 언어에 맞는 자리에서 끊습니다. */
.footnote{
  margin-top:clamp(2rem,4vw,2.5rem);padding-top:1.1rem;
  border-top:1px solid #DCCFD9;
  font-size:.8125rem;line-height:1.7;color:#6B5F68;
  max-width:100%;margin-inline:auto;text-align:center;
  /* 두 줄 이상이 될 때 줄 길이를 고르게 나눕니다. 외톨이 낱말을 막습니다. */
  text-wrap:balance;
}
/* 한국어 — 어절(띄어쓰기) 단위로 끊습니다. */
html[lang="ko"] .footnote{word-break:keep-all}
/* 일본어 — 띄어쓰기가 없으므로 문절(文節) 단위로 끊습니다.
   auto-phrase를 모르는 브라우저는 위의 word-break:normal을 그대로 씁니다. */
html[lang="ja"] .footnote{word-break:auto-phrase;line-break:strict}
/* 영어 — 낱말 단위로 끊고, 한 낱말이 폭을 넘으면 그때만 낱말 안에서 끊습니다. */
html[lang="en"] .footnote{word-break:normal;overflow-wrap:break-word;hyphens:none}

/* 일본어 문절 단위 끊기는 각주만이 아니라 제목과 짧은 문구 전반에 적용합니다.
   긴 본문 단락은 제외합니다 — 문절 단위로 끊으면 오른쪽 끝이 심하게 들쭉날쭉해집니다. */
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] .resolve p,
html[lang="ja"] .bio .close,
html[lang="ja"] .facts li,
html[lang="ja"] .reach li,
html[lang="ja"] .langs,
html[lang="ja"] .btn{word-break:auto-phrase}

/* 본문 단락은 세 언어 모두 마지막 줄에 낱말 하나만 남는 것을 막습니다. */
.prose p,.hero .lede p,.side p,.voice blockquote,.bio p{text-wrap:pretty}
/* 출처 표기는 한 덩어리로 둡니다. 줄이 바뀌어도 통째로 넘어갑니다. */
.footnote .src{white-space:nowrap}

/* 대표 약력 */
.bio{display:grid;gap:1.15rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.bio h3{font-size:1.05rem;font-weight:700;color:var(--plum);margin-bottom:.2rem}
.bio .close{font-family:var(--serif),serif;font-weight:600;color:var(--ink);line-height:1.7}
.bio .close span{display:block;margin-top:.5rem;font-size:1.1em;font-weight:700;color:var(--plum)}

/* 대표 인용 */
.voice blockquote{
  margin:0;padding-left:clamp(1rem,3vw,1.5rem);border-left:2px solid var(--plum);
  font-family:var(--serif),serif;font-weight:500;
  font-size:clamp(1.05rem,1rem + .4vw,1.18rem);line-height:1.9;
}
.voice .sign{margin-top:1.1rem;color:var(--muted);font-size:.9375rem}

/* 연락 */
.reach{list-style:none;margin:0;padding:0}
.reach li{
  display:flex;flex-wrap:wrap;gap:.2rem 1.25rem;align-items:baseline;
  padding:.95rem 0;border-top:1px solid var(--rule);
}
.reach li:last-child{border-bottom:1px solid var(--rule)}
.reach .k{flex:0 0 8rem;color:var(--muted);font-size:.875rem}
html[lang="ja"] .reach .k{flex-basis:11.5rem}
html[lang="en"] .reach .k{flex-basis:11rem}
.reach a{
  font-weight:500;text-decoration:none;border-bottom:1px solid var(--rule);
  transition:border-color .18s,color .18s;
  display:inline-flex;align-items:center;gap:.45rem;
}
.reach a:hover{color:var(--plum);border-color:var(--plum)}
/* 브랜드 로고는 공식 글리프를 글자 색에 맞춰 단색으로 씁니다.
   두 브랜드 모두 단색 사용을 공식 가이드에서 허용합니다. */
.reach .ico{width:1.2em;height:1.2em;flex:none;fill:currentColor}

/* 꼬리말 */
footer{border-top:1px solid var(--rule);padding-block:2.5rem 3.5rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
footer p{color:var(--muted);font-size:.875rem}
footer .brand{letter-spacing:.22em;font-weight:700;color:var(--ink);font-size:.8125rem}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}