/* ============================================================
   깨알도구 TOOL COMMON CSS
   모든 개별 도구 페이지 공통 디자인

   중요:
   - 홈페이지에는 영향을 주지 않는다.
   - 모든 공통 규칙은 .tool-page 내부에서만 작동한다.
   - 개별 tools/.../tool.css 에서는 특수 UI만 정의한다.
   ============================================================ */

/* ============================================================
   1. TOOL DESIGN VARIABLES

   전체 도구 디자인을 변경하고 싶을 때
   가장 먼저 이 부분만 수정하면 된다.
   ============================================================ */

.tool-page {
  /* ------------------------------------------------------------
     PAGE
     ------------------------------------------------------------ */

  --tool-page-max-width: 920px;

  --tool-page-padding-top: 30px;
  --tool-page-padding-bottom: 52px;

  /* ------------------------------------------------------------
     HEADER / TITLE
     ------------------------------------------------------------ */

  --tool-title-size: 29px;
  --tool-title-line-height: 1.25;
  --tool-title-letter-spacing: -1.3px;

  --tool-description-size: 13px;

  --tool-category-size: 10px;

  /* ------------------------------------------------------------
     ICON
     ------------------------------------------------------------ */

  --tool-icon-size: 54px;
  --tool-icon-font-size: 27px;
  --tool-icon-radius: 16px;

  /* ------------------------------------------------------------
     PANELS
     ------------------------------------------------------------ */

  --tool-panel-radius: 18px;
  --tool-panel-padding: 22px;
  --tool-panel-gap: 14px;

  /* ------------------------------------------------------------
     SECTION
     ------------------------------------------------------------ */

  --tool-section-title-size: 17px;
  --tool-section-gap: 22px;

  /* ------------------------------------------------------------
     FORM
     ------------------------------------------------------------ */

  --tool-label-size: 12px;

  --tool-input-height: 48px;
  --tool-input-radius: 11px;
  --tool-input-font-size: 15px;

  --tool-help-size: 9px;

  /* ------------------------------------------------------------
     CALCULATE BUTTON
     ------------------------------------------------------------ */

  --tool-button-height: 48px;
  --tool-button-radius: 12px;
  --tool-button-size: 13px;

  /* ------------------------------------------------------------
     RESULT
     ------------------------------------------------------------ */

  --tool-result-label-size: 11px;

  --tool-result-main-size: 32px;

  --tool-result-sub-size: 8px;

  /* ------------------------------------------------------------
     ACTION
     ------------------------------------------------------------ */

  --tool-action-height: 42px;
  --tool-action-radius: 10px;
  --tool-action-size: 11px;

  /* ------------------------------------------------------------
     NOTICE
     ------------------------------------------------------------ */

  --tool-notice-title-size: 10px;
  --tool-notice-text-size: 9px;

  /* ------------------------------------------------------------
     GUIDE
     ------------------------------------------------------------ */

  --tool-guide-title-size: 15px;
  --tool-guide-text-size: 10px;
}

/* ============================================================
   2. PAGE
   ============================================================ */

.tool-page {
  padding: var(--tool-page-padding-top) 0 var(--tool-page-padding-bottom);
}

.tool-page .tool-page-container {
  width: 100%;

  max-width: var(--tool-page-max-width);
}

/* ============================================================
   3. BREADCRUMB
   ============================================================ */

.tool-page .tool-breadcrumb {
  display: flex;

  align-items: center;

  gap: 7px;

  margin-bottom: 18px;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 600;
}

.tool-page .tool-breadcrumb a {
  color: inherit;

  text-decoration: none;
}

.tool-page .tool-breadcrumb a:hover {
  color: var(--text);
}

/* ============================================================
   4. TOOL HEADER
   ============================================================ */

.tool-page .tool-page-head {
  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 18px;
}

.tool-page .tool-page-icon {
  width: var(--tool-icon-size);

  height: var(--tool-icon-size);

  flex: 0 0 var(--tool-icon-size);

  display: flex;

  align-items: center;
  justify-content: center;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--tool-icon-radius);

  font-size: var(--tool-icon-font-size);

  line-height: 1;
}

.tool-page .tool-page-title-area {
  min-width: 0;
}

