*{
    list-style: none;
    text-decoration: none;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    box-sizing: border-box;
    font-family: Gmarket Sans;
}


.topmenubox{ 
    width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid #000;
}
.top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1000px;
    margin: 0 auto;
    height: 100px;
}
.mainmenu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:40%;
}

.mainmenu>li{
    text-align: center;
    line-height: 20px;
}
.mainmenu>li>a{
   color: #000;
   font-size: 16px;
}

.mainmenu>li>a:hover{
    color:#0D8339;
    font-weight: 500;
}

.signup{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 12%;
    font-size: 14px;
}
.signup>li>a{
    color: #000;
}
/* [2026-08-14] 로그인 회원명 표시 */
.signup-user{
    color: #000;
    white-space: nowrap;
}
.signup-user>b{
    color: #0d8339;
    font-weight: 700;
}
/* [2026-08-20] sticky footer — 콘텐츠가 짧은 페이지(로그인 등)에서 푸터가 화면 중앙에 뜨지 않고
   항상 뷰포트 하단에 붙도록. body 를 세로 flex 로 만들고 마지막 요소(푸터/홈푸터)에 margin-top:auto. */
html{ min-height: 100%; }
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.site-footer{
    margin-top: auto;
}

/* [2026-08-14] 공통 푸터 (홈 제외 전 페이지) */
.site-footer{
    background: #16181d;
    color: #9aa0ab;
    padding: 28px 20px;
    /* [2026-08-20] 수정 전 - margin-top: 40px; (짧은 페이지에서 푸터가 중앙에 뜸) */
    /* 수정 후 - 위 공통 규칙에서 margin-top:auto 로 하단 고정. 콘텐츠와의 간격은 tool-cta/콘텐츠 자체 여백으로 확보 */
}
.site-footer__inner{
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 20px;
    text-align: left;
}
.site-footer__links{
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.site-footer__links a{
    color: #c5cad3;
    text-decoration: none;
    font-size: 14px;
}
.site-footer__links a:hover{ color: #fff; }
.site-footer__biz{
    font-size: 12px;
    color: #7c828d;
    line-height: 1.75;
    margin: 0;
    word-break: keep-all;
}
/* 저작권: 우측 하단 */
.site-footer__copy{
    font-size: 13px;
    color: #9aa0ab;
    margin: 0;
    align-self: flex-end;
    white-space: nowrap;
}

/* [2026-08-14] 도구 페이지 하단 '솔루션 도입 문의' CTA */
.tool-cta{
    max-width: 1080px;
    /* [2026-08-20] 수정 전 - width 미지정 + 하단 여백 0 (푸터와 간격 없음)
    margin: 40px auto 0; */
    /* [2026-08-20] 수정 후 - width:100% + 하단 여백 80px */
    width: 100%;
    margin: 40px auto 80px;
    padding: 26px 20px;
    background: #e5f6ec;
    border: 1px solid #b6e3c8;
    border-radius: 14px;
    text-align: center;
}
.tool-cta__title{
    font-size: 19px;
    font-weight: 800;
    color: #0d6b33;
    margin: 0 0 8px;
    letter-spacing: -.01em;
}
.tool-cta__text{
    font-size: 14px;
    font-weight: 400;
    color: #3a5c46;
    line-height: 1.65;
    margin: 0 0 18px;
    word-break: keep-all;
}
.tool-cta__btn{
    display: inline-block;
    background: #0d8339;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 10px;
}
.tool-cta__btn:hover{ background: #0a6e30; }

@media (max-width: 768px){
    /* [2026-08-20] 수정 전 - 하단 여백 0 (데스크톱의 margin-bottom:80px 가 모바일에서 사라짐)
    .tool-cta{ margin: clamp(28px,7vw,40px) auto 0; padding: clamp(20px,5.2vw,26px) clamp(14px,3.6vw,20px); } */
    /* [2026-08-20] 수정 후 - 하단 여백 80px 도 모바일 clamp 적용 */
    .tool-cta{ width: 92%;
        margin: clamp(28px, 6vw, 48px) auto; padding: clamp(20px,3.38vw,26px) clamp(5px,2.6vw,20px); }
    .tool-cta__title{ font-size: clamp(15px,3.6vw,19px); }
    .tool-cta__text{ font-size: clamp(12px,2.86vw,14px); }
    .tool-cta__btn{ font-size: clamp(13px,2.86vw,15px); padding: clamp(10px,2.6vw,12px) clamp(22px,5.7vw,28px); }
}

/* [2026-08-14] 무료횟수 소진 안내 배너 + 소진된 버튼 흐리게 */
.ns-exhausted-bar{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #b42318;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 16px;
    box-shadow: 0 -2px 8px rgba(0,0,0,.2);
}
.ns-exhausted{
    opacity: .5;
    cursor: not-allowed !important;
}
/* [2026-08-20] 도구 상단 '데모 체험 · 남은 횟수' 배너 (usage.js 자동 주입) */
.ns-demo-bar{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 1080px;
    max-width: calc(100% - 48px);
    margin: 20px auto 0;
    padding: 12px 18px;
    background: #eafaf0;
    border: 1px solid #b7e4c7;
    border-radius: 10px;
    color: #0d8339;
    font-size: 15px;
}
.ns-demo-bar__tag{
    font-weight: 700;
    background: #0d8339;
    color: #fff;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 13px;
}
.ns-demo-bar__count b{
    font-size: 18px;
}
.ns-demo-bar--empty{
    background: #fdecec;
    border-color: #f5b5b5;
    color: #c0392b;
}
.ns-demo-bar__cta{
    margin-left: auto;
    font-weight: 700;
    color: #c0392b;
    text-decoration: underline;
}
.ns-demo-bar__cta:hover{
    color: #922b21;
}
@media (max-width: 768px){
    .ns-demo-bar{
        max-width: calc(100% - 24px);
        margin: clamp(14px, 2.6vw, 20px) auto 0;
        padding: clamp(9px, 1.6vw, 12px) clamp(12px, 2.3vw, 18px);
        gap: clamp(8px, 1.6vw, 12px);
        font-size: clamp(12px, 2vw, 15px);
    }
    .ns-demo-bar__tag{
        padding: clamp(2px, 0.4vw, 3px) clamp(8px, 1.4vw, 11px);
        font-size: clamp(11px, 1.7vw, 13px);
    }
    .ns-demo-bar__count b{
        font-size: clamp(14px, 2.3vw, 18px);
    }
    .ns-demo-bar__cta{
        margin-left: 0;
    }
}
/* [2026-08-14] QR 미리보기 이미지 드래그/선택 저장 억제 - 다운로드 버튼으로만 저장 유도 */
.qrgen__preview-img, .qrw__preview-img{
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}
/* [2026-08-20] 사이트 전역: 이미지/영상 드래그(끌어서 저장) 억제 - imgprotect.js 와 함께 우클릭 저장 방지 보조 */
img, canvas, svg, video{
    -webkit-user-drag: none;
}
/* [2026-08-14] 모바일 메뉴용 로그인/로그아웃 항목 - 데스크톱은 우측 .signup 사용하므로 숨김 */
.mm-auth{display:none;}
@media (max-width:768px){
    .mainmenu .mm-auth{display:block;}
    .mainmenu .mm-auth>a{color:#0d8339;font-weight:700;}
}

.drop{
    display: none;
    position: absolute;
}
.submenu{
    width: 200px;
    height: 30px;
    border-radius: 5px;
    background: #F5F5F5;
    display: flex;
    justify-content: space-between;
}
.submenu>li{
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    display: flex;
    align-items: center;
    font-weight: 300;
    padding: 0 10px;
}
.submenu>li>a{
    color:#000
}

.dropmenu:hover .drop{
    display: block;
    transition: 0.1s;
}
.dropicon{
    padding: 0 5px;
}


/* 여기까지 헤더 */



/* 여기부터 메인메뉴2 */

#main{
    margin: 100px auto;
    width: 1000px;
}
.title{
   text-align: center;
}
.title>h1{
    color:#0D8339;
    font-weight: 500;
    font-size: 30px;
}
.fileup-box{
    width: 352px;
    height: 249px;
    border-radius: 30px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    margin: 30px auto;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.fileup-box>img{
    margin-top: 20px;
}
.fileup-box>button{
    width: 160px;
    height: 40px;
    border-radius: 25px;
    background: #1C1C1C;
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}
.fileup-box>p{
    padding-top: 15px;
    font-size: 14px;
}
.middle{
    width: 1000px;
    margin: 150px auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.middle-box:nth-child(1){
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px dashed #B0B0B0;
    border-bottom: 1px dashed #B0B0B0;
    width: 33%;
    height: 200px;
}
.middle-box:nth-child(2){
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
    height: 200px;
    border-bottom: 1px dashed #B0B0B0;
}
.middle-box:nth-child(3){
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
    height: 200px;
    border-left: 1px dashed #B0B0B0;
    border-bottom: 1px dashed #B0B0B0;
}
.middle-box:nth-child(4){
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
    height: 200px;
    border-right: 1px dashed #B0B0B0;
}
.middle-box:nth-child(5){
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
    height: 200px;
}
.middle-box:nth-child(6){
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
    height: 200px;
    border-left: 1px dashed #B0B0B0;
}
.middle-box>img{
    width: 30px;
    height: 30px;
    margin: 30px 0;
}
.middle-box>h4{
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}
.middle-box>p{
    font-size: 14px;
    font-weight: 400;
    margin-top: 20px;
    white-space: pre-line;
    text-align: center;
    line-height: 20px;
}
/* 여기까지 메인메뉴2  */


/* 여기부터 메인메뉴2-2 */
.upload-box{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 80px auto;
}
.upload-box-first{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 86%;
    height: 80px;
    background: #1C1C1C;
    border-radius: 30px 0px 0px 30px;
    padding: 0 20px;
}
.filename{
    display: flex;
    align-items: center;
    padding:0 10px;
    color: #FFF;
    font-size: 16px;
}
.filename>img{
    padding: 0 10px;
}
.upload-box-first>p{
    color: #A5A5A5;
   
}
.upload-box-last{
    width: 14%;
   
}
.upload-box-last>a{
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 139px; */
    /* height: 80px; */
    background: #0D8339;
    border-radius: 0px 30px 30px 0px;
    color: #FFF;
    line-height: 80px;
}
.upload-box-last>a>img{
    padding-left: 30px;
}
/* 여기까지 메인메뉴2-2 */



/* 여기부터  QR 베이직 */
.qr-top{
    width: 686px;
    margin: 50px auto;
    display: flex;
}
.maintop{
    display: flex;
    align-items: center;
}
.maintop>img{
    padding-right: 5px;
}
.maintop-line>img{
    padding-right: 5px;
}
.maintop-line{
    display: flex;
    align-items: center;
}
.maintop-line::after{
    content: "";
    flex-grow: 1;
    align-items: center;
    background: #D9D9D9;
    height: 1px;
    margin: 0 15px;
    width:125px;
}
.maintop-line::before{
    content: "";
    flex-grow: 1;
    align-items: center;
    background: #D9D9D9;
    height: 1px;
    margin: 0 15px;
    width:125px;
}





.qr-main{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 1000px;
    margin: 0 auto;
}

/* qr코드 미리보기 */
.qr-last{
    width: 250px;
    height: 300px;
    background: #FFF;
    display: block;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 320px;
}
.qr-review{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}
.qr-review>img{
    width: 180px;
    height: 180px;
    border: 5px solid #F22D20;
}
.qr-review>p{
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 30px;
}

/* QR탭메뉴 */

.qr-first{
    width: 100%;
    margin: 0 auto;
    display: flex;
}
  /* 탭 스타일 */
  .tabs{
    width: 100%;
  }
  .tab_item {
    width: 20%;
    height: 50px;
    line-height: 50px;
    color: #d9d9d9;
    display: block;
    float: left;
    text-align: center;
    font-weight: 400;
    transition: all 0.2s ease;
    font-size: 30px;
    margin: 0 auto;
  }
  .tab_item:hover {
    opacity: 0.75;
  }
  
  /* 라디오 버튼 UI삭제*/
  input[name="tab_item"] {
    display: none;
  }
  
  /* 탭 컨텐츠 스타일 */
  .tab_content {
    display: none;
    padding: 29px;
    clear: both;
    overflow: hidden;
    border: 1px solid #D9D9D9;
    width: 95%;
    border-radius: 30px;
    margin: 0 auto;
  }
  
  
  /* 선택 된 탭 콘텐츠를 표시 */
  #all:checked ~ #all_content,
  #programming:checked ~ #programming_content,
  #design:checked ~ #design_content {
    display: block;
  }
  
  /* 선택된 탭 스타일 */
  .tabs input:checked + .tab_item {
    background-color: #fff;
    color: #000;
  }

  
.QRtabCon-list{
    margin: 20px 0 80px 0;
}
.QRtabCon-list>h4{
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 10px;
}

.select {
    display: flex;
    align-items: center;
}
.select>input[type=radio]{
    display: none;
}
.select>input[type=radio]+label{
    display: inline-block;
    cursor: pointer;
    height: 120px;
    width: 100px;
    border: 2px solid #D9D9D9;
    border-radius: 5px;
    line-height: 24px;
    text-align: center;
    font-weight:bold;
    font-size:13px;
    font-weight: 400;
}   
.select>input[type=radio]+label{
    background-color: #fff;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 15px;
}
.select>input[type=radio]+label > img{
    padding: 10px 0;
}
.select>input[type=radio]:checked+label{
    border: 2px solid #0D8339;
    color: #000;
}





.select-skin {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.select-skin>input[type=radio]{
    display: none;
}
.select-skin>input[type=radio]+label{
    display: inline-block;
    cursor: pointer;
    height: 120px;
    width: 100px;
    border: 2px solid #D9D9D9;
    border-radius: 5px;
    line-height: 24px;
    text-align: center;
    font-weight:bold;
    font-size:13px;
    font-weight: 400;
    margin-bottom: 15px;
}   
.select-skin>input[type=radio]+label{
    background-color: #fff;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 15px;
}
.select-skin>input[type=radio]+label > img{
    padding: 10px 0;
}
.select-skin>input[type=radio]:checked+label{
    border: 2px solid #0D8339;
    color: #000;
}


.select-color {
    display: flex;
    align-items: center;
    gap: 15px;
}
.select-color input[type=radio]+label{
    display: inline-block;
    cursor: pointer;
    border: 2px solid #D9D9D9;
}
.select-color>input {
    width: 25px;
    height: 25px;
    border: 1px solid #000;
    background:#F22D20;
}
.select-color>input[type=radio]{
    display: contents;
}
.select-color>input[type=radio]:checked+label{
    border: 2px solid #000000;
}
.colorpicker{
    width: 150px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.skin-color{
   gap: 10px;
    border: none;
    display: flex;
    align-items: center;
    color: #d9d9d9;
    font-size: 14px;
}
.skin-color>input{
    width: 25px;
    height: 30px;
    border: none;
    border-radius: 50px;
}
.select-logo{
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 5px;
}
.select-logo >label{
    margin-right: 30px;
}
.select-logo .textbox{
    width: 320px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    background: #FFF;
}
.select-logo > button{
    width: 80px;
    height: 40px;
    border-radius: 5px;
    background: #000;
}
.select-logo>button>a{
    color: #fff;
    font-weight: 300;
}
.list-3>p{
    font-size: 13px;
    color: #D9D9D9;
    margin-left: 250px;
    padding-top: 10px;
}

.select-words{
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 5px;
}
.select-words >label{
    margin-right: 30px;
}
.select-words .textbox2{
    width: 410px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    background: #FFF;padding: 0 5px;
}
/* [2026-08-21] 프레임 섹션(캡션과 별도 래퍼) - .select-words 와 동일 레이아웃 */
.select-frame{
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 5px;
}
.select-frame > label{
    margin-right: 30px;
}
.select-frame .textbox2{
    width: 360px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    padding: 0 5px;
}
.select-words2{
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 250px;
    font-weight: 300;
    padding-top: 10px;
}
.textbox2::placeholder{
    padding-left: 10px;
    color: #D9D9D9;
}

.reset-btn >  button{
    width: 80px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    background: #FFF;
}
.reset-btn >  button > a{
    color: #000;
    font-size: 14px;
}

.bottom-btn{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 30px;
    gap: 10px;
}
.bottom-btn >  button:nth-child(1){
    width: 120px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #000;
    background: #FFF;
}
.bottom-btn >  button:nth-child(2){
    width: 120px;
    height: 40px;
    border-radius: 5px;
    background: #0D8339;
    border: none;
    color: #fff;
}

.bottom-btn >  button:nth-child(1)>a{
    color: #000;
    font-size: 14px;
}
.bottom-btn >  button:nth-child(2)>a{
    color: #FFF;
    font-size: 14px;
}

/* [2026-08-20] ===== QR 비주얼 리프레시 (배치 유지·스타일만 · 네이버풍 차별화 + 초록 브랜드 통일) =====
   원복: 이 블록('===== QR 리프레시 끝 =====' 까지) 전체를 삭제하면 원래 스타일로 복귀. QR 로직/구조 무관. */

/* 섹션 번호 헤더(1.코드스타일 / 2.스킨색상 …): 밋밋한 텍스트 → 좌측 초록 액센트바 + 굵게 */
.QRtabCon-list{ margin: 20px 0 40px 0; }
.QRtabCon-list > h4{
    font-weight: 700;
    font-size: 15px;
    color: #16181d;
    margin-bottom: 14px;
    padding-left: 12px;
    border-left: 4px solid #37be69;
    line-height: 1.15;
}

/* 탭(기본형/이미지형): 큰 글씨 → 정돈된 탭 + 초록 하단 강조 */
.tab_item{
    height: 46px;
    line-height: 46px;
    font-size: 17px;
    font-weight: 600;
    color: #9aa0ab;
    border-bottom: 2px solid transparent;
}
.tabs input:checked + .tab_item{
    background: transparent;
    color: #0d8339;
    border-bottom-color: #37be69;
}

/* 탭 콘텐츠 박스: 과한 30px 라운드 → 카드형(부드러운 라운드 + 옅은 테두리 + 그림자) */
.tab_content{
    border: 1px solid #e6e9ee;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(20,30,40,.05);
    background: #fff;
}

/* 코드 스타일/스킨 썸네일 카드: 각진 회색 → 라운드+그림자, 선택 시 초록 테두리+옅은 초록 배경 */
.select > input[type=radio] + label,
.select-skin > input[type=radio] + label{
    border: 2px solid #e6e9ee;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(20,30,40,.05);
    transition: border-color .15s, background .15s, transform .15s;
}
.select > input[type=radio] + label:hover,
.select-skin > input[type=radio] + label:hover{
    border-color: #37be69;
    transform: translateY(-2px);
}
.select > input[type=radio]:checked + label,
.select-skin > input[type=radio]:checked + label{
    border: 2px solid #0d8339;
    background: #eafaf0;
    color: #0d8339;
}

/* 색상 스와치 선택 표시: 검정 테두리 → 초록 링 */
.select-color > input[type=radio]:checked + label{
    border: 2px solid #0d8339;
    box-shadow: 0 0 0 2px #eafaf0;
}

/* 로고 첨부 버튼: 검정 → 초록 브랜드 */
.select-logo > button{ background: #0d8339; }
.select-logo > button:hover{ background: #0a6e30; }
/* ===== QR 리프레시 끝 ===== */

/* 여기까지 QR코드디자인페이지 */

/* 여기부터 페이지유형 선택 페이지 */

.page-select>h4{
    font-size: 30px;
    font-weight: 500;
    color: #000;
}
.page-selectbox{
    border: 1px solid #D9D9D9;
    width: 95%;
    border-radius: 30px;
    margin: 10px 0;
}
.page-select-list{
    padding:60px 40px;
    clear: both;
    overflow: hidden;
    
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.page-select-listbox{
    width: 207px;
    height: 45px;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 20px;
}
.page-reset-btn{
    margin:50px 0 30px 0 ;
    padding: 0 40px;
}
.page-reset-btn >  button{
    width: 80px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    background: #FFF;
   
}
.page-reset-btn >  button > a{
    color: #000;
    font-size: 14px;
}
.pagelist-bottom-btn{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 50px auto;
    gap: 10px;
    width: 1000px;
}
.pagelist-bottom-btn >  button:nth-child(1){
    width: 120px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #000;
    background: #FFF;
}
.pagelist-bottom-btn >  button:nth-child(2){
    width: 120px;
    height: 40px;
    border-radius: 5px;
    background: #0D8339;
    border: none;
    color: #fff;
}

.pagelist-bottom-btn>  button:nth-child(1)>a{
    color: #000;
    font-size: 14px;
}
.pagelist-bottom-btn >  button:nth-child(2)>a{
    color: #FFF;
    font-size: 14px;
}


.page-qr-review{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    height: 420px;
}
.page-qr-review>img{
    width: 180px;
    height: 420px;
   
}
.page-qr-review>p{
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 30px;
}
.page-qr-last{
    width: 250px;
    height:430px;
    border-radius: 30px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    display: block;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 0;
}



.page-link{width: 100%;}
.page-link>h4{
    font-size: 30px;
    font-weight: 500;
    color: #000;
}
.page-linkbox{
    border: 1px solid #D9D9D9;
    width: 95%;
    border-radius: 30px;
    margin: 10px 0;
    padding: 60px 40px;
    clear: both;
    overflow: hidden;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.page-link-list{
    clear: both;
    overflow: hidden;
    
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* 여기부터 URL링크 */
.link-title{
    width: 100%;
    height: 50px;
    border-radius: 10px;
    background: #F5F5F5;
    line-height: 50px;
    padding-left: 20px;
    font-size: 18px;
}
.link-list1{
    line-height: 40px;
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
    margin-left: 20px;
}
.link-list1>input{
    width: 80%;
    height: 40px;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    
}
.link-list1>input::placeholder{
    font-size: 14px;
    font-weight: 300;
    color: #959595;
    padding-left: 20px;
}
.link-list2{
    line-height: 40px;
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
    margin-left: 20px;
}
.link-list2>textarea{
    width: 80%;
    height: 160px;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    margin-left: 20px;
    margin-top: 10px;
    padding-top: 10px;
}
.link-list2>textarea::placeholder{
    font-size: 14px;
    font-weight: 300;
    color: #959595;
    padding-left: 20px; 
}
/* .link-list2> button{
    width: 80px;
    height: 40px;
    border-radius: 5px;
    background: #000;
}
.link-list2>button>a{
    color: #fff;
    font-weight: 300;
}
.link-list2>input{
    width: 64%;
    height: 40px;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
} */

.link-list-input{
    line-height: 40px;
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
    margin-left: 20px;
}
.link-list-input-btn{
    display: flex;
    margin-left: 35px;
    width: 80%;
    gap: 15px;
}
.link-list-input-btn> button{
    width: 80px;
    height: 40px;
    border-radius: 5px;
    background: #000;
}
.link-list-input-btn>button>a{
    color: #fff;
    font-weight: 300;
}
.link-list-input-btn>input{
    width: 80%;
    height: 40px;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
   
}



.link-list2>input::placeholder{
    font-size: 14px;
    font-weight: 300;
    color: #959595;
    padding-left: 20px; 
}

.link-bottom-btn{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 30px;
    gap: 10px;
}
.link-bottom-btn >  button:nth-child(1){
    width: 120px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #000;
    background: #FFF;
}
.link-bottom-btn >  button:nth-child(2){
    width: 120px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #000;
    background: #FFF;
    margin-left: 300px;
}
.link-bottom-btn >  button:nth-child(3){
    width: 120px;
    height: 40px;
    border-radius: 5px;
    background: #0D8339;
    border: none;
    color: #fff;
}
.link-bottom-btn >  button:nth-child(1)>a{
    color: #000;
    font-size: 14px;
}
.link-bottom-btn >  button:nth-child(2)>a{
    color: #000;
    font-size: 14px;
}
.link-bottom-btn >  button:nth-child(3)>a{
    color: #FFF;
    font-size: 14px;
}
/* 여기까지  URL링크 페이지 */

/* 여기부터 자체제작 페이지 */
.pagetheme>p{
    font-size: 14px;
    font-weight: 400;
    padding-left: 20px;
    margin-bottom: 20px;
}
.theme-list{
    display: flex;
    gap: 15px;
    margin-left: 20px;
}
.themecolor{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: 20px;
    justify-content: space-between;
    height: 50px;
    margin-top: 10px;
}
.themecolor-first{
    display: flex;
    align-items: center;
    gap: 20px;
}
.themecolor-first>p{
    font-size: 14px;
}
.themecolor-second{
    display: flex;
    align-items: center;
    gap: 20px;
}
.themecolor-second>p{
    font-size: 14px;
}
.maincolor{
   margin: 30px 0;
}
.maincolor>p{
    font-size: 14px;
}
.maincolor>label{
    width: 150px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    font-size: 14px;
    color: #D9D9D9;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
.maincolor>label>input{
    width: 25px;
    height: 30px;
    border-radius: 5px;
    background: #fff;
    border: none;
    overflow: hidden;
}


.select-gallery {
    display: flex;
    align-items: center;
    margin-left: 30px;
}
.select-gallery>input[type=radio]{
    display: none;
}
.select-gallery>input[type=radio]+label{
    display: inline-block;
    cursor: pointer;
    height: 120px;
    width: 100px;
    border: 2px solid #D9D9D9;
    border-radius: 5px;
    line-height: 24px;
    text-align: center;
    font-weight:bold;
    font-size:13px;
    font-weight: 400;
}   
.select-gallery>input[type=radio]+label{
    background-color: #fff;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 15px;
}
.select-gallery>input[type=radio]+label > img{
    padding: 10px 0;
}
.select-gallery>input[type=radio]:checked+label{
    border: 2px solid #0D8339;
    color: #000;
}
.link-list3{
    line-height: 40px;
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: flex-start;
    margin-left: 20px;
    gap: 25px;
}
.link-title-02{
    width: 100%;
    height: 50px;
    border-radius: 10px;
    background: #F5F5F5;
    line-height: 50px;
    padding-left: 20px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.link-title-02>img{
    padding:0 20px;
}
/* 여기까지  QR생성페이지 */




/* 여기부터 배경제거 페이지 */

.bgdelete-box{
    width: 352px;
    height: 250px;
    border-radius: 30px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    margin: 30px auto;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.bgdelete-box>img{
    margin: 20px 0;
    width: 100px;
    height: 100px;
}
.bgdelete-box>button{
    width: 160px;
    height: 40px;
    border-radius: 25px;
    background: #1C1C1C;
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}
.bgdelete-box>p{
    padding-top: 15px;
    font-size: 14px;
    text-align: center;
}
.bgdelete-thumbnail{
    width: 320px;
    margin:0 auto;
}
.bgdelete-thumbnail>p{
    font-size: 14px;
    font-weight: 300;
    color: #696969;
}
.thumbnail{
    margin: 10px auto;
    gap: 10px;
    display: flex;
    width: 100%;
}
.bgdelete-title{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding-top: 75px;
    gap: 10px;
}
.bgdelete-title>h1{
    color: #0D8339;
    font-size: 1.5em;
    font-weight: 500;
    margin: 0 auto;
}
.bgdelete-box02{
    width: 45%;
    height: auto;
    border-radius: 30px;
    background: #FFF;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.imgbox{
    height: auto;
    margin: 30px auto;
    display: flex;
}
.imgbox>img{
    width: 70%;
    border: 1px solid #d9d9d9;
    padding: 50px 100px;
    border-radius: 20px;
    margin: 0 auto;
}
.icons{
    display: flex;
    gap: 30px;
    align-items: center;
}
.icons>img{
    cursor: pointer;
}
.download_btn{
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 60px 0 30px;
}
.down-btn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.down-btn>p{
    font-size: 14px;
    color: #A5A5A5;
    padding-top: 5px;
}
.hddown-btn>p{
    font-size: 14px;
    color: #A5A5A5;
    padding-top: 5px;
}
.hddown-btn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.down-btn>button{
    width: 160px;
    height: 40px;
    background: #1C1C1C;
    border-radius: 25px;
}
.down-btn>button>a{
    color: #Fff;
    font-size: 16px;
}

.hddown-btn>button{
    width: 160px;
    height: 40px;
    background: #0D8339;
    border-radius: 25px;
    border: none;
}
.hddown-btn>button>a{
    color: #Fff;
    font-size: 16px;
}


/* 여기부터 영상편집 */
.videobox{
   width: 100%;
   height: 295px; 
   /* border-radius: 30px; */
   border-top: 1px solid #D9D9D9;
   border-bottom: 1px solid #D9D9D9;
   background: #FFF;
   margin: 30px auto;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15px;
}
.video-upload_box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 27%;
    height: 179px;
    border-radius: 20px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);
}
.video-upload_box>button{
    width: 70%;
    height: 40px;
    border-radius: 25px;
    background: #1C1C1C;
    margin:10px 0;
}
.video-upload_box > button > a {
    color: #fff;
    font-size: 16px;
}
.video-upload_box > p {
    font-size: 14px;
    color: #696969;
}
.videobox > img {
    width: 30px;
    height: 30px;
}
.result_box { 
    width: 27%;
    height: 179px;
    border-radius: 20px;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(img/result_img.png)no-repeat;
}



/* 여기부터 로그인 / 회원가입 페이지 */
/* .myview {
    display: flex;
    justify-content: space-between;
    width: 1000px;
    margin: 0 auto;
} */
.myview_login{
    width: 70%;
    margin: 0 auto;
    display: flex;
}
.signup_page{
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.myview_login > .tabs{
    width: 100%;
}
.login_menu{
    width: 70%;
    margin: 30px auto;
}
.login_go{
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    display: flex;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    margin-bottom: 20px;
}
.login_go >  img {
    margin-left: 20px;
}
.bar2{
    display: flex;
    align-items: center;
    gap:30px;
    padding-bottom: 20px;
    width: 100%;
    margin: 0 auto;
}
.bar2 > img {
    width: 37%;
}
.login_entry{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.login_entry>input{
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    background: #FFF;
}
.login_entry>input::placeholder{
    font-size: 14px;
    color: #D9D9D9;
    padding-left: 20px;
    font-weight: 300;
}
.login_chk{
    display: flex;
    align-items: center;
    gap: 10px;
}
.login_chk > p{
    font-size: 14px;
    font-weight: 300;
}
.login_chk > input{
    width: 15px;
    height: 15px;
    border-radius: 3px;
    border: 1px solid #000;
}
.login_btn {
    width: 100%;
    height: 40px;
    border-radius: 5px;
    background: #0D8339;
    border: none;
    margin:  60px 0 30px 0;
}
.login_btn > a{
    color: #FFF;
    font-weight: 400;
    font-size: 16px;
}

.signup_menu{
    width: 70%;
    margin: 30px auto;
}
.signup_entry{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.signup_entry>input{
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    background: #FFF;
}
.signup_entry > p {
    width: 100%;
    height: 40px;
    border-radius: 5px;
    background: #F5F5F5;
    line-height: 40px;
    padding-left:20px ;
    margin-bottom: 8px;
}
.signup_chk{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}
.signup_chk > p{
    font-size: 14px;
    font-weight: 300;
}
.signup_chk > input{
    width: 15px;
    height: 15px;
    border-radius: 3px;
    border: 1px solid #000;
}



@media  (max-width:1440px){
    .top{width: 90%;}
}


@media  (max-width:1024px){
    .qr-last{display: none;}
    .tab_content{width: 90%;}
    .bottom-btn{width: 90%;}
    .qr-top{width: 66%;}
    .top{width: 90%;}
    .mainmenu{display: none;}
    .signup{width: 20%;}

    /* 여기부터 bgdelete03 */
    .bgdelete-box02{width: 60%;}
    .imgbox>img{width: 80%;}

    /* 여기부터 fileconversion01 */
    .middle{width: 90%;}

     /* 여기부터 fileconversion03 */
    .upload-box{width: 90%;}
    .upload-box-first > p{display: none;}
    .upload-box-last>a>img {padding-left: 10px;}


    /* 여기부터 submenu */
    .bar2{gap: 30px;}


    /* 여기부터 video */
    .videobox{width: 90%;}
}


@media (max-width:768px){
    #main{width: 95%;}
    /* 여기부터 QR01 */
    .qr-top {
        width: 80%;
        margin: 50px auto;
        display: flex;
    }
    .maintop-line::before {
        content: "";
        flex-grow: 1;
        align-items: center;
        background: #D9D9D9;
        height: 1px;
        margin: 0 15px;
        width: 80px;
    }
    .maintop-line::after {
        content: "";
        flex-grow: 1;
        align-items: center;
        background: #D9D9D9;
        height: 1px;
        margin: 0 15px;
        width: 80px;
    }
    .tab_content {
        width: 90%;
    }
    .tab_content {
        clear: both;
        overflow: hidden;
        width: 95%;
        margin: 0 auto;
    }
    .qr-main{width: 100%;}
    .mainmenu{display: none;}
    .signup{width: 16%;}


    /* 여기부터  QR02 */
    .page-qr-last{
        display: none;
    }
    .qr-first {
        width: 95%;
    }
    .page-selectbox{width: 100%;}
    .page-select-list {
        padding: 60px 20px;
    }
    .page-select-listbox {
        width: 30%;
    }


    /* 여기부터 QR4 */
    .page-linkbox{width: 100%; }
   
    /* 여기부터 bgdelete03 */
    .bgdelete-box02{width:100% ;}
    

     /* 여기부터 bgdelete03 */
     .imgbox>img{width: 100%; }

      /* 여기부터 fileconversion01 */
    .middle-box>h4{font-size: 16px; word-break: keep-all; }
    .middle-box>p{font-size: 14px; word-break: keep-all; }
    .middle-box:nth-child(1){width: 50%;}
    .middle-box:nth-child(2){width: 50%;}
    .middle-box:nth-child(3){width: 50%; border-left: 0; border-right: 1px dashed #B0B0B0;}
    .middle-box:nth-child(4){width: 50%; border-right: 0; border-bottom: 1px dashed #B0B0B0;}
    .middle-box:nth-child(5){width: 50%; border-right: 1px dashed #B0B0B0;}
    .middle-box:nth-child(6){width: 50%; border-left: 0;}

    /* 여기부터 submenu */
    .tab_item{width: 24%;}
    .bar2{gap: 7%;}
    .signup_menu{width: 90%;}
    .login_menu{width: 90%;}

      /* 여기부터 video */
      .videobox{
        flex-direction: column;
        height: auto;
        padding: 50px 0;
      }
      .video-upload_box{width: 40%;}
      .result_box{width: 40%;}
      .videobox > img {transform: rotate(90deg);}
}

@media (max-width:430px){
    /* 여기부터 QR01 */
    .qr-top {
        width: 90%;
        margin: 50px auto;
        display: flex;
        gap: 10px;
    }
    .maintpo>p{font-size: 15px; word-break: keep-all;}
    .maintpo-line>p{font-size: 15px; word-break: keep-all;}
    .signup{display: none;}
    .maintop-line::before {display: none;}
    .maintop-line::after{display: none;}
    .qr-top {width: 90%; margin: 50px auto; display: flex; gap: 28px;}
    .tab_item{font-size:26px ; width: 28%; margin-left: 10px;}
    .select-color{   flex-wrap: wrap;        gap: 6px; }
    .colorpicker{width: 100%;}
    .select-logo{flex-wrap: wrap;}
    .select-logo .textbox { width: 70%; margin-top: 20px;}
    .select-logo > button{ margin-top: 20px;}
    .list-3>p {margin-left: 0;}
    .select-words2{margin-left: 0;}
    .select-words{flex-wrap: wrap;}
    .select{
        flex-wrap: wrap;        justify-content: center;
        gap: 10px;
    }
    .select>input[type=radio]+label{
        margin-right: 0;
    }


    /* 여기부터  QR02 */
    .page-select-listbox {
        width: 100%;
    }

    /* 여기부터 QR4 페이지정보입력 */
    .page-linkbox{width: 100%; padding: 60px 20px;}
    .theme-list{flex-wrap: wrap; margin-left: 0;}
    .themecolor{flex-wrap: wrap; height: auto; margin-top: 30px; margin-left: 0;}
    .page-link-list{
        clear: unset;
        overflow: unset;
        height: auto;
        margin-bottom: 30px;
    }
    .maincolor>label{width: 200%;}
    .maincolor{margin: 0;}
    .link-list1{flex-direction: column; margin-left: 0;}
    .link-list2{flex-direction: column; margin-left: 0;}
    .link-list3{flex-direction: column; margin-left: 0;}
    .link-list1>input{width: 100%;}
    .link-list2>textarea{width: 100%; margin-left: 0;}
    .select-gallery{margin-left: 0;}
    .link-list-input{flex-direction: column; margin-left: 0;}
    .link-list-input-btn {margin-left: 0; width: 99%; gap: 10px;}
    .link-title-02{width: 100%;}
    .link-bottom-btn > button:nth-child(2){margin-left: 0;}
    .page-reset-btn{padding: 0; margin:20px 0;}
    .pagetheme>p{padding-left: 0;}


    /* 여기부터 bgelelte03 */
    .bgdelete-box02{width: 90%;}
    .icons{gap: 20px;}
    .download_btn{flex-direction: column;}
    .imgbox>img{width: 100%; padding: 30px;}


    /* 여기부터 fileconversion01 */
    .middle-box>h4{font-size: 16px; word-break: keep-all; }
    .middle-box>p{font-size: 14px; word-break: keep-all; }
    .middle-box:nth-child(1){width: 100%; border-right: 0;}
    .middle-box:nth-child(2){width: 100%;}
    .middle-box:nth-child(3){width: 100%; border-right: 0; }
    .middle-box:nth-child(4){width: 100%; border-right: 0; border-bottom: 1px dashed #B0B0B0;}
    .middle-box:nth-child(5){width: 100%; border-right: 0; border-bottom: 1px dashed #B0B0B0;}
    .middle-box:nth-child(6){width: 100%; border-left: 0;}


    /* 여기부터 fileconversion03 */
    .upload-box{flex-direction: column; margin: 30px auto;}
    .upload-box-first{
        width: 100%;
        flex-direction: column;
        height: auto;
        padding: 20px 0;
        border-radius: 30px 30px 0px 0px
    }
    .filename > img {padding: 20px 0;}
    .upload-box-last{width: 100%;}
    .upload-box-last>a>img {padding-left: 200px;}
    .upload-box-last>a { border-radius: 0px 0px 30px 30px;}


     /* 여기부터 submenu */
     .myview_login{width: 95%;}
     .login_menu{width: 100%;}
     .signup_menu{width: 100%;}


      /* 여기부터 video */
      .video-upload_box{width: 70%;}
      .result_box{width: 70%;}
      .video-upload_box > img {transform: rotate(90deg);}
}


@media (max-width:375px){
     /* 여기부터  QR4 페이지정보입력 */
    .page-select-listbox {
        width: 100%;
    }
    .link-list3{width: 100%;}
    .select-gallery{justify-content: space-between;}
    .select-gallery>input[type=radio]+label{width: 30%;}
    .select-gallery>input[type=radio]+label{margin-right: 0;}

    /* 여기부터 이미지배경제거 bgdelete01 */
    .bgdelete-box{width: 90%;}
    .title>p{font-size: 13px; margin-top: 10px;}
    .bgdelete-box>p{word-break: keep-all;}
    .thumbnail{flex-wrap: wrap;}
    .bgdelete-thumbnail{width: 90%;}


    /* 여기부터 fileconversion01 */
    .fileup-box{width: 90%;}
    .fileup-box > p{font-size: 12px;}


    /* 여기부터 fileconversion03 */
    .fileformat{
        display: flex;
        gap: 3px;
    }
    .upload-box-last>a>img {
        padding-left: 130px;
    }
    .filename{gap: 10px;}


    /* 여기부터 submenu */
    .tab_item{width: 35%;}
    .tab_content{width: 100%;}
    .signup_menu{width: 100%;}


     /* 여기부터 video */
     .video-upload_box{width: 70%;}
     .result_box{width: 70%;}
     .videobox > img {transform: rotate(90deg);}
}

@media (max-width:280px){
    .icons {
        gap: 9px;
    }
    .bgdelete-title{padding-top: 0;}

    /* 여기부터 submenu */
    .tab_item{width: 40%;}
    .tab_content{padding: 10px;}
    .bar2 {gap: 3%;}


    /* 여기부터 video */
    .video-upload_box{width: 100%;}
    .result_box{width: 100%;}
}

/* ===== QR 생성기 (2026-07-20 신규) ===== */
/* [2026-07-20 수정] 우측 미리보기 카드가 생성 폼 높이에 맞게 늘어나도록 고정 높이 해제 */
.qr-last{width:400px;height:auto;min-height:300px;margin-top: 45px;}
.qr-review{width:100%;box-sizing:border-box;border-radius:16px;box-shadow:0 1px 4px rgba(0,0,0,.07);border: 1px solid #e4e7ed; }

.qrgen{display:flex;flex-direction:column;gap:12px;width:100%;margin:0 auto;}
.qrgen__label{font-size:13px;font-weight:500;color:#333;}
.qrgen__input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #d0d0d0;border-radius:8px;font-size:13px;}
.qrgen__input:focus{outline:none;border-color:#37be69;}
.qrgen__logo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.qrgen__logo-btn{padding:7px 12px;border:1px solid #d0d0d0;border-radius:8px;background:#f5f5f5;font-size:12px;cursor:pointer;}
.qrgen__logo-name{flex:1;min-width:0;font-size:11px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qrgen__file{display:none;}
.qrgen__preview{display:flex;align-items:center;justify-content:center;width:100%;min-height:190px;border:1px dashed #d0d0d0;border-radius:12px;background:#fafafa;padding:12px;box-sizing:border-box;}
.qrgen__preview-img{display:none;max-width:100%;height:auto;}
.qrgen__placeholder{font-size:12px;color:#aaa;text-align:center;margin:0;}
.qrgen__actions{display:flex;gap:8px;}
.qrgen__btn{flex:1;text-align:center;padding:11px 0;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;border:none;text-decoration:none;}
.qrgen__btn--primary{background:#37be69;color:#fff;}
.qrgen__btn--download{background:#333;color:#fff;line-height:normal;}
.qrgen__btn--disabled{opacity:.45;pointer-events:none;}
.qrgen__msg{min-height:16px;font-size:12px;color:#37be69;margin:0;text-align:center;}

@media (max-width:768px){
    .qrgen{gap:clamp(8px,1.56vw,12px);max-width:100%;}
    .qrgen__label{font-size:clamp(11px,1.82vw,14px);}
    .qrgen__input{padding:clamp(9px,1.82vw,12px) clamp(10px,1.82vw,14px);font-size:clamp(11px,1.82vw,14px);border-radius:clamp(6px,1.04vw,8px);}
    .qrgen__logo{gap:clamp(7px,1.3vw,10px);}
    .qrgen__logo-btn{padding:clamp(6px,1.04vw,8px) clamp(10px,1.82vw,14px);font-size:clamp(10px,1.69vw,13px);border-radius:clamp(6px,1.04vw,8px);}
    .qrgen__logo-name{font-size:clamp(10px,1.56vw,12px);}
    .qrgen__preview{min-height:clamp(160px,28.6vw,220px);padding:clamp(11px,2.08vw,16px);border-radius:clamp(8px,1.56vw,12px);}
    .qrgen__placeholder{font-size:clamp(10px,1.69vw,13px);}
    .qrgen__actions{gap:clamp(7px,1.3vw,10px);}
    .qrgen__btn{padding:clamp(9px,1.56vw,12px) 0;font-size:clamp(11px,1.95vw,15px);border-radius:clamp(6px,1.04vw,8px);}
    .qrgen__msg{font-size:clamp(10px,1.69vw,13px);}
}

/* ===== QR 생성 마법사 (step2~4, 2026-07-20 신규) ===== */
.qrw{width:1000px;max-width:100%;margin:40px auto;}
.qrw__steps{display:flex;gap:8px;justify-content:center;margin-bottom:36px;flex-wrap:wrap;}
.qrw__step{padding:8px 16px;border-radius:20px;background:#f2f2f2;color:#999;font-size:14px;font-weight:500;}
.qrw__step.is-active{background:#37be69;color:#fff;}
.qrw__step.is-done{background:#e5f6ec;color:#0d8339;}
.qrw__body{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;}
.qrw__panel{flex:1;min-width:0;width:100%;background:#fff;border:1px solid #e4e7ed;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.07);padding:24px;}
.qrw__title{font-size:22px;font-weight:500;margin-bottom:20px;color:#222;}
/* [2026-08-21] 유형 버튼: 아이콘(상단)+텍스트(하단) 카드형 */
.qrw__types{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.qrw__type{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 10px;min-height:98px;border:1px solid #d9d9d9;border-radius:14px;background:#fff;font-size:14px;font-weight:500;color:#333;cursor:pointer;transition:all .15s;}
.qrw__type-icon{color:#37be69;line-height:0;}
.qrw__type-icon svg{width:28px;height:28px;display:block;}
.qrw__type-label{font-size:14px;}
.qrw__type:hover{border-color:#37be69;}
.qrw__type.is-selected{border-color:#37be69;background:#e5f6ec;color:#0d8339;}
.qrw__type.is-selected .qrw__type-icon{color:#0d8339;}
.qrw__type--soon{opacity:.45;pointer-events:none;}
.qrw__type-badge{position:absolute;top:8px;right:8px;font-size:10px;font-weight:600;color:#888;background:#f0f0f0;border-radius:8px;padding:2px 7px;}
@media (max-width:768px){ .qrw__types{grid-template-columns:repeat(2,1fr);} }
.qrw__hint{margin-top:16px;font-size:13px;color:#999;line-height:1.5;}
.qrw__form{display:flex;flex-direction:column;gap:8px;}
.qrw__label{font-size:14px;font-weight:500;color:#444;margin-top:8px;}
.qrw__input{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #d0d0d0;border-radius:8px;font-size:14px;}
.qrw__input:focus{outline:none;border-color:#37be69;}
.qrw__textarea{resize:vertical;min-height:90px;}
.qrw__check{display:flex;align-items:center;gap:8px;font-size:14px;color:#444;margin-top:10px;}
.qrw__nav{display:flex;gap:12px;margin-top:28px;}
.qrw__nav--center{justify-content:center;}
.qrw__btn{flex:1;max-width:200px;text-align:center;padding:13px 0;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;border:1px solid #d0d0d0;background:#fff;color:#333;text-decoration:none;}
.qrw__btn--primary{background:#37be69;color:#fff;border-color:#37be69;}
.qrw__btn--disabled{opacity:.45;pointer-events:none;}
.qrw__side{width:320px;flex-shrink:0;align-self:flex-start;background:#fff;border:1px solid #e4e7ed;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.07);padding:18px;}
.qrw__side-title,.qrw__preview-title{font-size:15px;font-weight:500;color:#444;margin-bottom:12px;text-align:center;}
/* [2026-08-21] 미리보기 박스: 빨간 점선 → 연회색 실선(#e0e0e0) + 라운드 12px */
.qrw__preview{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:240px;border:1px solid #e0e0e0;border-radius:12px;background:#fff;padding:16px;box-sizing:border-box;}
.qrw__preview--lg{min-height:340px;max-width:420px;margin:24px auto 0;background:#fff;border:1px solid #e4e7ed;box-shadow:0 1px 4px rgba(0,0,0,.07);}
.qrw__preview-img{display:none;max-width:100%;height:auto;}
.qrw__preview-msg{font-size:13px;color:#aaa;text-align:center;margin:0;}
.qrw__result{text-align:center;}

@media (max-width:768px){
    .qrw{margin:clamp(24px,5.2vw,40px) auto;}
    .qrw__steps{gap:clamp(5px,1.04vw,8px);margin-bottom:clamp(22px,4.7vw,36px);}
    .qrw__step{padding:clamp(6px,1.04vw,8px) clamp(10px,2.08vw,16px);font-size:clamp(11px,1.82vw,14px);border-radius:clamp(14px,2.6vw,20px);}
    .qrw__body{flex-direction:column;gap:clamp(20px,3.9vw,30px);}
    .qrw__title{font-size:clamp(17px,2.86vw,22px);margin-bottom:clamp(14px,2.6vw,20px);}
    .qrw__types{gap:clamp(8px,1.56vw,12px);}
    .qrw__type{padding:clamp(15px,2.86vw,22px) clamp(8px,1.56vw,12px);font-size:clamp(12px,2.08vw,16px);border-radius:clamp(10px,1.82vw,14px);}
    .qrw__hint{font-size:clamp(11px,1.69vw,13px);}
    .qrw__label{font-size:clamp(11px,1.82vw,14px);}
    .qrw__input{padding:clamp(9px,1.82vw,12px) clamp(10px,1.82vw,14px);font-size:clamp(11px,1.82vw,14px);border-radius:clamp(6px,1.04vw,8px);}
    .qrw__nav{gap:clamp(8px,1.56vw,12px);margin-top:clamp(20px,3.6vw,28px);}
    .qrw__btn{padding:clamp(10px,1.69vw,13px) 0;font-size:clamp(12px,1.95vw,15px);border-radius:clamp(6px,1.04vw,8px);}
    .qrw__side{width:100%;}
    .qrw__preview{min-height:clamp(200px,33.8vw,260px);padding:clamp(14px,2.6vw,20px);border-radius:clamp(11px,2.08vw,16px);}
    .qrw__preview--lg{min-height:clamp(240px,44vw,340px);}
}

/* ===== 이미지 배경 제거 (removebg, 2026-07-20 신규) ===== */
.rbg{width:800px;max-width:100%;margin:0 auto;}
.rbg__drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:2px dashed #cfcfcf;border-radius:20px;background:#fafafa;padding:36px 20px;text-align:center;transition:background .15s,border-color .15s;}
.rbg__drop.is-drag{border-color:#37be69;background:#eefaf1;}
.rbg__drop-icon{width:44px;height:auto;opacity:.7;}
.rbg__drop-text{font-size:13px;color:#888;}
.rbg__file{display:none;}
.rbg__stage{display:flex;gap:20px;margin-top:28px;}
.rbg__col{flex:1;min-width:0;}
.rbg__col-title{font-size:15px;font-weight:500;color:#333;margin-bottom:10px;text-align:center;}
.rbg__box{display:flex;align-items:center;justify-content:center;width:100%;min-height:280px;border:1px solid #e0e0e0;border-radius:16px;background:#fff;padding:16px;box-sizing:border-box;overflow:hidden;}
.rbg__box--checker{background-color:#fff;background-image:linear-gradient(45deg,#e9e9e9 25%,transparent 25%),linear-gradient(-45deg,#e9e9e9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9e9e9 75%),linear-gradient(-45deg,transparent 75%,#e9e9e9 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;}
.rbg__img{display:none;max-width:100%;max-height:420px;height:auto;}
.rbg__ph{font-size:13px;color:#aaa;text-align:center;margin:0;}
.rbg__actions{display:flex;gap:12px;justify-content:center;margin-top:28px;}
.rbg__btn{padding:13px 28px;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;border:1px solid #d0d0d0;background:#fff;color:#333;text-decoration:none;text-align:center;}
.rbg__btn--upload{background:#1c1c1c;color:#fff;border-color:#1c1c1c;border-radius:25px;padding:11px 26px;}
.rbg__btn--primary{background:#37be69;color:#fff;border-color:#37be69;}
.rbg__btn--download{background:#333;color:#fff;border-color:#333;line-height:normal;}
.rbg__btn--disabled{opacity:.45;pointer-events:none;}
.rbg__msg{min-height:18px;font-size:13px;color:#37be69;text-align:center;margin:14px 0 0;word-break:break-all;}

@media (max-width:768px){
    .rbg__drop{gap:clamp(8px,1.56vw,12px);padding:clamp(24px,4.7vw,36px) clamp(14px,2.6vw,20px);border-radius:clamp(14px,2.6vw,20px);}
    .rbg__drop-icon{width:clamp(32px,5.7vw,44px);}
    .rbg__drop-text{font-size:clamp(11px,1.69vw,13px);}
    .rbg__stage{gap:clamp(12px,2.6vw,20px);margin-top:clamp(20px,3.6vw,28px);}
    .rbg__col-title{font-size:clamp(12px,1.95vw,15px);}
    .rbg__box{min-height:clamp(180px,36.5vw,280px);padding:clamp(11px,2.08vw,16px);border-radius:clamp(11px,2.08vw,16px);}
    .rbg__img{max-height:clamp(280px,54.7vw,420px);}
    .rbg__ph{font-size:clamp(11px,1.69vw,13px);}
    .rbg__actions{gap:clamp(8px,1.56vw,12px);margin-top:clamp(20px,3.6vw,28px);}
    .rbg__btn{padding:clamp(10px,1.69vw,13px) clamp(20px,3.6vw,28px);font-size:clamp(12px,1.95vw,15px);border-radius:clamp(6px,1.04vw,8px);}
    .rbg__btn--upload{padding:clamp(9px,1.43vw,11px) clamp(18px,3.4vw,26px);border-radius:clamp(18px,3.25vw,25px);}
    .rbg__msg{font-size:clamp(11px,1.69vw,13px);}
}

/* ===== 헤더 정리 · 반응형 (2026-07-22) ===== */
/* 데스크톱 메뉴: 고정 40% 폭 → 내용 폭으로(항목 6개 줄바꿈·겹침 방지) */
.mainmenu{width:auto;gap:6px;flex-wrap:nowrap;}
.mainmenu>li{white-space:nowrap;}
.mainmenu>li>a{padding:6px 9px;display:inline-block;}

.nav-toggle{display:none;width:40px;height:40px;border:none;background:transparent;cursor:pointer;padding:9px 8px;flex-direction:column;justify-content:center;gap:5px;}
.nav-toggle span{display:block;height:2px;width:100%;background:#333;border-radius:2px;transition:.2s;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* 준비중 메뉴 */
.mainmenu .menu-soon>a{color:#b8b8b8;cursor:default;display:inline-flex;align-items:center;gap:6px;}
.mainmenu .menu-soon>a:hover{color:#b8b8b8;font-weight:400;}
.soon-badge{font-size:10px;background:#f0f0f0;color:#999;border-radius:10px;padding:1px 7px;font-weight:500;line-height:1.6;}

/* ===== 드롭다운 대메뉴/소메뉴 (2026-07-23) — 레거시 .submenu 충돌 회피 위해 .nav-sub 사용 ===== */
.mainmenu>li.has-sub{position:relative;}
.mainmenu>li.has-sub>.sub-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
.mainmenu .caret{font-size:9px;color:#999;transition:transform .2s;}
.nav-sub{list-style:none;display:block;width:auto;height:auto;margin:0;padding:6px 0;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:154px;background:#fff;border:1px solid #eee;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.12);opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s;z-index:400;margin-top:6px;}
.nav-sub::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px;}
.mainmenu>li.has-sub:hover>.nav-sub{opacity:1;visibility:visible;}
.mainmenu>li.has-sub:hover .caret{transform:rotate(180deg);}
.nav-sub>li{display:block;width:auto;height:auto;text-align:left;line-height:normal;white-space:nowrap;}
.nav-sub>li>a{display:block;padding:9px 18px;font-size:14px;color:#333;}
.nav-sub>li>a:hover{background:#f2faf5;color:#0D8339;font-weight:500;}
.nav-sub .menu-soon>a{color:#b8b8b8;cursor:default;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.nav-sub .menu-soon>a:hover{background:transparent;color:#b8b8b8;font-weight:400;}

@media (max-width:768px){
    .top{width:92%;height:60px;position:relative;}
    .logo>a>img{height:26px;width:auto;}
    .nav-toggle{display:flex;}
    /* 모바일 드롭다운 메뉴 */
    .mainmenu{
        display:none;position:absolute;top:60px;left:0;right:0;width:100%;
        flex-direction:column;background:#fff;border:1px solid #eee;
        border-radius:0 0 12px 12px;box-shadow:0 8px 18px rgba(0,0,0,.1);
        padding:6px 0;z-index:300;
    }
    .mainmenu.open{display:flex;}
    .mainmenu>li{width:100%;text-align:left;line-height:normal;border-bottom:1px solid #f4f4f4;}
    .mainmenu>li:last-child{border-bottom:none;}
    .mainmenu>li>a{display:block;padding:clamp(12px,2.6vw,14px) clamp(18px,4.7vw,22px);font-size:clamp(14px,2.86vw,15px);}
    .mainmenu .menu-soon>a{justify-content:space-between;}
    .signup{display:none;}
    /* 모바일 소메뉴: 아코디언 */
    .mainmenu>li.has-sub>.sub-toggle{justify-content:space-between;}
    .mainmenu>li.has-sub>.sub-toggle .caret{transition:transform .2s;}
    .mainmenu>li.has-sub.open>.sub-toggle .caret{transform:rotate(180deg);}
    .nav-sub{position:static;transform:none;opacity:1;visibility:visible;display:none;width:100%;min-width:0;background:#f8f9fa;border:none;border-radius:0;box-shadow:none;margin:0;padding:0;}
    .nav-sub::before{display:none;}
    .mainmenu>li.has-sub.open>.nav-sub{display:block;}
    .nav-sub>li{border-top:1px solid #eee;}
    .nav-sub>li>a{padding:clamp(11px,2.4vw,13px) clamp(30px,7vw,40px);font-size:clamp(13px,2.7vw,14px);}
    .nav-sub .menu-soon>a{padding:clamp(11px,2.4vw,13px) clamp(30px,7vw,40px);}
}

/* ===== QR 페이지 모바일/태블릿 (2026-07-22) ===== */
/* 기존: max-width:1024px에서 .qr-last(생성기 카드)가 숨겨져 QR 사용 불가 → 다시 표시 + 세로 배치 */
@media (max-width:1024px){
    .qr-main{flex-direction:column;align-items:center;width:92%;gap:24px;margin:0 auto;}
    .qr-first{width:100%;}
    .qr-last{display:block;width:100%;max-width:440px;height:auto;min-height:auto;position:static;top:auto;order:-1;}
    .qr-review{width:100%;box-sizing:border-box;}
    .bottom-btn{width:100%;justify-content: center; margin: 30px 0;}
}
@media (max-width:768px){
    .qr-main{width:94%;gap:clamp(16px,3.6vw,24px);}
    .qr-first{width:100%;}
    /* 진행 표시(코드디자인 → 유형선택 → 정보입력) */
    .qr-top{width:100%;margin:clamp(20px,4.7vw,36px) auto;gap:  clamp(8px,2vw,14px);justify-content:center;align-items:center;}
    .maintop>p,.maintop-line>p{font-size:clamp(11px,2.08vw,14px);word-break:keep-all;line-height:1.3;}
    .maintop>img,.maintop-line>img{width:clamp(11px,2.08vw,14px);height:auto;}
    .maintop-line::before,.maintop-line::after{margin:0 clamp(6px,1.56vw,12px);}
    /* 탭(기본형 / 이미지형) — 데스크톱 30px는 모바일에서 과대 */
    .tab_content{width:100%;padding:clamp(14px,3.1vw,29px);}
    .tab_item{width:50%;height:clamp(40px,7.8vw,50px);line-height:clamp(40px,7.8vw,50px);font-size:clamp(15px,3.1vw,20px);margin:0;}
    .QRtabCon-list{margin:clamp(14px,3.6vw,20px) 0 clamp(30px,7.8vw,60px) 0;}
}
@media (max-width:430px){
    .maintop-line::before,.maintop-line::after{display:none;}
    .tab_item{font-size:clamp(14px,3.7vw,16px);width:50%;margin:0;}
}

/* ===== QR step1 카드형 디자인 통일 (2026-07-22) ===== */
/* 디자인 옵션 패널(.tab_content)을 다른 도구와 동일한 흰 카드로 */
.tab_content{width:100%;background:#fff;border:1px solid #e4e7ed;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.07);padding:28px;}
/* 탭(기본형/이미지형) 색/활성 표시 — 언더라인 스타일 */
.tab_item{font-weight:600;color:#9aa0ab;border-bottom:2px solid transparent;border-radius:0;}
.tab_item:hover{opacity:1;color:#333;}
.tabs input:checked + .tab_item{background:transparent;color:#0d8339;border-bottom-color:#37be69;}
/* 섹션 간격/헤딩 */
.QRtabCon-list{margin:0 0 24px;}
.QRtabCon-list>h4{font-size:15px;font-weight:500;color:#333;margin-bottom:12px;}
/* 옵션 선택 카드(코드 스타일 / 스킨) 톤 통일 */
.select>input[type=radio]+label,
.select-skin>input[type=radio]+label{border:1px solid #e4e7ed;border-radius:12px;transition:.15s;}
.select>input[type=radio]+label:hover,
.select-skin>input[type=radio]+label:hover{border-color:#37be69;}
.select>input[type=radio]:checked+label,
.select-skin>input[type=radio]:checked+label{border:2px solid #37be69;background:#e5f6ec;color:#0d8339;}
/* 입력 필드 통일 */
.select-logo .textbox,.select-words .textbox2,.colorpicker{border:1px solid #d0d0d0;border-radius:8px;}
.select-logo .textbox:focus,.select-words .textbox2:focus{outline:none;border-color:#37be69;}
.select-logo>button{background:#333;border-radius:8px;}
/* 하단 다음 버튼 여백 */
.bottom-btn{margin:26px 0 0;}

/* 탭 크기는 데스크톱에서만(모바일은 위 50% 규칙 유지) */
@media (min-width:769px){
    .tab_item{width:auto;min-width:90px;height:46px;line-height:46px;font-size:20px;padding:0 20px;margin:0;}
}

/* step1 옵션 — 색상 스와치 줄바꿈 + 입력칸 폭 반응형 (2026-07-22) */
.select-color{flex-wrap:wrap;gap:12px 14px;}
.select-logo{flex-wrap:wrap;gap:8px 12px;}
.select-logo .textbox{flex:1 1 220px;min-width:180px;width:auto;height:40px;padding:0 12px;box-sizing:border-box;}
.select-words{flex-wrap:wrap;gap:8px 12px;}
.select-words .textbox2{flex:1 1 240px;min-width:200px;width:auto;box-sizing:border-box;}
/* 어색하게 밀려있던 안내문구 좌측 여백 제거 */
.list-3>p{margin-left:0;}
.select-words2{margin-left:0;}

/* ===== 도구 페이지 콘텐츠 너비 · 타이틀 통일 (2026-07-22) ===== */
/* 콘텐츠 너비: 모든 도구 1080px (max-width로 모바일 안전) */
#main{width:1080px;max-width:100%;margin:48px auto;}
.qrw{width:1080px;margin:0 auto;} /* #main이 상단 여백 담당 → 이중 여백 방지 */
.rbg{width:1080px;}
/* 페이지 타이틀 통일: removebg(.title) + QR(.title) 공통 */
.title{text-align:center;margin:0 auto 36px;}
.title>h1{font-size:28px;font-weight:700;color:#16181d;letter-spacing:-.02em;margin-bottom:8px;}
.title>p{font-size:15px;color:#5b6270;line-height:1.6;}

@media (min-width:769px){ .qr-main{width:100%;} }
@media (max-width:768px){
    #main{width:92%;margin:clamp(28px,6vw,48px) auto;}
    .title{margin-bottom:clamp(24px,5.2vw,36px);}
    .title>h1{font-size:clamp(20px,4.7vw,28px);}
    .title>p{font-size:clamp(13px,2.6vw,15px);}
}

/* ===== 도구 사용설명 (공통) 2026-07-23 ===== */
.tool-guide{background:#e5f6ec;border:1px solid #cdeeda;border-radius:12px;padding:18px 20px;margin:0 auto 28px;max-width:100%;}
.tool-guide__head{font-size:15px;font-weight:700;color:#0d8339;margin-bottom:12px;display:flex;align-items:center;gap:7px;}
.tool-guide__head svg{width:18px;height:18px;stroke:#0d8339;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.tool-guide__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.tool-guide__steps.cols-3{grid-template-columns:repeat(3,1fr);}
.tool-guide__step{background:#fff;border:1px solid #d6efe0;border-radius:10px;padding:12px 13px;}
.tool-guide__no{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#37be69;color:#fff;font-size:12px;font-weight:700;margin-bottom:8px;}
.tool-guide__step h3{font-size:13px;font-weight:700;color:#16181d;margin-bottom:4px;}
.tool-guide__step p{font-size:12px;color:#5b6270;line-height:1.5;}
.tool-guide__step b{color:#0d8339;}
@media (max-width:900px){
    .tool-guide__steps,.tool-guide__steps.cols-3{grid-template-columns:repeat(2,1fr);}
}
/* 통합 편집기로 연결(개별 도구 → 통합) */
.tool-crosslink{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#0d8339;color:#fff;border-radius:12px;padding:13px 18px;margin:0 auto 24px;font-size:13px;font-weight:600;text-align:center;}
.tool-crosslink a{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#0d8339;border-radius:8px;padding:7px 14px;font-weight:700;}
.tool-crosslink a:hover{background:#eafaf0;}

/* 관련 도구 이어가기(이미지 도구 간 연결고리) */
.tool-related{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#f0f2f5;border:1px solid #e4e7ed;border-radius:12px;padding:12px 16px;margin:0 auto 24px;font-size:13px;color:#5b6270;}
.tool-related strong{color:#16181d;font-weight:700;white-space:nowrap;}
.tool-related .rel-links{display:flex;gap:8px;flex-wrap:wrap;}
.tool-related a{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #d0d5dd;color:#0d8339;border-radius:8px;padding:6px 12px;font-weight:600;}
.tool-related a:hover{border-color:#37be69;background:#e5f6ec;}
.tool-related a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* 저장(다운로드) 후 활성화되는 연결고리 */
.tool-related.locked a{pointer-events:none;opacity:.45;}
.tool-related .rel-hint{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#9aa0ab;}
.tool-related .rel-hint svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.tool-related:not(.locked) .rel-hint{display:none;}
@media (max-width:768px){
    .tool-guide{padding:clamp(13px,3.3vw,18px) clamp(14px,3.3vw,20px);margin-bottom:clamp(20px,4.7vw,28px);}
    .tool-guide__head{font-size:clamp(13px,2.9vw,15px);}
}

/* [2026-07-22] QR 문구 옵션 비활성화(문구 사용 안함일 때) */
.qropt-off{opacity:.4;pointer-events:none;}
.textbox2:disabled{background:#f2f2f2;color:#aaa;cursor:not-allowed;}

/* [2026-07-22] QR 커스텀 색상 선택기 값 텍스트 */
.skin-color .cp-val{color:#333;font-weight:500;font-size:14px;}
.skin-color .cp-input{cursor:pointer;}

/* [2026-07-23] QR 로고 사용 중 파일 미첨부 안내 */
.qrgen__logo-hint{display:none;font-size:12px;color:#c47b00;margin:2px 0 0;line-height:1.4;}
.qrgen__logo-hint.is-on{display:block;}

/* [2026-07-23] QR 문구 사용 중 미입력 안내 */
.words-hint{display:none;font-size:12px;color:#c47b00;margin:8px 0 0;line-height:1.4;}
.words-hint.is-on{display:block;}