/*
 * Custom styles for 한국데이타 (itkdata.kr)
 * Follows the Airspace template design language:
 *   - Accent: #655E7A (medium purple)
 *   - Dark:   #1d192c / #322e40
 *   - Icon:   #4A4656
 *   - Text:   #666 / #888 / #7B7B7B
 */

/* ========================================
   Global: text-primary → brand purple
   ======================================== */
.text-primary { color: #655E7A !important; }
a.text-primary:hover,
a.text-primary:focus { color: #322e40 !important; }

/* ========================================
   Global: btn-primary → brand purple (overrides Bootstrap blue)
   ======================================== */
.btn-primary {
  background-color: #655E7A;
  border-color: #57516a;
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: #322e40;
  border-color: #322e40;
  color: #fff;
}

/* ========================================
   Counter box: ionicon brand color
   ======================================== */
#testimonial .counter-box li i {
  color: #655E7A;
}

/* ========================================
   Button: btn-view-works (global, overrides #feature scope in airspace.css)
   ======================================== */
.btn-view-works {
  background: #655E7A;
  color: #fff !important;
  padding: 10px 26px;
  border: 2px solid #655E7A;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .5px;
  display: inline-block;
  transition: background .2s, border-color .2s;
}
.btn-view-works:hover,
.btn-view-works:focus {
  background: #322e40;
  border-color: #322e40;
  color: #fff !important;
}

/* ========================================
   Button: secondary outline (for slider & CTA paired buttons)
   ======================================== */
.btn-cta-secondary {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.65) !important;
}
.btn-cta-secondary:hover,
.btn-cta-secondary:focus {
  background: rgba(255,255,255,.12) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Spacing between sibling buttons in slider and CTA */
#slider .btn + .btn,
#call-to-action .btn + .btn {
  margin-left: 12px;
}

/* Service section CTA row */
.section-cta-row {
  margin-top: 30px;
  text-align: center;
}

/* ========================================
   Navigation
   ======================================== */
.lang-switch {
  font-weight: 600 !important;
  color: #655E7A !important;
}
.lang-switch:hover {
  color: #322e40 !important;
}
header .navbar-default .navbar-nav li.active > a {
  color: #655E7A;
}

/* ========================================
   Service items: card treatment (overrides airspace.css minimal styles)
   ======================================== */
#service .service-item {
  background: #fff;
  border: 1px solid #e0dce8;
  border-radius: 4px;
  padding: 36px 22px 32px;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
#service .service-item:hover {
  border-color: #655E7A;
  box-shadow: 0 6px 24px rgba(101,94,122,.14);
  transform: translateY(-4px);
}
#service .service-item i {
  color: #655E7A;
  transition: color .2s;
}
#service .service-item:hover i {
  color: #322e40;
}
#service .service-item h4 {
  color: #322e40;
  font-weight: 600;
}

/* ========================================
   Intro highlight list (index)
   ======================================== */
.intro-highlight-box {
  background: #f7f6f9;
  border-left: 4px solid #655E7A;
  border-radius: 2px;
  padding: 30px;
  margin-top: 20px;
}
.intro-highlight-box h3 {
  color: #322e40;
  margin-top: 0;
  font-size: 1.1em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.intro-highlight-box hr {
  border-color: #ddd;
  margin: 15px 0 20px;
}
.intro-service-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.intro-service-list li {
  display: flex;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #e8e5f0;
}
.intro-service-list li:last-child {
  border-bottom: none;
}
.intro-service-list li i {
  font-size: 18px;
  color: #4A4656;
  margin-right: 12px;
  margin-top: 2px;
  min-width: 20px;
}
.intro-service-list li strong {
  display: block;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}
.intro-service-list li span {
  color: #888;
  font-size: 13px;
}

/* ========================================
   Service detail rows (services.html)
   ======================================== */
.service-detail-row h3 {
  margin-top: 0;
  font-size: 22px;
  font-weight: 400;
  color: #333;
}
.service-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.service-feature-list li {
  padding: 5px 0;
  font-size: 14px;
  color: #666;
}
.service-feature-list li i {
  color: #655E7A;
  margin-right: 8px;
}

/* ========================================
   Target customer cards (services.html)
   ======================================== */
.target-card {
  padding: 30px 20px;
  border: 1px solid #e0dce8;
  border-radius: 3px;
  transition: border-color .2s, box-shadow .2s;
}
.target-card:hover {
  border-color: #655E7A;
  box-shadow: 0 2px 12px rgba(101,94,122,.12);
}
.target-card i {
  color: #4A4656;
  margin-bottom: 15px;
}
.target-card h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}
.target-card p {
  font-size: 13px;
  margin: 0;
  line-height: 1.7;
  color: #888;
}