.tool-page .tool-page-label {
  margin-bottom: 2px;

  color: var(--accent);

  font-size: var(--tool-category-size);

  font-weight: 800;
}

.tool-page .tool-page-head h1 {
  margin: 0;

  color: var(--text);

  font-size: var(--tool-title-size);

  line-height: var(--tool-title-line-height);

  letter-spacing: var(--tool-title-letter-spacing);
}

.tool-page .tool-page-head p {
  margin: 5px 0 0;

  color: var(--text-soft);

  font-size: var(--tool-description-size);

  line-height: 1.55;

  word-break: keep-all;
}

/* ============================================================
   5. TOOL NOTICE

   일반 안내:
   <div class="tool-notice">

   경고 안내:
   <div class="tool-notice warning">
   ============================================================ */

.tool-page .tool-notice {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-bottom: 14px;

  padding: 12px 14px;

  border: 1px solid var(--line);

  border-radius: 12px;

  background: var(--surface-soft);
}

.tool-page .tool-notice-icon {
  width: 24px;
  height: 24px;

  flex: 0 0 24px;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 16px;

  line-height: 1;
}

.tool-page .tool-notice strong {
  display: block;

  color: var(--text);

  font-size: var(--tool-notice-title-size);

  font-weight: 800;
}

.tool-page .tool-notice p {
  margin: 3px 0 0;

  color: var(--text-soft);

  font-size: var(--tool-notice-text-size);

  line-height: 1.55;

  word-break: keep-all;
}

/* ============================================================
   6. WARNING NOTICE
   ============================================================ */

.tool-page .tool-notice.warning {
  border-color: #e6d7ad;

  background: #fffaf0;
}

.tool-page .tool-notice.warning .tool-notice-icon {
  width: 20px;
  height: 20px;

  flex-basis: 20px;

  margin-top: 1px;

  border-radius: 50%;

  background: var(--accent);

  color: #ffffff;

  font-size: 12px;

  font-weight: 900;
}

.tool-page .tool-notice.warning strong {
  color: #70551d;
}

.tool-page .tool-notice.warning p {
  color: #86734b;
}

/* ============================================================
   7. CALCULATOR LAYOUT
   ============================================================ */

.tool-page .tool-calculator {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: var(--tool-panel-gap);

  align-items: start;
}

/* ============================================================
   8. INPUT / RESULT PANEL
   ============================================================ */

.tool-page .tool-input-panel,
.tool-page .tool-result-panel,

/* 기존 코드 호환 */
.tool-page .calculator-panel,
.tool-page .result-panel {
  min-width: 0;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--tool-panel-radius);
}

.tool-page .tool-input-panel,
.tool-page .calculator-panel {
  padding: var(--tool-panel-padding);
}

.tool-page .tool-result-panel,
.tool-page .result-panel {
  min-height: 360px;

  padding: var(--tool-panel-padding);

  display: flex;

  flex-direction: column;

  justify-content: center;
}

/* ============================================================
   9. CALCULATOR SECTION
   ============================================================ */

.tool-page .calculator-section + .calculator-section {
  margin-top: var(--tool-section-gap);

  padding-top: 19px;

  border-top: 1px solid var(--line);
}

.tool-page .tool-section-title,
.tool-page .calculator-section-title {
  margin-bottom: 14px;

  color: var(--text);

  font-size: var(--tool-section-title-size);

  font-weight: 800;

  letter-spacing: -0.5px;
}

/* ============================================================
   10. SECTION HEAD

   main.css의 홈페이지용 .section-head와 충돌하지 않도록
   반드시 .tool-page 내부에서만 처리
   ============================================================ */

.tool-page .section-head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 12px;
}

.tool-page .section-head .calculator-section-title {
  margin-bottom: 0;
}

.tool-page .section-description {
  margin-top: 3px;

  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.5;
}

/* ============================================================
   11. BADGE
   ============================================================ */

.tool-page .optional-badge,
.tool-page .tool-badge {
  flex: 0 0 auto;

  padding: 4px 7px;

  border-radius: 999px;

  background: var(--surface-soft);

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 800;
}

/* ============================================================
   12. FORM GROUP
   ============================================================ */

