/* ===== 풋케어 도우미 v6.0.0 — foot_twotab 통일 스타일 ===== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
    font-family:'Noto Sans KR',sans-serif;
    background:#f0f0f0;
    color:#333;
    min-height:100vh;
}

/* ===== 상단 바 ===== */
.top-bar{
    display:flex;
    align-items:center;
    background:#fff;
    border-bottom:1px solid #ddd;
    position:sticky;
    top:0;
    z-index:100;
    padding:14px 16px;
    font-size:15px;
    font-weight:700;
    color:#333;
}

/* ===== 콘텐츠 래퍼 ===== */
.content-wrap{
    padding:16px;
    height:calc(100vh - 49px);
    overflow:hidden;
}
.content-grid{
    display:grid;
    grid-template-columns:600px 1fr;
    gap:16px;
    height:100%;
}

/* ===== 패널 (doc-col 스타일) ===== */
.panel{
    background:#fff;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.panel-header{
    font-size:14px;
    font-weight:700;
    color:#333;
    padding:14px 16px 10px;
    border-bottom:1px solid #eee;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-shrink:0;
}
.panel-body{
    padding:16px;
    flex:1;
    overflow-y:auto;
    min-height:0;
}
.panel-result-body{
    display:flex;
    flex-direction:column;
}

/* ===== 헤더 내 소형 버튼 ===== */
.hdr-btns{display:flex;gap:4px}
.hdr-btns button{
    padding:3px 8px;
    background:transparent;
    color:#999;
    border:1px solid #e0e0e0;
    border-radius:4px;
    font-size:11px;
    cursor:pointer;
    font-family:'Noto Sans KR',sans-serif;
    transition:all .15s;
}
.hdr-btns button:hover{background:#f5f5f5;color:#666;border-color:#ccc}

/* ===== 기본 진단서 버튼 4개 (doc-std-btn) ===== */
.btn-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}
.doc-std-btn{
    padding:9px 6px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    text-align:center;
    transition:all .15s;
    font-family:'Noto Sans KR',sans-serif;
    color:#333;
    -webkit-appearance:none;appearance:none;
}
.doc-std-btn:hover{background:#f5f5f5;border-color:#ccc}
.doc-std-btn:active{background:#eee}

/* ===== 구분선 ===== */
.doc-divider{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 0 6px;
    font-size:13px;
    font-weight:700;
    color:#333;
}
.doc-divider::before,.doc-divider::after{
    content:'';flex:1;height:1px;background:#ddd;
}

/* ===== 금기증 서브 헤더 ===== */
.kingi-sub-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
}
.kingi-selected-info{
    font-size:12px;
    color:#333;
    font-weight:600;
    min-height:20px;
    line-height:20px;
}

/* ===== 금기증 버튼 그리드 (doc-contra-btn 스타일) ===== */
.kingi-btn-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-bottom:10px;
}
.btn-kingi{
    padding:8px 6px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:11px;
    font-weight:500;
    cursor:pointer;
    text-align:center;
    transition:all .15s;
    font-family:'Noto Sans KR',sans-serif;
    color:#555;
    -webkit-user-select:none;user-select:none;
    -webkit-appearance:none;appearance:none;
}
.btn-kingi:hover{background:#f5f5f5;border-color:#ccc}
.btn-kingi.selected{background:#444;color:#fff;border-color:#444}
.btn-kingi.selected:hover{background:#555;border-color:#555}

/* ===== 진단서 생성 버튼 (doc-output-btn) ===== */
.doc-output-btn{
    width:100%;
    margin-top:6px;
    padding:10px;
    background:#333;
    color:#fff;
    border:none;
    border-radius:6px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    font-family:'Noto Sans KR',sans-serif;
    transition:background .15s;
    -webkit-appearance:none;appearance:none;
}
.doc-output-btn:hover{background:#555}

/* ===== 결과 태그 ===== */
.result-tag{
    display:inline-flex;
    flex-wrap:wrap;
    gap:5px;
    align-items:center;
    margin-bottom:8px;
}
.result-tag:empty{display:none;margin:0}
.result-tag .tag-label{
    display:inline-block;
    padding:3px 10px;
    font-size:11px;
    font-weight:700;
    border-radius:4px;
    background:#444;
    color:#fff;
    white-space:nowrap;
    line-height:1.5;
}

/* ===== 결과 텍스트영역 ===== */
.result-area{
    width:100%;
    flex:1;
    min-height:200px;
    padding:10px;
    font-size:13px;
    line-height:1.6;
    font-family:'Noto Sans KR',sans-serif;
    border:1px solid #ddd;
    border-radius:8px;
    background:#f8f8f8;
    resize:none;
    -webkit-appearance:none;appearance:none;
}
.result-area:focus{outline:none;border-color:#999;background:#fff}

/* ===== 토스트 ===== */
.copy-toast{
    position:fixed;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    background:rgba(0,0,0,.75);
    color:#fff;
    padding:12px 28px;
    border-radius:8px;
    font-size:14px;
    z-index:300;
    pointer-events:none;
    opacity:0;
    transition:opacity .3s;
}
.copy-toast.show{opacity:1}

/* ===== 스크롤바 ===== */
.panel-body::-webkit-scrollbar{width:6px}
.panel-body::-webkit-scrollbar-track{background:transparent}
.panel-body::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}

/* ===========================================================
   반응형
   =========================================================== */

@media(max-width:900px){
    .content-wrap{height:auto;overflow:auto}
    .content-grid{display:flex;flex-direction:column;height:auto}
    .panel{max-height:none;overflow:visible}
    .panel-body{overflow:visible}
    .result-area{min-height:300px}
}

@media(max-width:480px){
    .content-wrap{padding:10px}
    .content-grid{gap:10px}
    .panel-header{padding:12px 14px 8px;font-size:13px}
    .panel-body{padding:12px}
    .doc-std-btn{padding:8px 4px;font-size:11px}
    .btn-kingi{padding:7px 4px;font-size:10px}
    .doc-output-btn{padding:9px;font-size:12px}
    .result-area{min-height:200px;font-size:12px;padding:8px}
    .top-bar{padding:12px 14px;font-size:14px}
}