/*
=========================================================
 NSP DEFAULT MIN CSS
 Structure:
 1. Variables
 2. Theme (dark)
 3. Reset/Base
 4. Typography
 5. Utilities
 6. Forms & Buttons
 7. Images
=========================================================
*/

@charset "utf-8";

/* =========================================================
1. VARIABLES
========================================================= */
:root {
  /* wrap_panel padding */
  --wrap_panel-padding-full: 50px;
  --wrap_panel-padding-1240: 120px;
  --wrap_panel-padding-992: 100px;
  --wrap_panel-padding-768: 70px;
  --wrap_panel-padding-576: 30px;

  /* body */
  --body-color: #000;
  --body-bg: #fff;

  /* Text */
  --text-spotkey: #007aff; /* #00aaea;*/
  --text-subject: #000;
  --text-summary: #000;
  --text-category: #666666;
  --text-newslink: #000;
  --text-meta: #888888;
  --text-content: #666666;
  --text-date: #666666;
  --text-BoxTitle1: #255D9E;
  --text-BoxTitle2: #255D9E;
  --text-alink: #000;
  --text-alink-hover: #255D9E;/*#999999*/
  --text-alink-visited: #000;/*#551a8b*/

  /* background */
  --bg-color-blue: #e0f0ff;
  --bg-color-gray: #fafafa;

  /* background image - blue */
  --bg-image-blue: 
    radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%),
    radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%), radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%), radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%), radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%), linear-gradient(135deg, rgb(37, 56, 222), rgb(96, 189, 244));

  /* background image - gray */
  --bg-image-gray: 
    linear-gradient(16deg, rgba(116, 116, 116, 0.02) 0%, rgba(116, 116, 116, 0.02) 25%, transparent 25%, transparent 96%, rgba(177, 177, 177, 0.02) 96%, rgba(177, 177, 177, 0.02) 100%), 
    linear-gradient(236deg, rgba(148, 148, 148, 0.02) 0%, rgba(148, 148, 148, 0.02) 53%, transparent 53%, transparent 59%, rgba(56, 56, 56, 0.02) 59%, rgba(56, 56, 56, 0.02) 100%), linear-gradient(284deg, rgba(16, 16, 16, 0.02) 0%, rgba(16, 16, 16, 0.02) 46%, transparent 46%, transparent 71%, rgba(181, 181, 181, 0.02) 71%, rgba(181, 181, 181, 0.02) 100%), linear-gradient(316deg, rgba(197, 197, 197, 0.02) 0%, rgba(197, 197, 197, 0.02) 26%, transparent 26%, transparent 49%, rgba(58, 58, 58, 0.02) 49%, rgba(58, 58, 58, 0.02) 100%), linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));

  /* Brand Colors */
  --nsp-blue: #255D9E;     /* NSP 블루 */
  --indigo: #003766;     /* 메인 인디고 블루 */
  --cyan: #00aaea;       /* 사이언 블루 */
  --gold: #ffd700;       /* 골드/노랑 강조 */

  --white: #fff;
  --black: #000;
  --gray-333: #333333;
  --gray-666: #666666;
  --gray-999: #999999;
  --gray-ccc: #cccccc;
  --gray-ddd: #dddddd;
  --gray-eee: #eeeeee;
  --gray-fa: #fafafa;
  --gray-f0: #f0f0f0;
  --gray-f9: #f9f9f9;

  --blue: #007aff;  /* 기본색 (cyan blue 최적화) */
  --blue-1: #23a8e0; /* 진한톤 (hover 등) */
  --blue-2: #38b7d5; /* 중간톤 */
  --blue-3: #49c0d8; /* 연한톤 */
  --blue-4: #f3f9fd; /* 매우 연한톤 #e5f4f7(배경, 테이블 헤더 등) */

  --red:   #ff3b30;
  --red-1: #ff5a52;
  --red-2: #ff7a73;
  --red-3: #ff9b96;
  --red-4: #fdeaea;

  --green:   #34c759;
  --green-1: #52d374;
  --green-2: #6fdd8f;
  --green-3: #8ce7aa;
  --green-4: #e9f7ef;

  --yellow:   #ffcc00;
  --yellow-1: #ffd633;
  --yellow-2: #ffe066;
  --yellow-3: #ffea99;
  --yellow-4: #fff6d6;
}