.tool-page .tool-form-group,
.tool-page .form-group {
  margin-bottom: 18px;
}

.tool-page .tool-form-group.no-bottom,
.tool-page .form-group.no-bottom {
  margin-bottom: 0;
}

.tool-page .tool-form-group label,
.tool-page .form-group label {
  display: block;

  margin-bottom: 7px;

  color: var(--text);

  font-size: var(--tool-label-size);

  font-weight: 800;
}

.tool-page .label-optional {
  margin-left: 4px;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 600;
}

/* ============================================================
   13. INPUT
   ============================================================ */

.tool-page .tool-input-wrap,
.tool-page .input-wrap {
  position: relative;
}

.tool-page .tool-input-wrap input,
.tool-page .tool-input-wrap select,
.tool-page .input-wrap input,
.tool-page .input-wrap select {
  width: 100%;

  height: var(--tool-input-height);

  padding: 0 52px 0 13px;

  border: 1px solid var(--line);

  border-radius: var(--tool-input-radius);

  background: #ffffff;

  color: var(--text);

  outline: none;

  font-size: var(--tool-input-font-size);

  font-weight: 700;

  box-sizing: border-box;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.tool-page .tool-input-wrap input:focus,
.tool-page .tool-input-wrap select:focus,
.tool-page .input-wrap input:focus,
.tool-page .input-wrap select:focus {
  border-color: var(--accent);

  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.1);
}

.tool-page .tool-input-unit,
.tool-page .input-unit {
  position: absolute;

  right: 13px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 700;

  pointer-events: none;
}

/* ============================================================
   14. HELP
   ============================================================ */

.tool-page .tool-form-help,
.tool-page .form-help {
  margin-top: 6px;

  color: #96978f;

  font-size: var(--tool-help-size);

  line-height: 1.5;
}

.tool-page .tool-form-help.warning,
.tool-page .form-help.warning,
.tool-page .warning-help {
  color: #9b7440;
}

/* ============================================================
   15. TWO COLUMN INPUT
   ============================================================ */

.tool-page .two-column-inputs {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 8px;
}

/* ============================================================
   16. OPTION BUTTONS

   할인율 계산기 3개 모드처럼
   버튼 개수가 달라도 자동 배치
   ============================================================ */

.tool-page .tool-option-buttons {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));

  gap: 7px;
}

