/* PC contact rail polish v1
 * Scope: desktop only (>= 901px).
 * Mobile contact bar is intentionally untouched.
 */
@media (min-width: 901px) {
  .contact-rail {
    right: max(12px, env(safe-area-inset-right));
    gap: 8px;
    width: 124px;
  }

  .contact-rail__card {
    --rail-accent-rgb: 217, 173, 67;
    border-color: rgba(var(--rail-accent-rgb), .26);
    border-radius: 14px;
    background: rgba(9, 10, 11, .95);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .26);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  }

  .contact-rail__card--line { --rail-accent-rgb: 6, 199, 85; }
  .contact-rail__card--zalo { --rail-accent-rgb: 0, 104, 255; }
  .contact-rail__card--telegram { --rail-accent-rgb: 42, 171, 238; }
  .contact-rail__card--kakao { --rail-accent-rgb: 255, 224, 0; }

  .contact-rail__card > strong {
    padding: 8px 6px 6px;
    font-size: .64rem;
    letter-spacing: .045em;
    color: rgb(var(--rail-accent-rgb));
    opacity: .92;
  }

  .contact-rail__card > a,
  .contact-rail__static {
    gap: 4px;
    padding: 0 9px 9px;
    text-decoration: none;
  }

  .contact-rail__qr {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  }

  .contact-rail__card > a > small,
  .contact-rail__static > small {
    font-size: .55rem;
    line-height: 1.15;
    color: #8f8b83;
  }

  .contact-rail__card:hover,
  .contact-rail__card:focus-within {
    border-color: rgba(var(--rail-accent-rgb), .58);
    background: rgba(11, 12, 13, .97);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .31);
  }

  .contact-rail__card > a:focus-visible {
    outline: 2px solid rgba(var(--rail-accent-rgb), .82);
    outline-offset: -3px;
    border-radius: 11px;
  }

  /* Medium desktop: keep the rail useful without covering narrow content. */
  @media (max-width: 1439px) {
    .contact-rail {
      right: 10px;
      gap: 7px;
      width: 112px;
    }

    .contact-rail__card > strong {
      padding: 7px 5px 5px;
      font-size: .61rem;
    }

    .contact-rail__card > a,
    .contact-rail__static {
      gap: 3px;
      padding: 0 8px 8px;
    }

    .contact-rail__qr {
      width: 86px;
      height: 86px;
    }

    .contact-rail__card > a > small,
    .contact-rail__static > small {
      font-size: .52rem;
    }
  }

  /* Compact desktop / tablet-landscape shell. */
  @media (max-width: 1180px) {
    .contact-rail {
      right: 8px;
      gap: 6px;
      width: 102px;
    }

    .contact-rail__card {
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, .24);
    }

    .contact-rail__card > strong {
      padding: 6px 4px 4px;
      font-size: .58rem;
    }

    .contact-rail__card > a,
    .contact-rail__static {
      padding: 0 7px 7px;
    }

    .contact-rail__qr {
      width: 78px;
      height: 78px;
      border-radius: 7px;
    }
  }

  /* Short desktop viewports: prevent the four-card rail from crowding vertically. */
  @media (max-height: 760px) {
    .contact-rail {
      gap: 6px;
      width: 108px;
    }

    .contact-rail__card > strong {
      padding: 6px 4px 4px;
      font-size: .58rem;
    }

    .contact-rail__card > a,
    .contact-rail__static {
      gap: 2px;
      padding: 0 7px 7px;
    }

    .contact-rail__qr {
      width: 82px;
      height: 82px;
    }

    .contact-rail__card > a > small,
    .contact-rail__static > small {
      font-size: .5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .contact-rail__card {
      transition: none;
    }
  }
}

/* ============================================================
   Stage 11-10 regression fix
   1181-1655px: the centered 1360px content shell and fixed QR rail can
   occupy the same right-side space. Keep content geometry untouched and
   switch only this compact-desktop range to a centered contact dock.
   <=1180px keeps the existing page-specific compact/mobile dock exactly as-is.
   >=1656px keeps the desktop QR rail exactly as-is.
   ============================================================ */
@media (min-width:1181px) and (max-width:1655px){
  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ){
    padding-bottom:82px!important;
  }

  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ) .contact-rail{
    display:none!important;
  }

  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ) .contact-mobile{
    position:fixed;
    z-index:1400;
    left:50%;
    right:auto;
    bottom:10px;
    display:grid!important;
    width:min(540px,calc(100% - 40px));
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    padding:5px;
    border:1px solid rgba(214,173,65,.28);
    border-radius:15px;
    background:rgba(8,9,10,.94);
    box-shadow:0 -5px 22px rgba(0,0,0,.28),0 9px 28px rgba(0,0,0,.34);
    backdrop-filter:blur(18px) saturate(1.12);
    -webkit-backdrop-filter:blur(18px) saturate(1.12);
    transform:translateX(-50%);
  }

  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ) .contact-mobile::before{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    top:-1px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(239,202,108,.66),transparent);
    pointer-events:none;
  }

  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ) .contact-mobile__item{
    min-width:0;
    height:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:3px 4px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:10px;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
    color:#f5f0e4;
    text-decoration:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  }

  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ) .contact-mobile__icon,
  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ) .contact-mobile__item>span{
    width:24px;
    height:24px;
    flex:0 0 24px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:7px;
    background:#181a1b;
    font-size:10px;
    line-height:1;
  }

  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ) .contact-mobile__icon.has-image{
    background:transparent;
  }

  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ) .contact-mobile__icon.has-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
  }

  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ) .contact-mobile__item>strong{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#eee8dc;
    font-size:9.5px;
    font-weight:760;
    line-height:1;
    white-space:nowrap;
  }

  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ) .contact-mobile__item:focus-visible{
    outline:2px solid #efc85c;
    outline-offset:2px;
    border-color:rgba(239,200,92,.58);
  }

  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ) .contact-mobile__item:active{
    transform:translateY(0)!important;
    background:rgba(214,173,65,.075);
    border-color:rgba(214,173,65,.25);
  }
}

@media (min-width:1181px) and (max-width:1655px) and (hover:hover) and (pointer:fine){
  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ) .contact-mobile__item:hover{
    border-color:rgba(239,200,92,.34);
    background:rgba(217,173,67,.045);
  }
}

@media (min-width:1181px) and (max-width:1655px) and (prefers-reduced-motion:reduce){
  :is(
    body.country-index-pc-page,
    body.production-pc-page,
    body.services-pc-page,
    body.contact-pc-page,
    body.portfolio-list-pc-page,
    body.portfolio-show-pc-page,
    body.inquiry-page
  ) .contact-mobile__item{
    transition:none!important;
  }
}