@charset "UTF-8";

.ip-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  line-height: 1.8;
  padding: 16px 0;   /* ← 上下に余白 */
}

.line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.label {
  font-weight: bold;
}

/* コピーボタン */
.copy-btn {
  padding: 4px 12px;
  border-radius: 10px;
  border: 1px solid #6cc8f7;
  background: #fff;
  cursor: pointer;
  font-size: 0.85em;
}

.copy-btn:hover {
  background: #6cc8f7;
  color: #fff;
}

/* コピーしました表示 */
.copied {
  color: green;
  font-size: 0.8em;
  min-width: 90px;
}

/* ===== スマホ最適化 ===== */
@media (max-width: 600px) {
  .ip-area {
    align-items: stretch;      /* 左右いっぱい使う */
    padding: 14px 10px;        /* BOX内の余白 */
  }

  .line {
    width: 100%;
    flex-direction: column;    /* ← 横並び→縦並び */
    align-items: flex-start;   /* 左寄せ */
    gap: 8px;
    margin: 14px 0;
  }

  .label {
    white-space: nowrap;       /* 「IPアドレス:」を縦割れさせない */
  }

  /* 値（IP/ホスト）を折り返して崩れないように */
  #ip, #host {
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  /* ボタンは横書きのまま、押しやすく */
  .copy-btn {
    width: 100%;
    max-width: 180px;
    padding: 10px 12px;
    text-align: center;
  }

  /* コピーしました表示 */
  .copied {
    min-width: 0;
  }
}