/* ========================================
   Why cards (about.html)
   ======================================== */
.why-card {
  padding: 20px 10px;
}
.why-card i {
  color: #4A4656;
}
.why-card h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 15px 0 8px;
  color: #333;
}
.why-card p {
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  color: #888;
}

/* ========================================
   Value box (about.html)
   ======================================== */
.value-box {
  background: #f7f6f9;
  border-radius: 3px;
  padding: 28px;
}
.value-box h3 {
  margin-top: 0;
  font-size: 1.05em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #322e40;
}
.value-box hr {
  border-color: #e0dce8;
  margin: 15px 0 20px;
}
.value-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
}
.value-item i {
  font-size: 18px;
  color: #655E7A;
  margin-right: 12px;
  margin-top: 2px;
  min-width: 22px;
}
.value-item h5 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.value-item p {
  margin: 0;
  font-size: 13px;
  color: #888;
  line-height: 1.6;
}

/* ========================================
   Service overview boxes (about.html)
   ======================================== */
.service-overview-box {
  background: #fff;
  border: 1px solid #e0dce8;
  border-radius: 3px;
  padding: 22px;
}
.service-overview-box h4 {
  font-size: 15px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 10px;
  color: #322e40;
}
.service-overview-box h4 i {
  color: #655E7A;
}
.service-overview-box p {
  font-size: 14px;
  color: #7B7B7B;
  line-height: 1.7;
  margin: 0;
}

/* ========================================
   IP Rental — Info table box
   ======================================== */
.info-highlight-box {
  background: #f7f6f9;
  border: 1px solid #e0dce8;
  border-radius: 3px;
  padding: 24px;
  margin-top: 20px;
}
.info-highlight-box h4 {
  color: #322e40;
  margin-top: 0;
  font-size: 15px;
  font-weight: 600;
}
.info-highlight-box .table th {
  font-weight: 600;
  color: #555;
  border-top: none;
  font-size: 13px;
  width: 42%;
}
.info-highlight-box .table td {
  font-size: 13px;
  color: #666;
  border-top: 1px solid #e8e5f0;
}

/* ========================================
   Pricing: per-card savings badge
   ======================================== */