/* =========================================================
2. DARK MODE
========================================================= */
:root[data-theme="dark"] {

  /* body */
  --body-color: #fff;
  --body-bg: #121212;

  /* Text */
  --text-spotkey: #4dc3ff;
  --text-subject: #fff;
  --text-summary: #f2f2f2;
  --text-category: #a6a6a6;
  --text-content: #c2c2c2;
  --text-meta: #9e9e9e;
  --text-newslink: #f2f2f2;
  --text-BoxTitle1: #6fb6ff;
  --text-BoxTitle2: #6fb6ff;
  --text-alink: #dddddd;
  --text-alink-hover:  #fff;/* #4dc3ff */
  --text-alink-visited: #dddddd;

  /* background */
  --bg-color-blue:#0f1a24;
  --bg-color-gray:#121212;

  /* background image - blue */
  --bg-image-blue:
    radial-gradient(circle at 85% 1%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 96%, transparent 96%, transparent 100%),
    radial-gradient(circle at 14% 15%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 1%, transparent 1%, transparent 100%),
    radial-gradient(circle at 60% 90%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 20%, transparent 20%, transparent 100%),
    radial-gradient(circle at 79% 7%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 78%, transparent 78%, transparent 100%),
    radial-gradient(circle at 55% 65%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 52%, transparent 52%, transparent 100%),
    linear-gradient(135deg,#0a2540,#144a6b);

  /* background image - gray */
  --bg-image-gray:
    linear-gradient(16deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 96%, rgba(255,255,255,0.03) 96%, rgba(255,255,255,0.03) 100%),
    linear-gradient(236deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 53%, transparent 53%, transparent 59%, rgba(255,255,255,0.02) 59%, rgba(255,255,255,0.02) 100%),
    linear-gradient(284deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 46%, transparent 46%, transparent 71%, rgba(255,255,255,0.03) 71%, rgba(255,255,255,0.03) 100%),
    linear-gradient(316deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 26%, transparent 26%, transparent 49%, rgba(255,255,255,0.02) 49%, rgba(255,255,255,0.02) 100%),
    linear-gradient(90deg,#121212,#121212);

  /* Brand Colors*/
  --nsp-blue: #6fb6ff;
  --indigo: #4da3ff;
  --cyan: #3ecfff;
  --gold: #ffd700;

  /* Grayscale */
  --gray-333: #e6e6e6;
  --gray-666: #c2c2c2;
  --gray-999: #a0a0a0;
  --gray-ccc: #7a7a7a;
  --gray-ddd: #5a5a5a;
  --gray-eee: #3a3a3a;
  --gray-fa: #2a2a2a;
  --gray-f0: #1e1e1e;
  --gray-f9: #181818;

  /* blue */
  --blue: #4da3ff;
  --blue-1: #76bdff;
  --blue-2: #9cd3ff;
  --blue-3: #c2e6ff;
  --blue-4: rgba(77,163,255,0.15);

  /* red */
  --red: #ff6b63;
  --red-1: #ff8a84;
  --red-2: #ffa8a3;
  --red-3: #ffc6c2;
  --red-4: rgba(255,107,99,0.15);

  /* green */
  --green: #4cd964;
  --green-1: #6ee07f;
  --green-2: #8fe79a;
  --green-3: #b0efb5;
  --green-4: rgba(76,217,100,0.15);

  /* yellow */
  --yellow: #ffd84d;
  --yellow-1: #ffe066;
  --yellow-2: #ffe88c;
  --yellow-3: #fff1b3;
  --yellow-4: rgba(255,216,77,0.18);
}

/* [2] Text Color Utilities: 글자색 적용 클래스 */
.nsp-blue{color: var(--nsp-blue);}
.nsp-red{color: var(--red);}
.nsp-sky{color: var(--blue);}
.nsp-green{color: var(--green);}


/* =========================================================
3. RESET / BASE
========================================================= */
*, *::before, *::after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html { -webkit-text-size-adjust:100%; }

body {
  margin: 0;
  font-size:16px;
  color:var(--black);
  background:var(--white);
  /*word-break: keep-all; 한글 기준*/
  /*word-break: break-all; 긴 URL만 줄바꿈*/
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-text-size-adjust: 100%;
}

object, iframe {
  width: 100%;
  border: none; 
}

img{
  display: block;
  margin:0 auto;
  padding:0;
  max-width: 100%;
  height: auto;
  border: none;
}

ul,ol,dl { list-style:none; }
a { color:inherit; text-decoration:none; }

/* =========================================================
4. TYPOGRAPHY
========================================================= */
h1,h2,h3,h4,h5,h6,p { margin:0; }
small { font-size:.75em; }


/* =========================================================
5. FORM - input,select,textare, button
========================================================= */
form {
  margin: 0;
  padding: 0;
}
input,select,textarea {
  vertical-align: middle;
  font-family: inherit;
  font-size: inherit;
  padding:4px 6px;
  border:1px solid var(--gray-ccc);
  background:var(--white);
  color:var(--black);
}

input:focus,select:focus,textarea:focus {
  outline:none;
  border-color:var(--blue);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  background-color: var(--gray-eee);
  cursor: not-allowed;
}

label {
  cursor: pointer;
  padding:0 5px 0 3px;
  vertical-align:middle;
}

/* ================  INPUT ================  */
input{
  padding:2.5px 4px;
  border:1px solid var(--gray-ccc);
  background:var(--white);
  color:var(--black);
  vertical-align:middle;
}

input::placeholder{color:var(--gray-999);}

input:hover,
input:focus{
  background:var(--bg-color-blue);
  border-color:var(--blue-1);
}
input.disabled{
  background:var(--gray-f0);
  color:var(--gray-999);
}
input.readonly{
  background:var(--gray-f0);
  color:var(--black);
}
input.mini{padding:2px;font-size:12px;}
input.large{padding:6px 9px;font-size:15px;}
input.big{padding:11px;font-size:15px;}

input.check{margin-top:-1px;}

input[type="radio"]{vertical-align:middle;}

input[type="date"]{
  position:relative;
  padding:1px 4px 2px;
}
/* ================  SELECT ================  */
select{
  padding:2px 4px 1px;
  border:1px solid var(--gray-ccc);
  background:var(--white);
  color:var(--black);
  vertical-align:middle;
}

select.mini{padding:1px 2px;font-size:12px;}
select.large{padding:5px 7px;font-size:15px;}
select.big{padding:10px;font-size:15px;}

/* ================  TEXTAREA ================  */
textarea{
  padding:3px 6px;
  border:1px solid var(--gray-ccc);
  background:var(--white);
  color:var(--black);
  margin:0 auto;
}

textarea::placeholder{color:var(--gray-999);}

textarea:hover,
textarea:focus{
  background:var(--bg-color-blue);
  border-color:var(--blue-1);
}

/* ================  BUTTON ================  */
button{
  display:inline;
  cursor:pointer;
  vertical-align:middle;
  text-align:center;
  background:var(--white); 
  border:1px solid var(--gray-ccc);
  margin:0 2px;
  padding:1px 4px;
  font-size:15px;
}
button:hover,
button:focus{
  border-color:var(--blue-1);
}

/* size */
button.mini{font-size:13px;padding:2px 3px;font-weight:400;}
button.large{padding:4px 6px;font-weight:500;}
button.big{padding:10px 15px;font-weight:500;}

/* color */
button.white{background:var(--white); color:var(--black);border-color:var(--gray-ccc);}
button.white:hover{background:var(--gray-f0);border-color:var(--gray-ccc);}

button.black{ background:var(--gray-333);color:var(--white);border-color:var(--black);}
button.black:hover{background:var(--gray-666);border-color:var(--gray-666);}

button.gray{background:var(--gray-eee);color:var(--black);border-color:var(--gray-ccc);}
button.gray:hover{background:var(--gray-ccc);border-color:var(--gray-ccc);}

button.red{background:var(--red);color: var(--white);border-color:var(--red);}
button.red:hover{background:var(--red-2);border-color:var(--red-2);}

button.blue{background:var(--blue);color: var(--white);border-color:var(--blue);}
button.blue:hover{background:var(--blue-1);border-color:var(--blue-1);}

button.gold{background:var(--gold);color:var(--black);border-color:var(--gold);}
button.gold:hover{ background:var(--yellow-1);}

button.green{background:var(--green);color: var(--white);border-color:var(--green);}
button.green:hover{background:var(--green-2);border-color:var(--green-2);}

button.sky{ background:var(--blue-2);color: var(--white); border-color:var(--blue-2);}
button.sky:hover{background:var(--blue-3);border-color:var(--blue-3);}