/* it7 에서 이식한 화면(legacy/solutions.css, public-cost.css)을 moram 껍데기에 맞추는 다리.
   원본 CSS 는 손대지 않고 여기서만 덮는다. 이식 페이지에서 이 파일을 마지막에 불러온다. */

:root {
  --tools-shell: 1120px;

  /* it7 의 강조색은 주황빨강(#d54029)이었다. 모램 톤으로 바꾼다.
     원본이 변수로 쓰고 있어서 이 두 줄이면 버튼·글로우·강조선이 함께 따라온다. */
  --solution-accent: #14564b;
  --solution-accent-dark: #0f3f34;
  --solution-teal: #1f7a6c;
}

/* 1) Bootstrap 이 하던 .container 를 대신한다.
   it7 페이지는 bootstrap.min.css 의 .container 로 본문 폭을 잡았는데 이식 때 가져오지 않았다.
   그래서 모든 섹션이 폭 제한 없이 화면 왼쪽 끝에 붙어 있었다. */
.container {
  width: min(var(--tools-shell), calc(100% - 48px));
  margin-inline: auto;
}

/* 2) 머리말·꼬리말 폭을 본문과 맞춘다. 서로 다르면 로고와 본문 왼쪽 선이 어긋난다. */
.tools-header .shell,
.tools-footer .shell {
  width: min(var(--tools-shell), calc(100% - 48px));
}

/* 3) 머리말이 짙은 히어로 바로 위에 온다. 경계선 대신 여백으로 구분한다. */
.tools-header {
  border-bottom: 0;
}