.pricing-saving {
  font-size: 12px;
  margin: 4px 0 20px;
  padding: 3px 11px;
  border-radius: 20px;
  display: inline-block;
  letter-spacing: .2px;
}
.pricing-featured .pricing-saving {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
}
.pricing-featured .pricing-saving strong { color: #fff; font-weight: 700; }
.pricing-secondary .pricing-saving {
  background: rgba(101,94,122,.1);
  color: #655E7A;
  font-weight: 600;
}
.pricing-secondary .pricing-saving strong { font-weight: 700; }
.pricing-saving-base {
  background: #f4f3f6;
  color: #bbb;
  font-weight: 400;
}

/* ========================================
   Pricing: comparison bar chart
   ======================================== */
.pricing-comparison {
  padding: 20px 26px;
  background: #fff;
  border: 1px solid #e0dce8;
  border-radius: 4px;
  margin-top: 8px;
}
.pricing-comparison-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #aaa;
  font-weight: 700;
  margin: 0 0 14px;
}
.comparison-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.comparison-row:last-child { margin-bottom: 0; }
.comparison-label {
  font-size: 12px;
  color: #555;
  font-weight: 700;
  min-width: 50px;
}
.comparison-bar-wrap {
  flex: 1;
  background: #ece9f4;
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
.comparison-bar {
  height: 100%;
  border-radius: 4px;
}
.comparison-bar-12 { width: 85.5%; background: #655E7A; }
.comparison-bar-6  { width: 92.1%; background: #9890b0; }
.comparison-bar-3  { width: 100%;  background: #c5c0d4; }
.comparison-price {
  font-size: 12px;
  font-weight: 700;
  color: #444;
  min-width: 34px;
  text-align: right;
}
.comparison-saving {
  font-size: 11px;
  color: #655E7A;
  font-weight: 700;
  min-width: 68px;
  text-align: right;
}
.comparison-saving-base {
  font-size: 11px;
  color: #bbb;
  min-width: 68px;
  text-align: right;
}

@media (max-width: 767px) {
  .comparison-saving,
  .comparison-saving-base { display: none; }
}

/* ========================================
   Feature mini (ip-rental.html)
   ======================================== */
.feature-mini {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}
.feature-mini i {
  font-size: 20px;
  color: #655E7A;
  margin-right: 12px;
  margin-top: 2px;
  min-width: 24px;
}
.feature-mini h5 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.feature-mini p {
  margin: 0;
  font-size: 13px;
  color: #888;
  line-height: 1.6;
}

/* ========================================
   Pricing cards
   ======================================== */
.pricing-card {
  border-radius: 3px;
  padding: 36px 28px;
  position: relative;
  margin-bottom: 10px;
}
.pricing-featured {
  background: #322e40;
  color: #fff;
}
.pricing-secondary {
  background: #fff;
  border: 2px solid #655E7A;
}
.pricing-basic {
  background: #fff;
  border: 1px solid #ddd;
}
.pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: #655E7A;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .5px;
}
.pricing-icon {
  margin-bottom: 18px;
}
.pricing-featured .pricing-icon { color: rgba(255,255,255,.7); }
.pricing-secondary .pricing-icon { color: #655E7A; }
.pricing-basic .pricing-icon { color: #aaa; }

.pricing-featured h3 { color: #fff; margin-top: 0; font-size: 1.2em; font-weight: 400; }
.pricing-secondary h3,
.pricing-basic h3 { color: #322e40; margin-top: 0; font-size: 1.2em; font-weight: 400; }

.pricing-price {
  font-size: 2.8em;
  font-weight: 700;
  line-height: 1;
  margin: 10px 0 0;
}
.pricing-featured .pricing-price { color: #fff; }
.pricing-secondary .pricing-price { color: #655E7A; }
.pricing-basic .pricing-price { color: #444; }

.pricing-unit {
  font-size: 0.82em;
  margin-bottom: 24px;
  margin-top: 4px;
}
.pricing-featured .pricing-unit { color: rgba(255,255,255,.65); }
.pricing-secondary .pricing-unit,
.pricing-basic .pricing-unit { color: #aaa; }

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  text-align: left;
}
.pricing-features li {
  padding: 7px 0;
  font-size: 13px;
}
.pricing-featured .pricing-features li {
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
}
.pricing-featured .pricing-features li:last-child { border-bottom: none; }
.pricing-secondary .pricing-features li,
.pricing-basic .pricing-features li {
  border-bottom: 1px solid #eee;
  color: #666;
}
.pricing-secondary .pricing-features li:last-child,
.pricing-basic .pricing-features li:last-child { border-bottom: none; }
.pricing-features li i { margin-right: 8px; color: #655E7A; }
.pricing-featured .pricing-features li i { color: rgba(255,255,255,.8); }

/* White button for use on dark backgrounds (e.g. pricing-featured card) */
.btn-white {
  background: transparent;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  padding: 8px 24px;
  font-size: 13px;
}
.btn-white:hover,
.btn-white:focus {
  background: rgba(255,255,255,.12);
  color: #fff !important;
  border-color: #fff !important;
}

/* ========================================
   FAQ
   ======================================== */
.faq-item {
  margin-bottom: 8px;
  border: 1px solid #e0dce8 !important;
  border-radius: 3px !important;
  overflow: hidden;
}
.faq-question {
  cursor: pointer;
  padding: 14px 18px !important;
  background: #f7f6f9 !important;
  border-bottom: none !important;
}
.faq-question h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #322e40;
}
.faq-question h4 i {
  color: #655E7A;
}
.faq-answer {
  padding: 14px 18px;
  background: #fff;
}
.faq-answer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #666;
}

/* ========================================
   Contact info box
   ======================================== */
.contact-info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 22px;
}
.contact-info-item i {
  font-size: 18px;
  color: #655E7A;
  margin-right: 14px;
  margin-top: 2px;
  min-width: 20px;
}
.contact-info-item h5 {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #322e40;
}
.contact-info-item p,
.contact-info-item a {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}
.contact-info-item a:hover { color: #655E7A; }

/* ========================================
   Notice page
   ======================================== */
.notice-item {
  padding: 28px 0;
  border-bottom: 1px solid #eee;
}
.notice-item:first-child { border-top: 1px solid #eee; }
.notice-date {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 7px;
  letter-spacing: .5px;
}
.notice-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 500;
}
.notice-title a { color: #322e40; }
.notice-title a:hover { color: #655E7A; }
.notice-excerpt {
  color: #7B7B7B;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 10px;
}
.notice-more {
  font-size: 13px;
  color: #655E7A;
  font-weight: 600;
}
.notice-more:hover { color: #322e40; }

/* Pagination controls */
.notice-pagination {
  margin-top: 30px;
  text-align: center;
}
.notice-pagination .pagination {
  margin: 0 0 10px;
}
.notice-pagination .pagination > li > a,
.notice-pagination .pagination > li > span {
  color: #655E7A;
  border-color: #e0dce8;
}
.notice-pagination .pagination > li > a:hover,
.notice-pagination .pagination > li > a:focus {
  background-color: #f7f6f9;
  border-color: #655E7A;
  color: #322e40;
}
.notice-pagination .pagination > .active > a,
.notice-pagination .pagination > .active > span,
.notice-pagination .pagination > .active > a:hover,
.notice-pagination .pagination > .active > a:focus {
  background-color: #655E7A;
  border-color: #57516a;
  color: #fff;
}
.notice-pagination .pagination > .disabled > a,
.notice-pagination .pagination > .disabled > span {
  color: #ccc;
  border-color: #e0dce8;
}
.notice-page-info {
  font-size: 13px;
  color: #aaa;
  margin: 0;
}

/* ========================================
   Post page
   ======================================== */
.post-section {
  padding: 60px 0 80px;
  background: #fff;
}

/* Article body typography */
.post-body {
  font-size: 15px;
  line-height: 1.9;
  color: #444;
}
.post-body h2,
.post-body h3,
.post-body h4 {
  margin-top: 2em;
  margin-bottom: .6em;
  color: #322e40;
  font-weight: 600;
}
.post-body h2 { font-size: 1.4em; border-bottom: 1px solid #e0dce8; padding-bottom: .4em; }
.post-body h3 { font-size: 1.15em; }
.post-body h4 { font-size: 1em; }
.post-body p  { margin-bottom: 1.2em; }
.post-body a  { color: #655E7A; text-decoration: underline; }
.post-body a:hover { color: #322e40; }
.post-body strong { color: #322e40; }
.post-body ul,
.post-body ol {
  padding-left: 1.5em;
  margin-bottom: 1.2em;
}
.post-body li { margin-bottom: .4em; }
.post-body blockquote {
  border-left: 4px solid #655E7A;
  background: #f7f6f9;
  margin: 1.5em 0;
  padding: 14px 20px;
  color: #555;
  border-radius: 0 3px 3px 0;
}
.post-body blockquote p { margin: 0; }
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.2em;
  font-size: 14px;
}
.post-body table th,
.post-body table td {
  padding: 9px 14px;
  border: 1px solid #e0dce8;
  text-align: left;
}
.post-body table th {
  background: #f7f6f9;
  color: #322e40;
  font-weight: 600;
}
.post-body table tr:nth-child(even) td { background: #faf9fc; }
.post-body hr {
  border: none;
  border-top: 1px solid #e0dce8;
  margin: 2em 0;
}
.post-body code {
  background: #f0eff4;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
  color: #655E7A;
}
.post-body pre {
  background: #f7f6f9;
  border: 1px solid #e0dce8;
  border-radius: 3px;
  padding: 16px;
  overflow-x: auto;
  margin-bottom: 1.2em;
}
.post-body pre code {
  background: none;
  padding: 0;
  color: #322e40;
}

/* Footer back button */
.post-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #e0dce8;
}

/* ========================================
   Table overflow helper
   ======================================== */
.table-responsive-custom {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ========================================
   Mobile & tablet fixes  (≤ 991px)
   ======================================== */
@media (max-width: 991px) {
  /* iOS Safari: fixed backgrounds cause blank/jitter — force scroll */
  #slider,
  #global-header,
  #call-to-action {
    background-attachment: scroll !important;
  }

  /* Services detail: icon column gets bottom margin when stacked */
  .service-detail-row .col-md-2 {
    margin-bottom: 20px;
  }
  .service-detail-row .col-md-2 i {
    font-size: 2.5em; /* scale down fa-4x a bit */
  }
}

/* ========================================
   Mobile fixes  (≤ 767px)
   ======================================== */
@media (max-width: 767px) {

  /* --- Forms: prevent iOS auto-zoom on input focus (needs ≥16px) --- */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* --- Slider CTA buttons: stack vertically with gap --- */
  #slider .btn {
    display: block;
    width: 100%;
    margin-bottom: 12px;
  }

  /* --- Section padding: loosen cramped sections on small screens --- */
  section[style*="padding: 80px"] {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  #pricing[style*="padding"],
  section#contact-form[style*="padding"] {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  /* --- Pricing cards: remove badge overflow clipping --- */
  .pricing-card {
    margin-top: 20px; /* room for the badge */
  }

  /* --- Info highlight box: full-width table scrollable --- */
  .info-highlight-box .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Why card grid: consistent spacing --- */
  .why-card,
  .target-card {
    margin-bottom: 20px;
  }

  /* --- Value box: stack value items nicely --- */
  .value-box {
    margin-top: 30px;
  }

  /* --- Contact info box: tighten sidebar spacing --- */
  .contact-info-box {
    margin-top: 40px;
  }

  /* --- FAQ question: prevent text overflow --- */
  .faq-question h4 {
    font-size: 13px;
    line-height: 1.5;
  }

  /* --- Post body: slightly tighter on small screens --- */
  .post-section {
    padding: 40px 0 60px;
  }
  .post-body {
    font-size: 14px;
  }

  /* --- Footer company info: allow wrapping --- */
  footer p {
    font-size: 12px;
    line-height: 1.8;
  }
  footer .fa {
    display: none; /* hide icons in footer text on very small screens */
  }

  /* --- Intro service list on index: reduce icon size --- */
  .intro-service-list li i {
    font-size: 15px;
    min-width: 18px;
  }

  /* --- Lang switch: ensure it's not too close to nav items --- */
  .lang-switch {
    padding-left: 15px !important;
  }
}

/* ========================================
   Testimonial carousel
   ======================================== */
#testimonial-slider .user p span {
  font-weight: 700;
  color: #655E7A;
}