@charset "UTF-8";

  :root {
    --gs-blue: #005EAE;
    --gs-blue-dark: #0A3F70;
    --gs-blue-deep: #0A3F70;
    --gs-blue-light: #DFEFFF;
    --gs-warm: #FEFAF5;
    --gs-orange: #EF6820;
    --gs-green: #86CB3C;
    --white: #FFFFFF;
    --gray-50: #F8FAFC;
    --gray-100: #EEF4FA;
    --gray-200: #D7E0EA;
    --gray-400: #8A96A8;
    --gray-600: #4A5568;
    --gray-800: #1A202C;
    --green: #86CB3C;
    --green-dark: #3F7D13;
    --green-light: #EEF9E6;
    --amber: #EF6820;
    --amber-light: #FFF1E8;
    --red: #CC3333;
    --red-light: #FEE2E2;
    --blue-light: #DFEFFF;
    --shadow-soft: 0 10px 28px rgba(10, 63, 112, 0.08);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }


  /* Info banner */
  .info-banner {
    background: var(--blue-light);
    border: 1px solid var(--gs-blue);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 28px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .info-banner-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .info-banner-text {
    font-size: 13px;
    color: var(--gs-blue-deep);
    line-height: 1.7;
  }
  .info-banner-text strong { font-weight: 700; }

  /* Card */
  .card {
    background: var(--white);
    border: 1px solid rgba(10, 63, 112, 0.14);
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 24px;

  }
  .input-card {
    /*border-top: 5px solid var(--gs-blue);*/
    background: linear-gradient(180deg, var(--white), #FCFEFF);
  }
  .result-card {
    border-top: 5px solid var(--gs-blue);
  }
  .disclaimer-card {
    background: var(--gs-warm);
    border-color: rgba(239, 104, 32, 0.22);
    box-shadow: none;
    margin-top: 10px;
  }
  .card-title {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--gs-blue-dark);
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /*.card-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--gs-orange);
    border-radius: 2px;
  }*/
  @media (max-width: 560px) {
    .card { padding: 22px 18px; }
  }

  /* Form grid */
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  @media (max-width: 560px) {
    .form-grid { grid-template-columns: 1fr; }
  }

  .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--gs-blue-dark);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
  }
  .form-group label .required {
    color: var(--red);
    margin-left: 3px;
  }
  .form-group input[type="date"],
  .form-group input[type="time"],
  .form-group select {
    width: 100%;
    border: 1.5px solid var(--gray-200);
    border-radius: 6px;
    padding: 13px 14px;
    /*font-family: 'DM Mono', monospace;*/
    font-size: 14px;
    color: var(--gray-800);
    background: var(--white);
    transition: border-color 0.15s;
    outline: none;
    -webkit-appearance: none;
  }
  .form-group input[type="date"]:focus,
  .form-group input[type="time"]:focus,
  .form-group select:focus {
    border-color: var(--gs-blue);
    box-shadow: 0 0 0 3px rgba(0, 94, 174, 0.12);
    background: #FCFEFF;
  }

  .date-time-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: end;
  }
  .tz-badge {
    padding: 11px 12px;
    background: var(--gs-blue-light);
    border: 1.5px solid rgba(0, 94, 174, 0.2);
    border-radius: 6px;
    font-size: 12px;
    /*font-family: 'DM Mono', monospace;*/
    color: var(--gs-blue-dark);
    white-space: nowrap;
    font-weight: 500;
  }

  /* Simulate button */
  .simulate_actions{
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin: 14px 0px !important;
  }
  .btn-simulate {

    min-height: 52px !important;
    min-width: 220px !important;
    margin-top: 24px;
    padding: 12px 26px !important;
    background: var(--gs-blue);
    color: white;
    border: none;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    letter-spacing: 0.02em;
  }
  .btn-simulate:hover {
    background: var(--gs-blue-dark);
    box-shadow: 0 8px 20px rgba(0, 94, 174, 0.22);
    transform: translateY(-1px);
  }
  .btn-simulate:active { transform: translateY(0); }

  /* Result area */
  #result { display: none; }
  #result.visible { display: block; animation: fadeUp 0.3s ease; }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Result summary */
  .result-overview {
    border: 1.5px solid var(--gs-blue);
    border-radius: 8px;
    background: var(--gs-blue-light);
    padding: 22px;
    margin: 0 0 24px;
  }
  .result-overview.warning {
    border-color: var(--gs-orange);
    background: var(--amber-light);
  }
  .result-overview.success {
    border-color: var(--gs-green);
    background: var(--green-light);
  }
  .result-overview.error {
    border-color: var(--red);
    background: var(--red-light);
  }
  .summary-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    background: var(--gs-blue);
    margin-bottom: 14px;
  }
  .summary-status.success { background: var(--green-dark); }
  .summary-status.warning { background: var(--gs-orange); }
  .summary-status.error { background: var(--red); }
  .summary-status i,
  .disclaimer-icon {
    line-height: 1;
    flex-shrink: 0;
	color:#FFF;
  }
   .notice-box-icon,
  .metric-label i {
    line-height: 1;
    flex-shrink: 0;
	color:#0A3F70;
  }
     .green-box-icon{
    line-height: 1;
    flex-shrink: 0;
	color:#3F7D13;
  }
	.warning-box-icon{
    line-height: 1;
    flex-shrink: 0;
	color:#8A3A05;
  }
  .summary-message {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.75;
    margin-bottom: 16px;
  }
  .summary-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  @media (max-width: 800px) {
    .summary-metrics { grid-template-columns: 1fr; }
  }
  .result-metric {
    background: var(--white);
    border: 1px solid rgba(10, 63, 112, 0.14);
    border-radius: 8px;
    padding: 14px 16px;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .result-metric.primary {
    background: var(--gs-blue-light);
    border-color: rgba(0, 94, 174, 0.28);
  }
  .result-metric.warning {
    background: var(--amber-light);
    border-color: rgba(239, 104, 32, 0.34);
  }
  .result-metric.success {
    background: var(--green-light);
    border-color: rgba(134, 203, 60, 0.5);
  }
  .metric-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1em;
    font-weight: 700;
    color: var(--gray-600);
    line-height: 1.4;
  }
  .metric-value {
    margin-top: 8px;
    /*font-family: 'DM Mono', monospace;*/
    font-size: 19px;
    font-weight: 700;
    color: var(--gs-blue-dark);
    line-height: 1.25;
    word-break: keep-all;
  }
  .metric-note {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--gray-600);
    line-height: 1.5;
  }

  /* Timeline */
  .timeline-title {
    /*font-size: 14px;*/
    font-weight: 700;
    color: var(--gs-blue-dark);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .timeline-title::before {
    content: '';
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--gs-blue);
  }
  .timeline {
    position: relative;
    padding: 18px;
    border-radius: 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
  }
  .timeline-bar-wrap {
    margin: 36px 0 8px;
    position: relative;
    height: 80px;
  }
  .timeline-track {
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 10px;
    background: var(--gray-100);
    border-radius: 5px;
    transform: translateY(-50%);
    overflow: visible;
  }

  .tl-segment {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease;
  }
  .tl-segment.current {
    background: linear-gradient(90deg, var(--gs-blue-dark), var(--gs-blue));
    box-shadow: 0 2px 8px rgba(0, 94, 174, 0.28);
  }
  .tl-segment.overlap {
    background: linear-gradient(90deg, #D97706, #F59E0B);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
  }
    background: linear-gradient(90deg, var(--green), #5FAF24);
    box-shadow: 0 2px 8px rgba(134, 203, 60, 0.32);
  }
  .tl-segment.gap {
    background: repeating-linear-gradient(
      45deg,
      var(--amber-light),
      var(--amber-light) 6px,
      #FDE68A 6px,
      #FDE68A 12px
    );
  }

  .tl-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 2px var(--gray-400);
    background: var(--white);
    z-index: 2;
  }
  .tl-marker.start { box-shadow: 0 0 0 2px var(--gs-blue); background: var(--gs-blue); }
  .tl-marker.renew { box-shadow: 0 0 0 2px var(--amber); background: var(--amber); }
  .tl-marker.end-current { box-shadow: 0 0 0 2px var(--gs-blue); background: var(--white); }
  .tl-marker.end-renewed { box-shadow: 0 0 0 2px var(--green); background: var(--white); }

  .tl-labels {
    position: relative;
    height: 62px;
    margin-top: 18px;
  }
  .tl-label {
    font-size: 11px;
    color: var(--gray-600);
    /*font-family: 'DM Mono', monospace;*/
    text-align: center;
    min-width: 86px;
    line-height: 1.45;
    white-space: nowrap;
  }
  .tl-label strong {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 11px;
    color: var(--gs-blue-dark);
  }

  /* Result summary boxes */
  .result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
  }
  @media (max-width: 560px) {
    .result-grid { grid-template-columns: 1fr; }
  }

  .result-box {
    border-radius: 8px;
    padding: 18px;
    border: 1.5px solid transparent;
    min-height: 150px;
  }
  .result-box.current-cert {
    background: var(--blue-light);
    border-color: var(--gs-blue);
  }
  .result-box.renewed-cert {
    background: var(--green-light);
    border-color: var(--green);
  }
  .result-box-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .result-box.current-cert .result-box-label { color: var(--gs-blue-deep); }
  .result-box.renewed-cert .result-box-label { color: var(--green-dark); }

  .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .dot-blue { background: var(--gs-blue); }
  .dot-green { background: var(--green); }

  .result-date-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .result-date-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
  }
  .result-date-key {
    font-size: 11.5px;
    color: var(--gray-400);
    flex-shrink: 0;
  }
  .result-date-val {
    /*font-family: 'DM Mono', monospace;*/
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-800);
    text-align: right;
  }
  .result-days-badge {
    display: inline-block;
    margin-top: 10px;
    background: var(--white);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    /*font-family: 'DM Mono', monospace;*/
    font-weight: 500;
  }
  .current-cert .result-days-badge { color: var(--gs-blue-deep); border: 1px solid var(--gs-blue); }
  .renewed-cert .result-days-badge { color: var(--green-dark); border: 1px solid var(--green); }

  /* Warning boxes */
  .notice-box {
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 16px;
    /*font-size: 13px;*/
    line-height: 1.7;
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .notice-box.warning {
    background: var(--amber-light);
    border: 1px solid var(--amber);
    color: #8A3A05;
  }
  .notice-box.info {
    background: var(--blue-light);
    border: 1px solid var(--gs-blue);
    color: var(--gs-blue-deep);
  }
  .notice-box.success {
    background: var(--green-light);
    border: 1px solid var(--green);
    color: var(--green-dark);
  }
  .notice-box-icon { font-size: 16px; margin-top: 2px; }
  .notice-box-text strong { font-weight: 700; }

  /* Renewal window detail */
  .renewal-window-box {
    background: var(--gs-warm);
    border: 1px solid rgba(10, 63, 112, 0.14);
    border-radius: 8px;
    padding: 16px 18px;
    margin-top: 16px;
  }
  .renewal-window-title {
    /*font-size: 12px;*/
    font-weight: 700;
    color: var(--gs-blue-dark);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .renewal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px dashed var(--gray-200);
    font-size: .9em;
    gap: 8px;
  }
  .renewal-row:last-child { border-bottom: none; }
  .renewal-row-key { color: var(--gray-600); flex-shrink: 0; }
  .renewal-row-val {
    /*font-family: 'DM Mono', monospace;*/
    font-weight: 500;
    color: var(--gray-800);
    text-align: right;
  }
  .renewal-row-val.highlight { color: var(--gs-blue); }
  .renewal-row-val.amber { color: var(--gs-orange); }
  .renewal-row-val.red { color: var(--red); }

  /* Legend */
  .legend {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 16px;
  }
  .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-600);
  }
  .legend-swatch {
    width: 20px; height: 8px;
    border-radius: 4px;
  }
  .swatch-blue { background: linear-gradient(90deg, var(--gs-blue-dark), var(--gs-blue)); }
  .swatch-green { background: linear-gradient(90deg, var(--green), #5FAF24); }
  .swatch-amber {
    background: repeating-linear-gradient(
      45deg,
      var(--amber-light),
      var(--amber-light) 4px,
      #FDE68A 4px,
      #FDE68A 8px
    );
    border: 1px solid var(--amber);
  }

  hr.divider {
    border: none;
    border-top: 1px dashed var(--gray-200);
    margin: 18px 0;
  }

  /* Optimal timing box */
  .optimal-box {
    margin-top: 16px;
    border-radius: 8px;
    border: 1.5px solid rgba(0, 94, 174, 0.28);
    background: linear-gradient(135deg, var(--gs-blue-light) 0%, var(--white) 100%);
    overflow: hidden;
  }
  .optimal-box-header {
    background: var(--gs-blue-dark);
    color: white;
    padding: 10px 18px;
    /*font-size: 13px;*/
    font-weight: 700;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 8px;
  }
    .optimal-box-header i {
    color: #FFF;
  }
  .optimal-box-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .optimal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .optimal-row-left {
    /*font-size: 13px;*/
    color: var(--gs-blue-deep);
    line-height: 1.6;
  }
  .optimal-row-left strong { font-weight: 700; color: var(--gray-800); }
  .optimal-date-chip {
    background: var(--white);
    border: 1.5px solid var(--gs-blue);
    border-radius: 6px;
    padding: 6px 14px;
    /*font-family: 'DM Mono', monospace;*/
    font-size: 14px;
    font-weight: 500;
    color: var(--gs-blue-deep);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .optimal-divider {
    border: none;
    border-top: 1px dashed rgba(0,94,174,0.3);
    margin: 0;
  }
  .optimal-total {
    background: var(--white);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--gray-200);
    flex-wrap: wrap;
    gap: 8px;
  }
  .optimal-total-label {
    font-size: 13px;
    color: var(--gray-600);
  }
  .optimal-total-val {
    /*font-family: 'DM Mono', monospace;*/
    font-size: 18px;
    font-weight: 700;
    color: var(--gs-blue);
  }
  .optimal-total-val span {
    font-size: 12px;
    color: var(--gray-400);
    font-weight: 400;
    margin-left: 4px;
  }
  .optimal-caution {
    font-size: .9em;
    color: var(--gray-600);
    background: rgba(255,255,255,0.6);
    border-radius: 6px;
    padding: 8px 12px;
    line-height: 1.65;
    border-left: 3px solid var(--gs-blue);
  }
  .optimal-caution strong { color: var(--gs-blue-deep); font-weight: 700; }

  /* Disclaimer */
  .disclaimer-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .disclaimer-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    /*font-size: 13px;*/
    color: var(--gray-600);
    line-height: 1.75;
  }
  .disclaimer-icon {
    width: 18px;
    color: var(--gs-orange);
    font-size: 15px;
    margin-top: 4px;
    text-align: center;
  }
  .disclaimer-list strong {
    font-weight: 700;
    color: var(--gray-800);
  }
  .disclaimer-list a {
    color: var(--gs-blue);
    text-decoration: none;
  }
  .disclaimer-list a:hover { text-decoration: underline; }

  /* Auto-fill badge */
  .auto-badge {
    display: inline-block;
    background: var(--gs-blue);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    vertical-align: middle;
    margin-left: 4px;
  }
  .auto-hint {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--gs-blue-deep);
    background: var(--gs-blue-light);
    border-radius: 6px;
    padding: 6px 10px;
    line-height: 1.5;
  }

  /* Timeline ↔ cert-compare connector */
  .tl-connect-wrap {
    position: relative;
  }
  .tl-connector-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
  }

  /* 3-column cert comparison */
  .cert-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  @media (max-width: 660px) {
    .cert-compare {
      grid-template-columns: 1fr;
    }
    .cc-overlap { border-left: none; border-right: none; border-top: 2px dashed var(--amber); border-bottom: 2px dashed var(--amber); }
  }
  .cc-col {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cc-current { background: var(--gs-blue-light); }
  .cc-overlap  {
    background: var(--amber-light);
    border-left: 2px dashed var(--amber);
    border-right: 2px dashed var(--amber);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 16px;
    min-width: 130px;
    gap: 8px;
    text-align: center;
  }
  .cc-renewed { background: var(--green-light); }
  .cc-col-label {
    /*font-size: 11px;*/
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
  }
  .cc-current .cc-col-label { color: var(--gs-blue-deep); }
  .cc-renewed .cc-col-label { color: var(--green-dark); }
  .cc-overlap-label {
    /*font-size: 11px;*/
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8A3A05;
  }
  .cc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
  }
  .cc-key {
    color: var(--gray-400);
    font-size: 11.5px;
    flex-shrink: 0;
  }
  .cc-val {
    /*font-family: 'DM Mono', monospace;*/
    font-weight: 500;
    color: var(--gray-800);
    text-align: right;
  }
  .cc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    padding: 4px 10px;
    /*font-size: 13px;
    font-family: 'DM Mono', monospace;*/
    font-weight: 700;
    margin-top: 4px;
    align-self: flex-start;
  }
  
  .cc-current .cc-badge i{
    color: #0a3f70;
  }
  
    .cc-renewed .cc-badge i{
    color:#3F7D13;
  }
  .cc-current .cc-badge { background: var(--white); color: var(--gs-blue-deep); border: 1px solid var(--gs-blue); }
  .cc-renewed .cc-badge { background: var(--white); color: var(--green-dark); border: 1px solid var(--green); }
  .cc-overlap-days {
    /*font-family: 'DM Mono', monospace;*/
    font-size: 26px;
    font-weight: 700;
    color: var(--gs-orange);
    line-height: 1;
  }
  .cc-overlap-unit {
    font-size: 13px;
    color: #8A3A05;
    font-weight: 700;
  }
  .cc-overlap-note {
    font-size: .9em;
    color: #8A3A05;
    line-height: 1.5;
  }
  .cc-overlap-zero {
    /*font-family: 'DM Mono', monospace;*/
    font-size: 26px;
    font-weight: 700;
    color: var(--green-dark);
    line-height: 1;
  }