2025-12-22 13:30:59 +09:00
<! DOCTYPE html >
< html lang = " ko " >
< head >
< meta charset = " UTF-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > KoDATA EW 리포트 인터뷰 계획안 - SAM Project </ title >
2026-01-31 18:47:01 +09:00
<!-- Favicon -->
< link rel = " apple-touch-icon " sizes = " 180x180 " href = " ../img/apple-touch-icon.png " >
< link rel = " icon " type = " image/png " sizes = " 32x32 " href = " ../img/favicon-32x32.png " >
< link rel = " icon " type = " image/png " sizes = " 16x16 " href = " ../img/favicon-16x16.png " >
< link rel = " shortcut icon " href = " ../img/favicon.png " >
2025-12-22 13:30:59 +09:00
<!-- Fonts : Pretendard -->
< link rel = " stylesheet " as = " style " crossorigin href = " https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css " />
<!-- Tailwind CSS CDN -->
< script src = " https://cdn.tailwindcss.com " ></ script >
< script >
tailwind . config = {
theme : {
extend : {
fontFamily : {
sans : [ 'Pretendard' , 'sans-serif' ],
},
borderRadius : {
'card' : '20px' ,
},
colors : {
primary : {
50 : '#f0f9ff' ,
100 : '#e0f2fe' ,
200 : '#bae6fd' ,
300 : '#7dd3fc' ,
400 : '#38bdf8' ,
500 : '#0ea5e9' ,
600 : '#0284c7' ,
700 : '#0369a1' ,
800 : '#075985' ,
900 : '#0c4a6e' ,
},
}
}
}
}
</ script >
<!-- Lucide Icons -->
< script src = " https://unpkg.com/lucide@latest " ></ script >
< style >
. glass - sidebar {
background : rgba ( 255 , 255 , 255 , 0.7 );
backdrop - filter : blur ( 10 px );
}
. glass - header {
background : rgba ( 255 , 255 , 255 , 0.8 );
backdrop - filter : blur ( 12 px );
}
@ media print {
. no - print { display : none ! important ; }
aside { display : none ! important ; }
main { width : 100 % ! important ; margin - left : 0 ! important ; }
. scroll - mt - 24 { scroll - margin - top : 0 ! important ; }
}
. stat - card {
transition : transform 0.2 s , box - shadow 0.2 s ;
}
. stat - card : hover {
transform : translateY ( - 2 px );
box - shadow : 0 10 px 25 px - 5 px rgba ( 0 , 0 , 0 , 0.05 );
}
. question - card :: before {
content : '' ;
position : absolute ;
left : 0 ;
top : 0 ;
bottom : 0 ;
width : 4 px ;
border - radius : 4 px 0 0 4 px ;
}
. question - card - high :: before { background - color : #f43f5e; }
. question - card - medium :: before { background - color : #f59e0b; }
. question - card - low :: before { background - color : #94a3b8; }
2025-12-23 09:19:59 +09:00
/* Interview Mode Overrides */
. interview - mode . internal - only { display : none ! important ; }
. interview - mode aside { display : none ! important ; }
. interview - mode main { margin - left : 0 ! important ; max - width : 6 xl ! important ; }
. interview - mode . question - card :: before { display : none ! important ; }
2025-12-22 13:30:59 +09:00
</ style >
</ head >
< ? php
$MEETING_OVERVIEW = [
2025-12-22 19:55:12 +09:00
'date' => '12월 23일(화) 오후 2시 예정' ,
'target' => 'KoDATA 정성천 차장' ,
2025-12-22 13:30:59 +09:00
'purpose' => [
'EW 리포트 API 도입 비용 산정' ,
'데이터 가공 및 재제공에 따른 법적 리스크 점검' ,
'서비스 종료 이슈 대응'
]
];
$SECTIONS = [
[
'id' => 'cost' ,
'title' => 'Ⅰ ,
'subtitle' => 'Cost Efficiency & Terms' ,
'icon' => 'credit-card' ,
'color' => 'blue' ,
'questions' => [
[ 'id' => 'c1' , 'text' => '과금 체계: EW 리포트 API 호출 시 건당 과금 방식인지, 아니면 정액제인지 명확한 기준은 무엇입니까?' , 'priority' => 'high' ],
[ 'id' => 'c2' , 'text' => 'API 방식별 차등: VALUE(JSON/XML) 방식과 WEB API(HTML/URL) 방식 간에 이용료 차이가 존재합니까?' , 'priority' => 'high' ],
[ 'id' => 'c3' , 'text' => '대량 호출 할인: SAM 프로젝트 규모에 따라 호출량이 늘어날 경우 적용 가능한 슬라이딩 단가제(구간별 할인)가 있습니까?' , 'priority' => 'medium' ],
[ 'id' => 'c4' , 'text' => '유지보수비: API 연동 이후 발생하는 별도의 기술 지원료나 유지보수 비용이 포함됩니까?' , 'priority' => 'medium' ]
]
],
[
'id' => 'legal' ,
'title' => 'Ⅱ. 데이터 가공 및 법적 리스크' ,
'subtitle' => 'Legal Stability & Usage Rights' ,
'icon' => 'shield-check' ,
'color' => 'emerald' ,
'questions' => [
[ 'id' => 'l1' , 'text' => '데이터 가공 권한: VALUE 방식을 통해 받은 JSON 데이터를 SAM 프로젝트의 UI에 맞춰 재가공하거나, 다른 지표와 결합하여 새로운 인사이트를 도출해 제공하는 것이 저작권법상 허용됩니까?' , 'priority' => 'high' ],
[ 'id' => 'l2' , 'text' => '재제공 범위: KoDATA에서 제공하는 EW등급, 등급산출사유 등의 정보를 SAM 프로젝트 사용자(제3자)에게 열람하게 하는 것이 계약상 위반 소지가 없습니까?' , 'priority' => 'high' ],
[ 'id' => 'l3' , 'text' => '데이터 저장: API로 호출한 기업 개요, 재무 정보, 연체 정보 등을 당사 DB에 영구적 또는 일시적으로 저장하여 리포트 이력 관리용으로 사용할 수 있습니까?' , 'priority' => 'medium' ],
[ 'id' => 'l4' , 'text' => '법적 책임 소재: KoDATA 제공 데이터의 오류로 인해 SAM 프로젝트 사용자가 의사결정 손실을 보았을 경우, 법적 책임의 한계와 면책 조항은 어떻게 됩니까?' , 'priority' => 'high' ]
]
],
[
'id' => 'continuity' ,
'title' => 'Ⅲ. 서비스 종료 및 연속성 대응' ,
'subtitle' => 'Business Continuity' ,
'icon' => 'refresh-ccw' ,
'color' => 'amber' ,
'questions' => [
[ 'id' => 's1' , 'text' => " 종료 사유 및 영향: 2026년 2월 27일 종료 예정인 '기업신용안심서비스'의 종료 사유가 API 서비스의 품질 저하나 데이터 공급 중단과 관련이 있습니까? " , 'priority' => 'medium' ],
[ 'id' => 's2' , 'text' => " 대체 서비스: 서비스 종료 공지에서 언급된 '더 좋은 서비스'가 현재 SAM 프로젝트에서 검토 중인 EW 리포트 API와 어떤 차별점이 있습니까? " , 'priority' => 'medium' ],
[ 'id' => 's3' , 'text' => '전환 지원: 만약 향후 API 사양이나 서비스 체계가 변경될 경우, SAM 프로젝트가 중단 없이 운영될 수 있도록 하는 마이그레이션 지원 대책이 있습니까?' , 'priority' => 'medium' ]
]
],
[
'id' => 'technical' ,
'title' => 'Ⅳ. 기술적 활용 상세' ,
'subtitle' => 'Technical Integration' ,
'icon' => 'cpu' ,
'color' => 'slate' ,
'questions' => [
[ 'id' => 't1' , 'text' => '항목 선택: VALUE 방식을 선택할 경우, EW등급 외에 단기연체(신용정보원), 휴폐업정보 등 필요한 항목만 선별하여 단가를 낮추는 구성이 가능합니까?' , 'priority' => 'medium' ],
[ 'id' => 't2' , 'text' => " 'VALUE API 목록WEB' 방식 사용 시 HTML에 인코딩된 CSS가 SAM 프로젝트의 기존 스타일과 충돌할 가능성에 대해 기술적 가이드를 제공합니까? " , 'priority' => 'low' ]
]
]
];
2025-12-23 09:19:59 +09:00
$view = $_GET [ 'view' ] ? ? 'admin' ;
$isInterview = ( $view === 'partner' );
2025-12-22 13:30:59 +09:00
?>
2025-12-23 09:19:59 +09:00
< body class = " bg-slate-50 text-slate-900 font-sans selection:bg-primary-100 selection:text-primary-700 <?php echo $isInterview ? 'interview-mode' : ''; ?> " >
2025-12-22 13:30:59 +09:00
< div class = " min-h-screen flex flex-col md:flex-row " >
<!-- Sidebar - Desktop Only -->
< aside class = " hidden md:flex w-72 glass-sidebar border-r border-slate-200 flex-col sticky top-0 h-screen no-print z-50 " >
< div class = " p-8 border-b border-slate-100/50 " >
< div class = " flex items-center gap-2 mb-2 " >
< div class = " bg-indigo-600 text-white w-8 h-8 rounded-lg flex items-center justify-center font-black text-xs shadow-lg shadow-indigo-200 " > SAM </ div >
< span class = " font-extrabold text-slate-800 tracking-tight text-lg " > KoDATA Plan </ span >
</ div >
< p class = " text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] " > Internal Guideline </ p >
</ div >
< nav class = " flex-1 p-6 space-y-8 overflow-y-auto " >
< div >
< p class = " px-3 mb-4 text-[10px] font-black text-slate-400 uppercase tracking-widest " > Main Overview </ p >
< a href = " #overview " class = " flex items-center gap-3 px-4 py-3 text-sm font-semibold text-slate-600 hover:bg-white hover:text-indigo-600 rounded-xl transition-all hover:shadow-sm group " >
< i data - lucide = " info " class = " w-4 h-4 text-slate-400 group-hover:text-indigo-600 " ></ i >
인터뷰 개요
</ a >
</ div >
< div >
< p class = " px-3 mb-4 text-[10px] font-black text-slate-400 uppercase tracking-widest " > Questions </ p >
< div class = " space-y-1 " >
< ? php foreach ( $SECTIONS as $section ) : ?>
< a href = " #<?php echo $section['id'] ; ?> " class = " flex items-center gap-3 px-4 py-3 text-sm font-semibold text-slate-600 hover:bg-white hover:text-indigo-600 rounded-xl transition-all hover:shadow-sm group " >
< i data - lucide = " <?php echo $section['icon'] ; ?> " class = " w-4 h-4 text-slate-300 group-hover:text-indigo-400 " ></ i >
< ? php echo str_replace ([ 'Ⅰ , 'Ⅱ. ' , 'Ⅲ. ' , 'Ⅳ. ' ], '' , $section [ 'title' ]); ?>
</ a >
< ? php endforeach ; ?>
</ div >
</ div >
2025-12-23 09:19:59 +09:00
< div class = " internal-only " >
2025-12-22 13:30:59 +09:00
< p class = " px-3 mb-4 text-[10px] font-black text-slate-400 uppercase tracking-widest " > Strategy </ p >
< a href = " #tips " class = " flex items-center gap-3 px-4 py-3 text-sm font-semibold text-slate-600 hover:bg-white hover:text-indigo-600 rounded-xl transition-all hover:shadow-sm group " >
< i data - lucide = " lightbulb " class = " w-4 h-4 text-amber-400 " ></ i >
협상 전략 및 팁
</ a >
</ div >
</ nav >
< div class = " p-6 border-t border-slate-100 bg-slate-50/50 " >
< div class = " flex items-center gap-3 p-4 bg-white border border-slate-200 rounded-2xl shadow-sm " >
< div class = " w-10 h-10 rounded-full bg-gradient-to-tr from-indigo-500 to-primary-400 flex items-center justify-center text-white font-black text-sm shadow-md " > JD </ div >
< div >
< p class = " text-xs font-black text-slate-900 leading-tight " > SAM Lead </ p >
< p class = " text-[10px] text-slate-400 font-bold uppercase mt-0.5 " > Project Manager </ p >
</ div >
</ div >
</ div >
</ aside >
<!-- Main Content Area -->
< main class = " flex-1 flex flex-col min-w-0 " >
< header class = " sticky top-0 z-40 flex h-20 items-center justify-between border-b border-slate-200 glass-header px-8 no-print " >
2025-12-23 09:19:59 +09:00
< div class = " flex items-center gap-6 " >
< h2 class = " text-sm font-black text-slate-800 truncate uppercase tracking-widest flex items-center gap-3 " >
< span class = " w-2 h-2 rounded-full bg-indigo-500 animate-pulse " ></ span >
< ? php echo $isInterview ? 'Partnership Discussion Agenda' : 'KoDATA EW API Interview Dashboard' ; ?>
</ h2 >
<!-- View Mode Switcher -->
< div class = " flex bg-slate-100 p-1 rounded-xl border border-slate-200 shadow-inner " >
< a href = " ?view=admin " class = " px-4 py-1.5 rounded-lg text-xs font-bold transition-all <?php echo ! $isInterview ? 'bg-white text-indigo-600 shadow-sm border border-slate-200' : 'text-slate-400 hover:text-slate-600'; ?> " > 본사 가이드 </ a >
< a href = " ?view=partner " class = " px-4 py-1.5 rounded-lg text-xs font-bold transition-all <?php echo $isInterview ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-100' : 'text-slate-400 hover:text-slate-600'; ?> " > 인터뷰 모드 </ a >
</ div >
</ div >
2025-12-22 13:30:59 +09:00
< div class = " flex items-center gap-4 " >
< button class = " p-2.5 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition-all " >
< i data - lucide = " share-2 " class = " w-5 h-5 " ></ i >
</ button >
< button
onclick = " window.print() "
class = " flex items-center gap-2.5 px-6 py-3 bg-slate-900 text-white rounded-xl text-sm font-black hover:bg-slate-800 transition-all shadow-xl shadow-slate-200 active:scale-95 "
>
< i data - lucide = " printer " class = " w-4 h-4 " ></ i >
PDF 출력
</ button >
</ div >
</ header >
< div class = " flex-1 p-8 sm:p-12 max-w-5xl mx-auto w-full space-y-20 " >
<!-- Hero / Overview -->
< div id = " overview " class = " relative overflow-hidden rounded-[32px] bg-slate-900 p-10 sm:p-16 shadow-2xl shadow-indigo-100 scroll-mt-32 " >
< div class = " absolute top-0 right-0 p-12 opacity-5 pointer-events-none " >
< i data - lucide = " package " class = " w-64 h-64 text-white rotate-12 " ></ i >
</ div >
< div class = " relative z-10 space-y-8 " >
< div class = " inline-flex items-center gap-2.5 px-4 py-2 bg-indigo-500/10 text-indigo-300 rounded-full text-xs font-black border border-indigo-500/20 uppercase tracking-widest " >
< i data - lucide = " calendar " class = " w-3.5 h-3.5 " ></ i >
< ? php echo $MEETING_OVERVIEW [ 'date' ]; ?>
</ div >
< div class = " space-y-4 " >
< h1 class = " text-4xl sm:text-6xl font-black text-white leading-[1.15] tracking-tight " >
2025-12-23 09:19:59 +09:00
< ? php echo $isInterview ? 'KoDATA Partnership' : 'KoDATA EW 리포트' ; ?> <br />
< span class = " text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-primary-400 " >
< ? php echo $isInterview ? 'Discussion Agenda' : '인터뷰 계획안' ; ?>
</ span >
2025-12-22 13:30:59 +09:00
</ h1 >
< p class = " text-slate-400 max-w-2xl text-xl font-medium leading-[1.6] " >
2025-12-23 09:19:59 +09:00
< ? php echo $isInterview
? '상호 협력을 통한 데이터 에코시스템 구축 및 <br class="hidden sm:block" /> 안정적인 서비스 제공을 위한 질의 아젠다입니다.'
: '비용 효율성과 데이터 활용의 법적 안정성을 최우선으로 고려한 <br class="hidden sm:block" /> SAM 프로젝트의 데이터 소싱 가이드라인입니다.' ; ?>
2025-12-22 13:30:59 +09:00
</ p >
</ div >
2025-12-23 09:19:59 +09:00
< div class = " grid sm:grid-cols-1 md:grid-cols-2 gap-6 pt-6 " >
2025-12-22 13:30:59 +09:00
< div class = " bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-6 flex items-start gap-4 hover:bg-white/10 transition-all duration-300 " >
< div class = " p-3 bg-indigo-500/20 rounded-2xl text-indigo-400 " >
< i data - lucide = " user " class = " w-6 h-6 " ></ i >
</ div >
< div >
2025-12-23 09:19:59 +09:00
< p class = " text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] mb-1 " > 참석 대상 </ p >
< p class = " text-white text-lg font-bold " >< ? php echo $MEETING_OVERVIEW [ 'target' ]; ?> 외 관계자</p>
2025-12-22 13:30:59 +09:00
</ div >
</ div >
< div class = " bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-6 flex items-start gap-4 hover:bg-white/10 transition-all duration-300 " >
< div class = " p-3 bg-indigo-500/20 rounded-2xl text-indigo-400 " >
< i data - lucide = " target " class = " w-6 h-6 " ></ i >
</ div >
< div >
2025-12-23 09:19:59 +09:00
< p class = " text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] mb-1 " > 논의 아젠다 </ p >
2025-12-22 13:30:59 +09:00
< ul class = " text-white font-bold text-base space-y-1 " >
< ? php foreach ( $MEETING_OVERVIEW [ 'purpose' ] as $purpose ) : ?>
2025-12-23 09:19:59 +09:00
< li class = " flex items-center gap-2 text-sm " >
2025-12-22 13:30:59 +09:00
< span class = " w-1 h-1 bg-indigo-500 rounded-full " ></ span >
< ? php echo $purpose ; ?>
</ li >
< ? php endforeach ; ?>
</ ul >
</ div >
</ div >
</ div >
</ div >
</ div >
2025-12-23 09:19:59 +09:00
<!-- Stats Summary ( Admin Only ) -->
< ? php if ( ! $isInterview ) : ?>
2025-12-22 13:30:59 +09:00
< div class = " grid grid-cols-2 lg:grid-cols-4 gap-6 " >
< ? php
$stats = [
[ 'label' => '총 질문수' , 'value' => '13건' , 'color' => 'text-slate-900' , 'bg' => 'bg-white' ],
[ 'label' => '필수 항목' , 'value' => '6건' , 'color' => 'text-rose-600' , 'bg' => 'bg-rose-50/50' ],
2025-12-22 19:55:12 +09:00
[ 'label' => '미팅 시간' , 'value' => '오후 2시' , 'color' => 'text-slate-900' , 'bg' => 'bg-white' ],
2025-12-22 13:30:59 +09:00
[ 'label' => '전략 우선순위' , 'value' => '비용/법무' , 'color' => 'text-indigo-600' , 'bg' => 'bg-indigo-50/50' ],
];
foreach ( $stats as $stat ) : ?>
< div class = " <?php echo $stat['bg'] ; ?> p-8 rounded-[32px] border border-slate-200 shadow-sm stat-card " >
< p class = " text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-2 " >< ? php echo $stat [ 'label' ]; ?> </p>
< p class = " text-3xl font-black <?php echo $stat['color'] ; ?> " >< ? php echo $stat [ 'value' ]; ?> </p>
</ div >
< ? php endforeach ; ?>
</ div >
2025-12-23 09:19:59 +09:00
< ? php endif ; ?>
2025-12-22 13:30:59 +09:00
<!-- Sections -->
2025-12-23 09:19:59 +09:00
< div class = " space-y-32 " >
2025-12-22 13:30:59 +09:00
< ? php foreach ( $SECTIONS as $section ) : ?>
< section id = " <?php echo $section['id'] ; ?> " class = " scroll-mt-32 " >
< div class = " flex items-center justify-between mb-8 group " >
< div class = " flex items-center gap-5 " >
< div class = " p-4 rounded-3xl bg-white shadow-xl shadow-slate-200/50 group-hover:scale-110 transition-transform duration-300 " >
< i data - lucide = " <?php echo $section['icon'] ; ?> " class = " w-8 h-8 text-indigo-600 " ></ i >
</ div >
< div >
2025-12-23 09:19:59 +09:00
< h3 class = " text-3xl font-black text-slate-900 leading-tight " >< ? php echo $isInterview ? str_replace ([ 'Ⅰ , 'Ⅱ. ' , 'Ⅲ. ' , 'Ⅳ. ' ], '' , $section [ 'title' ]) : $section [ 'title' ]; ?> </h3>
2025-12-22 13:30:59 +09:00
< p class = " text-xs text-slate-400 font-bold uppercase tracking-[0.2em] mt-1 " >< ? php echo $section [ 'subtitle' ]; ?> </p>
</ div >
</ div >
< div class = " hidden sm:block h-[2px] flex-1 mx-8 bg-slate-100 rounded-full " ></ div >
</ div >
< div class = " grid gap-6 " >
< ? php foreach ( $section [ 'questions' ] as $idx => $q ) : ?>
2025-12-23 09:19:59 +09:00
< div class = " relative group bg-white rounded-[28px] border border-slate-200 p-8 shadow-sm hover:shadow-2xl hover:shadow-indigo-100/50 hover:border-indigo-100 transition-all duration-300 question-card <?php echo ! $isInterview ? 'question-card-'. $q['priority'] : ''; ?> " >
2025-12-22 13:30:59 +09:00
< div class = " flex gap-6 " >
< div class = " shrink-0 flex items-center justify-center w-10 h-10 rounded-2xl bg-slate-50 text-xs font-black text-slate-400 border border-slate-100 group-hover:bg-indigo-600 group-hover:text-white group-hover:border-indigo-600 transition-all duration-300 " >
< ? php echo str_pad ( $idx + 1 , 2 , '0' , STR_PAD_LEFT ); ?>
</ div >
< div class = " space-y-4 flex-1 " >
< p class = " text-slate-700 leading-relaxed font-semibold text-lg " >
< ? php
$parts = explode ( ':' , $q [ 'text' ], 2 );
if ( count ( $parts ) > 1 ) : ?>
< span class = " text-slate-900 font-black relative " >
< ? php echo $parts [ 0 ]; ?> :
< span class = " absolute bottom-0 left-0 w-full h-[6px] bg-indigo-500/10 -z-10 rounded-sm " ></ span >
</ span >
< ? php echo $parts [ 1 ]; ?>
< ? php else : echo $q [ 'text' ]; endif ; ?>
</ p >
2025-12-23 09:19:59 +09:00
< ? php if ( ! $isInterview ) : ?>
2025-12-22 13:30:59 +09:00
< div class = " flex items-center gap-4 " >
< ? php if ( $q [ 'priority' ] === 'high' ) : ?>
< span class = " inline-flex items-center gap-1.5 px-3 py-1 bg-rose-50 text-rose-600 rounded-full text-[10px] font-black uppercase tracking-widest border border-rose-100 " >
< span class = " w-1 h-1 bg-rose-600 rounded-full animate-pulse " ></ span >
Essential
</ span >
< ? php endif ; ?>
< button class = " flex items-center gap-2 text-[10px] font-black text-slate-400 hover:text-indigo-600 transition-all uppercase tracking-widest bg-slate-50 px-3 py-1.5 rounded-lg border border-transparent hover:border-indigo-100 hover:bg-white active:scale-95 " >
< i data - lucide = " check-circle-2 " class = " w-3.5 h-3.5 " ></ i >
Check Done
</ button >
</ div >
2025-12-23 09:19:59 +09:00
< ? php endif ; ?>
2025-12-22 13:30:59 +09:00
</ div >
</ div >
</ div >
< ? php endforeach ; ?>
</ div >
</ section >
< ? php endforeach ; ?>
2025-12-23 09:19:59 +09:00
<!-- Tips Section ( Admin Only ) -->
< ? php if ( ! $isInterview ) : ?>
< div id = " tips " class = " scroll-mt-32 space-y-10 internal-only " >
2025-12-22 13:30:59 +09:00
< div class = " flex items-center gap-5 " >
< div class = " p-4 rounded-3xl bg-amber-100 shadow-xl shadow-amber-100/50 " >
< i data - lucide = " lightbulb " class = " w-8 h-8 text-amber-600 " ></ i >
</ div >
< h3 class = " text-3xl font-black text-slate-900 " > 인터뷰 협상 전략 및 팁 </ h3 >
</ div >
< div class = " relative overflow-hidden bg-white border border-slate-200 rounded-[40px] p-10 sm:p-14 shadow-2xl shadow-slate-200/50 " >
< div class = " absolute top-0 right-0 p-12 opacity-[0.03] pointer-events-none " >
< i data - lucide = " lightbulb " class = " w-48 h-48 text-amber-500 " ></ i >
</ div >
< div class = " space-y-12 " >
< div class = " relative " >
< p class = " text-2xl font-bold text-slate-800 leading-[1.6] italic pl-8 border-l-8 border-amber-400 py-2 " >
" 데이터의 소유권은 KoDATA에 있지만, <span class= " bg - amber - 100 text - amber - 900 px - 2 py - 0.5 rounded - lg " >활용권은 SAM 프로젝트</span>에 있다 " 는 점을 명확히 하고 , 가공된 데이터가 원본을 대체하지 않음을 강조하십시오 .
</ p >
</ div >
< div class = " grid md:grid-cols-2 gap-12 " >
< div class = " space-y-6 " >
< div class = " flex items-center gap-4 " >
< div class = " p-3 bg-amber-50 rounded-2xl text-amber-600 " >
< i data - lucide = " chef-hat " class = " w-6 h-6 " ></ i >
</ div >
< h4 class = " text-xl font-black text-slate-900 " > 식재료와 레시피의 비유 </ h4 >
</ div >
< p class = " text-slate-600 leading-[1.8] text-lg font-medium " >
이 과정은 마치 < strong class = " text-slate-900 font-black underline decoration-amber-300 underline-offset-4 " > 고급 식재료 ( KoDATA 데이터 ) </ strong > 를 구매하여 < br />
우리만의 < strong class = " text-slate-900 font-black underline decoration-indigo-300 underline-offset-4 " > 레시피 ( SAM 프로젝트 ) </ strong > 로 요리해 < br />
손님에게 대접할 때의 과정과 같습니다 .
</ p >
</ div >
< div class = " bg-slate-50 rounded-3xl p-8 border border-slate-100 shadow-inner " >
< h5 class = " text-[10px] font-black text-slate-400 uppercase tracking-[0.25em] mb-6 flex items-center gap-2 " >
< span class = " w-2 h-2 bg-amber-500 rounded-full " ></ span >
Core Negotiation Points
</ h5 >
< ul class = " space-y-6 " >
< ? php
$tips = [
" 이 요리를 우리 메뉴로 팔아도 되는가? (활용권 권한 확보) " ,
" 재료비는 얼마나 깎아줄 수 있는가? (구간별 대량 할인) " ,
" 재료 공급이 중단될 경우 대안은? (데이터 지속성 협의) "
];
foreach ( $tips as $tip ) : ?>
< li class = " flex items-start gap-4 group " >
< div class = " mt-1 w-6 h-6 rounded-full bg-white flex items-center justify-center text-amber-500 shadow-sm border border-slate-100 group-hover:bg-amber-500 group-hover:text-white transition-all duration-300 " >
< i data - lucide = " check " class = " w-3.5 h-3.5 " ></ i >
</ div >
< span class = " text-slate-700 font-bold text-lg group-hover:text-amber-900 transition-colors " >< ? php echo $tip ; ?> </span>
</ li >
< ? php endforeach ; ?>
</ ul >
</ div >
</ div >
</ div >
</ div >
</ div >
2025-12-23 09:19:59 +09:00
< ? php endif ; ?>
2025-12-22 13:30:59 +09:00
</ div >
< footer class = " pt-20 pb-12 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-6 " >
< div class = " flex items-center gap-3 " >
< div class = " bg-indigo-600 text-white w-6 h-6 rounded flex items-center justify-center font-black text-[10px] " > SAM </ div >
2025-12-23 09:19:59 +09:00
< span class = " text-sm font-black text-slate-400 uppercase tracking-widest " >< ? php echo $isInterview ? 'Discussion Agenda' : 'Internal Document' ; ?> </span>
2025-12-22 13:30:59 +09:00
</ div >
< p class = " text-sm text-slate-400 font-medium " > © 2025 CodeBridge - X </ p >
< div class = " flex gap-4 " >
< div class = " w-8 h-8 rounded-full bg-slate-100 " ></ div >
< div class = " w-8 h-8 rounded-full bg-slate-100 " ></ div >
</ div >
</ footer >
</ div >
</ main >
</ div >
< script >
// Initialize Lucide Icons
lucide . createIcons ();
// Smooth Scroll for Navigation
document . querySelectorAll ( 'a[href^="#"]' ) . forEach ( anchor => {
anchor . addEventListener ( 'click' , function ( e ) {
e . preventDefault ();
2025-12-23 09:19:59 +09:00
const targetId = this . getAttribute ( 'href' );
if ( targetId && targetId !== '#' ) {
const targetElement = document . querySelector ( targetId );
if ( targetElement ) {
targetElement . scrollIntoView ({
behavior : 'smooth'
});
}
}
2025-12-22 13:30:59 +09:00
});
});
</ script >
</ body >
2025-12-23 09:19:59 +09:00
</ html >
