/*보안적용*/
:root {
  --primary: #007bff;         /* 코랄 레드 */
  --primary-dark: #C44D58;    /* 짙은 코랄 */
  --bg: #F5F7FA;              /* 아주 연한 그레이-블루 */
  --text: #2E3A59;            /* 다크 네이비 톤 */
  --card-bg: #FCF8F5;
  --radius: 10px;
  --shadow: 0 4px 12px rgba(0,0,0,0.05);
}
body {
  background: var(--bg);
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--text);
  margin: 0;
}

.container {
  max-width: 900px;      /* FullHD 이하 (≤1920px) */
  height: 600px;      /* 숏주소만 해당되니  신중히 복사하삼 */
  margin: 0.2rem auto; /* 기본 1.0 */
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.generator-title {
  font-size: 1.7rem;
  font-weight: 700;
  background: linear-gradient(45deg, var(--primary), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* 박스(블럭) 효과 */
  display: inline-block;
  padding: 0.3em 0.6em;         /* 상하/좌우 넉넉한 여백 */
  border-radius: 1.5em;         /* 둥근 사각형 */
  background-color: #e9f3ff;    /* 밝은 연블루 */
  box-shadow: 0 4px 16px rgba(0,60,120,0.10);
  margin: 1.5rem 0 1rem;
  position: relative;
}

/* QHD (2560px 이상) */
@media (min-width: 2500px) {
  .container {
	max-width: 1200px;   /* FullHD 보다 좀 크게 */
  }
}

/* UHD (3840px 이상) */
@media (min-width: 3800px) {
  .container {
	max-width: 1600px;   /* QHD 보다 더 크게 */
  }
}

.shortener-block {
  background-color: #fff0db;
  border-radius: 10px;
  padding: 35px 25px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.shortener-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.shortener-input {
  flex: 1 1 auto;
  min-width: 200px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.shortener-submit {
  background-color: #ff6600;
  color: white;
  border: none;
  padding: 16px 24px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.shortener-result {
  margin-top: 15px;
  font-weight: bold;
  font-size: 16px;
}

.shortener-link {
  color: #004080;
}

.description {
  background: #e8f0fe;
  border: 1px solid #b3d1ff;
  padding: 1.0rem;
  margin: 1rem 0 2rem 0;
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: #333;
}
.description h3 {
  margin-bottom: 0.8rem;
  color: #0056b3;
}
.description ul {
  list-style: disc inside;
  padding-left: 0.5rem;
}
.description li {
  margin-bottom: 0.5rem;
}
.copy-btn {
  padding: 6px 12px;
  margin-left: 5px;
  background-color: #ddd;
  border: 1px solid #999;
  border-radius: 6px;
  cursor: pointer;
}

.shortener-error {
  color: red;
}