🏗️ 페이지 구조 & 레이아웃 완전 분석

명함 프로필 페이지의 HTML DOM 구조, 각 요소의 ID/Class, 역할을 완전히 분석합니다.

전체 DOM 트리 구조

<body onclick="resizeImg()">
├── <input type="hidden" id="mem_id">          ← 로그인 사용자 ID
├── <input type="hidden" id="send_ids">        ← 전송 대상 ID 목록
├── <input type="hidden" id="exp_status">      ← 체험판 상태
├── <input type="hidden" id="Gn_contents_limit" value="200">  ← 콘텐츠 제한
├── <iframe id="app" style="display:none">     ← 앱 통신용 숨은 iframe
├── <div id="zoomInVideo">                      ← 비디오 확대 팝업 (숨김)
│   └── <div id="btnZoomOut" onclick="clickZoomOut()">
├── <div id="contents_page">                   ← 콘텐츠 미리보기 (숨김)
│
├── <div id="wrap" class="common-wrap">        ← ★ 메인 래퍼
│   ├── <header id="header" style="position:fixed; z-index:100">
│   │   ├── 언어 선택 드롭다운 (한국어/영어/중국어/일본어/힌디어/프랑스어)
│   │   ├── IAM 로고 (왼쪽)
│   │   ├── 알림 배지 (중앙)
│   │   └── 메뉴 아이콘들 (오른쪽)
│   │       ├── #show_contents_mode (콘텐츠 모드 토글: 핀/이미지)
│   │       ├── #btn_notice (공지사항) → onclick="openNoticeModal()"
│   │       ├── #btn_ai_chat (GPT채팅) → href="[내부페이지]/[GPT채팅]"
│   │       ├── 검색 버튼 → onclick="showSample()"
│   │       ├── #btn_intro (안내) → onclick="showIntro()"
│   │       ├── 장바구니 → onclick="go_cart()"
│   │       └── #btn_login (로그인) → href="[내부페이지]/[로그인]"
│   │
│   ├── <div id="footer_menu" style="position:fixed; bottom:0">
│   │   ├── 앱홈 → onclick="goIamHome()"
│   │   ├── 내명함 → onclick="iam_mystory('...cur_win=my_info')"
│   │   ├── 추천 → onclick="iam_mystory('cur_win=we_story')"
│   │   ├── 명함관리 → onclick="location.href='[내부페이지]/[로그인]'"  ← 현재 활성화
│   │   ├── #btn_notice → 소식
│   │   ├── #btn_ai_chat → GPT채트
│   │   ├── 검색 → showSample()
│   │   └── #btn_intro → showIntro()
│   │
│   ├── <main id="star" class="common-wrap" style="margin-top:52px">
│   │   ├── <section id="middle">              ← ★ 종이명함 검색 & 리스트
│   │   │   ├── 탭 영역 (.tab-content #myTabContent)
│   │   │   └── <div class="tab-pane" id="paper">
│   │   │       ├── 검색바: #paper_search_str (input) + paper_submit() 버튼
│   │   │       ├── 명함 개수 표시: #paper_chk_count
│   │   │       ├── 정렬 드롭다운: paper_range('1'/'3'/'5', label)
│   │   │       ├── 프로필자동검색 설정: toggleAutoExpand(1)
│   │   │       ├── + 버튼: #paper_plus → add_paper_card() (앱에서만 보임)
│   │   │       └── 리스트 영역: #papercard_list (AJAX로 동적 로딩)
│   │   │           └── 각 항목 .list-item
│   │   │               ├── 체크박스 (name=paper_chk)
│   │   │               ├── 이름, 직책, 기관명, 전화번호
│   │   │               └── 수정/삭제/전화 버튼
│   │   │
│   │   └── <section id="bottom">              ← 콘텐츠 그리드 (샘플/몰)
│   │       └── .content_main (AJAX로 동적 로딩)
│   │
│   ├── <div id="ajax_div" style="display:none"> ← AJAX 응답 임시 저장
│   └── <footer id="footer">                   ← 푸터 (거의 빈 공간)
│
├── <div id="ajax-loading">                     ← AJAX 로딩 스피너
├── <div id="tutorial-loading">                 ← 튜토리얼 로딩
│
├── 여러 숨은 input들:
│   ├── #favorite (즐겨찾기)
│   ├── #check_rnum (인증번호 확인)
│   ├── #card_url value="[서비스도메인]/?cur_win=paper_card"
│   ├── #contents_mode value="up"
│   └── #contents_idx
│
└── 모달(Modal)들 (Bootstrap modal, 기본 숨김)
    ├── #settlement_contents_modal (결제/이용내역)
    ├── #card_send_modal (카드 전송)
    ├── #contents_send_modal (콘텐츠 전송)
    ├── #people_iam_modal (사람 IAM)
    ├── #install-modalwindow (앱 설치 안내)
    ├── #group_contents_list_modal (그룹 콘텐츠)
    ├── #paper_list_edit_modal ★ (종이명함 정보입력)
    ├── #paper_sender_edit_modal ★ (AI명함퍼널 발신자정보)
    ├── #show_paper_comment (코멘트 보기)
    ├── #card_con_modal (카드 콘텐츠 메뉴)
    ├── #sns-modalwindow (SNS 공유)
    ├── #mypage-modalwindow (마이페이지)
    └── #preview_aiprompt_modal (AI 프롬프트 미리보기)

핵심 DOM 요소 상세

헤더 (header)

position:fixed로 항상 화면 상단에 고정됩니다. z-index:100으로 다른 요소 위에 표시됩니다.

요소	기능
언어 드롭다운	한국어/영어/중국어/일본어/힌디어/프랑스어 전환 (set_language)
IAM 로고	좌측 브랜드 로고 (클릭 시 홈으로)
#show_contents_mode	콘텐츠 표시 모드 토글 (이미지↔핀 모드)
#btn_notice	공지사항 모달 열기
#btn_login	로그인/회원가입 페이지 링크

푸터 메뉴 (footer_menu)

position:fixed로 항상 화면 하단에 고정됩니다. 높이 60px, 흰 배경에 상단 경계선.

탭	함수 호출	대상 창
앱홈	goIamHome()	/m (모바일홈)
내명함	iam_mystory('K956MVFvn43288398&type=image&cur_win=my_info')	my_info
추천	iam_mystory('cur_win=we_story&type=pin&pre_win=paper_card')	we_story
명함관리	location.href='[내부페이지]/[로그인]'	★ 현재 활성

레이아웃 모드

key1_gwc_show 값에 따라 두 가지 레이아웃이 적용됩니다:

모드 1: 일반 모드 (key1_gwc_show ≠ '4')

#wrap 최대너비: 기본값 (Bootstrap container)
#wecon_search_div: 표시됨
미디어 스크롤: overflow-y: hidden (기본)

모드 2: 와이드 모드 (key1_gwc_show == '4')

wide_show='Y' 이고 화면너비>650px → #wrap 최대너비: 85%
wide_show≠'Y' 또는 화면너비≤650px → #wrap 최대너비: 777px
#wecon_search_div: 숨김
핀 모드(contents_mode_gwc_1=='pin'): .media-inner 최대높이 350px
이미지 모드: .media-inner 최대높이 650px

반응형 동작

checkMobile() 함수 결과에 따라:

환경	카드 너비	미디어 최대 높이
모바일	49% (2열)	350px
데스크탑	24% (4열), 최소 130px	기본값

💡 핵심 포인트: 페이지의 모든 위치 기반 요소(헤더, 푸터)는 position:fixed로 고정되어 있어 스크롤해도 항상 보입니다. 실제 콘텐츠는 #star 영역(margin-top:52px)에 표시됩니다.

주요 CSS 클래스

클래스	파일	용도
.common-wrap	style.css	메인 래퍼 (최대너비, 중앙정렬, 패딩)
.square	iam.css	110% 비율 박스 (padding-bottom 트릭)
.content	iam.css	카드 상단 85% (이미지 영역)
.content2	iam.css	카드 하단 15% (텍스트 정보)
.btn-active	iam.css	활성 버튼 (녹색 #99cc00)