/* 4) 히어로가 첫 화면을 통째로 먹지 않도록 줄인다. 원본은 96/88px 여백에 최대 4.7rem 제목이었다. */
.solution-hero {
  padding: 72px 0 64px;
  background:
    radial-gradient(circle at 82% 24%, rgba(31, 122, 108, .30), transparent 34%),
    radial-gradient(circle at 12% 82%, rgba(20, 86, 75, .26), transparent 32%),
    linear-gradient(135deg, #0d1320 0%, #121c32 52%, #14293f 100%);
}

.solution-hero h1 {
  max-width: 820px;
  font-size: clamp(2rem, 3.4vw, 3.05rem);
  letter-spacing: -.03em;
  line-height: 1.22;
}

.solution-hero p {
  max-width: 680px;
}

/* 5) 강조 버튼의 그림자 색도 강조색을 따라가게 한다(원본은 주황 rgba 고정값). */
.solution-btn-primary {
  box-shadow: 0 10px 24px rgba(20, 86, 75, .26);
}

.solution-catalog-page .solution-btn-primary {
  background: var(--solution-accent);
  box-shadow: 0 4px 15px rgba(20, 86, 75, .3);
}

@media (max-width: 720px) {
  .container,
  .tools-header .shell,
  .tools-footer .shell {
    width: calc(100% - 32px);
  }

  .solution-hero {
    padding: 48px 0 44px;
  }
}

/* 6) 적산 화면은 자체 강조색(--cost-blue #1d4ed8)을 따로 쓴다. 히어로 버튼은 초록인데
   검색 버튼만 파랑이면 한 화면에 강조색이 둘이 된다. 조작 색을 모램 초록으로 모은다.
   옅은 파랑 배경도 같이 맞춰야 초록 버튼과 따로 놀지 않는다. */
/* 이 변수들은 :root 가 아니라 body 의 .public-cost-page 에 선언돼 있다.
   :root 로 덮으면 더 가까운 선언이 이겨서 적용되지 않는다. 같은 선택자로 덮는다. */
.public-cost-page {
  --cost-blue: #14564b;
  --cost-blue-dark: #0f3f34;
}

.public-cost-trial-meter {
  border-color: #cfe3dc;
  color: #10403a;
  background: linear-gradient(135deg, #eef5f2, #ecfbf6);
}

.public-cost-row:hover,
.public-cost-row.is-selected {
  background: #eef5f2;
}

.public-cost-calculator {
  border-color: #cfe3dc;
  background: #eef5f2;
}

/* 7) 한국어 제목이 낱말 중간에서 잘리는 것을 막는다("있습 / 니다" 같은 줄바꿈). */
.solution-page h1,
.solution-page h2,
.solution-page h3,
.solution-page p,
.solution-hero h1 {
  word-break: keep-all;
}

/* 8) 🔴 hidden 속성이 듣지 않던 문제.
   화면 JS 는 요소를 숨길 때 element.hidden = true 만 쓴다. 그런데 이식 CSS 가
   .public-cost-more 같은 요소에 display 를 직접 지정해 두어서 브라우저 기본값인
   [hidden]{display:none} 을 이겨 버렸다. Bootstrap 의 [hidden]{display:none!important}
   가 이걸 눌러 주고 있었는데 이식 때 빠졌다.
   증상: 결과가 4건뿐인데도 「결과 더 보기」 버튼이 남아 있고 눌러도 아무 일이 없었다
   (JS 는 이미 다 보여줬다고 판단한 상태). 상세 패널의 "행을 선택하세요" 안내도
   항목을 고른 뒤까지 같이 떠 있었다. */
[hidden] {
  display: none !important;
}

/* 9) 오른쪽 상세 패널이 좁았다(357px). 본문 폭을 넓히고 좌우 비율을 다시 잡는다. */
:root {
  --tools-shell: 1200px;
}

/* 이 파일이 원본보다 뒤에 오므로, 미디어 쿼리 없이 쓰면 원본의 좁은 화면 규칙까지 덮는다.
   넓은 화면에만 적용되도록 아래 경계를 명시한다. 992px 미만은 원본의 1단 그대로 둔다. */
@media (min-width: 1200px) {
  .public-cost-workspace {
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
  }
}

/* 원본은 992px 아래에서 1단으로 접는다. 이 파일이 원본보다 뒤에 오므로
   위쪽 경계만 지정하면 그 1단 규칙까지 덮어써서 좁은 화면에 가로 스크롤이 생긴다.
   아래 경계를 함께 준다. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .public-cost-workspace {
    grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
  }
}

/* ── 미디어 도구(영상·음성) ─────────────────────────────────────────────
   적산 화면과 같은 방식으로 맞춘다. 원본 CSS(solution-media-tools.css)는 손대지 않는다. */

/* 10) 강조색. 변수는 :root 가 아니라 .media-tool-page 에 선언돼 있다. */
.media-tool-page {
  --media-blue: #14564b;
  --media-blue-dark: #0f3f34;
}

/* 옅은 파랑 배경·선도 함께 맞춰야 초록 버튼과 따로 놀지 않는다. */
.media-tool-page .media-tool-notice,
.media-tool-page .media-tool-rights {
  border-color: #cfe3dc;
  color: #10403a;
  background: linear-gradient(135deg, #eef5f2, #ecfbf6);
}

.media-tool-page .media-tool-card,
.media-tool-page .media-tool-panel {
  border-color: #dfe7e3;
}

/* 11) 머리말과 본문의 왼쪽 선이 90px 어긋나 있었다(1180 vs 1000).
   적산 화면과 같은 폭(1,200)으로 맞춘다. */
.media-tool-page .site-header__inner,
.media-tool-page .media-tool-shell,
.media-tool-page > .container {
  width: min(1200px, calc(100% - 48px));
  max-width: none;
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}

/* 12) 히어로가 첫 화면을 통째로 먹지 않게 줄인다(원본 78/72px, 제목 최대 3.45rem). */
.media-tool-page .media-tool-hero {
  padding: 64px 0 56px;
}

.media-tool-page .media-tool-hero h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  letter-spacing: -.03em;
  line-height: 1.24;
}

.media-tool-page h1,
.media-tool-page h2,
.media-tool-page h3,
.media-tool-page p {
  word-break: keep-all;
}

@media (max-width: 720px) {
  .media-tool-page .site-header__inner,
  .media-tool-page .media-tool-shell,
  .media-tool-page > .container {
    width: calc(100% - 32px);
  }

  .media-tool-page .media-tool-hero {
    padding: 44px 0 40px;
  }
}

/* 13) 남아 있던 파랑 두 군데.
   - 히어로 눈썹 문구와 아이콘이 하늘색(#7dd3fc)이었다. 초록 계열로.
   - 클래스 없는 링크(언어 전환, 이력의 원본 주소)는 Bootstrap 기본 파랑(#007bff)을 받는다. */
.media-tool-page .media-tool-eyebrow {
  color: #8fd3c3;
}

.media-tool-page .lang-toggle a {
  color: #4a5a55;
  text-decoration: none;
}

.media-tool-page .lang-toggle a:hover {
  color: var(--media-blue);
  text-decoration: underline;
}

.media-tool-page .history-item a,
.media-tool-page .app-wrap a:not([class*="btn"]):not([class*="media-tool"]) {
  color: var(--media-blue);
}

/* 14) 진행률 막대는 Bootstrap 기본색(#007bff)을 쓴다. 변환 중 화면에서 가장 눈에 띄는 요소다. */
.media-tool-page .progress-bar {
  background-color: var(--media-blue);
}

/* 15) Bootstrap 기본 버튼 색(primary)도 맞춘다. 배속 선택 버튼이 outline-primary 다. */
.media-tool-page .btn-primary {
  color: #fff;
  border-color: var(--media-blue);
  background-color: var(--media-blue);
}

.media-tool-page .btn-primary:hover,
.media-tool-page .btn-primary:focus,
.media-tool-page .btn-primary:active {
  border-color: var(--media-blue-dark);
  background-color: var(--media-blue-dark);
}

.media-tool-page .btn-outline-primary {
  color: var(--media-blue);
  border-color: var(--media-blue);
}

.media-tool-page .btn-outline-primary:hover,
.media-tool-page .btn-outline-primary:focus,
.media-tool-page .btn-outline-primary:active,
.media-tool-page .btn-outline-primary.active {
  color: #fff;
  border-color: var(--media-blue);
  background-color: var(--media-blue);
}

.media-tool-page .btn-check:checked + .btn-outline-primary {
  color: #fff;
  border-color: var(--media-blue);
  background-color: var(--media-blue);
}