.tool-page .tool-option-button {
  min-width: 0;

  min-height: 48px;

  padding: 7px 6px;

  border: 1px solid var(--line);

  border-radius: 10px;

  background: var(--surface-soft);

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.tool-page .tool-option-button small {
  display: block;

  margin-top: 2px;

  font-size: 12px;

  font-weight: 600;

  opacity: 0.75;
}

.tool-page .tool-option-button:hover {
  transform: translateY(-1px);

  color: var(--text);
}

.tool-page .tool-option-button.active {
  border-color: var(--brand);

  background: var(--brand);

  color: #ffffff;
}

/* ============================================================
   17. OPTION GUIDE
   ============================================================ */

.tool-page .tool-option-guide {
  margin-top: 8px;

  padding: 8px 10px;

  border-radius: 8px;

  background: var(--surface-soft);

  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.5;
}

/* ============================================================
   18. CALCULATOR MESSAGE
   ============================================================ */

.tool-page .tool-calculator-message,
.tool-page .calculator-message {
  min-height: 18px;

  margin: 12px 0 6px;

  color: #a24b3b;

  font-size: 12px;

  font-weight: 700;
}

/* ============================================================
   19. CALCULATE BUTTON
   ============================================================ */

.tool-page .tool-calculate-button,
.tool-page .calculate-button {
  width: 100%;

  min-height: var(--tool-button-height);

  padding: 0 15px;

  border: 0;

  border-radius: var(--tool-button-radius);

  background: var(--brand);

  color: #ffffff;

  font-size: var(--tool-button-size);

  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

.tool-page .tool-calculate-button:hover,
.tool-page .calculate-button:hover {
  transform: translateY(-1px);
}

/* ============================================================
   20. RESULT EMPTY
   ============================================================ */

.tool-page .tool-result-empty,
.tool-page .result-empty {
  padding: 34px 10px;

  text-align: center;
}

.tool-page .result-empty-icon {
  margin-bottom: 9px;

  font-size: 31px;
}

.tool-page .result-empty strong {
  display: block;

  color: var(--text);

  font-size: 15px;
}

.tool-page .result-empty p {
  margin: 4px 0 0;

  color: var(--text-soft);

  font-size: 12px;
}

/* ============================================================
   21. RESULT CONTENT
   ============================================================ */

.tool-page .tool-result-content,
.tool-page .result-content {
  width: 100%;
}

.tool-page .tool-result-label,
.tool-page .result-label {
  margin-bottom: 3px;

  color: var(--text-soft);

  font-size: var(--tool-result-label-size);

  font-weight: 700;
}

.tool-page .tool-result-main strong,
.tool-page .result-main strong {
  display: block;

  color: var(--brand);

  font-size: var(--tool-result-main-size);

  line-height: 1.2;

  letter-spacing: -1.6px;

  overflow-wrap: anywhere;
}

.tool-page .tool-result-sub,
.tool-page .result-sub {
  margin-top: 4px;

  color: var(--text-soft);

  font-size: var(--tool-result-sub-size);

  line-height: 1.5;
}

/* ============================================================
   22. RESULT GRID
   ============================================================ */

.tool-page .tool-result-grid,
.tool-page .result-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 7px;

  margin-top: 17px;
}

.tool-page .tool-result-item,
.tool-page .result-item {
  min-width: 0;

  padding: 10px 11px;

  border-radius: 10px;

  background: var(--surface-soft);
}

.tool-page .tool-result-item.highlight,
.tool-page .result-item.highlight {
  background: #fff7df;
}

.tool-page .tool-result-item span,
.tool-page .result-item span {
  display: block;

  margin-bottom: 3px;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 700;
}

.tool-page .tool-result-item strong,
.tool-page .result-item strong {
  display: block;

  color: var(--text);

  font-size: 12px;

  font-weight: 800;

  overflow-wrap: anywhere;
}

/* ============================================================
   23. RESULT LIST
   ============================================================ */

.tool-page .tool-result-list,
.tool-page .result-list {
  margin-top: 17px;

  border-top: 1px solid var(--line);
}

.tool-page .tool-result-row,
.tool-page .result-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding: 8px 1px;

  border-bottom: 1px solid #efeee9;
}

.tool-page .tool-result-row[hidden],
.tool-page .result-row[hidden] {
  display: none;
}

.tool-page .tool-result-row span,
.tool-page .result-row span {
  display: block;

  color: var(--text);

  font-size: 12px;

  font-weight: 700;
}

.tool-page .tool-result-row small,
.tool-page .result-row small {
  display: block;

  margin-top: 2px;

  color: var(--text-soft);

  font-size: 12px;
}

.tool-page .tool-result-row > strong,
.tool-page .result-row > strong {
  flex: 0 0 auto;

  color: var(--text);

  font-size: 12px;

  font-weight: 800;
}

/* ============================================================
   24. FORMULA BOX
   ============================================================ */

.tool-page .formula-box {
  margin-top: 11px;

  padding: 9px 10px;

  border: 1px solid var(--line);

  border-radius: 9px;

  background: #ffffff;
}

.tool-page .formula-box span {
  display: block;

  margin-bottom: 3px;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 700;
}

.tool-page .formula-box strong {
  display: block;

  color: var(--text);

  font-size: 12px;

  line-height: 1.5;

  overflow-wrap: anywhere;
}

/* ============================================================
   25. RESULT ACTIONS
   ============================================================ */

.tool-page .tool-result-actions,
.tool-page .result-actions {
  display: grid;

  grid-template-columns:
    44px
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 7px;

  margin-top: 17px;
}

.tool-page .tool-result-action,
.tool-page .result-action {
  min-width: 0;

  height: var(--tool-action-height);

  padding: 0 12px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid var(--line);

  border-radius: var(--tool-action-radius);

  background: var(--surface);

  color: var(--text);

  font-size: var(--tool-action-size);

  font-weight: 800;

  white-space: nowrap;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    opacity 0.15s ease,
    background 0.15s ease;
}

