/*      body a:link, a:visited, a:active {

          color: unset;
      }*/
/* img 태그의 src 속성 값이 정확히 "/news/upload/0"인 경우에만 선택합니다. */
img[src="/news/upload/0"] {
    visibility: hidden;
}
      .news-item a {
          display: block;
          text-decoration: none;
          color: inherit;
      }
      .news-item a img {
           display: block;

       }

/*      body a:hover  {text-decoration:none;color:unset;}*/
/*    :root {
      font-family: "Noto Sans KR", sans-serif;
      font-optical-sizing: auto;

      font-style: normal;
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }*/

    /*body {*/
    /*    font-family: Arial, sans-serif;*/
    /*}*/

    .container {
      /*width: 100%;
      margin: 0 auto;*/
      overflow : unset;
    }

/*    .container > div:first-of-type {

        margin-top:0;
    }*/



    /* 헤더 스타일 */
    header {
      /*background: #333;
      color: #fff;
      padding: 10px 0;
      text-align: center;
      width: 100%;*/
    }

    .header-content {
      width: 1260px;
      margin: 0 auto;
    }

    /* 네비게이션 스타일 */
    nav {
      /*background: #ddd;
      color: #333;
      padding: 10px 0;
      width: 100%;*/
    }

    .nav-content {
      width: 1260px;
      margin: 0 auto;
    }



    /* 본문 레이아웃 */
    .layout {
      width: 1260px;
      margin: 0 auto 30px auto;
      cursor: grab;
      position: relative;

    }
    .item {
      position: relative;
      cursor: default;

      margin-bottom: 30px;


    }
    /*input type text일때 disable=true일때 회색
    */
    input[type="number"]:read-only {
        background-color: #f8f8f8; /* 매우 옅은 회색 또는 흰색 유지 */
        color: #555;               /* 텍스트 색상은 너무 연하지 않게 유지 */
        cursor: default;            /* 기본 커서 (텍스트 선택은 가능할 수 있음) */
        border: 1px solid #ddd;     /* 테두리를 약간 연하게 */
    }
    /*!* 버튼 숨김 상태 *!*/
    /*.layout-button {*/
    /*    position: absolute;*/
    /*    top: 0;*/
    /*    right: -48px;*/
    /*    background-color: #007bff;*/
    /*    color: white;*/
    /*    border: none;*/
    /*    padding: 5px 10px;*/
    /*    cursor: pointer;*/
    /*    display: none; !* 처음에는 숨김 *!*/
    /*}*/

    /* 설정 패널 스타일 */
    .settings-panel {
      position: absolute;
      top: -3px;
      right: -30px; /* 패널 크기에 따라 조정 */
      width: 30px; /* 원하는 너비 설정 */
      background-color: #FF9933;
      /*border: 1px solid #ccc;*/
      padding: 5px;
      display: none; /* 기본적으로 숨김 */
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }
    /* 설정 패널 스타일 */
    .item-settings-panel {
      position: absolute;
      top: -3px;
      right: -3px; /* 패널 크기에 따라 조정 */
      width: 30px; /* 원하는 너비 설정 */
      background-color: #acc9ff;
      /*border: 1px solid #ccc;*/
      padding: 5px;
      display: none; /* 기본적으로 숨김 */
      z-index: 1000;
      /* flaxbox 레이아웃을 사용하여 버튼을 가운데 정렬 */

      flex-direction: column;
      align-items: center;
      /*하위 버튼들 margin 10px*/
      gap: 5px;
    }
    /* layout에 마우스를 올리면 패널 표시 */
    .layout:hover .settings-panel {
      display: block;
    }

    /* 이동 버튼 스타일 */
    .layout-button {
      /*width: 100%; !* 패널 너비에 맞게 조정 *!*/
      /*background-color: #007bff;*/
      /*color: white;*/
      border: none;
      /*padding: 5px 10px;*/
      cursor: pointer;
    }

    /* 드래그 중에 표시될 스타일 */
    .dragging {
      opacity: 0.5;
      z-index: 1000;

    }

    /* 1단 레이아웃 */
    .single-column {
      width: 1260px;
      cursor: default;
    }

    /* 2단 레이아웃 */
    .two-column {
      display: flex;
      justify-content: space-between;
      cursor: default;
    }

    .two-column .wide {
      width: 910px;
      position: relative;
      /*background-color: #f4f4f4;*/
    }

    .two-column .narrow {
      width: 300px;
      /*background-color: #ddd;*/

    }

    /* 3단 레이아웃 */
    .three-column {
      display: flex;
      justify-content: space-between;
      cursor: default;
    }

    .three-column .wide {
      width: 560px;
      position: relative;
      /*background-color: #f4f4f4;*/
    }

    .three-column .narrow {
      width: 300px;
      position: relative;
      /*background-color: #ddd;*/
    }
    
       
    .four-column {
	    display: flex;
	    justify-content: space-between;
	    cursor: default;
	}
	 .four-column .narrow {
      width:300px;
      /*width: 320px;*/
      position:relative;
      /*background-color: #ddd;*/
    }

    /* 푸터 스타일 */
    footer {
      /*background: #333;
      color: #fff;
      text-align: center;
      padding: 10px;
      width: 100%;*/
    }

    .footer-content {
      /*width: 1260px;
      margin: 0 auto;*/
    }

    /* 추가로 레이어 팝업을 위한 스타일 */
    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 20px;
      display: none;
      z-index: 1000;
    }

    .popup h3 {
      margin-bottom: 10px;
    }

    .popup button {
      display: block;
      margin-bottom: 10px;
      width: 48%;
    }
    #layoutPopup label {
      visibility: visible;
        position: relative;
        top: 0;
      display: block;
      font-size: 14px;
      width: unset;
        height: unset;
        line-height: unset;
    }
    #layoutPopup button {
      width: 100%;
      margin-bottom: 5px;
      border: none;
      cursor: pointer;
    }

    .close-popup {
      background-color: #d9d9d9;
      color: black;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
      width: 100%;
      border-radius: 4px;
    }


    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      z-index: 999;
    }
    /* 어두운 배경 스타일 */
    .dark-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      display: none;
      z-index: 998;
    }

    .highlighted {
      position: relative;
      z-index: 999;
      border: 0px solid #fff;
      box-shadow: 0 0 10px #fff;
    }
    .wide .item:last-child,
    .narrow .item:last-child {
      margin-bottom: 0;
    }
 

    .item-setting-panel {
      width: 600px;
      margin: 0;
      border: 1px solid #E0E0E0;
      padding: 1px;
      max-height: 90%;
      /*위아래 스크롤
      라운드*/

      overflow-y: auto;

    }
    .item-setting-panel label {
      display: block;
      overflow: unset;
      visibility: visible;
      position: relative;
      top: 0;
      left: 0;
      width: unset;
      height: unset;
      font-size: unset;
      line-height: unset;
    }
    .item-setting-panel .section {
      /*border: 1px solid #aaa;*/
      padding: 0px;
      margin-bottom: 10px;

    }
    .section .section-title {
      font-weight: bold;
      margin-bottom: 5px;
      background-color: #F5F5F5;
      padding: 5px 5px;

    }
    .section .section-divArea {
      display: flex;
    }
    .section .input-group {
      display: flex;
      align-items: center;
      /*margin-bottom: 2px;*/
      padding: 2px 10px;
      font-size: 14px;
      border-bottom: solid 1px #efefef;
      min-height: 40px;
    }
    .section .input-group:last-child {
      border-bottom: none; /* 마지막 입력 그룹의 밑줄 제거 */
    }
    .section .input-group label {
      width: 150px;
      margin-right: 10px;

    }
    .section .input-group input[type="text"], .section .input-group select {
      flex: 1;
      padding: 5px;
      border: 1px solid #aaa;
    }
    .section .input-group input[type="number"], .section .input-group select {

      padding: 5px;
      border: 1px solid #aaa;
    }
    .section .input-group input[type="checkbox"], .section .input-group input[type="radio"] {
      margin-right: 2px;
    }
    .section .input-group select {
      height: 40px;
    }
    .section .option-group {
      display: flex;
      align-items: center;
    }
    .section .option-group label {
      margin-right: 10px;
    }
    .section .color-selector {
      display: flex;
      align-items: center;
    }
    .section .color-selector input[type="color"] {
      margin-left: 10px;
    }