.tool-page .tool-result-action.primary,
.tool-page .result-action.primary {
  border-color: var(--brand);

  background: var(--brand);

  color: #ffffff;
}

.tool-page .tool-result-action:hover:not(:disabled),
.tool-page .result-action:hover:not(:disabled) {
  transform: translateY(-1px);
}

.tool-page .share-button {
  width: 44px;

  padding: 0;

  background: var(--surface-soft);
}

.tool-page .share-icon {
  width: 18px;
  height: 18px;

  display: block;

  pointer-events: none;
}

.tool-page .tool-result-action:disabled,
.tool-page .result-action:disabled {
  opacity: 0.38;

  cursor: not-allowed;

  transform: none;
}

.tool-page .share-status {
  min-height: 18px;

  margin-top: 7px;

  color: var(--text-soft);

  font-size: 12px;

  text-align: center;
}

/* ============================================================
   26. RESULT WARNING
   ============================================================ */

.tool-page .result-warning {
  margin-top: 4px;

  padding: 9px 10px;

  border-radius: 9px;

  background: #fffaf0;

  color: #8a7549;

  font-size: 12px;

  line-height: 1.55;
}

.tool-page .result-warning strong {
  display: block;

  margin-bottom: 2px;

  color: #70551d;

  font-size: 12px;
}

/* ============================================================
   27. INFO / GUIDE
   ============================================================ */

.tool-page .tool-info-box {
  margin-top: 14px;

  padding: 20px 22px;

  background: rgba(255, 255, 255, 0.48);

  border: 1px solid var(--line);

  border-radius: 16px;
}

.tool-page .tool-info-box h2 {
  margin: 0;

  color: var(--text);

  font-size: var(--tool-guide-title-size);

  font-weight: 800;
}

.tool-page .tool-info-box > p {
  margin: 6px 0 0;

  color: var(--text-soft);

  font-size: var(--tool-guide-text-size);

  line-height: 1.65;

  word-break: keep-all;
}

/* ============================================================
   28. EXAMPLE GRID
   ============================================================ */

.tool-page .example-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 7px;

  margin-top: 12px;
}

.tool-page .tool-example {
  margin-top: 12px;

  padding: 11px 12px;

  border-radius: 10px;

  background: var(--surface);
}

.tool-page .example-grid .tool-example {
  margin-top: 0;
}

.tool-page .tool-example span {
  display: block;

  margin-bottom: 3px;

  color: var(--accent);

  font-size: 12px;

  font-weight: 800;
}

.tool-page .tool-example strong {
  color: var(--text);

  font-size: 12px;

  font-weight: 800;
}

.tool-page .tool-example p {
  margin: 4px 0 0;

  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.5;
}

/* ============================================================
   29. INFO NOTE
   ============================================================ */

.tool-page .tool-info-note,
.tool-page .info-note,
.tool-page .legal-note {
  margin-top: 10px;

  padding-top: 10px;

  border-top: 1px solid var(--line);

  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.55;
}

.tool-page .tool-info-note strong,
.tool-page .info-note strong,
.tool-page .legal-note strong {
  margin-right: 4px;

  color: var(--text);
}

/* ============================================================
   30. TABLET
   ============================================================ */

@media (max-width: 760px) {
  .tool-page .tool-calculator {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   31. MOBILE
   ============================================================ */

@media (max-width: 520px) {
  .tool-page {
    --tool-page-padding-top: 22px;
    --tool-page-padding-bottom: 36px;

    --tool-title-size: 24px;

    --tool-description-size: 11px;

    --tool-icon-size: 44px;
    --tool-icon-font-size: 22px;
    --tool-icon-radius: 13px;

    --tool-panel-radius: 15px;
    --tool-panel-padding: 17px;

    --tool-result-main-size: 29px;
  }

  .tool-page .tool-page-head {
    align-items: flex-start;

    gap: 11px;

    margin-bottom: 15px;
  }

  .tool-page .tool-notice {
    padding: 10px 11px;
  }

  .tool-page .two-column-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-page .tool-result-actions,
  .tool-page .result-actions {
    grid-template-columns:
      42px
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: 6px;
  }

  .tool-page .share-button {
    width: 42px;
  }

  .tool-page .example-grid {
    grid-template-columns: 1fr;
  }
}