#item_photo_shape_area > div { margin-right: 10px; }


    .button-group {
      display: flex;
      justify-content: center; /* 버튼을 가운데 정렬 */
      gap: 10px; /* 버튼 사이 간격 */
      margin-top: 10px;
      padding: 10px;
      border-top: 1px solid #ccc; /* 버튼 그룹 위에 구분선 추가 */
    }

    .button-group button {
      padding: 8px 15px;
      font-size: 14px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      width: 100px; /* 버튼의 너비 */
      margin-bottom: 0;
    }

    .button-group button:hover {
      background-color: #0056b3;
    }
    #extract_presentation_area {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      flex-direction: column;
    }
    #extract_presentation_area div {
      display: flex;
      gap: 5px;
    }
    #extract_presentation_area dt {
      font-weight: bold;
    }
    #extract_presentation_area dt:after {
      content: ' :';
    }


    /* 로딩 팝업 스타일 */
    .loading-popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      /*display: flex;*/
      justify-content: center;
      align-items: center;
      z-index: 1000;
      display: none; /* 기본적으로 숨김 */
    }

    .loading-popup .loading-spinner {
      width: 50px;
      height: 50px;
      border: 5px solid #f3f3f3;
      border-top: 5px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .loading-popup p {
      color: #fff;
      margin-top: 10px;
      font-size: 16px;
    }


    .display-none {
      display: none;
    }
    .display-block {
      display: block;
    }
    .display-flex {
        display: flex;
    }
    .flex-direction-column {    flex-direction: column;}